all-new add section

app/app/components/document/document-view.js

@@ -19,12 +19,34 @@ export default Ember.Component.extend(NotifierMixin, TooltipMixin, {
 	appMeta: Ember.inject.service(),
 	link: Ember.inject.service(),
 
-	noSections: Ember.computed('pages', function () {
+	didReceiveAttrs() {
-		return this.get('pages.length') === 0;
+		this.get('sectionService').getSpaceBlocks(this.get('folder.id')).then((blocks) => {
-	}),
+			this.set('blocks', blocks);
+			this.set('hasBlocks', blocks.get('length') > 0);
+
+			blocks.forEach((b) => {
+				b.set('deleteId', `delete-block-button-${b.id}`);
+			});
+		});
+	},
 
 	didRender() {
 		this.contentLinkHandler();
+
+		let self = this;
+		$(".tooltipped").each(function(i, el) {
+			self.addTooltip(el);
+		});
+	},
+
+	didInsertElement() {
+		$(".start-section").hoverIntent({interval: 100, over: function() {
+			// in
+			$(this).find('.start-button').css("display", "block").removeClass('fadeOut').addClass('fadeIn');
+		}, out: function() {
+			//out
+			$(this).find('.start-button').css("display", "none").removeClass('fadeIn').addClass('fadeOut');
+		} });
 	},
 
 	willDestroyElement() {
@@ -96,6 +118,41 @@ export default Ember.Component.extend(NotifierMixin, TooltipMixin, {
 
 		onSavePage(page, meta) {
 			this.attrs.onSavePage(page, meta);
+		},
+
+		///////////////// move to page-wizard ??????????!!!!!!!!!!!!!!!!!!!
+
+		onShowSectionWizard(page) {
+			if ($("#new-section-wizard").is(':visible') && $("#new-section-wizard").attr('data-page-id') === page.id) {
+				this.send('onHideSectionWizard');
+				return;
+			}
+
+			$("#new-section-wizard").attr('data-page-id', page.id);
+			$("#new-section-wizard").insertAfter(`#add-section-button-${page.id}`);
+			$("#new-section-wizard").fadeIn(100, 'linear', function() {
+			});
+		},
+
+		onHideSectionWizard() {
+			$("#new-section-wizard").fadeOut(100, 'linear', function() {
+			});
+		},
+
+		onCancel() {
+			this.attrs.onCancel();
+		},
+
+		addSection(section) {
+			this.attrs.onAddSection(section);
+		},
+
+		onDeleteBlock(id) {
+			this.attrs.onDeleteBlock(id);
+		},
+
+		onInsertBlock(block) {
+			this.attrs.onInsertBlock(block);
 		}
 	}
 });

app/app/pods/document/edit/controller.js

@@ -1,43 +0,0 @@
-// Copyright 2016 Documize Inc. <legal@documize.com>. All rights reserved.
-//
-// This software (Documize Community Edition) is licensed under
-// GNU AGPL v3 http://www.gnu.org/licenses/agpl-3.0.en.html
-//
-// You can operate outside the AGPL restrictions by purchasing
-// Documize Enterprise Edition and obtaining a commercial license
-// by contacting <sales@documize.com>.
-//
-// https://documize.com
-
-import Ember from 'ember';
-
-export default Ember.Controller.extend({
-	documentService: Ember.inject.service('document'),
-
-	actions: {
-		onCancel( /*page*/ ) {
-			this.transitionToRoute('document', {
-				queryParams: {
-					page: this.get('model.page.id')
-				}
-			});
-		},
-
-		onAction(page, meta) {
-			let self = this;
-			let model = {
-				page: page.toJSON({ includeId: true }),
-				meta: meta.toJSON({ includeId: true })
-			};
-
-			this.get('documentService').updatePage(page.get('documentId'), page.get('id'), model).then(function () {
-				self.audit.record("edited-page");
-				self.transitionToRoute('document', {
-					queryParams: {
-						page: page.get('id')
-					}
-				});
-			});
-		}
-	}
-});

app/app/pods/document/edit/route.js

@@ -1,31 +0,0 @@
-// Copyright 2016 Documize Inc. <legal@documize.com>. All rights reserved.
-//
-// This software (Documize Community Edition) is licensed under
-// GNU AGPL v3 http://www.gnu.org/licenses/agpl-3.0.en.html
-//
-// You can operate outside the AGPL restrictions by purchasing
-// Documize Enterprise Edition and obtaining a commercial license
-// by contacting <sales@documize.com>.
-//
-// https://documize.com
-
-import Ember from 'ember';
-import AuthenticatedRouteMixin from 'ember-simple-auth/mixins/authenticated-route-mixin';
-
-export default Ember.Route.extend(AuthenticatedRouteMixin, {
-	documentService: Ember.inject.service('document'),
-	folderService: Ember.inject.service('folder'),
-
-	model(params) {
-		let self = this;
-
-		this.audit.record("edited-page");
-
-		return Ember.RSVP.hash({
-			folder: self.modelFor('document').folder,
-			document: self.modelFor('document').document,
-			page: self.get('documentService').getPage(self.paramsFor('document').document_id, params.page_id),
-			meta: self.get('documentService').getPageMeta(self.paramsFor('document').document_id, params.page_id)
-		});
-	}
-});

app/app/pods/document/edit/template.hbs

@@ -1 +0,0 @@
-{{document/document-editor document=model.document folder=model.folder page=model.page meta=model.meta onCancel=(action 'onCancel') onAction=(action 'onAction')}}

app/app/pods/document/route.js

@@ -59,7 +59,9 @@ export default Ember.Route.extend(AuthenticatedRouteMixin, {
 			pages: this.get('pages'),
 			tabs: this.get('tabs'),
 			sections: this.get('sectionService').getAll().then((sections) => {
-				return sections.filterBy('pageType', 'section');
+				return sections;
+				// return sections.filterBy('pageType', 'section');
+				// return sections.filterBy('pageType', 'tab');
 			}),
 		});
 	},

app/app/pods/document/template.hbs

@@ -66,7 +66,7 @@
 						</div>
 						{{document/document-heading document=model.document isEditor=model.isEditor onSaveDocument=(action 'onSaveDocument')}}
 						{{document/document-view document=model.document links=model.links allPages=model.allPages tabs=model.tabs pages=model.pages
-							folder=model.folder folders=model.folders isEditor=model.isEditor onSavePage=(action 'onSavePage')
+							folder=model.folder folders=model.folders sections=model.sections isEditor=model.isEditor onSavePage=(action 'onSavePage')
 							gotoPage=(action 'gotoPage') onAddBlock=(action 'onAddBlock') onCopyPage=(action 'onCopyPage') onMovePage=(action 'onMovePage') onDeletePage=(action 'onPageDeleted')}}
 					</div>
 				</div>

app/app/styles/base.scss

@@ -199,7 +199,7 @@ $i: 150;
 $i: 100;
 @while $i > 0 {
 	.width-#{$i} {
-		width: #{$i}#{"%"};
+		width: #{$i}#{"%"} !important;
 	}
 	$i: $i - 1;
 }

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

