Docker/documize
Docker/documize
1
0
Fork 0
mirror of https://github.com/documize/community.git synced 2025-07-19 13:19:43 +02:00
Code Releases Activity

Componentize UI elements: buttons, toolbars

Browse source
This commit is contained in:
Harvey Kandola 2018-12-10 18:22:11 +00:00
parent adbd00bdd7
commit f140e7ef77
10 changed files with 215 additions and 64 deletions
Download patch file Download diff file Expand all files Collapse all files

24
gui/app/components/ui/ui-button-gap.js Normal file
View file

@ -0,0 +1,24 @@
// 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 { 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}`;
})
});

61
gui/app/components/ui/ui-button.js Normal file
View file

@ -0,0 +1,61 @@
// 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 { 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();
}
});

54
gui/app/components/ui/ui-toolbar-icon.js Normal file
View file

@ -0,0 +1,54 @@
// 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 { 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();
}
});

8
gui/app/pods/theming/controller.js
View file

@ -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
}
}
});

117
gui/app/pods/theming/template.hbs
View file

@ -6,94 +6,93 @@
<p>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.</p>
{{/layout/master-sidebar}}
{{#layout/master-content}}
<button class="dmz-button-theme">save</button>
<div class="dmz-button-gap-right" />
<button class="dmz-button-theme-light">update</button>
{{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}}
<br>
<br>
<button class="dmz-button-green" {{action "onSuccess"}}>save</button>
<div class="dmz-button-gap-right" />
<button class="dmz-button-yellow" {{action "onInfo"}}>update</button>
<div class="dmz-button-gap-right" />
<button class="dmz-button-gray" {{action "onWarn"}}>cancel</button>
<div class="dmz-button-gap-right" />
<button class="dmz-button-red" {{action "onError"}}>delete</button>
<div class="dmz-button-gap-right" />
{{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}}
<br>
<br>
<button class="dmz-button-green-light"><div class="label">Save</div></button>
<div class="dmz-button-gap-right" />
<button class="dmz-button-yellow-light"><div class="label">Update</div></button>
<div class="dmz-button-gap-right" />
<button class="dmz-button-gray-light"><div class="label">cancel</div></button>
<div class="dmz-button-gap-right" />
<button class="dmz-button-red-light"><div class="label">Delete</div></button>
<div class="dmz-button-gap-right" />
{{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}}
<br>
<br>
<button class="dmz-button-green-light"><i class="dicon dicon-e-add"/><div class="label">space</div></button>
<div class="dmz-button-gap-right" />
<button class="dmz-button-green-light"><i class="dicon dicon-e-add"/><div class="label">content</div></button>
<div class="dmz-button-gap-right" />
<button class="dmz-button-yellow-light"><i class="dicon dicon-e-add"/><div class="label">user</div></button>
<div class="dmz-button-gap-right" />
<button class="dmz-button-gray-light"><i class="dicon dicon-e-add"/><div class="label">group</div></button>
<div class="dmz-button-gap-right" />
<button class="dmz-button-red-light"><i class="dicon dicon-bin"/><div class="label">delete</div></button>
<div class="dmz-button-gap-right" />
{{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}}
<br>
<br>
{{#ui/ui-toolbar dark=false light=false raised=false large=false bordered=false}}
<i class="dicon dicon-bin red"/>
<i class="dicon dicon-print yellow"/>
<i class="dicon dicon-settings-gear"/>
<i class="dicon dicon-print green"/>
<i class="dicon dicon-single-01"/>
{{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}}
<br>
<br>
{{#ui/ui-toolbar dark=false light=true raised=true large=false bordered=true}}
<i class="dicon dicon-bin red"/>
<i class="dicon dicon-print yellow"/>
<i class="dicon dicon-settings-gear"/>
<i class="dicon dicon-print green"/>
<i class="dicon dicon-single-01"/>
{{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}}
<br>
<br>
{{#ui/ui-toolbar dark=true light=false raised=true large=false bordered=true}}
<i class="dicon dicon-bin red"/>
<i class="dicon dicon-print yellow"/>
<i class="dicon dicon-settings-gear"/>
<i class="dicon dicon-print green"/>
<i class="dicon dicon-single-01"/>
{{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}}
<br>
<br>
{{#ui/ui-toolbar dark=false light=false raised=false large=true bordered=false}}
<i class="dicon dicon-bin red"/>
<i class="dicon dicon-print yellow"/>
<i class="dicon dicon-settings-gear"/>
<i class="dicon dicon-print green"/>
<i class="dicon dicon-single-01"/>
{{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}}
<br>
<br>
{{#ui/ui-toolbar dark=false light=true raised=true large=true bordered=true}}
<i class="dicon dicon-bin red"/>
<i class="dicon dicon-print yellow"/>
<i class="dicon dicon-settings-gear"/>
<i class="dicon dicon-print green"/>
<i class="dicon dicon-single-01"/>
{{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}}
<br>
<br>
{{#ui/ui-toolbar dark=true light=false raised=true large=true bordered=true}}
<i class="dicon dicon-bin red"/>
<i class="dicon dicon-print yellow"/>
<i class="dicon dicon-settings-gear"/>
<i class="dicon dicon-print green"/>
<i class="dicon dicon-single-01"/>
{{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}}
<br>
<br>

8
gui/app/styles/core/vendor/izitoast.scss vendored
View file

@ -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);
}

0
gui/app/templates/components/ui/ui-button-gap.hbs Normal file
View file

4
gui/app/templates/components/ui/ui-button.hbs Normal file
View file

@ -0,0 +1,4 @@
{{#if hasIcon}}
<i class="dicon {{iconClass}}"/>
{{/if}}
<div class="label">{{label}}</div>

0
gui/app/templates/components/ui/ui-toolbar-icon.hbs Normal file
View file

3
gui/config/optional-features.json
View file

@ -1,4 +1,5 @@
{
"application-template-wrapper": false,
"jquery-integration": true
"jquery-integration": true,
"template-only-glimmer-components": true
}