1
0
Fork 0
mirror of https://github.com/documize/community.git synced 2025-08-04 21:15:24 +02:00

Introduce modular UI framework

1. Modals wrapped
2. Toolbar icon actions: click and link-to navigation
3. Moved components into sub-folders
4. Replaced Bootstrap Tooltip and Dropdown libs with Ember specific add-ons

And more.

Co-Authored-By: Saul S <sauls8t@users.noreply.github.com>
Co-Authored-By: McMatts <matt@documize.com>
This commit is contained in:
Harvey Kandola 2018-12-11 18:00:08 +00:00
parent f140e7ef77
commit 6eb68f84e0
48 changed files with 330 additions and 240 deletions

View file

@ -5,7 +5,7 @@
<div class="url">{{appMeta.appHost}}</div>
</div>
<div class="login-form">
{{forgot-password forgot=(action "forgot")}}
{{user/forgot-password forgot=(action "forgot")}}
</div>
</div>
</div>

View file

@ -4,6 +4,6 @@
<img src="/assets/img/logo-purple.png" title="Documize" alt="Documize" class="img-fluid">
<div class="url">{{appMeta.appHost}}</div>
</div>
{{password-reset reset=(action "reset")}}
{{user/password-reset reset=(action "reset")}}
</div>
</div>

View file

