1
0
Fork 0
mirror of https://github.com/documize/community.git synced 2025-07-24 15:49:44 +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 2019-05-20 10:39:48 +01:00
parent bce1c1b166
commit 62c3cd03ad
51 changed files with 433 additions and 525 deletions

View file

@ -26,7 +26,7 @@
</ul>
</div>
{{ui/ui-spacer size=300}}
<Ui::UiSpacer @size=300 />
{{#if isKeycloakProvider}}
<div class="form-group">

View file

@ -26,7 +26,7 @@
</small>
</div>
</div>
{{ui/ui-spacer size=400}}
<Ui::UiSpacer @size=400 />
<div class="change-log">
{{{changelog}}}
</div>

View file

@ -29,7 +29,7 @@
{{ui/ui-button color=constants.Color.Yellow light=true label="Upgrade"}}
</a>
{{/if}}
{{ui/ui-spacer size=400}}
<Ui::UiSpacer @size=400 />
<form>
<div class="form-group">
@ -101,7 +101,7 @@
{{#if (eq appMeta.edition constants.Product.EnterpriseEdition)}}
{{#if (eq appMeta.location "cloud")}}
{{ui/ui-spacer size=400}}
<Ui::UiSpacer @size=400 />
<div class="view-customize">
<div class="deactivation-zone">
<p>Let us know if you would like to close your account or cancel your subscription.</p>

View file

@ -1,6 +1,6 @@
{{#if spaces}}
{{ui/ui-button color=constants.Color.Yellow light=true icon=constants.Icon.Export label="Export All Content" onClick=(action "onExport")}}
{{ui/ui-spacer size=300}}
<Ui::UiSpacer @size=300 />
<div class="view-customize">
<ul class="space-list">
@ -28,7 +28,7 @@
</div>
<div class="desc">Some description that is to be wired up to the backend</div>
{{/link-to}}
{{ui/ui-spacer size=200}}
<Ui::UiSpacer @size=200 />
{{#ui/ui-toolbar dark=false light=true raised=true large=false bordered=true}}
{{ui/ui-toolbar-icon icon=constants.Icon.AddUser color=constants.Color.Green tooltip="Add myself as owner" onClick=(action "onOwner" space.id)}}
{{ui/ui-toolbar-icon icon=constants.Icon.Delete color=constants.Color.Red tooltip="Delete space" onClick=(action "onShow" space.id)}}

View file

@ -6,7 +6,7 @@
label=constants.Label.Add
onClick=(action "onShowAddModal")}}
{{ui/ui-spacer size=300}}
<Ui::UiSpacer @size=300 />
<ul class="space-labels">
{{#each labels as |label|}}
@ -75,4 +75,4 @@
{{#ui/ui-dialog title="Delete Label" confirmCaption="Delete" buttonColor=constants.Color.Red show=showDeleteDialog onAction=(action "onDelete")}}
<p>Are you sure you want to delete the label <b>{{deleteLabel.name}}?</b></p>
{{/ui/ui-dialog}}
{{/ui/ui-dialog}}

View file

@ -21,9 +21,9 @@
{{input id="newUserEmail" type="email" class="form-control" placeholder="Email" value=newUser.email}}
</div>
</div>
{{ui/ui-spacer size=200}}
<Ui::UiSpacer @size=200 />
{{ui/ui-button color=constants.Color.Green icon=constants.Icon.Person light=true label=constants.Label.Add onClick=(action "onAddUser")}}
{{ui/ui-spacer size=300}}
<Ui::UiSpacer @size=300 />
</form>
<form onsubmit={{action "onAddUser"}}>
<div class="form-group">

View file

@ -26,7 +26,7 @@
</div>
</div>
{{ui/ui-spacer size=300}}
<Ui::UiSpacer @size=300 />
<div class="groups-list">
{{#each groups as |group|}}
@ -35,7 +35,7 @@
{{group.name}} ({{group.members}})
</div>
<div class="desc">{{group.purpose}}</div>
{{ui/ui-spacer size=200}}
<Ui::UiSpacer @size=200 />
{{#ui/ui-toolbar dark=false light=true raised=true large=false bordered=true}}
{{ui/ui-toolbar-icon icon=constants.Icon.AddUser color=constants.Color.Gray tooltip="Add members" onClick=(action "onShowAddMemberModal" group.id)}}
{{#if (gt group.members 0)}}
@ -146,7 +146,7 @@
{{ui/ui-toolbar-label color=constants.Color.Gray label="ALL" selected=(eq userLimit 99999) onClick=(action "onLimit" 99999)}}
{{/ui/ui-toolbar}}
</div>
{{ui/ui-spacer size=300}}
<Ui::UiSpacer @size=300 />
<div class="group-users-members">
{{#each users as |user|}}
<div class="item">
@ -169,4 +169,4 @@
</div>
</div>
</div>
</div>
</div>

View file

@ -1,6 +1,6 @@
<div class="view-customize">
{{#if isAuthProviderKeycloak}}
{{ui/ui-spacer size=300}}
<Ui::UiSpacer @size=300 />
{{#if syncInProgress}}
{{ui/ui-button color=constants.Color.Gray light=true icon=constants.Icon.Locked label="Keycloak user sync running..."}}
{{else}}
@ -9,7 +9,7 @@
{{/if}}
{{#if (or isAuthProviderLDAP c)}}
{{ui/ui-spacer size=300}}
<Ui::UiSpacer @size=300 />
{{#if syncInProgress}}
{{ui/ui-button color=constants.Color.Gray light=true icon=constants.Icon.Locked label="LDAP user sync running..."}}
{{else}}
@ -17,7 +17,7 @@
{{/if}}
{{/if}}
{{ui/ui-spacer size=300}}
<Ui::UiSpacer @size=300 />
<div class="explain-user-perms">
<div class="title" {{action "togglePerms"}}>
Permissions Explained
@ -40,7 +40,7 @@
<div class="perm-desc">Can login and use Documize</div>
</div>
</div>
{{ui/ui-spacer size=300}}
<Ui::UiSpacer @size=300 />
<div class="form-group">
{{focus-input type="text" class="form-control" placeholder="filter users" value=filter key-up=(action "onFilterChange")}}