Docker/documize
Docker/documize
1
0
Fork 0
mirror of https://github.com/documize/community.git synced 2025-07-25 08:09: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

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>