Enable doc section expand/collapse

Closes #170
2025-08-02 20:15:26 +02:00 · 2019-06-05 11:09:24 +01:00 · 2019-06-05 11:09:24 +01:00 · 8baad7e2f0
commit 8baad7e2f0
parent 99a5418dba
22 changed files with 229 additions and 102 deletions
--- a/gui/app/components/document/document-page.js
+++ b/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() {
--- a/gui/app/components/document/view-content.js
+++ b/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'));
 	},

--- a/gui/app/components/layout/grid/sidebar-custom-action.js
+++ b/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'],
+});
--- a/gui/app/constants/constants.js
+++ b/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',
--- a/gui/app/pods/document/index/controller.js
+++ b/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);
 		}
 	}
 });
--- a/gui/app/pods/document/index/route.js
+++ b/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 () {
--- a/gui/app/pods/document/index/template.hbs
+++ b/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")
--- a/gui/app/services/local-storage.js
+++ b/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, '|');
+		}
+	},
 });
--- a/gui/app/styles/core/icon-ui.scss
+++ b/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";
+}
--- a/gui/app/styles/core/layout/sidebar.scss
+++ b/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;
--- a/gui/app/styles/core/view/document/section.scss
+++ b/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);
+			}
+		}
 	}
 }

--- a/gui/app/templates/components/document/document-page.hbs
+++ b/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,12 +34,14 @@
 			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" 
+	{{document/section-attachment uploadLabel="Upload Attachments"
 		editMode=editMode page=page document=document files=attachments
 		onAttachmentUpload=(action onAttachmentUpload)
 		onAttachmentDelete=(action onAttachmentDelete)}}
--- a/gui/app/templates/components/document/page-heading.hbs
+++ b/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,9 +61,9 @@
 							{{/attach-popover}}
 						</i>
 					{{/if}}
+				{{/unless}}
 				</div>
 			</div>
-		{{/unless}}
 	</div>
 </div>

--- a/gui/app/templates/components/document/view-content.hbs
+++ b/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")
--- a/gui/app/templates/components/folder/documents-list.hbs
+++ b/gui/app/templates/components/folder/documents-list.hbs
@ -4,61 +4,57 @@
 		{{#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-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">
+						<Ui::UiSpacer @size="100" />
+
+						<div class="text-center">
+							<ul class="ui-option-picker ui-option-picker-horiz">
+								<li class="option {{if sortBy.name "selected"}}" {{action "onSetSort" "name"}}>
+									<div class="text">Name</div>
+								</li>
+								<li class="option {{if sortBy.created "selected"}}" {{action "onSetSort" "created"}}>
+									<div class="text">Created date</div>
+								</li>
+								<li class="option {{if sortBy.updated "selected"}}" {{action "onSetSort" "updated"}}>
+									<div class="text">Last updated</div>
+								</li>
+							</ul>
+						</div>
+
+						<Ui::UiSpacer @size="100" />
+
+						<div class="text-center">
+							<ul class="ui-option-picker ui-option-picker-horiz">
+								<li class="option {{if sortBy.asc "selected"}}" {{action "onSetSort" "asc"}}>
+									<div class="text">Ascending</div>
+								</li>
+								<li class="option {{if sortBy.desc "selected"}}" {{action "onSetSort" "desc"}}>
+									<div class="text">Descending</div>
+								</li>
+							</ul>
+						</div>
+
+						<Ui::UiSpacer @size="300" />
+
+						{{ui/ui-button
+							light=true
+							color=constants.Color.Yellow
+							label=constants.Label.Sort
+							onClick=(action "onSortBy" attacher)}}
+					</div>
+				{{/attach-popover}}
+			{{/ui/ui-toolbar-icon}}
 		{{/ui/ui-toolbar}}
-
-		{{#ui/ui-button
-			light=false
-			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">
-					<Ui::UiSpacer @size="100" />
-
-					<div class="text-center">
-						<ul class="ui-option-picker ui-option-picker-horiz">
-							<li class="option {{if sortBy.name "selected"}}" {{action "onSetSort" "name"}}>
-								<div class="text">Name</div>
-							</li>
-							<li class="option {{if sortBy.created "selected"}}" {{action "onSetSort" "created"}}>
-								<div class="text">Created date</div>
-							</li>
-							<li class="option {{if sortBy.updated "selected"}}" {{action "onSetSort" "updated"}}>
-								<div class="text">Last updated</div>
-							</li>
-						</ul>
-					</div>
-
-					<Ui::UiSpacer @size="100" />
-
-					<div class="text-center">
-						<ul class="ui-option-picker ui-option-picker-horiz">
-							<li class="option {{if sortBy.asc "selected"}}" {{action "onSetSort" "asc"}}>
-								<div class="text">Ascending</div>
-							</li>
-							<li class="option {{if sortBy.desc "selected"}}" {{action "onSetSort" "desc"}}>
-								<div class="text">Descending</div>
-							</li>
-						</ul>
-					</div>
-
-					<Ui::UiSpacer @size="300" />
-
-					{{ui/ui-button
-						light=true
-						color=constants.Color.Yellow
-						label=constants.Label.Sort
-						onClick=(action "onSortBy" attacher)}}
-				</div>
-			{{/attach-popover}}
-		{{/ui/ui-button}}
 	</div>

 	<Ui::UiSpacer @size="200" />
--- a/gui/app/templates/components/layout/grid/sidebar-custom-action.hbs
+++ b/gui/app/templates/components/layout/grid/sidebar-custom-action.hbs
@ -0,0 +1 @@
+{{yield}}
--- a/gui/app/templates/components/search/search-results.hbs
+++ b/gui/app/templates/components/search/search-results.hbs
@ -2,55 +2,51 @@

 	{{#if documents}}
 		<div class="text-right">
-			{{#ui/ui-button
-				light=false
-				outline=true
-				uppercase=false
-				color=constants.Color.Gray
-				label=constants.Label.Sort}}
+			{{#ui/ui-toolbar dark=false light=false raised=false large=false bordered=false}}
+				{{#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">
+							<Ui::UiSpacer @size="100" />

-				{{#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">
-						<Ui::UiSpacer @size="100" />
+							<div class="text-center">
+								<ul class="ui-option-picker ui-option-picker-horiz">
+									<li class="option {{if sortBy.name "selected"}}" {{action "onSetSort" "name"}}>
+										<div class="text">Name</div>
+									</li>
+									<li class="option {{if sortBy.created "selected"}}" {{action "onSetSort" "created"}}>
+										<div class="text">Created date</div>
+									</li>
+									<li class="option {{if sortBy.updated "selected"}}" {{action "onSetSort" "updated"}}>
+										<div class="text">Last updated</div>
+									</li>
+								</ul>
+							</div>

-						<div class="text-center">
-							<ul class="ui-option-picker ui-option-picker-horiz">
-								<li class="option {{if sortBy.name "selected"}}" {{action "onSetSort" "name"}}>
-									<div class="text">Name</div>
-								</li>
-								<li class="option {{if sortBy.created "selected"}}" {{action "onSetSort" "created"}}>
-									<div class="text">Created date</div>
-								</li>
-								<li class="option {{if sortBy.updated "selected"}}" {{action "onSetSort" "updated"}}>
-									<div class="text">Last updated</div>
-								</li>
-							</ul>
+							<Ui::UiSpacer @size="100" />
+
+							<div class="text-center">
+								<ul class="ui-option-picker ui-option-picker-horiz">
+									<li class="option {{if sortBy.asc "selected"}}" {{action "onSetSort" "asc"}}>
+										<div class="text">Ascending</div>
+									</li>
+									<li class="option {{if sortBy.desc "selected"}}" {{action "onSetSort" "desc"}}>
+										<div class="text">Descending</div>
+									</li>
+								</ul>
+							</div>
+
+							<Ui::UiSpacer @size="300" />
+
+							{{ui/ui-button
+								light=true
+								color=constants.Color.Yellow
+								label=constants.Label.Sort
+								onClick=(action "onSortBy" attacher)}}
 						</div>
-
-						<Ui::UiSpacer @size="100" />
-
-						<div class="text-center">
-							<ul class="ui-option-picker ui-option-picker-horiz">
-								<li class="option {{if sortBy.asc "selected"}}" {{action "onSetSort" "asc"}}>
-									<div class="text">Ascending</div>
-								</li>
-								<li class="option {{if sortBy.desc "selected"}}" {{action "onSetSort" "desc"}}>
-									<div class="text">Descending</div>
-								</li>
-							</ul>
-						</div>
-
-						<Ui::UiSpacer @size="300" />
-
-						{{ui/ui-button
-							light=true
-							color=constants.Color.Yellow
-							label=constants.Label.Sort
-							onClick=(action "onSortBy" attacher)}}
-					</div>
-				{{/attach-popover}}
-			{{/ui/ui-button}}
+					{{/attach-popover}}
+				{{/ui/ui-toolbar-icon}}
+			{{/ui/ui-toolbar}}
 		</div>

 		<Ui::UiSpacer @size="200" />