1
0
Fork 0
mirror of https://github.com/documize/community.git synced 2025-07-19 21:29:42 +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

@ -17,7 +17,7 @@ import Component from '@ember/component';
export default Component.extend(Modals, { export default Component.extend(Modals, {
tagName: 'div', tagName: 'div',
classNames: ['master-sidebar-container', 'non-printable'], classNames: ['master-navigation', 'non-printable'],
selectedItem: '', selectedItem: '',
folderService: service('folder'), folderService: service('folder'),
appMeta: service(), appMeta: service(),

View file

@ -0,0 +1,18 @@
// Copyright 2016 Documize Inc. <legal@documize.com>. All rights reserved.
//
// This software (Documize Community Edition) is licensed under
// GNU AGPL v3 http://www.gnu.org/licenses/agpl-3.0.en.html
//
// You can operate outside the AGPL restrictions by purchasing
// Documize Enterprise Edition and obtaining a commercial license
// by contacting <sales@documize.com>.
//
// https://documize.com
import Modals from '../../mixins/modal';
import Component from '@ember/component';
export default Component.extend(Modals, {
tagName: 'div',
classNames: ['master-navigation', 'non-printable'],
});

View file

@ -19,7 +19,9 @@ export default Component.extend({
size: 500, size: 500,
calcClass: computed(function() { calcClass: computed(function() {
switch(this.size) { let size = parseInt(this.size, 10);
switch(size) {
case 100: case 100:
return 'spacer-100'; return 'spacer-100';

View file

@ -1,5 +1,5 @@
{{#layout/master-sidebar hideNavigation=true}} {{#layout/master-sidebar hideNavigation=true}}
{{ui/ui-spacer size=300}} <Ui::UiSpacer @size=300 />
<div class="section"> <div class="section">
<div class="title">welcome to documize</div> <div class="title">welcome to documize</div>
<p>Let's set up your account and you started</p> <p>Let's set up your account and you started</p>

View file

@ -1,5 +1,5 @@
{{#layout/master-sidebar selectedItem="settings"}} {{#layout/master-sidebar selectedItem="settings"}}
{{ui/ui-spacer size=300}} <Ui::UiSpacer @size=300 />
<div class="section"> <div class="section">
<div class="title">administration</div> <div class="title">administration</div>
@ -68,4 +68,4 @@
{{#layout/master-content}} {{#layout/master-content}}
{{outlet}} {{outlet}}
{{/layout/master-content}} {{/layout/master-content}}

View file

@ -1,5 +1,5 @@
{{#layout/master-sidebar}} {{#layout/master-sidebar}}
{{ui/ui-spacer size=100}} <Ui::UiSpacer @size=100 />
<div class="section"> <div class="section">
{{document/sidebar-meta {{document/sidebar-meta
@ -13,7 +13,7 @@
contributionStatus=contributionStatus contributionStatus=contributionStatus
approvalStatus=approvalStatus}} approvalStatus=approvalStatus}}
{{ui/ui-spacer size=300}} <Ui::UiSpacer @size=300 />
<div class="text-center"> <div class="text-center">
{{#ui/ui-toolbar dark=false light=true raised=true large=false bordered=true}} {{#ui/ui-toolbar dark=false light=true raised=true large=false bordered=true}}
@ -29,7 +29,7 @@
</div> </div>
</div> </div>
{{ui/ui-spacer size=200}} <Ui::UiSpacer @size=200 />
{{#if (eq sidebarTab "toc")}} {{#if (eq sidebarTab "toc")}}
{{document/sidebar-toc {{document/sidebar-toc
@ -85,7 +85,7 @@
approvalStatus=approvalStatus}} approvalStatus=approvalStatus}}
{{#if contributionStatus}} {{#if contributionStatus}}
{{ui/ui-spacer size=200}} <Ui::UiSpacer @size=200 />
<div class="document-meta"> <div class="document-meta">
<div class="label-workflow-status"> <div class="label-workflow-status">
{{contributionStatus}} {{contributionStatus}}
@ -93,7 +93,7 @@
</div> </div>
{{else}} {{else}}
{{#if approvalStatus}} {{#if approvalStatus}}
{{ui/ui-spacer size=200}} <Ui::UiSpacer @size=200 />
<div class="document-meta"> <div class="document-meta">
<div class="label-workflow-status"> <div class="label-workflow-status">
{{approvalStatus}} {{approvalStatus}}
@ -102,7 +102,7 @@
{{/if}} {{/if}}
{{/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-meta {{if permissions.documentEdit "cursor-pointer"}}" {{action "onEditMeta"}}>
<div class="document-heading"> <div class="document-heading">

View file

@ -1,12 +1,12 @@
{{#layout/master-sidebar}} {{#layout/master-sidebar}}
{{ui/ui-spacer size=300}} <Ui::UiSpacer @size=300 />
<div class="section"> <div class="section">
{{#link-to "document.index"}} {{#link-to "document.index"}}
{{ui/ui-button color=constants.Color.Yellow light=true icon=constants.Icon.ArrowLeft label="Document"}} {{ui/ui-button color=constants.Color.Yellow light=true icon=constants.Icon.ArrowLeft label="Document"}}
{{/link-to}} {{/link-to}}
{{ui/ui-spacer size=400}} <Ui::UiSpacer @size=400 />
<div class="title">REVISIONS</div> <div class="title">REVISIONS</div>
<div class="list"> <div class="list">

View file

@ -1,5 +1,5 @@
{{#layout/master-sidebar}} {{#layout/master-sidebar}}
{{ui/ui-spacer size=300}} <Ui::UiSpacer @size=300 />
<div class="section"> <div class="section">
{{#link-to "document.index" model.folder.id model.folder.slug model.document.id model.document.slug}} {{#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-sidebar}}
{{#layout/master-content}} {{#layout/master-content}}
{{document/document-editor {{document/document-editor
document=model.document document=model.document
folder=model.folder folder=model.folder
page=model.page page=model.page
meta=model.meta meta=model.meta
attachments=model.attachments attachments=model.attachments
onCancel=(action "onCancel") onAction=(action "onAction")}} onCancel=(action "onCancel") onAction=(action "onAction")}}
{{document/section-attachment uploadLabel="Upload Attachments" {{document/section-attachment uploadLabel="Upload Attachments"
editMode=true page=model.page document=model.document editMode=true page=model.page document=model.document
files=model.attachments files=model.attachments
onAttachmentUpload=(action "onAttachmentUpload") onAttachmentUpload=(action "onAttachmentUpload")
onAttachmentDelete=(action "onAttachmentDelete")}} onAttachmentDelete=(action "onAttachmentDelete")}}

View file

@ -1,11 +1,11 @@
{{#layout/master-sidebar}} {{#layout/master-sidebar}}
{{ui/ui-spacer size=300}} <Ui::UiSpacer @size=300 />
<div class="section"> <div class="section">
{{#link-to "document.index"}} {{#link-to "document.index"}}
{{ui/ui-button color=constants.Color.Yellow light=true icon=constants.Icon.ArrowLeft label="Document"}} {{ui/ui-button color=constants.Color.Yellow light=true icon=constants.Icon.ArrowLeft label="Document"}}
{{/link-to}} {{/link-to}}
{{ui/ui-spacer size=400}} <Ui::UiSpacer @size=400 />
<div class="title">Document Options</div> <div class="title">Document Options</div>
<div class="list"> <div class="list">

View file

@ -1,5 +1,5 @@
{{#layout/master-sidebar}} {{#layout/master-sidebar}}
{{ui/ui-spacer size=300}} <Ui::UiSpacer @size=300 />
<div class="section"> <div class="section">
{{#link-to "folder.settings"}} {{#link-to "folder.settings"}}
{{ui/ui-button color=constants.Color.Yellow light=true icon=constants.Icon.ArrowLeft label="Space Settings"}} {{ui/ui-button color=constants.Color.Yellow light=true icon=constants.Icon.ArrowLeft label="Space Settings"}}

View file

@ -1,12 +1,12 @@
{{#layout/master-sidebar}} {{#layout/master-sidebar}}
{{ui/ui-spacer size=300}} <Ui::UiSpacer @size=300 />
<div class="section"> <div class="section">
{{#link-to "folder.index"}} {{#link-to "folder.index"}}
{{ui/ui-button color=constants.Color.Yellow light=true icon=constants.Icon.ArrowLeft label="Space"}} {{ui/ui-button color=constants.Color.Yellow light=true icon=constants.Icon.ArrowLeft label="Space"}}
{{/link-to}} {{/link-to}}
{{ui/ui-spacer size=400}} <Ui::UiSpacer @size=400 />
<div class="title">space management</div> <div class="title">space management</div>
<div class="list"> <div class="list">

View file

@ -1,138 +1,148 @@
{{#layout/master-sidebar selectedItem="spaces"}} <Layout::MasterNavigation @selectedItem="spaces" />
{{ui/ui-spacer size=300}} <Layout::MasterToolbar>
<div class="zone-1">
<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>
</div> </div>
<div class="zone-2">
{{ui/ui-spacer size=300}} </div>
<div class="zone-3">
<div class="section"> {{#if (or session.isEditor session.isAdmin)}}
<div class="title">label</div> {{#ui/ui-toolbar dark=false light=true raised=true large=false bordered=true tooltip="New space"}}
{{#if labels}} {{#if session.isEditor}}
<div class="list"> {{ui/ui-toolbar-icon icon=constants.Icon.Plus color=constants.Color.Green onClick=(action "onShowModal")}}
{{#each labels as |label|}} {{ui/ui-toolbar-label label="SPACE" color=constants.Color.Green onClick=(action "onShowModal")}}
{{#if (gt label.count 0)}} {{/if}}
<div class="item {{if (eq selectedView label.id) "selected"}}" {{action "onSelect" label.id}}> {{/ui/ui-toolbar}}
<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}} {{/if}}
</div> </div>
{{/layout/master-sidebar}} </Layout::MasterToolbar>
{{#layout/master-content}} <div class="master-container">
<div class="grid-container-8-2"> <div class="master-sidebar">
<div class="grid-cell-1"> <div class="sidebar-content">
{{layout/logo-heading {{yield}}
title=appMeta.title
desc=appMeta.message <Ui::UiSpacer @size=300 />
logo=true}}
</div> <div class="section">
<div class="grid-cell-2 grid-cell-right"> <div class="title">filter</div>
{{#if (or session.isEditor session.isAdmin)}} <div class="list">
{{#ui/ui-toolbar dark=false light=true raised=true large=true bordered=true tooltip="New space"}} <div class="item {{if (eq selectedView "all") "selected"}}" {{action "onSelect" "all"}}>
{{#if session.isEditor}} <i class={{concat "dicon " constants.Icon.All}} />
{{ui/ui-toolbar-icon icon=constants.Icon.Plus color=constants.Color.Green onClick=(action "onShowModal")}} <div class="name">All ({{model.spaces.length}})</div>
{{ui/ui-toolbar-label label="SPACE" color=constants.Color.Green onClick=(action "onShowModal")}} </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}} {{/if}}
{{/ui/ui-toolbar}} </div>
{{/if}} </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>
</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" tabindex="-1" role="dialog" id="add-space-modal">
<div class="modal-dialog modal-lg" role="document"> <div class="modal-dialog modal-lg" role="document">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header">New Space</div> <div class="modal-header">New Space</div>
<div class="modal-body"> <div class="modal-body">
<form onsubmit={{action "onAddSpace"}}> <form onsubmit={{action "onAddSpace"}}>
<div class="form-group"> <div class="form-group">
<label for="new-space-name">Name</label> <label for="new-space-name">Name</label>
{{input type="text" id="new-space-name" class="form-control mousetrap" placeholder="Space name" value=spaceName}} {{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> <small class="form-text text-muted">Characters and numbers only</small>
</div> </div>
<div class="form-group"> <div class="form-group">
<label>Description</label> <label>Description</label>
{{focus-input id="space-desc" type="text" value=spaceDesc class="form-control" placeholder="Space description" autocomplete="off"}} {{focus-input id="space-desc" type="text" value=spaceDesc class="form-control" placeholder="Space description" autocomplete="off"}}
</div> </div>
<div class="form-group"> <div class="form-group">
<label>Icon</label> <label>Icon</label>
<div class="ui-icon-picker"> <div class="ui-icon-picker">
<ul class="list"> <ul class="list">
{{#each iconList as |icon|}} {{#each iconList as |icon|}}
<li class="item {{if (eq spaceIcon icon) "selected"}}" {{action "onSetIcon" icon}}> <li class="item {{if (eq spaceIcon icon) "selected"}}" {{action "onSetIcon" icon}}>
{{ui/ui-icon-meta icon=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> </li>
{{/each}} {{/each}}
</ul> </ul>
</div> </div>
</div>
<div class="form-group"> <div class="form-group">
<label>Label</label> <label for="clone-space-dropdown">Clone Space</label>
<ul class="space-label-picker"> {{ui/ui-select id="clone-space-dropdown" content=spaces prompt="select space" action=(action "onCloneSpaceSelect") optionValuePath="id" optionLabelPath="name" selection=clonedSpace}}
<li class="label none {{if (eq spaceLabel "") "selected"}}" {{action "onSetLabel" ""}}>None</li> <small id="emailHelp" class="form-text text-muted">Copy templates, permissions, documents from existing space</small>
{{#each labels as |label|}} <div class="margin-top-10" />
<li class="label {{if (eq spaceLabel label.id) "selected"}}" {{#if hasClone}}
style={{label.bgColor}} {{#ui/ui-checkbox selected=copyTemplate}}Copy templates{{/ui/ui-checkbox}}
{{action "onSetLabel" label.id}} title={{label.name}}> {{#ui/ui-checkbox selected=copyPermission}}Copy permissions{{/ui/ui-checkbox}}
{{label.name}} {{#ui/ui-checkbox selected=copyDocument}}Copy documents{{/ui/ui-checkbox}}
</li> {{/if}}
{{/each}} </div>
</ul> </form>
</div> </div>
<div class="modal-footer">
<div class="form-group"> {{ui/ui-button color=constants.Color.Gray light=true label=constants.Label.Cancel dismiss=true}}
<label for="clone-space-dropdown">Clone Space</label> {{ui/ui-button-gap}}
{{ui/ui-select id="clone-space-dropdown" content=spaces prompt="select space" action=(action "onCloneSpaceSelect") optionValuePath="id" optionLabelPath="name" selection=clonedSpace}} {{ui/ui-button color=constants.Color.Green light=true label=constants.Label.Add onClick=(action "onAddSpace")}}
<small id="emailHelp" class="form-text text-muted">Copy templates, permissions, documents from existing space</small> </div>
<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> </div>
</div> </div>
{{/layout/master-content}}
</div>
<Layout::MasterContent>
</Layout::MasterContent>

View file

@ -1,5 +1,5 @@
{{#layout/master-sidebar selectedItem="search"}} {{#layout/master-sidebar selectedItem="search"}}
{{ui/ui-spacer size=300}} <Ui::UiSpacer @size=300 />
<div class="section"> <div class="section">
<div class="title">Match Filter</div> <div class="title">Match Filter</div>
@ -22,7 +22,7 @@
</div> </div>
</div> </div>
</div> </div>
{{ui/ui-spacer size=200}} <Ui::UiSpacer @size=200 />
<div class="section"> <div class="section">
<div class="title">query examples</div> <div class="title">query examples</div>

View file

@ -1,9 +1,9 @@
{{#layout/master-sidebar}} {{#layout/master-sidebar}}
{{ui/ui-spacer size=300}} <Ui::UiSpacer @size=300 />
<div class="section"> <div class="section">
<div class="title">SUMMARY</div> <div class="title">SUMMARY</div>
{{ui/ui-spacer size=100}} <Ui::UiSpacer @size=100 />
<p>Documize {{appMeta.edition}} Edition</p> <p>Documize {{appMeta.edition}} Edition</p>
<p>Version {{appMeta.version}}</p> <p>Version {{appMeta.version}}</p>
<p>Build {{appMeta.revision}}</p> <p>Build {{appMeta.revision}}</p>

View file

@ -1,5 +1,5 @@
@import "grid.scss"; @import "grid.scss";
@import "spacing.scss"; @import "spacing.scss";
@import "headings.scss"; @import "headings.scss";
@import "master-internal.scss"; @import "bars.scss";
@import "sidebar.scss"; @import "sidebar.scss";

View file

@ -1,6 +1,117 @@
// CSS GRID LAYOUT // CSS GRID LAYOUT
// Mobile-first layout // Mobile-first layout
.master-navigation {
display: block;
height: auto;
width: 100%;
> .navbar {
display: block;
height: auto;
width: 100%;
background-color: $theme-500;
text-align: center;
padding: 0;
z-index: 999;
> .container {
display: flex;
flex-grow: 1;
flex-direction: row;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
width: 100%;
padding: 0 20px;
> .options {
> .selected {
> .dicon {
color: $color-white !important;
}
}
> .option {
cursor: pointer;
display: inline-block;
> .dicon {
display: inline-block;
color: $theme-300;
font-size: 20px;
padding: 10px 10px;
}
&:hover {
> .dicon {
color: $theme-400 !important;
}
}
}
> .invalid-plan {
> .dicon {
color: map-get($yellow-shades, 600) !important;
}
}
> .user-gravatar-container {
display: inline-block;
margin: 0;
padding: 7px 10px;
vertical-align: top;
> .user-gravatar {
display: inline-block;
cursor: pointer;
position: relative;
width: 26px;
height: 26px;
line-height: 26px;
padding: 0;
border-radius: 50%;
font-size: 0.85rem;
text-align: center;
color: $theme-500;
font-weight: bold;
background-color: $color-white;
@extend .no-select;
}
}
}
}
}
> .toolbar {
display: block;
height: auto;
min-height: 40px;
width: 100%;
background-color: map-get($gray-shades, 100);
background-color: $color-sidebar;
text-align: center;
padding: 0;
z-index: 999;
> .container {
display: flex;
flex-grow: 1;
flex-direction: row;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
width: 100%;
padding: 0 10px;
> div[class^="zone-"], div[class*=" zone-"] {
margin: 0;
padding: 10px 10px;
}
}
}
}
.master-container { .master-container {
display: block; display: block;
height: auto; height: auto;
@ -14,119 +125,33 @@
} }
} }
// Desktop layout adjustments
// Small screen starts around 900px
@media (min-width: $display-break-1) and (min-height: 650px) {
.master-navigation {
> .navbar {
}
> .toolbar {
}
}
}
.master-sidebar-container { .master-sidebar-container {
display: block; display: block;
height: auto; height: auto;
width: 100%; width: 100%;
z-index: 1041; // required if we want to show modals from inside sidebar //z-index: 1041; // required if we want to show modals from inside sidebar
.master-navbar {
display: block;
height: auto;
width: 100%;
background-color: $theme-500;
text-align: center;
padding: 0;
z-index: 999;
> .nav-content {
display: flex;
flex-grow: 1;
flex-direction: row;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
width: 100%;
> .nav-options {
> .selected {
> .dicon, > .name {
color: $color-white !important;
}
}
> .option {
cursor: pointer;
display: inline-block;
> .dicon {
display: inline-block;
color: $theme-300;
font-size: 20px;
padding: 10px;
}
> .name {
display: none;
color: $theme-300;
}
&:hover {
> .dicon, > .name {
color: $theme-400 !important;
}
}
}
}
> .meta {
> .logo {
display: none;
cursor: pointer;
}
> .bookmarks, > .login, > .invalid-plan {
display: inline-block;
>.dicon {
cursor: pointer;
color: $color-white;
font-size: 20px;
padding: 10px;
}
}
> .invalid-plan {
>.dicon {
color: map-get($yellow-shades, 600) !important;
}
}
> .user-gravatar-container {
display: inline-block;
margin: 0 10px 0 0;
padding: 0;
vertical-align: text-bottom;
> .user-gravatar {
cursor: pointer;
position: relative;
width: 25px;
height: 25px;
line-height: 24px;
padding: 0;
border-radius: 50%;
font-size: 0.75rem;
text-align: center;
color: $theme-500;
font-weight: bold;
background-color: $color-white;
@extend .no-select;
}
}
}
}
}
.master-sidebar {
display: block;
height: auto;
width: 100%;
padding: 5px 10px;
z-index: 888;
// background-color: map-get($gray-shades, 100);
background-color: $color-sidebar;
}
} }
// Tablet starts around 700px // Tablet starts around 700px
@ -135,98 +160,20 @@
display: grid; display: grid;
grid-template-columns: 240px auto; grid-template-columns: 240px auto;
.master-sidebar {
width: 200px;
height: auto;
max-height: 90vh;
overflow-x: hidden;
overflow-y: auto;
}
.master-content { .master-content {
grid-column-start: 2; grid-column-start: 2;
padding: 20px; padding: 20px;
max-width: calc(100vw - 250px); max-width: calc(100vw - 250px);
} }
} }
.master-sidebar-container {
position: fixed;
width: 240px;
height: 100vh;
.master-navbar {
position: fixed;
top: 0;
left: 0;
width: 40px;
height: 100vh;
text-align: center;
padding: 10px 0;
> .nav-content {
display: flex;
flex-grow: 1;
flex-direction: column;
align-items: center;
justify-content: space-between;
flex-wrap: nowrap;
height: 100vh;
> .nav-options {
> .option {
display: block;
>.dicon {
display: block;
font-size: 20px;
padding: 20px 0;
}
}
}
> .meta {
padding-bottom: 35px;
> .logo {
display: block;
> img {
width: 32px;
height: 32px;
}
> .documize {
display: none;
}
}
> .bookmarks, > .login, > .invalid-plan {
display: block;
>.dicon {
color: $color-white;
font-size: 20px;
padding: 10px 0;
}
}
> .user-gravatar-container {
display: block;
text-align: center;
margin: 10px 0 15px 4px;
padding: 0;
> .user-gravatar {
display: block;
}
}
}
}
}
.master-sidebar {
position: fixed;
top: 0;
left: 40px;
width: 200px;
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
}
}
} }
// Small screen starts around 900px // Small screen starts around 900px
@ -247,63 +194,6 @@
width: 290px; width: 290px;
height: 100vh; height: 100vh;
.master-navbar {
position: fixed;
top: 0;
left: 0;
width: 70px;
height: 100vh;
text-align: center;
> .nav-content {
> .nav-options {
> .option {
> .dicon {
display: block;
font-size: 24px;
padding: 15px 0 10px 0;
}
> .name {
display: block;
padding: 0 0 15px 0;
font-size: 0.8rem;
font-weight: 700;
text-transform: uppercase;
}
}
}
> .meta {
> .logo {
> img {
width: 32px;
height: 32px;
}
> .documize {
display: block;
font-size: 0.7rem;
color: white;
text-decoration: none;
}
}
> .user-gravatar-container {
margin: 10px 0 15px 8px;
padding: 0;
> .user-gravatar {
width: 30px;
height: 30px;
line-height: 30px;
font-size: 0.9rem;
}
}
}
}
}
.master-sidebar { .master-sidebar {
position: fixed; position: fixed;
top: 0; top: 0;
@ -332,13 +222,6 @@
width: 320px; width: 320px;
height: 100vh; height: 100vh;
.master-navbar {
position: fixed;
top: 0;
left: 0;
width: 70px;
height: 100vh;
}
.master-sidebar { .master-sidebar {
position: fixed; position: fixed;
@ -369,14 +252,6 @@
width: 370px; width: 370px;
height: 100vh; height: 100vh;
.master-navbar {
position: fixed;
top: 0;
left: 0;
width: 70px;
height: 100vh;
}
.master-sidebar { .master-sidebar {
position: fixed; position: fixed;
top: 0; top: 0;

View file

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

View file

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

View file

@ -29,7 +29,7 @@
{{ui/ui-button color=constants.Color.Yellow light=true label="Upgrade"}} {{ui/ui-button color=constants.Color.Yellow light=true label="Upgrade"}}
</a> </a>
{{/if}} {{/if}}
{{ui/ui-spacer size=400}} <Ui::UiSpacer @size=400 />
<form> <form>
<div class="form-group"> <div class="form-group">
@ -101,7 +101,7 @@
{{#if (eq appMeta.edition constants.Product.EnterpriseEdition)}} {{#if (eq appMeta.edition constants.Product.EnterpriseEdition)}}
{{#if (eq appMeta.location "cloud")}} {{#if (eq appMeta.location "cloud")}}
{{ui/ui-spacer size=400}} <Ui::UiSpacer @size=400 />
<div class="view-customize"> <div class="view-customize">
<div class="deactivation-zone"> <div class="deactivation-zone">
<p>Let us know if you would like to close your account or cancel your subscription.</p> <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}} {{#if spaces}}
{{ui/ui-button color=constants.Color.Yellow light=true icon=constants.Icon.Export label="Export All Content" onClick=(action "onExport")}} {{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"> <div class="view-customize">
<ul class="space-list"> <ul class="space-list">
@ -28,7 +28,7 @@
</div> </div>
<div class="desc">Some description that is to be wired up to the backend</div> <div class="desc">Some description that is to be wired up to the backend</div>
{{/link-to}} {{/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 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.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)}} {{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 label=constants.Label.Add
onClick=(action "onShowAddModal")}} onClick=(action "onShowAddModal")}}
{{ui/ui-spacer size=300}} <Ui::UiSpacer @size=300 />
<ul class="space-labels"> <ul class="space-labels">
{{#each labels as |label|}} {{#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")}} {{#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> <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}} {{input id="newUserEmail" type="email" class="form-control" placeholder="Email" value=newUser.email}}
</div> </div>
</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-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>
<form onsubmit={{action "onAddUser"}}> <form onsubmit={{action "onAddUser"}}>
<div class="form-group"> <div class="form-group">

View file

@ -26,7 +26,7 @@
</div> </div>
</div> </div>
{{ui/ui-spacer size=300}} <Ui::UiSpacer @size=300 />
<div class="groups-list"> <div class="groups-list">
{{#each groups as |group|}} {{#each groups as |group|}}
@ -35,7 +35,7 @@
{{group.name}} ({{group.members}}) {{group.name}} ({{group.members}})
</div> </div>
<div class="desc">{{group.purpose}}</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 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)}} {{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)}} {{#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-label color=constants.Color.Gray label="ALL" selected=(eq userLimit 99999) onClick=(action "onLimit" 99999)}}
{{/ui/ui-toolbar}} {{/ui/ui-toolbar}}
</div> </div>
{{ui/ui-spacer size=300}} <Ui::UiSpacer @size=300 />
<div class="group-users-members"> <div class="group-users-members">
{{#each users as |user|}} {{#each users as |user|}}
<div class="item"> <div class="item">
@ -169,4 +169,4 @@
</div> </div>
</div> </div>
</div> </div>
</div> </div>

View file

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

View file

@ -1,4 +1,4 @@
{{ui/ui-spacer size=300}} <Ui::UiSpacer @size=300 />
<div class="document-meta"> <div class="document-meta">
<div class="title {{if permissions.documentEdit "cursor-pointer"}}" {{action "onEditCategory"}}>CATEGORY / TAG</div> <div class="title {{if permissions.documentEdit "cursor-pointer"}}" {{action "onEditCategory"}}>CATEGORY / TAG</div>

View file

@ -73,7 +73,7 @@
<label>Destination Document</label> <label>Destination Document</label>
{{focus-input type="text" value=docSearchFilter class="form-control" placeholder="a OR b, x AND y, 'phrase mat*'"}} {{focus-input type="text" value=docSearchFilter class="form-control" placeholder="a OR b, x AND y, 'phrase mat*'"}}
</div> </div>
{{ui/ui-spacer size=100}} <Ui::UiSpacer @size=100 />
<div class="document-copy-move"> <div class="document-copy-move">
{{#if emptySearch}} {{#if emptySearch}}
<p>No matching documents found.</p> <p>No matching documents found.</p>
@ -191,4 +191,4 @@
</div> </div>
</div> </div>
</div> </div>
{{/if}} {{/if}}

View file

@ -1,5 +1,5 @@
{{#if editMode}} {{#if editMode}}
{{ui/ui-spacer size=200}} <Ui::UiSpacer @size=200 />
{{ui/ui-button color=constants.Color.Gray label=uploadLabel id=uploadId}} {{ui/ui-button color=constants.Color.Gray label=uploadLabel id=uploadId}}
{{/if}} {{/if}}
@ -17,7 +17,7 @@
{{#attach-popover class="ember-attacher-popper" hideOn="escapekey, clickout" showOn="click" isShown=false}} {{#attach-popover class="ember-attacher-popper" hideOn="escapekey, clickout" showOn="click" isShown=false}}
<div class="form"> <div class="form">
<p>Are you sure you want to delete this file?</p> <p>Are you sure you want to delete this file?</p>
{{ui/ui-spacer size=100}} <Ui::UiSpacer @size=100 />
{{ui/ui-button {{ui/ui-button
light=false light=false
label=constants.Label.Delete label=constants.Label.Delete
@ -28,7 +28,7 @@
{{/ui/ui-toolbar-icon}} {{/ui/ui-toolbar-icon}}
{{/ui/ui-toolbar}} {{/ui/ui-toolbar}}
</div> </div>
{{/if}} {{/if}}
</li> </li>
{{/if}} {{/if}}
{{/each}} {{/each}}

View file

@ -6,7 +6,7 @@
{{#if categories}} {{#if categories}}
{{ui/ui-list-picker items=categories nameField="category" singleSelect=false}} {{ui/ui-list-picker items=categories nameField="category" singleSelect=false}}
{{ui/ui-spacer size=300}} <Ui::UiSpacer @size=300 />
{{ui/ui-button {{ui/ui-button
color=constants.Color.Green color=constants.Color.Green

View file

@ -12,10 +12,10 @@
</div> </div>
{{input type="text" id=(concat "add-tag-field-" tag.number) class="form-control mousetrap tag-input" placeholder="Tag name" value=tag.value}} {{input type="text" id=(concat "add-tag-field-" tag.number) class="form-control mousetrap tag-input" placeholder="Tag name" value=tag.value}}
</div> </div>
{{ui/ui-spacer size=200}} <Ui::UiSpacer @size=200 />
{{/each}} {{/each}}
{{ui/ui-spacer size=300}} <Ui::UiSpacer @size=300 />
{{ui/ui-button {{ui/ui-button
color=constants.Color.Green color=constants.Color.Green

View file

@ -1,9 +1,9 @@
<div class="title center">attachments</div> <div class="title center">attachments</div>
{{#if canEdit}} {{#if canEdit}}
<div class="text-center"> <div class="text-center">
{{ui/ui-spacer size=100}} <Ui::UiSpacer @size=100 />
{{ui/ui-button color=constants.Color.Gray label="Upload" id="upload-document-files"}} {{ui/ui-button color=constants.Color.Gray label="Upload" id="upload-document-files"}}
{{ui/ui-spacer size=100}} <Ui::UiSpacer @size=100 />
</div> </div>
{{/if}} {{/if}}
@ -23,7 +23,7 @@
{{#attach-popover class="ember-attacher-popper" hideOn="escapekey, clickout" showOn="click" isShown=false}} {{#attach-popover class="ember-attacher-popper" hideOn="escapekey, clickout" showOn="click" isShown=false}}
<div class="form"> <div class="form">
<p>Are you sure you want to delete this file?</p> <p>Are you sure you want to delete this file?</p>
{{ui/ui-spacer size=100}} <Ui::UiSpacer @size=100 />
{{ui/ui-button {{ui/ui-button
light=false light=false
label=constants.Label.Delete label=constants.Label.Delete

View file

@ -3,7 +3,7 @@
{{ui/ui-button light=true color=constants.Color.Yellow uppercase=false {{ui/ui-button light=true color=constants.Color.Yellow uppercase=false
icon=constants.Icon.ArrowLeft label=space.name stretch=true truncate=true}} icon=constants.Icon.ArrowLeft label=space.name stretch=true truncate=true}}
{{/link-to}} {{/link-to}}
{{ui/ui-spacer size=200}} <Ui::UiSpacer @size=200 />
{{#if (eq appMeta.edition constants.Product.EnterpriseEdition)}} {{#if (eq appMeta.edition constants.Product.EnterpriseEdition)}}
<div class="title">VERSION</div> <div class="title">VERSION</div>
@ -29,7 +29,7 @@
{{/if}} {{/if}}
{{/if}} {{/if}}
{{ui/ui-spacer size=200}} <Ui::UiSpacer @size=200 />
{{/if}} {{/if}}
<div class="title {{if permissions.documentEdit "cursor-pointer"}}" {{action "onEditStatus"}}>STATUS</div> <div class="title {{if permissions.documentEdit "cursor-pointer"}}" {{action "onEditStatus"}}>STATUS</div>

View file

@ -17,7 +17,7 @@
</div> </div>
</div> </div>
{{else}} {{else}}
{{ui/ui-spacer size=100}} <Ui::UiSpacer @size=100 />
{{/if}} {{/if}}
<div class="document-sidebar-toc"> <div class="document-sidebar-toc">

View file

@ -1,6 +1,6 @@
{{#if hasPages}} {{#if hasPages}}
{{#each pages key="id" as |item|}} {{#each pages key="id" as |item|}}
{{ui/ui-spacer size=100}} <Ui::UiSpacer @size=100 />
{{document/document-page {{document/document-page
roles=roles roles=roles
pages=pages pages=pages
@ -21,7 +21,7 @@
onMovePage=(action "onMovePage") onMovePage=(action "onMovePage")
onDeletePage=(action "onDeletePage") onDeletePage=(action "onDeletePage")
onSavePageAsBlock=(action "onSavePageAsBlock") onSavePageAsBlock=(action "onSavePageAsBlock")
onPageLevelChange=(action onPageLevelChange) onPageLevelChange=(action onPageLevelChange)
onPageSequenceChange=(action onPageSequenceChange) onPageSequenceChange=(action onPageSequenceChange)
onShowSectionWizard=(action "onShowSectionWizard")}} onShowSectionWizard=(action "onShowSectionWizard")}}
{{/each}} {{/each}}
@ -41,7 +41,7 @@
<div class="thanks">Thanks for the feedback!</div> <div class="thanks">Thanks for the feedback!</div>
{{else}} {{else}}
<div class="prompt">{{folder.likes}}</div> <div class="prompt">{{folder.likes}}</div>
{{ui/ui-spacer size=200}} <Ui::UiSpacer @size=200 />
<div class="buttons"> <div class="buttons">
{{ui/ui-button color=constants.Color.Yellow light=true label="Yes, thanks!" onClick=(action "onVote" 1)}} {{ui/ui-button color=constants.Color.Yellow light=true label="Yes, thanks!" onClick=(action "onVote" 1)}}
{{ui/ui-button-gap}} {{ui/ui-button-gap}}
@ -64,4 +64,4 @@
show=showInsertSectionModal show=showInsertSectionModal
beforePage=newSectionLocation beforePage=newSectionLocation
onInsertSection=(action onInsertSection)}} onInsertSection=(action onInsertSection)}}
{{/if}} {{/if}}

View file

@ -6,7 +6,7 @@
{{#if hasDiff}} {{#if hasDiff}}
<h1>{{revision.title}}</h1> <h1>{{revision.title}}</h1>
<h2>Changed by {{revision.firstname}} {{revision.lastname}}</h2> <h2>Changed by {{revision.firstname}} {{revision.lastname}}</h2>
{{ui/ui-spacer size=200}} <Ui::UiSpacer @size=200 />
<div class="diff-zone wysiwyg"> <div class="diff-zone wysiwyg">
{{{diff}}} {{{diff}}}
</div> </div>
@ -14,7 +14,7 @@
</div> </div>
{{#if canRollback}} {{#if canRollback}}
{{ui/ui-spacer size=400}} <Ui::UiSpacer @size=400 />
{{ui/ui-button color=constants.Color.Red icon=constants.Icon.TimeBack light=true label=constants.Label.Restore onClick=(action "onShowModal")}} {{ui/ui-button color=constants.Color.Red icon=constants.Icon.TimeBack light=true label=constants.Label.Restore onClick=(action "onShowModal")}}
{{/if}} {{/if}}

View file

@ -7,7 +7,7 @@
{{ui/ui-toolbar-icon icon=constants.Icon.All color=constants.Color.Gray tooltip="Comfort" {{ui/ui-toolbar-icon icon=constants.Icon.All color=constants.Color.Gray tooltip="Comfort"
selected=(eq viewDensity "2") onClick=(action "onSwitchView" "2")}} selected=(eq viewDensity "2") onClick=(action "onSwitchView" "2")}}
{{ui/ui-toolbar-label label="—" color=constants.Color.Gray tooltip="Compact" {{ui/ui-toolbar-label label="—" color=constants.Color.Gray tooltip="Compact"
selected=(eq viewDensity "3") onClick=(action "onSwitchView" "3")}} selected=(eq viewDensity "3") onClick=(action "onSwitchView" "3")}}
{{/ui/ui-toolbar}} {{/ui/ui-toolbar}}
{{#ui/ui-button {{#ui/ui-button
@ -16,11 +16,11 @@
uppercase=false uppercase=false
color=constants.Color.Gray color=constants.Color.Gray
label=constants.Label.Sort}} label=constants.Label.Sort}}
{{#attach-popover class="ember-attacher-popper" hideOn="click" showOn="click" isShown=false placement="bottom-end" as |attacher|}} {{#attach-popover class="ember-attacher-popper" hideOn="click" showOn="click" isShown=false placement="bottom-end" as |attacher|}}
<i class="dicon {{constants.Icon.Cross}} closer" {{action attacher.hide}}/> <i class="dicon {{constants.Icon.Cross}} closer" {{action attacher.hide}}/>
<div class="container"> <div class="container">
{{ui/ui-spacer size=100}} <Ui::UiSpacer @size=100 />
<div class="text-center"> <div class="text-center">
<ul class="ui-option-picker ui-option-picker-horiz"> <ul class="ui-option-picker ui-option-picker-horiz">
@ -36,7 +36,7 @@
</ul> </ul>
</div> </div>
{{ui/ui-spacer size=100}} <Ui::UiSpacer @size=100 />
<div class="text-center"> <div class="text-center">
<ul class="ui-option-picker ui-option-picker-horiz"> <ul class="ui-option-picker ui-option-picker-horiz">
@ -49,7 +49,7 @@
</ul> </ul>
</div> </div>
{{ui/ui-spacer size=300}} <Ui::UiSpacer @size=300 />
{{ui/ui-button {{ui/ui-button
light=true light=true
@ -61,7 +61,7 @@
{{/ui/ui-button}} {{/ui/ui-button}}
</div> </div>
{{ui/ui-spacer size=200}} <Ui::UiSpacer @size=200 />
<ul class="documents"> <ul class="documents">
{{#each documents key="id" as |document|}} {{#each documents key="id" as |document|}}
@ -129,4 +129,4 @@
{{#if showLockout}} {{#if showLockout}}
{{ui/empty-state icon=constants.Icon.Preview message="Space permissions are preventing you from viewing and creating documents"}} {{ui/empty-state icon=constants.Icon.Preview message="Space permissions are preventing you from viewing and creating documents"}}
{{/if}} {{/if}}

View file

@ -16,7 +16,7 @@
</div> </div>
</div> </div>
{{ui/ui-spacer size=400}} <Ui::UiSpacer @size=400 />
<div class="space-admin"> <div class="space-admin">
<div class="categories"> <div class="categories">
@ -98,4 +98,4 @@
{{/each}} {{/each}}
</ul> </ul>
</div> </div>
{{/ui/ui-dialog}} {{/ui/ui-dialog}}

View file

@ -22,7 +22,7 @@
<div class="perm-desc">Manage and delete space</div> <div class="perm-desc">Manage and delete space</div>
</div> </div>
{{ui/ui-spacer size=200}} <Ui::UiSpacer @size=200 />
<div class="title" {{action "toggleDocumentPerms"}}> <div class="title" {{action "toggleDocumentPerms"}}>
Document Permissions Explained Document Permissions Explained
@ -55,7 +55,7 @@
</div> </div>
</div> </div>
{{ui/ui-spacer size=300}} <Ui::UiSpacer @size=300 />
<div class="text-center"> <div class="text-center">
{{ui/ui-button color=constants.Color.Gray light=true icon=constants.Icon.Person {{ui/ui-button color=constants.Color.Gray light=true icon=constants.Icon.Person
@ -67,7 +67,7 @@
onClick=(action "onShowInviteModal")}} onClick=(action "onShowInviteModal")}}
</div> </div>
{{ui/ui-spacer size=300}} <Ui::UiSpacer @size=300 />
<div class="space-admin table-responsive"> <div class="space-admin table-responsive">
<table class="table table-hover permission-table"> <table class="table table-hover permission-table">
@ -139,7 +139,7 @@
</table> </table>
</div> </div>
{{ui/ui-spacer size=200}} <Ui::UiSpacer @size=200 />
{{ui/ui-button color=constants.Color.Green light=true icon=constants.Icon.Locked {{ui/ui-button color=constants.Color.Green light=true icon=constants.Icon.Locked
label=constants.Label.Save onClick=(action "onSave")}} label=constants.Label.Save onClick=(action "onSave")}}
@ -150,7 +150,7 @@
<div class="modal-header">Add users to this space</div> <div class="modal-header">Add users to this space</div>
<div class="modal-body"> <div class="modal-body">
{{input id="user-search" type="text" class="form-control mousetrap" placeholder="Search for users by firstname, lastname, email" value=searchText key-up=(action "onSearch")}} {{input id="user-search" type="text" class="form-control mousetrap" placeholder="Search for users by firstname, lastname, email" value=searchText key-up=(action "onSearch")}}
{{ui/ui-spacer size=200}} <Ui::UiSpacer @size=200 />
<div class="space-admin"> <div class="space-admin">
<div class="add-users"> <div class="add-users">
{{#each filteredUsers as |user|}} {{#each filteredUsers as |user|}}

View file

@ -1,4 +1,4 @@
{{ui/ui-spacer size=300}} <Ui::UiSpacer @size=300 />
<div class="title">filter</div> <div class="title">filter</div>
<div class="list"> <div class="list">
@ -40,7 +40,7 @@
</div> </div>
</div> </div>
{{ui/ui-spacer size=200}} <Ui::UiSpacer @size=200 />
<div class="title">category</div> <div class="title">category</div>
<div class="list"> <div class="list">

View file

@ -18,4 +18,4 @@
{{layout/page-desc desc=desc}} {{layout/page-desc desc=desc}}
</div> </div>
</div> </div>
{{ui/ui-spacer size=200}} <Ui::UiSpacer @size=200 />

View file

@ -1,4 +1,4 @@
<div class="master-content"> <div class="master-content">
{{yield}} {{yield}}
</div> </div>
{{ui/ui-spacer size=300}} <Ui::UiSpacer @size=300 />

View file

@ -1,54 +1,60 @@
<div class="master-navbar"> <div class="navbar">
<div class="nav-content"> <div class="container">
<div class="nav-options"> <div class="options">
{{#unless hideNavigation}} {{#unless hideNavigation}}
{{#link-to "folders" class=(if (eq selectedItem "spaces") "option selected" "option")}} {{#link-to "folders" class=(if (eq selectedItem "spaces") "option selected" "option")}}
<i class={{concat "dicon " constants.Icon.Grid}}></i> <i class={{concat "dicon " constants.Icon.Grid}}>
<div class="name">spaces</div> {{#attach-tooltip showDelay=1000}}Spaces{{/attach-tooltip}}
</i>
{{/link-to}} {{/link-to}}
{{#if (eq appMeta.edition constants.Product.EnterpriseEdition)}} {{#if (eq appMeta.edition constants.Product.EnterpriseEdition)}}
{{#if session.viewDashboard}} {{#if session.viewDashboard}}
{{#link-to "action" class=(if (eq selectedItem "actions") "option selected" "option")}} {{#link-to "action" class=(if (eq selectedItem "actions") "option selected" "option")}}
<i class={{concat "dicon " constants.Icon.ListBullet}}></i> <i class={{concat "dicon " constants.Icon.ListBullet}}>
<div class="name">actions</div> {{#attach-tooltip showDelay=1000}}Actions{{/attach-tooltip}}
</i>
{{/link-to}} {{/link-to}}
{{#link-to "activity" class=(if (eq selectedItem "activity") "option selected" "option")}} {{#link-to "activity" class=(if (eq selectedItem "activity") "option selected" "option")}}
<i class={{concat "dicon " constants.Icon.Pulse}}></i> <i class={{concat "dicon " constants.Icon.Pulse}}>
<div class="name">activity</div> {{#attach-tooltip showDelay=1000}}Activity{{/attach-tooltip}}
</i>
{{/link-to}} {{/link-to}}
{{/if}} {{/if}}
{{#if session.viewAnalytics}} {{#if session.viewAnalytics}}
{{#link-to "analytics" class=(if (eq selectedItem "analytics") "option selected" "option")}} {{#link-to "analytics" class=(if (eq selectedItem "analytics") "option selected" "option")}}
<i class={{concat "dicon " constants.Icon.BarChart}}></i> <i class={{concat "dicon " constants.Icon.BarChart}}>
<div class="name">reports</div> {{#attach-tooltip showDelay=1000}}Reports{{/attach-tooltip}}
</i>
{{/link-to}} {{/link-to}}
{{/if}} {{/if}}
{{/if}} {{/if}}
{{#if (and session.authenticated session.isAdmin)}} {{#if (and session.authenticated session.isAdmin)}}
{{#link-to "customize.general" class=(if (eq selectedItem "settings") "option selected" "option")}} {{#link-to "customize.general" class=(if (eq selectedItem "settings") "option selected" "option")}}
<i class={{concat "dicon " constants.Icon.Settings}}></i> <i class={{concat "dicon " constants.Icon.Settings}}>
<div class="name">Settings</div> {{#attach-tooltip showDelay=1000}}Settings{{/attach-tooltip}}
</i>
{{/link-to}} {{/link-to}}
{{/if}} {{/if}}
{{#link-to "search" class=(if (eq selectedItem "search") "option selected" "option")}} {{#link-to "search" class=(if (eq selectedItem "search") "option selected" "option")}}
<i class={{concat "dicon " constants.Icon.Search}}></i> <i class={{concat "dicon " constants.Icon.Search}}>
<div class="name">search</div> {{#attach-tooltip showDelay=1000}}Search{{/attach-tooltip}}
</i>
{{/link-to}} {{/link-to}}
{{/unless}} {{/unless}}
</div> </div>
<div class="meta"> <div class="options">
{{#if session.isAdmin}} {{#if session.isAdmin}}
{{#unless appMeta.valid}} {{#unless appMeta.valid}}
<div class="invalid-plan" {{action "onBilling"}}> <div class="option invalid-plan" {{action "onBilling"}}>
<i class={{concat "dicon " constants.Icon.Handshake}} /> <i class={{concat "dicon " constants.Icon.Announce}} />
{{#attach-tooltip}}Invalid product plan{{/attach-tooltip}} {{#attach-tooltip}}Invalid product plan{{/attach-tooltip}}
</div> </div>
{{/unless}} {{/unless}}
{{/if}} {{/if}}
{{#if session.authenticated}} {{#if session.authenticated}}
{{#if hasPins}} {{#if hasPins}}
<div class="bookmarks" id="user-pins-button"> <div class="option" id="user-pins-button">
<i class={{concat "dicon " constants.Icon.BookmarkSolid}}></i> <i class={{concat "dicon " constants.Icon.BookmarkSolid}}></i>
{{#attach-popover class="ember-attacher-popper" hideOn="clickout click" showOn="click" isShown=false}} {{#attach-popover class="ember-attacher-popper" hideOn="clickout click" showOn="click" isShown=false}}
<div class="menu"> <div class="menu">
@ -69,7 +75,7 @@
</div> </div>
{{/if}} {{/if}}
<div class="user-gravatar-container"> <div class="user-gravatar-container">
<div class="user-gravatar align-text-bottom" id="profile-button"> <div class="user-gravatar" id="profile-button">
{{session.user.initials}} {{session.user.initials}}
{{#if hasWhatsNew}} {{#if hasWhatsNew}}
<div class="whats-new-dot" /> <div class="whats-new-dot" />
@ -112,16 +118,7 @@
</i> </i>
{{/link-to}} {{/link-to}}
{{/if}} {{/if}}
<a class="logo" href="https://documize.com?ref=app">
<img src="/assets/img/icon-white-64x64.png">
<div class="documize">Documize</div>
{{#attach-tooltip showDelay=1000}}Documize {{appMeta.edition}} Edition {{appMeta.version}}{{/attach-tooltip}}
</a>
</div> </div>
</div> </div>
</div> </div>
<div class="master-sidebar">
<div class="sidebar-content">
{{yield}}
</div>
</div>

View file

@ -0,0 +1,6 @@
<div class="toolbar">
<div class="container">
{{yield}}
</div>
</div>

View file

@ -8,7 +8,7 @@
<label for="stage-1-lastname">Last name</label> <label for="stage-1-lastname">Last name</label>
<input id="stage-1-lastname" type="text" value="" class="form-control form-control-lg"> <input id="stage-1-lastname" type="text" value="" class="form-control form-control-lg">
</div> </div>
{{ui/ui-spacer size=300}} <Ui::UiSpacer @size=300 />
{{ui/ui-button id="stage-1-next" color=constants.Color.Green light=true icon=constants.Icon.ArrowRight label=constants.Label.Next}} {{ui/ui-button id="stage-1-next" color=constants.Color.Green light=true icon=constants.Icon.ArrowRight label=constants.Label.Next}}
</div> </div>
@ -24,7 +24,7 @@
<input id="stage-2-password-confirm" type="password" value="" class="form-control form-control-lg"> <input id="stage-2-password-confirm" type="password" value="" class="form-control form-control-lg">
<small class="form-text text-muted">Re-type your chosen password</small> <small class="form-text text-muted">Re-type your chosen password</small>
</div> </div>
{{ui/ui-spacer size=300}} <Ui::UiSpacer @size=300 />
{{ui/ui-button id="stage-2-next" color=constants.Color.Green light=true icon=constants.Icon.ArrowRight label=constants.Label.SignIn}} {{ui/ui-button id="stage-2-next" color=constants.Color.Green light=true icon=constants.Icon.ArrowRight label=constants.Label.SignIn}}
</div> </div>

View file

@ -8,11 +8,11 @@
uppercase=false uppercase=false
color=constants.Color.Gray color=constants.Color.Gray
label=constants.Label.Sort}} label=constants.Label.Sort}}
{{#attach-popover class="ember-attacher-popper" hideOn="click" showOn="click" isShown=false placement="bottom-end" as |attacher|}} {{#attach-popover class="ember-attacher-popper" hideOn="click" showOn="click" isShown=false placement="bottom-end" as |attacher|}}
<i class="dicon {{constants.Icon.Cross}} closer" {{action attacher.hide}}/> <i class="dicon {{constants.Icon.Cross}} closer" {{action attacher.hide}}/>
<div class="container"> <div class="container">
{{ui/ui-spacer size=100}} <Ui::UiSpacer @size=100 />
<div class="text-center"> <div class="text-center">
<ul class="ui-option-picker ui-option-picker-horiz"> <ul class="ui-option-picker ui-option-picker-horiz">
@ -28,7 +28,7 @@
</ul> </ul>
</div> </div>
{{ui/ui-spacer size=100}} <Ui::UiSpacer @size=100 />
<div class="text-center"> <div class="text-center">
<ul class="ui-option-picker ui-option-picker-horiz"> <ul class="ui-option-picker ui-option-picker-horiz">
@ -41,7 +41,7 @@
</ul> </ul>
</div> </div>
{{ui/ui-spacer size=300}} <Ui::UiSpacer @size=300 />
{{ui/ui-button {{ui/ui-button
light=true light=true
@ -53,7 +53,7 @@
{{/ui/ui-button}} {{/ui/ui-button}}
</div> </div>
{{ui/ui-spacer size=200}} <Ui::UiSpacer @size=200 />
{{/if}} {{/if}}
<div class="result-summary">{{resultPhrase}}</div> <div class="result-summary">{{resultPhrase}}</div>
@ -78,4 +78,4 @@
{{/each}} {{/each}}
</ul> </ul>
</div> </div>

View file

@ -10,7 +10,7 @@
{{#if validSearch}} {{#if validSearch}}
{{search/search-results results=results keywords=keywords}} {{search/search-results results=results keywords=keywords}}
{{else}} {{else}}
{{ui/ui-spacer size=300}} <Ui::UiSpacer @size=300 />
<p class="color-red-700">Your search query is too short</p> <p class="color-red-700">Your search query is too short</p>
{{/if}} {{/if}}
</div> </div>

View file

@ -8,7 +8,7 @@
{{#link-to "customize.integrations"}} {{#link-to "customize.integrations"}}
{{ui/ui-button color=constants.Color.Green light=true label="Configure Jira Connector"}} {{ui/ui-button color=constants.Color.Green light=true label="Configure Jira Connector"}}
{{/link-to}} {{/link-to}}
{{ui/ui-spacer size=300}} <Ui::UiSpacer @size=300 />
{{else}} {{else}}
{{#unless authenticated}} {{#unless authenticated}}
<p class="color-green-600">Your Documize administrator needs to provide Jira connection details before usage.</p> <p class="color-green-600">Your Documize administrator needs to provide Jira connection details before usage.</p>
@ -23,10 +23,10 @@
{{ui/ui-button color=constants.Color.Yellow light=true label=constants.Label.Preview submit=true onClick=(action "onPreview")}} {{ui/ui-button color=constants.Color.Yellow light=true label=constants.Label.Preview submit=true onClick=(action "onPreview")}}
</form> </form>
{{ui/ui-spacer size=300}} <Ui::UiSpacer @size=300 />>
{{{issuesGrid}}} {{{issuesGrid}}}
{{else}} {{else}}
{{ui/ui-spacer size=300}} <Ui::UiSpacer @size=300 />
<p class="color-gray-700">Jira connector not authenticated</p> <p class="color-gray-700">Jira connector not authenticated</p>
{{/if}} {{/if}}
{{/section/base-editor}} {{/section/base-editor}}

View file

@ -9,7 +9,7 @@
<div class="section-plantuml-diagram"> <div class="section-plantuml-diagram">
<div class="form-group"> <div class="form-group">
<label><a href="http://plantuml.com/" target="_blank">PlantUML Diagram</a></label> <label><a href="http://plantuml.com/" target="_blank">PlantUML Diagram</a></label>
{{ui/ui-spacer size=200}} <Ui::UiSpacer @size=200 />
<div> <div>
<p>Insert sample diagrams:</p> <p>Insert sample diagrams:</p>
<p> <p>
@ -26,16 +26,16 @@
</div> </div>
</div> </div>
{{ui/ui-spacer size=200}} <Ui::UiSpacer @size=200 />
{{ui/ui-button color=constants.Color.Yellow light=true label=previewButtonCaption onClick=(action "onPreview")}} {{ui/ui-button color=constants.Color.Yellow light=true label=previewButtonCaption onClick=(action "onPreview")}}
{{ui/ui-spacer size=200}} <Ui::UiSpacer @size=200 />
<div id={{previewId}} class="text-center"> <div id={{previewId}} class="text-center">
<img src={{diagramPreview}}> <img src={{diagramPreview}}>
</div> </div>
{{ui/ui-spacer size=200}} <Ui::UiSpacer @size=200 />
{{/section/base-editor}} {{/section/base-editor}}

View file

@ -17,7 +17,7 @@
onClick=(action "onShowImportModal")}} onClick=(action "onShowImportModal")}}
</div> </div>
{{ui/ui-spacer size=300}} <Ui::UiSpacer @size=300 />
<div id={{editorId}} class="mousetrap wysiwyg wysiwyg-editor"> <div id={{editorId}} class="mousetrap wysiwyg wysiwyg-editor">
{{{pageBody}}} {{{pageBody}}}

View file

@ -1,12 +1,12 @@
<div class="installer"> <div class="installer">
<img src="/assets/img/setup/logo-purple.png" srcset="/assets/img/setup/logo-purple@2x.png" alt="Documize Setup" style="width: 250px; height: 76px;"> <img src="/assets/img/setup/logo-purple.png" srcset="/assets/img/setup/logo-purple@2x.png" alt="Documize Setup" style="width: 250px; height: 76px;">
{{ui/ui-spacer size=300}} <Ui::UiSpacer @size=300 />
<h1 class="color-theme-700">Installation Guide</h1> <h1 class="color-theme-700">Installation Guide</h1>
<p class="color-gray-800"> <p class="color-gray-800">
Review the <a href="https://docs.documize.com/s/VzO9ZqMOCgABGyfW/installation-guides/d/V16L08ucxwABhZF6/installation-guide">installation instructions</a> Review the <a href="https://docs.documize.com/s/VzO9ZqMOCgABGyfW/installation-guides/d/V16L08ucxwABhZF6/installation-guide">installation instructions</a>
and recommended <a href="https://docs.documize.com/s/VzO9ZqMOCgABGyfW/installation-guides/d/V2KuM8ICcQABagM5/mysql-specific-database-tuning">database tuning guide</a> and recommended <a href="https://docs.documize.com/s/VzO9ZqMOCgABGyfW/installation-guides/d/V2KuM8ICcQABagM5/mysql-specific-database-tuning">database tuning guide</a>
</p> </p>
{{ui/ui-spacer size=300}} <Ui::UiSpacer @size=300 />
<form {{action "save" on="submit"}}> <form {{action "save" on="submit"}}>
<div class="form-group"> <div class="form-group">
@ -35,5 +35,5 @@
{{ui/ui-button submit=true color=constants.Color.Green light=true label=buttonLabel onClick=(action "save")}} {{ui/ui-button submit=true color=constants.Color.Green light=true label=buttonLabel onClick=(action "save")}}
</form> </form>
{{ui/ui-spacer size=300}} <Ui::UiSpacer @size=300 />
</div> </div>

View file

@ -1,5 +1,5 @@
<div class="view-spaces"> <div class="view-spaces">
<div class="text-right"> <div class="text-right">
{{#ui/ui-toolbar dark=false light=false raised=false large=false bordered=false}} {{#ui/ui-toolbar dark=false light=false raised=false large=false bordered=false}}
{{ui/ui-toolbar-icon icon=constants.Icon.Blocks color=constants.Color.Gray tooltip="Complete" {{ui/ui-toolbar-icon icon=constants.Icon.Blocks color=constants.Color.Gray tooltip="Complete"
@ -7,11 +7,11 @@
{{ui/ui-toolbar-icon icon=constants.Icon.All color=constants.Color.Gray tooltip="Comfort" {{ui/ui-toolbar-icon icon=constants.Icon.All color=constants.Color.Gray tooltip="Comfort"
selected=(eq viewDensity "2") onClick=(action "onSwitchView" "2")}} selected=(eq viewDensity "2") onClick=(action "onSwitchView" "2")}}
{{ui/ui-toolbar-label label="—" color=constants.Color.Gray tooltip="Compact" {{ui/ui-toolbar-label label="—" color=constants.Color.Gray tooltip="Compact"
selected=(eq viewDensity "3") onClick=(action "onSwitchView" "3")}} selected=(eq viewDensity "3") onClick=(action "onSwitchView" "3")}}
{{/ui/ui-toolbar}} {{/ui/ui-toolbar}}
</div> </div>
{{ui/ui-spacer size=200}} <Ui::UiSpacer @size=200 />
<ul class="list"> <ul class="list">
{{#each spaces as |space|}} {{#each spaces as |space|}}

View file

@ -12,6 +12,6 @@
{{ui/ui-button color=constants.Color.Yellow light=true label=constants.Label.Reset onClick=(action "forgot")}} {{ui/ui-button color=constants.Color.Yellow light=true label=constants.Label.Reset onClick=(action "forgot")}}
{{/if}} {{/if}}
{{ui/ui-spacer size=400}} <Ui::UiSpacer @size=400 />
{{#link-to "auth.login"}}Click here to sign in{{/link-to}} {{#link-to "auth.login"}}Click here to sign in{{/link-to}}
</form> </form>