mirror of
https://github.com/documize/community.git
synced 2025-08-02 20:15:26 +02:00
[WIP] Improve master layout for different devices + product growth
We have two pressing needs: 1. Improve experience on real estate challenged devices. 2. Make room for product feature-set growth. To hit these targets, we need to develop better UX through smarter on-screen space management.
This commit is contained in:
Harvey Kandola
parent
bce1c1b166
commit
62c3cd03ad
51 changed files with 433 additions and 525 deletions
|
|
@ -1,138 +1,148 @@
|
|||
{{#layout/master-sidebar selectedItem="spaces"}}
|
||||
{{ui/ui-spacer size=300}}
|
||||
|
||||
<div class="section">
|
||||
<div class="title">filter</div>
|
||||
<div class="list">
|
||||
<div class="item {{if (eq selectedView "all") "selected"}}" {{action "onSelect" "all"}}>
|
||||
<i class={{concat "dicon " constants.Icon.All}} />
|
||||
<div class="name">All ({{model.spaces.length}})</div>
|
||||
</div>
|
||||
<div class="item {{if (eq selectedView "public") "selected"}}" {{action "onSelect" "public"}}>
|
||||
<i class={{concat "dicon " constants.Icon.World}} />
|
||||
<div class="name">Public ({{publicSpaces.length}})</div>
|
||||
</div>
|
||||
{{#if session.authenticated}}
|
||||
<div class="item {{if (eq selectedView "protected") "selected"}}" {{action "onSelect" "protected"}}>
|
||||
<i class={{concat "dicon " constants.Icon.People}} />
|
||||
<div class="name">Protected ({{protectedSpaces.length}})</div>
|
||||
</div>
|
||||
<div class="item {{if (eq selectedView "personal") "selected"}}" {{action "onSelect" "personal"}}>
|
||||
<i class={{concat "dicon " constants.Icon.Person}} />
|
||||
<div class="name">Personal ({{personalSpaces.length}})</div>
|
||||
</div>
|
||||
{{/if}}
|
||||
</div>
|
||||
<Layout::MasterNavigation @selectedItem="spaces" />
|
||||
<Layout::MasterToolbar>
|
||||
<div class="zone-1">
|
||||
</div>
|
||||
|
||||
{{ui/ui-spacer size=300}}
|
||||
|
||||
<div class="section">
|
||||
<div class="title">label</div>
|
||||
{{#if labels}}
|
||||
<div class="list">
|
||||
{{#each labels as |label|}}
|
||||
{{#if (gt label.count 0)}}
|
||||
<div class="item {{if (eq selectedView label.id) "selected"}}" {{action "onSelect" label.id}}>
|
||||
<i class={{concat "dicon label-color " constants.Icon.Checkbox}} style={{label.bgfgColor}}/>
|
||||
<div class="name">{{label.name}} ({{label.count}})</div>
|
||||
</div>
|
||||
{{/if}}
|
||||
{{/each}}
|
||||
</div>
|
||||
{{else}}
|
||||
<div class="empty">No labels</div>
|
||||
<div class="zone-2">
|
||||
</div>
|
||||
<div class="zone-3">
|
||||
{{#if (or session.isEditor session.isAdmin)}}
|
||||
{{#ui/ui-toolbar dark=false light=true raised=true large=false bordered=true tooltip="New space"}}
|
||||
{{#if session.isEditor}}
|
||||
{{ui/ui-toolbar-icon icon=constants.Icon.Plus color=constants.Color.Green onClick=(action "onShowModal")}}
|
||||
{{ui/ui-toolbar-label label="SPACE" color=constants.Color.Green onClick=(action "onShowModal")}}
|
||||
{{/if}}
|
||||
{{/ui/ui-toolbar}}
|
||||
{{/if}}
|
||||
</div>
|
||||
{{/layout/master-sidebar}}
|
||||
</Layout::MasterToolbar>
|
||||
|
||||
{{#layout/master-content}}
|
||||
<div class="grid-container-8-2">
|
||||
<div class="grid-cell-1">
|
||||
{{layout/logo-heading
|
||||
title=appMeta.title
|
||||
desc=appMeta.message
|
||||
logo=true}}
|
||||
</div>
|
||||
<div class="grid-cell-2 grid-cell-right">
|
||||
{{#if (or session.isEditor session.isAdmin)}}
|
||||
{{#ui/ui-toolbar dark=false light=true raised=true large=true bordered=true tooltip="New space"}}
|
||||
{{#if session.isEditor}}
|
||||
{{ui/ui-toolbar-icon icon=constants.Icon.Plus color=constants.Color.Green onClick=(action "onShowModal")}}
|
||||
{{ui/ui-toolbar-label label="SPACE" color=constants.Color.Green onClick=(action "onShowModal")}}
|
||||
<div class="master-container">
|
||||
<div class="master-sidebar">
|
||||
<div class="sidebar-content">
|
||||
{{yield}}
|
||||
|
||||
<Ui::UiSpacer @size=300 />
|
||||
|
||||
<div class="section">
|
||||
<div class="title">filter</div>
|
||||
<div class="list">
|
||||
<div class="item {{if (eq selectedView "all") "selected"}}" {{action "onSelect" "all"}}>
|
||||
<i class={{concat "dicon " constants.Icon.All}} />
|
||||
<div class="name">All ({{model.spaces.length}})</div>
|
||||
</div>
|
||||
<div class="item {{if (eq selectedView "public") "selected"}}" {{action "onSelect" "public"}}>
|
||||
<i class={{concat "dicon " constants.Icon.World}} />
|
||||
<div class="name">Public ({{publicSpaces.length}})</div>
|
||||
</div>
|
||||
{{#if session.authenticated}}
|
||||
<div class="item {{if (eq selectedView "protected") "selected"}}" {{action "onSelect" "protected"}}>
|
||||
<i class={{concat "dicon " constants.Icon.People}} />
|
||||
<div class="name">Protected ({{protectedSpaces.length}})</div>
|
||||
</div>
|
||||
<div class="item {{if (eq selectedView "personal") "selected"}}" {{action "onSelect" "personal"}}>
|
||||
<i class={{concat "dicon " constants.Icon.Person}} />
|
||||
<div class="name">Personal ({{personalSpaces.length}})</div>
|
||||
</div>
|
||||
{{/if}}
|
||||
{{/ui/ui-toolbar}}
|
||||
{{/if}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Ui::UiSpacer @size=300 />
|
||||
|
||||
<div class="section">
|
||||
<div class="title">label</div>
|
||||
{{#if labels}}
|
||||
<div class="list">
|
||||
{{#each labels as |label|}}
|
||||
{{#if (gt label.count 0)}}
|
||||
<div class="item {{if (eq selectedView label.id) "selected"}}" {{action "onSelect" label.id}}>
|
||||
<i class={{concat "dicon label-color " constants.Icon.Checkbox}} style={{label.bgfgColor}}/>
|
||||
<div class="name">{{label.name}} ({{label.count}})</div>
|
||||
</div>
|
||||
{{/if}}
|
||||
{{/each}}
|
||||
</div>
|
||||
{{else}}
|
||||
<div class="empty">No labels</div>
|
||||
{{/if}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{ui/ui-spacer size=400}}
|
||||
<div class="master-content">
|
||||
{{layout/logo-heading title=appMeta.title desc=appMeta.message logo=true}}
|
||||
<Ui::UiSpacer @size=400 />
|
||||
|
||||
{{spaces/space-list spaces=selectedSpaces labels=labels}}
|
||||
{{spaces/space-list spaces=selectedSpaces labels=labels}}
|
||||
|
||||
<div class="modal" tabindex="-1" role="dialog" id="add-space-modal">
|
||||
<div class="modal-dialog modal-lg" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">New Space</div>
|
||||
<div class="modal-body">
|
||||
<form onsubmit={{action "onAddSpace"}}>
|
||||
<div class="form-group">
|
||||
<label for="new-space-name">Name</label>
|
||||
{{input type="text" id="new-space-name" class="form-control mousetrap" placeholder="Space name" value=spaceName}}
|
||||
<small class="form-text text-muted">Characters and numbers only</small>
|
||||
</div>
|
||||
<div class="modal" tabindex="-1" role="dialog" id="add-space-modal">
|
||||
<div class="modal-dialog modal-lg" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">New Space</div>
|
||||
<div class="modal-body">
|
||||
<form onsubmit={{action "onAddSpace"}}>
|
||||
<div class="form-group">
|
||||
<label for="new-space-name">Name</label>
|
||||
{{input type="text" id="new-space-name" class="form-control mousetrap" placeholder="Space name" value=spaceName}}
|
||||
<small class="form-text text-muted">Characters and numbers only</small>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>Description</label>
|
||||
{{focus-input id="space-desc" type="text" value=spaceDesc class="form-control" placeholder="Space description" autocomplete="off"}}
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Description</label>
|
||||
{{focus-input id="space-desc" type="text" value=spaceDesc class="form-control" placeholder="Space description" autocomplete="off"}}
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>Icon</label>
|
||||
<div class="ui-icon-picker">
|
||||
<ul class="list">
|
||||
{{#each iconList as |icon|}}
|
||||
<li class="item {{if (eq spaceIcon icon) "selected"}}" {{action "onSetIcon" icon}}>
|
||||
{{ui/ui-icon-meta icon=icon}}
|
||||
<div class="form-group">
|
||||
<label>Icon</label>
|
||||
<div class="ui-icon-picker">
|
||||
<ul class="list">
|
||||
{{#each iconList as |icon|}}
|
||||
<li class="item {{if (eq spaceIcon icon) "selected"}}" {{action "onSetIcon" icon}}>
|
||||
{{ui/ui-icon-meta icon=icon}}
|
||||
</li>
|
||||
{{/each}}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>Label</label>
|
||||
<ul class="space-label-picker">
|
||||
<li class="label none {{if (eq spaceLabel "") "selected"}}" {{action "onSetLabel" ""}}>None</li>
|
||||
{{#each labels as |label|}}
|
||||
<li class="label {{if (eq spaceLabel label.id) "selected"}}"
|
||||
style={{label.bgColor}}
|
||||
{{action "onSetLabel" label.id}} title={{label.name}}>
|
||||
{{label.name}}
|
||||
</li>
|
||||
{{/each}}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>Label</label>
|
||||
<ul class="space-label-picker">
|
||||
<li class="label none {{if (eq spaceLabel "") "selected"}}" {{action "onSetLabel" ""}}>None</li>
|
||||
{{#each labels as |label|}}
|
||||
<li class="label {{if (eq spaceLabel label.id) "selected"}}"
|
||||
style={{label.bgColor}}
|
||||
{{action "onSetLabel" label.id}} title={{label.name}}>
|
||||
{{label.name}}
|
||||
</li>
|
||||
{{/each}}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="clone-space-dropdown">Clone Space</label>
|
||||
{{ui/ui-select id="clone-space-dropdown" content=spaces 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}}
|
||||
{{#ui/ui-checkbox selected=copyTemplate}}Copy templates{{/ui/ui-checkbox}}
|
||||
{{#ui/ui-checkbox selected=copyPermission}}Copy permissions{{/ui/ui-checkbox}}
|
||||
{{#ui/ui-checkbox selected=copyDocument}}Copy documents{{/ui/ui-checkbox}}
|
||||
{{/if}}
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
{{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 class="form-group">
|
||||
<label for="clone-space-dropdown">Clone Space</label>
|
||||
{{ui/ui-select id="clone-space-dropdown" content=spaces 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}}
|
||||
{{#ui/ui-checkbox selected=copyTemplate}}Copy templates{{/ui/ui-checkbox}}
|
||||
{{#ui/ui-checkbox selected=copyPermission}}Copy permissions{{/ui/ui-checkbox}}
|
||||
{{#ui/ui-checkbox selected=copyDocument}}Copy documents{{/ui/ui-checkbox}}
|
||||
{{/if}}
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
{{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>
|
||||
</div>
|
||||
{{/layout/master-content}}
|
||||
|
||||
</div>
|
||||
|
||||
<Layout::MasterContent>
|
||||
</Layout::MasterContent>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue