From 9a41e82aa35195fdf3fbb8a633881f3b1742e8cd Mon Sep 17 00:00:00 2001 From: McMatts Date: Wed, 13 Mar 2019 15:17:15 +0000 Subject: [PATCH] Provide view density switcher for spaces & space view Closes #218 --- gui/app/components/folder/documents-list.js | 11 +++ gui/app/components/spaces/space-list.js | 19 +++++ .../components/folder/documents-list.hbs | 33 +++++--- .../components/layout/logo-heading.hbs | 2 +- .../components/spaces/space-list.hbs | 81 ++++++++++++------- 5 files changed, 105 insertions(+), 41 deletions(-) diff --git a/gui/app/components/folder/documents-list.js b/gui/app/components/folder/documents-list.js index 7c4edbb3..13e07ae6 100644 --- a/gui/app/components/folder/documents-list.js +++ b/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); }, diff --git a/gui/app/components/spaces/space-list.js b/gui/app/components/spaces/space-list.js index 9429c89f..4fd269f1 100644 --- a/gui/app/components/spaces/space-list.js +++ b/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); + } + } }); diff --git a/gui/app/templates/components/folder/documents-list.hbs b/gui/app/templates/components/folder/documents-list.hbs index f2892123..a73a1650 100644 --- a/gui/app/templates/components/folder/documents-list.hbs +++ b/gui/app/templates/components/folder/documents-list.hbs @@ -1,6 +1,15 @@
+ {{#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,19 +68,23 @@
  • {{#link-to "document.index" space.id space.slug document.id document.slug class="info"}}
    {{ document.name }}
    -
    {{ document.excerpt }}
    + {{#if (not-eq viewDensity "3")}} +
    {{ document.excerpt }}
    + {{/if}} {{/link-to}} -
    -
    -
    - {{document.lifecycleLabel}} + {{#if (eq viewDensity "1")}} +
    +
    +
    + {{document.lifecycleLabel}} +
    + {{folder/document-categories categories=document.category}} + {{folder/document-tags documentTags=document.tags}}
    - {{folder/document-categories categories=document.category}} - {{folder/document-tags documentTags=document.tags}} -
    + {{/if}} {{#if hasDocumentActions}}
    diff --git a/gui/app/templates/components/layout/logo-heading.hbs b/gui/app/templates/components/layout/logo-heading.hbs index 776ac2e4..94123588 100644 --- a/gui/app/templates/components/layout/logo-heading.hbs +++ b/gui/app/templates/components/layout/logo-heading.hbs @@ -18,4 +18,4 @@ {{layout/page-desc desc=desc}}
    -{{ui/ui-spacer size=300}} \ No newline at end of file +{{ui/ui-spacer size=200}} \ No newline at end of file diff --git a/gui/app/templates/components/spaces/space-list.hbs b/gui/app/templates/components/spaces/space-list.hbs index c2ed0386..ae4a5669 100644 --- a/gui/app/templates/components/spaces/space-list.hbs +++ b/gui/app/templates/components/spaces/space-list.hbs @@ -1,4 +1,18 @@
    + +
    + {{#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-spacer size=200}} +
      {{#each spaces as |space|}} {{#link-to "folder.index" space.id space.slug}} @@ -12,40 +26,47 @@ {{/if}} {{space.name}}
    -
    {{space.desc}} 
    -
    - {{!-- {{#if (eq space.spaceType constants.SpaceType.Public)}} - - {{#attach-tooltip showDelay=1000}}Public space{{/attach-tooltip}} - - {{/if}} - {{#if (eq space.spaceType constants.SpaceType.Protected)}} - - {{#attach-tooltip showDelay=1000}}Protected space{{/attach-tooltip}} - - {{/if}} - {{#if (eq space.spaceType constants.SpaceType.Private)}} - - {{#attach-tooltip showDelay=1000}}Personal space{{/attach-tooltip}} - - {{/if}} --}} - {{#if space.labelId}} - {{spaces/space-label labels=labels labelId=space.labelId}} - {{/if}} -
    + {{#if (not-eq viewDensity "3")}} +
    {{space.desc}} 
    + {{/if}} + {{#if (eq viewDensity "1")}} +
    + {{!-- {{#if (eq space.spaceType constants.SpaceType.Public)}} + + {{#attach-tooltip showDelay=1000}}Public space{{/attach-tooltip}} + + {{/if}} + {{#if (eq space.spaceType constants.SpaceType.Protected)}} + + {{#attach-tooltip showDelay=1000}}Protected space{{/attach-tooltip}} + + {{/if}} + {{#if (eq space.spaceType constants.SpaceType.Private)}} + + {{#attach-tooltip showDelay=1000}}Personal space{{/attach-tooltip}} + + {{/if}} --}} + {{#if space.labelId}} + {{spaces/space-label labels=labels labelId=space.labelId}} + {{/if}} +
    + {{/if}}
    -
    -
    -
    {{space.countContent}}
    -
    items
    + {{#if (eq viewDensity "1")}} +
    +
    +
    {{space.countContent}}
    +
    items
    +
    +
    +
    {{space.countCategory}}
    +
    categories
    +
    -
    -
    {{space.countCategory}}
    -
    categories
    -
    -
    + {{/if}}
    • {{/link-to}} {{/each}} +