From 6ae941436129885e50267ae49dafc5c937c27324 Mon Sep 17 00:00:00 2001 From: McMatts Date: Fri, 24 May 2019 12:30:31 +0100 Subject: [PATCH] Complete UI refactoring to new nav and toolbar UX Compact design! --- gui/app/components/folder/space-toolbar.js | 1 - gui/app/components/ui/ui-toolbar-dropdown.js | 2 +- gui/app/components/ui/ui-toolbar.js | 2 +- gui/app/constants/constants.js | 2 + gui/app/pods/folder/index/template.hbs | 6 +- gui/app/pods/folder/settings/template.hbs | 2 +- gui/app/pods/folders/template.hbs | 11 ++- gui/app/styles/core/layout/toolbar.scss | 9 ++- gui/app/styles/core/ui/ui-popup.scss | 3 +- gui/app/styles/core/ui/ui-toolbar.scss | 14 +++- .../components/document/document-toolbar.hbs | 77 ++++++++----------- .../components/folder/space-toolbar.hbs | 54 +++++++------ .../components/layout/master-navigation.hbs | 7 -- .../templates/components/ui/ui-progress.hbs | 13 ++++ 14 files changed, 113 insertions(+), 90 deletions(-) create mode 100644 gui/app/templates/components/ui/ui-progress.hbs diff --git a/gui/app/components/folder/space-toolbar.js b/gui/app/components/folder/space-toolbar.js index 6985a136..571b9885 100644 --- a/gui/app/components/folder/space-toolbar.js +++ b/gui/app/components/folder/space-toolbar.js @@ -19,7 +19,6 @@ import Notifier from '../../mixins/notifier'; import Component from '@ember/component'; export default Component.extend(ModalMixin, AuthMixin, Notifier, { - classNames: ["display-inline-block"], spaceService: service('folder'), localStorage: service(), templateService: service('template'), diff --git a/gui/app/components/ui/ui-toolbar-dropdown.js b/gui/app/components/ui/ui-toolbar-dropdown.js index b79e0327..bd8e5095 100644 --- a/gui/app/components/ui/ui-toolbar-dropdown.js +++ b/gui/app/components/ui/ui-toolbar-dropdown.js @@ -22,7 +22,7 @@ export default Component.extend({ calcClass: computed(function() { // Prepare icon class name - this.iconClass = this.get('constants').Icon.TriangleSmallDown; + this.iconClass = this.get('constants').Icon.ArrowSmallDown; // Prepare button class name let bc = 'dropdown'; diff --git a/gui/app/components/ui/ui-toolbar.js b/gui/app/components/ui/ui-toolbar.js index 2662336a..dad82d17 100644 --- a/gui/app/components/ui/ui-toolbar.js +++ b/gui/app/components/ui/ui-toolbar.js @@ -12,7 +12,7 @@ import Component from '@ember/component'; export default Component.extend({ - classNames: ['dmz-toolbar', 'non-printable'], + classNames: ['dmz-toolbar'], classNameBindings: ['raised:dmz-toolbar-raised', 'bordered:dmz-toolbar-bordered', diff --git a/gui/app/constants/constants.js b/gui/app/constants/constants.js index 7ff0fe5b..af7d2c1c 100644 --- a/gui/app/constants/constants.js +++ b/gui/app/constants/constants.js @@ -358,6 +358,8 @@ let constants = EmberObject.extend({ Share: 'Share', SignIn: 'Sign In', Sort: 'Sort', + Space: 'Space', + Spaces: 'Spaces', Unassigned: 'Unassigned', Update: 'Update', Upload: 'Upload', diff --git a/gui/app/pods/folder/index/template.hbs b/gui/app/pods/folder/index/template.hbs index 8fad8fd4..cb78511f 100644 --- a/gui/app/pods/folder/index/template.hbs +++ b/gui/app/pods/folder/index/template.hbs @@ -1,6 +1,10 @@ -
+
+ {{#link-to "folders"}} + {{ui/ui-button themed=true uppercase=true icon=constants.Icon.ArrowLeft label=constants.Label.Spaces}} + {{/link-to}} +
{{folder/space-toolbar diff --git a/gui/app/pods/folder/settings/template.hbs b/gui/app/pods/folder/settings/template.hbs index 8e886027..7e3068d4 100644 --- a/gui/app/pods/folder/settings/template.hbs +++ b/gui/app/pods/folder/settings/template.hbs @@ -2,7 +2,7 @@
{{#link-to "folder.index"}} - {{ui/ui-button color=constants.Color.Gray outline=true uppercase=false icon=constants.Icon.ArrowLeft label=model.folder.name}} + {{ui/ui-button themed=true uppercase=false icon=constants.Icon.ArrowLeft label=model.folder.name}} {{/link-to}}
diff --git a/gui/app/pods/folders/template.hbs b/gui/app/pods/folders/template.hbs index 25b0058c..fe42d51a 100644 --- a/gui/app/pods/folders/template.hbs +++ b/gui/app/pods/folders/template.hbs @@ -4,10 +4,15 @@
{{#if (or session.isEditor session.isAdmin)}} - {{#ui/ui-toolbar dark=false light=true raised=true large=false bordered=true tooltip="New space"}} + {{#ui/ui-toolbar dark=false light=false raised=false large=false bordered=false}} {{#if session.isEditor}} - {{ui/ui-toolbar-icon icon=constants.Icon.Plus color=constants.Color.Green onClick=(action "onShowModal")}} - {{ui/ui-toolbar-label label="SPACE" color=constants.Color.Green onClick=(action "onShowModal")}} + {{ui/ui-toolbar-button icon=constants.Icon.Plus color=constants.Color.Green + label=constants.Label.Space + onClick=(action "onShowModal")}} + {{/if}} + {{#if session.isAdmin}} + {{ui/ui-toolbar-icon icon=constants.Icon.Settings color=constants.Color.Green + tooltip="Space settings" linkTo="customize"}} {{/if}} {{/ui/ui-toolbar}} {{/if}} diff --git a/gui/app/styles/core/layout/toolbar.scss b/gui/app/styles/core/layout/toolbar.scss index 3bb034c0..68442c35 100644 --- a/gui/app/styles/core/layout/toolbar.scss +++ b/gui/app/styles/core/layout/toolbar.scss @@ -85,6 +85,10 @@ font-weight: bold; background-color: $color-white; @extend .no-select; + + &:hover { + background-color: $theme-100; + } } } } @@ -108,12 +112,13 @@ flex-wrap: wrap; align-items: center; justify-content: space-between; - padding: 0 15px; + padding: 0 15px 0 20px; > div[class^="zone-"], > div[class*=" zone-"] { margin: 0; - // padding: 10px 10px; + padding: 0; align-items: center; + align-self: center; > .label { font-size: 1rem; diff --git a/gui/app/styles/core/ui/ui-popup.scss b/gui/app/styles/core/ui/ui-popup.scss index afe2f5d7..87d5350e 100644 --- a/gui/app/styles/core/ui/ui-popup.scss +++ b/gui/app/styles/core/ui/ui-popup.scss @@ -8,7 +8,7 @@ // -webkit-box-shadow: 0 20px 66px 0 rgba(34,48,73,0.2); // box-shadow: 0 20px 66px 0 rgba(34,48,73,0.2); - @include border-radius(5px); + @include border-radius(3px); > p { margin: 4px; @@ -36,6 +36,7 @@ &:hover { color: $color-black; background-color: map-get($yellow-shades, 100); + @include border-radius(3px); } } diff --git a/gui/app/styles/core/ui/ui-toolbar.scss b/gui/app/styles/core/ui/ui-toolbar.scss index 9802aa12..eedd5873 100644 --- a/gui/app/styles/core/ui/ui-toolbar.scss +++ b/gui/app/styles/core/ui/ui-toolbar.scss @@ -6,6 +6,7 @@ .dmz-toolbar { display: inline-flex; flex-basis: auto; + align-items: center; text-align: center; white-space: nowrap; border: 1px solid transparent; @@ -37,7 +38,7 @@ > .label { font-size: 14px; - font-weight: 500; + font-weight: 400; color: map-get($gray-shades, 600); padding: 0 0.5rem; align-self: center; @@ -85,7 +86,7 @@ > .label { display: inline-block; font-size: 1rem; - font-weight: 500; + font-weight: 400; color: $theme-500; padding: 0 0 0 0.5rem; vertical-align: text-bottom; @@ -114,6 +115,7 @@ white-space: nowrap; text-align: center; padding: 0.375rem 0.75rem; + margin: 0 0.5rem; font-weight: 500; font-size: 1rem; border: 1px solid transparent; @@ -122,7 +124,7 @@ @extend .no-select; @include border-radius(2px); outline: none; - background-color: map-get($green-shades, 600); + background-color: map-get($gray-shades, 600); color: $color-white; // @include button-shadow(); @@ -134,6 +136,7 @@ > .label { display: inline-block; + font-size: 1rem; margin: 0; padding: 0; } @@ -150,9 +153,12 @@ color: $color-white; &:hover { - background-color: map-get($green-shades, 700); + color: $color-white; + border-color: map-get($green-shades, 500); + background-color: map-get($green-shades, 500); } } + .button-green-light { @extend %button; background-color: map-get($green-shades, 200); diff --git a/gui/app/templates/components/document/document-toolbar.hbs b/gui/app/templates/components/document/document-toolbar.hbs index 7b33de8c..f4a51cdd 100644 --- a/gui/app/templates/components/document/document-toolbar.hbs +++ b/gui/app/templates/components/document/document-toolbar.hbs @@ -1,34 +1,7 @@ {{#ui/ui-toolbar dark=false light=false raised=false large=true bordered=false}} - {{#if (or showActivity showRevisions)}} - {{#ui/ui-toolbar-dropdown label="History" arrow=true}} - {{#attach-popover class="ember-attacher-popper" hideOn="clickout" showOn="click" isShown=false}} -
    - {{#if showActivity}} - {{#link-to "document.activity" class="item"}}Activity summary{{/link-to}} - {{/if}} - {{#if showRevisions}} - {{#link-to "document.revisions" class="item"}}Revisions{{/link-to}} - {{/if}} -
- {{/attach-popover}} - {{/ui/ui-toolbar-dropdown}} - - {{/if}} - - {{#ui/ui-toolbar-dropdown label="Export" arrow=true}} - {{#attach-popover class="ember-attacher-popper" hideOn="clickout" showOn="click" isShown=false}} -
    -
  • Print
    • -
  • Download HTML file
    • -
- {{/attach-popover}} - {{/ui/ui-toolbar-dropdown}} - - - {{#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"}} + {{#ui/ui-toolbar-dropdown label="Actions" arrow=true}} {{#attach-popover class="ember-attacher-popper" hideOn="clickout" showOn="click" isShown=false}}
  • Request contribution
    • @@ -42,26 +15,45 @@
  • Share via secure external link
{{/attach-popover}} - {{/ui/ui-toolbar-icon}} - + {{/ui/ui-toolbar-dropdown}} {{/if}} {{/if}} - {{#if (or pinState.isPinned session.authenticated permissions.documentAdd permissions.documentDelete)}} - {{#ui/ui-toolbar-dropdown label="More" arrow=true}} + {{#ui/ui-toolbar-dropdown label="Content" arrow=true}} + {{#attach-popover class="ember-attacher-popper" hideOn="clickout" showOn="click" isShown=false}} +
    + {{#if pinState.isPinned}} +
  • Remove bookmark
    • +
  • + {{else if session.authenticated}} +
  • Bookmark
    • +
  • + {{/if}} +
  • Print
    • +
  • Download
    • + {{#if permissions.documentAdd}} +
  • +
  • Publish template
    • + {{/if}} + {{#if permissions.documentDelete}} +
  • +
  • Delete
    • + {{/if}} + +
+ {{/attach-popover}} + {{/ui/ui-toolbar-dropdown}} + + + {{#if (or showActivity showRevisions)}} + {{#ui/ui-toolbar-dropdown label="History" arrow=true}} {{#attach-popover class="ember-attacher-popper" hideOn="clickout" showOn="click" isShown=false}}
    - {{#if pinState.isPinned}} -
  • Remove bookmark
    • - {{else if session.authenticated}} -
  • Bookmark
    • + {{#if showActivity}} + {{#link-to "document.activity" class="item"}}Activity summary{{/link-to}} {{/if}} - {{#if permissions.documentAdd}} -
  • Save as template
    • - {{/if}} - {{#if permissions.documentDelete}} -
  • -
  • Delete
    • + {{#if showRevisions}} + {{#link-to "document.revisions" class="item"}}Revisions{{/link-to}} {{/if}}
{{/attach-popover}} @@ -69,7 +61,6 @@ {{/if}} {{#if permissions.documentEdit}} - {{ui/ui-toolbar-icon icon=constants.Icon.Settings color=constants.Color.Green tooltip="Rename, Categories, Tag, Status, Workflow" linkTo="document.settings"}} {{/if}} diff --git a/gui/app/templates/components/folder/space-toolbar.hbs b/gui/app/templates/components/folder/space-toolbar.hbs index 40a1dc99..8b2e6071 100644 --- a/gui/app/templates/components/folder/space-toolbar.hbs +++ b/gui/app/templates/components/folder/space-toolbar.hbs @@ -1,37 +1,41 @@ {{#ui/ui-toolbar dark=false light=false raised=false large=false bordered=false}} - {{#if hasDocuments}} - {{ui/ui-toolbar-icon icon=constants.Icon.Export color=constants.Color.Gray - tooltip="Export as HTML" onClick=(action "onShowExport")}} + {{#if (or hasDocuments pinState.isPinned session.authenticated)}} + {{#ui/ui-toolbar-dropdown label="Content" arrow=true}} + {{#attach-popover class="ember-attacher-popper" hideOn="clickout" showOn="click" isShown=false}} +
+ {{#if pinState.isPinned}} +
  • Remove bookmark
    • + {{else if session.authenticated}} +
  • Bookmark
    • + {{/if}} + {{#if hasDocuments}} +
  • Download
    • + {{/if}} +
    + {{/attach-popover}} + {{/ui/ui-toolbar-dropdown}} {{/if}} - {{#if pinState.isPinned}} - {{ui/ui-toolbar-icon icon=constants.Icon.BookmarkDelete color=constants.Color.Yellow - tooltip="Remove view from bookmarks" onClick=(action "onUnpin")}} - {{else if session.authenticated}} - {{ui/ui-toolbar-icon icon=constants.Icon.BookmarkAdd color=constants.Color.Gray - tooltip="Bookmark this view" onClick=(action "onPin")}} + + {{#if permissions.documentAdd}} + {{#ui/ui-toolbar-dropdown label="New" arrow=true}} + {{#attach-popover class="ember-attacher-popper" hideOn="clickout" showOn="click" isShown=false}} +
    +
  • Blank canvas
    • + {{#if hasTemplates}} +
  • From template
    • + {{/if}} +
  • Import files
    • +
    + {{/attach-popover}} + {{/ui/ui-toolbar-dropdown}} {{/if}} {{#if (or permissions.spaceOwner permissions.spaceManage)}} - {{ui/ui-toolbar-icon icon=constants.Icon.Settings color=constants.Color.Gray + {{ui/ui-toolbar-icon icon=constants.Icon.Settings color=constants.Color.Green tooltip="Space settings" linkTo="folder.settings"}} {{/if}} {{/ui/ui-toolbar}} -{{#if permissions.documentAdd}} - {{#ui/ui-toolbar dark=false light=false raised=false large=false bordered=false}} - {{ui/ui-toolbar-button color=constants.Color.Green uppercase=false icon=constants.Icon.Plus label="CONTENT"}} - {{#attach-popover class="ember-attacher-popper" hideOn="clickout" showOn="click" isShown=false}} -
    - Blank canvas - {{#if hasTemplates}} - From template - {{/if}} - Import files -
    - {{/attach-popover}} - {{/ui/ui-toolbar}} -{{/if}} -