mirror of
https://github.com/documize/community.git
synced 2025-07-19 13:19:43 +02:00
WIP content linker UX
This commit is contained in:
Harvey Kandola
parent
531e9c88d7
commit
db1b3aef8c
11 changed files with 338 additions and 325 deletions
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -12,8 +12,16 @@
|
|||
import Mixin from '@ember/object/mixin';
|
||||
import { schedule } from '@ember/runloop';
|
||||
|
||||
// ID values expected format:
|
||||
// modal: #document-template-modal
|
||||
// element: #new-template-name
|
||||
// See https://getbootstrap.com/docs/4.0/components/modal/#via-javascript
|
||||
export default Mixin.create({
|
||||
// e.g. #document-template-modal, #new-template-name
|
||||
modalOpen(modalId, options) {
|
||||
$(modalId).modal('dispose');
|
||||
$(modalId).modal(options);
|
||||
},
|
||||
|
||||
modalInputFocus(modalId, inputId) {
|
||||
$(modalId).on('show.bs.modal', function(event) { // eslint-disable-line no-unused-vars
|
||||
schedule('afterRender', () => {
|
||||
|
|
@ -22,15 +30,55 @@ export default Mixin.create({
|
|||
});
|
||||
},
|
||||
|
||||
// e.g. #document-template-modal
|
||||
// Destroys the element’s modal.
|
||||
modalDispose(modalId) {
|
||||
$(modalId).modal('dispose');
|
||||
},
|
||||
|
||||
// Manually hides a modal. Returns to the caller before the modal has actually
|
||||
// been hidden (i.e. before the hidden.bs.modal event occurs).
|
||||
modalHide(modalId) {
|
||||
$(modalId).modal('hide');
|
||||
},
|
||||
|
||||
// Manually hides a modal. Returns to the caller before the modal
|
||||
// has actually been hidden (i.e. before the hidden.bs.modal event occurs).
|
||||
// Then destroys the element's modal.
|
||||
modalClose(modalId) {
|
||||
$(modalId).modal('hide');
|
||||
$(modalId).modal('dispose');
|
||||
},
|
||||
|
||||
// e.g. #document-template-modal
|
||||
modalOpen(modalId, options) {
|
||||
$(modalId).modal('dispose');
|
||||
$(modalId).modal(options);
|
||||
// This event fires immediately when the show instance method is called.
|
||||
// If caused by a click, the clicked element is available as the relatedTarget
|
||||
// property of the event.
|
||||
modalOnShow(modalId, callback) {
|
||||
$(modalId).on('show.bs.modal', function(e) {
|
||||
callback(e);
|
||||
});
|
||||
},
|
||||
|
||||
// This event is fired when the modal has been made visible to the user
|
||||
// (will wait for CSS transitions to complete). If caused by a click,
|
||||
// the clicked element is available as the relatedTarget property of the event.
|
||||
modalOnShown(modalId, callback) {
|
||||
$(modalId).on('shown.bs.modal', function(e) {
|
||||
callback(e);
|
||||
});
|
||||
},
|
||||
|
||||
// This event is fired immediately when the hide instance method has been called.
|
||||
modalOnHide(modalId, callback) {
|
||||
$(modalId).on('hide.bs.modal', function(e) {
|
||||
callback(e);
|
||||
});
|
||||
},
|
||||
|
||||
// This event is fired when the modal has finished being hidden from the user
|
||||
// (will wait for CSS transitions to complete).
|
||||
modalOnHidden(modalId, callback) {
|
||||
$(modalId).on('hidden.bs.modal', function(e) {
|
||||
callback(e);
|
||||
});
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,7 +1,4 @@
|
|||
@import "content-linker.scss";
|
||||
@import "history.scss";
|
||||
@import "inline-editor.scss";
|
||||
@import "section-editor.scss";
|
||||
@import "activity.scss";
|
||||
@import "attachments.scss";
|
||||
@import "toc.scss";
|
||||
|
|
|
|||
|
|
@ -1,29 +0,0 @@
|
|||
.content-counter-dialog {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.content-linker-dialog {
|
||||
width: 350px;
|
||||
height: 450px;
|
||||
overflow-y: auto;
|
||||
|
||||
.link-list {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
.link-item {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 0.9rem;
|
||||
color: $color-gray;
|
||||
cursor: pointer;
|
||||
|
||||
.icon {
|
||||
margin-right: 5px;
|
||||
height: 15px;
|
||||
width: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,3 +1,4 @@
|
|||
@import "doc-meta.scss";
|
||||
@import "doc-structure.scss";
|
||||
@import "section-editor.scss";
|
||||
@import "wysiwyg.scss";
|
||||
|
|
|
|||
|
|
@ -1,41 +0,0 @@
|
|||
.document-editor {
|
||||
position: relative;
|
||||
|
||||
> .toolbar {
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
|
||||
> .edit-title {
|
||||
width: 70%;
|
||||
|
||||
> input {
|
||||
font-weight: bold;
|
||||
font-size: 1.5rem;
|
||||
margin: 16px 0 10px 0;
|
||||
color: $color-wysiwyg;
|
||||
}
|
||||
}
|
||||
|
||||
> .buttons {
|
||||
margin-top: 17px;
|
||||
}
|
||||
}
|
||||
|
||||
> .canvas {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.cancel-edits-dialog {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.document-editor-full {
|
||||
@extend .transition-all;
|
||||
@include border-radius(2px);
|
||||
@include ease-in();
|
||||
position: relative;
|
||||
padding: 25px 50px;
|
||||
box-shadow: 0 0 0 0.75pt $color-stroke,0 0 3pt 0.75pt $color-stroke;
|
||||
background-color: $color-white;
|
||||
}
|
||||
|
|
@ -1,3 +1,50 @@
|
|||
.section-editor {
|
||||
> .edit-title {
|
||||
margin: 16px 0;
|
||||
}
|
||||
|
||||
> .canvas {
|
||||
margin: 34px 0 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
.content-linker-modal-container {
|
||||
height: 500px;
|
||||
overflow-y: auto;
|
||||
|
||||
.link-list {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
.link-item {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 0.9rem;
|
||||
color: $color-gray;
|
||||
cursor: pointer;
|
||||
|
||||
.icon {
|
||||
margin-right: 5px;
|
||||
height: 15px;
|
||||
width: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.section-editor-fullscreen {
|
||||
@extend .transition-all;
|
||||
@include border-radius(2px);
|
||||
@include ease-in();
|
||||
position: relative;
|
||||
padding: 25px 50px;
|
||||
box-shadow: 0 0 0 0.75pt $color-stroke,0 0 3pt 0.75pt $color-stroke;
|
||||
background-color: $color-white;
|
||||
}
|
||||
|
||||
.zone-section-editor {
|
||||
margin-left: 60px;
|
||||
padding: 20px 60px;
|
||||
|
|
@ -18,10 +65,6 @@
|
|||
float: right;
|
||||
}
|
||||
|
||||
> .canvas {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.cancel-edits-dialog {
|
||||
display: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
.tabnav-control {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
font-size: 0;
|
||||
|
||||
> .tab {
|
||||
@include ease-in();
|
||||
|
|
@ -9,12 +10,15 @@
|
|||
padding: 5px 15px;
|
||||
background-color: $color-white;
|
||||
color: $color-primary;
|
||||
border: 1px solid $color-border;
|
||||
font-weight: bold;
|
||||
font-size: 1.1rem;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
border: 1px solid $color-border;
|
||||
margin: -1px 0 0 -5px; // handles border overlap when tabs wrap onto 2nd line
|
||||
line-height: 26px;
|
||||
list-style-type: none;
|
||||
// margin: -1px 0 0 -5px; // handles border overlap when tabs wrap onto 2nd line
|
||||
margin-left: -4px; // remove whitespace inline block
|
||||
|
||||
&:first-of-type {
|
||||
@include border-radius-left(3px);
|
||||
|
|
|
|||
|
|
@ -1,72 +1,100 @@
|
|||
{{#dropdown-dialog target=contentLinkerButtonId position="bottom right" button="Insert" color="flat-blue" onAction=(action 'onInsertLink')}}
|
||||
<div class="content-linker-dialog">
|
||||
<form>
|
||||
{{ui/ui-tab tabs=tabs onTabSelect=(action 'onTabSelect')}}
|
||||
<div id={{concat "content-linker-modal-" page.id}} class="modal" tabindex="-1" role="dialog">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">Insert Link</div>
|
||||
<div class="modal-body">
|
||||
|
||||
<div class="margin-top-40" />
|
||||
<div class="container">
|
||||
|
||||
{{#if showSections}}
|
||||
<ul class="link-list">
|
||||
{{#each candidates.pages as |p|}}
|
||||
<li class="link-item" {{ action 'setSelection' p }}>
|
||||
{{#ui/ui-selection selected=p.selected}}
|
||||
{{p.title}}
|
||||
{{/ui/ui-selection}}
|
||||
</li>
|
||||
{{/each}}
|
||||
</ul>
|
||||
{{/if}}
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<ul class="tabnav-control text-center">
|
||||
<li class="tab {{if tab1Selected 'selected'}}" {{action 'onTabSelect' 1}}>Section</li>
|
||||
<li class="tab {{if tab2Selected 'selected'}}" {{action 'onTabSelect' 2}}>Attachment</li>
|
||||
<li class="tab {{if tab3Selected 'selected'}}" {{action 'onTabSelect' 3}}>Search</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{#if showAttachments}}
|
||||
<ul class="link-list">
|
||||
{{#each candidates.attachments as |a|}}
|
||||
<li class="link-item" {{ action 'setSelection' a }}>
|
||||
{{#ui/ui-selection selected=a.selected}}
|
||||
<img class="icon" src="/assets/img/attachments/{{document/file-icon a.context}}" />
|
||||
{{ a.title }}
|
||||
{{/ui/ui-selection}}
|
||||
</li>
|
||||
{{/each}}
|
||||
</ul>
|
||||
{{/if}}
|
||||
{{#if showSections}}
|
||||
<div class="row">
|
||||
<div class="col content-linker-modal-container">
|
||||
<ul class="link-list">
|
||||
{{#each candidates.pages as |p|}}
|
||||
<li class="link-item" {{ action 'setSelection' p }}>
|
||||
{{#ui/ui-selection selected=p.selected}}
|
||||
{{p.title}}
|
||||
{{/ui/ui-selection}}
|
||||
</li>
|
||||
{{/each}}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
{{/if}}
|
||||
|
||||
{{#if showAttachments}}
|
||||
<div class="row">
|
||||
<div class="col content-linker-modal-container">
|
||||
<ul class="link-list">
|
||||
{{#each candidates.attachments as |a|}}
|
||||
<li class="link-item" {{ action 'setSelection' a }}>
|
||||
{{#ui/ui-selection selected=a.selected}}
|
||||
<img class="icon" src="/assets/img/attachments/{{document/file-icon a.context}}" />
|
||||
{{ a.title }}
|
||||
{{/ui/ui-selection}}
|
||||
</li>
|
||||
{{/each}}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
{{/if}}
|
||||
|
||||
{{#if showSearch}}
|
||||
<div class="row">
|
||||
<div class="col content-linker-modal-container">
|
||||
<div class="input-control">
|
||||
<label>Search</label>
|
||||
<div class="tip">For content or attachments</div>
|
||||
{{focus-input id="content-linker-search" type="input" value=keywords placeholder="keyword search" autocomplete="off"}}
|
||||
</div>
|
||||
{{#unless hasMatches}}
|
||||
Nothing found.
|
||||
{{/unless}}
|
||||
<ul class="link-list">
|
||||
{{#each matches.documents as |m|}}
|
||||
<li class="link-item" {{ action 'setSelection' m }}>
|
||||
{{#ui/ui-selection selected=m.selected}}
|
||||
{{m.title}}<br/><span class="color-gray">{{m.context}}</span>
|
||||
{{/ui/ui-selection}}
|
||||
</li>
|
||||
{{/each}}
|
||||
{{#each matches.pages as |m|}}
|
||||
<li class="link-item" {{ action 'setSelection' m }}>
|
||||
{{#ui/ui-selection selected=m.selected}}
|
||||
{{m.title}}<br/><span class="color-gray">{{m.context}}</span>
|
||||
{{/ui/ui-selection}}
|
||||
</li>
|
||||
{{/each}}
|
||||
{{#each matches.attachments as |a|}}
|
||||
<li class="link-item" {{ action 'setSelection' a }}>
|
||||
{{#ui/ui-selection selected=a.selected}}
|
||||
<img class="icon" src="/assets/img/attachments/{{document/file-icon a.context}}" />
|
||||
{{ a.title }}
|
||||
{{/ui/ui-selection}}
|
||||
</li>
|
||||
{{/each}}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
{{/if}}
|
||||
|
||||
{{#if showSearch}}
|
||||
<div class="input-control">
|
||||
<label>Search</label>
|
||||
<div class="tip">For content or attachments</div>
|
||||
{{focus-input id="content-linker-search" type="input" value=keywords placeholder="keyword search" autocomplete="off"}}
|
||||
</div>
|
||||
{{#unless hasMatches}}
|
||||
Nothing found.
|
||||
{{/unless}}
|
||||
<ul class="link-list">
|
||||
{{#each matches.documents as |m|}}
|
||||
<li class="link-item" {{ action 'setSelection' m }}>
|
||||
{{#ui/ui-selection selected=m.selected}}
|
||||
{{m.title}}<br/><span class="color-gray">{{m.context}}</span>
|
||||
{{/ui/ui-selection}}
|
||||
</li>
|
||||
{{/each}}
|
||||
{{#each matches.pages as |m|}}
|
||||
<li class="link-item" {{ action 'setSelection' m }}>
|
||||
{{#ui/ui-selection selected=m.selected}}
|
||||
{{m.title}}<br/><span class="color-gray">{{m.context}}</span>
|
||||
{{/ui/ui-selection}}
|
||||
</li>
|
||||
{{/each}}
|
||||
{{#each matches.attachments as |a|}}
|
||||
<li class="link-item" {{ action 'setSelection' a }}>
|
||||
{{#ui/ui-selection selected=a.selected}}
|
||||
<img class="icon" src="/assets/img/attachments/{{document/file-icon a.context}}" />
|
||||
{{ a.title }}
|
||||
{{/ui/ui-selection}}
|
||||
</li>
|
||||
{{/each}}
|
||||
</ul>
|
||||
{{/if}}
|
||||
|
||||
<div class="hide regular-button button-blue pull-right" {{ action 'onInsertLink' }}>Insert</div>
|
||||
<div class="hide clearfix" />
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-outline-secondary" {{action 'onCancel'}}>Cancel</button>
|
||||
<button type="button" class="btn btn-success" {{action 'onInsertLink'}}>Insert</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{/dropdown-dialog}}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,64 +1,66 @@
|
|||
<div id={{containerId}} class="document-editor {{if blockMode 'document-editor-full'}}">
|
||||
<div class="toolbar">
|
||||
<div class="buttons pull-right">
|
||||
{{#if busy}}
|
||||
<img src="/assets/img/busy-gray.gif" class="busy-indicator" />
|
||||
{{/if}}
|
||||
<div id="section-editor-{{pageId}}" class="{{if blockMode 'sectiopn-editor-fullscreen'}}">
|
||||
|
||||
{{#if contentLinkerButton}}
|
||||
{{document/content-linker tagName="span" document=document folder=folder page=page onInsertLink=(action 'onInsertLink')}}
|
||||
<div class="round-button-mono" id={{contentLinkerButtonId}} data-tooltip="Reference link" data-tooltip-position="top center">
|
||||
<i class="material-icons color-blue">link</i>
|
||||
</div>
|
||||
{{/if}}
|
||||
<div class="row">
|
||||
<div class="col-9 section-editor">
|
||||
{{#if blockMode}}
|
||||
<div class="form-group">
|
||||
<label>Name</label>
|
||||
{{focus-input id="page-id-{{pageId}}" value=page.title class="form-control mousetrap"}}
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Description</label>
|
||||
{{textarea id="page-excerpt-{{pageId}}" value=page.excerpt class="form-control mousetrap" rows="3"}}
|
||||
</div>
|
||||
{{else}}
|
||||
<div class="form-group">
|
||||
{{focus-input type="text" id=pageId value=page.title class=(if hasNameError 'form-control mousetrap form-control-lg edit-title is-invalid' 'form-control form-control-lg edit-title mousetrap') placeholder="Name"}}
|
||||
</div>
|
||||
{{/if}}
|
||||
</div>
|
||||
|
||||
{{#if previewButton}}
|
||||
<div class="round-button-mono" {{action 'onPreview'}} id={{previewButtonId}} data-tooltip="Toggle Preview" data-tooltip-position="top center">
|
||||
<i class="material-icons color-gray">visibility</i>
|
||||
</div>
|
||||
{{/if}}
|
||||
<div class="col-3">
|
||||
<div class="float-right">
|
||||
{{#if busy}}
|
||||
<img src="/assets/img/busy-gray.gif" class="busy-indicator" />
|
||||
{{/if}}
|
||||
|
||||
<div class="round-button-mono" {{action 'onAction'}}>
|
||||
<i class="material-icons color-green">check</i>
|
||||
</div>
|
||||
<div class="round-button-mono" {{action 'onCancel'}} id={{cancelId}}>
|
||||
<i class="material-icons color-gray">close</i>
|
||||
</div>
|
||||
</div>
|
||||
{{#if blockMode}}
|
||||
<div class="clearfix"></div>
|
||||
<div class="input-control">
|
||||
<label>Name</label>
|
||||
{{focus-input id="page-id-{{pageId}}" value=page.title class="mousetrap"}}
|
||||
</div>
|
||||
<div class="input-control">
|
||||
<label>Description</label>
|
||||
{{textarea id="page-excerpt-{{pageId}}" value=page.excerpt class="mousetrap" rows="3"}}
|
||||
</div>
|
||||
{{else}}
|
||||
<div class="input-inline input-transparent edit-title pull-left">
|
||||
{{focus-input type="text" id=pageId value=page.title class=(if hasNameError 'error-inline') placeholder="Name" class="mousetrap"}}
|
||||
</div>
|
||||
{{/if}}
|
||||
<div class="clearfix"></div>
|
||||
{{#if contentLinkerButton}}
|
||||
<div class="btn btn-primary" id="section-editor-link-button-{{pageId}}" data-toggle="tooltip" data-placement="top" title="Insert link" {{action 'onShowLinkModal'}}>Link</div>
|
||||
{{/if}}
|
||||
|
||||
<div class="dropdown-dialog cancel-edits-dialog" id={{dialogId}}>
|
||||
<div class="content">
|
||||
<p>Do you want to cancel editing and lose unsaved changes?</p>
|
||||
{{#if previewButton}}
|
||||
<div class="btn btn-primary" id="section-editor-preview-button-{{pageId}}" data-toggle="tooltip" data-placement="top" title="Preview" {{action 'onPreview'}}>Preview</div>
|
||||
{{/if}}
|
||||
|
||||
<div class="btn btn-success" {{action 'onAction'}}>Save</div>
|
||||
<div class="btn btn-outline-secondary" id="section-editor-cancel-button-{{pageId}}" {{action 'onCancel'}}>Cancel</div>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<div class="flat-button" {{action 'keepEditing'}}>
|
||||
no
|
||||
</div>
|
||||
<div class="flat-button flat-red" {{action 'discardEdits'}}>
|
||||
yes
|
||||
</div>
|
||||
</div>
|
||||
<div class="clearfix"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col section-editor">
|
||||
<div class="canvas">
|
||||
{{yield}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="canvas">
|
||||
{{yield}}
|
||||
</div>
|
||||
<div class="clearfix"></div>
|
||||
|
||||
</div>
|
||||
|
||||
<div id={{concat "discard-modal-" page.id}} class="modal" tabindex="-1" role="dialog">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">Discard Changes</div>
|
||||
<div class="modal-body">
|
||||
<p>You have made changes to the section - continue editing or discard changes?</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-outline-secondary" data-dismiss="modal">Continue editing</button>
|
||||
<button type="button" class="btn btn-danger" onclick={{action 'onDiscard'}}>Discard changes</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{document/content-linker document=document folder=folder page=page showModal=showLinkModal onInsertLink=(action 'onInsertLink')}}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue