Docker/documize
Docker/documize
1
0
Fork 0
mirror of https://github.com/documize/community.git synced 2025-07-20 13:49:42 +02:00
Code Releases Activity

section UX complete

Browse source
This commit is contained in:
Harvey Kandola 2017-12-09 12:21:14 +00:00
parent c12d66643c
commit 9dcaf697a8
18 changed files with 30 additions and 632 deletions
Download patch file Download diff file Expand all files Collapse all files

16
gui/app/components/document/document-index.js
View file

@ -10,13 +10,11 @@
// https://documize.com
import { computed } from '@ember/object';
import Component from '@ember/component';
import tocUtil from '../../utils/toc';
import NotifierMixin from '../../mixins/notifier';
import TooltipMixin from '../../mixins/tooltip';
export default Component.extend(NotifierMixin, TooltipMixin, {
export default Component.extend(NotifierMixin, {
document: {},
folder: {},
pages: [],
@ -42,17 +40,6 @@ export default Component.extend(NotifierMixin, TooltipMixin, {
}
},
didRender() {
this._super(...arguments);
if (this.session.authenticated) {
this.addTooltip(document.getElementById("toc-up-button"));
this.addTooltip(document.getElementById("toc-down-button"));
this.addTooltip(document.getElementById("toc-outdent-button"));
this.addTooltip(document.getElementById("toc-indent-button"));
}
},
didInsertElement() {
this._super(...arguments);
@ -63,7 +50,6 @@ export default Component.extend(NotifierMixin, TooltipMixin, {
this._super(...arguments);
this.eventBus.unsubscribe('documentPageAdded');
this.destroyTooltips();
},
onDocumentPageAdded(pageId) {

18
gui/app/components/document/document-sidebar.js
View file

@ -10,26 +10,10 @@
// https://documize.com
import Component from '@ember/component';
import NotifierMixin from '../../mixins/notifier';
import TooltipMixin from '../../mixins/tooltip';
export default Component.extend(NotifierMixin, TooltipMixin, {
export default Component.extend({
tab: 'index',
didRender() {
this._super(...arguments);
if (this.get('permissions.documentEdit')) {
this.addTooltip(document.getElementById("document-index-button"));
this.addTooltip(document.getElementById("document-activity-button"));
}
},
willDestroyElement() {
this._super(...arguments);
this.destroyTooltips();
},
actions: {
onTabSwitch(tab) {
this.set('tab', tab);

79
gui/app/components/document/document-tab.js
View file

@ -1,79 +0,0 @@
// Copyright 2016 Documize Inc. <legal@documize.com>. All rights reserved.
//
// This software (Documize Community Edition) is licensed under
// GNU AGPL v3 http://www.gnu.org/licenses/agpl-3.0.en.html
//
// You can operate outside the AGPL restrictions by purchasing
// Documize Enterprise Edition and obtaining a commercial license
// by contacting <sales@documize.com>.
//
// https://documize.com
import { inject as service } from '@ember/service';
import Component from '@ember/component';
import NotifierMixin from '../../mixins/notifier';
import TooltipMixin from '../../mixins/tooltip';
export default Component.extend(NotifierMixin, TooltipMixin, {
sectionService: service('section'),
viewMode: true,
editMode: false,
didInsertElement() {
this.get('sectionService').refresh(this.get('document.id')).then((changes) => {
if (this.get('isDestroyed') || this.get('isDestroying')) {
return;
}
let oldPage = this.get('page');
if (is.undefined(changes) || is.undefined(oldPage)) {
return;
}
changes.forEach((newPage) => {
if (oldPage.get('id') === newPage.get('id')) {
oldPage.set('body', newPage.get('body'));
oldPage.set('revised', newPage.get('revised'));
this.showNotification(`Refreshed ${oldPage.get('title')}`);
}
});
});
},
actions: {
onExpand() {
this.set('pageId', this.get('page.id'));
this.set('expanded', !this.get('expanded'));
},
onSavePageAsBlock(block) {
this.attrs.onSavePageAsBlock(block);
},
onCopyPage(documentId) {
this.attrs.onCopyPage(this.get('page.id'), documentId);
},
onMovePage(documentId) {
this.attrs.onMovePage(this.get('page.id'), documentId);
},
onDeletePage(deleteChildren) {
let page = this.get('page');
if (is.undefined(page)) {
return;
}
let params = {
id: page.get('id'),
title: page.get('title'),
children: deleteChildren
};
this.attrs.onDeletePage(params);
}
}
});

7
gui/app/components/document/document-view.js
View file

@ -49,17 +49,14 @@ export default Component.extend(NotifierMixin, TooltipMixin, {
this._super(...arguments);
this.setupAddWizard();
let self = this;
$(".tooltipped").each(function(i, el) {
self.addTooltip(el);
});
this.renderTooltips();
},
willDestroyElement() {
this._super(...arguments);
$('.start-section:not(.start-section-empty-state)').off('.hoverIntent');
this.destroyTooltips();
this.removeTooltips();
},
contentLinkHandler() {

205
gui/app/components/document/tab-heading.js
View file

@ -1,205 +0,0 @@
// Copyright 2016 Documize Inc. <legal@documize.com>. All rights reserved.
//
// This software (Documize Community Edition) is licensed under
// GNU AGPL v3 http://www.gnu.org/licenses/agpl-3.0.en.html
//
// You can operate outside the AGPL restrictions by purchasing
// Documize Enterprise Edition and obtaining a commercial license
// by contacting <sales@documize.com>.
//
// https://documize.com
import Component from '@ember/component';
import { computed } from '@ember/object';
import { inject as service } from '@ember/service';
import TooltipMixin from '../../mixins/tooltip';
export default Component.extend(TooltipMixin, {
documentService: service('document'),
expanded: false,
deleteChildren: false,
menuOpen: false,
blockTitle: "",
blockExcerpt: "",
documentList: [], //includes the current document
documentListOthers: [], //excludes the current document
selectedDocument: null,
checkId: computed('page', function () {
let id = this.get('page.id');
return `delete-check-button-${id}`;
}),
menuTarget: computed('page', function () {
let id = this.get('page.id');
return `page-menu-${id}`;
}),
deleteButtonId: computed('page', function () {
let id = this.get('page.id');
return `delete-page-button-${id}`;
}),
publishButtonId: computed('page', function () {
let id = this.get('page.id');
return `publish-button-${id}`;
}),
publishDialogId: computed('page', function () {
let id = this.get('page.id');
return `publish-dialog-${id}`;
}),
blockTitleId: computed('page', function () {
let id = this.get('page.id');
return `block-title-${id}`;
}),
blockExcerptId: computed('page', function () {
let id = this.get('page.id');
return `block-excerpt-${id}`;
}),
copyButtonId: computed('page', function () {
let id = this.get('page.id');
return `copy-page-button-${id}`;
}),
copyDialogId: computed('page', function () {
let id = this.get('page.id');
return `copy-dialog-${id}`;
}),
moveButtonId: computed('page', function () {
let id = this.get('page.id');
return `move-page-button-${id}`;
}),
moveDialogId: computed('page', function () {
let id = this.get('page.id');
return `move-dialog-${id}`;
}),
hasMenuPermissions: computed('permissions', function() {
let permissions = this.get('permissions');
return permissions.get('documentDelete') || permissions.get('documentCopy') ||
permissions.get('documentMove') || permissions.get('documentTemplate');
}),
didRender() {
$("#" + this.get('blockTitleId')).removeClass('error');
$("#" + this.get('blockExcerptId')).removeClass('error');
},
actions: {
toggleExpand() {
this.set('expanded', !this.get('expanded'));
this.get('onExpand')();
},
onMenuOpen() {
if ($('#' + this.get('publishDialogId')).is( ":visible" )) {
return;
}
if ($('#' + this.get('copyDialogId')).is( ":visible" )) {
return;
}
if ($('#' + this.get('moveDialogId')).is( ":visible" )) {
return;
}
this.set('menuOpen', !this.get('menuOpen'));
},
onEdit() {
this.attrs.onEdit();
},
deletePage() {
this.attrs.onDeletePage(this.get('deleteChildren'));
},
onSavePageAsBlock() {
let page = this.get('page');
let titleElem = '#' + this.get('blockTitleId');
let blockTitle = this.get('blockTitle');
if (is.empty(blockTitle)) {
$(titleElem).addClass('error');
return;
}
let excerptElem = '#' + this.get('blockExcerptId');
let blockExcerpt = this.get('blockExcerpt');
blockExcerpt = blockExcerpt.replace(/\n/g, "");
if (is.empty(blockExcerpt)) {
$(excerptElem).addClass('error');
return;
}
this.get('documentService').getPageMeta(this.get('document.id'), page.get('id')).then((pm) => {
let block = {
folderId: this.get('folder.id'),
contentType: page.get('contentType'),
pageType: page.get('pageType'),
title: blockTitle,
body: page.get('body'),
excerpt: blockExcerpt,
rawBody: pm.get('rawBody'),
config: pm.get('config'),
externalSource: pm.get('externalSource')
};
this.attrs.onSavePageAsBlock(block);
this.set('menuOpen', false);
this.set('blockTitle', '');
this.set('blockExcerpt', '');
$(titleElem).removeClass('error');
$(excerptElem).removeClass('error');
return true;
});
},
// Copy/move actions
onCopyDialogOpen() {
// Fetch document targets once.
if (this.get('documentList').length > 0) {
return;
}
this.get('documentService').getPageMoveCopyTargets().then((d) => {
let me = this.get('document');
this.set('documentList', d);
this.set('documentListOthers', d.filter((item) => item.get('id') !== me.get('id')));
});
},
onTargetChange(d) {
this.set('selectedDocument', d);
},
onCopyPage() {
// can't proceed if no data
if (this.get('documentList.length') === 0) {
return;
}
let targetDocumentId = this.get('document.id');
if (is.not.null(this.get('selectedDocument'))) {
targetDocumentId = this.get('selectedDocument.id');
}
this.attrs.onCopyPage(targetDocumentId);
return true;
},
onMovePage() {
// can't proceed if no data
if (this.get('documentListOthers.length') === 0) {
return;
}
if (is.null(this.get('selectedDocument'))) {
this.set('selectedDocument', this.get('documentListOthers')[0]);
}
let targetDocumentId = this.get('selectedDocument.id');
this.attrs.onMovePage(targetDocumentId);
return true;
}
}
});

10
gui/app/components/section/gemini/type-editor.js
View file

@ -14,8 +14,9 @@ import { schedule } from '@ember/runloop';
import { inject as service } from '@ember/service';
import Component from '@ember/component';
import SectionMixin from '../../../mixins/section';
import TooltipMixin from '../../../mixins/tooltip';
export default Component.extend(SectionMixin, {
export default Component.extend(SectionMixin, TooltipMixin, {
sectionService: service('section'),
isDirty: false,
waiting: false,
@ -84,12 +85,9 @@ export default Component.extend(SectionMixin, {
self.set('workspaces', response);
self.selectWorkspace(workspaceId);
schedule('afterRender', function () {
schedule('afterRender', () => {
window.scrollTo(0, document.body.scrollHeight);
response.forEach(function (workspace) {
self.addTooltip(document.getElementById("gemini-workspace-" + workspace.Id));
});
self.renderTooltips();
});
self.set('waiting', false);
}, function (reason) { // eslint-disable-line no-unused-vars

6
gui/app/components/section/markdown/type-editor.js
View file

@ -10,13 +10,11 @@
// https://documize.com
import { schedule } from '@ember/runloop';
import { computed } from '@ember/object';
import Component from '@ember/component';
import { inject as service } from '@ember/service';
import TooltipMixin from '../../../mixins/tooltip';
export default Component.extend(TooltipMixin, {
export default Component.extend({
link: service(),
pageBody: "",
pagePreview: "",
@ -39,7 +37,6 @@ export default Component.extend(TooltipMixin, {
didInsertElement() {
this.attachEditor();
this.addTooltip(document.getElementById(this.get('tooltipId')));
},
willDestroyElement() {
@ -51,7 +48,6 @@ export default Component.extend(TooltipMixin, {
}
this.set('codeEditor', null);
this.destroyTooltips();
},
getBody() {

3
gui/app/components/ui/ui-avatar.js
View file

@ -14,7 +14,6 @@ import TooltipMixin from '../../mixins/tooltip';
export default Component.extend(TooltipMixin, {
didRender() {
let refId = this.get('refId');
this.addTooltip(document.getElementById(`avatar-${refId}`));
this.renderTooltips();
},
});

35
gui/app/mixins/tooltip.js
View file

@ -24,40 +24,5 @@ export default Mixin.create({
removeTooltips() {
$('[data-toggle="tooltip"]').tooltip('dispose');
},
addTooltip(elem) {
if (elem == null) {
return;
}
let t = new Tooltip({
target: elem
});
let tt = this.get('tooltips');
tt.push(t);
return t;
},
destroyTooltip(t) {
t.destroy();
},
destroyTooltips() {
if (this.get('isDestroyed') || this.get('isDestroying')) {
return;
}
let tt = this.get('tooltips');
tt.forEach(t => {
t.destroy();
});
tt.length = 0;
this.set('tooltips', tt);
}
});

2
gui/app/routes/application.js
View file

@ -56,7 +56,7 @@ export default Route.extend(ApplicationRouteMixin, TooltipMixin, {
actions: {
willTransition: function( /*transition*/ ) {
Mousetrap.reset();
this.destroyTooltips();
this.removeTooltips();
},
error(error, transition) {

1
gui/app/styles/view/document/all.scss
View file

@ -2,5 +2,4 @@
@import "activity.scss";
@import "attachments.scss";
@import "toc.scss";
@import "view.scss";
@import "new-section.scss";

123
gui/app/styles/view/document/view.scss
View file

@ -1,123 +0,0 @@
.document-view {
margin: 0 0 0 0;
.is-a-page {
@include ease-in();
overflow-x: auto;
&:hover {
.page-title {
> .page-toolbar {
opacity: 1;
}
}
}
.page-title {
> .page-toolbar {
opacity: 0;
}
}
}
.is-a-tab {
@include content-container();
@include ease-in();
.icon {
text-align: center;
display: inline-block;
width: 40px;
vertical-align: bottom;
margin-right: 5px;
> .img {
text-align: center;
display: inline-block;
height: 30px;
width: 30px;
}
}
> .title {
font-size: 1.3rem;
font-weight: normal;
color: $color-off-black;
letter-spacing: 0.5px;
margin-top: 8px;
}
&:hover {
.page-title {
> .page-toolbar {
opacity: 1;
}
}
}
.page-title {
> .page-toolbar {
opacity: 0;
}
}
}
.tab-min {
padding: 0px 50px;
height: 65px;
overflow: hidden;
cursor: default;
.page-title {
> .page-toolbar {
opacity: 1;
}
}
}
.tab-max {
padding: 25px 50px;
height: auto;
overflow: auto;
cursor: normal;
}
.section-divider {
height: 60px;
background-color: transparent;
}
}
// .document-view-unified {
// margin: 0 0 50px 0;
// @include content-container();
// @include ease-in();
// @extend .transition-all;
// .is-a-page, .is-a-tab {
// padding: 0 !important;
// box-shadow: none !important;
// background-color: transparent !important;
// @include border-radius(0px);
// }
// .tab-min, .tab-max {
// padding: 0 !important;
// }
// .start-section {
// height: 50px !important;
// }
// }
// .document-toolbar {
// > .round-button-mono {
// background-color: $color-white;
// border: 1px solid $color-gray;
// > .material-icons {
// @include ease-in();
// color: $color-gray;
// }
// }
// }

7
gui/app/templates/components/document/document-tab.hbs
View file

@ -1,7 +0,0 @@
<div id="page-{{ page.id }}" class="is-a-tab wysiwyg non-printable {{if expanded 'tab-max' 'tab-min'}}" data-id="{{ page.id }}" data-type="{{ page.contentType }}">
{{document/tab-heading tagName=page.tagName document=document folder=folder page=page permissions=permissions
onExpand=(action 'onExpand') onSavePageAsBlock=(action 'onSavePageAsBlock') onCopyPage=(action 'onCopyPage') onMovePage=(action 'onMovePage') onDeletePage=(action 'onDeletePage')}}
{{#if expanded}}
{{section/base-renderer page=page}}
{{/if}}
</div>

11
gui/app/templates/components/document/document-view.hbs
View file

@ -13,19 +13,10 @@
<div class="section-divider" />
{{/if}}
{{#if (is-equal page.pageType 'section')}}
{{#document/document-page document=document folder=folder page=page permissions=permissions toEdit=toEdit pageId=pageId
onSavePage=(action 'onSavePage') onSavePageAsBlock=(action 'onSavePageAsBlock')
onCopyPage=(action 'onCopyPage') onMovePage=(action 'onMovePage') onDeletePage=(action 'onDeletePage')}}
{{/document/document-page}}
{{/if}}
{{#if (is-equal page.pageType 'tab')}}
{{#document/document-tab document=document folder=folder page=page permissions=permissions pageId=pageId
onSavePage=(action 'onSavePage') onSavePageAsBlock=(action 'onSavePageAsBlock')
onCopyPage=(action 'onCopyPage') onMovePage=(action 'onMovePage') onDeletePage=(action 'onDeletePage')}}
{{/document/document-tab}}
{{/if}}
{{/each}}
{{#if permissions.documentEdit}}
@ -79,7 +70,7 @@
<div class="template-caption">Reusable content</div>
<ul class="block-list">
{{#each blocks as |block|}}
<li class="item tooltipped" data-tooltip="{{block.firstname}} {{block.lastname}}, {{time-ago block.created}}, used: {{ block.used }}" data-tooltip-position="bottom center">
<li class="item" title="{{block.firstname}} {{block.lastname}}, {{time-ago block.created}}, used: {{ block.used }}" data-toggle="tooltip" data-placement="top">
<div class="block-actions">
{{#link-to 'document.block' folder.id folder.slug document.id document.slug block.id}}
<i class="material-icons">mode_edit</i>

8
gui/app/templates/components/document/page-heading.hbs
View file

@ -14,9 +14,17 @@
<div class="page-toolbar" id="page-toolbar-{{ page.id }}">
{{#if permissions.documentEdit}}
<div class="float-right">
{{#if (is-equal page.pageType 'tab')}}
{{#link-to 'document.section' page.id}}
<div id="page-edit-button-{{page.id}}" class="button-icon-gray align-middle">
<i class="material-icons">mode_edit</i>
</div>
{{/link-to}}
{{else}}
<div id="page-edit-button-{{page.id}}" class="button-icon-gray align-middle" {{action 'onEdit'}}>
<i class="material-icons">mode_edit</i>
</div>
{{/if}}
{{#if hasMenuPermissions}}
<div class="button-icon-gap" />
<div id="page-menu-button-{{page.id}}" class="button-icon-gray align-middle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">

111
gui/app/templates/components/document/tab-heading.hbs
View file

@ -1,111 +0,0 @@
<div class="page-title">
<div class="icon">
<img class="img" src="/sections/{{page.contentType}}.png" srcset="/sections/{{page.contentType}}@2x.png" />
</div>
<span id="page-title-{{ page.id }}">{{ page.title }}</span>
<div id="page-toolbar-{{ page.id }}" class="pull-right page-toolbar hidden-xs hidden-sm">
{{#unless expanded}}
<div class="round-button-mono" {{action 'toggleExpand'}}>
<i class="material-icons color-gray">expand_more</i>
</div>
{{else}}
{{#if permissions.documentEdit}}
{{#link-to 'document.section' page.id}}
<div class="round-button-mono">
<i class="material-icons color-gray">mode_edit</i>
</div>
{{/link-to}}
{{#if hasMenuPermissions}}
<div class="round-button-mono" id="page-menu-{{page.id}}">
<i class="material-icons color-gray">more_vert</i>
</div>
{{/if}}
<div class="round-button-mono" {{action 'toggleExpand'}}>
<i class="material-icons color-gray">expand_less</i>
</div>
{{#if hasMenuPermissions}}
{{#dropdown-menu target=menuTarget position="top right" open="click" onOpenCallback=(action 'onMenuOpen') onCloseCallback=(action 'onMenuOpen')}}
<ul class="menu">
{{#if permissions.documentCopy}}
<li class="item" id={{copyButtonId}}>Copy</li>
{{/if}}
{{#if permissions.documentMove}}
<li class="item" id={{moveButtonId}}>Move</li>
{{/if}}
{{#if permissions.documentTemplate}}
<li class="item" id={{publishButtonId}}>Publish</li>
{{/if}}
{{#if permissions.documentDelete}}
<li class="item danger" id={{deleteButtonId}}>Delete</li>
{{/if}}
</ul>
{{/dropdown-menu}}
{{/if}}
{{#if menuOpen}}
{{#if permissions.documentDelete}}
{{#dropdown-dialog target=deleteButtonId position="bottom right" button="Delete" color="flat-red" onAction=(action 'deletePage')}}
<p>Are you sure you want to delete <span class="font-weight-bold">{{page.title}}?</span></p>
<p>
{{input type="checkbox" id=checkId class="margin-left-20" checked=deleteChildren}}
<label for="{{checkId}}">&nbsp;Delete child sections</label>
</p>
{{/dropdown-dialog}}
{{/if}}
{{#if permissions.documentTemplate}}
{{#dropdown-dialog id=publishDialogId target=publishButtonId position="bottom right" button="Publish" color="flat-green" focusOn=blockTitleId onAction=(action 'onSavePageAsBlock')}}
<div class="form-header">
<div class="tip">
<span class="font-weight-bold">{{folder.name}}:</span> Content Block
</div>
</div>
<div class="input-control">
<label>Name</label>
<div class="tip">Short title for reusable content block</div>
{{input type="text" value=blockTitle id=blockTitleId}}
</div>
<div class="input-control">
<label>Description</label>
<div class="tip">Short description to help others understand<br/>the reusable content block</div>
{{textarea rows="3" value=blockExcerpt id=blockExcerptId}}
</div>
{{/dropdown-dialog}}
{{/if}}
{{#if permissions.documentCopy}}
{{#dropdown-dialog id=copyDialogId target=copyButtonId position="bottom right" button="Copy" color="flat-green" onOpenCallback=(action 'onCopyDialogOpen') onAction=(action 'onCopyPage')}}
<div class="form-header">
<div class="tip">
<span class="font-weight-bold">Copy:</span> {{page.title}}
</div>
</div>
<div class="input-control">
<label>Target</label>
<div class="tip">Select where the content should be copied to</div>
{{ui-select cssClass="dropdown-page-toolbar" content=documentList action=(action 'onTargetChange') optionValuePath="id" optionLabelPath="name" selection=document}}
</div>
{{/dropdown-dialog}}
{{/if}}
{{#if permissions.documentMove}}
{{#dropdown-dialog id=moveDialogId target=moveButtonId position="bottom right" button="Move" color="flat-green" onOpenCallback=(action 'onCopyDialogOpen') onAction=(action 'onMovePage')}}
<div class="form-header">
<div class="tip">
<span class="font-weight-bold">Move:</span> {{page.title}}
</div>
</div>
<div class="input-control">
<label>Target</label>
<div class="tip">Select where the content should be moved to</div>
{{ui-select cssClass="dropdown-page-toolbar" content=documentListOthers action=(action 'onTargetChange') optionValuePath="id" optionLabelPath="name"}}
</div>
{{/dropdown-dialog}}
{{/if}}
{{/if}}
{{else}}
<div class="round-button-mono" {{action 'toggleExpand'}}>
<i class="material-icons color-gray">expand_less</i>
</div>
{{/if}}
{{/unless}}
</div>
</div>

2
gui/app/templates/components/section/gemini/type-editor.hbs
View file

@ -26,7 +26,7 @@
<label>Select Gemini workspace</label>
<ul class="section-gemini-workspaces">
{{#each workspaces as |card|}}
<li class="section-gemini-workspace" data-tooltip="{{card.Title}}" data-tooltip-position="bottom center" id="gemini-workspace-{{card.Id}}">
<li class="section-gemini-workspace" title="{{card.Title}}" data-toggle="tooltip" data-placement="top" id="gemini-workspace-{{card.Id}}">
<div class="section-gemini-card" style="background-color:{{card.Color}};" {{action 'onWorkspaceChange' card.Id}}>{{card.Key}}</div>
{{#if card.selected}}
<div class="section-gemini-selected-card">&#10003;</div>

2
gui/app/templates/components/ui/ui-avatar.hbs
View file

@ -1,3 +1,3 @@
<div class="avatar" id="avatar-{{refId}}" data-tooltip="{{firstname}} {{lastname}}" data-tooltip-position="top center">
<div class="avatar" id="avatar-{{refId}}" title="{{firstname}} {{lastname}}" data-toggle="tooltip" data-placement="top">
{{user-initials firstname lastname}}
</div>