From 6d481c335a620c4a17f8603096cfceb90137bff4 Mon Sep 17 00:00:00 2001
From: Harvey Kandola <harvey@documize.com>
Date: Tue, 7 Mar 2017 10:09:36 +0000
Subject: [PATCH] idiomatic code for {{component}} helper

---
 app/app/components/section/base-renderer.js   |   5 -
 app/app/pods/document/index/template.hbs      |   2 +-
 app/app/styles/view/document/layout.scss      |  10 +-
 app/app/styles/view/document/sidebar.scss     | 212 +++++++++---------
 .../components/document/document-page.hbs     |   8 +-
 .../components/section/base-renderer.hbs      |   2 +-
 6 files changed, 117 insertions(+), 122 deletions(-)

diff --git a/app/app/components/section/base-renderer.js b/app/app/components/section/base-renderer.js
index 243a9a17..572614b9 100644
--- a/app/app/components/section/base-renderer.js
+++ b/app/app/components/section/base-renderer.js
@@ -12,9 +12,4 @@
 import Ember from 'ember';
 
 export default Ember.Component.extend({
-    didReceiveAttrs() {
-        this._super(...arguments);
-        
-        this.set('rendererType', 'section/' + this.get('page.contentType') + '/type-renderer');
-    }
 });
\ No newline at end of file
diff --git a/app/app/pods/document/index/template.hbs b/app/app/pods/document/index/template.hbs
index f22da137..c7af9086 100644
--- a/app/app/pods/document/index/template.hbs
+++ b/app/app/pods/document/index/template.hbs
@@ -1,7 +1,7 @@
 <div id="wrapper" class={{if toggled 'toggled'}}>
 	
 	<div id="sidebar-wrapper">
-		<div class="document-sidebar-content">
+		<div class="document-sidebar-common">
 			{{#if model.document.template}}
 				<div class="is-template">TEMPLATE</div>
 			{{/if}}
diff --git a/app/app/styles/view/document/layout.scss b/app/app/styles/view/document/layout.scss
index 0eed9952..48e2c8ce 100644
--- a/app/app/styles/view/document/layout.scss
+++ b/app/app/styles/view/document/layout.scss
@@ -1,3 +1,5 @@
+$document-sidebar-width: 400px;
+
 #wrapper {
     padding-right: 0;
 	margin-left: 60px;
@@ -8,11 +10,9 @@
 	background-color: $color-off-white;
 }
 
-$document-sidebar-width: 400px;
-
-#wrapper.toggled {
-    // padding-right: $document-sidebar-width;
-}
+// #wrapper.toggled {
+//    padding-right: $document-sidebar-width;
+// }
 
 #sidebar-wrapper {
     // z-index: 1000;
