Per space label, icon, description

Labels introduce visual grouping and filtering of spaces.

gui/app/components/customize/space-labels.js

@@ -0,0 +1,94 @@
+// Copyright 2016 Documize Inc. <legal@documize.com>. All rights reserved.
+//
+// This software (Documize Community Edition) is licensed under
+// GNU AGPL v3 http://www.gnu.org/licenses/agpl-3.0.en.html
+//
+// You can operate outside the AGPL restrictions by purchasing
+// Documize Enterprise Edition and obtaining a commercial license
+// by contacting <sales@documize.com>.
+//
+// https://documize.com
+
+import $ from 'jquery';
+import Modals from '../../mixins/modal';
+import Component from '@ember/component';
+
+export default Component.extend(Modals, {
+	labelName: '',
+	labelColor: '',
+	editLabel: null,
+	deleetLabel: null,
+	showDeleteDialog: false,
+
+	actions: {
+		onShowAddModal() {
+			this.set('labelName', '');
+			this.set('labelColor', '');
+			this.modalOpen("#add-label-modal", {"show": true}, '#add-label-name');
+		},
+
+		onShowDeleteModal(label) {
+			this.set('deleteLabel', label);
+			this.set('showDeleteDialog', !this.get('showDeleteDialog'));
+		},
+
+		onShowUpdateModal(label) {
+			this.set('editLabel', label);
+			this.set('labelName', label.get('name'));
+			this.set('labelColor', label.get('color'));
+			this.modalOpen("#edit-label-modal", {"show": true}, '#edit-label-name');
+		},
+
+		onSetColor(color) {
+			this.set('labelColor', color);
+		},
+
+		onAdd() {
+			let label = {
+				name: this.get('labelName').trim(),
+				color: this.get('labelColor').trim(),
+			}
+
+			if (is.empty(label.name)) {
+				$('#add-label-name').addClass('is-invalid').focus();
+				return;
+			}
+
+			$('#add-label-name').removeClass('is-invalid');
+			this.modalClose('#add-label-modal');
+
+			this.get('onAdd')(label);
+		},
+
+		onUpdate() {
+			let name = this.get('labelName').trim();
+			let color = this.get('labelColor').trim();
+			let label = this.get('editLabel');
+
+			if (is.empty(name)) {
+				$('#edit-label-name').addClass('is-invalid').focus();
+				return;
+			}
+
+			$('#edit-label-name').removeClass('is-invalid');
+			this.modalClose('#edit-label-modal');
+
+			label.set('name', name);
+			label.set('color', color);
+
+			this.get('onUpdate')(label);
+
+			this.set('editLabel', null);
+		},
+
+		onDelete() {
+			let label = this.get('deleteLabel');
+
+			this.set('showDeleteDialog', false);
+			this.get('onDelete')(label.get('id'));
+			this.set('deleteLabel', null);
+
+			return true;
+		}
+	}
+});

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

