Provide view density switcher for spaces & space view

Closes #218

gui/app/components/folder/documents-list.js

@@ -20,6 +20,7 @@ export default Component.extend({
 	showMoveDialog: false,
 	selectedDocuments: A([]),
 	selectedCaption: 'document',
+	viewDensity: "1",
 
 	showAdd: computed('permissions.documentAdd', 'documents', function() {
 		return this.get('documents.length') === 0 && this.get('permissions.documentAdd');
@@ -48,6 +49,11 @@ export default Component.extend({
 		if (!_.isNull(sortOrder) && !_.isUndefined(sortOrder)) {
 			this.send('onSetSort', sortOrder);
 		}
+
+		let viewDensity = this.get('localStorage').getSessionItem('space.density');
+		if (!_.isNull(viewDensity) && !_.isUndefined(viewDensity)) {
+			this.set('viewDensity', viewDensity);
+		}		
 	},
 
 	actions: {
@@ -85,6 +91,11 @@ export default Component.extend({
 			this.get('onFiltered')(this.get('documents'));
 		},
 
+		onSwitchView(v) {
+			this.set('viewDensity', v);
+			this.get('localStorage').storeSessionItem('space.density', v);
+		},
+
 		onShowDeleteDocuments() {
 			this.set('showDeleteDialog', true);
 		},

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

@@ -9,8 +9,27 @@
 //
 // https://documize.com
 
+import { inject as service } from '@ember/service';
 import AuthMixin from '../../mixins/auth';
 import Component from '@ember/component';
 
 export default Component.extend(AuthMixin, {
+    localStorage: service(),
+	viewDensity: "1",    
+    
+    didReceiveAttrs() {
+		this._super(...arguments);
+
+        let viewDensity = this.get('localStorage').getSessionItem('spaces.density');
+		if (!_.isNull(viewDensity) && !_.isUndefined(viewDensity)) {
+			this.set('viewDensity', viewDensity);
+		}		
+	},
+
+    actions: {
+		onSwitchView(v) {
+			this.set('viewDensity', v);
+			this.get('localStorage').storeSessionItem('spaces.density', v);
+		}        
+    }
 });

gui/app/templates/components/folder/documents-list.hbs

@@ -1,6 +1,15 @@
 <div class="view-space">
 
 	<div class="text-right">
+		{{#ui/ui-toolbar dark=false light=false raised=false large=false bordered=false}}
+			{{ui/ui-toolbar-icon icon=constants.Icon.Blocks color=constants.Color.Gray tooltip="Complete"
+				selected=(eq viewDensity "1") onClick=(action "onSwitchView" "1")}}
+			{{ui/ui-toolbar-icon icon=constants.Icon.All color=constants.Color.Gray tooltip="Comfort"
+				selected=(eq viewDensity "2") onClick=(action "onSwitchView" "2")}}
+			{{ui/ui-toolbar-label label="—"  color=constants.Color.Gray tooltip="Compact"
+				selected=(eq viewDensity "3") onClick=(action "onSwitchView" "3")}}				
+		{{/ui/ui-toolbar}}
+
 		{{#ui/ui-button
 			light=false
 			outline=true
@@ -59,8 +68,11 @@
 			<li class="document {{if document.selected "selected"}}" id="document-{{document.id}}">
 				{{#link-to "document.index" space.id space.slug document.id document.slug class="info"}}
 					<div class="name">{{ document.name }}</div>
+					{{#if (not-eq viewDensity "3")}}
 						<div class="desc">{{ document.excerpt }}</div>
+					{{/if}}
 				{{/link-to}}
+				{{#if (eq viewDensity "1")}}
 					<div class="meta">
 						<div class="lifecycle">
 							<div class="{{if (eq document.lifecycle constants.Lifecycle.Draft) "draft"}}
@@ -72,6 +84,7 @@
 						{{folder/document-categories categories=document.category}}
 						{{folder/document-tags documentTags=document.tags}}
 					</div>
+				{{/if}}
 
 				{{#if hasDocumentActions}}
 					<div class="checkbox" {{action "selectDocument" document.id}}>

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

@@ -18,4 +18,4 @@
 		{{layout/page-desc desc=desc}}
 	</div>
 </div>
-{{ui/ui-spacer size=300}}
+{{ui/ui-spacer size=200}}

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

@@ -1,4 +1,18 @@
 <div class="view-spaces">
+	
+	<div class="text-right">
+		{{#ui/ui-toolbar dark=false light=false raised=false large=false bordered=false}}
+			{{ui/ui-toolbar-icon icon=constants.Icon.Blocks color=constants.Color.Gray tooltip="Complete"
+				selected=(eq viewDensity "1") onClick=(action "onSwitchView" "1")}}
+			{{ui/ui-toolbar-icon icon=constants.Icon.All color=constants.Color.Gray tooltip="Comfort"
+				selected=(eq viewDensity "2") onClick=(action "onSwitchView" "2")}}
+			{{ui/ui-toolbar-label label="—"  color=constants.Color.Gray tooltip="Compact"
+				selected=(eq viewDensity "3") onClick=(action "onSwitchView" "3")}}				
+		{{/ui/ui-toolbar}}
+	</div>
+
+	{{ui/ui-spacer size=200}}
+
 	<ul class="list">
 		{{#each spaces as |space|}}
 			{{#link-to "folder.index" space.id space.slug}}
@@ -12,7 +26,10 @@
 							{{/if}}
 							{{space.name}}
 						</div>
+						{{#if (not-eq viewDensity "3")}}
 							<div class="desc">{{space.desc}}&nbsp;</div>
+						{{/if}}
+						{{#if (eq viewDensity "1")}}
 							<div class="meta">
 								{{!-- {{#if (eq space.spaceType constants.SpaceType.Public)}}
 									<i class={{concat "dicon " constants.Icon.World}}>
@@ -33,7 +50,9 @@
 									{{spaces/space-label labels=labels labelId=space.labelId}}
 								{{/if}}
 							</div>
+						{{/if}}
 					</div>
+					{{#if (eq viewDensity "1")}}
 						<div class="stats">
 							<div class="stat">
 								<div class="number">{{space.countContent}}</div>
@@ -44,8 +63,10 @@
 								<div class="label">categories</div>
 							</div>
 						</div>
+					{{/if}}
 				</li>
 			{{/link-to}}
 		{{/each}}
 	</ul>
+
 </div>