From f140e7ef77f5efe887f0b9e51ff35f10a2fb935b Mon Sep 17 00:00:00 2001 From: Harvey Kandola Date: Mon, 10 Dec 2018 18:22:11 +0000 Subject: [PATCH] Componentize UI elements: buttons, toolbars --- gui/app/components/ui/ui-button-gap.js | 24 ++++ gui/app/components/ui/ui-button.js | 61 +++++++++ gui/app/components/ui/ui-toolbar-icon.js | 54 ++++++++ gui/app/pods/theming/controller.js | 8 ++ gui/app/pods/theming/template.hbs | 117 +++++++++--------- gui/app/styles/core/vendor/izitoast.scss | 8 +- .../templates/components/ui/ui-button-gap.hbs | 0 gui/app/templates/components/ui/ui-button.hbs | 4 + .../components/ui/ui-toolbar-icon.hbs | 0 gui/config/optional-features.json | 3 +- 10 files changed, 215 insertions(+), 64 deletions(-) create mode 100644 gui/app/components/ui/ui-button-gap.js create mode 100644 gui/app/components/ui/ui-button.js create mode 100644 gui/app/components/ui/ui-toolbar-icon.js create mode 100644 gui/app/templates/components/ui/ui-button-gap.hbs create mode 100644 gui/app/templates/components/ui/ui-button.hbs create mode 100644 gui/app/templates/components/ui/ui-toolbar-icon.hbs diff --git a/gui/app/components/ui/ui-button-gap.js b/gui/app/components/ui/ui-button-gap.js new file mode 100644 index 00000000..bc8f0728 --- /dev/null +++ b/gui/app/components/ui/ui-button-gap.js @@ -0,0 +1,24 @@ +// 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: 'div', + classNames: [], + classNameBindings: ['calcClass'], + + where: 'right', + calcClass: computed(function() { + return `dmz-button-gap-${this.where}`; + }) +}); diff --git a/gui/app/components/ui/ui-button.js b/gui/app/components/ui/ui-button.js new file mode 100644 index 00000000..ab67a241 --- /dev/null +++ b/gui/app/components/ui/ui-button.js @@ -0,0 +1,61 @@ +// 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'], + + label: '', + icon: '', + color: '', + light: false, + themed: false, + + iconClass: '', + hasIcon: computed('iconClass', function() { + return this.iconClass.trim() != ''; + }), + + calcClass: computed(function() { + // Prepare icon class name + let ic = ''; + let icon = this.icon; + + if (icon === 'delete') ic = 'dicon-bin'; + if (icon === 'print') ic = 'dicon-print'; + if (icon === 'settings') ic = 'dicon-settings-gear'; + if (icon === 'plus') ic = 'dicon-e-add'; + if (icon === 'person') ic = 'dicon-single-01'; + this.iconClass = ic; + + // Prepare button class name + let bc = 'dmz-button'; + if (this.themed) { + bc += '-theme'; + } else { + bc += '-' + this.color; + } + + if (this.light) { + bc += '-light'; + } + + return bc; + }), + + click() { + this.onClick(); + } +}); diff --git a/gui/app/components/ui/ui-toolbar-icon.js b/gui/app/components/ui/ui-toolbar-icon.js new file mode 100644 index 00000000..824f5e27 --- /dev/null +++ b/gui/app/components/ui/ui-toolbar-icon.js @@ -0,0 +1,54 @@ +// 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: 'i', + classNames: ['dicon'], + classNameBindings: ['calcClass'], + + color: '', + icon: '', + + calcClass: computed(function() { + let c = ''; + let icon = this.icon; + + switch (this.color) { + case 'red': + c += 'red'; + break; + case 'yellow': + c += 'yellow'; + break; + case 'green': + c += 'green'; + break; + } + c += ' '; + + if (icon === 'delete') c += 'dicon-bin'; + if (icon === 'print') c += 'dicon-print'; + if (icon === 'settings') c += 'dicon-settings-gear'; + if (icon === 'plus') c += 'dicon-e-add'; + if (icon === 'person') c += 'dicon-single-01'; + c += ' '; + + + return c.trim(); + }), + + click() { + this.onClick(); + } +}); diff --git a/gui/app/pods/theming/controller.js b/gui/app/pods/theming/controller.js index abf582f0..9179bd1f 100644 --- a/gui/app/pods/theming/controller.js +++ b/gui/app/pods/theming/controller.js @@ -29,6 +29,14 @@ export default Controller.extend(Notifier, { onError() { this.notifyError('Unable to save changes'); + }, + + onButtonClick(v) { + console.log(v); // eslint-disable-line no-console + }, + + onToolbarClick(v) { + console.log(v); // eslint-disable-line no-console } } }); diff --git a/gui/app/pods/theming/template.hbs b/gui/app/pods/theming/template.hbs index 516eca31..9108a35b 100644 --- a/gui/app/pods/theming/template.hbs +++ b/gui/app/pods/theming/template.hbs @@ -6,94 +6,93 @@