diff --git a/app/app/styles/view/document/sidebar.scss b/app/app/styles/view/document/sidebar.scss
index 8936cd92..dcca0bbf 100644
--- a/app/app/styles/view/document/sidebar.scss
+++ b/app/app/styles/view/document/sidebar.scss
@@ -1,4 +1,4 @@
-.document-sidebar-content {
+.document-sidebar-common {
 	display: inline-block;
 	width: 340px;
 	padding: 40px 20px;
@@ -16,127 +16,127 @@
 	padding: 50px 0 0 0;
 }
 
-.xxxx {
+// .xxxx {
 
-	.is-template {
-		color: $color-goldy;
-		font-weight: bold;
-		font-size: 1.5em;
-		margin-bottom: 30px;
-		padding-bottom: 5px;
-		border-bottom: 1px dotted $color-goldy;
-	}
+// 	.is-template {
+// 		color: $color-goldy;
+// 		font-weight: bold;
+// 		font-size: 1.5em;
+// 		margin-bottom: 30px;
+// 		padding-bottom: 5px;
+// 		border-bottom: 1px dotted $color-goldy;
+// 	}
 
-	@extend .no-select;
+// 	@extend .no-select;
 
-	.stuck-toc {
-		position: fixed;
-		top: 20px;
-		-webkit-animation: fadein 1s;
-		-moz-animation: fadein 1s;
-		-ms-animation: fadein 1s;
-		-o-animation: fadein 1s;
-		animation: fadein 1s;
-	}
+// 	.stuck-toc {
+// 		position: fixed;
+// 		top: 20px;
+// 		-webkit-animation: fadein 1s;
+// 		-moz-animation: fadein 1s;
+// 		-ms-animation: fadein 1s;
+// 		-o-animation: fadein 1s;
+// 		animation: fadein 1s;
+// 	}
 
-	.section-tool {
-		position: absolute;
-		top: 130px;
-		right: -18px;
-		z-index: 999;
-	}
+// 	.section-tool {
+// 		position: absolute;
+// 		top: 130px;
+// 		right: -18px;
+// 		z-index: 999;
+// 	}
 
-	.scroll-tool {
-		position: absolute;
-		top: 130px;
-		right: -18px;
-		z-index: 999;
-		-webkit-animation: fadein 1s;
-		-moz-animation: fadein 1s;
-		-ms-animation: fadein 1s;
-		-o-animation: fadein 1s;
-		animation: fadein 1s;
-	}
+// 	.scroll-tool {
+// 		position: absolute;
+// 		top: 130px;
+// 		right: -18px;
+// 		z-index: 999;
+// 		-webkit-animation: fadein 1s;
+// 		-moz-animation: fadein 1s;
+// 		-ms-animation: fadein 1s;
+// 		-o-animation: fadein 1s;
+// 		animation: fadein 1s;
+// 	}
 
-	.stuck-tool {
-		position: fixed !important;
-		top: 130px !important;
-		right: 0;
-		left: 0;
-		-webkit-animation: fadein 1s;
-		-moz-animation: fadein 1s;
-		-ms-animation: fadein 1s;
-		-o-animation: fadein 1s;
-		animation: fadein 1s;
-	}
+// 	.stuck-tool {
+// 		position: fixed !important;
+// 		top: 130px !important;
+// 		right: 0;
+// 		left: 0;
+// 		-webkit-animation: fadein 1s;
+// 		-moz-animation: fadein 1s;
+// 		-ms-animation: fadein 1s;
+// 		-o-animation: fadein 1s;
+// 		animation: fadein 1s;
+// 	}
 
-	.close-action {
-		float: right;
+// 	.close-action {
+// 		float: right;
 
-		> .round-button-mono {
-			color: $color-stroke;
-			border-color: $color-stroke;
+// 		> .round-button-mono {
+// 			color: $color-stroke;
+// 			border-color: $color-stroke;
 
-			> .material-icons {
-				color: $color-stroke;
-			}
-		}
-	}
+// 			> .material-icons {
+// 				color: $color-stroke;
+// 			}
+// 		}
+// 	}
 
-	.document-structure {
-		> .toc-controls {
-			margin: 0;
-			color: $color-gray;
+// 	.document-structure {
+// 		> .toc-controls {
+// 			margin: 0;
+// 			color: $color-gray;
 
-			> .round-button-mono {
-				color: $color-green;
-				border-color: $color-green;
+// 			> .round-button-mono {
+// 				color: $color-green;
+// 				border-color: $color-green;
 
-				> .material-icons {
-					color: $color-green;
-				}
-			}
+// 				> .material-icons {
+// 					color: $color-green;
+// 				}
+// 			}
 
-			> .disabled {
-				@extend .cursor-not-allowed;
-				color: $color-stroke;
-				border-color: $color-stroke;
+// 			> .disabled {
+// 				@extend .cursor-not-allowed;
+// 				color: $color-stroke;
+// 				border-color: $color-stroke;
 
-				> .material-icons {
-					color: $color-stroke;
-				}
-			}
-		}
+// 				> .material-icons {
+// 					color: $color-stroke;
+// 				}
+// 			}
+// 		}
 
-		.entries {
-			padding: 0;
-			list-style: none;
-			font-size: 13px;
-			overflow-x: hidden;
-			list-style-type: none;
-			margin: 20px 0 0;
-			font-family: $font-semibold;
+// 		.entries {
+// 			padding: 0;
+// 			list-style: none;
+// 			font-size: 13px;
+// 			overflow-x: hidden;
+// 			list-style-type: none;
+// 			margin: 20px 0 0;
+// 			font-family: $font-semibold;
 
-			.item {
-				padding: 4px 0;
-				text-overflow: ellipsis;
-				word-wrap: break-word;
-				white-space: nowrap;
-				overflow: hidden;
+// 			.item {
+// 				padding: 4px 0;
+// 				text-overflow: ellipsis;
+// 				word-wrap: break-word;
+// 				white-space: nowrap;
+// 				overflow: hidden;
 
-				> .link {
-					color: $color-gray;
+// 				> .link {
+// 					color: $color-gray;
 
-					&:hover {
-						color: $color-link;
-					}
-				}
+// 					&:hover {
+// 						color: $color-link;
+// 					}
+// 				}
 
-				> .selected {
-					color: $color-link;
-					font-weight: bold;
-				}
-			}
-		}
-	}
-}
+// 				> .selected {
+// 					color: $color-link;
+// 					font-weight: bold;
+// 				}
+// 			}
+// 		}
+// 	}
+// }
diff --git a/app/app/templates/components/document/document-page.hbs b/app/app/templates/components/document/document-page.hbs
index 9395fb09..7d5630ab 100644
--- a/app/app/templates/components/document/document-page.hbs
+++ b/app/app/templates/components/document/document-page.hbs
@@ -1,10 +1,10 @@
 <div id="page-{{ page.id }}" class="is-a-page wysiwyg" data-id="{{ page.id }}" data-type="{{ page.contentType }}">
-	{{#unless editMode}}
+	{{#if editMode}}
+		{{document/document-editor document=document folder=folder page=page meta=meta onCancel=(action 'onCancelEdit') onAction=(action 'onSavePage')}}
+	{{else}}
 		{{document/page-heading tagName=page.tagName document=document folder=folder page=page isEditor=isEditor tabMode=tabMode
 			onEdit=(action 'onEdit') onSavePageAsBlock=(action 'onSavePageAsBlock')
 			onCopyPage=(action 'onCopyPage') onMovePage=(action 'onMovePage') onDeletePage=(action 'onDeletePage')}}
 		{{section/base-renderer page=page}}
-	{{else}}
-		{{document/document-editor document=document folder=folder page=page meta=meta onCancel=(action 'onCancelEdit') onAction=(action 'onSavePage')}}
-	{{/unless}}
+	{{/if}}
 </div>
diff --git a/app/app/templates/components/section/base-renderer.hbs b/app/app/templates/components/section/base-renderer.hbs
index 8f785002..7789a3ec 100644
--- a/app/app/templates/components/section/base-renderer.hbs
+++ b/app/app/templates/components/section/base-renderer.hbs
@@ -1,3 +1,3 @@
 <div id="page-data-{{ page.id }}" class="wysiwyg">
-	{{component rendererType page=page}}
+	{{component (concat "section/" page.contentType "/type-renderer") page=page}}
 </div>