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,42 +14,17 @@ 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: {
-		setTemplate(chosen) {
+		editTemplate(template) {
-			if (is.undefined(chosen)) {
-				return;
-			}
-
-			this.set('selectedTemplate', chosen);
-			this.set('canEditTemplate', chosen.id !== "0" ? "Edit" : "");
-
-			let templates = this.get('savedTemplates');
-
-			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() {
+		startDocument(template) {
-			let template = this.get('selectedTemplate');
 			this.audit.record('used-saved-template');
 			this.attrs.onDocumentTemplate(template.id, template.title, "private");
 
@@ -57,3 +32,22 @@ export default Ember.Component.extend(NotifierMixin, {
 		}
 	}
 });
+
+/*
+setTemplate(chosen) {
+	if (is.undefined(chosen)) {
+		return;
+	}
+
+	this.set('selectedTemplate', chosen);
+	this.set('canEditTemplate', chosen.id !== "0" ? "Edit" : "");
+
+	let templates = this.get('savedTemplates');
+
+	templates.forEach(template => {
+		Ember.set(template, 'selected', template.id === chosen.id);
+	});
+},
+
+
+*/

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

@@ -1,6 +1,4 @@
-.folders-list {
+.space-tools {
-	margin-top: 30px;
-
 	.doc-tool {
 		position: absolute;
 		top: 150px;
@@ -14,10 +12,10 @@
 		right: -18px;
 		z-index: 888;
 		-webkit-animation: fadein 1s; /* Safari, Chrome and Opera > 12.1 */
-      	-moz-animation: fadein 1s; /* Firefox < 16 */
+		-moz-animation: fadein 1s; /* Firefox < 16 */
-       	-ms-animation: fadein 1s; /* Internet Explorer */
+		-ms-animation: fadein 1s; /* Internet Explorer */
-        -o-animation: fadein 1s; /* Opera < 12.1 */
+		-o-animation: fadein 1s; /* Opera < 12.1 */
-        animation: fadein 1s;
+		animation: fadein 1s;
 	}
 
 	.stuck-space-tool {
@@ -26,14 +24,16 @@
 		right: 0;
 		left: 0;
 		-webkit-animation: fadein 1s; /* Safari, Chrome and Opera > 12.1 */
-      	-moz-animation: fadein 1s; /* Firefox < 16 */
+		-moz-animation: fadein 1s; /* Firefox < 16 */
-       	-ms-animation: fadein 1s; /* Internet Explorer */
+		-ms-animation: fadein 1s; /* Internet Explorer */
-        -o-animation: fadein 1s; /* Opera < 12.1 */
+		-o-animation: fadein 1s; /* Opera < 12.1 */
-        animation: fadein 1s;
+		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,24 +1,9 @@
-{{#if session.isEditor}}
+<div class="space-tools">
-	<div id="add-space-button" class="regular-button button-white">
+	{{#if showingDocument}}
-		<i class="material-icons">add</i>
+		<div {{action 'showList'}} id="cancel-tool" class="round-button round-button-mono button-white doc-tool">
-		<div class="name">Space</div>
+			<i class="material-icons color-gray">close</i>
-	</div>
-	{{#dropdown-dialog target="add-space-button" position="bottom left" button="Add" color="flat-green" onAction=(action 'addFolder') focusOn="new-folder-name"}}
-		<div>
-			<div class="input-control">
-				<label>New space</label>
-				<div class="tip">A repository for related documentation</div>
-				{{input type='text' id="new-folder-name" class="mousetrap" value=newFolder}}
-			</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
@@ -32,51 +17,82 @@
 		</div>
 	{{/if}}
 
-	<div class="section">
+	{{#if showingList}}
-		<div class="heading">EVERYONE</div>
+		{{#if folderService.canEditCurrentFolder}}
-		{{#unless hasPublicFolders}}
+			<div {{action 'showDocument'}} class="round-button button-green doc-tool" data-tooltip="Document" data-tooltip-position="top center">
-			<div class="message margin-left-15">No global spaces</div>
+				<i class="material-icons">add</i>
-		{{/unless}}
+			</div>
-		<ul class="list">
+		{{/if}}
-			{{#each publicFolders as |folder|}}
-				{{#link-to 'folders.folder' folder.id folder.slug class="link" activeClass='selected' }}
-					<li class="item">{{ folder.name }}</li>
-				{{/link-to}}
-			{{/each}}
-		</ul>
-	</div>
-
-	{{#if session.authenticated}}
-		<div class="section">
-			<div class="heading">TEAM</div>
-			{{#unless hasProtectedFolders}}
-				<div class="message margin-left-15">No protected spaces</div>
-			{{/unless}}
-			<ul class="list">
-				{{#each protectedFolders as |folder|}}
-					{{#link-to 'folders.folder' folder.id folder.slug class="link" activeClass='selected' }}
-						<li class="item">{{ folder.name }}</li>
-					{{/link-to}}
-				{{/each}}
-			</ul>
-		</div>
-
-		<div class="section">
-			<div class="heading">PERSONAL</div>
-			{{#unless hasPrivateFolders}}
-				<div class="message margin-left-15">No private spaces</div>
-			{{/unless}}
-			<ul class="list">
-				{{#each privateFolders as |folder|}}
-					{{#link-to 'folders.folder' folder.id folder.slug class="link" activeClass='selected' }}
-						<li class="item">{{ folder.name }}</li>
-					{{/link-to}}
-				{{/each}}
-			</ul>
-		</div>
 	{{/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>
+			</div>
+			{{#dropdown-dialog target="add-space-button" position="bottom left" button="Add" color="flat-green" onAction=(action 'addFolder') focusOn="new-folder-name"}}
+				<div>
+					<div class="input-control">
+						<label>New space</label>
+						<div class="tip">A repository for related documentation</div>
+						{{input type='text' id="new-folder-name" class="mousetrap" value=newFolder}}
+					</div>
+				</div>
+			{{/dropdown-dialog}}
+		{{/if}}
+
+		<div class="section">
+			<div class="heading">EVERYONE</div>
+			{{#unless hasPublicFolders}}
+				<div class="message margin-left-15">No global spaces</div>
+			{{/unless}}
+			<ul class="list">
+				{{#each publicFolders as |folder|}}
+					{{#link-to 'folders.folder' folder.id folder.slug class="link" activeClass='selected' }}
+						<li class="item">{{ folder.name }}</li>
+					{{/link-to}}
+				{{/each}}
+			</ul>
+		</div>
+
+		{{#if session.authenticated}}
+			<div class="section">
+				<div class="heading">TEAM</div>
+				{{#unless hasProtectedFolders}}
+					<div class="message margin-left-15">No protected spaces</div>
+				{{/unless}}
+				<ul class="list">
+					{{#each protectedFolders as |folder|}}
+						{{#link-to 'folders.folder' folder.id folder.slug class="link" activeClass='selected' }}
+							<li class="item">{{ folder.name }}</li>
+						{{/link-to}}
+					{{/each}}
+				</ul>
+			</div>
+
+			<div class="section">
+				<div class="heading">PERSONAL</div>
+				{{#unless hasPrivateFolders}}
+					<div class="message margin-left-15">No private spaces</div>
+				{{/unless}}
+				<ul class="list">
+					{{#each privateFolders as |folder|}}
+						{{#link-to 'folders.folder' folder.id folder.slug class="link" activeClass='selected' }}
+							<li class="item">{{ folder.name }}</li>
+						{{/link-to}}
+					{{/each}}
+				</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')}}
+<div class="templates-list">
-	<ul class="start-document-options" style="min-width:185px;">
+	<ul class="list">
-		{{#each savedTemplates key="id" as |template|}}
+		{{#each savedTemplates key="id"as |template|}}
-			<li class="option {{if template.selected "selected"}}" {{action 'setTemplate' template}}>
+			<li class="item" {{action 'startDocument' template}}>
-				{{#if template.selected}}
+				<div class="icon">
-					<i class="material-icons">radio_button_checked</i>
+					<img class="img" src="/assets/img/{{template.img}}.png" srcset="/assets/img/{{template.img}}@2x.png" />
-				{{else}}
+				</div>
-					<i class="material-icons">radio_button_unchecked</i>
+				<div class="details">
-				{{/if}}
+					<div class='title'>
-				&nbsp;{{ template.title }}
+						{{template.title}}
+					</div>
+					<div class='desc'>{{template.description}}</div>
+				</div>
 			</li>
 		{{/each}}
 	</ul>
-{{/dropdown-dialog}}
+</div>