new layout designs!

app/app/components/document/document-sidebar.js

@@ -34,18 +34,6 @@ export default Ember.Component.extend(TooltipMixin, NotifierMixin, {
 	didInsertElement() {
         this.eventBus.subscribe('resized', this, 'positionTool');
 		this.eventBus.subscribe('scrolled', this, 'positionTool');
-
-		// new Waypoint({
-		// 	element: document.getElementById('zone-header'),
-		// 	handler: function(direction) {
-		// 		console.log(direction);
-		// 		if (direction === 'up') {
-		// 			$(".scroll-tool").addClass('hide');
-		// 			console.log("hiding");
-		// 		}
-		// 	},
-		// 	offset: 50
-		// });
 	},
 
 	willDestroyElement() {

app/app/components/folder/folder-toolbar.js

@@ -22,7 +22,7 @@ export default Ember.Component.extend(NotifierMixin, TooltipMixin, {
     templateService: Ember.inject.service('template'),
     folderService: Ember.inject.service('folder'),
     session: Ember.inject.service(),
-
+	showToolbar: false,
     folder: {},
     busy: false,
     importedDocuments: [],
@@ -31,9 +31,12 @@ export default Ember.Component.extend(NotifierMixin, TooltipMixin, {
     moveFolderId: "",
 
     didReceiveAttrs() {
+		let self = this;
+
         this.set('isFolderOwner', this.get('folder.userId') === this.get("session.user.id"));
 
-        let self = this;
+		let show = this.get('isFolderOwner') || this.get('hasSelectedDocuments') || this.get('folderService').get('canEditCurrentFolder');
+		this.set('showToolbar', show);
 
         this.get('templateService').getSavedTemplates().then(function(saved) {
             let emptyTemplate = {
@@ -62,6 +65,7 @@ export default Ember.Component.extend(NotifierMixin, TooltipMixin, {
                 this.addTooltip(document.getElementById("folder-settings-button"));
             }
             if (this.get('folderService').get('canEditCurrentFolder')) {
+				this.addTooltip(document.getElementById("import-document-button"));
                 this.addTooltip(document.getElementById("start-document-button"));
             }
         }

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

@@ -22,12 +22,17 @@ export default Ember.Component.extend(TooltipMixin, {
 	hasProtectedFolders: false,
 	hasPrivateFolders: false,
 	newFolder: "",
+	showScrollTool: false,
 
 	didInsertElement() {
 		this._super(...arguments);
+
 		if (this.session.authenticated) {
-			this.addTooltip(document.getElementById("add-folder-button"));
+			this.addTooltip(document.getElementById("add-space-button"));
 		}
+
+		this.eventBus.subscribe('resized', this, 'positionTool');
+		this.eventBus.subscribe('scrolled', this, 'positionTool');
 	},
 
 	didReceiveAttrs() {
@@ -65,6 +70,20 @@ export default Ember.Component.extend(TooltipMixin, {
 		this.destroyTooltips();
 	},
 
+	positionTool() {
+		let s = $(".scroll-space-tool");
+		let windowpos = $(window).scrollTop();
+
+		if (windowpos >= 300) {
+			this.set('showScrollTool', true);
+			s.addClass("stuck-space-tool");
+			s.css('left', parseInt($(".zone-sidebar").css('width')) - 18 + 'px');
+		} else {
+			this.set('showScrollTool', false);
+			s.removeClass("stuck-space-tool");
+		}
+	},
+
 	actions: {
 		addFolder() {
 			var folderName = this.get('newFolder');
@@ -78,6 +97,14 @@ export default Ember.Component.extend(TooltipMixin, {
 
 			this.set('newFolder', "");
 			return true;
+		},
+
+		scrollTop() {
+			this.set('showScrollTool', false);
+
+			$("html,body").animate({
+				scrollTop: 0
+			}, 500, "linear");
 		}
 	}
 });

app/app/helpers/document/file-icon.js

@@ -107,7 +107,7 @@ export function documentFileIcon(params) {
         case "xslt":
     }
 
-    return new Ember.Handlebars.SafeString(html);
+    return new Ember.String.htmlSafe(html);
 }
 
 export default Ember.Helper.helper(documentFileIcon);

app/app/pods/document/index/template.hbs

@@ -2,15 +2,6 @@
 
 	{{layout/zone-navigation}}
 
-	{{#layout/zone-header title=model.name message=model.excerpt}}
-		{{document/document-toolbar document=model pages=pages folder=folder owner=owner
-			isEditor=isEditor users=users
-			onSaveTemplate=(action 'onSaveTemplate')
-			onDocumentChange=(action 'onDocumentChange')
-			onAttachmentUpload=(action 'onAttachmentUpload')
-			onDocumentDelete=(action 'onDocumentDelete')}}
-	{{/layout/zone-header}}
-
 	{{#layout/zone-sidebar}}
 		{{document/document-sidebar document=model meta=meta folder=folder pages=pages page=page owner=owner isEditor=isEditor
 			onAddSection=(action 'onAddSection')
@@ -20,6 +11,13 @@
 	{{/layout/zone-sidebar}}
 
 	{{#layout/zone-content}}
+		{{document/document-toolbar document=model pages=pages folder=folder owner=owner
+			isEditor=isEditor users=users
+			onSaveTemplate=(action 'onSaveTemplate')
+			onDocumentChange=(action 'onDocumentChange')
+			onAttachmentUpload=(action 'onAttachmentUpload')
+			onDocumentDelete=(action 'onDocumentDelete')}}
+
 		{{document/document-view document=model pages=pages attachments=attachments folder=folder folders=folders
 			isEditor=isEditor
 			onAttachmentDeleted=(action 'onAttachmentDeleted')

app/app/pods/folders/folder/template.hbs

@@ -2,7 +2,11 @@
 
 	{{layout/zone-navigation}}
 
-	{{#layout/zone-header title=model.folder.name message="A space provides a place for related content"}}
+	{{#layout/zone-sidebar}}
+		{{folder/folders-list folders=model.folders folder=model.folder onFolderAdd=(action 'onFolderAdd')}}
+	{{/layout/zone-sidebar}}
+
+	{{#layout/zone-content}}
 		{{folder/folder-toolbar
 			folders=model.folders
 			folder=model.folder
@@ -11,13 +15,7 @@
 			onDeleteDocument=(action 'onDeleteDocument')
 			onMoveDocument=(action 'onMoveDocument')
 			showDocument=(action 'showDocument')}}
-	{{/layout/zone-header}}
 
-	{{#layout/zone-sidebar}}
-		{{folder/folders-list folders=model.folders onFolderAdd=(action 'onFolderAdd')}}
-	{{/layout/zone-sidebar}}
-
-	{{#layout/zone-content}}
 		{{folder/documents-list documents=model.documents folder=model.folder isFolderOwner=isFolderOwner onDocumentsChecked=(action 'onDocumentsChecked') }}
 	{{/layout/zone-content}}
 

app/app/pods/folders/settings/template.hbs

@@ -2,16 +2,14 @@
 
 	{{layout/zone-navigation}}
 
-	{{#layout/zone-header title=model.name message="Settings, sharing, permissions and deletion"}}
+	{{#layout/zone-sidebar}}
 		{{#link-to 'folders.folder' model.id model.slug}}
 			<div class="regular-button button-white">
 				<i class="material-icons">arrow_back</i>
 				<div class="name">space</div>
 			</div>
 		{{/link-to}}
-	{{/layout/zone-header}}
 
-	{{#layout/zone-sidebar}}
 		<div class="sidebar-menu">
 			<ul class="options">
 				<li class="option {{if tabGeneral "selected"}}" {{action 'selectTab' 'tabGeneral'}}>General</li>

app/app/routes/application.js

@@ -22,12 +22,12 @@ export default Ember.Route.extend(ApplicationRouteMixin, {
 	session: service(),
 
 	beforeModel(transition) {
+		// start TODO: ugly hack
 		let MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
-
 		let observer = new MutationObserver(function(/*mutations, observer*/) {
 		    // fired when a mutation occurs
 		    // console.log(mutations, observer);
-			$("#zone-sidebar").css('height', $(document).height() - $("#zone-navigation").height() - $("#zone-header").height() - 35);
+			$("#zone-sidebar").css('height', $(document).height() - $("#zone-navigation").height());
 		});
 
 		observer.observe(document, {
@@ -35,6 +35,7 @@ export default Ember.Route.extend(ApplicationRouteMixin, {
 			attributes: false,
 			childList: true
 		});
+		// end TODO: ugly hack
 
 		return this.get('appMeta').boot(transition.targetName).then(data => {
 			if (this.get('session.session.authenticator') !== "authenticator:documize" && data.allowAnonymousAccess) {
@@ -47,7 +48,10 @@ export default Ember.Route.extend(ApplicationRouteMixin, {
 
 	actions: {
 		willTransition: function ( /*transition*/ ) {
+			// start TODO: ugly hack
 			$("#zone-sidebar").css('height', 'auto');
+			// end TODO: ugly hack
+
 			Mousetrap.reset();
 		},
 

app/app/styles/app.scss

@@ -22,7 +22,6 @@
 @import "view/page-auth.scss";
 @import "view/page-onboard.scss";
 @import "view/page-exceptions.scss";
-@import "view/document/toolbar.scss";
 @import "view/document/sidebar.scss";
 @import "view/document/content.scss";
 @import "view/document/wysiwyg.scss";

app/app/styles/base.scss

@@ -17,6 +17,7 @@
 .text-left { text-align: left; }
 .text-right { text-align: right; }
 .text-center { text-align: center; }
+.center { margin: 0 auto; }
 .bold { font-weight: bold; }
 .italic { font-style: italic; }
 .text-uppercase { text-transform: uppercase; }

app/app/styles/view/document/sidebar.scss

@@ -1,9 +1,22 @@
 .document-sidebar {
 	@extend .no-select;
+	margin-top: 40px;
+	width: 100%;
+
+	.space-button {
+		width: 100%;
+	}
+
+	.space-name {
+		max-width: 90%;
+		text-overflow: ellipsis;
+		overflow: hidden;
+		white-space: nowrap;
+	}
 
 	> .summary-line {
 		color: $color-gray;
-		margin: 20px 0 30px 0;
+		margin: 30px 0;
 
 		>.items {
 			padding: 0;
@@ -43,6 +56,12 @@
 					}
 				}
 			}
+
+			> .active {
+				> .metric {
+					color: $color-link;
+				}
+			}
 		}
 	}
 

app/app/styles/view/document/toolbar.scss

@@ -1,8 +0,0 @@
-.document-toolbar {
-	.space-name {
-		max-width: 200px;
-		text-overflow: ellipsis;
-		overflow: hidden;
-		white-space: nowrap;
-	}
-}

app/app/styles/view/layout.scss

@@ -9,7 +9,8 @@
 	margin: 0;
 	width: 100%;
 	font-size: 1rem;
-	padding: 15px 40px 15px 40px;
+	padding: 10px 40px 10px 40px;
+
 	.content {
 		> .title {
 			padding-left: 15px;
@@ -49,6 +50,7 @@
 			}
 		}
 	}
+
 	.header-button {
 		display: inline-block;
 		position: relative;
@@ -63,14 +65,21 @@
 		vertical-align: middle;
 		background-color: $color-white;
 		text-align: center;
+
 		&:hover {
 			@extend .z-depth-1;
 		}
+
+		&:before {
+			border-radius: 0;
+		}
+
 		> .material-icons {
 			color: $color-primary;
 			text-align: center;
 			font-size: 1.4em;
 		}
+
 		> .initials {
 			color: $color-primary;
 			text-align: center;
@@ -79,37 +88,34 @@
 			line-height: 2.6rem;
 			font-family: open_sansregular;
 		}
-		&:before {
-			border-radius: 0;
-		}
 	}
 }
 
-.zone-header {
+// .zone-header {
-	background-color: $color-header;
+// 	background-color: $color-header;
-	padding: 0 40px 0 40px;
+// 	padding: 0 40px 0 40px;
-	> .info {
+// 	> .info {
-		padding: 20px 0 20px 0;
+// 		padding: 20px 0 20px 0;
-		> .title {
+// 		> .title {
-			color: $color-off-black;
+// 			color: $color-off-black;
-			font-size: 1.2rem;
+// 			font-size: 1.2rem;
-		}
+// 		}
-		> .message {
+// 		> .message {
-			color: $color-gray;
+// 			color: $color-gray;
-			font-size: 1rem;
+// 			font-size: 1rem;
-			margin: 10px 0 0 5px;
+// 			margin: 10px 0 0 5px;
-		}
+// 		}
-	}
+// 	}
-	> .actions {
+// 	> .actions {
-		padding: 20px 0 20px 0;
+// 		padding: 20px 0 20px 0;
-	}
+// 	}
-}
+// }
 
 .zone-sidebar {
+	background-color: $color-header;
 	height: 100%;
 	min-height: 100%;
 	padding: 0 40px 0 40px;
-	border-right: 1px solid $color-border;
 	float: left;
 }
 

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

@@ -1,12 +1,39 @@
-
 .folders-list {
-	> .add-space-action {
+	margin-top: 30px;
-		text-align: center;
+
-		margin-bottom: 30px;
+	.doc-tool {
+		position: absolute;
+		top: 150px;
+		right: -18px;
+		z-index: 999;
+	}
+
+	.scroll-space-tool {
+		position: absolute;
+		top: 150px;
+		right: -18px;
+		z-index: 888;
+		-webkit-animation: fadein 1s; /* Safari, Chrome and Opera > 12.1 */
+      	-moz-animation: fadein 1s; /* Firefox < 16 */
+       	-ms-animation: fadein 1s; /* Internet Explorer */
+        -o-animation: fadein 1s; /* Opera < 12.1 */
+        animation: fadein 1s;
+	}
+
+	.stuck-space-tool {
+		position: fixed !important;
+		top: 150px !important;
+		right: 0;
+		left: 0;
+		-webkit-animation: fadein 1s; /* Safari, Chrome and Opera > 12.1 */
+      	-moz-animation: fadein 1s; /* Firefox < 16 */
+       	-ms-animation: fadein 1s; /* Internet Explorer */
+        -o-animation: fadein 1s; /* Opera < 12.1 */
+        animation: fadein 1s;
 	}
 
 	> .section {
-		margin: 0 0 20px 0;
+		margin: 0 0 40px 0;
 
 		> .heading {
 			font-size: 0.9rem;

app/app/styles/widget/widget-button.scss

@@ -50,7 +50,7 @@
     transition: .3s;
     cursor: pointer;
     vertical-align: middle;
-    border: 1px solid $color-gray;
+    border: 1px solid $color-stroke;
     text-align: center;
 	@extend .no-select;
 	@include ease-in();
@@ -61,7 +61,7 @@
     }
 
     i {
-        color: $color-gray;
+        color: $color-stroke;
         text-align: center;
     }
 

app/app/templates/components/document/document-sidebar.hbs

@@ -1,22 +1,29 @@
 <div class="document-sidebar">
+	{{#link-to 'folders.folder' folder.id folder.slug}}
+		<div class="regular-button button-white space-button">
+			<i class="material-icons">arrow_back</i>
+			<div class="name space-name">{{folder.name}}</div>
+		</div>
+	{{/link-to}}
+
 	{{#if session.authenticated}}
 		<div class="summary-line hidden-xs hidden-sm">
 			<ul class="items">
-				<li class="item" {{action 'showToc'}}>
+				<li class="item {{if showToc "active"}}" {{action 'showToc'}}>
 					<div class="metric">
 						<div class="number">{{pages.length}}</div>
 			            <div class="label">sections</div>
 					</div>
 		        </li>
 				<li class="divider" />
-		        <li class="item" {{action 'showViews'}}>
+		        <li class="item {{if showViews "active"}}" {{action 'showViews'}}>
 					<div class="metric">
 						<div class="number">{{meta.viewers.length}}</div>
 			            <div class="label">views</div>
 					</div>
 		        </li>
 				<li class="divider" />
-		        <li class="item" {{action 'showContributions'}}>
+		        <li class="item {{if showContributions "active"}}" {{action 'showContributions'}}>
 					<div class="metric">
 						<div class="number">{{meta.editors.length}}</div>
 			            <div class="label">activity</div>

app/app/templates/components/document/document-toolbar.hbs

@@ -1,35 +1,28 @@
-<div>
+<div class="pull-right hidden-xs hidden-sm">
-	{{#link-to 'folders.folder' folder.id folder.slug}}
-		<div class="regular-button button-white">
-			<i class="material-icons">arrow_back</i>
-			<div class="name space-name">{{folder.name}}</div>
-		</div>
-	{{/link-to}}
-
     {{#if isEditor}}
 		<div class="button-gap"></div>
-		<div class="square-button-white" id="set-meta-button" data-tooltip="Set meta" data-tooltip-position="top center">
+		<div class="round-button-mono" id="set-meta-button" data-tooltip="Set meta" data-tooltip-position="top center">
-			<i class="material-icons">settings</i>
+			<i class="material-icons color-gray">settings</i>
 		</div>
 		<div class="button-gap"></div>
-		<div class="square-button-white" id="attachment-button" data-tooltip="Attach file" data-tooltip-position="top center">
+		<div class="round-button-mono" id="attachment-button" data-tooltip="Attach file" data-tooltip-position="top center">
-			<i class="material-icons">attach_file</i>
+			<i class="material-icons color-gray">attach_file</i>
 		</div>
 		<div class="button-gap"></div>
-		<div class="square-button-white" id="save-template-button" data-tooltip="Save as template" data-tooltip-position="top center">
+		<div class="round-button-mono" id="save-template-button" data-tooltip="Save as template" data-tooltip-position="top center">
-			<i class="material-icons">content_copy</i>
+			<i class="material-icons color-gray">content_copy</i>
 		</div>
 		<div class="button-gap"></div>
     {{/if}}
 
-	<div class="square-button-white" id="print-document-button" data-tooltip="Print me" data-tooltip-position="top center" {{action 'printDocument'}}>
+	<div class="round-button-mono" id="print-document-button" data-tooltip="Print me" data-tooltip-position="top center" {{action 'printDocument'}}>
-		<i class="material-icons">print</i>
+		<i class="material-icons color-gray">print</i>
 	</div>
 
 	{{#if isEditor}}
 		<div class="button-gap"></div>
-		<div class="square-button-white button-red-text" id="delete-document-button" data-tooltip="Delete content" data-tooltip-position="top center">
+		<div class="round-button-mono button-red-text" id="delete-document-button" data-tooltip="Delete content" data-tooltip-position="top center">
-			<i class="material-icons">delete</i>
+			<i class="material-icons color-gray">delete</i>
 		</div>
 	{{/if}}
 
@@ -78,3 +71,4 @@
 		{{/dropdown-dialog}}
 	{{/if}}
 </div>
+<div class="margin-bottom-20 clearfix" />

app/app/templates/components/document/document-view.hbs

@@ -1,4 +1,6 @@
 <div class="document-view">
+	<h1>{{document.name}}</h1>
+
 	{{#if document.template}}
 		<div class="is-template">TEMPLATE</div>
 	{{/if}}

app/app/templates/components/folder/folder-toolbar.hbs

@@ -1,10 +1,11 @@
-<div>
+{{#if showToolbar}}
+	<div class="pull-right hidden-xs hidden-sm">
 	    {{#if hasSelectedDocuments}}
-		<div class="square-button button-blue" id="move-documents-button" data-tooltip="Move documents" data-tooltip-position="top center">
+			<div class="round-button button-blue" id="move-documents-button" data-tooltip="Move documents" data-tooltip-position="top center">
 			    <i class="material-icons">folder</i>
 			</div>
 			<div class="button-gap"></div>
-		<div class="square-button button-red" id="delete-documents-button" data-tooltip="Delete documents" data-tooltip-position="top center">
+			<div class="round-button button-red" id="delete-documents-button" data-tooltip="Delete documents" data-tooltip-position="top center">
 			    <i class="material-icons">delete</i>
 			</div>
 			{{#dropdown-dialog target="delete-documents-button" position="bottom right" button="Delete" color="flat-red" onAction=(action 'deleteDocuments')}}
@@ -29,22 +30,25 @@
 		{{else}}
 	    	{{#if isFolderOwner}}
 				{{#link-to 'folders.settings' folder.id folder.slug (query-params tab="tabShare")}}
-				<div class="square-button-white" id="folder-share-button" data-tooltip="Share space" data-tooltip-position="top center">
+					<div class="round-button-mono" id="folder-share-button" data-tooltip="Share" data-tooltip-position="top center">
-					<i class="material-icons">share</i>
+						<i class="material-icons color-gray">share</i>
 					</div>
 				{{/link-to}}
 				<div class="button-gap"></div>
 				{{#link-to 'folders.settings' folder.id folder.slug}}
-				<div class="square-button-white" id="folder-settings-button" data-tooltip="Space settings" data-tooltip-position="top center">
+					<div class="round-button-mono" id="folder-settings-button" data-tooltip="Settings" data-tooltip-position="top center">
-				    <i class="material-icons">settings</i>
+					    <i class="material-icons color-gray">settings</i>
 					</div>
 				{{/link-to}}
 			{{/if}}
 			{{#if folderService.canEditCurrentFolder}}
 				<div class="button-gap"></div>
-			<div class="regular-button button-green" id="start-document-button" data-tooltip="Add new content" data-tooltip-position="top center">
+				<div class="round-button-mono" id="import-document-button" data-tooltip="Import Word / Markdown" data-tooltip-position="top center">
+					<i class="material-icons color-gray">file_upload</i>
+				</div>
+				<div class="button-gap"></div>
+				<div class="round-button button-green" id="start-document-button" data-tooltip="New..." data-tooltip-position="top center">
 				    <i class="material-icons">add</i>
-				<div class="name">Content</div>
 				</div>
 			{{/if}}
 			{{#if folderService.canEditCurrentFolder}}
@@ -58,3 +62,6 @@
 			{{/if}}
 	    {{/if}}
 	</div>
+{{/if}}
+
+<div class="margin-bottom-20 clearfix" />

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

@@ -1,13 +1,11 @@
 <div class="sidebar-menu">
-	<div class="folders-list">
 
 	{{#if session.isEditor}}
-			<div class="add-space-action hidden-xs hidden-sm">
+		<div id="add-space-button" class="regular-button button-white" data-tooltip="Share" data-tooltip-position="top center">
-					<div class="regular-button button-white" id="add-folder-button" data-tooltip="New space" data-tooltip-position="top center">
 			<i class="material-icons">add</i>
-						<div class="name">space</div>
+			<div class="name">Space</div>
 		</div>
-					{{#dropdown-dialog target="add-folder-button" position="bottom left" button="Add" color="flat-green" onAction=(action 'addFolder') focusOn="new-folder-name"}}
+		{{#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>
@@ -16,6 +14,16 @@
 				</div>
 			</div>
 		{{/dropdown-dialog}}
+	{{/if}}
+
+	<div class="folders-list">
+		<div id="new-document" class="round-button button-green doc-tool" data-tooltip="New space" data-tooltip-position="top center">
+			<i class="material-icons">add</i>
+		</div>
+
+		{{#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}}