block editing and deletion

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

@@ -30,19 +30,7 @@ export default Ember.Component.extend(NotifierMixin, TooltipMixin, {
 	toEdit: '',
 
 	didReceiveAttrs() {
-		this.get('sectionService').getSpaceBlocks(this.get('folder.id')).then((blocks) => {
-			if (this.get('isDestroyed') || this.get('isDestroying')) {
-				return;
-			}
-
-			this.set('blocks', blocks);
-			this.set('hasBlocks', blocks.get('length') > 0);
-
-			// to test
-			blocks.forEach((b) => {
-				b.set('deleteId', `delete-block-button-${b.id}`);
-			});
-		});
+		this.loadBlocks();
 	},
 
 	didRender() {
@@ -137,17 +125,30 @@ export default Ember.Component.extend(NotifierMixin, TooltipMixin, {
 		this.send('onHideSectionWizard');
 		this.set('pageId', '');
 
-		const promise = this.get('onInsertSection')(model);
-		promise.then((id) => {
-			if (model.page.pageType === 'section') {
-				this.set('toEdit', id);
+		return this.get('onInsertSection')(model);
+	},
+
+	loadBlocks() {
+		this.get('sectionService').getSpaceBlocks(this.get('folder.id')).then((blocks) => {
+			if (this.get('isDestroyed') || this.get('isDestroying')) {
+				return;
 			}
+
+			this.set('blocks', blocks);
+			this.set('hasBlocks', blocks.get('length') > 0);
+
+			blocks.forEach((b) => {
+				b.set('deleteId', `delete-block-button-${b.id}`);
+			});
 		});
 	},
 
 	actions: {
 		onSavePageAsBlock(block) {
-			this.attrs.onSavePageAsBlock(block);
+			const promise = this.attrs.onSavePageAsBlock(block);
+			promise.then(() => {
+				this.loadBlocks();
+			});
 		},
 
 		onCopyPage(pageId, documentId) {
@@ -231,7 +232,12 @@ export default Ember.Component.extend(NotifierMixin, TooltipMixin, {
 
 			this.audit.record("added-section-" + page.contentType);
 
-			this.addSection(model);
+			const promise = this.addSection(model);
+			promise.then((id) => {
+				if (model.page.pageType === 'section') {
+					this.set('toEdit', id);
+				}
+			});
 		},
 
 		onInsertBlock(block) {
@@ -266,12 +272,18 @@ export default Ember.Component.extend(NotifierMixin, TooltipMixin, {
 
 			this.audit.record("added-content-block-" + block.get('contentType'));
 
+
 			this.addSection(model);
 		},
 
-		// to test
 		onDeleteBlock(id) {
-			this.attrs.onDeleteBlock(id);
-		}
+			const promise = this.attrs.onDeleteBlock(id);
+
+			promise.then(() => {
+				this.loadBlocks();
+			});
+
+			return true;
+		}		
 	}
 });

app/app/pods/document/block/route.js

@@ -27,5 +27,13 @@ export default Ember.Route.extend(AuthenticatedRouteMixin, {
 			document: self.modelFor('document').document,
 			block: self.get('sectionService').getBlock(params.block_id),
 		});
-	}
+	},
+
+	activate() {
+		$('body').addClass('background-color-off-white');
+	},
+
+	deactivate() {
+		$('body').removeClass('background-color-off-white');
+	}	
 });

app/app/pods/document/block/template.hbs

@@ -1 +1,20 @@
-{{document/block-editor document=model.document folder=model.folder block=model.block onCancel=(action 'onCancel') onAction=(action 'onAction')}}
+<div class="zone-section-editor">
+	<div class="container">
+		<div class="row">
+			<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
+				<div id="zone-document-content" class="zone-document-content">
+					<div class="back-to-space">
+						{{#link-to 'document.index' model.folder.id model.folder.slug model.document.id model.document.slug}}
+							<i class="material-icons">arrow_back</i>&nbsp;{{model.document.name}}
+						{{/link-to}}
+					</div>
+					{{document/document-heading document=model.document isEditor=false}}
+                    {{document/block-editor document=model.document folder=model.folder block=model.block onCancel=(action 'onCancel') onAction=(action 'onAction')}}
+				</div>
+			</div>
+		</div>
+	</div>
+</div>
+
+
+

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

@@ -138,21 +138,40 @@ export default Ember.Controller.extend(NotifierMixin, {
 					this.get('documentService').getPages(this.get('model.document.id')).then((pages) => {
 						this.set('model.pages', pages);
 
-						if (newPage.pageType === 'section') {
-							resolve(newPage.id);
-						} else {
+						if (newPage.pageType === 'tab') {
 							this.transitionToRoute('document.section',
 								this.get('model.folder.id'),
 								this.get('model.folder.slug'),
 								this.get('model.document.id'),
 								this.get('model.document.slug'),
 								newPage.id);
+						} else {
+							resolve(newPage.id);
 						}
 					});
 				});
 			});
 		},
 
+		onDeleteBlock(blockId) {
+			return new Ember.RSVP.Promise((resolve) => {
+				this.get('sectionService').deleteBlock(blockId).then(() => {
+					this.audit.record("deleted-block");
+					this.send("showNotification", "Deleted");
+					resolve();
+				});
+			});
+		},
+
+		onSavePageAsBlock(block) {
+			return new Ember.RSVP.Promise((resolve) => {
+				this.get('sectionService').addBlock(block).then(() => {
+					this.showNotification("Published");
+					resolve();
+				});
+			});
+		},
+
 		// to test
 		onPageSequenceChange(changes) {
 			this.get('documentService').changePageSequence(this.get('model.document.id'), changes).then(() => {
@@ -191,24 +210,10 @@ export default Ember.Controller.extend(NotifierMixin, {
 				this.get('target.router').refresh();
 			});
 		},
-
-		// to test
-		onSavePageAsBlock(block) {
-			this.get('sectionService').addBlock(block).then(() => {
-				this.showNotification("Published");
-			});
-		}
 	}
 });
 
 /*
-onDeleteBlock(blockId) {
-	this.get('sectionService').deleteBlock(blockId).then(() => {
-		this.audit.record("deleted-block");
-		this.send("showNotification", "Deleted");
-		this.transitionToRoute('document.index');
-	});
-},
 
 onDocumentDelete() {
 	this.get('documentService').deleteDocument(this.get('model.document.id')).then(() => {

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

@@ -1,4 +1,5 @@
 <div id="wrapper" class={{if toggled 'toggled'}}>
+	
 	<div id="sidebar-wrapper">
 		<div class="document-sidebar-content">
 			{{#if model.document.template}}
@@ -66,11 +67,12 @@
 						{{document/document-view document=model.document links=model.links pages=model.pages
 							folder=model.folder folders=model.folders sections=model.sections isEditor=model.isEditor pageId=pageId
 							onSavePage=(action 'onSavePage') onInsertSection=(action 'onInsertSection') 
-							onSavePageAsBlock=(action 'onSavePageAsBlock') onCopyPage=(action 'onCopyPage') onMovePage=(action 'onMovePage') 
+							onSavePageAsBlock=(action 'onSavePageAsBlock') onDeleteBlock=(action 'onDeleteBlock') onCopyPage=(action 'onCopyPage') onMovePage=(action 'onMovePage') 
 							onDeletePage=(action 'onPageDeleted')}}
 					</div>
 				</div>
 			</div>
 		</div>
 	</div>
+	
 </div>

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

@@ -254,11 +254,11 @@
 						float: left;
 
 						> .img {
-							float: left;
 							text-align: center;
 							display: inline-block;
 							height: 30px;
 							width: 30px;
+							float: left;
 						}
 					}
 
@@ -288,10 +288,28 @@
 					padding: 12px 0 0 20px;
 					width: 423px;
 					height: 60px;
+					position: relative;
 
 					&:hover {
 						@include ease-in();
 						border-color: $color-link;
+
+						> .block-actions {
+							display: block;
+						}
+					}
+
+					> .block-actions {
+						@include ease-in();
+						display: none;
+						position: absolute;
+						top: 10px;
+						right: 8px;
+
+						.material-icons {
+							color: $color-stroke;
+							font-size: 1rem;
+						}
 					}
 
 					> .details {

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

@@ -73,7 +73,7 @@
 				<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">
+							<div class="block-actions">
 								{{#link-to 'document.block' folder.id folder.slug document.id document.slug block.id}}
 									<i class="material-icons">mode_edit</i>
 								{{/link-to}}

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

@@ -14,6 +14,15 @@
 			<div class="tip">{{tip}}</div>
 			{{focus-input type='text' id="page-title" value=page.title class="mousetrap"}}
 		</div>
+		{{#if hasExcerpt}}
+			<div class="margin-top-30">
+				<div class="input-control">
+					<label>Excerpt</label>
+					<div class="tip">Short description</div>
+					{{textarea rows="3" id="page-excerpt" value=page.excerpt class="mousetrap"}}
+				</div>
+			</div>
+		{{/if}}		
 	</div>
 	<div class="dropdown-dialog cancel-edits-dialog">
 		<div class="content">