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,5 +1,5 @@
|
|||
{{#layout/master-sidebar hideNavigation=true}}
|
||||
{{ui/ui-spacer size=300}}
|
||||
<Ui::UiSpacer @size=300 />
|
||||
<div class="section">
|
||||
<div class="title">welcome to documize</div>
|
||||
<p>Let's set up your account and you started</p>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
{{#layout/master-sidebar selectedItem="settings"}}
|
||||
{{ui/ui-spacer size=300}}
|
||||
<Ui::UiSpacer @size=300 />
|
||||
|
||||
<div class="section">
|
||||
<div class="title">administration</div>
|
||||
|
|
@ -68,4 +68,4 @@
|
|||
|
||||
{{#layout/master-content}}
|
||||
{{outlet}}
|
||||
{{/layout/master-content}}
|
||||
{{/layout/master-content}}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
{{#layout/master-sidebar}}
|
||||
{{ui/ui-spacer size=100}}
|
||||
<Ui::UiSpacer @size=100 />
|
||||
|
||||
<div class="section">
|
||||
{{document/sidebar-meta
|
||||
|
|
@ -13,7 +13,7 @@
|
|||
contributionStatus=contributionStatus
|
||||
approvalStatus=approvalStatus}}
|
||||
|
||||
{{ui/ui-spacer size=300}}
|
||||
<Ui::UiSpacer @size=300 />
|
||||
|
||||
<div class="text-center">
|
||||
{{#ui/ui-toolbar dark=false light=true raised=true large=false bordered=true}}
|
||||
|
|
@ -29,7 +29,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
{{ui/ui-spacer size=200}}
|
||||
<Ui::UiSpacer @size=200 />
|
||||
|
||||
{{#if (eq sidebarTab "toc")}}
|
||||
{{document/sidebar-toc
|
||||
|
|
@ -85,7 +85,7 @@
|
|||
approvalStatus=approvalStatus}}
|
||||
|
||||
{{#if contributionStatus}}
|
||||
{{ui/ui-spacer size=200}}
|
||||
<Ui::UiSpacer @size=200 />
|
||||
<div class="document-meta">
|
||||
<div class="label-workflow-status">
|
||||
{{contributionStatus}}
|
||||
|
|
@ -93,7 +93,7 @@
|
|||
</div>
|
||||
{{else}}
|
||||
{{#if approvalStatus}}
|
||||
{{ui/ui-spacer size=200}}
|
||||
<Ui::UiSpacer @size=200 />
|
||||
<div class="document-meta">
|
||||
<div class="label-workflow-status">
|
||||
{{approvalStatus}}
|
||||
|
|
@ -102,7 +102,7 @@
|
|||
{{/if}}
|
||||
{{/if}}
|
||||
|
||||
{{ui/ui-spacer size=300}}
|
||||
<Ui::UiSpacer @size=300 />
|
||||
|
||||
<div class="document-meta {{if permissions.documentEdit "cursor-pointer"}}" {{action "onEditMeta"}}>
|
||||
<div class="document-heading">
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
{{#layout/master-sidebar}}
|
||||
{{ui/ui-spacer size=300}}
|
||||
<Ui::UiSpacer @size=300 />
|
||||
|
||||
<div class="section">
|
||||
{{#link-to "document.index"}}
|
||||
{{ui/ui-button color=constants.Color.Yellow light=true icon=constants.Icon.ArrowLeft label="Document"}}
|
||||
{{/link-to}}
|
||||
|
||||
{{ui/ui-spacer size=400}}
|
||||
<Ui::UiSpacer @size=400 />
|
||||
|
||||
<div class="title">REVISIONS</div>
|
||||
<div class="list">
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
{{#layout/master-sidebar}}
|
||||
{{ui/ui-spacer size=300}}
|
||||
<Ui::UiSpacer @size=300 />
|
||||
|
||||
<div class="section">
|
||||
{{#link-to "document.index" model.folder.id model.folder.slug model.document.id model.document.slug}}
|
||||
|
|
@ -9,16 +9,16 @@
|
|||
{{/layout/master-sidebar}}
|
||||
|
||||
{{#layout/master-content}}
|
||||
{{document/document-editor
|
||||
document=model.document
|
||||
folder=model.folder
|
||||
page=model.page
|
||||
{{document/document-editor
|
||||
document=model.document
|
||||
folder=model.folder
|
||||
page=model.page
|
||||
meta=model.meta
|
||||
attachments=model.attachments
|
||||
onCancel=(action "onCancel") onAction=(action "onAction")}}
|
||||
|
||||
{{document/section-attachment uploadLabel="Upload Attachments"
|
||||
editMode=true page=model.page document=model.document
|
||||
{{document/section-attachment uploadLabel="Upload Attachments"
|
||||
editMode=true page=model.page document=model.document
|
||||
files=model.attachments
|
||||
onAttachmentUpload=(action "onAttachmentUpload")
|
||||
onAttachmentDelete=(action "onAttachmentDelete")}}
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
{{#layout/master-sidebar}}
|
||||
{{ui/ui-spacer size=300}}
|
||||
<Ui::UiSpacer @size=300 />
|
||||
<div class="section">
|
||||
{{#link-to "document.index"}}
|
||||
{{ui/ui-button color=constants.Color.Yellow light=true icon=constants.Icon.ArrowLeft label="Document"}}
|
||||
{{/link-to}}
|
||||
|
||||
{{ui/ui-spacer size=400}}
|
||||
<Ui::UiSpacer @size=400 />
|
||||
|
||||
<div class="title">Document Options</div>
|
||||
<div class="list">
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
{{#layout/master-sidebar}}
|
||||
{{ui/ui-spacer size=300}}
|
||||
<Ui::UiSpacer @size=300 />
|
||||
<div class="section">
|
||||
{{#link-to "folder.settings"}}
|
||||
{{ui/ui-button color=constants.Color.Yellow light=true icon=constants.Icon.ArrowLeft label="Space Settings"}}
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
{{#layout/master-sidebar}}
|
||||
{{ui/ui-spacer size=300}}
|
||||
<Ui::UiSpacer @size=300 />
|
||||
|
||||
<div class="section">
|
||||
{{#link-to "folder.index"}}
|
||||
{{ui/ui-button color=constants.Color.Yellow light=true icon=constants.Icon.ArrowLeft label="Space"}}
|
||||
{{/link-to}}
|
||||
|
||||
{{ui/ui-spacer size=400}}
|
||||
<Ui::UiSpacer @size=400 />
|
||||
|
||||
<div class="title">space management</div>
|
||||
<div class="list">
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
{{#layout/master-sidebar selectedItem="search"}}
|
||||
{{ui/ui-spacer size=300}}
|
||||
<Ui::UiSpacer @size=300 />
|
||||
|
||||
<div class="section">
|
||||
<div class="title">Match Filter</div>
|
||||
|
|
@ -22,7 +22,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{ui/ui-spacer size=200}}
|
||||
<Ui::UiSpacer @size=200 />
|
||||
|
||||
<div class="section">
|
||||
<div class="title">query examples</div>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
{{#layout/master-sidebar}}
|
||||
{{ui/ui-spacer size=300}}
|
||||
<Ui::UiSpacer @size=300 />
|
||||
|
||||
<div class="section">
|
||||
<div class="title">SUMMARY</div>
|
||||
{{ui/ui-spacer size=100}}
|
||||
<Ui::UiSpacer @size=100 />
|
||||
<p>Documize {{appMeta.edition}} Edition</p>
|
||||
<p>Version {{appMeta.version}}</p>
|
||||
<p>Build {{appMeta.revision}}</p>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue