WIP content linker UX

gui/app/components/document/content-linker.js

@@ -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() {
+	modalId: computed('page', function() { return '#content-linker-modal-' + this.get('page.id'); }),
-		this._super(...arguments);
+	showModal: false,
-		let self = this;
+	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,15 +59,22 @@ 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._super(...arguments);
-		this.addTooltip(document.getElementById("content-counter-button"));
+
+		this.renderTooltips();
 	},
 
 	willDestroyElement() {
-		this.destroyTooltips();
+		this._super(...arguments);
+
+		this.removeTooltips();
+
+		this.modalClose(this.get('modalId'));
 	},
 
 	onKeywordChange: function() {
@@ -98,25 +102,15 @@ export default Component.extend(TooltipMixin, {
 
 			this.set('selection', i);
 
-			candidates.pages.forEach(c => {
+			candidates.pages.forEach(c => { set(c, 'selected', c.id === i.id); });
-				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 => {
+		onCancel() {
-				set(c, 'selected', c.id === i.id);
+			this.set('showModal', false);
-			});
-
-			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);
-			});
 		},
 
 		onInsertLink() {
@@ -126,11 +120,13 @@ export default Component.extend(TooltipMixin, {
 				return;
 			}
 
-			return this.get('onInsertLink')(selection);
+			this.get('onInsertLink')(selection);
 		},
 
-		onTabSelect(tabs) {
+		onTabSelect(id) {
-			this.set('tabs', tabs);
+			this.set('tab1Selected', id === 1);
+			this.set('tab2Selected', id === 2);
+			this.set('tab3Selected', id === 3);
 		}
 	}
 });

gui/app/components/section/base-editor-inline.js

@@ -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(TooltipMixin, ModalMixin, {
-export default Component.extend({
-	drop: null,
 	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');
+		this._super(...arguments);
-		if (is.not.null(drop)) {
+
-			drop.destroy();
+		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() {
+		onCancel() {
-			let drop = this.get('drop');
+			if (this.attrs.isDirty() !== null && this.attrs.isDirty()) {
-			drop.close();
+				this.modalOpen('#discard-modal-' + this.get('page.id'), {show: true});
-		},
+				return;
+			}
 
-		discardEdits() {
 			this.attrs.onCancel();
 		},
 
-		onInsertLink(selection) {
+		onDiscard() {
-			return this.get('onInsertLink')(selection);
+			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);
+		}
 	}
 });

gui/app/mixins/modal.js

@@ -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
+	// This event fires immediately when the show instance method is called.
-	modalOpen(modalId, options) {
+	// If caused by a click, the clicked element is available as the relatedTarget
-		$(modalId).modal('dispose');
+	// property of the event.
-		$(modalId).modal(options);
+	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);
+		});
 	}
 });

gui/app/styles/view/document/all.scss

@@ -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";

gui/app/styles/view/document/content-linker.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;
-			}
-		}
-	}
-}

gui/app/styles/view/document/document.scss

@@ -1,3 +1,4 @@
 @import "doc-meta.scss";
 @import "doc-structure.scss";
+@import "section-editor.scss";
 @import "wysiwyg.scss";

gui/app/styles/view/document/inline-editor.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;
-}

gui/app/styles/view/document/section-editor.scss

@@ -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;
 		}

gui/app/styles/widget/widget-tabnav.scss

@@ -1,6 +1,7 @@
 .tabnav-control {
-	padding: 0;
+	padding: 0 !important;
-	margin: 0;
+	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;
+		line-height: 26px;
-		margin: -1px 0 0 -5px;				// handles border overlap when tabs wrap onto 2nd line
+		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);

gui/app/templates/components/document/content-linker.hbs

@@ -1,11 +1,24 @@
-{{#dropdown-dialog target=contentLinkerButtonId position="bottom right" button="Insert" color="flat-blue" onAction=(action 'onInsertLink')}}
+<div id={{concat "content-linker-modal-" page.id}} class="modal" tabindex="-1" role="dialog">
-	<div class="content-linker-dialog">
+	<div class="modal-dialog" role="document">
-		<form>
+		<div class="modal-content">
-			{{ui/ui-tab tabs=tabs onTabSelect=(action 'onTabSelect')}}
+			<div class="modal-header">Insert Link</div>
+			<div class="modal-body">
 
-			<div class="margin-top-40" />
+				<div class="container">
+
+					<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 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 }}>
@@ -15,9 +28,13 @@
 										</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 }}>
@@ -28,9 +45,13 @@
 										</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>
@@ -63,10 +84,17 @@
 										</li>
 									{{/each}}
 								</ul>
+							</div>
+						</div>
 					{{/if}}
 
-			<div class="hide regular-button button-blue pull-right" {{ action 'onInsertLink' }}>Insert</div>
-			<div class="hide clearfix" />
-		</form>
 				</div>
-{{/dropdown-dialog}}
+
+			</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>
+</div>

gui/app/templates/components/section/base-editor-inline.hbs

@@ -1,64 +1,66 @@
-<div id={{containerId}} class="document-editor {{if blockMode 'document-editor-full'}}">
+<div id="section-editor-{{pageId}}" class="{{if blockMode 'sectiopn-editor-fullscreen'}}">
-	<div class="toolbar">
+
-		<div class="buttons pull-right">
+    <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>
+
+		<div class="col-3">
+			<div class="float-right">
 				{{#if busy}}
 					<img src="/assets/img/busy-gray.gif" class="busy-indicator" />
 				{{/if}}
 
 				{{#if contentLinkerButton}}
-				{{document/content-linker tagName="span" document=document folder=folder page=page onInsertLink=(action 'onInsertLink')}}
+					<div class="btn btn-primary" id="section-editor-link-button-{{pageId}}" data-toggle="tooltip" data-placement="top" title="Insert link" {{action 'onShowLinkModal'}}>Link</div>
-				<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}}
 
 				{{#if previewButton}}
-				<div class="round-button-mono" {{action 'onPreview'}}  id={{previewButtonId}} data-tooltip="Toggle Preview" data-tooltip-position="top center">
+                    <div class="btn btn-primary" id="section-editor-preview-button-{{pageId}}" data-toggle="tooltip" data-placement="top" title="Preview" {{action 'onPreview'}}>Preview</div>
-					<i class="material-icons color-gray">visibility</i>
-				</div>
 				{{/if}}
 
-			<div class="round-button-mono" {{action 'onAction'}}>
+				<div class="btn btn-success" {{action 'onAction'}}>Save</div>
-				<i class="material-icons color-green">check</i>
+				<div class="btn btn-outline-secondary" id="section-editor-cancel-button-{{pageId}}" {{action 'onCancel'}}>Cancel</div>
-			</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>
 
-		<div class="dropdown-dialog cancel-edits-dialog" id={{dialogId}}>
+	<div class="row">
-			<div class="content">
+        <div class="col section-editor">
-				<p>Do you want to cancel editing and lose unsaved changes?</p>
-			</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 class="canvas">
                 {{yield}}
             </div>
-	<div class="clearfix"></div>
         </div>
+	</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')}}