Enable doc section expand/collapse

Closes #170

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

@@ -18,17 +18,23 @@ export default Component.extend({
 	editMode: false,
 	editPage: null,
 	editMeta: null,
+	expanded: true,
 
 	didReceiveAttrs() {
 		this._super(...arguments);
 
 		if (this.get('isDestroyed') || this.get('isDestroying')) return;
 
+		let pageId = this.get('page.id');
+
 		if (this.get('session.authenticated')) {
 			this.workflow();
 		}
 
-		if (this.get('toEdit') === this.get('page.id') && this.get('permissions.documentEdit')) this.send('onEdit');
+		if (this.get('toEdit') === pageId && this.get('permissions.documentEdit')) this.send('onEdit');
+
+		// Work out if this section is expanded by default (state stored in browser local storage).
+		this.set('expanded', !_.includes(this.get('expandState'), pageId));
 	},
 
 	workflow() {

gui/app/components/document/view-content.js

@@ -38,6 +38,7 @@ export default Component.extend(Notifier, {
 	didReceiveAttrs() {
 		this._super(...arguments);
 
+		// Show/allow liking if space allows it and document is published.
 		this.set('showLikes', this.get('folder.allowLikes') && this.get('document.isLive'));
 	},
 

gui/app/components/layout/grid/sidebar-custom-action.js

@@ -0,0 +1,17 @@
+// 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 Component from '@ember/component';
+
+export default Component.extend({
+	tagName: 'div',
+	classNames: ['custom-action'],
+});

gui/app/constants/constants.js

@@ -228,6 +228,7 @@ let constants = EmberObject.extend({
 		Delete: 'dicon-bin',
 		Edit: 'dicon-pen-2',
 		Email: 'dicon-email',
+		Expand: 'dicon-enlarge',
 		Export: 'dicon-data-upload',
 		Export2: 'dicon-upload',
 		Filter: 'dicon-sort-tool',
@@ -254,6 +255,7 @@ let constants = EmberObject.extend({
 		Send: 'dicon-send',
 		Settings: 'dicon-settings-gear',
 		Share: 'dicon-network-connection',
+		Sort: 'dicon-alpha-order',
 		Split: 'dicon-split-37',
 		Tag: 'dicon-delete-key',
 		Tick: 'dicon-check',

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

@@ -19,6 +19,7 @@ export default Controller.extend(Notifier, {
 	templateService: service('template'),
 	sectionService: service('section'),
 	linkService: service('link'),
+	localStore: service('local-storage'),
 	appMeta: service(),
 	router: service(),
 	sidebarTab: 'toc',
@@ -263,6 +264,36 @@ export default Controller.extend(Notifier, {
 					});
 				});
 			});
+		},
+
+		// Expand all if nothing is expanded at the moment.
+		// Collapse all if something is expanded at the moment.
+		onExpandAll() {
+			let expandState = this.get('localStore').getDocSectionHide(this.get('document.id'));
+
+			if (expandState.length === 0) {
+				let pages = this.get('pages');
+				pages.forEach((item) => {
+					expandState.push(item.get('page.id'));
+				})
+			} else {
+				expandState = [];
+			}
+
+			this.get('localStore').setDocSectionHide(this.get('document.id'), expandState);
+			this.set('expandState', expandState);
+		},
+
+		onExpand(pageId, show) {
+			let expandState = this.get('localStore').getDocSectionHide(this.get('document.id'));
+
+			if (show) {
+				expandState = _.without(expandState, pageId)
+			} else {
+				expandState.push(pageId);
+			}
+
+			this.get('localStore').setDocSectionHide(this.get('document.id'), expandState);
 		}
 	}
 });

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

@@ -19,6 +19,7 @@ export default Route.extend(AuthenticatedRouteMixin, {
 	linkService: service('link'),
 	folderService: service('folder'),
 	userService: service('user'),
+	localStore: service('local-storage'),
 	contributionStatus: '',
 	approvalStatus: '',
 
@@ -69,6 +70,9 @@ export default Route.extend(AuthenticatedRouteMixin, {
 		controller.set('blocks', model.blocks);
 		controller.set('versions', model.versions);
 		controller.set('attachments', model.attachments);
+
+		// For persistence of section expand/collapse state.
+		controller.set('expandState', this.get('localStore').getDocSectionHide(model.document.id));
 	},
 
 	activate: function () {

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

@@ -25,6 +25,11 @@
 	<Layout::Grid::Sidebar>
 		<div class="sidebar-content">
 			<Layout::Grid::SidebarGoTop />
+			<Layout::Grid::SidebarCustomAction>
+				<i class="dicon {{constants.Icon.Expand}} {{if (gt expandState.length 0) 'color-green-500'}}" {{action "onExpandAll"}}>
+					{{#attach-tooltip showDelay=750}}Expand/collapse{{/attach-tooltip}}
+				</i>
+			</Layout::Grid::SidebarCustomAction>
 
 			<Ui::UiSpacer @size="200" />
 
@@ -72,6 +77,7 @@
 		</div>
 
 		{{document/view-content
+			expandState=expandState
 			roles=roles
 			links=links
 			pages=pages
@@ -84,6 +90,7 @@
 			attachments=attachments
 			currentPageId=currentPageId
 			refresh=(action "refresh")
+			onExpand=(action "onExpand")
 			onSavePage=(action "onSavePage")
 			onCopyPage=(action "onCopyPage")
 			onMovePage=(action "onMovePage")

gui/app/services/local-storage.js

@@ -26,5 +26,24 @@ export default Service.extend({
 
 	clearAll() {
 		localStorage.clear();
+	},
+
+	getDocSectionHide(docId) {
+		let state = localStorage[`doc-hide-${docId}`];
+		if (_.isUndefined(state) || _.isEmpty(state)) {
+			return [];
 		}
+
+		return _.split(state, '|');
+	},
+
+	setDocSectionHide(docId, state) {
+		let key = `doc-hide-${docId}`;
+
+		if (state.length === 0) {
+			delete localStorage[key];
+		} else {
+			localStorage[key] =  _.join(state, '|');
+		}
+	},
 });

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

@@ -438,3 +438,11 @@ icons
 .dicon-move-layer-up::before {
   content: "\ea5d";
 }
+
+.dicon-alpha-order::before {
+  content: "\ea5e";
+}
+
+.dicon-enlarge::before {
+  content: "\ea5f";
+}

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

@@ -20,6 +20,21 @@
 		}
 	}
 
+	// Allows for icon to be placed top right corner of sidebar zone.
+	// Expects icon to be placed in the zone.
+	> .custom-action {
+		position: absolute;
+		top: 10px;
+		right: 10px;
+		cursor: pointer;
+		color: map-get($gray-shades, 500);
+		font-size: 1rem;
+
+		&:hover {
+			color: map-get($gray-shades, 800);
+		}
+	}
+
 	> .section {
 		margin: 0;
 		padding: 0 7px;

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

@@ -55,6 +55,14 @@
 				color: map-get($yellow-shades, 700);
 			}
 		}
+
+		> i.expand {
+			color: map-get($green-shades, 500);
+
+			&:hover {
+				color: map-get($green-shades, 700);
+			}
+		}
 	}
 }
 

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

@@ -12,6 +12,7 @@
 		</div>
 	{{else}}
 		{{document/page-heading
+			expanded=expanded
 			page=page
 			meta=meta
 			pages=pages
@@ -24,6 +25,7 @@
 			permissions=permissions
 			onEdit=(action "onEdit")
 			refresh=(action refresh)
+			onExpand=(action onExpand)
 			onCopyPage=(action "onCopyPage")
 			onMovePage=(action "onMovePage")
 			onDeletePage=(action "onDeletePage")
@@ -32,10 +34,12 @@
 			onPageSequenceChange=(action onPageSequenceChange)
 			onShowSectionWizard=(action onShowSectionWizard)}}
 
+		{{#if expanded}}
 		<div class="wysiwyg">
 			{{section/base-renderer page=page}}
 		</div>
 	{{/if}}
+	{{/if}}
 
 	{{document/section-attachment uploadLabel="Upload Attachments"
 		editMode=editMode page=page document=document files=attachments

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

@@ -8,10 +8,14 @@
 		</div>
 	</div>
 	<div class="grid-cell-2 grid-cell-right grid-cell-middle">
-		{{#unless (eq document.protection constants.ProtectionType.Lock)}}
 			<div class="section-heading no-print" id="page-toolbar-{{ page.id }}">
 				<div class="section-toolbar">
+				<i class="dicon {{constants.Icon.Expand}} {{unless expanded "expand"}}" {{action "onExpand"}}>
+					{{#attach-tooltip showDelay=1000}}Show/hide{{/attach-tooltip}}
+				</i>
+				{{#unless (eq document.protection constants.ProtectionType.Lock)}}
 					{{#if canEdit}}
+						<div class="gap"/>
 						<i class="add-section dicon {{constants.Icon.Plus}}" {{action "onShowSectionWizard" page}}>
 							{{#attach-tooltip showDelay=1000}}Insert section above{{/attach-tooltip}}
 						</i>
@@ -57,10 +61,10 @@
 							{{/attach-popover}}
 						</i>
 					{{/if}}
-				</div>
-			</div>
 				{{/unless}}
 				</div>
+			</div>
+	</div>
 </div>
 
 {{#if permissions.documentCopy}}

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

@@ -1,7 +1,8 @@
 {{#if hasPages}}
 	{{#each pages key="id" as |item|}}
-		<Ui::UiSpacer @size="100" id={{concat 'page-spacer-' item.page.id}} />
+		<Ui::UiSpacer @size="100" id={{concat "page-spacer-" item.page.id}} />
 		{{document/document-page
+			expandState=expandState
 			roles=roles
 			pages=pages
 			folder=folder
@@ -14,6 +15,7 @@
 			permissions=permissions
 			attachments=attachments
 			refresh=(action refresh)
+			onExpand=(action onExpand)
 			onAttachmentUpload=(action onAttachmentUpload)
 			onAttachmentDelete=(action onAttachmentDelete)
 			onSavePage=(action "onSavePage")

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

@@ -4,19 +4,14 @@
 		{{#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
-			uppercase=false
-			color=constants.Color.Gray
-			label=constants.Label.Sort}}
 
+			{{#ui/ui-toolbar-icon icon=constants.Icon.Sort color=constants.Color.Gray tooltip="Sort"}}
 				{{#attach-popover class="ember-attacher-popper" hideOn="click" showOn="click" isShown=false placement="bottom-end" as |attacher|}}
 					<i class="dicon {{constants.Icon.Cross}} closer" {{action attacher.hide}}/>
 					<div class="container">
@@ -58,7 +53,8 @@
 							onClick=(action "onSortBy" attacher)}}
 					</div>
 				{{/attach-popover}}
-		{{/ui/ui-button}}
+			{{/ui/ui-toolbar-icon}}
+		{{/ui/ui-toolbar}}
 	</div>
 
 	<Ui::UiSpacer @size="200" />

gui/app/templates/components/layout/grid/sidebar-custom-action.hbs

@@ -0,0 +1 @@
+{{yield}}

gui/app/templates/components/search/search-results.hbs

@@ -2,13 +2,8 @@
 
 	{{#if documents}}
 		<div class="text-right">
-			{{#ui/ui-button
+			{{#ui/ui-toolbar dark=false light=false raised=false large=false bordered=false}}
-				light=false
+				{{#ui/ui-toolbar-icon icon=constants.Icon.Sort color=constants.Color.Gray tooltip="Sort"}}
-				outline=true
-				uppercase=false
-				color=constants.Color.Gray
-				label=constants.Label.Sort}}
-
 					{{#attach-popover class="ember-attacher-popper" hideOn="click" showOn="click" isShown=false placement="bottom-end" as |attacher|}}
 						<i class="dicon {{constants.Icon.Cross}} closer" {{action attacher.hide}}/>
 						<div class="container">
@@ -50,7 +45,8 @@
 								onClick=(action "onSortBy" attacher)}}
 						</div>
 					{{/attach-popover}}
-			{{/ui/ui-button}}
+				{{/ui/ui-toolbar-icon}}
+			{{/ui/ui-toolbar}}
 		</div>
 
 		<Ui::UiSpacer @size="200" />

gui/public/assets/font/dmzui.svg

@@ -217,6 +217,12 @@
     <glyph glyph-name="move-layer-up"
       unicode="&#xEA5D;"
       horiz-adv-x="256" d="M10.455 245.545C7.266 242.357 7.265 238.085 10.452 234.646L12.905 232L128 232L243.095 232L245.548 234.646C248.735 238.085 248.734 242.357 245.545 245.545L243.091 248L128 248L12.909 248L10.455 245.545M86.265 161.735C52.426 127.897 48 123.114 48 120.382C48 116.06 51.955 112 56.164 112C59.104 112 62.397 114.967 89.712 142.228L120 172.456L120 88.874L120 5.292L122.452 2.646C125.744 -0.906 130.256 -0.906 133.548 2.646L136 5.292L136 88.874L136 172.456L166.288 142.228C193.603 114.967 196.896 112 199.836 112C204.045 112 208 116.06 208 120.382C208 123.114 203.574 127.897 169.735 161.735C134.082 197.389 131.234 200 128 200C124.766 200 121.918 197.389 86.265 161.735" />
+    <glyph glyph-name="alpha-order"
+      unicode="&#xEA5E;"
+      horiz-adv-x="256" d="M178.455 253.545L176 251.091L176 143.325L176 35.559L153.699 57.779C133.815 77.592 131.047 80 128.154 80C123.805 80 120 76.194 120 71.845C120 68.922 123.017 65.577 150.254 38.299C178.385 10.126 180.753 8 184 8C187.247 8 189.615 10.126 217.746 38.299C244.983 65.577 248 68.922 248 71.845C248 76.194 244.195 80 239.846 80C236.953 80 234.185 77.592 214.301 57.779L192 35.559L192 143.325L192 251.091L189.545 253.545C186.298 256.793 181.702 256.793 178.455 253.545M54.661 246.26C53.814 244.891 17 145.686 17 144.775C17 144.306 20.894 144.052 25.653 144.211L34.305 144.5L39.038 158L43.772 171.5L63.748 171.77L83.725 172.041L88.615 158.27L93.506 144.5L102.372 144.209C111.183 143.92 111.233 143.933 110.622 146.209C110.283 147.469 101.775 170.55 91.714 197.5L73.422 246.5L64.292 246.786C59.271 246.944 54.937 246.707 54.661 246.26M71.322 210.218C75.074 198.823 78.374 188.937 78.656 188.25C79.051 187.283 75.77 187 64.155 187L49.144 187L56.072 207.21C59.882 218.326 63 228.226 63 229.21C63 233.942 65.052 229.259 71.322 210.218M29 103.5L29 96L53.5 96C66.975 96 78 95.758 78 95.461C78 95.165 66.525 77.955 52.5 57.217L27 19.511L27 13.756L27 8L64.044 8L101.088 8L100.794 15.25L100.5 22.5L74.23 23L47.96 23.5L73.48 60.953L99 98.405L99 104.703L99 111L64 111L29 111L29 103.5" />
+    <glyph glyph-name="enlarge"
+      unicode="&#xEA5F;"
+      horiz-adv-x="256" d="M181.656 173.656L133.656 221.656C130.528 224.784 125.472 224.784 122.344 221.656L74.344 173.656C71.216 170.528 71.216 165.472 74.344 162.344S82.528 159.216 85.656 162.344L128 204.688L170.344 162.344C171.904 160.784 173.952 160 176 160S180.096 160.784 181.656 162.344C184.784 165.472 184.784 170.528 181.656 173.656zM170.344 93.656L128 51.312L85.656 93.656C82.528 96.784 77.472 96.784 74.344 93.656S71.216 85.472 74.344 82.344L122.344 34.344C123.904 32.784 125.952 32 128 32S132.096 32.784 133.656 34.344L181.656 82.344C184.784 85.472 184.784 90.528 181.656 93.656S173.472 96.784 170.344 93.656z" />
   </font>
 </defs>
 </svg>