v12.5 revised add smart section UX

app/app/components/document/document-sidebar.js

@@ -10,28 +10,13 @@
 // https://documize.com
 
 import Ember from 'ember';
-import models from '../../utils/model';
 import TooltipMixin from '../../mixins/tooltip';
 
 export default Ember.Component.extend(TooltipMixin, {
-    sectionService: Ember.inject.service('section'),
     documentService: Ember.inject.service('document'),
 
     document: {},
     folder: {},
-    sections: [],
-    showToc: true,
-    showSectionList: false,
-
-    // didRender() {
-    //     if (this.get('isEditor')) {
-    //         this.addTooltip(document.getElementById("add-section-button"));
-    //     }
-    // },
-
-    // willDestroyElement() {
-    //     this.destroyTooltips();
-    // },
 
     actions: {
         // Page up - above pages shunt down.
@@ -46,48 +31,6 @@ export default Ember.Component.extend(TooltipMixin, {
 
         gotoPage(id) {
             return this.attrs.gotoPage(id);
-        },
-
-        addSection() {
-            let self = this;
-
-            this.get('sectionService').getAll().then(function(sections) {
-                self.set('sections', sections);
-                self.set('showToc', false);
-                self.set('showSectionList', true);
-            });
-        },
-
-        showToc() {
-            this.set('showSectionList', false);
-            this.set('showToc', true);
-        },
-
-        onAddSection(section) {
-            this.audit.record("added-section");
-            this.audit.record("added-section-" + section.contentType);
-
-            let page = models.PageModel.create({
-                documentId: this.get('document.id'),
-                title: `${section.title} Section`,
-                level: 2,
-                sequence: 2048,
-                body: "",
-                contentType: section.contentType
-            });
-
-            let meta = models.PageMetaModel.create({
-                documentId: this.get('document.id'),
-                rawBody: "",
-                config: ""
-            });
-
-            let model = {
-                page: page,
-                meta: meta
-            };
-
-            this.attrs.onAddPage(model);
         }
     }
 });

app/app/components/document/page-wizard.js

@@ -13,7 +13,20 @@ import Ember from 'ember';
 import NotifierMixin from '../../mixins/notifier';
 
 export default Ember.Component.extend(NotifierMixin, {
+
+	didRender() {
+        let self = this;
+        Mousetrap.bind('esc', function() {
+            self.send('onCancel');
+            return false;
+        });
+    },
+
     actions: {
+		onCancel() {
+			this.attrs.onCancel();
+		},
+
         addSection(section) {
 
             if (section.preview) {

app/app/pods/document/wizard/controller.js

@@ -10,18 +10,19 @@ export default Ember.Controller.extend(NotifierMixin, {
             this.transitionToRoute('document');
         },
 
-        onAction(title, contentType) {
+        onAddSection(section) {
-            this.audit.record("added-page");
+			let self = this;
 
-            let self = this;
+			this.audit.record("added-section");
+            this.audit.record("added-section-" + section.contentType);
 
             let page = models.PageModel.create({
                 documentId: this.get('model.document.id'),
-                title: title,
+                title: `${section.title} Section`,
                 level: 2,
                 sequence: 2048,
                 body: "",
-                contentType: contentType
+                contentType: section.contentType
             });
 
             let meta = models.PageMetaModel.create({

app/app/pods/document/wizard/template.hbs

@@ -1 +1 @@
-{{document/page-wizard document=model.document folder=model.folder sections=model.sections onCancel=(action 'onCancel') onAction=(action 'onAction')}}
+{{document/page-wizard document=model.document folder=model.folder sections=model.sections onCancel=(action 'onCancel') onAction=(action 'onAddSection')}}

app/app/styles/view/document/wizard.scss

@@ -1,7 +1,9 @@
 .section-wizard {
+	margin: 30px;
+
 	> .canvas {
 		padding: 0;
-		margin: 0;
+		margin: 30px 0;
 
 		> .list {
 			margin: 0;
@@ -9,12 +11,14 @@
 
 			> .item {
 				list-style: none;
+				float: left;
 				cursor: pointer;
-				width: 100%;
+				width: 400px;
-				border: 1px solid transparent;
+				height: 80px;
+				background-color: $color-white;
+				border: 1px solid $color-border2;
 				border-radius: 3px;
-				margin: 0 0 20px 0;
+				margin: 0 30px 30px 0;
-				padding: 10px;
 
 				&:hover {
 			        background-color: $color-card-active;
@@ -24,32 +28,33 @@
 
 				.icon {
 					text-align: center;
+					display: inline-block;
 
 					> .img {
-						// margin: 17px 10px 0 20px;
+						text-align: center;
-						display: block;
+						margin: 17px 10px 0 20px;
+						display: inline-block;
 						height: 45px;
 						width: 45px;
 					}
 				}
 
-
 				> .details {
-					display: block;
+					vertical-align: top;
-					margin-top: 10px;
+					display: inline-block;
 
 					> .title {
 						font-size: 1rem;
 						font-weight: bold;
 						color: $color-off-black;
-						// margin-top: 18px;
+						margin-top: 18px;
-						margin-right: 10px;
 						letter-spacing: 0.5px;
 
 						.preview {
 							font-size: 0.7rem;
 							color: #cc9933;
 							display: inline-block;
+							margin-left: 10px;
 						}
 					}
 
@@ -57,7 +62,10 @@
 						color: $color-stroke;
 						font-size: 0.8rem;
 						margin-top: 5px;
-						width: 100%;
+						max-width: 300px;
+						overflow: hidden;
+						white-space: nowrap;
+						text-overflow: ellipsis;
 					}
 				}
 			}

app/app/templates/components/document/document-sidebar.hbs

@@ -1,27 +1,17 @@
 <div class="document-container">
 	<div class="sidebar hidden-xs hidden-sm">
-		{{#if showToc}}
+		{{#if isEditor}}
-			{{#if isEditor}}
+			<div class="margin-bottom-20 text-center">
-				<div class="margin-bottom-20 text-center">
+				{{#link-to 'document.wizard' folder.id folder.slug document.id document.slug}}
-					<div {{action 'addSection'}} class="regular-button button-green" id="add-section-button" data-tooltip="Add section" data-tooltip-position="top center">
+					<div class="regular-button button-green" id="add-section-button">
 						<i class="material-icons">add</i>
 						<div class="name">section</div>
 					</div>
-				</div>
+				{{/link-to}}
-			{{/if}}
-			{{document/document-sidebar-toc document=model folder=folder pages=pages page=page isEditor=isEditor
-				changePageSequence=(action 'onPageSequenceChange') changePageLevel=(action 'onPageLevelChange')
-				gotoPage=(action 'gotoPage')}}
-		{{/if}}
-
-		{{#if showSectionList}}
-			<div class="margin-bottom-20 pull-right">
-				<div {{action 'showToc'}} class="flat-button">
-					Cancel
-				</div>
 			</div>
-			<div class="clearfix" />
-			{{document/page-wizard document=model folder=folder sections=sections onAction=(action 'onAddSection')}}
 		{{/if}}
+		{{document/document-sidebar-toc document=model folder=folder pages=pages page=page isEditor=isEditor
+			changePageSequence=(action 'onPageSequenceChange') changePageLevel=(action 'onPageLevelChange')
+			gotoPage=(action 'gotoPage')}}
 	</div>
 </div>

app/app/templates/components/document/page-wizard.hbs

@@ -1,4 +1,8 @@
 <div class="section-wizard">
+	<div class="buttons pull-right">
+		<div class="flat-button flat-gray" {{action 'onCancel'}}>Cancel</div>
+	</div>
+	<div class="clearfix"></div>
 	<div class="canvas">
 		<ul class="list">
 			{{#each sections as |section|}}

documize/api/endpoint/router.go

@@ -30,7 +30,7 @@ const (
 	// AppVersion does what it says
 	// Versioning scheme major.minor where "minor" is optional
 	// e.g. 1, 2, 3, 4.1, 4.2, 5, 6, 7, 7.1, 8, 9, 10, ..... 127, 127.1, 128
-	AppVersion = "12.4"
+	AppVersion = "12.5"
 )
 
 var port, certFile, keyFile, forcePort2SSL string