@@ -1,5 +1,4 @@
 @import "activity.scss";
-@import "content.scss";
 @import "edit-tools.scss";
 @import "editor.scss";
 @import "files.scss";
@@ -7,5 +6,6 @@
 @import "layout.scss";
 @import "sidebar.scss";
 @import "toolbar.scss";
+@import "view.scss";
 @import "wizard.scss";
 @import "wysiwyg.scss";

app/app/styles/view/document/content.scss

@@ -1,92 +0,0 @@
-.zone-document {
-	min-height: 500px; //ensure dropdowns render in viewport
-	height: 100%;
-	margin-left: 60px;
-	padding: 30px 70px;
-	z-index: 777;
-	background-color: $color-off-white;
-}
-
-.zone-document-content {
-	> .back-to-space {
-		margin: 10px 0;
-
-		> a {
-			vertical-align: middle;
-			color: $color-primary;
-			font-size: 1rem;
-
-			> .material-icons {
-				font-size: 1rem;
-				vertical-align: middle;
-			}
-		}
-	}
-
-	.doc-title {
-		margin: 30px 0 10px;
-		font-weight: bold;
-	}
-
-	.doc-excerpt {
-		font-size: 1rem;
-		color: $color-gray;
-		margin: 0 0 75px;
-	}
-
-	.edit-document-heading {
-		margin-top: 30px;
-
-		.edit-doc-title {
-			> input {
-				font-weight: bold;
-				font-size: 2rem;
-				margin: 0 0 10px;
-				color: $color-wysiwyg;
-			}
-		}
-
-		.edit-doc-excerpt {
-			font-size: 1rem;
-			margin: 0 0 10px;
-			color: $color-gray;
-		}
-	}
-}
-
-.document-view {
-	margin: 30px 0 50px;
-	
-	.is-a-page {
-		@extend .transition-all;
-		@include border-radius(2px);
-		@include ease-in();
-		padding: 50px;
-		box-shadow: 0 0 0 0.75pt $color-stroke,0 0 3pt 0.75pt $color-stroke;
-		margin: 30px 0;
-		background-color: $color-white;
-
-		&:hover {
-			.page-title {
-				> .page-toolbar {
-					opacity: 1;
-				}
-			}
-		}
-
-		.page-title {
-			> .page-toolbar {
-				opacity: 0;
-			}
-		}
-	}
-}
-
-.empty-state-document {
-	margin-top: 150px;
-	text-align: center;
-}
-
-.dropdown-page-toolbar {
-	width: 300px;
-}

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