@@ -71,11 +71,6 @@ export default Component.extend(ModalMixin, AuthMixin, Notifier, {
 		this.set('saveTemplate.description', this.get('document.excerpt'));
 	},
 
-	didInsertElement() {
-		this._super(...arguments);
-		this.modalInputFocus('#document-template-modal', '#new-template-name');
-	},
-
 	willDestroyElement() {
 		this._super(...arguments);
 	},

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

@@ -17,6 +17,7 @@ import Notifier from '../../mixins/notifier';
 import Component from '@ember/component';
 
 export default Component.extend(Modals, Notifier, {
+	classNames: ["section"],
 	documentService: service('document'),
 	browserSvc: service('browser'),
 	appMeta: service(),
@@ -50,7 +51,7 @@ export default Component.extend(Modals, Notifier, {
 		let url = this.get('appMeta.endpoint');
 		let uploadUrl = `${url}/documents/${documentId}/attachments`;
 
-		let dzone = new Dropzone("#upload-document-files", {
+		let dzone = new Dropzone("#upload-document-files > div", {
 			headers: {
 				'Authorization': 'Bearer ' + self.get('session.authToken')
 			},

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

@@ -9,7 +9,6 @@
 //
 // https://documize.com
 
-import { A } from '@ember/array';
 import { computed } from '@ember/object';
 import { notEmpty } from '@ember/object/computed';
 import { inject as service } from '@ember/service';

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

@@ -21,17 +21,27 @@ export default Component.extend(AuthMixin, Notifier, {
 	router: service(),
 	spaceSvc: service('folder'),
 	localStorage: service('localStorage'),
-
 	isSpaceAdmin: computed('permissions', function() {
 		return this.get('permissions.spaceOwner') || this.get('permissions.spaceManage');
 	}),
-
 	spaceName: '',
 	hasNameError: empty('spaceName'),
 	spaceTypeOptions: A([]),
 	spaceType: 0,
 	likes: '',
 	allowLikes: false,
+	spaceLifecycleOptions: A([]),
+	spaceLifecycle: null,
+	iconList: A([]),
+	spaceIcon: '',
+	spaceDesc: '',
+	spaceLabel: '',
+
+	init() {
+		this._super(...arguments);
+
+		this.populateIconList();
+	},
 
 	didReceiveAttrs() {
 		this._super(...arguments);
@@ -55,6 +65,71 @@ export default Component.extend(AuthMixin, Notifier, {
 		}
 
 		this.set('spaceName', this.get('space.name'));
+		this.set('spaceDesc', this.get('space.desc'));
+		this.set('spaceLabel', this.get('space.labelId'));
+
+		let icon = this.get('space.icon');
+		if (is.empty(icon)) {
+			icon = constants.IconMeta.Apps;
+		}
+
+		this.set('spaceIcon', icon);
+	},
+
+	populateIconList() {
+		let list = this.get('iconList');
+		let constants = this.get('constants');
+
+		list = A([]);
+
+		list.pushObject(constants.IconMeta.Star);
+		list.pushObject(constants.IconMeta.Support);
+		list.pushObject(constants.IconMeta.Message);
+		list.pushObject(constants.IconMeta.Apps);
+		list.pushObject(constants.IconMeta.Box);
+		list.pushObject(constants.IconMeta.Gift);
+		list.pushObject(constants.IconMeta.Design);
+		list.pushObject(constants.IconMeta.Bulb);
+		list.pushObject(constants.IconMeta.Metrics);
+		list.pushObject(constants.IconMeta.PieChart);
+		list.pushObject(constants.IconMeta.BarChart);
+		list.pushObject(constants.IconMeta.Finance);
+		list.pushObject(constants.IconMeta.Lab);
+		list.pushObject(constants.IconMeta.Code);
+		list.pushObject(constants.IconMeta.Help);
+		list.pushObject(constants.IconMeta.Manuals);
+		list.pushObject(constants.IconMeta.Flow);
+		list.pushObject(constants.IconMeta.Out);
+		list.pushObject(constants.IconMeta.In);
+		list.pushObject(constants.IconMeta.Partner);
+		list.pushObject(constants.IconMeta.Org);
+		list.pushObject(constants.IconMeta.Home);
+		list.pushObject(constants.IconMeta.Infinite);
+		list.pushObject(constants.IconMeta.Todo);
+		list.pushObject(constants.IconMeta.Procedure);
+		list.pushObject(constants.IconMeta.Outgoing);
+		list.pushObject(constants.IconMeta.Incoming);
+		list.pushObject(constants.IconMeta.Travel);
+		list.pushObject(constants.IconMeta.Winner);
+		list.pushObject(constants.IconMeta.Roadmap);
+		list.pushObject(constants.IconMeta.Money);
+		list.pushObject(constants.IconMeta.Security);
+		list.pushObject(constants.IconMeta.Tune);
+		list.pushObject(constants.IconMeta.Guide);
+		list.pushObject(constants.IconMeta.Smile);
+		list.pushObject(constants.IconMeta.Rocket);
+		list.pushObject(constants.IconMeta.Time);
+		list.pushObject(constants.IconMeta.Cup);
+		list.pushObject(constants.IconMeta.Marketing);
+		list.pushObject(constants.IconMeta.Announce);
+		list.pushObject(constants.IconMeta.Devops);
+		list.pushObject(constants.IconMeta.World);
+		list.pushObject(constants.IconMeta.Plan);
+		list.pushObject(constants.IconMeta.Components);
+		list.pushObject(constants.IconMeta.People);
+		list.pushObject(constants.IconMeta.Checklist);
+
+		this.set('iconList', list);
 	},
 
 	actions: {
@@ -62,6 +137,18 @@ export default Component.extend(AuthMixin, Notifier, {
 			this.set('spaceType', t);
 		},
 
+		onSetSpaceLifecycle(l) {
+			this.set('spaceLifecycle', l);
+		},
+
+		onSetIcon(icon) {
+			this.set('spaceIcon', icon);
+		},
+
+		onSetLabel(id) {
+			this.set('spaceLabel', id);
+		},
+
 		onSave() {
 			if (!this.get('isSpaceAdmin')) return;
 
@@ -75,6 +162,10 @@ export default Component.extend(AuthMixin, Notifier, {
 			if (spaceName.length === 0) return;
 			space.set('name', spaceName);
 
+			space.set('icon', this.get('spaceIcon'));
+			space.set('desc', this.get('spaceDesc'));
+			space.set('labelId', this.get('spaceLabel'));
+
 			this.get('spaceSvc').save(space).then(() => {
 				this.notifySuccess('Saved');
 			});

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

@@ -28,6 +28,7 @@ export default Component.extend(AuthMixin, {
 		return this.get('permissions.spaceOwner') || this.get('permissions.spaceManage');
 	}),
 	selectedFilter: '',
+	spaceLabel: null,
 
 	init() {
 		this._super(...arguments);
@@ -55,6 +56,7 @@ export default Component.extend(AuthMixin, {
 
 		this.set('categories', categories);
 		this.set('categoryLinkName', categories.length > 0 ? 'Manage' : 'Add');
+		this.set('spaceLabel', _.findWhere(this.get('labels'), {id: this.get('space.labelId')}));
 
 		schedule('afterRender', () => {
 			if (this.get('categoryFilter') !== '') {

gui/app/components/layout/logo-heading.js

@@ -12,4 +12,6 @@
 import Component from '@ember/component';
 
 export default Component.extend({
+	icon: null,
+	meta: null
 });

gui/app/components/layout/master-sidebar.js

@@ -30,6 +30,7 @@ export default Component.extend(Modals, {
 	hasDocumentPins: notEmpty('documentPins'),
 	hasWhatsNew: false,
 	newsContent: '',
+	hideNavigation: false,
 
 	init() {
 		this._super(...arguments);

gui/app/components/spaces/space-label.js

@@ -0,0 +1,29 @@
+// Copyright 2016 Documize Inc. <legal@documize.com>. All rights reserved.
+//
+// This software (Documize Community Edition) is licensed under
+// GNU AGPL v3 http://www.gnu.org/licenses/agpl-3.0.en.html
+//
+// You can operate outside the AGPL restrictions by purchasing
+// Documize Enterprise Edition and obtaining a commercial license
+// by contacting <sales@documize.com>.
+//
+// https://documize.com
+
+import { computed } from '@ember/object';
+import Component from '@ember/component';
+
+export default Component.extend({
+	tagName: 'div',
+	classNames: ['space-label'],
+	attributeBindings: ['customStyle:style'],
+	customStyle: computed('label', function() {
+		return this.get('label.bgColor');
+	}),
+	label: null,
+
+	didReceiveAttrs() {
+		this._super(...arguments);
+
+		this.set('label', _.findWhere(this.get('labels'), {id: this.get('labelId')}));
+	}
+});

gui/app/components/ui/label-color-picker.js

@@ -0,0 +1,85 @@
+// Copyright 2016 Documize Inc. <legal@documize.com>. All rights reserved.
+//
+// This software (Documize Community Edition) is licensed under
+// GNU AGPL v3 http://www.gnu.org/licenses/agpl-3.0.en.html
+//
+// You can operate outside the AGPL restrictions by purchasing
+// Documize Enterprise Edition and obtaining a commercial license
+// by contacting <sales@documize.com>.
+//
+// https://documize.com
+
+import { A } from '@ember/array';
+import { inject as service } from '@ember/service';
+import { set } from '@ember/object';
+import Component from '@ember/component';
+
+export default Component.extend({
+	appMeta: service(),
+	onChange: null,
+	colors: null,
+
+	didReceiveAttrs() {
+		this._super(...arguments);
+
+		let colors = A([]);
+		colors.pushObject({selected: false, code: '#263238'});
+		colors.pushObject({selected: false, code: '#37474f'});
+		colors.pushObject({selected: false, code: '#455a64'});
+		colors.pushObject({selected: false, code: '#546e7a'});
+		colors.pushObject({selected: false, code: '#4c4c4c'});
+		colors.pushObject({selected: false, code: '#757575'});
+		colors.pushObject({selected: false, code: '#616161'});
+		colors.pushObject({selected: false, code: '#d50000'});
+		colors.pushObject({selected: false, code: '#b71c1c'});
+		colors.pushObject({selected: false, code: '#880e4f'});
+		colors.pushObject({selected: false, code: '#c2185b'});
+		colors.pushObject({selected: false, code: '#4a148c'});
+		colors.pushObject({selected: false, code: '#6a1b9a'});
+		colors.pushObject({selected: false, code: '#7b1fa2'});
+		colors.pushObject({selected: false, code: '#311b92'});
+		colors.pushObject({selected: false, code: '#0d47a1'});
+		colors.pushObject({selected: false, code: '#1565c0'});
+		colors.pushObject({selected: false, code: '#2962ff'});
+		colors.pushObject({selected: false, code: '#039be5'});
+		colors.pushObject({selected: false, code: '#00838f'});
+		colors.pushObject({selected: false, code: '#006064'});
+		colors.pushObject({selected: false, code: '#00897b'});
+		colors.pushObject({selected: false, code: '#2e7d32'});
+		colors.pushObject({selected: false, code: '#388e3c'});
+		colors.pushObject({selected: false, code: '#4caf50'});
+		colors.pushObject({selected: false, code: '#33691e'});
+		colors.pushObject({selected: false, code: '#827717'});
+		colors.pushObject({selected: false, code: '#f9a825'});
+		colors.pushObject({selected: false, code: '#ffca28'});
+		colors.pushObject({selected: false, code: '#ef6c00'});
+		colors.pushObject({selected: false, code: '#bf360c'});
+		colors.pushObject({selected: false, code: '#ff3d00'});
+		colors.pushObject({selected: false, code: '#4e342e'});
+		colors.pushObject({selected: false, code: '#6d4c41'});
+		colors.pushObject({selected: false, code: '#8d6e63'});
+
+		this.set('colors', colors);
+
+		// Send back default color code in case user does not select
+		// their own preference.
+		this.setColor(colors[0].code);
+	},
+
+	setColor(colorCode) {
+		let colors = this.get('colors');
+		_.each(colors, (color) => {
+			set(color, 'selected', color.code === colorCode ? true: false);
+		});
+
+		if (this.get('onChange') !== null) {
+			this.get('onChange')(colorCode);
+		}
+	},
+
+	actions: {
+		onSelect(colorCode) {
+			this.setColor(colorCode);
+		}
+	}
+});

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

@@ -0,0 +1,35 @@
+// Copyright 2016 Documize Inc. <legal@documize.com>. All rights reserved.
+//
+// This software (Documize Community Edition) is licensed under
+// GNU AGPL v3 http://www.gnu.org/licenses/agpl-3.0.en.html
+//
+// You can operate outside the AGPL restrictions by purchasing
+// Documize Enterprise Edition and obtaining a commercial license
+// by contacting <sales@documize.com>.
+//
+// https://documize.com
+
+import { computed } from '@ember/object';
+import Component from '@ember/component';
+
+export default Component.extend({
+	tagName: 'i',
+	classNames: [''],
+	classNameBindings: ['calcClass'],
+	icon: null,
+
+	calcClass: computed(function() {
+		let icon = this.icon;
+		let constants = this.get('constants');
+
+		if (is.null(icon)) {
+			return '';
+		}
+
+		if (is.empty(icon)) {
+			icon = constants.IconMeta.Apps;
+		}
+
+		return 'dmeta ' + icon;
+	})
+});

gui/app/constants/constants.js

@@ -210,12 +210,12 @@ let constants = EmberObject.extend({
 		Attachment: 'dicon-attachment',
 		BarChart: 'dicon-chart-bar-33',
 		Blocks: 'dicon-menu-6',
-		Bookmark: 'dicon-bookmark',
 		BookmarkSolid: 'dicon-bookmark-2',
 		BookmarkAdd: 'dicon-bookmark-add',
 		BookmarkDelete: 'dicon-bookmark-delete',
 		ButtonAction: 'dicon-button-2',
 		Category: 'dicon-flag',
+		Chat: 'dicon-b-chat',
 		Checkbox: 'dicon-shape-rectangle',
 		CheckboxChecked: 'dicon-i-check',
 		Copy: 'dicon-copy',
@@ -228,28 +228,29 @@ let constants = EmberObject.extend({
 		Export: 'dicon-data-upload',
 		Export2: 'dicon-upload',
 		Filter: 'dicon-sort-tool',
-		Grid1: 'dicon-grid-interface',
+		Grid: 'dicon-grid-interface',
 		Handshake: 'dicon-handshake',
-		Index: 'dicon-align-justify',
+		Index: 'dicon-menu-8',
 		Integrations: 'dicon-geometry',
 		Link: 'dicon-link',
 		ListBullet: 'dicon-list-bullet-2',
 		Locked: 'dicon-lock',
 		NotAllowed: 'dicon-ban',
+		PDF: 'dicon-pdf',
 		Print: 'dicon-print',
 		Pulse: 'dicon-pulse',
 		Plus: 'dicon-e-add',
 		Person: 'dicon-single-01',
 		People: 'dicon-multiple-19',
 		Preview: 'dicon-preview',
-		Remove: 'dicon-i-remove',
+		Read: 'dicon-menu-7',
 		RemoveUser: 'dicon-delete-28',
 		Search: 'dicon-magnifier',
 		Send: 'dicon-send',
 		Settings: 'dicon-settings-gear',
+		Share: 'dicon-network-connection',
 		Split: 'dicon-split-37',
 		Tag: 'dicon-delete-key',
-		TickSmall: 'dicon-d-check',
 		Tick: 'dicon-check',
 		TickSingle: 'dicon-check-single',
 		TickDouble: 'dicon-check-double',
@@ -260,9 +261,59 @@ let constants = EmberObject.extend({
 		TriangleSmallRight: 'dicon-small-triangle-right',
 		Unarchive: 'dicon-download',
 		Unlocked: 'dicon-unlocked',
+		UserAssign: 'dicon-b-check',
 		World: 'dicon-globe',
 	},
 
+	IconMeta: { // eslint-disable-line ember/avoid-leaking-state-in-ember-objects
+		Star: 'dmeta-meta-star',
+		Support: 'dmeta-meta-support',
+		Message: 'dmeta-meta-message',
+		Apps: 'dmeta-meta-apps',
+		Box: 'dmeta-meta-box',
+		Gift: 'dmeta-meta-gift',
+		Design: 'dmeta-meta-design',
+		Bulb: 'dmeta-meta-bulb',
+		Metrics: 'dmeta-meta-metrics',
+		PieChart: 'dmeta-meta-piechart',
+		BarChart: 'dmeta-meta-barchart',
+		Finance: 'dmeta-meta-finance',
+		Lab: 'dmeta-meta-lab',
+		Code: 'dmeta-meta-code',
+		Help: 'dmeta-meta-help',
+		Manuals: 'dmeta-meta-manuals',
+		Flow: 'dmeta-meta-flow',
+		Out: 'dmeta-meta-out',
+		In: 'dmeta-meta-in',
+		Partner: 'dmeta-meta-partner',
+		Org: 'dmeta-meta-org',
+		Home: 'dmeta-meta-home',
+		Infinite: 'dmeta-meta-infinite',
+		Todo: 'dmeta-meta-todo',
+		Procedure: 'dmeta-meta-procedure',
+		Outgoing: 'dmeta-meta-outgoing',
+		Incoming: 'dmeta-meta-incoming',
+		Travel: 'dmeta-meta-travel',
+		Winner: 'dmeta-meta-winner',
+		Roadmap: 'dmeta-meta-roadmap',
+		Money: 'dmeta-meta-money',
+		Security: 'dmeta-meta-security',
+		Tune: 'dmeta-meta-tune',
+		Guide: 'dmeta-meta-guide',
+		Smile: 'dmeta-meta-smile',
+		Rocket: 'dmeta-meta-rocket',
+		Time: 'dmeta-meta-time',
+		Cup: 'dmeta-meta-sales',
+		Marketing: 'dmeta-meta-marketing',
+		Announce: 'dmeta-meta-announce',
+		Devops: 'dmeta-meta-devops',
+		World: 'dmeta-meta-world',
+		Plan: 'dmeta-meta-plan',
+		Components: 'dmeta-meta-components',
+		People: 'dmeta-meta-people',
+		Checklist: 'dmeta-meta-checklist'
+	},
+
 	Color: { // eslint-disable-line ember/avoid-leaking-state-in-ember-objects
 		Red: 'red',
 		Green: 'green',
@@ -279,6 +330,7 @@ let constants = EmberObject.extend({
 		Close: 'Close',
 		Copy: 'Copy',
 		Delete: 'Delete',
+		Edit: 'Edit',
 		Export: 'Export',
 		File: 'File',
 		Insert: 'Insert',
@@ -292,8 +344,11 @@ let constants = EmberObject.extend({
 		Remove: 'Remove',
 		Reset: 'Reset',
 		Restore: 'Restore',
+		Request: 'Request',
 		Save: 'Save',
 		Search: 'Search',
+		Send: 'Send',
+		Share: 'Share',
 		SignIn: 'Sign In',
 		Unassigned: 'Unassigned',
 		Update: 'Update',

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

@@ -10,7 +10,6 @@
 // https://documize.com
 
 import { helper } from '@ember/component/helper';
-
 import { htmlSafe } from '@ember/string';
 
 export function documentFileIcon(params) {

gui/app/models/folder.js

@@ -21,6 +21,11 @@ export default Model.extend({
 	spaceType: attr('number', { defaultValue: 2 }),
 	lifecycle: attr('number', { defaultValue: 1 }),
 	likes: attr('string'),
+	icon: attr('string', { defaultValue: '' }),
+	desc: attr('string', { defaultValue: '' }),
+	labelId: attr('string', { defaultValue: '' }),
+	countCategory: attr('number', { defaultValue: 0 }),
+	countContent: attr('number', { defaultValue: 0 }),
 
 	allowLikes: computed('likes', function () {
 		return is.not.empty(this.get('likes')) && is.not.undefined(this.get('likes'));

gui/app/models/label.js

@@ -0,0 +1,32 @@
+// Copyright 2016 Documize Inc. <legal@documize.com>. All rights reserved.
+//
+// This software (Documize Community Edition) is licensed under
+// GNU AGPL v3 http://www.gnu.org/licenses/agpl-3.0.en.html
+//
+// You can operate outside the AGPL restrictions by purchasing
+// Documize Enterprise Edition and obtaining a commercial license
+// by contacting <sales@documize.com>.
+//
+// https://documize.com
+
+import { computed } from '@ember/object';
+import { htmlSafe } from '@ember/string';
+import attr from 'ember-data/attr';
+import Model from 'ember-data/model';
+
+export default Model.extend({
+	orgId: attr('string'),
+	name: attr('string'),
+	color: attr('string'),
+	created: attr(),
+	revised: attr(),
+
+	// UI only
+	count: 0,
+	bgColor: computed('color', function() {
+		return htmlSafe("background-color: " + this.get('color') + ";");
+	}),
+	bgfgColor: computed('color', function() {
+		return htmlSafe("background-color: " + this.get('color') + "; color: " + this.get('color') + ";");
+	})
+});

gui/app/pods/customize/folders/template.hbs

@@ -1,6 +1,6 @@
 {{layout/logo-heading
 	title="Spaces"
 	desc="Delete spaces, take ownership of shared and orphaned spaces"
-	icon=constants.Icon.Grid1}}
+	icon=constants.Icon.Grid}}
 
 {{customize/space-admin}}

gui/app/pods/customize/labels/controller.js

@@ -0,0 +1,47 @@
+// Copyright 2016 Documize Inc. <legal@documize.com>. All rights reserved.
+//
+// This software (Documize Community Edition) is licensed under
+// GNU AGPL v3 http://www.gnu.org/licenses/agpl-3.0.en.html
+//
+// You can operate outside the AGPL restrictions by purchasing
+// Documize Enterprise Edition and obtaining a commercial license
+// by contacting <sales@documize.com>.
+//
+// https://documize.com
+
+import { inject as service } from '@ember/service';
+import Notifier from '../../../mixins/notifier';
+import Controller from '@ember/controller';
+
+export default Controller.extend(Notifier, {
+	labelSvc: service('label'),
+
+	load() {
+		this.get('labelSvc').getAll().then((labels) => {
+			this.set('model', labels);
+		});
+	},
+
+	actions: {
+		onAdd(label) {
+			this.get('labelSvc').add(label).then(() => {
+				this.load();
+				this.notifySuccess('Label added');
+			});
+		},
+
+		onDelete(id) {
+			this.get('labelSvc').delete(id).then(() => {
+				this.load();
+				this.notifySuccess('Label deleted');
+			});
+		},
+
+		onUpdate(label) {
+			this.get('labelSvc').update(label).then(() => {
+				this.load();
+				this.notifySuccess('Label saved');
+			});
+		}
+	}
+});

gui/app/pods/customize/labels/route.js

@@ -0,0 +1,34 @@
+// Copyright 2016 Documize Inc. <legal@documize.com>. All rights reserved.
+//
+// This software (Documize Community Edition) is licensed under
+// GNU AGPL v3 http://www.gnu.org/licenses/agpl-3.0.en.html
+//
+// You can operate outside the AGPL restrictions by purchasing
+// Documize Enterprise Edition and obtaining a commercial license
+// by contacting <sales@documize.com>.
+//
+// https://documize.com
+
+import { inject as service } from '@ember/service';
+import AuthenticatedRouteMixin from 'ember-simple-auth/mixins/authenticated-route-mixin';
+import Route from '@ember/routing/route';
+
+export default Route.extend(AuthenticatedRouteMixin, {
+	labelSvc: service('label'),
+	appMeta: service(),
+	session: service(),
+
+	beforeModel() {
+		if (!this.get("session.isAdmin")) {
+			this.transitionTo('auth.login');
+		}
+	},
+
+	model() {
+		return this.get('labelSvc').getAll();
+	},
+
+	activate() {
+		this.get('browser').setTitle('Space Labels');
+	}
+});

gui/app/pods/customize/labels/template.hbs

@@ -0,0 +1,10 @@
+{{layout/logo-heading
+	title="Labels"
+	desc="Group and navigate spaces with visual labels"
+	icon=constants.Icon.Checkbox}}
+
+{{customize/space-labels
+	labels=model
+	onAdd=(action "onAdd")
+	onDelete=(action "onDelete")
+	onUpdate=(action "onUpdate")}}

gui/app/pods/customize/template.hbs

@@ -8,6 +8,22 @@
 				<i class={{concat "dicon " constants.Icon.Settings}} />
 				<div class="name">General</div>
 			{{/link-to}}
+			{{#link-to "customize.labels" activeClass="selected" class="item" tagName="div"}}
+				<i class={{concat "dicon " constants.Icon.Checkbox}} />
+				<div class="name">Labels</div>
+			{{/link-to}}
+			{{#link-to "customize.folders" activeClass="selected" class="item" tagName="div"}}
+				<i class={{concat "dicon " constants.Icon.Grid}} />
+				<div class="name">Spaces</div>
+			{{/link-to}}
+			{{#link-to "customize.users" activeClass="selected" class="item" tagName="div"}}
+				<i class={{concat "dicon " constants.Icon.Person}} />
+				<div class="name">User Management</div>
+			{{/link-to}}
+			{{#link-to "customize.groups" activeClass="selected" class="item" tagName="div"}}
+				<i class={{concat "dicon " constants.Icon.People}} />
+				<div class="name">User Groups</div>
+			{{/link-to}}
 			{{#link-to "customize.integrations" activeClass="selected" class="item" tagName="div"}}
 				<i class={{concat "dicon " constants.Icon.Integrations}} />
 				<div class="name">Integrations</div>
@@ -17,26 +33,10 @@
 					<i class={{concat "dicon " constants.Icon.Send}} />
 					<div class="name">Mail Server</div>
 				{{/link-to}}
-			{{/if}}
-			{{#link-to "customize.users" activeClass="selected" class="item" tagName="div"}}
-				<i class={{concat "dicon " constants.Icon.Person}} />
-				<div class="name">User Management</div>
-			{{/link-to}}
-			{{#link-to "customize.groups" activeClass="selected" class="item" tagName="div"}}
-				<i class={{concat "dicon " constants.Icon.People}} />
-				<div class="name">User Groups</div>
-			{{/link-to}}
-			{{#if session.isGlobalAdmin}}
 				{{#link-to "customize.auth" activeClass="selected" class="item" tagName="div"}}
 					<i class={{concat "dicon " constants.Icon.Locked}} />
 					<div class="name">Authentication</div>
 				{{/link-to}}
-			{{/if}}
-			{{#link-to "customize.folders" activeClass="selected" class="item" tagName="div"}}
-				<i class={{concat "dicon " constants.Icon.Grid1}} />
-				<div class="name">Spaces</div>
-			{{/link-to}}
-			{{#if session.isGlobalAdmin}}
 				{{#link-to "customize.search" activeClass="selected" class="item" tagName="div"}}
 					<i class={{concat "dicon " constants.Icon.Search}} />
 					<div class="name">Search</div>
@@ -60,7 +60,7 @@
 			{{/if}}
 			{{#link-to "customize.product" activeClass="selected" class="item" tagName="div"}}
 				<i class={{concat "dicon " constants.Icon.Announce}} />
-				<div class="name">Documize Changelog</div>
+				<div class="name">Changelog</div>
 			{{/link-to}}
 		</div>
 	</div>

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

@@ -3,7 +3,6 @@
 
 	<div class="section">
 		{{document/sidebar-meta
-			tab=tab
 			roles=roles
 			pages=pages
 			space=folder
@@ -17,11 +16,15 @@
 		{{ui/ui-spacer size=300}}
 
 		<div class="text-center">
-			{{#ui/ui-toolbar dark=true light=true raised=true large=false bordered=true}}
+			{{#ui/ui-toolbar dark=false light=true raised=true large=false bordered=true}}
 				{{ui/ui-toolbar-icon icon=constants.Icon.Index color=constants.Color.Gray tooltip="Table of contents"
 					selected=(eq sidebarTab "toc") onClick=(action "onSidebarChange" "toc")}}
 				{{ui/ui-toolbar-icon icon=constants.Icon.Attachment color=constants.Color.Gray tooltip="Attachments"
 					selected=(eq sidebarTab "files") onClick=(action "onSidebarChange" "files")}}
+				{{#if (eq appMeta.edition constants.Product.EnterpriseEdition)}}
+					{{ui/ui-toolbar-icon icon=constants.Icon.Chat color=constants.Color.Gray tooltip="Comments & Feedback"
+						selected=(eq sidebarTab "feedback") onClick=(action "onSidebarChange" "feedback")}}
+				{{/if}}
 			{{/ui/ui-toolbar}}
 		</div>
 	</div>
@@ -30,7 +33,6 @@
 
 	{{#if (eq sidebarTab "toc")}}
 		{{document/sidebar-toc
-			tab=tab
 			page=page
 			roles=roles
 			pages=pages
@@ -42,11 +44,18 @@
 			onPageLevelChange=(action "onPageLevelChange")
 			onPageSequenceChange=(action "onPageSequenceChange")}}
 	{{/if}}
+
 	{{#if (eq sidebarTab "files")}}
 		{{document/sidebar-attachment
 			document=document
 			permissions=permissions}}
 	{{/if}}
+
+	{{#if (eq sidebarTab "feedback")}}
+		{{enterprise/sidebar-feedback
+			document=document
+			permissions=permissions}}
+	{{/if}}
 {{/layout/master-sidebar}}
 
 {{#layout/master-content}}

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

@@ -21,6 +21,20 @@
 				<i class={{concat "dicon " constants.Icon.Tag}} />
 				<div class="name">Tags</div>
 			</div>
+			{{#if (eq appMeta.edition constants.Product.EnterpriseEdition)}}
+				{{#if model.permissions.documentApprove}}
+					<div class="item {{if (eq tab "protection") "selected"}}" {{action "onTab" "protection"}}>
+						<i class={{concat "dicon " constants.Icon.Locked}} />
+						<div class="name">Change Control</div>
+					</div>
+				{{/if}}
+				{{#if model.permissions.documentVersion}}
+					<div class="item {{if (eq tab "versions") "selected"}}" {{action "onTab" "versions"}}>
+						<i class={{concat "dicon " constants.Icon.Copy}} />
+						<div class="name">Versions</div>
+					</div>
+				{{/if}}
+			{{/if}}
 		</div>
 	</div>
 {{/layout/master-sidebar}}
@@ -49,4 +63,25 @@
 			permissions=model.permissions
 			onSaveDocument=(action "onSaveDocument")}}
 	{{/if}}
+
+	{{#if (eq tab "protection")}}
+		{{document/settings-protection
+			space=model.folder
+			spaces=model.folders
+			document=model.document
+			permissions=model.permissions
+			onRefresh=(action "onRefresh")
+			onSaveDocument=(action "onSaveDocument")}}
+	{{/if}}
+
+	{{#if (eq tab "versions")}}
+		{{enterprise/settings-version
+			space=model.folder
+			spaces=model.folders
+			document=model.document
+			permissions=model.permissions
+			versions=model.versions
+			onRefresh=(action "onRefresh")
+			onSaveDocument=(action "onSaveDocument")}}
+	{{/if}}
 {{/layout/master-content}}

gui/app/pods/folder/index/route.js

@@ -47,6 +47,7 @@ export default Route.extend(AuthenticatedRouteMixin, {
 		return hash({
 			folder: this.modelFor('folder').folder,
 			permissions: this.modelFor('folder').permissions,
+			labels: this.modelFor('folder').labels,
 			folders: folders,
 			documents: documents,
 			documentsDraft: _.filter(documents, function(d) { return d.get('lifecycle') === constants.Lifecycle.Draft; }),

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

@@ -2,6 +2,7 @@
 	{{folder/space-sidebar
 		spaces=model.folders
 		space=model.folder
+		labels=model.labels
 		templates=model.templates
 		permissions=model.permissions
 		documents=model.documents
@@ -19,8 +20,10 @@
 {{#layout/master-content}}
 	<div class="grid-container-6-4">
 		<div class="grid-cell-1">
-			{{layout/page-heading title=model.folder.name}}
-			{{layout/page-desc desc="some space desc"}}
+		{{layout/logo-heading
+			title=model.folder.name
+			desc=model.folder.desc
+			meta=model.folder.icon}}
 		</div>
 		<div class="grid-cell-2 grid-cell-right">
 			{{folder/space-toolbar
@@ -35,8 +38,6 @@
 		</div>
 	</div>
 
-	{{ui/ui-spacer size=400}}
-
 	{{folder/documents-list
 		documents=filteredDocs
 		spaces=model.folders

gui/app/pods/folder/route.js

@@ -11,14 +11,15 @@
 
 import { Promise as EmberPromise, hash } from 'rsvp';
 import { inject as service } from '@ember/service';
-import Route from '@ember/routing/route';
 import AuthenticatedRouteMixin from 'ember-simple-auth/mixins/authenticated-route-mixin';
+import Route from '@ember/routing/route';
 
 export default Route.extend(AuthenticatedRouteMixin, {
 	documentService: service('document'),
 	folderService: service('folder'),
 	templateService: service('template'),
 	session: service(''),
+	labelSvc: service('label'),
 
 	beforeModel() {
 		this.set('folderId', this.paramsFor('folder').folder_id)
@@ -41,7 +42,8 @@ export default Route.extend(AuthenticatedRouteMixin, {
 			permissions: this.get('permissions'),
 			folders: this.get('folderService').getAll(),
 			documents: this.get('documentService').getAllBySpace(params.folder_id),
-			templates: this.get('templateService').getSavedTemplates(params.folder_id)
+			templates: this.get('templateService').getSavedTemplates(params.folder_id),
+			labels: this.get('labelSvc').getAll()
 		});
 	},
 

gui/app/pods/folder/settings/route.js

@@ -14,7 +14,6 @@ import AuthenticatedRouteMixin from 'ember-simple-auth/mixins/authenticated-rout
 import Route from '@ember/routing/route';
 
 export default Route.extend(AuthenticatedRouteMixin, {
-
 	model() {
 		this.get('browser').setTitle(this.modelFor('folder').folder.get('name'));
 
@@ -23,6 +22,7 @@ export default Route.extend(AuthenticatedRouteMixin, {
 			folders: this.modelFor('folder').folders,
 			permissions: this.modelFor('folder').permissions,
 			templates: this.modelFor('folder').templates,
+			labels: this.modelFor('folder').labels,
 		});
 	}
 });

gui/app/pods/folder/settings/template.hbs

@@ -12,7 +12,7 @@
 		<div class="list">
 			<div class="item {{if (eq tab "general") "selected"}}" {{action "onTab" "general"}}>
 				<i class={{concat "dicon " constants.Icon.Settings}} />
-				<div class="name">Options</div>
+				<div class="name">Meta</div>
 			</div>
 			<div class="item {{if (eq tab "categories") "selected"}}" {{action "onTab" "categories"}}>
 				<i class={{concat "dicon " constants.Icon.Category}} />
@@ -44,7 +44,7 @@
 
 {{#layout/master-content}}
 	{{#if (eq tab "general")}}
-		{{folder/settings-general permissions=model.permissions space=model.folder}}
+		{{folder/settings-general permissions=model.permissions space=model.folder labels=model.labels}}
 	{{/if}}
 
 	{{#if (eq tab "permissions")}}

gui/app/pods/folders/controller.js

@@ -78,7 +78,7 @@ export default Controller.extend(AuthMixin, Modals, {
 
 			switch(view) {
 				case 'all':
-					this.set('selectedSpaces', this.get('model'));
+					this.set('selectedSpaces', this.get('model.spaces'));
 					break;
 				case 'public':
 					this.set('selectedSpaces', this.get('publicSpaces'));
@@ -89,6 +89,9 @@ export default Controller.extend(AuthMixin, Modals, {
 				case 'personal':
 					this.set('selectedSpaces', this.get('personalSpaces'));
 					break;
+				default:
+					this.set('selectedSpaces', this.get(view));
+					break;
 			}
 		}
 	}

gui/app/pods/folders/route.js

@@ -9,6 +9,7 @@
 //
 // https://documize.com
 
+import { hash } from 'rsvp';
 import Route from '@ember/routing/route';
 import { inject as service } from '@ember/service';
 import AuthenticatedRouteMixin from 'ember-simple-auth/mixins/authenticated-route-mixin';
@@ -17,6 +18,7 @@ export default Route.extend(AuthenticatedRouteMixin, {
 	appMeta: service(),
 	folderService: service('folder'),
 	localStorage: service(),
+	labelSvc: service('label'),
 
 	beforeModel() {
 		if (this.get('appMeta.setupMode')) {
@@ -26,19 +28,22 @@ export default Route.extend(AuthenticatedRouteMixin, {
 	},
 
 	model() {
-		return this.get('folderService').getAll();
+		return hash({
+			spaces: this.get('folderService').getAll(),
+			labels: this.get('labelSvc').getAll()
+		});
 	},
 
 	setupController(controller, model) {
 		this._super(controller, model);
-		controller.set('selectedSpaces', model);
+		controller.set('selectedSpaces', model.spaces);
 
 		let constants = this.get('constants');
 		let publicSpaces = [];
 		let protectedSpaces = [];
 		let personalSpaces = [];
 
-		_.each(model, space => {
+		_.each(model.spaces, space => {
 			if (space.get('spaceType') === constants.SpaceType.Public) {
 				publicSpaces.pushObject(space);
 			}
@@ -50,6 +55,14 @@ export default Route.extend(AuthenticatedRouteMixin, {
 			}
 		});
 
+		_.each(model.labels, label => {
+			let spaces = _.where(model.spaces, {labelId: label.get('id')});
+			label.set('count', spaces.length);
+			controller.set(label.get('id'), spaces);
+		});
+
+		controller.set('labels', model.labels);
+		controller.set('spaces', publicSpaces);
 		controller.set('publicSpaces', publicSpaces);
 		controller.set('protectedSpaces', protectedSpaces);
 		controller.set('personalSpaces', personalSpaces);

gui/app/pods/folders/template.hbs

@@ -6,7 +6,7 @@
 		<div class="list">
 			<div class="item {{if (eq selectedView "all") "selected"}}" {{action "onSelect" "all"}}>
 				<i class={{concat "dicon " constants.Icon.All}} />
-				<div class="name">All ({{model.length}})</div>
+				<div class="name">All ({{model.spaces.length}})</div>
 			</div>
 			<div class="item {{if (eq selectedView "public") "selected"}}" {{action "onSelect" "public"}}>
 				<i class={{concat "dicon " constants.Icon.World}} />
@@ -24,6 +24,25 @@
 			{{/if}}
 		</div>
 	</div>
+
+	{{ui/ui-spacer size=300}}
+
+	<div class="section">
+		<div class="title">label</div>
+		{{#if labels}}
+			<div class="list">
+				{{#each labels as |label|}}
+					<div class="item {{if (eq selectedView label.id) "selected"}}" {{action "onSelect" label.id}}>
+						<i class={{concat "dicon " constants.Icon.Checkbox}}
+							style={{label.bgfgColor}}/>
+						<div class="name">{{label.name}} ({{label.count}})</div>
+					</div>
+				{{/each}}
+			</div>
+		{{else}}
+			<div class="empty">No labels</div>
+		{{/if}}
+	</div>
 {{/layout/master-sidebar}}
 
 {{#layout/master-content}}
@@ -46,7 +65,7 @@
 
 	{{ui/ui-spacer size=400}}
 
-	{{spaces/space-list spaces=selectedSpaces}}
+	{{spaces/space-list spaces=selectedSpaces labels=labels}}
 
 	<div class="modal" tabindex="-1" role="dialog" id="add-space-modal">
 		<div class="modal-dialog" role="document">

gui/app/router.js

@@ -21,8 +21,8 @@ export default Router.map(function () {
 		path: '/'
 	});
 
-	this.route('dashboard', {
-		path: 'dashboard'
+	this.route('action', {
+		path: 'action'
 	});
 
 	this.route('analytics', {
@@ -78,6 +78,9 @@ export default Router.map(function () {
 			this.route('general', {
 				path: 'general'
 			});
+			this.route('labels', {
+				path: 'labels'
+			});
 			this.route('groups', {
 				path: 'groups'
 			});

gui/app/services/label.js

@@ -0,0 +1,67 @@
+// Copyright 2016 Documize Inc. <legal@documize.com>. All rights reserved.
+//
+// This software (Documize Community Edition) is licensed under
+// GNU AGPL v3 http://www.gnu.org/licenses/agpl-3.0.en.html
+//
+// You can operate outside the AGPL restrictions by purchasing
+// Documize Enterprise Edition and obtaining a commercial license
+// by contacting <sales@documize.com>.
+//
+// https://documize.com
+
+import { inject as service } from '@ember/service';
+import BaseService from '../services/base';
+
+export default BaseService.extend({
+	sessionService: service('session'),
+	ajax: service(),
+	store: service(),
+
+	// Add space label.
+	add(payload) {
+		return this.get('ajax').post(`label`, {
+			contentType: 'json',
+			data: JSON.stringify(payload)
+		}).then((label) => {
+			let data = this.get('store').normalize('label', label);
+			return this.get('store').push(data);
+		});
+	},
+
+	// Fetch all available space labels.
+	getAll() {
+		return this.get('ajax').request(`label`, {
+			method: 'GET'
+		}).then((response) => {
+			let data = [];
+			if (is.null(response)) response = [];
+
+			data = response.map((obj) => {
+				let data = this.get('store').normalize('label', obj);
+				return this.get('store').push(data);
+			});
+
+			return data;
+		});
+	},
+
+	// Updates an existing space label.
+	update(label) {
+		let id = label.get('id');
+
+		return this.get('ajax').request(`label/${id}`, {
+			method: 'PUT',
+			contentType: 'json',
+			data: JSON.stringify(label)
+		}).then((label) => {
+			let data = this.get('store').normalize('label', label);
+			return this.get('store').push(data);
+		});
+	},
+
+	delete(labelId) {
+		return this.get('ajax').request(`label/${labelId}`, {
+			method: 'DELETE'
+		});
+	}
+});

gui/app/styles/core/all.scss

@@ -30,7 +30,8 @@
 .background-color-theme-100 { background-color: $theme-100; }
 
 @import "reset.scss";
-@import "icon.scss";
+@import "icon-ui.scss";
+@import "icon-meta.scss";
 @import "mixins.scss";
 @import "layout/all.scss";
 @import "util.scss";

gui/app/styles/core/icon-meta.scss

@@ -0,0 +1,334 @@
+@font-face {
+	font-family: 'dmzmeta';
+	src: url('font/dmzmeta.eot');
+	src: url('font/dmzmeta.eot') format('embedded-opentype'), url('font/dmzmeta.woff2') format('woff2'), url('font/dmzmeta.woff') format('woff'), url('font/dmzmeta.ttf') format('truetype'), url('font/dmzmeta.svg') format('svg');
+	font-weight: normal;
+	font-style: normal;
+  }
+/*------------------------
+	base class definition
+-------------------------*/
+.dmeta {
+	display: inline-block;
+	font: normal normal normal 1em/1 'dmzmeta';
+	/* speak: none; */
+	text-transform: none;
+	/* Better Font Rendering */
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+  }
+  /*------------------------
+	change icon size
+  -------------------------*/
+  /* relative units */
+  .dmeta-sm {
+	font-size: 0.8em;
+  }
+  .dmeta-lg {
+	font-size: 1.2em;
+  }
+  /* absolute units */
+  .dmeta-16 {
+	font-size: 16px;
+  }
+  .dmeta-32 {
+	font-size: 32px;
+  }
+  /*----------------------------------
+	add a square/circle background
+  -----------------------------------*/
+  .dmeta-bg-square,
+  .dmeta-bg-circle {
+	padding: 0.35em;
+	background-color: #eee;
+  }
+  .dmeta-bg-circle {
+	border-radius: 50%;
+  }
+  /*------------------------------------
+	use icons as list item markers
+  -------------------------------------*/
+  .dmeta-ul {
+	padding-left: 0;
+	list-style-type: none;
+  }
+  .dmeta-ul > li {
+	display: flex;
+	align-items: flex-start;
+	line-height: 1.4;
+  }
+  .dmeta-ul > li > .dmeta {
+	margin-right: 0.4em;
+	line-height: inherit;
+  }
+  /*------------------------
+	spinning icons
+  -------------------------*/
+  .dmeta-is-spinning {
+	-webkit-animation: dmeta-spin 2s infinite linear;
+	-moz-animation: dmeta-spin 2s infinite linear;
+	animation: dmeta-spin 2s infinite linear;
+  }
+  @-webkit-keyframes dmeta-spin {
+	0% {
+	  -webkit-transform: rotate(0deg);
+	}
+	100% {
+	  -webkit-transform: rotate(360deg);
+	}
+  }
+  @-moz-keyframes dmeta-spin {
+	0% {
+	  -moz-transform: rotate(0deg);
+	}
+	100% {
+	  -moz-transform: rotate(360deg);
+	}
+  }
+  @keyframes dmeta-spin {
+	0% {
+	  -webkit-transform: rotate(0deg);
+	  -moz-transform: rotate(0deg);
+	  -ms-transform: rotate(0deg);
+	  -o-transform: rotate(0deg);
+	  transform: rotate(0deg);
+	}
+	100% {
+	  -webkit-transform: rotate(360deg);
+	  -moz-transform: rotate(360deg);
+	  -ms-transform: rotate(360deg);
+	  -o-transform: rotate(360deg);
+	  transform: rotate(360deg);
+	}
+  }
+  /*------------------------
+	rotated/flipped icons
+  -------------------------*/
+  .dmeta-rotate-90 {
+	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
+	-webkit-transform: rotate(90deg);
+	-moz-transform: rotate(90deg);
+	-ms-transform: rotate(90deg);
+	-o-transform: rotate(90deg);
+	transform: rotate(90deg);
+  }
+  .dmeta-rotate-180 {
+	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
+	-webkit-transform: rotate(180deg);
+	-moz-transform: rotate(180deg);
+	-ms-transform: rotate(180deg);
+	-o-transform: rotate(180deg);
+	transform: rotate(180deg);
+  }
+  .dmeta-rotate-270 {
+	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
+	-webkit-transform: rotate(270deg);
+	-moz-transform: rotate(270deg);
+	-ms-transform: rotate(270deg);
+	-o-transform: rotate(270deg);
+	transform: rotate(270deg);
+  }
+  .dmeta-flip-y {
+	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0);
+	-webkit-transform: scale(-1, 1);
+	-moz-transform: scale(-1, 1);
+	-ms-transform: scale(-1, 1);
+	-o-transform: scale(-1, 1);
+	transform: scale(-1, 1);
+  }
+  .dmeta-flip-x {
+	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
+	-webkit-transform: scale(1, -1);
+	-moz-transform: scale(1, -1);
+	-ms-transform: scale(1, -1);
+	-o-transform: scale(1, -1);
+	transform: scale(1, -1);
+  }
+  /*------------------------
+	  icons
+  -------------------------*/
+
+  .dmeta-meta-checklist::before {
+	content: "\ea02";
+  }
+
+  .dmeta-meta-people::before {
+	content: "\ea03";
+  }
+
+  .dmeta-meta-components::before {
+	content: "\ea06";
+  }
+
+  .dmeta-meta-plan::before {
+	content: "\ea07";
+  }
+
+  .dmeta-meta-world::before {
+	content: "\ea09";
+  }
+
+  .dmeta-meta-devops::before {
+	content: "\ea0a";
+  }
+
+  .dmeta-meta-announce::before {
+	content: "\ea0c";
+  }
+
+  .dmeta-meta-marketing::before {
+	content: "\ea0d";
+  }
+
+  .dmeta-meta-sales::before {
+	content: "\ea0e";
+  }
+
+  .dmeta-meta-time::before {
+	content: "\ea0f";
+  }
+
+  .dmeta-meta-rocket::before {
+	content: "\ea10";
+  }
+
+  .dmeta-meta-smile::before {
+	content: "\ea11";
+  }
+
+  .dmeta-meta-guide::before {
+	content: "\ea12";
+  }
+
+  .dmeta-meta-tune::before {
+	content: "\ea13";
+  }
+
+  .dmeta-meta-security::before {
+	content: "\ea15";
+  }
+
+  .dmeta-meta-money::before {
+	content: "\ea16";
+  }
+
+  .dmeta-meta-roadmap::before {
+	content: "\ea17";
+  }
+
+  .dmeta-meta-winner::before {
+	content: "\ea19";
+  }
+
+  .dmeta-meta-travel::before {
+	content: "\ea1a";
+  }
+
+  .dmeta-meta-incoming::before {
+	content: "\ea1e";
+  }
+
+  .dmeta-meta-outgoing::before {
+	content: "\ea1f";
+  }
+
+  .dmeta-meta-procedure::before {
+	content: "\ea20";
+  }
+
+  .dmeta-meta-todo::before {
+	content: "\ea21";
+  }
+
+  .dmeta-meta-infinite::before {
+	content: "\ea22";
+  }
+
+  .dmeta-meta-home::before {
+	content: "\ea23";
+  }
+
+  .dmeta-meta-org::before {
+	content: "\ea24";
+  }
+
+  .dmeta-meta-partner::before {
+	content: "\ea25";
+  }
+
+  .dmeta-meta-in::before {
+	content: "\ea28";
+  }
+
+  .dmeta-meta-out::before {
+	content: "\ea29";
+  }
+
+  .dmeta-meta-flow::before {
+	content: "\ea2b";
+  }
+
+  .dmeta-meta-manuals::before {
+	content: "\ea32";
+  }
+
+  .dmeta-meta-help::before {
+	content: "\ea35";
+  }
+
+  .dmeta-meta-code::before {
+	content: "\ea36";
+  }
+
+  .dmeta-meta-lab::before {
+	content: "\ea37";
+  }
+
+  .dmeta-meta-finance::before {
+	content: "\ea38";
+  }
+
+  .dmeta-meta-barchart::before {
+	content: "\ea39";
+  }
+
+  .dmeta-meta-piechart::before {
+	content: "\ea3a";
+  }
+
+  .dmeta-meta-metrics::before {
+	content: "\ea3b";
+  }
+
+  .dmeta-meta-bulb::before {
+	content: "\ea3c";
+  }
+
+  .dmeta-meta-design::before {
+	content: "\ea3d";
+  }
+
+  .dmeta-meta-gift::before {
+	content: "\ea3e";
+  }
+
+  .dmeta-meta-box::before {
+	content: "\ea3f";
+  }
+
+  .dmeta-meta-apps::before {
+	content: "\ea40";
+  }
+
+  .dmeta-meta-message::before {
+	content: "\ea41";
+  }
+
+  .dmeta-meta-support::before {
+	content: "\ea42";
+  }
+
+  .dmeta-meta-star::before {
+	content: "\ea43";
+  }
+

gui/app/styles/core/icon-ui.scss

@@ -11,7 +11,7 @@
 .dicon {
 	display: inline-block;
 	font: normal normal normal 1em/1 'dmzui';
-	speak: none;
+	// speak: none;
 	text-transform: none;
 	/* Better Font Rendering */
 	-webkit-font-smoothing: antialiased;
@@ -171,18 +171,10 @@ icons
 	content: "\ea04";
   }
 
-  .dicon-code::before {
-	content: "\ea05";
-  }
-
   .dicon-attachment::before {
 	content: "\ea06";
   }
 
-  .dicon-align-justify::before {
-	content: "\ea07";
-  }
-
   .dicon-pen-2::before {
 	content: "\ea08";
   }
@@ -335,10 +327,6 @@ icons
 	content: "\ea35";
   }
 
-  .dicon-gallery-view::before {
-	content: "\ea36";
-  }
-
   .dicon-time::before {
 	content: "\ea37";
   }
@@ -355,18 +343,6 @@ icons
 	content: "\ea3a";
   }
 
-  .dicon-ctrl-down::before {
-	content: "\ea3d";
-  }
-
-  .dicon-ctrl-left::before {
-	content: "\ea3e";
-  }
-
-  .dicon-ctrl-up::before {
-	content: "\ea3f";
-  }
-
   .dicon-menu-6::before {
 	content: "\ea40";
   }
@@ -375,22 +351,10 @@ icons
 	content: "\ea41";
   }
 
-  .dicon-reload::before {
-	content: "\ea42";
-  }
-
   .dicon-copy::before {
 	content: "\ea43";
   }
 
-  .dicon-list-numbers::before {
-	content: "\ea45";
-  }
-
-  .dicon-bookmark-2::before {
-	content: "\ea46";
-  }
-
   .dicon-menu-8::before {
 	content: "\ea48";
   }
@@ -451,10 +415,6 @@ icons
 	content: "\ea56";
   }
 
-  .dicon-d-check::before {
-	content: "\ea57";
-  }
-
   .dicon-preview::before {
 	content: "\ea58";
   }
@@ -462,3 +422,7 @@ icons
   .dicon-link::before {
 	content: "\ea59";
   }
+
+  .dicon-b-check::before {
+	content: "\ea5a";
+  }

gui/app/styles/core/layout/grid.scss

@@ -31,24 +31,24 @@ $display-break-5: 1800px;
 
 	// X-axis alignment
 	.grid-cell-left {
-		justify-self: self-end;
+		justify-self: self-start !important;
 	}
 	.grid-cell-right {
-		justify-self: self-end;
+		justify-self: self-end !important;
 	}
 	.grid-cell-center {
-		justify-self: center;
+		justify-self: center !important;
 	}
 
 	// Y-axis alignment
 	.grid-cell-top {
-		align-self: self-start;
+		align-self: self-start !important;
 	}
 	.grid-cell-middle {
-		align-self: center;
+		align-self: center !important;
 	}
 	.grid-cell-bottom {
-		align-self: self-end;
+		align-self: self-end !important;
 	}
 }
 

gui/app/styles/core/layout/headings.scss

@@ -2,7 +2,7 @@
 .master-page-heading {
 	font-size: 2rem;
 	font-weight: 700;
-	color: map-get($gray-shades, 900);
+	color: map-get($gray-shades, 800);
 }
 
 .master-page-desc {
@@ -15,7 +15,7 @@
 	display: flex;
 	flex-direction: row;
 
-	> .image {
+	> .icon, > .meta-icon {
 		align-self: center;
 		margin-right: 25px;
 

gui/app/styles/core/layout/master-internal.scss

@@ -17,7 +17,7 @@
 	display: block;
 	height: auto;
 	width: 100%;
-	z-index: 1041; // reequired if we want to show modals from inside sidebar
+	z-index: 1041; // required if we want to show modals from inside sidebar
 
 	.master-navbar {
 		display: block;
@@ -40,7 +40,7 @@
 			> .nav-options {
 				> .selected {
 					> .dicon, > .name {
-						color: $theme-400 !important;
+						color: $color-white !important;
 					}
 				}
 
@@ -50,13 +50,20 @@
 
 					> .dicon {
 						display: inline-block;
-						color: $color-white;
+						color: $theme-300;
 						font-size: 20px;
 						padding: 10px;
 					}
 
 					> .name {
 						display: none;
+						color: $theme-300;
+					}
+
+					&:hover {
+						> .dicon, > .name {
+							color: $theme-400 !important;
+						}
 					}
 				}
 			}
@@ -159,7 +166,6 @@
 					> .option {
 						>.dicon {
 							display: block;
-							color: $color-white;
 							font-size: 20px;
 							padding: 20px 0;
 						}
@@ -248,7 +254,6 @@
 					> .option {
 						> .dicon {
 							display: block;
-							color: $color-white;
 							font-size: 24px;
 							padding: 15px 0 10px 0;
 						}
@@ -258,7 +263,6 @@
 							padding: 0 0 15px 0;
 							font-size: 0.8rem;
 							font-weight: 700;
-							color: $color-white;
 							text-transform: uppercase;
 						}
 					}

gui/app/styles/core/layout/sidebar.scss

@@ -31,6 +31,10 @@
 			color: $color-black-light-3;
 		}
 
+		> .form-field {
+			margin: 10px 0 5px 0;
+		}
+
 		> .label {
 			@include border-radius(3px);
 			@extend .no-select;
@@ -90,6 +94,82 @@
 				}
 			}
 		}
+
+		> .tabs {
+			margin: 0;
+			padding: 0;
+
+			> .tab {
+				margin: 20px 0;
+				padding: 10px 10px;
+				@include border-radius(3px);
+				background-color: $color-white;
+				border: 1px solid map-get($gray-shades, 200);
+				cursor: pointer;
+
+				> .icon {
+					display: inline-block;
+					font-size: 24px;
+					color: map-get($gray-shades, 700);
+					margin: 0 10px 0 0;
+					vertical-align: top;
+				}
+
+				> .text {
+					display: inline-block;
+
+					> .title {
+						display: block;
+						font-size: 1.1rem;
+						font-weight: 500;
+						color: map-get($gray-shades, 800);
+					}
+
+					> .desc {
+						display: block;
+						margin: 5px 0 5px 0;
+						font-size: 1rem;
+						font-weight: 400;
+						color: map-get($gray-shades, 700);
+					}
+				}
+
+				&:hover {
+					> .icon {
+						color: map-get($gray-shades, 800);
+					}
+
+					> .text {
+						> .title {
+							color: map-get($gray-shades, 900);
+						}
+
+						> .desc {
+							color: map-get($gray-shades, 800);
+						}
+					}
+				}
+			}
+
+			> .selected, > .selected:hover {
+				background-color: map-get($yellow-shades, 200);
+				border: 1px solid map-get($yellow-shades, 300);
+
+				> .icon {
+					color: map-get($yellow-shades, 700);
+				}
+
+				> .text {
+					> .title {
+						color: map-get($yellow-shades, 800);
+					}
+
+					> .desc {
+						color: map-get($yellow-shades, 700);
+					}
+				}
+			}
+		}
 	}
 
 	.empty-label {

gui/app/styles/core/ui/all.scss

@@ -2,3 +2,4 @@
 @import "ui-popup";
 @import "ui-button";
 @import "ui-toolbar";
+@import "ui-icon-picker";

gui/app/styles/core/ui/ui-icon-picker.scss

@@ -0,0 +1,28 @@
+.ui-icon-picker {
+	> .list {
+		> .item {
+			display: inline-block;
+			margin: 10px;
+
+			> i {
+				font-size: 2.5rem;
+				color: map-get($gray-shades, 500);
+				cursor: pointer;
+
+				&:hover {
+					color: map-get($gray-shades, 600);
+				}
+			}
+		}
+
+		> .selected {
+			>  i {
+				color: map-get($yellow-shades, 600);
+
+				&:hover {
+					color: map-get($yellow-shades, 600);
+				}
+			}
+		}
+	}
+}

gui/app/styles/core/ui/ui-popup.scss

@@ -27,6 +27,7 @@
 			text-align: left;
 			padding: 0.5rem 1.5rem;
 			font-size: 1rem;
+			cursor: pointer;
 
 			&:hover {
 				color: $color-black;
@@ -81,4 +82,15 @@
 			font-weight: 600;
 		}
 	}
+
+	> .form {
+		padding: 20px;
+		width: 300px;
+
+		> .caption {
+			font-size: 1rem;
+			font-weight: 600;
+			color: map-get($gray-shades, 800);
+		}
+	}
 }

gui/app/styles/core/view/common.scss

@@ -38,29 +38,58 @@
 	margin-bottom: 10px;
 
 	> .theme {
-		height: 100px;
-		width: 250px;
+		height: 60px;
+		width: 200px;
 		text-align: center;
 		color: $color-white;
-		font-weight: 600;
-		font-size: 1.2rem;
+		font-weight: 500;
+		font-size: 1rem;
 		display: inline-block;
 		position: relative;
 		margin: 0 20px 20px 0;
-		padding: 10px 0 0 0;
+		padding: 5px;
 		cursor: default;
-		border: 7px solid map-get($gray-shades, 300);
+		border: 3px solid map-get($gray-shades, 300);
 		@include border-radius(3px);
 
 		&:hover {
-			border: 7px solid map-get($gray-shades, 600);
+			border: 3px solid map-get($gray-shades, 600);
 		}
+	}
 
-		.tick {
-			text-align: center;
-			color: $color-white;
-			font-weight: 400;
-			font-size: 2rem;
+	> .selected {
+		border: 3px solid map-get($yellow-shades, 600);
+
+		&:hover {
+			border: 3px solid map-get($yellow-shades, 600);
+		}
+	}
+}
+
+.label-color-picker {
+	display : block;
+
+	> .color {
+		height: 60px;
+		width: 60px;
+		text-align: center;
+		display: inline-block;
+		position: relative;
+		margin: 0 20px 20px 0;
+		cursor: default;
+		border: 3px solid map-get($gray-shades, 300);
+		@include border-radius(3px);
+
+		&:hover {
+			border: 3px solid map-get($gray-shades, 600);
+		}
+	}
+
+	> .selected {
+		border: 3px solid map-get($yellow-shades, 600);
+
+		&:hover {
+			border: 3px solid map-get($yellow-shades, 600);
 		}
 	}
 }

gui/app/styles/core/view/customize.scss

@@ -324,4 +324,19 @@
 			color: map-get($yellow-shades, 800);
 		}
 	}
+
+	> .space-labels {
+		display : block;
+
+		> .label {
+			@include border-radius(3px);
+			@extend .no-select;
+			display: block;
+			margin: 20px 0;
+			padding: 1rem 1rem;
+			font-size: 1.2rem;
+			font-weight: 500;
+			color: $color-white;
+		}
+	}
 }

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

@@ -140,7 +140,7 @@
 		margin: 0;
 		font-size: 1.1rem;
 		font-weight: 400;
-		color: map-get($gray-shades, 700);
+		color: map-get($yellow-shades, 700);
 	}
 
 	> .document-heading {

gui/app/styles/core/view/document/view-activity.scss

@@ -1,15 +1,6 @@
 .view-activity {
-	margin: 50px;
-
-	.title {
-		font-size: 1.8rem;
-		font-weight: bold;
-		margin: 0 0 30px 0;
-		color: map-get($gray-shades, 600);
-	}
-
 	> .list {
-		margin: 0 0 50px 0;
+		margin: 0;
 		padding: 0;
 		width: 100%;
 
@@ -24,7 +15,7 @@
 				position: absolute;
 				top: 19px;
 				left: -20px;
-				background-color: map-get($gray-shades, 300);
+				background-color: map-get($gray-shades, 200);
 				height: 3px;
 				width: 10px;
 			}
@@ -39,24 +30,24 @@
 				display: inline-block;
 
 				> .doc {
-					font-size: 1.2rem;
-					font-weight: normal;
-					color: $color-black-light-1;
+					color:  map-get($gray-shades, 700);
+					font-size: 1.4rem;
+					font-weight: 300;
 					letter-spacing: 0.5px;
 				}
 
 				> .note {
-					color: map-get($gray-shades, 600);
-					font-size: 1rem;
-					margin-top: 2px;
+					color: map-get($yellow-shades, 800);
+					font-size: 1.2rem;
+					font-weight: 400;
+					margin-top: 5px;
 				}
 			}
 		}
 	}
 
 	> .list-timeline {
-		border-left: 5px solid map-get($gray-shades, 300);
+		border-left: 5px solid map-get($gray-shades, 200);
 		padding-left: 20px;
-		margin-left: 30px;
 	}
 }

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

@@ -1,6 +1,6 @@
 .wysiwyg {
-	font-size: 17px;
-	line-height: 25px;
+	font-size: 15px;
+	line-height: 20px;
 	color: $color-black-light-1;
 
 	table {

gui/app/styles/core/view/space.scss

@@ -245,3 +245,39 @@
 		}
 	}
 }
+
+.space-label-picker {
+	display : block;
+
+	> .label {
+		@extend .no-select;
+		@extend .text-truncate;
+		display: inline-block;
+		width: 200px;
+		margin: 0 20px 20px 0;
+		padding: 0.5rem 0.75rem;
+		font-size: 1rem;
+		font-weight: 500;
+		color: $color-white;
+		border: 3px solid map-get($gray-shades, 300);
+		@include border-radius(3px);
+		cursor: pointer;
+
+		&:hover {
+			border: 3px solid map-get($gray-shades, 600);
+		}
+	}
+
+	.none {
+		background-color: $color-white;
+		color: map-get($gray-shades, 500);
+	}
+
+	> .selected {
+		border: 3px solid map-get($yellow-shades, 800);
+
+		&:hover {
+			border: 3px solid map-get($yellow-shades, 800);
+		}
+	}
+}

gui/app/styles/core/view/spaces.scss

@@ -25,6 +25,14 @@
 						font-size: 1.3rem;
 						font-weight: 700;
 						color: map-get($gray-shades, 800);
+
+						> .icon {
+							color: map-get($gray-shades, 700);
+							font-size: 20px;
+							vertical-align: middle;
+							display: inline-block;
+							margin-right: 10px;
+						}
 					}
 
 					> .desc {
@@ -35,11 +43,24 @@
 					}
 
 					> .meta {
-						padding: 25px 0 0 0;
+						padding: 15px 0 0 0;
 
 						> .dicon {
 							color: map-get($gray-shades, 600);
 							font-size: 20px;
+							margin-right: 20px;
+							vertical-align: middle;
+						}
+
+						> .space-label {
+							@include border-radius(3px);
+							@extend .no-select;
+							display: inline-block;
+							margin: 10px 0 13px 0;
+							padding: 0.3rem 0.7rem;
+							font-size: 1.1rem;
+							font-weight: 400;
+							color: map-get($gray-shades, 100);
 						}
 					}
 				}

gui/app/styles/core/widget/widget-symbol.scss

@@ -6,12 +6,15 @@
     padding: 0;
     line-height: 0;
     margin: 0;
-    text-align: center;
-	background-color: map-get($gray-shades, 300);
+	text-align: center;
+	vertical-align: center;
+	background-color: map-get($gray-shades, 200);
 
-    > .dicons {
-        font-size: 22px;
-        margin-top: 20px;
-        color: map-get($gray-shades, 600);
+    > .dicon {
+		font-size: 18px;
+		line-height: 27px;
+		margin: 7px 0 0 0;
+		color: map-get($gray-shades, 700);
+		font-weight: 400;
     }
 }

gui/app/styles/themes/harvest.scss

@@ -0,0 +1,35 @@
+// Copyright 2016 Documize Inc. <legal@documize.com>. All rights reserved.
+//
+// This software (Documize Community Edition) is licensed under
+// GNU AGPL v3 http://www.gnu.org/licenses/agpl-3.0.en.html
+//
+// You can operate outside the AGPL restrictions by purchasing
+// Documize Enterprise Edition and obtaining a commercial license
+// by contacting <sales@documize.com>.
+//
+// https://documize.com
+
+@import "../colors.scss";
+
+/**************************************************************
+* Theme colors.
+*
+* We go from 100 (lightest) to 900 (darkest).
+*
+* Base shade is 500 and is used prominmently as the
+* left-side navigation sidebar color.
+**************************************************************/
+$theme-900: #180E05;
+$theme-800: #4F1605;
+$theme-700: #5F3612;
+$theme-600: #8A4F1B;
+$theme-500: #A65F20;
+$theme-400: #C26F25;
+$theme-300: #DA8941;
+$theme-200: #EEC7A4;
+$theme-100: #F6E1CF;
+
+// Set hyperlink color for theme
+$color-link: map-get($green-shades, 700);
+
+@import "../core/all.scss";

gui/app/styles/themes/silver.scss

@@ -0,0 +1,35 @@
+// Copyright 2016 Documize Inc. <legal@documize.com>. All rights reserved.
+//
+// This software (Documize Community Edition) is licensed under
+// GNU AGPL v3 http://www.gnu.org/licenses/agpl-3.0.en.html
+//
+// You can operate outside the AGPL restrictions by purchasing
+// Documize Enterprise Edition and obtaining a commercial license
+// by contacting <sales@documize.com>.
+//
+// https://documize.com
+
+@import "../colors.scss";
+
+/**************************************************************
+* Theme colors.
+*
+* We go from 100 (lightest) to 900 (darkest).
+*
+* Base shade is 500 and is used prominmently as the
+* left-side navigation sidebar color.
+**************************************************************/
+$theme-900: #1F2833;
+$theme-800: #1F2833;
+$theme-700: #404B5A;
+$theme-600: #6E7A89;
+$theme-500: #929FB1;
+$theme-400: #AEBECC;
+$theme-300: #CBD4DB;
+$theme-200: #D5DDE5;
+$theme-100: #E1E7EB;
+
+// Set hyperlink color for theme
+$color-link: map-get($green-shades, 700);
+
+@import "../core/all.scss";

gui/app/styles/themes/sunflower.scss

@@ -0,0 +1,35 @@
+// Copyright 2016 Documize Inc. <legal@documize.com>. All rights reserved.
+//
+// This software (Documize Community Edition) is licensed under
+// GNU AGPL v3 http://www.gnu.org/licenses/agpl-3.0.en.html
+//
+// You can operate outside the AGPL restrictions by purchasing
+// Documize Enterprise Edition and obtaining a commercial license
+// by contacting <sales@documize.com>.
+//
+// https://documize.com
+
+@import "../colors.scss";
+
+/**************************************************************
+* Theme colors.
+*
+* We go from 100 (lightest) to 900 (darkest).
+*
+* Base shade is 500 and is used prominmently as the
+* left-side navigation sidebar color.
+**************************************************************/
+$theme-900: #312A09;
+$theme-800: #5C4E12;
+$theme-700: #86731A;
+$theme-600: #B19722;
+$theme-500: #D7B92F;
+$theme-400: #E5D176;
+$theme-300: #EADB93;
+$theme-200: #F2E9BD;
+$theme-100: #FBF7E8;
+
+// Set hyperlink color for theme
+$color-link: map-get($green-shades, 700);
+
+@import "../core/all.scss";

gui/app/templates/components/customize/space-labels.hbs

@@ -0,0 +1,78 @@
+<div class="view-customize">
+	{{ui/ui-button
+		light=true
+		color=constants.Color.Green
+		icon=constants.Icon.Checkbox
+		label=constants.Label.Add
+		onClick=(action "onShowAddModal")}}
+
+	{{ui/ui-spacer size=300}}
+
+	<ul class="space-labels">
+		{{#each labels as |label|}}
+			<li class="label" style={{concat "background-color:" label.color ";"}}>
+				<div class="grid-container-6-4">
+					<div class="grid-cell-1 grid-cell-middle">
+						{{label.name}}
+					</div>
+					<div class="grid-cell-2 grid-cell-right">
+						{{#ui/ui-toolbar dark=false light=true raised=false large=false bordered=false}}
+							{{ui/ui-toolbar-icon icon=constants.Icon.Edit color=constants.Color.Green tooltip="Update label" onClick=(action "onShowUpdateModal" label)}}
+							{{ui/ui-toolbar-icon icon=constants.Icon.Delete color=constants.Color.Red tooltip="Delete label" onClick=(action "onShowDeleteModal" label)}}
+						{{/ui/ui-toolbar}}
+					</div>
+				</div>
+			</li>
+		{{/each}}
+	</ul>
+</div>
+
+<div id="add-label-modal" class="modal" tabindex="-1" role="dialog">
+	<div class="modal-dialog modal-lg" role="document">
+		<div class="modal-content">
+			<div class="modal-header">Add Label</div>
+			<div class="modal-body">
+				<div class="form-group">
+					<label for="add-label-name">Name</label>
+					{{input type="text" id="add-label-name" class="form-control mousetrap" placeholder="Label name" value=labelName}}
+				</div>
+				<div class="form-group">
+					<label>Color</label>
+					{{ui/label-color-picker onChange=(action "onSetColor")}}
+				</div>
+			</div>
+			<div class="modal-footer">
+				{{ui/ui-button color=constants.Color.Gray light=true label=constants.Label.Cancel dismiss=true}}
+				{{ui/ui-button-gap}}
+				{{ui/ui-button color=constants.Color.Green light=true label=constants.Label.Add onClick=(action "onAdd")}}
+			</div>
+		</div>
+	</div>
+</div>
+
+<div id="edit-label-modal" class="modal" tabindex="-1" role="dialog">
+	<div class="modal-dialog modal-lg" role="document">
+		<div class="modal-content">
+			<div class="modal-header">Update Label</div>
+			<div class="modal-body">
+				<div class="form-group">
+					<label for="edit-label-name">Name</label>
+					{{input type="text" id="edit-label-name" class="form-control mousetrap" placeholder="Label name" value=labelName}}
+				</div>
+				<div class="form-group">
+					<label>Color</label>
+					{{ui/label-color-picker onChange=(action "onSetColor")}}
+				</div>
+			</div>
+			<div class="modal-footer">
+				{{ui/ui-button color=constants.Color.Gray light=true label=constants.Label.Cancel dismiss=true}}
+				{{ui/ui-button-gap}}
+				{{ui/ui-button color=constants.Color.Green light=true label=constants.Label.Save onClick=(action "onUpdate")}}
+			</div>
+		</div>
+	</div>
+</div>
+
+{{#ui/ui-dialog title="Delete Label" confirmCaption="Delete" buttonColor=constants.Color.Red show=showDeleteDialog onAction=(action "onDelete")}}
+	<p>Are you sure you want to delete the label <b>{{deleteLabel.name}}?</b></p>
+{{/ui/ui-dialog}}

gui/app/templates/components/customize/user-list.hbs

@@ -203,6 +203,7 @@
 			</div>
 			<div class="modal-footer">
 				{{ui/ui-button color=constants.Color.Gray light=true label=constants.Label.Close dismiss=true}}
+				{{ui/ui-button-gap}}
 				{{ui/ui-button color=constants.Color.Green light=true label=constants.Label.Update onClick=(action "onUpdate")}}
 			</div>
 		</div>

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

@@ -1,5 +1,16 @@
 <div class="no-print">
-	{{#ui/ui-toolbar dark=false light=true raised=true large=true bordered=true}}
+
+	{{#ui/ui-toolbar dark=false light=false raised=false large=true bordered=false}}
+		{{#ui/ui-toolbar-icon icon=constants.Icon.Export color=constants.Color.Gray tooltip="Print, PDF, Export"}}
+			{{#attach-popover class="ember-attacher-popper" hideOn="clickout" showOn="click" isShown=false}}
+				<ul class="menu">
+					<li class="item" {{action "onExport"}}>Export as HTML file</li>
+					<li class="item" {{action "onPDF"}}>Download as PDF</li>
+					<li class="item" {{action "onPrintDocument"}}>Print...</li>
+				</ul>
+			{{/attach-popover}}
+		{{/ui/ui-toolbar-icon}}
+
 		{{#if pinState.isPinned}}
 			{{ui/ui-toolbar-icon icon=constants.Icon.BookmarkDelete color=constants.Color.Yellow
 				tooltip="Remove from bookmarks" onClick=(action "onUnpin")}}
@@ -8,9 +19,31 @@
 				tooltip="Bookmark" onClick=(action "onPin")}}
 		{{/if}}
 
-		{{#if permissions.documentAdd}}
-			{{ui/ui-toolbar-icon icon=constants.Icon.Copy color=constants.Color.Gray
-				tooltip="Save as template" onClick=(action "onShowTemplateModal")}}
+		{{#if permissions.documentEdit}}
+			{{ui/ui-toolbar-icon icon=constants.Icon.Settings color=constants.Color.Gray
+				tooltip="Rename, Categories, Tag, Status, Workflow" linkTo="document.settings"}}
+		{{/if}}
+	{{/ui/ui-toolbar}}
+
+	{{#ui/ui-toolbar dark=false light=true raised=true large=true bordered=true}}
+		{{#if (eq appMeta.edition constants.Product.EnterpriseEdition)}}
+			{{#if permissions.documentEdit}}
+				{{#ui/ui-toolbar-icon icon=constants.Icon.UserAssign color=constants.Color.Gray tooltip="Actions & Sharing"}}
+					{{#attach-popover class="ember-attacher-popper" hideOn="clickout" showOn="click" isShown=false}}
+						<ul class="menu">
+							<li class="item" {{action "onShowRequestContributionModal"}}>Request contribution</li>
+							<li class="item" {{action "onShowRequestFeedbackModal"}}>Request feedback</li>
+							<li class="item" {{action "onShowRequestReadModal"}}>Request read</li>
+							{{#if (eq document.lifecycle constants.Lifecycle.Draft)}}
+								<li class="divider"/>
+								<li class="item" {{action "onShowPublishModal"}}>Request publication</li>
+							{{/if}}
+							<li class="divider"/>
+							<li class="item" {{action "onShareModal"}}>Share via secure external link</li>
+						</ul>
+					{{/attach-popover}}
+				{{/ui/ui-toolbar-icon}}
+			{{/if}}
 		{{/if}}
 
 		{{#if showActivity}}
@@ -23,21 +56,15 @@
 				tooltip="Revisions and rollback" linkTo="document.revisions"}}
 		{{/if}}
 
-		{{ui/ui-toolbar-icon icon=constants.Icon.Download color=constants.Color.Gray
-			tooltip="Download as HTML file" onClick=(action "onExport")}}
-
-		{{ui/ui-toolbar-icon icon=constants.Icon.Print color=constants.Color.Gray
-			tooltip="Print" onClick=(action "onPrintDocument")}}
+		{{#if permissions.documentAdd}}
+			{{ui/ui-toolbar-icon icon=constants.Icon.Copy color=constants.Color.Gray
+				tooltip="Save as template" onClick=(action "onShowTemplateModal")}}
+		{{/if}}
 
 		{{#if permissions.documentDelete}}
 			{{ui/ui-toolbar-icon icon=constants.Icon.Delete color=constants.Color.Gray
 				tooltip="Delete" onClick=(action "onShowDeleteModal")}}
 		{{/if}}
-
-		{{#if permissions.documentEdit}}
-			{{ui/ui-toolbar-icon icon=constants.Icon.Settings color=constants.Color.Green
-				tooltip="Rename, metadata, workflow" linkTo="document.settings"}}
-		{{/if}}
 	{{/ui/ui-toolbar}}
 </div>
 

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

@@ -1,8 +1,8 @@
+<div class="title center">attachments</div>
 {{#if canEdit}}
 	<div class="text-center">
-		{{#ui/ui-toolbar dark=true raised=true large=false bordered=true}}
-			{{ui/ui-toolbar-label color=constants.Color.Gray label="Upload Files" id="upload-document-files"}}
-		{{/ui/ui-toolbar}}
+		{{ui/ui-spacer size=100}}
+		{{ui/ui-button color=constants.Color.Gray label="Upload" id="upload-document-files"}}
 		{{ui/ui-spacer size=100}}
 	</div>
 {{/if}}

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

@@ -5,7 +5,7 @@
 			{{ui/ui-toolbar-label label=document.versionId color=constants.Color.Gray}}
 			{{#attach-popover class="ember-attacher-popper" hideOn="clickout" showOn="click" isShown=false}}
 				<div class="menu">
-					<li class="item header">Select document version</li>
+					<li class="item header">Select version to view</li>
 					{{#each versions as |version|}}
 						<a class="item" href="#" {{action "onSelectVersion" version}}>{{version.versionId}}</a>
 					{{/each}}

gui/app/templates/components/folder/settings-general.hbs

@@ -1,21 +1,53 @@
 {{layout/logo-heading
-	title="General Options"
-	desc="Set options to control how people interact with this space"
+	title="Space Meta"
+	desc="Set space visibility, icon and label"
 	icon=constants.Icon.Settings}}
 
 <form>
 	<div class="form-group">
-		<label>Space Name</label>
+		<label>Name</label>
 		{{focus-input id="space-name" type="text" value=spaceName class=(if hasNameError "form-control is-invalid" "form-control") placeholder="Space name" autocomplete="off"}}
 	</div>
 
 	<div class="form-group">
-		<label>Space Type</label>
+		<label>Description</label>
+		{{focus-input id="space-desc" type="text" value=spaceDesc class="form-control" placeholder="Space description" autocomplete="off"}}
+	</div>
+
+	<div class="form-group">
+		<label>Visibility</label>
 		{{ui/ui-select id="spacetypes-dropdown" content=spaceTypeOptions optionValuePath="id" optionLabelPath="label" selection=spaceType action=(action "onSetSpaceType")}}
 	</div>
 
 	<div class="form-group">
-		<label>Enable Like/Dislike Feedback</label>
+		<label>Icon</label>
+		<div class="ui-icon-picker">
+			<ul class="list">
+				{{#each iconList as |icon|}}
+					<li class="item {{if (eq spaceIcon icon) "selected"}}" {{action "onSetIcon" icon}}>
+						{{ui/ui-icon-meta icon=icon}}
+					</li>
+				{{/each}}
+			</ul>
+		</div>
+	</div>
+
+	<div class="form-group">
+		<label>Label</label>
+		<ul class="space-label-picker">
+			<li class="label none {{if (eq spaceLabel "") "selected"}}" {{action "onSetLabel" ""}}>None</li>
+			{{#each labels as |label|}}
+				<li class="label {{if (eq spaceLabel label.id) "selected"}}"
+					style={{concat "background-color:" label.color ";"}}
+					{{action "onSetLabel" label.id}} title={{label.name}}>
+					{{label.name}}
+				</li>
+			{{/each}}
+		</ul>
+	</div>
+
+	<div class="form-group">
+		<label>Enable Feedback</label>
 		{{x-toggle value=allowLikes size="medium" theme="light" onToggle=(action (mut allowLikes))}}
 	</div>
 

gui/app/templates/components/folder/space-sidebar.hbs

@@ -1,7 +1,11 @@
 {{ui/ui-spacer size=300}}
 
 <div class="title">label</div>
-<div class="label">Unclassified</div>
+{{#if (eq space.labelId "")}}
+	<div class="label">Unclassified</div>
+{{else}}
+	<div class="label" style={{{spaceLabel.bgColor}}}>{{spaceLabel.name}}</div>
+{{/if}}
 
 {{ui/ui-spacer size=200}}
 

gui/app/templates/components/layout/logo-heading.hbs

@@ -1,7 +1,13 @@
 <div class="logo-heading">
-	<div class="image">
-		<i class="dicon {{icon}}" />
-	</div>
+	{{#if icon}}
+		<div class="icon">
+			<i class="dicon {{icon}}" />
+		</div>
+	{{else if meta}}
+		<div class="meta-icon">
+			{{ui/ui-icon-meta icon=meta}}
+		</div>
+	{{/if}}
 	<div class="text">
 		{{layout/page-heading title=title}}
 		{{layout/page-desc desc=desc}}

gui/app/templates/components/layout/master-sidebar.hbs

@@ -1,38 +1,40 @@
 <div class="master-navbar">
 	<div class="nav-content">
 		<div class="nav-options">
-			{{#link-to "folders" class=(if (eq selectedItem "spaces") "option selected" "option")}}
-				<i class={{concat "dicon " constants.Icon.Grid1}}></i>
-				<div class="name">spaces</div>
-			{{/link-to}}
-			{{#if (eq appMeta.edition constants.Product.EnterpriseEdition)}}
-				{{#if session.viewDashboard}}
-					{{#link-to "dashboard" class=(if (eq selectedItem "actions") "option selected" "option")}}
-						<i class={{concat "dicon " constants.Icon.ListBullet}}></i>
-						<div class="name">actions</div>
-					{{/link-to}}
-					{{#link-to "activity" class=(if (eq selectedItem "activity") "option selected" "option")}}
-						<i class={{concat "dicon " constants.Icon.Pulse}}></i>
-						<div class="name">activity</div>
-					{{/link-to}}
-				{{/if}}
-				{{#if session.viewAnalytics}}
-					{{#link-to "analytics" class=(if (eq selectedItem "analytics") "option selected" "option")}}
-						<i class={{concat "dicon " constants.Icon.BarChart}}></i>
-						<div class="name">reports</div>
-					{{/link-to}}
-				{{/if}}
-			{{/if}}
-			{{#if (and session.authenticated session.isAdmin)}}
-				{{#link-to "customize.general" class=(if (eq selectedItem "settings") "option selected" "option")}}
-					<i class={{concat "dicon " constants.Icon.Settings}}></i>
-					<div class="name">Settings</div>
+			{{#unless hideNavigation}}
+				{{#link-to "folders" class=(if (eq selectedItem "spaces") "option selected" "option")}}
+					<i class={{concat "dicon " constants.Icon.Grid}}></i>
+					<div class="name">spaces</div>
 				{{/link-to}}
-			{{/if}}
-			{{#link-to "search" class=(if (eq selectedItem "search") "option selected" "option")}}
-				<i class={{concat "dicon " constants.Icon.Search}}></i>
-				<div class="name">search</div>
-			{{/link-to}}
+				{{#if (eq appMeta.edition constants.Product.EnterpriseEdition)}}
+					{{#if session.viewDashboard}}
+						{{#link-to "action" class=(if (eq selectedItem "actions") "option selected" "option")}}
+							<i class={{concat "dicon " constants.Icon.ListBullet}}></i>
+							<div class="name">actions</div>
+						{{/link-to}}
+						{{#link-to "activity" class=(if (eq selectedItem "activity") "option selected" "option")}}
+							<i class={{concat "dicon " constants.Icon.Pulse}}></i>
+							<div class="name">activity</div>
+						{{/link-to}}
+					{{/if}}
+					{{#if session.viewAnalytics}}
+						{{#link-to "analytics" class=(if (eq selectedItem "analytics") "option selected" "option")}}
+							<i class={{concat "dicon " constants.Icon.BarChart}}></i>
+							<div class="name">reports</div>
+						{{/link-to}}
+					{{/if}}
+				{{/if}}
+				{{#if (and session.authenticated session.isAdmin)}}
+					{{#link-to "customize.general" class=(if (eq selectedItem "settings") "option selected" "option")}}
+						<i class={{concat "dicon " constants.Icon.Settings}}></i>
+						<div class="name">Settings</div>
+					{{/link-to}}
+				{{/if}}
+				{{#link-to "search" class=(if (eq selectedItem "search") "option selected" "option")}}
+					<i class={{concat "dicon " constants.Icon.Search}}></i>
+					<div class="name">search</div>
+				{{/link-to}}
+			{{/unless}}
 		</div>
 
 		<div class="meta">

gui/app/templates/components/spaces/space-label.hbs

@@ -0,0 +1 @@
+{{label.name}}

gui/app/templates/components/spaces/space-list.hbs

@@ -4,10 +4,17 @@
 			{{#link-to "folder.index" space.id space.slug}}
 				<li class="item">
 					<div class="info">
-						<div class="name">{{space.name}}</div>
-						<div class="desc">Some description that is to be wired up to the backend</div>
+						<div class="name">
+							{{#if space.icon}}
+								<div class="icon">
+									{{ui/ui-icon-meta icon=space.icon}}
+								</div>
+							{{/if}}
+							{{space.name}}
+						</div>
+						<div class="desc">{{space.desc}}&nbsp;</div>
 						<div class="meta">
-							{{#if (eq space.spaceType constants.SpaceType.Public)}}
+							{{!-- {{#if (eq space.spaceType constants.SpaceType.Public)}}
 								<i class={{concat "dicon " constants.Icon.World}}>
 									{{#attach-tooltip showDelay=1000}}Public space{{/attach-tooltip}}
 								</i>
@@ -21,16 +28,19 @@
 								<i class={{concat "dicon " constants.Icon.Person}}>
 									{{#attach-tooltip showDelay=1000}}Personal space{{/attach-tooltip}}
 								</i>
+							{{/if}} --}}
+							{{#if space.labelId}}
+								{{spaces/space-label labels=labels labelId=space.labelId}}
 							{{/if}}
 						</div>
 					</div>
 					<div class="stats">
 						<div class="stat">
-							<div class="number">18</div>
+							<div class="number">{{space.countContent}}</div>
 							<div class="label">items</div>
 						</div>
 						<div class="stat">
-							<div class="number">5</div>
+							<div class="number">{{space.countCategory}}</div>
 							<div class="label">categories</div>
 						</div>
 					</div>

gui/app/templates/components/ui/label-color-picker.hbs

@@ -0,0 +1,8 @@
+<div class="label-color-picker">
+	{{#each colors as |color|}}
+		<div class="color {{if color.selected "selected"}}"
+			style={{concat "background-color: " color.code ";"}}
+			{{action "onSelect" color.code}}>
+		</div>
+	{{/each}}
+</div>

gui/app/templates/components/ui/theme-picker.hbs

@@ -1,14 +1,7 @@
 <div class="theme-picker">
 	{{#each themes as |theme|}}
-		<div class="theme" style={{concat "background-color: " theme.primary}} {{action "onSelect" theme.name}}>
+		<div class="theme {{if theme.selected "selected"}}" style={{concat "background-color: " theme.primary}} {{action "onSelect" theme.name}}>
 			{{theme.name}}
-			<div class="tick">
-				{{#if theme.selected}}
-					&#10003;
-				{{else}}
-					&nbsp;
-				{{/if}}
-			</div>
 		</div>
 	{{/each}}
 </div>

gui/app/templates/components/ui/ui-toolbar-icon.hbs

@@ -1,3 +1,4 @@
 {{#if tooltip}}
 	{{#attach-tooltip showDelay=1000}}{{tooltip}}{{/attach-tooltip}}
-{{/if}}
+{{/if}}
+{{yield}}