Revamp document view using new layout

New master page system and UI framework implemented on document view.

Sidebar contains ToC and Attachments.

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

@@ -18,6 +18,7 @@ import Component from '@ember/component';
 
 export default Component.extend(Modals, Notifier, {
 	documentService: service('document'),
+	browserSvc: service('browser'),
 	appMeta: service(),
 	hasAttachments: notEmpty('files'),
 	canEdit: computed('permissions.documentEdit', 'document.protection', function() {
@@ -114,6 +115,15 @@ export default Component.extend(Modals, Notifier, {
 			});
 
 			return true;
+		},
+
+		onExport() {
+			this.get('documentSvc').export({}).then((htmlExport) => {
+				this.get('browserSvc').downloadFile(htmlExport, this.get('space.slug') + '.html');
+				this.notifySuccess('Exported');
+			});
+
+			this.modalClose("#space-export-modal");
 		}
 	}
 });

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

@@ -16,6 +16,7 @@ import tocUtil from '../../utils/toc';
 import Component from '@ember/component';
 
 export default Component.extend({
+	classNames: ["section"],
 	documentService: service('document'),
 	emptyState: computed('pages', function () {
 		return this.get('pages.length') === 0;

gui/app/components/folder/settings-general.js

@@ -11,7 +11,6 @@
 
 import { A } from '@ember/array';
 import { inject as service } from '@ember/service';
-import { schedule } from '@ember/runloop';
 import { computed } from '@ember/object';
 import { empty } from '@ember/object/computed';
 import AuthMixin from '../../mixins/auth';

gui/app/components/ui/ui-button-gap.js

@@ -16,7 +16,6 @@ export default Component.extend({
 	tagName: 'div',
 	classNames: [],
 	classNameBindings: ['calcClass'],
-
 	where: 'right',
 	calcClass: computed(function() {
 		return `dmz-button-gap-${this.where}`;

gui/app/components/ui/ui-button.js

@@ -62,8 +62,8 @@ export default Component.extend({
 	}),
 
 	click(e) {
-		e.preventDefault();
 		if (is.not.undefined(this.onClick)) {
+			e.preventDefault();
 			this.onClick(e);
 		}
 	}

gui/app/components/ui/ui-toolbar-icon.js

@@ -18,17 +18,19 @@ export default Component.extend({
 	tagName: 'i',
 	classNames: ['dicon'],
 	classNameBindings: ['calcClass'],
-
 	color: '',
 	icon: '',
 	tooltip: '',
+	selected: false,
 
-	calcClass: computed(function() {
+	calcClass: computed('selected', function() {
 		let c = '';
 		let icon = this.icon;
 
 		if (this.color !== '') c += this.color + ' ';
 
+		if (this.selected === true) c += 'icon-selected' + ' ';
+
 		if (icon !== '') c += icon + ' ';
 
 		return c.trim();

gui/app/components/ui/ui-toolbar-label.js

@@ -18,7 +18,6 @@ export default Component.extend({
 	tagName: 'div',
 	classNames: ['label'],
 	classNameBindings: ['calcClass'],
-
 	color: '',
 	label: '',
 	tooltip: '',