@@ -0,0 +1,268 @@
+.zone-document {
+	min-height: 500px; //ensure dropdowns render in viewport
+	height: 100%;
+	margin-left: 60px;
+	padding: 30px 70px;
+	z-index: 777;
+	background-color: $color-off-white;
+}
+
+.zone-document-content {
+	> .back-to-space {
+		margin: 10px 0;
+
+		> a {
+			vertical-align: middle;
+			color: $color-primary;
+			font-size: 1rem;
+
+			> .material-icons {
+				font-size: 1rem;
+				vertical-align: middle;
+			}
+		}
+	}
+
+	.doc-title {
+		margin: 30px 0 10px;
+		font-weight: bold;
+	}
+
+	.doc-excerpt {
+		font-size: 1rem;
+		color: $color-gray;
+		margin: 0 0 45px;
+	}
+
+	.edit-document-heading {
+		margin: 30px 0 0 0;
+
+		.edit-doc-title {
+			> input {
+				font-weight: bold;
+				font-size: 2rem;
+				margin: 0 0 10px;
+				color: $color-wysiwyg;
+			}
+		}
+
+		.edit-doc-excerpt {
+			font-size: 1rem;
+			margin: 0 0 10px;
+			color: $color-gray;
+		}
+	}
+}
+
+.document-view {
+	margin: 0 0 50px 0;
+	max-width: 1200px;
+	@include ease-in();
+
+	.is-a-page {
+		@extend .transition-all;
+		@include border-radius(2px);
+		@include ease-in();
+		padding: 50px;
+		box-shadow: 0 0 0 0.75pt $color-stroke,0 0 3pt 0.75pt $color-stroke;
+		background-color: $color-white;
+
+		&:hover {
+			.page-title {
+				> .page-toolbar {
+					opacity: 1;
+				}
+			}
+		}
+
+		.page-title {
+			> .page-toolbar {
+				opacity: 0;
+			}
+		}
+	}
+
+	.section-divider {
+		height: 60px;
+		background-color: transparent;
+	}
+
+	.start-section {
+		height: 60px;
+		background-color: transparent;
+		position: relative;
+		cursor: pointer;
+		@include ease-in();
+
+		> .start-button {
+			display: none;
+			text-align: center;
+			padding-top: 20px;
+			color: $color-green;
+			font-size: 1rem;
+			position: relative;
+
+			> .round-button {
+				opacity: 0.6 !important;
+			}
+
+			> .label {
+				display: inline-block;
+				margin-left: 10px;
+			}
+
+			> .line {
+				display: inline-block;
+				height: 1px;
+				border: 1px solid $color-green;
+				width: 100px;
+				margin: 0 20px 0 20px;
+				opacity: 0.2;
+			}
+		}
+
+		&:first-of-type {
+			height: 30px;
+
+			> .start-button {
+				padding-top: 0;
+			}
+		}
+	}
+
+	.new-section-wizard {
+		@include border-radius(2px);
+		@include ease-in();
+		margin: 0 0 30px 0;
+		padding: 30px;
+		border: 1px solid $color-stroke;
+		background-color: $color-off-white;
+		display: none;
+
+		.section-name {
+			font-weight: bold;
+		    font-size: 1.5rem;
+		    margin: 0 0 30px 0;
+		    color: $color-black;
+		}
+
+		.template-caption {
+			color: $color-gray;
+			margin: 10px 0 10px 0;
+			font-size: 1.2rem;
+		}
+
+		> .list-wrapper {
+			height: 440px;
+			overflow-y: auto;
+
+			> .preset-list {
+				margin: 0;
+				padding: 0;
+
+				> .item {
+					@include ease-in();
+					@include border-radius(4px);
+					list-style: none;
+					cursor: pointer;
+					display: inline-block;
+					border: 1px solid $color-stroke;
+					background-color: $color-white;
+					margin: 0 20px 20px 0;
+					padding: 15px 0 0 20px;
+					width: 200px;
+					height: 60px;
+
+					&:hover {
+						@include ease-in();
+						border-color: $color-link;
+					}
+
+					.icon {
+						text-align: center;
+						display: inline-block;
+						width: 40px;
+						margin-right: 10px;
+						float: left;
+
+						> .img {
+							float: left;
+							text-align: center;
+							display: inline-block;
+							height: 30px;
+							width: 30px;
+						}
+					}
+
+					> .title {
+						font-size: 1rem;
+						font-weight: normal;
+						color: $color-off-black;
+						letter-spacing: 0.5px;
+						margin-top: 6px;
+					}
+				}
+			}
+
+			> .block-list {
+				margin: 0;
+				padding: 0;
+
+				> .item {
+					@include ease-in();
+					@include border-radius(4px);
+					list-style: none;
+					cursor: pointer;
+					display: inline-block;
+					border: 1px solid $color-stroke;
+					background-color: $color-white;
+					margin: 0 20px 20px 0;
+					padding: 12px 0 0 20px;
+					width: 423px;
+					height: 60px;
+
+					&:hover {
+						@include ease-in();
+						border-color: $color-link;
+					}
+
+					> .details {
+						width: 350px;
+						overflow: hidden;
+						text-overflow: ellipsis;
+						white-space: nowrap;
+
+						> .title {
+							font-size: 1rem;
+							font-weight: normal;
+							color: $color-off-black;
+							letter-spacing: 0.5px;
+							margin-top: 0;
+							overflow: hidden;
+							text-overflow: ellipsis;
+							white-space: nowrap;
+						}
+
+						> .desc {
+							color: $color-gray;
+							font-size: 0.8rem;
+							margin-top: 5px;
+							overflow: hidden;
+							text-overflow: ellipsis;
+							white-space: nowrap;
+						}
+					}
+				}
+			}
+		}
+	}
+}
+
+.empty-state-document {
+	margin-top: 150px;
+	text-align: center;
+}
+
+.dropdown-page-toolbar {
+	width: 300px;
+}

