start new document in sidebar

app/app/components/folder/folders-list.js

@@ -26,6 +26,8 @@ export default Ember.Component.extend(TooltipMixin, NotifierMixin, {
 	hasPrivateFolders: false,
 	newFolder: "",
 	showScrollTool: false,
+	showingDocument: false,
+	showingList: true,
 
 	init() {
 		this._super(...arguments);
@@ -35,9 +37,14 @@ export default Ember.Component.extend(TooltipMixin, NotifierMixin, {
             let emptyTemplate = {
                 id: "0",
                 title: "Empty document",
-                selected: true
+				description: "An empty canvas for your masterpiece",
+				img: "template-blank",
             };
 
+			saved.forEach(function(t) {
+				t.img = "template-saved";
+			});
+
             saved.unshiftObject(emptyTemplate);
             _this.set('savedTemplates', saved);
         });
@@ -134,6 +141,16 @@ export default Ember.Component.extend(TooltipMixin, NotifierMixin, {
 			return true;
 		},
 
+		showDocument() {
+			this.set('showingDocument', true);
+			this.set('showingList', false);
+		},
+
+		showList() {
+			this.set('showingDocument', false);
+			this.set('showingList', true);
+		},
+
 		onEditTemplate(template) {
             this.navigateToDocument(template);
         },

app/app/components/folder/start-document.js

@@ -14,18 +14,27 @@ import NotifierMixin from '../../mixins/notifier';
 
 export default Ember.Component.extend(NotifierMixin, {
 	localStorage: Ember.inject.service(),
-	tagName: 'span',
-	selectedTemplate: {
-		id: "0"
-	},
 	canEditTemplate: "",
 
-	didReceiveAttrs() {
-		this.send('setTemplate', this.get('savedTemplates')[0]);
+	actions: {
+		editTemplate(template) {
+			this.audit.record('edited-saved-template');
+			this.attrs.onEditTemplate(template);
+
+			return true;
 		},
 
-	actions: {
-		setTemplate(chosen) {
+		startDocument(template) {
+			this.audit.record('used-saved-template');
+			this.attrs.onDocumentTemplate(template.id, template.title, "private");
+
+			return true;
+		}
+	}
+});
+
+/*
+setTemplate(chosen) {
 	if (is.undefined(chosen)) {
 		return;
 	}
@@ -38,22 +47,7 @@ export default Ember.Component.extend(NotifierMixin, {
 	templates.forEach(template => {
 		Ember.set(template, 'selected', template.id === chosen.id);
 	});
-		},
+},
 
-		editTemplate() {
-			let template = this.get('selectedTemplate');
-			this.audit.record('edited-saved-template');
-			this.attrs.onEditTemplate(template);
 
-			return true;
-		},
-
-		startDocument() {
-			let template = this.get('selectedTemplate');
-			this.audit.record('used-saved-template');
-			this.attrs.onDocumentTemplate(template.id, template.title, "private");
-
-			return true;
-		}
-	}
-});
+*/

app/app/styles/view/page-documents.scss

@@ -1,6 +1,4 @@
-.folders-list {
-	margin-top: 30px;
-
+.space-tools {
 	.doc-tool {
 		position: absolute;
 		top: 150px;
@@ -31,9 +29,11 @@
 		-o-animation: fadein 1s; /* Opera < 12.1 */
 		animation: fadein 1s;
 	}
+}
 
+.folders-list {
 	> .section {
-		margin: 0 0 40px 0;
+		margin: 30px 0 10px 0;
 
 		> .heading {
 			font-size: 0.9rem;
@@ -195,3 +195,67 @@
 		}
 	}
 }
+
+.templates-list {
+	margin: 0;
+
+	> .list {
+		margin: 0;
+		padding: 0;
+
+		> .item {
+			list-style: none;
+			cursor: pointer;
+			padding: 10px 5px;
+			margin: 5px 0;
+			@include ease-in();
+
+			&:hover {
+				@include ease-in();
+
+				> .details {
+					> .title {
+						color: $color-primary;
+					}
+
+					> .desc {
+						color: $color-primary;
+					}
+				}
+		    }
+
+			.icon {
+				text-align: center;
+				display: inline-block;
+				width: 50px;
+
+				> .img {
+					float: left;
+					text-align: center;
+					display: inline-block;
+					height: 40px;
+					width: 40px;
+				}
+			}
+
+			> .details {
+				vertical-align: top;
+				display: inline-block;
+				width: 80%;
+
+				> .title {
+					font-size: 1rem;
+					font-weight: bold;
+					color: $color-off-black;
+					letter-spacing: 0.5px;
+				}
+
+				> .desc {
+					color: $color-gray;
+					font-size: 0.9rem;
+					margin-top: 5px;
+				}
+			}
+		}
+	}
+}

app/app/templates/components/folder/folders-list.hbs

@@ -1,4 +1,35 @@
-{{#if session.isEditor}}
+<div class="space-tools">
+	{{#if showingDocument}}
+		<div {{action 'showList'}} id="cancel-tool" class="round-button round-button-mono button-white doc-tool">
+			<i class="material-icons color-gray">close</i>
+		</div>
+
+		{{folder/start-document
+			savedTemplates=savedTemplates
+			folder=folder
+			onEditTemplate=(action 'onEditTemplate')
+			onDocumentTemplate=(action 'onDocumentTemplate')}}
+	{{/if}}
+
+	{{#if showScrollTool}}
+		<div {{action 'scrollTop'}} id="scroll-space-tool" class="round-button round-button-mono button-white scroll-space-tool" data-tooltip="Back to top" data-tooltip-position="top center">
+			<i class="material-icons color-gray">vertical_align_top</i>
+		</div>
+	{{/if}}
+
+	{{#if showingList}}
+		{{#if folderService.canEditCurrentFolder}}
+			<div {{action 'showDocument'}} class="round-button button-green doc-tool" data-tooltip="Document" data-tooltip-position="top center">
+				<i class="material-icons">add</i>
+			</div>
+		{{/if}}
+	{{/if}}
+</div>
+
+<div class="folders-list">
+	{{#if showingList}}
+
+		{{#if session.isEditor}}
 			<div id="add-space-button" class="regular-button button-white">
 				<i class="material-icons">add</i>
 				<div class="name">Space</div>
@@ -12,24 +43,6 @@
 					</div>
 				</div>
 			{{/dropdown-dialog}}
-{{/if}}
-
-<div class="folders-list">
-	{{#if folderService.canEditCurrentFolder}}
-		<div id="start-document-button" class="round-button button-green doc-tool" data-tooltip="Document" data-tooltip-position="top center">
-			<i class="material-icons">add</i>
-		</div>
-		{{folder/start-document
-			savedTemplates=savedTemplates
-			folder=folder
-			onEditTemplate=(action 'onEditTemplate')
-			onDocumentTemplate=(action 'onDocumentTemplate')}}
-	{{/if}}
-
-	{{#if showScrollTool}}
-		<div {{action 'scrollTop'}} id="scroll-space-tool" class="round-button round-button-mono button-white scroll-space-tool" data-tooltip="Back to top" data-tooltip-position="top center">
-			<i class="material-icons color-gray">vertical_align_top</i>
-		</div>
 		{{/if}}
 
 		<div class="section">
@@ -75,8 +88,11 @@
 				</ul>
 			</div>
 		{{/if}}
+	{{/if}}
 </div>
 
+
+
 <div class="copyright hidden-xs hidden-sm">
 	<a href="https://documize.com?ref=app-footer" target="_blank">Copyright&nbsp;&copy;&nbsp;2016 Documize Inc.</a>
 </div>

app/app/templates/components/folder/start-document.hbs

@@ -1,14 +1,17 @@
-{{#dropdown-dialog target="start-document-button" position="bottom left" button="Start" color="flat-green" onAction=(action 'startDocument') button2=canEditTemplate color2="flat-blue" onAction2=(action 'editTemplate')}}
-	<ul class="start-document-options" style="min-width:185px;">
-		{{#each savedTemplates key="id" as |template|}}
-			<li class="option {{if template.selected "selected"}}" {{action 'setTemplate' template}}>
-				{{#if template.selected}}
-					<i class="material-icons">radio_button_checked</i>
-				{{else}}
-					<i class="material-icons">radio_button_unchecked</i>
-				{{/if}}
-				&nbsp;{{ template.title }}
+<div class="templates-list">
+	<ul class="list">
+		{{#each savedTemplates key="id"as |template|}}
+			<li class="item" {{action 'startDocument' template}}>
+				<div class="icon">
+					<img class="img" src="/assets/img/{{template.img}}.png" srcset="/assets/img/{{template.img}}@2x.png" />
+				</div>
+				<div class="details">
+					<div class='title'>
+						{{template.title}}
+					</div>
+					<div class='desc'>{{template.description}}</div>
+				</div>
 			</li>
 		{{/each}}
 	</ul>
-{{/dropdown-dialog}}
+</div>