From a913f08c494e0c7be171dac8d5101f9250a16b79 Mon Sep 17 00:00:00 2001
From: Harvey Kandola <harvey@documize.com>
Date: Tue, 18 Oct 2016 13:04:38 -0700
Subject: [PATCH] edit saved templates

This closes #47 and provides the means to edit/delete saved templates
---
 app/app/components/folder/folders-list.js     |  1 +
 app/app/styles/view/page-documents.scss       | 41 +++++++++++--------
 .../components/folder/folders-list.hbs        |  1 +
 .../components/folder/start-document.hbs      | 11 +++--
 4 files changed, 33 insertions(+), 21 deletions(-)

diff --git a/app/app/components/folder/folders-list.js b/app/app/components/folder/folders-list.js
index 13775805..dd68ca5f 100644
--- a/app/app/components/folder/folders-list.js
+++ b/app/app/components/folder/folders-list.js
@@ -39,6 +39,7 @@ export default Ember.Component.extend(TooltipMixin, NotifierMixin, {
                 title: "Empty",
 				description: "An empty canvas for your words",
 				img: "template-blank",
+				locked: true
             };
 
 			saved.forEach(function(t) {
diff --git a/app/app/styles/view/page-documents.scss b/app/app/styles/view/page-documents.scss
index 183b8534..b0dfe480 100644
--- a/app/app/styles/view/page-documents.scss
+++ b/app/app/styles/view/page-documents.scss
@@ -179,7 +179,7 @@
 	opacity: 0.5;
 	background-image: url("/assets/img/no-documents.png");
 	background-repeat: no-repeat;
-	background-position: center; 
+	background-position: center;
 
 	> .box {
 		max-width: 400px;
@@ -209,25 +209,10 @@
 
 		> .item {
 			list-style: none;
-			cursor: pointer;
 			padding: 10px 5px;
-			margin: 5px 0;
+			margin: 20px 0;
 			@include ease-in();
 
-			&:hover {
-				@include ease-in();
-
-				> .details {
-					> .title {
-						color: $color-primary;
-					}
-
-					> .desc {
-						color: $color-primary;
-					}
-				}
-		    }
-
 			.icon {
 				text-align: center;
 				display: inline-block;
@@ -240,12 +225,26 @@
 					height: 40px;
 					width: 40px;
 				}
+
+				> .edit-control {
+					color: $color-gray;
+					font-size: 0.9rem;
+					text-align: center;
+					float: left;
+				    margin: 5px 0 0 9px;
+					cursor: pointer;
+
+					&:hover {
+						color: $color-link;
+					}
+				}
 			}
 
 			> .details {
 				vertical-align: top;
 				display: inline-block;
 				width: 80%;
+				cursor: pointer;
 
 				> .title {
 					font-size: 1rem;
@@ -255,10 +254,16 @@
 				}
 
 				> .desc {
-					color: $color-gray;
+					color: $color-off-black;
 					font-size: 0.9rem;
 					margin-top: 5px;
 				}
+
+				&:hover {
+					> .title, > .desc {
+						color: $color-link !important;
+					}
+			    }
 			}
 		}
 	}
diff --git a/app/app/templates/components/folder/folders-list.hbs b/app/app/templates/components/folder/folders-list.hbs
index 373c2fe4..97969810 100644
--- a/app/app/templates/components/folder/folders-list.hbs
+++ b/app/app/templates/components/folder/folders-list.hbs
@@ -7,6 +7,7 @@
 		{{folder/start-document
 			savedTemplates=savedTemplates
 			folder=folder
+			editor=folderService.canEditCurrentFolder
 			onEditTemplate=(action 'onEditTemplate')
 			onDocumentTemplate=(action 'onDocumentTemplate')}}
 	{{/if}}
diff --git a/app/app/templates/components/folder/start-document.hbs b/app/app/templates/components/folder/start-document.hbs
index a527bf21..4a45206f 100644
--- a/app/app/templates/components/folder/start-document.hbs
+++ b/app/app/templates/components/folder/start-document.hbs
@@ -2,12 +2,17 @@
 
 <div class="templates-list">
 	<ul class="list">
-		{{#each savedTemplates key="id"as |template|}}
-			<li class="item" {{action 'startDocument' template}}>
+		{{#each savedTemplates key="id" as |template|}}
+			<li class="item">
 				<div class="icon">
 					<img class="img" src="/assets/img/{{template.img}}.png" srcset="/assets/img/{{template.img}}@2x.png" />
+					{{#if editor}}
+						{{#unless template.locked}}
+							<div class="edit-control" {{action 'editTemplate' template}}>edit</div>
+						{{/unless}}
+					{{/if}}
 				</div>
-				<div class="details">
+				<div class="details" {{action 'startDocument' template}}>
 					<div class='title'>
 						{{template.title}}
 					</div>