app/app/styles/widget/widget-button.scss

@@ -138,6 +138,13 @@
     }
 }
 
+.round-button-small {
+	width: 20px;
+    height: 20px;
+    line-height: 20px;
+	font-size: 0.9rem;
+}
+
 .square-button {
     display: inline-block;
     position: relative;

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

@@ -1,13 +1,72 @@
 <div class="document-view">
 	{{#each pages key="id" as |page index|}}
+		{{#if isEditor}}
+			<div class="start-section" data-index={{index}} data-before-id={{page.id}} id="add-section-button-{{page.id}}" {{action 'onShowSectionWizard' page}}>
+				<div class="start-button animated">
+					<div class="round-button round-button-small button-green">
+						<i class="material-icons">add</i>
+					</div>
+					<div class="label">section</div>
+				</div>
+			</div>
+		{{else}}
+			<div class="section-divider" />
+		{{/if}}
 		{{#document/document-page document=document folder=folder page=page isEditor=isEditor onSavePage=(action 'onSavePage')
 			onAddBlock=(action 'onAddBlock') onCopyPage=(action 'onCopyPage') onMovePage=(action 'onMovePage') onDeletePage=(action 'onDeletePage')}}
 		{{/document/document-page}}
+	{{else}}
+		no sections!
+		<div class="empty-state-document">
+			<img src="/assets/img/empty-state-document.gif" />
+		</div>
 	{{/each}}
-</div>
 
-{{#if noSections}}
+	<div id="new-section-wizard" class="new-section-wizard">
-	<div class="empty-state-document">
+		<div class="input-inline input-transparent pull-left width-80">
-		<img src="/assets/img/empty-state-document.gif" />
+			{{focus-input type="text" value=newSectionName class="section-name {{(if hasNameError 'error-inline')}}" placeholder="Name" autocomplete="off"}}
+		</div>
+		<div class="round-button-mono pull-right" {{action 'onHideSectionWizard'}}>
+			<i class="material-icons color-gray">close</i>
+		</div>
+		<div class="clearfix" />
+
+		<div class="list-wrapper">
+			<ul class="preset-list">
+				{{#each sections as |section|}}
+					<li class="item" {{action 'addSection' section}}>
+						<div class="icon">
+							<img class="img" src="/sections/{{section.contentType}}.png" srcset="/sections/{{section.contentType}}@2x.png" />
+						</div>
+						<div class='title'>{{section.title}}</div>
+					</li>
+				{{/each}}
+			</ul>
+
+			{{#if hasBlocks}}
+				<div class="template-caption">Reusable content</div>
+				<ul class="block-list">
+					{{#each blocks as |block|}}
+						<li class="item tooltipped" data-tooltip="{{block.firstname}} {{block.lastname}}, {{time-ago block.created}}, used: {{ block.used }}" data-tooltip-position="bottom center">
+							<div class="actions hide">
+								{{#link-to 'document.block' folder.id folder.slug document.id document.slug block.id}}
+									<i class="material-icons">mode_edit</i>
+								{{/link-to}}
+								<i class="material-icons" id={{block.deleteId}}>delete</i>
+							</div>
+							<div class="details" {{action 'onInsertBlock' block}}>
+								<div class='title'>{{block.title}}</div>
+								<div class='desc'>{{block.excerpt}}</div>
+							</div>
+							{{#dropdown-dialog target=block.deleteId position="bottom left" button="Delete" color="flat-red" onAction=(action 'onDeleteBlock' block.id)}}
+								<p>Are you sure you want to delete block<br/><span class="bold">{{block.title}}?</span></p>
+							{{/dropdown-dialog}}
+						</li>
+					{{/each}}
+				</ul>
+			{{else}}
+				<div class="template-caption">Reusable content appears below</div>
+			{{/if}}
+		</div>
 	</div>
-{{/if}}
+</div>