Docker/documize
Docker/documize
1
0
Fork 0
mirror of https://github.com/documize/community.git synced 2025-07-24 07:39:43 +02:00
Code Releases Activity

WIP content linker UX

Browse source
This commit is contained in:
Harvey Kandola 2017-12-07 19:43:46 +00:00
parent 531e9c88d7
commit db1b3aef8c
11 changed files with 338 additions and 325 deletions
Download patch file Download diff file Expand all files Collapse all files

98
gui/app/components/document/content-linker.js
View file

@ -11,48 +11,45 @@
import { debounce } from '@ember/runloop';
import { computed, set } from '@ember/object';
import Component from '@ember/component';
import { inject as service } from '@ember/service';
import Component from '@ember/component';
import TooltipMixin from '../../mixins/tooltip';
import ModalMixin from '../../mixins/modal';
export default Component.extend(TooltipMixin, {
export default Component.extend(ModalMixin, TooltipMixin, {
link: service(),
linkName: '',
keywords: '',
selection: null,
tab1Selected: true,
tab2Selected: false,
tab3Selected: false,
showSections: computed('tab1Selected', function() { return this.get('tab1Selected'); }),
showAttachments: computed('tab2Selected', function() { return this.get('tab2Selected'); }),
showSearch: computed('tab3Selected', function() { return this.get('tab3Selected'); }),
keywords: '',
matches: {
documents: [],
pages: [],
attachments: []
},
tabs: [
{ label: 'Section', selected: true },
{ label: 'Attachment', selected: false },
{ label: 'Search', selected: false }
],
contentLinkerButtonId: computed('page', function () {
let page = this.get('page');
return `content-linker-button-${page.id}`;
}),
showSections: computed('tabs.@each.selected', function () {
return this.get('tabs').findBy('label', 'Section').selected;
}),
showAttachments: computed('tabs.@each.selected', function () {
return this.get('tabs').findBy('label', 'Attachment').selected;
}),
showSearch: computed('tabs.@each.selected', function () {
return this.get('tabs').findBy('label', 'Search').selected;
}),
hasMatches: computed('matches', function () {
let m = this.get('matches');
return m.documents.length || m.pages.length || m.attachments.length;
}),
init() {
this._super(...arguments);
let self = this;
modalId: computed('page', function() { return '#content-linker-modal-' + this.get('page.id'); }),
showModal: false,
onToggle: function() {
let modalId = this.get('modalId');
if (!this.get('showModal')) {
this.modalClose(modalId);
return;
}
let self = this;
let folderId = this.get('folder.id');
let documentId = this.get('document.id');
let pageId = this.get('page.id');
@ -62,18 +59,25 @@ export default Component.extend(TooltipMixin, {
self.set('hasSections', is.not.null(candidates.pages) && candidates.pages.length);
self.set('hasAttachments', is.not.null(candidates.attachments) && candidates.attachments.length);
});
},
this.modalOpen(modalId, {show: true});
}.observes('showModal'),
didRender() {
this.addTooltip(document.getElementById("content-linker-button"));
this.addTooltip(document.getElementById("content-counter-button"));
this._super(...arguments);
this.renderTooltips();
},
willDestroyElement() {
this.destroyTooltips();
this._super(...arguments);
this.removeTooltips();
this.modalClose(this.get('modalId'));
},
onKeywordChange: function () {
onKeywordChange: function() {
debounce(this, this.fetch, 750);
}.observes('keywords'),
@ -98,25 +102,15 @@ export default Component.extend(TooltipMixin, {
this.set('selection', i);
candidates.pages.forEach(c => {
set(c, 'selected', c.id === i.id);
});
candidates.pages.forEach(c => { set(c, 'selected', c.id === i.id); });
candidates.attachments.forEach(c => { set(c, 'selected', c.id === i.id); });
matches.documents.forEach(c => { set(c, 'selected', c.id === i.id); });
matches.pages.forEach(c => { set(c, 'selected', c.id === i.id); });
matches.attachments.forEach(c => { set(c, 'selected', c.id === i.id); });
},
candidates.attachments.forEach(c => {
set(c, 'selected', c.id === i.id);
});
matches.documents.forEach(c => {
set(c, 'selected', c.id === i.id);
});
matches.pages.forEach(c => {
set(c, 'selected', c.id === i.id);
});
matches.attachments.forEach(c => {
set(c, 'selected', c.id === i.id);
});
onCancel() {
this.set('showModal', false);
},
onInsertLink() {
@ -126,11 +120,13 @@ export default Component.extend(TooltipMixin, {
return;
}
return this.get('onInsertLink')(selection);
this.get('onInsertLink')(selection);
},
onTabSelect(tabs) {
this.set('tabs', tabs);
onTabSelect(id) {
this.set('tab1Selected', id === 1);
this.set('tab2Selected', id === 2);
this.set('tab3Selected', id === 3);
}
}
});

94
gui/app/components/section/base-editor-inline.js
View file

@ -10,43 +10,23 @@
// https://documize.com
import { empty } from '@ember/object/computed';
import { computed } from '@ember/object';
import TooltipMixin from '../../mixins/tooltip';
import ModalMixin from '../../mixins/modal';
import Component from '@ember/component';
export default Component.extend({
drop: null,
export default Component.extend(TooltipMixin, ModalMixin, {
busy: false,
mousetrap: null,
showLinkModal: false,
hasNameError: empty('page.title'),
containerId: computed('page', function () {
let page = this.get('page');
return `base-editor-inline-container-${page.id}`;
}),
pageId: computed('page', function () {
let page = this.get('page');
return `page-editor-${page.id}`;
}),
cancelId: computed('page', function () {
let page = this.get('page');
return `cancel-edits-button-${page.id}`;
}),
dialogId: computed('page', function () {
let page = this.get('page');
return `discard-edits-dialog-${page.id}`;
}),
contentLinkerButtonId: computed('page', function () {
let page = this.get('page');
return `content-linker-button-${page.id}`;
}),
previewButtonId: computed('page', function () {
let page = this.get('page');
return `content-preview-button-${page.id}`;
}),
didRender() {
let msContainer = document.getElementById(this.get('containerId'));
let msContainer = document.getElementById('section-editor-' + this.get('containerId'));
let mousetrap = this.get('mousetrap');
if (is.null(mousetrap)) {
@ -67,13 +47,14 @@ export default Component.extend({
$('#' + this.get('pageId')).focus(function() {
$(this).select();
});
this.renderTooltips();
},
willDestroyElement() {
let drop = this.get('drop');
if (is.not.null(drop)) {
drop.destroy();
}
this._super(...arguments);
this.removeTooltips();
let mousetrap = this.get('mousetrap');
if (is.not.null(mousetrap)) {
@ -83,33 +64,6 @@ export default Component.extend({
},
actions: {
onCancel() {
if (this.attrs.isDirty() !== null && this.attrs.isDirty()) {
$('#' + this.get('dialogId')).css("display", "block");
let drop = new Drop({
target: $('#' + this.get('cancelId'))[0],
content: $('#' + this.get('dialogId'))[0],
classes: 'drop-theme-basic',
position: "bottom right",
openOn: "always",
constrainToWindow: true,
constrainToScrollParent: false,
tetherOptions: {
offset: "5px 0",
targetOffset: "10px 0"
},
remove: false
});
this.set('drop', drop);
return;
}
this.attrs.onCancel();
},
onAction() {
if (this.get('busy') || is.empty(this.get('page.title'))) {
return;
@ -122,21 +76,31 @@ export default Component.extend({
this.attrs.onAction(this.get('page.title'));
},
keepEditing() {
let drop = this.get('drop');
drop.close();
},
onCancel() {
if (this.attrs.isDirty() !== null && this.attrs.isDirty()) {
this.modalOpen('#discard-modal-' + this.get('page.id'), {show: true});
return;
}
discardEdits() {
this.attrs.onCancel();
},
onInsertLink(selection) {
return this.get('onInsertLink')(selection);
},
onDiscard() {
this.modalClose('#discard-modal-' + this.get('page.id'));
this.attrs.onCancel();
},
onPreview() {
return this.get('onPreview')();
},
},
onShowLinkModal() {
this.set('showLinkModal', true);
},
onInsertLink(selection) {
this.set('showLinkModal', false);
return this.get('onInsertLink')(selection);
}
}
});