diff --git a/gui/app/components/ui/ui-toolbar-button.js b/gui/app/components/ui/ui-toolbar-button.js new file mode 100644 index 00000000..c0faaf31 --- /dev/null +++ b/gui/app/components/ui/ui-toolbar-button.js @@ -0,0 +1,84 @@ +// Copyright 2016 Documize Inc. . 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 . +// +// https://documize.com + +import { computed } from '@ember/object'; +import Component from '@ember/component'; + +export default Component.extend({ + tagName: 'button', + classNames: [], + classNameBindings: ['calcClass'], + attributeBindings: ['calcAttrs:data-dismiss', 'submitAttrs:type'], + label: '', + icon: '', + color: '', + light: false, + themed: false, + dismiss: false, + truncate: false, + stretch: false, + uppercase: true, + iconClass: '', + hasIcon: computed('iconClass', function() { + return this.iconClass.trim() != ''; + }), + + calcClass: computed(function() { + // Prepare icon class name + this.iconClass = this.icon; + + // Prepare button class name + let bc = 'button'; + + if (this.themed) { + bc += 'theme'; + } else { + bc += '-' + this.color; + } + + if (this.light) { + bc += '-light'; + } + + if (!this.uppercase) { + bc += ' text-case-normal'; + } + + if (this.truncate) { + bc += ' text-truncate'; + } + + if (this.stretch) { + bc += ' max-width-100 text-left'; + } + + return bc; + }), + + calcAttrs: computed(function() { + if (this.dismiss) { + return 'modal'; + } + + return null; + }), + + submitAttrs: computed(function() { + return this.submit ? "submit": null; + }), + + click(e) { + if (!_.isUndefined(this.onClick)) { + e.preventDefault(); + this.onClick(e); + } + } +}); diff --git a/gui/app/components/ui/ui-toolbar-divider.js b/gui/app/components/ui/ui-toolbar-divider.js new file mode 100644 index 00000000..78f18a93 --- /dev/null +++ b/gui/app/components/ui/ui-toolbar-divider.js @@ -0,0 +1,17 @@ +// Copyright 2016 Documize Inc. . 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 . +// +// https://documize.com + +import Component from '@ember/component'; + +export default Component.extend({ + tagName: 'div', + classNames: ['divider'], +}); diff --git a/gui/app/components/ui/ui-toolbar-dropdown.js b/gui/app/components/ui/ui-toolbar-dropdown.js new file mode 100644 index 00000000..b79e0327 --- /dev/null +++ b/gui/app/components/ui/ui-toolbar-dropdown.js @@ -0,0 +1,55 @@ +// Copyright 2016 Documize Inc. . 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 . +// +// https://documize.com + +import { computed } from '@ember/object'; +import Component from '@ember/component'; + +export default Component.extend({ + classNames: [], + classNameBindings: ['calcClass'], + label: '', + color: '', + arrow: true, + iconClass: '', + + calcClass: computed(function() { + // Prepare icon class name + this.iconClass = this.get('constants').Icon.TriangleSmallDown; + + // Prepare button class name + let bc = 'dropdown'; + + if (!this.themed) { + bc += ' dropdown-' + this.color; + } + + return bc; + }), + + calcAttrs: computed(function() { + if (this.dismiss) { + return 'modal'; + } + + return null; + }), + + submitAttrs: computed(function() { + return this.submit ? "submit": null; + }), + + click(e) { + if (!_.isUndefined(this.onClick)) { + e.preventDefault(); + this.onClick(e); + } + } +}); diff --git a/gui/app/components/ui/ui-toolbar.js b/gui/app/components/ui/ui-toolbar.js index 85f69921..2662336a 100644 --- a/gui/app/components/ui/ui-toolbar.js +++ b/gui/app/components/ui/ui-toolbar.js @@ -15,12 +15,10 @@ export default Component.extend({ classNames: ['dmz-toolbar', 'non-printable'], classNameBindings: ['raised:dmz-toolbar-raised', - 'large:dmz-toolbar-large', 'bordered:dmz-toolbar-bordered', 'light:dmz-toolbar-light', 'dark:dmz-toolbar-dark'], raised: false, - large: false, bordered: false, dark: false, light: false, diff --git a/gui/app/pods/document/index/template.hbs b/gui/app/pods/document/index/template.hbs index e64b3fe6..35e8f0fe 100644 --- a/gui/app/pods/document/index/template.hbs +++ b/gui/app/pods/document/index/template.hbs @@ -1,8 +1,8 @@
- {{#link-to "folder.index" folder.id folder.slug class="no-print"}} - {{ui/ui-button color=constants.Color.Gray outline=true uppercase=false icon=constants.Icon.ArrowLeft label=folder.name}} + {{#link-to "folder.index" folder.id folder.slug}} + {{ui/ui-button themed=true uppercase=false icon=constants.Icon.ArrowLeft label=folder.name}} {{/link-to}}
diff --git a/gui/app/pods/document/revisions/template.hbs b/gui/app/pods/document/revisions/template.hbs index 44adb1b7..e418f847 100644 --- a/gui/app/pods/document/revisions/template.hbs +++ b/gui/app/pods/document/revisions/template.hbs @@ -2,7 +2,7 @@
{{#link-to "document.index"}} - {{ui/ui-button color=constants.Color.Gray outline=true uppercase=false icon=constants.Icon.ArrowLeft label=document.name}} + {{ui/ui-button themed=true uppercase=false icon=constants.Icon.ArrowLeft label=document.name}} {{/link-to}}
diff --git a/gui/app/pods/document/section/template.hbs b/gui/app/pods/document/section/template.hbs index b20ba564..3e4fa997 100644 --- a/gui/app/pods/document/section/template.hbs +++ b/gui/app/pods/document/section/template.hbs @@ -2,7 +2,7 @@
{{#link-to "document.index" model.folder.id model.folder.slug model.document.id model.document.slug}} - {{ui/ui-button color=constants.Color.Gray outline=true uppercase=false icon=constants.Icon.ArrowLeft label=model.document.name}} + {{ui/ui-button themed=true uppercase=false icon=constants.Icon.ArrowLeft label=model.document.name}} {{/link-to}}
diff --git a/gui/app/pods/document/settings/template.hbs b/gui/app/pods/document/settings/template.hbs index db153bd6..c40d4ce9 100644 --- a/gui/app/pods/document/settings/template.hbs +++ b/gui/app/pods/document/settings/template.hbs @@ -2,7 +2,7 @@
{{#link-to "document.index"}} - {{ui/ui-button color=constants.Color.Gray outline=true uppercase=false icon=constants.Icon.ArrowLeft label=model.document.name}} + {{ui/ui-button themed=true uppercase=false icon=constants.Icon.ArrowLeft label=model.document.name}} {{/link-to}}
diff --git a/gui/app/styles/core/layout/all.scss b/gui/app/styles/core/layout/all.scss index bee0bd2b..204e3a58 100644 --- a/gui/app/styles/core/layout/all.scss +++ b/gui/app/styles/core/layout/all.scss @@ -2,4 +2,5 @@ @import "spacing.scss"; @import "headings.scss"; @import "layout.scss"; +@import "toolbar.scss"; @import "sidebar.scss"; diff --git a/gui/app/styles/core/layout/layout.scss b/gui/app/styles/core/layout/layout.scss index d61f0a21..25516af1 100644 --- a/gui/app/styles/core/layout/layout.scss +++ b/gui/app/styles/core/layout/layout.scss @@ -1,130 +1,3 @@ -// ***************************************************************** -// Define mobile-first layout for top navigation bar and toolbar. -// ***************************************************************** -.master-navigation { - display: block; - height: auto; - width: 100%; - - > .navbar { - display: block; - height: 40px; - width: 100%; - background-color: $theme-500; - text-align: center; - padding: 0; - z-index: 999; - - > .container { - display: flex; - flex-grow: 1; - flex-direction: row; - align-items: center; - justify-content: space-between; - flex-wrap: wrap; - width: 100%; - padding: 0 20px; - - > .options { - > .selected { - > .dicon { - color: $color-white !important; - } - } - - > .option { - cursor: pointer; - display: inline-block; - - > .dicon { - display: inline-block; - color: $theme-300; - font-size: 20px; - padding: 10px 10px; - } - - &:hover { - > .dicon { - color: $theme-400 !important; - } - } - } - - > a.option { - color: $theme-300; - - &:hover { - color: $color-white; - } - } - - > .invalid-plan { - > .dicon { - color: map-get($yellow-shades, 600) !important; - } - } - - > .user-gravatar-container { - display: inline-block; - margin: 0; - padding: 7px 10px; - vertical-align: top; - - > .user-gravatar { - display: inline-block; - cursor: pointer; - position: relative; - width: 26px; - height: 26px; - line-height: 26px; - padding: 0; - border-radius: 50%; - font-size: 0.85rem; - text-align: center; - color: $theme-500; - font-weight: bold; - background-color: $color-white; - @extend .no-select; - } - } - } - } - } - - > .toolbar { - display: block; - height: auto; - height: 50px; - width: 100%; - background-color: $color-sidebar; - background-color: $theme-100; - text-align: center; - padding: 0; - z-index: 999; - - > .container { - display: flex; - flex-grow: 1; - flex-direction: row; - align-items: center; - justify-content: space-between; - flex-wrap: wrap; - width: 100%; - padding: 0 10px; - - > div[class^="zone-"], div[class*=" zone-"] { - margin: 0; - padding: 10px 10px; - justify-content: center; - - > .label { - font-size: 1rem; - } - } - } - } -} - // ***************************************************************** // Define mobile-first layout for main content zone with a sidebar. // ***************************************************************** diff --git a/gui/app/styles/core/layout/toolbar.scss b/gui/app/styles/core/layout/toolbar.scss new file mode 100644 index 00000000..3bb034c0 --- /dev/null +++ b/gui/app/styles/core/layout/toolbar.scss @@ -0,0 +1,124 @@ +// ***************************************************************** +// Define mobile-first layout for top navigation bar and toolbar. +// ***************************************************************** +.master-navigation { + display: block; + height: auto; + width: 100%; + + > .navbar { + display: block; + height: 40px; + width: 100%; + background-color: $theme-500; + text-align: center; + padding: 0; + z-index: 999; + + > .container { + display: flex; + flex-grow: 1; + flex-direction: row; + align-items: center; + justify-content: space-between; + flex-wrap: wrap; + width: 100%; + padding: 0 20px; + + > .options { + > .selected { + > .dicon { + color: $color-white !important; + } + } + + > .option { + cursor: pointer; + display: inline-block; + + > .dicon { + display: inline-block; + color: $theme-300; + font-size: 20px; + padding: 10px 10px; + } + + &:hover { + > .dicon { + color: $theme-400 !important; + } + } + } + + > a.option { + color: $theme-300; + + &:hover { + color: $color-white; + } + } + + > .invalid-plan { + > .dicon { + color: map-get($yellow-shades, 600) !important; + } + } + + > .user-gravatar-container { + display: inline-block; + margin: 0; + padding: 7px 10px; + vertical-align: top; + + > .user-gravatar { + display: inline-block; + cursor: pointer; + position: relative; + width: 26px; + height: 26px; + line-height: 26px; + padding: 0; + border-radius: 50%; + font-size: 0.85rem; + text-align: center; + color: $theme-500; + font-weight: bold; + background-color: $color-white; + @extend .no-select; + } + } + } + } + } + + > .toolbar { + display: block; + width: 100%; + background-color: $color-sidebar; + background-color: $theme-100; + padding: 0; + // z-index: 999; + + > .container { + height: 50px; + width: 100%; + display: flex; + flex-grow: 1; + flex-direction: row; + flex-wrap: wrap; + align-items: center; + justify-content: space-between; + padding: 0 15px; + + > div[class^="zone-"], > div[class*=" zone-"] { + margin: 0; + // padding: 10px 10px; + align-items: center; + + > .label { + font-size: 1rem; + } + } + } + } +} diff --git a/gui/app/styles/core/ui/ui-button.scss b/gui/app/styles/core/ui/ui-button.scss index 49252882..f5d74346 100644 --- a/gui/app/styles/core/ui/ui-button.scss +++ b/gui/app/styles/core/ui/ui-button.scss @@ -179,12 +179,12 @@ .dmz-button-theme { @extend %dmz-button; - background-color: $theme-800; + background-color: $theme-500; color: $color-white; @include button-shadow(); &:hover { - background-color: $theme-600; + background-color: $theme-700; } } .dmz-button-theme-light { diff --git a/gui/app/styles/core/ui/ui-popup.scss b/gui/app/styles/core/ui/ui-popup.scss index 4baf768c..afe2f5d7 100644 --- a/gui/app/styles/core/ui/ui-popup.scss +++ b/gui/app/styles/core/ui/ui-popup.scss @@ -40,16 +40,16 @@ } > .header { - color: map-get($gray-shades, 800); - background-color: map-get($gray-shades, 300); + color: $color-white; + background-color: $theme-500; font-size: 1rem; font-weight: 600; cursor: auto; &:hover { - color: map-get($gray-shades, 800); - background-color: map-get($gray-shades, 300); - } + color: $color-white; + background-color: $theme-500; + } } > .divider { diff --git a/gui/app/styles/core/ui/ui-toolbar.scss b/gui/app/styles/core/ui/ui-toolbar.scss index a01d8208..9802aa12 100644 --- a/gui/app/styles/core/ui/ui-toolbar.scss +++ b/gui/app/styles/core/ui/ui-toolbar.scss @@ -1,5 +1,6 @@ %toolbar-shadow { box-shadow: 1px 1px 3px 0px map-get($gray-shades, 200); + box-shadow: none; } .dmz-toolbar { @@ -7,27 +8,29 @@ flex-basis: auto; text-align: center; white-space: nowrap; - vertical-align: middle; border: 1px solid transparent; - height: 30px; width: auto; padding: 6px 10px; - line-height: 24px; @extend .no-select; - @include border-radius(6px); + @include border-radius(4px); > .dicon { - font-size: 16px; - font-weight: 500; - color: map-get($gray-shades, 600); + font-size: 20px; + color: $theme-500; padding: 0 0.5rem; cursor: pointer; &:hover { - color: map-get($gray-shades, 700); + color: $theme-400; } } + > .divider { + margin: 0 6px; + width: 1px; + background-color: $theme-200; + } + > .icon-selected { color: map-get($yellow-shades, 600); } @@ -68,17 +71,137 @@ color: map-get($green-shades, 600); } } -} -.dmz-toolbar-large { - height: 40px; - padding: 9px 10px; - line-height: 33px; + > .dropdown { + display: inline-block; + cursor: pointer; - > .dicon { - font-size: 20px; + &:hover { + > .label, > .dicon { + color: $theme-400; + } + } + + > .label { + display: inline-block; + font-size: 1rem; + font-weight: 500; + color: $theme-500; + padding: 0 0 0 0.5rem; + vertical-align: text-bottom; + } + + > .dicon { + font-size: 20px; + color: $theme-500; + padding: 0 0.3rem 0 0; + vertical-align: bottom; + } + } + + > .dropdown-green { + > .label, > .dicon { + color: map-get($green-shades, 500); + + &:hover { + color: map-get($green-shades, 600); + } + } + } + + > %button { + display: inline-block; + white-space: nowrap; + text-align: center; + padding: 0.375rem 0.75rem; font-weight: 500; - padding: 0 0.5rem; + font-size: 1rem; + border: 1px solid transparent; + text-transform: uppercase; + cursor: pointer; + @extend .no-select; + @include border-radius(2px); + outline: none; + background-color: map-get($green-shades, 600); + color: $color-white; + // @include button-shadow(); + + > .dicon { + font-size: 1rem; + padding: 0.2rem 0.4rem 0 0; + font-weight: 500; + } + + > .label { + display: inline-block; + margin: 0; + padding: 0; + } + + &:hover { + color: map-get($gray-shades, 800); + border-color: map-get($gray-shades, 500); + } + } + + .button-green { + @extend %button; + background-color: map-get($green-shades, 600); + color: $color-white; + + &:hover { + background-color: map-get($green-shades, 700); + } + } + .button-green-light { + @extend %button; + background-color: map-get($green-shades, 200); + color: map-get($green-shades, 700); + border: 1px solid map-get($green-shades, 300); + + &:hover { + background-color: map-get($green-shades, 300); + } + } + + .button-yellow { + @extend %button; + background-color: map-get($yellow-shades, 600); + color: $color-white; + + &:hover { + background-color: map-get($yellow-shades, 700); + } + } + .button-yellow-light { + @extend %button; + background-color: map-get($yellow-shades, 200); + color: map-get($yellow-shades, 700); + border: 1px solid map-get($yellow-shades, 300); + + &:hover { + background-color: map-get($yellow-shades, 300); + } + } + + .button-red { + @extend %button; + background-color: map-get($red-shades, 600); + color: $color-white; + + &:hover { + background-color: map-get($red-shades, 700); + } + } + .button-red-light { + @extend %button; + background-color: map-get($red-shades, 100); + color: map-get($red-shades, 700); + border: 1px solid map-get($red-shades, 200); + + &:hover { + background-color: map-get($red-shades, 200); + } } } @@ -88,6 +211,7 @@ .dmz-toolbar-light { background-color: map-get($gray-shades, 100); + background-color: $color-white; } .dmz-toolbar-raised { diff --git a/gui/app/templates/components/document/document-toolbar.hbs b/gui/app/templates/components/document/document-toolbar.hbs index 7cbc1f2e..ddd2f075 100644 --- a/gui/app/templates/components/document/document-toolbar.hbs +++ b/gui/app/templates/components/document/document-toolbar.hbs @@ -1,14 +1,53 @@ -
- {{#ui/ui-toolbar dark=false light=false raised=false large=true bordered=false}} - {{#ui/ui-toolbar-icon icon=constants.Icon.Export color=constants.Color.Gray tooltip="Print, PDF, Export"}} +{{#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}}
    -
  • Export as HTML file
    • -
  • Print...
    • + {{#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-icon}} + {{/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}} +
    +
  • Send to 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"}} + {{#attach-popover class="ember-attacher-popper" hideOn="clickout" showOn="click" isShown=false}} +
    +
  • Request contribution
    • +
  • Request feedback
    • +
  • Request read
    • + {{#if (eq document.lifecycle constants.Lifecycle.Draft)}} +
  • +
  • Request publication
    • + {{/if}} +
  • +
  • Share via secure external link
    • +
+ {{/attach-popover}} + {{/ui/ui-toolbar-icon}} + + {{/if}} + {{/if}} + + {{#if (or pinState.isPinned session.authenticated)}} {{#if pinState.isPinned}} {{ui/ui-toolbar-icon icon=constants.Icon.BookmarkDelete color=constants.Color.Yellow tooltip="Remove from bookmarks" onClick=(action "onUnpin")}} @@ -16,57 +55,24 @@ {{ui/ui-toolbar-icon icon=constants.Icon.BookmarkAdd color=constants.Color.Gray tooltip="Bookmark" onClick=(action "onPin")}} {{/if}} - - {{#if permissions.documentEdit}} - {{ui/ui-toolbar-icon icon=constants.Icon.Settings color=constants.Color.Gray - tooltip="Rename, Categories, Tag, Status, Workflow" linkTo="document.settings"}} - {{/if}} - {{/ui/ui-toolbar}} - - {{#if hasToolbar}} - {{#ui/ui-toolbar dark=false light=true raised=true large=true bordered=true}} - {{#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"}} - {{#attach-popover class="ember-attacher-popper" hideOn="clickout" showOn="click" isShown=false}} -
    -
  • Request contribution
    • -
  • Request feedback
    • -
  • Request read
    • - {{#if (eq document.lifecycle constants.Lifecycle.Draft)}} -
  • -
  • Request publication
    • - {{/if}} -
  • -
  • Share via secure external link
    • -
- {{/attach-popover}} - {{/ui/ui-toolbar-icon}} - {{/if}} - {{/if}} - - {{#if showActivity}} - {{ui/ui-toolbar-icon icon=constants.Icon.Pulse color=constants.Color.Gray - tooltip="See content activity" linkTo="document.activity"}} - {{/if}} - - {{#if showRevisions}} - {{ui/ui-toolbar-icon icon=constants.Icon.TimeBack color=constants.Color.Gray - tooltip="Revisions and rollback" linkTo="document.revisions"}} - {{/if}} - - {{#if permissions.documentAdd}} - {{ui/ui-toolbar-icon icon=constants.Icon.Copy color=constants.Color.Gray - tooltip="Save as template" onClick=(action "onShowTemplateModal")}} - {{/if}} - - {{#if permissions.documentDelete}} - {{ui/ui-toolbar-icon icon=constants.Icon.Delete color=constants.Color.Gray - tooltip="Delete" onClick=(action "onShowDeleteModal")}} - {{/if}} - {{/ui/ui-toolbar}} {{/if}} -
+ + {{#if permissions.documentAdd}} + {{ui/ui-toolbar-icon icon=constants.Icon.Copy + tooltip="Save as template" onClick=(action "onShowTemplateModal")}} + {{/if}} + + {{#if permissions.documentDelete}} + {{ui/ui-toolbar-icon icon=constants.Icon.Delete + tooltip="Delete" onClick=(action "onShowDeleteModal")}} + {{/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}} +{{/ui/ui-toolbar}}