Bring to the table win-win survival strategies to ensure proactive domination. At the end of the day, going forward, a new normal that has evolved from generation X is on the runway heading towards a streamlined cloud solution. User generated content in real-time will have multiple touchpoints for offshoring.

{{/layout/master-sidebar}} {{#layout/master-content}} - -
- + {{ui/ui-button themed=true label="save" onClick=(action "onButtonClick" 1)}} + {{ui/ui-button-gap}} + {{ui/ui-button themed=true light=true label="update" onClick=(action "onButtonClick" 2)}} + {{ui/ui-button-gap}}

- -
- -
- -
- -
+ {{ui/ui-button color="green" label="save" onClick=(action "onSuccess")}} + {{ui/ui-button-gap}} + {{ui/ui-button color="yellow" label="update" onClick=(action "onInfo")}} + {{ui/ui-button-gap}} + {{ui/ui-button color="gray" label="Cancel" onClick=(action "onWarn")}} + {{ui/ui-button-gap}} + {{ui/ui-button color="red" label="deletE" onClick=(action "onError")}} + {{ui/ui-button-gap}}

- -
- -
- -
- -
+ {{ui/ui-button color="green" light=true label="save" onClick=(action "onSuccess")}} + {{ui/ui-button-gap}} + {{ui/ui-button color="yellow" light=true label="update" onClick=(action "onInfo")}} + {{ui/ui-button-gap}} + {{ui/ui-button color="gray" light=true label="Cancel" onClick=(action "onWarn")}} + {{ui/ui-button-gap}} + {{ui/ui-button color="red" light=true label="deletE" onClick=(action "onError")}} + {{ui/ui-button-gap}}

- -
- -
- -
- -
- -
+ {{ui/ui-button color="green" light=true icon="plus" label="save" onClick=(action "onSuccess")}} + {{ui/ui-button-gap}} + {{ui/ui-button color="yellow" light=true icon="settings" label="update" onClick=(action "onInfo")}} + {{ui/ui-button-gap}} + {{ui/ui-button color="gray" light=true icon="print" label="Cancel" onClick=(action "onWarn")}} + {{ui/ui-button-gap}} + {{ui/ui-button color="red" light=true icon="delete" label="deletE" onClick=(action "onError")}} + {{ui/ui-button-gap}}

{{#ui/ui-toolbar dark=false light=false raised=false large=false bordered=false}} - - - - - + {{ui/ui-toolbar-icon icon="delete" color="red" onClick=(action "onToolbarClick" 1)}} + {{ui/ui-toolbar-icon icon="print" color="yellow" onClick=(action "onToolbarClick" 2)}} + {{ui/ui-toolbar-icon icon="settings" onClick=(action "onToolbarClick" 3)}} + {{ui/ui-toolbar-icon icon="print" color="green" onClick=(action "onToolbarClick" 4)}} + {{ui/ui-toolbar-icon icon="person" color="" onClick=(action "onToolbarClick" 5)}} {{/ui/ui-toolbar}}

{{#ui/ui-toolbar dark=false light=true raised=true large=false bordered=true}} - - - - - + {{ui/ui-toolbar-icon icon="delete" color="red" onClick=(action "onToolbarClick" 1)}} + {{ui/ui-toolbar-icon icon="print" color="yellow" onClick=(action "onToolbarClick" 2)}} + {{ui/ui-toolbar-icon icon="settings" onClick=(action "onToolbarClick" 3)}} + {{ui/ui-toolbar-icon icon="print" color="green" onClick=(action "onToolbarClick" 4)}} + {{ui/ui-toolbar-icon icon="person" color="" onClick=(action "onToolbarClick" 5)}} {{/ui/ui-toolbar}}

{{#ui/ui-toolbar dark=true light=false raised=true large=false bordered=true}} - - - - - + {{ui/ui-toolbar-icon icon="delete" color="red" onClick=(action "onToolbarClick" 1)}} + {{ui/ui-toolbar-icon icon="print" color="yellow" onClick=(action "onToolbarClick" 2)}} + {{ui/ui-toolbar-icon icon="settings" onClick=(action "onToolbarClick" 3)}} + {{ui/ui-toolbar-icon icon="print" color="green" onClick=(action "onToolbarClick" 4)}} + {{ui/ui-toolbar-icon icon="person" color="" onClick=(action "onToolbarClick" 5)}} {{/ui/ui-toolbar}}

{{#ui/ui-toolbar dark=false light=false raised=false large=true bordered=false}} - - - - - + {{ui/ui-toolbar-icon icon="delete" color="red" onClick=(action "onToolbarClick" 1)}} + {{ui/ui-toolbar-icon icon="print" color="yellow" onClick=(action "onToolbarClick" 2)}} + {{ui/ui-toolbar-icon icon="settings" onClick=(action "onToolbarClick" 3)}} + {{ui/ui-toolbar-icon icon="print" color="green" onClick=(action "onToolbarClick" 4)}} + {{ui/ui-toolbar-icon icon="person" color="" onClick=(action "onToolbarClick" 5)}} {{/ui/ui-toolbar}}

{{#ui/ui-toolbar dark=false light=true raised=true large=true bordered=true}} - - - - - + {{ui/ui-toolbar-icon icon="delete" color="red" onClick=(action "onToolbarClick" 1)}} + {{ui/ui-toolbar-icon icon="print" color="yellow" onClick=(action "onToolbarClick" 2)}} + {{ui/ui-toolbar-icon icon="settings" onClick=(action "onToolbarClick" 3)}} + {{ui/ui-toolbar-icon icon="print" color="green" onClick=(action "onToolbarClick" 4)}} + {{ui/ui-toolbar-icon icon="person" color="" onClick=(action "onToolbarClick" 5)}} {{/ui/ui-toolbar}}

{{#ui/ui-toolbar dark=true light=false raised=true large=true bordered=true}} - - - - - + {{ui/ui-toolbar-icon icon="delete" color="red" onClick=(action "onToolbarClick" 1)}} + {{ui/ui-toolbar-icon icon="print" color="yellow" onClick=(action "onToolbarClick" 2)}} + {{ui/ui-toolbar-icon icon="settings" onClick=(action "onToolbarClick" 3)}} + {{ui/ui-toolbar-icon icon="print" color="green" onClick=(action "onToolbarClick" 4)}} + {{ui/ui-toolbar-icon icon="person" color="" onClick=(action "onToolbarClick" 5)}} {{/ui/ui-toolbar}}

diff --git a/gui/app/styles/core/vendor/izitoast.scss b/gui/app/styles/core/vendor/izitoast.scss index 738abfa8..4eb8bcef 100644 --- a/gui/app/styles/core/vendor/izitoast.scss +++ b/gui/app/styles/core/vendor/izitoast.scss @@ -1747,11 +1747,11 @@ border-color: map-get($yellow-shades, 300); } .iziToast.iziToast-color-blue { - background: rgba(157,222,255,0.9); - border-color: rgba(157,222,255,0.9); + background: map-get($gray-shades, 500); + border-color: map-get($gray-shades, 500); } .iziToast.iziToast-color-green { - background: map-get($green-shades, 300); - border-color: map-get($green-shades, 300); + background: map-get($green-shades, 400); + border-color: map-get($green-shades, 400); } diff --git a/gui/app/templates/components/ui/ui-button-gap.hbs b/gui/app/templates/components/ui/ui-button-gap.hbs new file mode 100644 index 00000000..e69de29b diff --git a/gui/app/templates/components/ui/ui-button.hbs b/gui/app/templates/components/ui/ui-button.hbs new file mode 100644 index 00000000..dbb468ab --- /dev/null +++ b/gui/app/templates/components/ui/ui-button.hbs @@ -0,0 +1,4 @@ +{{#if hasIcon}} + +{{/if}} +
{{label}}
\ No newline at end of file diff --git a/gui/app/templates/components/ui/ui-toolbar-icon.hbs b/gui/app/templates/components/ui/ui-toolbar-icon.hbs new file mode 100644 index 00000000..e69de29b diff --git a/gui/config/optional-features.json b/gui/config/optional-features.json index 19805d62..062be1d7 100644 --- a/gui/config/optional-features.json +++ b/gui/config/optional-features.json @@ -1,4 +1,5 @@ { "application-template-wrapper": false, - "jquery-integration": true + "jquery-integration": true, + "template-only-glimmer-components": true }