WIP document view

gui/app/components/document/document-heading.js

@@ -10,14 +10,11 @@
 // https://documize.com
 
 import { empty } from '@ember/object/computed';
-
 import { schedule } from '@ember/runloop';
 import { inject as service } from '@ember/service';
 import Component from '@ember/component';
-import NotifierMixin from '../../mixins/notifier';
-import TooltipMixin from '../../mixins/tooltip';
 
-export default Component.extend(NotifierMixin, TooltipMixin, {
+export default Component.extend({
 	documentService: service('document'),
 	editMode: false,
 	docName: '',
@@ -49,14 +46,9 @@ export default Component.extend(NotifierMixin, TooltipMixin, {
 
 			this.set('document.name', this.get('docName'));
 			this.set('document.excerpt', this.get('docExcerpt'));
-
-			this.showNotification('Saved');
-			this.get('browser').setTitle(this.get('document.name'));
-			this.get('browser').setMetaDescription(this.get('document.excerpt'));
-			
-			this.get('documentService').save(this.get('document'));
-
 			this.set('editMode', false);
+
+			this.attrs.onSaveDocument(this.get('document'));
 		},
 
 		onCancel() {

gui/app/components/document/space-category.js

@@ -13,6 +13,7 @@ import { computed } from '@ember/object';
 
 import { inject as service } from '@ember/service';
 import Component from '@ember/component';
+import { A } from "@ember/array"
 import TooltipMixin from '../../mixins/tooltip';
 import NotifierMixin from '../../mixins/notifier';
 
@@ -21,7 +22,7 @@ export default Component.extend(TooltipMixin, NotifierMixin, {
 	categoryService: service('category'),
 	sessionService: service('session'),
 	newCategory: '',
-	categories: [],
+	categories: A([]),
 	hasCategories: computed('categories', function() {
 		return this.get('categories').length > 0;
 	}),
@@ -32,10 +33,6 @@ export default Component.extend(TooltipMixin, NotifierMixin, {
 		return this.get('permissions.spaceOwner') || this.get('permissions.spaceManage');
 	}),
 
-	init() {
-		this._super(...arguments);
-	},
-
 	didReceiveAttrs() {
 		this._super(...arguments);
 		this.load();
@@ -43,12 +40,12 @@ export default Component.extend(TooltipMixin, NotifierMixin, {
 
 	load() {
 		this.get('categoryService').getUserVisible(this.get('folder.id')).then((categories) => {
-			this.set('categories', categories);
+			let cats = A(categories);
+			this.set('categories', cats);
 			this.get('categoryService').getDocumentCategories(this.get('document.id')).then((selected) => {
 				this.set('selectedCategories', selected);
 				selected.forEach((s) => {
-					let cats = this.set('categories', categories);
+					let cat = cats.findBy('id', s.id);
-					let cat = categories.findBy('id', s.id);
 					if (is.not.undefined(cat)) {
 						cat.set('selected', true);
 						this.set('categories', cats);

gui/app/components/folder/space-heading.js

@@ -10,14 +10,11 @@
 // https://documize.com
 
 import { empty } from '@ember/object/computed';
-
 import { schedule } from '@ember/runloop';
 import { inject as service } from '@ember/service';
 import Component from '@ember/component';
-import NotifierMixin from '../../mixins/notifier';
-import TooltipMixin from '../../mixins/tooltip';
 
-export default Component.extend(NotifierMixin, TooltipMixin, {
+export default Component.extend({
 	folderService: service('folder'),
 	spaceName: '',
 	hasNameError: empty('spaceName'),

gui/app/pods/document/index/controller.js

@@ -31,7 +31,9 @@ export default Controller.extend(NotifierMixin, TooltipMixin, {
 	actions: {
 		onSaveDocument(doc) {
 			this.get('documentService').save(doc);
-			this.showNotification('Saved');
+
+			this.get('browser').setTitle(doc.get('name'));
+			this.get('browser').setMetaDescription(doc.get('excerpt'));
 		},
 
 		onCopyPage(pageId, targetDocumentId) {

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

@@ -1,13 +1,14 @@
-{{#layout/zone-container}}
+{{layout/nav-bar}}
 
-	{{#layout/zone-sidebar}}
+<div class="container">
-		{{document/document-sidebar tab=tab
+	{{#toolbar/t-toolbar}}
-			document=model.document folder=model.folder pages=model.pages page=model.page permissions=model.permissions
+		{{#toolbar/t-links}}
-			onPageSequenceChange=(action 'onPageSequenceChange') onPageLevelChange=(action 'onPageLevelChange')
+			{{#link-to "folders" class="link" tagName="li"}}Spaces{{/link-to}}
-			onGotoPage=(action 'onGotoPage')}}
+			{{#link-to "folder" model.folder.id model.folder.slug class="link" tagName="li"}}{{model.folder.name}}{{/link-to}}
-	{{/layout/zone-sidebar}}
+		{{/toolbar/t-links}}
+	{{/toolbar/t-toolbar}}
 
-	{{#layout/zone-content}}
+	{{document/document-heading document=model.document permissions=model.permissions onSaveDocument=(action 'onSaveDocument')}}
 
 	<div id="zone-document-content" class="zone-document-content">
 		<div class="document-header-zone">
@@ -27,7 +28,12 @@
 			{{document/tag-editor documentTags=model.document.tags permissions=model.permissions onChange=(action 'onTagChange')}}
 		</div>
 
-			{{document/document-heading document=model.document permissions=model.permissions onSaveDocument=(action 'onSaveDocument')}}
+
+	{{document/document-sidebar tab=tab
+		document=model.document folder=model.folder pages=model.pages page=model.page permissions=model.permissions
+		onPageSequenceChange=(action 'onPageSequenceChange') onPageLevelChange=(action 'onPageLevelChange')
+		onGotoPage=(action 'onGotoPage')}}
+
 
 		{{#if model.document.template}}
 			<div class="document-template-header">Template</div>
@@ -40,7 +46,4 @@
 			onSavePageAsBlock=(action 'onSavePageAsBlock') onDeleteBlock=(action 'onDeleteBlock') onGotoPage=(action 'onGotoPage')
 			onCopyPage=(action 'onCopyPage') onMovePage=(action 'onMovePage') onDeletePage=(action 'onPageDeleted')}}
 	</div>
-
+</div>
-	{{/layout/zone-content}}
-
-{{/layout/zone-container}}

gui/app/styles/view/document/all.scss

@@ -7,4 +7,3 @@
 @import "toc.scss";
 @import "view.scss";
 @import "wysiwyg.scss";
-@import "space-category-tag.scss";

gui/app/styles/view/document/doc-meta.scss

@@ -1,12 +1,41 @@
-.document-space {
+.view-document {
-	display: inline-block;
+	> .document-heading {
+		margin-top: 3rem;
 
-	> .caption {
+		.doc-title {
-		text-transform: uppercase;
+			font-size: 2rem;
+			margin: 50px 0 10px;
+			font-weight: normal;
+		}
+
+		.doc-excerpt {
+			font-size: 1.2rem;
 			color: $color-gray;
+			margin: 0 0 45px;
+		}
+	}
+
+	> .document-heading-edit {
+		margin-top: 5.5rem;
+		margin-bottom: 3rem;
+	}
+
+	> .document-customfields {
+		margin-bottom: 4rem;
+
+		.heading {
+			font-size: 1.1rem;
 			font-weight: bold;
-		font-size: 1.0rem;
+			color: $color-gray;
-		margin: 0 0 10px 0;
+			text-align: left;
+		}
+
+		.value {
+			font-size: 1.1rem;
+			font-weight: normal;
+			color: $color-black;
+			text-align: left;
+		}
 	}
 }
 
@@ -32,15 +61,6 @@
 	overflow-y: auto;
 	margin: 0;
 	padding: 0;
-
-	// // Medium devices (tablets, 768px and up)
-	// @media (min-width: 768px) { height: 300px; }
-
-	// // Large devices (desktops, 992px and up)
-	// @media (min-width: 992px) { height: 400px; }
-
-	// // Extra large devices (large desktops, 1200px and up)
-	// @media (min-width: 1200px) { height: 500px; }
 }
 
 .document-tags {

gui/app/styles/view/document/document.scss

@@ -0,0 +1 @@
+@import "doc-meta.scss";

gui/app/styles/view/views.scss

@@ -6,3 +6,4 @@
 @import "customize.scss";
 @import "search.scss";
 @import "auth.scss";
+@import "document/document.scss"

gui/app/templates/components/document/document-heading.hbs

@@ -1,25 +1,21 @@
 {{#unless editMode}}
+	<div class="view-document">
 		<div class="document-heading {{if permissions.documentEdit 'cursor-pointer'}}" onclick={{if permissions.documentEdit (action 'toggleEdit')}}>
 			<h1 class="doc-title">{{document.name}}</h1>
 			<div class="doc-excerpt">{{document.excerpt}}</div>
 		</div>
+	</div>
 {{else}}
-	<form {{action "onSave" on="submit"}}>
+	<form class="view-document" {{action "onSave" on="submit"}}>
-		<div class="edit-document-heading">
+		<div class="document-heading-edit">
-			<div class="input-inline input-transparent edit-doc-title">
+			<div class="form-group">
-				{{focus-input id="document-name" type="text" value=docName class=(if hasNameError 'error-inline') placeholder="Name" autocomplete="off"}}
+				{{focus-input id="document-name" type="text" value=docName class=(if hasNameError 'form-control mousetrap is-invalid' 'form-control mousetrap') placeholder="Title" autocomplete="off"}}
-			</div>
-			<div class="input-inline input-transparent edit-doc-excerpt">
-				{{input id="document-excerpt" type="text" value=docExcerpt class=(if hasExcerptError 'error-inline') placeholder="Excerpt" autocomplete="off"}}
-			</div>
-			<div>
-				<button type="submit" class="round-button-mono" {{action 'onSave'}}>
-					<i class="material-icons color-green">check</i>
-				</button>
-				<div class="round-button-mono" {{action 'onCancel'}}>
-					<i class="material-icons color-gray">close</i>
 			</div>
+			<div class="form-group">
+				{{input id="document-excerpt" type="text" value=docExcerpt class=(if hasExcerptError 'form-control mousetrap is-invalid' 'form-control mousetrap') placeholder="Excerpt" autocomplete="off"}}
 			</div>
+			<button type="submit" class="btn btn-outline-secondary" {{action "onCancel"}}>Cancel</button>
+			<button type="submit" class="btn btn-success" {{action "onSave"}}>Save</button>
 		</div>
 	</form>
 {{/unless}}

gui/app/templates/components/document/space-category.hbs

@@ -1,27 +1,25 @@
-<div class="back-to-space document-space">
+<div class="view-document">
-	<div class="caption">Space</div>
+	<div class="document-customfields">
-	{{#link-to 'folder' folder.id folder.slug}}
+		<div class="row">
-		<div class="regular-button button-nav">
+			<div class="col-2 heading">
-			<i class="material-icons">arrow_back</i>
+				Categories
-			<div class="name">{{folder.name}}</div>
 			</div>
-	{{/link-to}}
+			<div class="col-10 value">
-</div>
-
-<div class="document-category">
-	<div class="caption">Category</div>
-
 				{{#each selectedCategories as |cat|}}
-		<div class="regular-button button-blue">{{cat.category}}</div>
+					{{cat.category}}{{#unless cat.lastObject}}, {{/unless}}
-	{{else}}
+				{{/each}}
+			</div>
+		</div>
+	</div>
+</div>
+
 {{#if canAddCategory}}
 	{{#unless canSelectCategory}}
-				{{#link-to 'folder.settings.category' folder.id folder.slug class='non-printable'}}Manage{{/link-to}}
+		{{#link-to 'folder.category' folder.id folder.slug class='non-printable'}}Manage{{/link-to}}
 	{{/unless}}
 {{else}}
 	<p>&nbsp;</p>
 {{/if}}
-	{{/each}}
 
 {{#if canSelectCategory}}
 	<div class="regular-button button-white" id="document-category-button">
@@ -32,9 +30,8 @@
 		<div class="document-category-dialog">
 			{{ui/ui-list-picker items=categories nameField='category'}}
 			{{#if canAddCategory}}
-					{{#link-to 'folder.settings.category' folder.id folder.slug}}Manage{{/link-to}}
+				{{#link-to 'folder.category' folder.id folder.slug}}Manage{{/link-to}}
 			{{/if}}
 		</div>
 	{{/dropdown-dialog}}
 {{/if}}
-</div>