all new add section UX flow

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

@@ -10,10 +10,28 @@
 // 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'),
 
-export default Ember.Component.extend({
     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.
@@ -21,7 +39,7 @@ export default Ember.Component.extend({
             this.attrs.changePageSequence(pendingChanges);
         },
 
-        // Move down -- pages below shift up.
+        // Move down - pages below shift up.
         onPageLevelChange(pendingChanges) {
             this.attrs.changePageLevel(pendingChanges);
         },
@@ -29,5 +47,47 @@ export default Ember.Component.extend({
         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/document-toolbar.js

@@ -24,7 +24,6 @@ export default Ember.Component.extend(NotifierMixin, TooltipMixin, {
 
     didRender() {
         if (this.get('isEditor')) {
-            this.addTooltip(document.getElementById("add-section-button"));
             this.addTooltip(document.getElementById("attachment-button"));
             this.addTooltip(document.getElementById("save-template-button"));
             this.addTooltip(document.getElementById("set-meta-button"));

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

@@ -13,55 +13,15 @@ import Ember from 'ember';
 import NotifierMixin from '../../mixins/notifier';
 
 export default Ember.Component.extend(NotifierMixin, {
-    title: "New Section",
-    contentType: "",
-
-    didReceiveAttrs() {
-        let section = this.get("sections").get('firstObject');
-        section.set("selected", true);
-    },
-
-    didInsertElement() {
-        $("#page-title").removeClass("error").focus();
-    },
-
     actions: {
-        setOption(id) {
+        addSection(section) {
-            let sections = this.get("sections");
-
-            sections.forEach(function(option) {
-                Ember.set(option, 'selected', option.id === id);
-            });
-
-            this.set("sections", sections);
-
-            // if (this.session.get('popupBlocked')) {
-            // 	this.showNotification("Hmm, looks like your browser is blocking popups...");
-            // }
-        },
-
-        onCancel() {
-            this.attrs.onCancel();
-        },
-
-        onAction() {
-            let title = this.get("title");
-            let section = this.get("sections").findBy("selected", true);
-            let contentType = section.contentType;
 
             if (section.preview) {
                 this.showNotification("Coming soon!");
                 return;
             }
 
-            if (is.empty(title)) {
+            this.attrs.onAction(section);
-                $("#page-title").addClass("error").focus();
-                return;
-            }
-
-            this.audit.record('added section ' + section.contentType);
-
-            this.attrs.onAction(title, contentType);
         }
     }
 });

app/app/pods/document/index/controller.js

@@ -175,6 +175,19 @@ export default Ember.Controller.extend(NotifierMixin, {
             this.get('documentService').save(doc).then(function() {
                 self.set('model', doc);
             });
+        },
+
+        onAddPage(page) {
+            let self = this;
+
+            this.get('documentService').addPage(this.get('model.id'), page).then(function(newPage) {
+                self.transitionToRoute('document.edit',
+                    self.get('folder.id'),
+                    self.get('folder.slug'),
+                    self.get('model.id'),
+                    self.get('model.slug'),
+                    newPage.id);
+            });
         }
     }
 });

app/app/pods/document/index/template.hbs

@@ -8,7 +8,7 @@
 <div class="container-fluid background-color-white">
     <div class="row">
         <div class="col-lg-3 col-md-3 col-sm-3">
-            {{document/document-sidebar document=model meta=meta folder=folder pages=pages page=page isEditor=isEditor changePageSequence=(action 'onPageSequenceChange') changePageLevel=(action 'onPageLevelChange') gotoPage=(action 'gotoPage')}}
+            {{document/document-sidebar document=model meta=meta folder=folder pages=pages page=page isEditor=isEditor onAddPage=(action 'onAddPage') changePageSequence=(action 'onPageSequenceChange') changePageLevel=(action 'onPageLevelChange') gotoPage=(action 'gotoPage')}}
         </div>
         <div class="col-lg-9 col-md-9 col-sm-9">
             {{document/document-view document=model pages=pages attachments=attachments folder=folder folders=folders isEditor=isEditor onAttachmentDeleted=(action 'onAttachmentDeleted') onDeletePage=(action 'onPageDeleted')}}

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

@@ -1,29 +1,7 @@
-.page-wizard {
+.section-wizard {
-	> .toolbar {
-		@extend .z-depth-tiny;
-		background-color: $color-white;
-		width: 100%;
-		padding: 20px 40px;
-
-		> .title {
-			width: 50%;
-
-			> .input-control {
-				margin: 0;
-
-				> input {
-					margin: 0 0 5px 0;
-				}
-			}
-		}
-
-		> .buttons {
-			margin-top: 10px;
-		}
-	}
-
 	> .canvas {
-		padding: 40px 40px;
+		padding: 0;
+		margin: 0;
 			
 		> .list {
 			margin: 0;
@@ -31,46 +9,47 @@
 
 			> .item {
 				list-style: none;
-				float: left;
 				cursor: pointer;
-				width: 400px;
+				width: 100%;
-				height: 80px;
+				border: 1px solid transparent;
-				background-color: $color-white;
-				border: 1px solid $color-border2;
 				border-radius: 3px;
-				margin: 0 30px 30px 0;
+				margin: 0 0 20px 0;
+				padding: 10px;
 
 				&:hover {
-			        @extend .z-depth-half;
 			        background-color: $color-card-active;
-			        border-color: $color-card-active;
+			        border: 1px solid $color-border2;
 			        transition: 0.2s all ease;
 			    }
 
-				> .img {
+				.icon {
 					text-align: center;
-					margin: 17px 10px 0 20px;
+
-					display: inline-block;
+					> .img {
-					height: 45px;
+						// margin: 17px 10px 0 20px;
-					width: 45px;
+						display: block;
+						height: 45px;
+						width: 45px;
+					}
 				}
 
+
 				> .details {
-					vertical-align: top;
+					display: block;
-					display: inline-block;
+					margin-top: 10px;
 
 					> .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;
 						}
 					}
 
@@ -78,18 +57,10 @@
 						color: $color-stroke;
 						font-size: 0.8rem;
 						margin-top: 5px;
-						max-width: 300px;
+						width: 100%;
-						overflow: hidden;
-						white-space: nowrap;
-						text-overflow: ellipsis;
 					}
 				}
 			}
-
-			> .selected {
-				background-color: $color-card-active;
-				border: 1px dotted $color-link;
-			}
 		}
 	}
 }

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

@@ -1,7 +1,27 @@
 <div class="document-container">
 	<div class="sidebar">
-		{{document/document-sidebar-toc document=model folder=folder pages=pages page=page isEditor=isEditor
+		{{#if showToc}}
-			changePageSequence=(action 'onPageSequenceChange') changePageLevel=(action 'onPageLevelChange')
+			{{#if isEditor}}
-			gotoPage=(action 'gotoPage')}}
+				<div class="margin-bottom-20 text-center">
+					<div {{action 'addSection'}} class="regular-button button-green" id="add-section-button" data-tooltip="Add section" data-tooltip-position="top center">
+						<i class="material-icons">add</i>
+						<div class="name">section</div>
+					</div>
+				</div>
+			{{/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}}
 	</div>
 </div>

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

@@ -39,12 +39,6 @@
 
 				<div class="actions pull-right hidden-xs hidden-sm">
 	                {{#if isEditor}}
-						{{#link-to 'document.wizard' folder.id folder.slug document.id document.slug}}
-							<div class="regular-button button-green" id="add-section-button" data-tooltip="Add section" data-tooltip-position="top center">
-								<i class="material-icons">add</i>
-								<div class="name">section</div>
-							</div>
-						{{/link-to}}
 						<div class="button-gap"></div>
 						<div class="square-button button-gray" id="attachment-button" data-tooltip="Attach file" data-tooltip-position="top center">
 							<i class="material-icons">attach_file</i>

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

@@ -1,24 +1,11 @@
-<div class="page-wizard">
+<div class="section-wizard">
-	<div class="toolbar">
-		<div class="title pull-left">
-			<div class="input-control">
-				<label>Title</label>
-				<div class="tip">Add new section to <span class="bold">{{document.name}}</span></div>
-				{{focus-input type='text' id="page-title" value=title class="mousetrap"}}
-			</div>
-		</div>
-		<div class="buttons pull-right">
-			<div class="flat-button flat-gray" {{action 'onCancel'}}>Cancel</div>
-			<div class="button-gap" />
-			<div class="regular-button button-green" {{action 'onAction'}}>Add</div>
-		</div>
-		<div class="clearfix"></div>
-	</div>
 	<div class="canvas">
 		<ul class="list">
 			{{#each sections as |section|}}
-				<li class="item {{if section.selected "selected"}}" {{action 'setOption' section.id}}>
+				<li class="item" {{action 'addSection' section}}>
-					<img class="img" src="/sections/{{section.contentType}}.png" srcset="/sections/{{section.contentType}}@2x.png" />
+					<div class="icon">
+						<img class="img" src="/sections/{{section.contentType}}.png" srcset="/sections/{{section.contentType}}@2x.png" />
+					</div>
 					<div class="details">
 						<div class='title'>
 							{{section.title}}
@@ -31,7 +18,9 @@
 				</li>
 			{{/each}}
 			<li class="item">
-				<img class="img" src="/sections/suggest.png" />
+				<div class="icon">
+					<img class="img" src="/sections/suggest.png" title="{{section.title}}" alt="{{section.title}}" />
+				</div>
 				<div class="details">
 					<div class='title'>Suggest</div>
 					<div class='desc'>We'll build the integrations you need - just let us know</div>