@ -2,12 +2,26 @@
{{/layout/master-sidebar}}
{{#layout/master-content}}
<div class="grid-container-8-2">
<div class="grid-cell-1">
{{layout/page-heading title=appMeta.title}}
{{layout/page-desc desc=appMeta.message}}
</div>
<div class="grid-cell-2">
{{#if (or session.isEditor session.isAdmin)}}
{{#ui/ui-toolbar dark=false light=true raised=true large=true bordered=true}}
{{#if session.isEditor}}
{{ui/ui-toolbar-icon icon=constants.Icon.Plus color=constants.Color.Green tooltip="New space" onClick=(action "onShowModal")}}
{{/if}}
{{#if session.isAdmin}}
{{ui/ui-toolbar-icon icon=constants.Icon.Settings tooltip="Settings" linkTo="customize.general"}}
{{/if}}
{{/ui/ui-toolbar}}
{{/if}}
</div>
</div>
<h1>{{appMeta.title}}</h1>
<p>{{appMeta.message}}</p>
{{#if session.isEditor}}
<button type="button" class="btn btn-success font-weight-bold my-3" {{action "onShowModal"}}>+ SPACE</button>
{{/if}}
{{spaces/space-list spaces=model}}
<div class="modal" tabindex="-1" role="dialog" id="add-space-modal">
@ -19,11 +33,11 @@
<div class="form-group">
<label for="new-space-name">Space Name</label>
{{input type="text" id="new-space-name" class="form-control mousetrap" placeholder="Space name" value=spaceName}}
<small id="emailHelp" class="form-text text-muted">Characters and numbers only</small>
<small class="form-text text-muted">Characters and numbers only</small>
</div>
<div class="form-group">
<label for="clone-space-dropdown">Clone Space</label>
{{ui-select id="clone-space-dropdown" content=model prompt="select space" action=(action "onCloneSpaceSelect") optionValuePath="id" optionLabelPath="name" selection=clonedSpace}}
{{ui/ui-select id="clone-space-dropdown" content=model prompt="select space" action=(action "onCloneSpaceSelect") optionValuePath="id" optionLabelPath="name" selection=clonedSpace}}
<small id="emailHelp" class="form-text text-muted">Copy templates, permissions, documents from existing space</small>
<div class="margin-top-10" />
{{#if hasClone}}
@ -35,11 +49,11 @@
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-secondary" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-success" onclick={{action "onAddSpace"}}>Add</button>
{{ui/ui-button color=constants.Color.Gray light=true label=constants.Label.Cancel dismiss=true}}
{{ui/ui-button-gap}}
{{ui/ui-button color=constants.Color.Green light=true label=constants.Label.Add onClick=(action "onAddSpace")}}
</div>
</div>
</div>
</div>
{{/layout/master-content}}

View file

@ -3,7 +3,7 @@
{{#layout/middle-zone}}
{{#layout/middle-zone-content}}
{{user-profile model=model save=(action "save")}}
{{user/user-profile model=model save=(action "save")}}
{{/layout/middle-zone-content}}
{{#layout/middle-zone-sidebar}}

View file

@ -9,7 +9,7 @@
</div>
</div>
<div class="col-8">
{{documize-setup model=model save=(action "save")}}
{{setup/documize-setup model=model save=(action "save")}}
</div>
</div>
</div>

View file

@ -6,93 +6,105 @@
<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}}
{{ui/ui-button themed=true label="save" onClick=(action "onButtonClick" 1)}}
{{ui/ui-button themed=true label=constants.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 themed=true light=true label=constants.Label.Update onClick=(action "onButtonClick" 2)}}
{{ui/ui-button-gap}}
<br>
<br>
{{ui/ui-button color="green" label="save" onClick=(action "onSuccess")}}
{{ui/ui-button color=constants.Color.Green label=constants.Label.Save onClick=(action "onSuccess")}}
{{ui/ui-button-gap}}
{{ui/ui-button color="yellow" label="update" onClick=(action "onInfo")}}
{{ui/ui-button color=constants.Color.Yellow label=constants.Label.Update onClick=(action "onInfo")}}
{{ui/ui-button-gap}}
{{ui/ui-button color="gray" label="Cancel" onClick=(action "onWarn")}}
{{ui/ui-button color=constants.Color.Gray label=constants.Label.Cancel onClick=(action "onWarn")}}
{{ui/ui-button-gap}}
{{ui/ui-button color="red" label="deletE" onClick=(action "onError")}}
{{ui/ui-button color=constants.Color.Red label=constants.Label.Delete onClick=(action "onError")}}
{{ui/ui-button-gap}}
<br>
<br>
{{ui/ui-button color="green" light=true label="save" onClick=(action "onSuccess")}}
{{ui/ui-button color=constants.Color.Green light=true label=constants.Label.Save onClick=(action "onSuccess")}}
{{ui/ui-button-gap}}
{{ui/ui-button color="yellow" light=true label="update" onClick=(action "onInfo")}}
{{ui/ui-button color=constants.Color.Yellow light=true label=constants.Label.Update onClick=(action "onInfo")}}
{{ui/ui-button-gap}}
{{ui/ui-button color="gray" light=true label="Cancel" onClick=(action "onWarn")}}
{{ui/ui-button color=constants.Color.Gray light=true label=constants.Label.Cancel onClick=(action "onWarn")}}
{{ui/ui-button-gap}}
{{ui/ui-button color="red" light=true label="deletE" onClick=(action "onError")}}
{{ui/ui-button color=constants.Color.Red light=true label=constants.Label.Delete onClick=(action "onError")}}
{{ui/ui-button-gap}}
<br>
<br>
{{ui/ui-button color="green" light=true icon="plus" label="save" onClick=(action "onSuccess")}}
{{ui/ui-button color=constants.Color.Green light=true icon=constants.Icon.Plus label=constants.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 color=constants.Color.Yellow light=true icon=constants.Icon.Settings label=constants.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 color=constants.Color.Gray light=true icon=constants.Icon.Print label=constants.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 color=constants.Color.Red light=true icon=constants.Icon.Delete label=constants.Label.Delete onClick=(action "onError")}}
{{ui/ui-button-gap}}
<br>
<br>
{{#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-icon icon=constants.Icon.Delete color=constants.Color.Red onClick=(action "onToolbarClick" 1)}}
{{ui/ui-toolbar-icon icon=constants.Icon.Print color=constants.Color.Yellow onClick=(action "onToolbarClick" 2)}}
{{ui/ui-toolbar-icon icon=constants.Icon.Settings onClick=(action "onToolbarClick" 3)}}
{{ui/ui-toolbar-icon icon=constants.Icon.Print color=constants.Color.Green onClick=(action "onToolbarClick" 4)}}
{{ui/ui-toolbar-icon icon=constants.Icon.Person onClick=(action "onToolbarClick" 5)}}
{{ui/ui-toolbar-icon icon=constants.Icon.Plus color=constants.Color.Green onClick=(action "onToolbarClick" 5)}}
{{/ui/ui-toolbar}}
<br>
<br>
{{#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-icon icon=constants.Icon.Delete color=constants.Color.Red onClick=(action "onToolbarClick" 1)}}
{{ui/ui-toolbar-icon icon=constants.Icon.Print color=constants.Color.Yellow onClick=(action "onToolbarClick" 2)}}
{{ui/ui-toolbar-icon icon=constants.Icon.Settings onClick=(action "onToolbarClick" 3)}}
{{ui/ui-toolbar-icon icon=constants.Icon.Print color=constants.Color.Green onClick=(action "onToolbarClick" 4)}}
{{ui/ui-toolbar-icon icon=constants.Icon.Person onClick=(action "onToolbarClick" 5)}}
{{ui/ui-toolbar-icon icon=constants.Icon.Plus color=constants.Color.Green onClick=(action "onToolbarClick" 5)}}
{{/ui/ui-toolbar}}
<br>
<br>
{{#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-icon icon=constants.Icon.Delete color=constants.Color.Red onClick=(action "onToolbarClick" 1)}}
{{ui/ui-toolbar-icon icon=constants.Icon.Print color=constants.Color.Yellow onClick=(action "onToolbarClick" 2)}}
{{ui/ui-toolbar-icon icon=constants.Icon.Settings onClick=(action "onToolbarClick" 3)}}
{{ui/ui-toolbar-icon icon=constants.Icon.Print color=constants.Color.Green onClick=(action "onToolbarClick" 4)}}
{{ui/ui-toolbar-icon icon=constants.Icon.Person onClick=(action "onToolbarClick" 5)}}
{{ui/ui-toolbar-icon icon=constants.Icon.Plus color=constants.Color.Green onClick=(action "onToolbarClick" 5)}}
{{/ui/ui-toolbar}}
<br>
<br>
{{#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-icon icon=constants.Icon.Delete color=constants.Color.Red onClick=(action "onToolbarClick" 1)}}
{{ui/ui-toolbar-icon icon=constants.Icon.Print color=constants.Color.Yellow onClick=(action "onToolbarClick" 2)}}
{{ui/ui-toolbar-icon icon=constants.Icon.Settings onClick=(action "onToolbarClick" 3)}}
{{ui/ui-toolbar-icon icon=constants.Icon.Print color=constants.Color.Green onClick=(action "onToolbarClick" 4)}}
{{ui/ui-toolbar-icon icon=constants.Icon.Person onClick=(action "onToolbarClick" 5)}}
{{ui/ui-toolbar-icon icon=constants.Icon.Plus color=constants.Color.Green onClick=(action "onToolbarClick" 5)}}
{{/ui/ui-toolbar}}
<br>
<br>
{{#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-icon icon=constants.Icon.Delete color=constants.Color.Red onClick=(action "onToolbarClick" 1)}}
{{ui/ui-toolbar-icon icon=constants.Icon.Print color=constants.Color.Yellow onClick=(action "onToolbarClick" 2)}}
{{ui/ui-toolbar-icon icon=constants.Icon.Settings onClick=(action "onToolbarClick" 3)}}
{{ui/ui-toolbar-icon icon=constants.Icon.Print color=constants.Color.Green onClick=(action "onToolbarClick" 4)}}
{{ui/ui-toolbar-icon icon=constants.Icon.Person onClick=(action "onToolbarClick" 5)}}
{{ui/ui-toolbar-icon icon=constants.Icon.Plus color=constants.Color.Green onClick=(action "onToolbarClick" 5)}}
{{/ui/ui-toolbar}}
<br>
<br>
{{#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-icon icon=constants.Icon.Delete color=constants.Color.Red onClick=(action "onToolbarClick" 1)}}
{{ui/ui-toolbar-icon icon=constants.Icon.Print color=constants.Color.Yellow onClick=(action "onToolbarClick" 2)}}
{{ui/ui-toolbar-icon icon=constants.Icon.Settings onClick=(action "onToolbarClick" 3)}}
{{ui/ui-toolbar-icon icon=constants.Icon.Print color=constants.Color.Green onClick=(action "onToolbarClick" 4)}}
{{ui/ui-toolbar-icon icon=constants.Icon.Person onClick=(action "onToolbarClick" 5)}}
{{ui/ui-toolbar-icon icon=constants.Icon.Plus color=constants.Color.Green tooltip="New space" onClick=(action "onToolbarClick" 5)}}
{{/ui/ui-toolbar}}
<br>
<br>
{{#ui/ui-toolbar dark=false light=true raised=true large=true bordered=true}}
{{ui/ui-toolbar-icon icon=constants.Icon.Plus color=constants.Color.Green onClick=(action "onToolbarClick" 5)}}
{{ui/ui-toolbar-icon icon=constants.Icon.Settings onClick=(action "onToolbarClick" 3)}}
{{/ui/ui-toolbar}}
<br>
<br>