profile UX

app/app/components/layout/zone-navigation.js

@@ -13,12 +13,8 @@ import Ember from 'ember';
 import netUtil from '../../utils/net';
 
 export default Ember.Component.extend({
-    dashboardMode: false,
-    searchMode: false,
-    profileMode: false,
-    settingsMode: false,
-    folderMode: false,
-    documentMode: false,
+	folderService: Ember.inject.service('folder'),
+	folder: null,
 
     didInitAttrs() {
         let self = this;
@@ -29,6 +25,12 @@ export default Ember.Component.extend({
         }
     },
 
+	didReceiveAttrs() {
+		if (this.get('folder') === null) {
+			this.set("folder", this.get('folderService.currentFolder'));
+		}
+	},
+
     actions: {
         switchAccount(domain) {
             this.audit.record('switched-account');

app/app/pods/profile/route.js

@@ -2,6 +2,7 @@ import Ember from 'ember';
 
 export default Ember.Route.extend({
     userService: Ember.inject.service('user'),
+	folderService: Ember.inject.service('folder'),
 
     beforeModel: function() {
         if (!this.session.authenticated) {
@@ -19,7 +20,6 @@ export default Ember.Route.extend({
 
     setupController(controller, model) {
         controller.set('model', model);
-		let fullname = model.get('fullname');
-        controller.set('message', `Profile for ${fullname}`);
+		controller.set("folder", this.get('folderService.currentFolder'));
     }
 });

app/app/pods/profile/template.hbs

@@ -1,13 +1,26 @@
-{{#header/page-navigation profileMode=true}}
-    {{header/message-box message="Manage your profile"}}
-{{/header/page-navigation}}
+{{#layout/zone-container}}
 
-{{#layout/page-container}}
-		{{#layout/page-sidebar}}
+	{{layout/zone-navigation}}
+
+	{{#layout/zone-header title=session.user.fullname message="Your Documize profile"}}
+		<div class="pull-right">
+			{{#link-to 'folders.folder' folder.id folder.slug}}
+				<div class="regular-button button-white">
+					<i class="material-icons">arrow_back</i>
+					<div class="name">home</div>
+				</div>
+			{{/link-to}}
+		</div>
+	{{/layout/zone-header}}
+
+	{{#layout/zone-sidebar}}
+		<div class="sidebar-menu">
 			<div class="avatar-large">{{session.user.initials}}</div>
-		{{/layout/page-sidebar}}
-		{{#layout/page-content}}
-			<div class="input-form">
+		</div>
+	{{/layout/zone-sidebar}}
+
+	{{#layout/zone-content}}
+		<div class="input-form form-borderless">
 			<form>
 				<div class="input-control">
 					<label>Firstname</label>
@@ -34,5 +47,6 @@
 				<div class="regular-button button-blue" {{ action 'save' }}>save</div>
 			</form>
 		</div>
-		{{/layout/page-content}}
-{{/layout/page-container}}
+	{{/layout/zone-content}}
+
+{{/layout/zone-container}}

app/app/styles/view/layout.scss

@@ -133,7 +133,7 @@
 }
 
 .zone-sidebar {
-	height:100%;
+	height: 100%;
 	min-height:100%;
 	padding: 0 0 0 40px;
 	border-right: 1px solid $color-border;
@@ -141,6 +141,6 @@
 }
 
 .zone-content {
-	padding: 0 40px 0 40px;
+	padding: 30px 40px 30px 40px;
 	float: left;
 }

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

@@ -1,7 +1,5 @@
 
 .folders-list {
-	margin: 30px 0;
-
 	> .add-space-action {
 		text-align: center;
 		margin-bottom: 30px;
@@ -53,8 +51,6 @@
 }
 
 .documents-list {
-	margin: 15px 0;
-
 	> .document {
 		margin: 0;
 		padding: 20px 20px 25px 20px;

app/app/styles/view/page-folder-settings.scss

@@ -1,3 +0,0 @@
-.folder-settings {
-	margin-top: 30px;
-}

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

@@ -1,5 +1,5 @@
-
-<div class="folders-list">
+<div class="sidebar-menu">
+	<div class="folders-list">
 
 		{{#if session.isEditor}}
 			<div class="add-space-action hidden-xs hidden-sm">
@@ -62,8 +62,9 @@
 				</ul>
 			</div>
 		{{/if}}
-</div>
+	</div>
 
-<div class="copyright hidden-xs hidden-sm">
+	<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>
 </div>

app/app/templates/components/layout/zone-navigation.hbs

@@ -6,13 +6,13 @@
                     <i class="material-icons">apps</i>
                 </div>
             {{else}}
-                {{#link-to 'folders.folder' title=session.appMeta.title}}
+                {{#link-to 'folders.folder' folder.id folder.slug title=session.appMeta.title}}
                     <div class="header-button">
                         <i class="material-icons">apps</i>
                     </div>
                 {{/link-to}}
             {{/if}}
-			{{#link-to 'folders.folder' class="title"}}
+			{{#link-to 'folders.folder' folder.id folder.slug class="title"}}
             	<div>{{session.appMeta.title}}</div>
 			{{/link-to}}
     	</div>