mirror of
https://github.com/documize/community.git
synced 2025-07-21 06:09:42 +02:00
Componentize UI elements: buttons, toolbars
This commit is contained in:
parent
adbd00bdd7
commit
f140e7ef77
10 changed files with 215 additions and 64 deletions
24
gui/app/components/ui/ui-button-gap.js
Normal file
24
gui/app/components/ui/ui-button-gap.js
Normal 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
61
gui/app/components/ui/ui-button.js
Normal 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
54
gui/app/components/ui/ui-toolbar-icon.js
Normal 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();
|
||||||
|
}
|
||||||
|
});
|
|
@ -29,6 +29,14 @@ export default Controller.extend(Notifier, {
|
||||||
|
|
||||||
onError() {
|
onError() {
|
||||||
this.notifyError('Unable to save changes');
|
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
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
|
@ -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>
|
<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-sidebar}}
|
||||||
{{#layout/master-content}}
|
{{#layout/master-content}}
|
||||||
<button class="dmz-button-theme">save</button>
|
{{ui/ui-button themed=true label="save" onClick=(action "onButtonClick" 1)}}
|
||||||
<div class="dmz-button-gap-right" />
|
{{ui/ui-button-gap}}
|
||||||
<button class="dmz-button-theme-light">update</button>
|
{{ui/ui-button themed=true light=true label="update" onClick=(action "onButtonClick" 2)}}
|
||||||
|
{{ui/ui-button-gap}}
|
||||||
<br>
|
<br>
|
||||||
<br>
|
<br>
|
||||||
<button class="dmz-button-green" {{action "onSuccess"}}>save</button>
|
{{ui/ui-button color="green" label="save" onClick=(action "onSuccess")}}
|
||||||
<div class="dmz-button-gap-right" />
|
{{ui/ui-button-gap}}
|
||||||
<button class="dmz-button-yellow" {{action "onInfo"}}>update</button>
|
{{ui/ui-button color="yellow" label="update" onClick=(action "onInfo")}}
|
||||||
<div class="dmz-button-gap-right" />
|
{{ui/ui-button-gap}}
|
||||||
<button class="dmz-button-gray" {{action "onWarn"}}>cancel</button>
|
{{ui/ui-button color="gray" label="Cancel" onClick=(action "onWarn")}}
|
||||||
<div class="dmz-button-gap-right" />
|
{{ui/ui-button-gap}}
|
||||||
<button class="dmz-button-red" {{action "onError"}}>delete</button>
|
{{ui/ui-button color="red" label="deletE" onClick=(action "onError")}}
|
||||||
<div class="dmz-button-gap-right" />
|
{{ui/ui-button-gap}}
|
||||||
<br>
|
<br>
|
||||||
<br>
|
<br>
|
||||||
<button class="dmz-button-green-light"><div class="label">Save</div></button>
|
{{ui/ui-button color="green" light=true label="save" onClick=(action "onSuccess")}}
|
||||||
<div class="dmz-button-gap-right" />
|
{{ui/ui-button-gap}}
|
||||||
<button class="dmz-button-yellow-light"><div class="label">Update</div></button>
|
{{ui/ui-button color="yellow" light=true label="update" onClick=(action "onInfo")}}
|
||||||
<div class="dmz-button-gap-right" />
|
{{ui/ui-button-gap}}
|
||||||
<button class="dmz-button-gray-light"><div class="label">cancel</div></button>
|
{{ui/ui-button color="gray" light=true label="Cancel" onClick=(action "onWarn")}}
|
||||||
<div class="dmz-button-gap-right" />
|
{{ui/ui-button-gap}}
|
||||||
<button class="dmz-button-red-light"><div class="label">Delete</div></button>
|
{{ui/ui-button color="red" light=true label="deletE" onClick=(action "onError")}}
|
||||||
<div class="dmz-button-gap-right" />
|
{{ui/ui-button-gap}}
|
||||||
<br>
|
<br>
|
||||||
<br>
|
<br>
|
||||||
<button class="dmz-button-green-light"><i class="dicon dicon-e-add"/><div class="label">space</div></button>
|
{{ui/ui-button color="green" light=true icon="plus" label="save" onClick=(action "onSuccess")}}
|
||||||
<div class="dmz-button-gap-right" />
|
{{ui/ui-button-gap}}
|
||||||
<button class="dmz-button-green-light"><i class="dicon dicon-e-add"/><div class="label">content</div></button>
|
{{ui/ui-button color="yellow" light=true icon="settings" label="update" onClick=(action "onInfo")}}
|
||||||
<div class="dmz-button-gap-right" />
|
{{ui/ui-button-gap}}
|
||||||
<button class="dmz-button-yellow-light"><i class="dicon dicon-e-add"/><div class="label">user</div></button>
|
{{ui/ui-button color="gray" light=true icon="print" label="Cancel" onClick=(action "onWarn")}}
|
||||||
<div class="dmz-button-gap-right" />
|
{{ui/ui-button-gap}}
|
||||||
<button class="dmz-button-gray-light"><i class="dicon dicon-e-add"/><div class="label">group</div></button>
|
{{ui/ui-button color="red" light=true icon="delete" label="deletE" onClick=(action "onError")}}
|
||||||
<div class="dmz-button-gap-right" />
|
{{ui/ui-button-gap}}
|
||||||
<button class="dmz-button-red-light"><i class="dicon dicon-bin"/><div class="label">delete</div></button>
|
|
||||||
<div class="dmz-button-gap-right" />
|
|
||||||
<br>
|
<br>
|
||||||
<br>
|
<br>
|
||||||
{{#ui/ui-toolbar dark=false light=false raised=false large=false bordered=false}}
|
{{#ui/ui-toolbar dark=false light=false raised=false large=false bordered=false}}
|
||||||
<i class="dicon dicon-bin red"/>
|
{{ui/ui-toolbar-icon icon="delete" color="red" onClick=(action "onToolbarClick" 1)}}
|
||||||
<i class="dicon dicon-print yellow"/>
|
{{ui/ui-toolbar-icon icon="print" color="yellow" onClick=(action "onToolbarClick" 2)}}
|
||||||
<i class="dicon dicon-settings-gear"/>
|
{{ui/ui-toolbar-icon icon="settings" onClick=(action "onToolbarClick" 3)}}
|
||||||
<i class="dicon dicon-print green"/>
|
{{ui/ui-toolbar-icon icon="print" color="green" onClick=(action "onToolbarClick" 4)}}
|
||||||
<i class="dicon dicon-single-01"/>
|
{{ui/ui-toolbar-icon icon="person" color="" onClick=(action "onToolbarClick" 5)}}
|
||||||
{{/ui/ui-toolbar}}
|
{{/ui/ui-toolbar}}
|
||||||
<br>
|
<br>
|
||||||
<br>
|
<br>
|
||||||
{{#ui/ui-toolbar dark=false light=true raised=true large=false bordered=true}}
|
{{#ui/ui-toolbar dark=false light=true raised=true large=false bordered=true}}
|
||||||
<i class="dicon dicon-bin red"/>
|
{{ui/ui-toolbar-icon icon="delete" color="red" onClick=(action "onToolbarClick" 1)}}
|
||||||
<i class="dicon dicon-print yellow"/>
|
{{ui/ui-toolbar-icon icon="print" color="yellow" onClick=(action "onToolbarClick" 2)}}
|
||||||
<i class="dicon dicon-settings-gear"/>
|
{{ui/ui-toolbar-icon icon="settings" onClick=(action "onToolbarClick" 3)}}
|
||||||
<i class="dicon dicon-print green"/>
|
{{ui/ui-toolbar-icon icon="print" color="green" onClick=(action "onToolbarClick" 4)}}
|
||||||
<i class="dicon dicon-single-01"/>
|
{{ui/ui-toolbar-icon icon="person" color="" onClick=(action "onToolbarClick" 5)}}
|
||||||
{{/ui/ui-toolbar}}
|
{{/ui/ui-toolbar}}
|
||||||
<br>
|
<br>
|
||||||
<br>
|
<br>
|
||||||
{{#ui/ui-toolbar dark=true light=false raised=true large=false bordered=true}}
|
{{#ui/ui-toolbar dark=true light=false raised=true large=false bordered=true}}
|
||||||
<i class="dicon dicon-bin red"/>
|
{{ui/ui-toolbar-icon icon="delete" color="red" onClick=(action "onToolbarClick" 1)}}
|
||||||
<i class="dicon dicon-print yellow"/>
|
{{ui/ui-toolbar-icon icon="print" color="yellow" onClick=(action "onToolbarClick" 2)}}
|
||||||
<i class="dicon dicon-settings-gear"/>
|
{{ui/ui-toolbar-icon icon="settings" onClick=(action "onToolbarClick" 3)}}
|
||||||
<i class="dicon dicon-print green"/>
|
{{ui/ui-toolbar-icon icon="print" color="green" onClick=(action "onToolbarClick" 4)}}
|
||||||
<i class="dicon dicon-single-01"/>
|
{{ui/ui-toolbar-icon icon="person" color="" onClick=(action "onToolbarClick" 5)}}
|
||||||
{{/ui/ui-toolbar}}
|
{{/ui/ui-toolbar}}
|
||||||
<br>
|
<br>
|
||||||
<br>
|
<br>
|
||||||
{{#ui/ui-toolbar dark=false light=false raised=false large=true bordered=false}}
|
{{#ui/ui-toolbar dark=false light=false raised=false large=true bordered=false}}
|
||||||
<i class="dicon dicon-bin red"/>
|
{{ui/ui-toolbar-icon icon="delete" color="red" onClick=(action "onToolbarClick" 1)}}
|
||||||
<i class="dicon dicon-print yellow"/>
|
{{ui/ui-toolbar-icon icon="print" color="yellow" onClick=(action "onToolbarClick" 2)}}
|
||||||
<i class="dicon dicon-settings-gear"/>
|
{{ui/ui-toolbar-icon icon="settings" onClick=(action "onToolbarClick" 3)}}
|
||||||
<i class="dicon dicon-print green"/>
|
{{ui/ui-toolbar-icon icon="print" color="green" onClick=(action "onToolbarClick" 4)}}
|
||||||
<i class="dicon dicon-single-01"/>
|
{{ui/ui-toolbar-icon icon="person" color="" onClick=(action "onToolbarClick" 5)}}
|
||||||
{{/ui/ui-toolbar}}
|
{{/ui/ui-toolbar}}
|
||||||
<br>
|
<br>
|
||||||
<br>
|
<br>
|
||||||
{{#ui/ui-toolbar dark=false light=true raised=true large=true bordered=true}}
|
{{#ui/ui-toolbar dark=false light=true raised=true large=true bordered=true}}
|
||||||
<i class="dicon dicon-bin red"/>
|
{{ui/ui-toolbar-icon icon="delete" color="red" onClick=(action "onToolbarClick" 1)}}
|
||||||
<i class="dicon dicon-print yellow"/>
|
{{ui/ui-toolbar-icon icon="print" color="yellow" onClick=(action "onToolbarClick" 2)}}
|
||||||
<i class="dicon dicon-settings-gear"/>
|
{{ui/ui-toolbar-icon icon="settings" onClick=(action "onToolbarClick" 3)}}
|
||||||
<i class="dicon dicon-print green"/>
|
{{ui/ui-toolbar-icon icon="print" color="green" onClick=(action "onToolbarClick" 4)}}
|
||||||
<i class="dicon dicon-single-01"/>
|
{{ui/ui-toolbar-icon icon="person" color="" onClick=(action "onToolbarClick" 5)}}
|
||||||
{{/ui/ui-toolbar}}
|
{{/ui/ui-toolbar}}
|
||||||
<br>
|
<br>
|
||||||
<br>
|
<br>
|
||||||
{{#ui/ui-toolbar dark=true light=false raised=true large=true bordered=true}}
|
{{#ui/ui-toolbar dark=true light=false raised=true large=true bordered=true}}
|
||||||
<i class="dicon dicon-bin red"/>
|
{{ui/ui-toolbar-icon icon="delete" color="red" onClick=(action "onToolbarClick" 1)}}
|
||||||
<i class="dicon dicon-print yellow"/>
|
{{ui/ui-toolbar-icon icon="print" color="yellow" onClick=(action "onToolbarClick" 2)}}
|
||||||
<i class="dicon dicon-settings-gear"/>
|
{{ui/ui-toolbar-icon icon="settings" onClick=(action "onToolbarClick" 3)}}
|
||||||
<i class="dicon dicon-print green"/>
|
{{ui/ui-toolbar-icon icon="print" color="green" onClick=(action "onToolbarClick" 4)}}
|
||||||
<i class="dicon dicon-single-01"/>
|
{{ui/ui-toolbar-icon icon="person" color="" onClick=(action "onToolbarClick" 5)}}
|
||||||
{{/ui/ui-toolbar}}
|
{{/ui/ui-toolbar}}
|
||||||
<br>
|
<br>
|
||||||
<br>
|
<br>
|
||||||
|
|
8
gui/app/styles/core/vendor/izitoast.scss
vendored
8
gui/app/styles/core/vendor/izitoast.scss
vendored
|
@ -1747,11 +1747,11 @@
|
||||||
border-color: map-get($yellow-shades, 300);
|
border-color: map-get($yellow-shades, 300);
|
||||||
}
|
}
|
||||||
.iziToast.iziToast-color-blue {
|
.iziToast.iziToast-color-blue {
|
||||||
background: rgba(157,222,255,0.9);
|
background: map-get($gray-shades, 500);
|
||||||
border-color: rgba(157,222,255,0.9);
|
border-color: map-get($gray-shades, 500);
|
||||||
}
|
}
|
||||||
.iziToast.iziToast-color-green {
|
.iziToast.iziToast-color-green {
|
||||||
background: map-get($green-shades, 300);
|
background: map-get($green-shades, 400);
|
||||||
border-color: map-get($green-shades, 300);
|
border-color: map-get($green-shades, 400);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
0
gui/app/templates/components/ui/ui-button-gap.hbs
Normal file
0
gui/app/templates/components/ui/ui-button-gap.hbs
Normal file
4
gui/app/templates/components/ui/ui-button.hbs
Normal file
4
gui/app/templates/components/ui/ui-button.hbs
Normal 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
0
gui/app/templates/components/ui/ui-toolbar-icon.hbs
Normal file
|
@ -1,4 +1,5 @@
|
||||||
{
|
{
|
||||||
"application-template-wrapper": false,
|
"application-template-wrapper": false,
|
||||||
"jquery-integration": true
|
"jquery-integration": true,
|
||||||
|
"template-only-glimmer-components": true
|
||||||
}
|
}
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue