1
0
Fork 0
mirror of https://github.com/documize/community.git synced 2025-07-28 17:49:41 +02:00

Migrate views to new master layout

This commit is contained in:
Harvey Kandola 2019-05-20 17:40:57 +01:00
parent 14f313a836
commit 08794f8d5f
17 changed files with 419 additions and 414 deletions

View file

@ -17,6 +17,9 @@ import AuthMixin from '../../mixins/auth';
import Component from '@ember/component'; import Component from '@ember/component';
export default Component.extend(AuthMixin, { export default Component.extend(AuthMixin, {
tagName: 'div',
classNames: ['master-sidebar'],
router: service(), router: service(),
documentService: service('document'), documentService: service('document'),
folderService: service('folder'), folderService: service('folder'),

View file

@ -1,19 +1,31 @@
{{#layout/master-sidebar}} <Layout::MasterNavigation />
<Ui::UiSpacer @size=100 /> <Layout::MasterToolbar>
<div class="zone-1">
<div class="section"> {{#link-to "folder.index" folder.id folder.slug class="no-print"}}
{{document/sidebar-meta {{ui/ui-button color=constants.Color.Gray outline=true uppercase=false icon=constants.Icon.ArrowLeft label=folder.name}}
{{/link-to}}
</div>
<div class="zone-2" />
<div class="zone-3">
{{document/document-toolbar
tab=tab
roles=roles roles=roles
pages=pages
space=folder space=folder
spaces=folders spaces=folders
document=document document=document
versions=versions versions=versions
permissions=permissions permissions=permissions
contributionStatus=contributionStatus refresh=(action "refresh")
approvalStatus=approvalStatus}} onSaveTemplate=(action "onSaveTemplate")
onSaveDocument=(action "onSaveDocument")
onDocumentDelete=(action "onDocumentDelete")}}
</div>
</Layout::MasterToolbar>
<Ui::UiSpacer @size=300 /> <Layout::Grid::Container>
<Layout::Grid::Sidebar>
<div class="sidebar-content">
<div class="section">
<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}}
@ -56,21 +68,21 @@
document=document document=document
permissions=permissions}} permissions=permissions}}
{{/if}} {{/if}}
{{/layout/master-sidebar}} </div>
</Layout::Grid::Sidebar>
{{#layout/master-content}} <Layout::Grid::Content>
{{document/document-toolbar
tab=tab {{document/sidebar-meta
roles=roles roles=roles
pages=pages
space=folder space=folder
spaces=folders spaces=folders
document=document document=document
versions=versions versions=versions
permissions=permissions permissions=permissions
refresh=(action "refresh") contributionStatus=contributionStatus
onSaveTemplate=(action "onSaveTemplate") approvalStatus=approvalStatus}}
onSaveDocument=(action "onSaveDocument")
onDocumentDelete=(action "onDocumentDelete")}}
{{document/document-meta {{document/document-meta
tab=tab tab=tab
@ -134,4 +146,7 @@
onPageSequenceChange=(action "onPageSequenceChange") onPageSequenceChange=(action "onPageSequenceChange")
onAttachmentUpload=(action "onAttachmentUpload") onAttachmentUpload=(action "onAttachmentUpload")
onAttachmentDelete=(action "onAttachmentDelete")}} onAttachmentDelete=(action "onAttachmentDelete")}}
{{/layout/master-content}} </Layout::Grid::Content>
</Layout::Grid::Container>

View file

@ -1,13 +1,18 @@
{{#layout/master-sidebar}} <Layout::MasterNavigation />
<Ui::UiSpacer @size=300 /> <Layout::MasterToolbar>
<div class="zone-1">
<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.Gray outline=true uppercase=false icon=constants.Icon.ArrowLeft label=document.name}}
{{/link-to}} {{/link-to}}
</div>
<div class="zone-2" />
<div class="zone-3" />
</Layout::MasterToolbar>
<Ui::UiSpacer @size=400 /> <Layout::Grid::Container>
<Layout::Grid::Sidebar>
<div class="sidebar-content">
<div class="section">
<div class="title">REVISIONS</div> <div class="title">REVISIONS</div>
<div class="list"> <div class="list">
{{#each revisions as |revision|}} {{#each revisions as |revision|}}
@ -18,9 +23,10 @@
{{/each}} {{/each}}
</div> </div>
</div> </div>
{{/layout/master-sidebar}} </div>
</Layout::Grid::Sidebar>
{{#layout/master-content}} <Layout::Grid::Content>
{{layout/logo-heading {{layout/logo-heading
title="Content Revisions" title="Content Revisions"
desc="Review previous content changes and roll back edits" desc="Review previous content changes and roll back edits"
@ -34,5 +40,7 @@
revisions=revisions revisions=revisions
revision=selectedRevision revision=selectedRevision
onRollback=(action "onRollback")}} onRollback=(action "onRollback")}}
{{/layout/master-content}} </Layout::Grid::Content>
</Layout::Grid::Container>

View file

@ -1,14 +1,15 @@
{{#layout/master-sidebar}} <Layout::MasterNavigation />
<Ui::UiSpacer @size=300 /> <Layout::MasterToolbar>
<div class="zone-1">
<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}}
{{ui/ui-button color=constants.Color.Yellow light=true icon=constants.Icon.ArrowLeft label="Document"}} {{ui/ui-button color=constants.Color.Gray outline=true uppercase=false icon=constants.Icon.ArrowLeft label=model.document.name}}
{{/link-to}} {{/link-to}}
</div> </div>
{{/layout/master-sidebar}} <div class="zone-2" />
<div class="zone-3" />
</Layout::MasterToolbar>
{{#layout/master-content}} <Layout::Container>
{{document/document-editor {{document/document-editor
document=model.document document=model.document
folder=model.folder folder=model.folder
@ -22,4 +23,4 @@
files=model.attachments files=model.attachments
onAttachmentUpload=(action "onAttachmentUpload") onAttachmentUpload=(action "onAttachmentUpload")
onAttachmentDelete=(action "onAttachmentDelete")}} onAttachmentDelete=(action "onAttachmentDelete")}}
{{/layout/master-content}} </Layout::Container>

View file

@ -1,13 +1,19 @@
{{#layout/master-sidebar}} <Layout::MasterNavigation />
<Ui::UiSpacer @size=300 /> <Layout::MasterToolbar>
<div class="section"> <div class="zone-1">
{{#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.Gray outline=true uppercase=false icon=constants.Icon.ArrowLeft label=model.document.name}}
{{/link-to}} {{/link-to}}
</div>
<div class="zone-2" />
<div class="zone-3" />
</Layout::MasterToolbar>
<Ui::UiSpacer @size=400 /> <Layout::Grid::Container>
<Layout::Grid::Sidebar>
<div class="title">Document Options</div> <div class="sidebar-content">
<div class="section">
<div class="title">Options</div>
<div class="list"> <div class="list">
<div class="item {{if (eq tab "general") "selected"}}" {{action "onTab" "general"}}> <div class="item {{if (eq tab "general") "selected"}}" {{action "onTab" "general"}}>
<i class={{concat "dicon " constants.Icon.Settings}} /> <i class={{concat "dicon " constants.Icon.Settings}} />
@ -37,9 +43,10 @@
{{/if}} {{/if}}
</div> </div>
</div> </div>
{{/layout/master-sidebar}} </div>
</Layout::Grid::Sidebar>
{{#layout/master-content}} <Layout::Grid::Content>
{{#if (eq tab "general")}} {{#if (eq tab "general")}}
{{document/settings-general {{document/settings-general
space=model.folder space=model.folder
@ -84,4 +91,5 @@
onRefresh=(action "onRefresh") onRefresh=(action "onRefresh")
onSaveDocument=(action "onSaveDocument")}} onSaveDocument=(action "onSaveDocument")}}
{{/if}} {{/if}}
{{/layout/master-content}} </Layout::Grid::Content>
</Layout::Grid::Container>

View file

@ -1,13 +1,23 @@
{{#layout/master-sidebar}} <Layout::MasterNavigation />
<Ui::UiSpacer @size=300 /> <Layout::MasterToolbar>
<div class="section"> <div class="zone-1">
{{#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.Gray outline=true uppercase=false icon=constants.Icon.ArrowLeft label=model.folder.name}}
{{/link-to}} {{/link-to}}
</div> </div>
{{/layout/master-sidebar}} </Layout::MasterToolbar>
{{#layout/master-content}} <Layout::Grid::Container>
<Layout::Grid::Sidebar>
<div class="sidebar-content">
<div class="section">
<div class="title">about</div>
<div class="text"></div>
</div>
</div>
</Layout::Grid::Sidebar>
<Layout::Grid::Content>
{{layout/logo-heading {{layout/logo-heading
title="Content Blocks" title="Content Blocks"
desc="Content blocks provide re-usable content that can be inserted into any document" desc="Content blocks provide re-usable content that can be inserted into any document"
@ -15,4 +25,5 @@
{{document/block-editor document=model.document folder=model.folder block=model.block {{document/block-editor document=model.document folder=model.folder block=model.block
onCancel=(action "onCancel") onAction=(action "onAction")}} onCancel=(action "onCancel") onAction=(action "onAction")}}
{{/layout/master-content}} </Layout::Grid::Content>
</Layout::Grid::Container>

View file

@ -3,6 +3,15 @@
<div class="zone-1" /> <div class="zone-1" />
<div class="zone-2" /> <div class="zone-2" />
<div class="zone-3"> <div class="zone-3">
{{folder/space-toolbar
spaces=model.folders
space=model.folder
permissions=model.permissions
templates=model.templates
category=category
categories=model.categories
documents=filteredDocs
onRefresh=(action "onRefresh")}}
</div> </div>
</Layout::MasterToolbar> </Layout::MasterToolbar>
@ -26,66 +35,17 @@
onFiltered=(action "onFiltered") onFiltered=(action "onFiltered")
onRefresh=(action "onRefresh")}} onRefresh=(action "onRefresh")}}
<Layout::Grid::Sidebar>
<div class="sidebar-content">
<div class="section">
<div class="title">ABOUT</div>
<div class="text">
Documize product updates are released frequently for both
cloud and self-hosted customers.
</div>
<div class="text">
Have an idea, suggestion or some feedback? <a href="mailto:support@documize.com">Get in touch.</a>
</div>
</div>
</div>
</Layout::Grid::Sidebar>
<Layout::Grid::Content> <Layout::Grid::Content>
{{layout/logo-heading
title="Product News"
desc="Latest product news and updates"
icon=constants.Icon.Announce}}
<div class="product-news">
{{{newsContent}}}
<div class="action">
Have an idea? Suggestion or feedback? <a href="mailto:support@documize.com">Get in touch!</a>
</div>
</div>
</Layout::Grid::Content>
</Layout::Grid::Container>
{{#layout/master-content}}
<div class="grid-container-6-4">
<div class="grid-cell-1">
{{#if (eq model.folder.labelId "")}} {{#if (eq model.folder.labelId "")}}
<div class="space-label">Unclassified</div> <div class="space-label">Unclassified</div>
{{else}} {{else}}
<div class="space-label" style={{{model.label.bgColor}}}>{{model.label.name}}</div> <div class="space-label" style={{{model.label.bgColor}}}>{{model.label.name}}</div>
{{/if}} {{/if}}
{{layout/logo-heading {{layout/logo-heading
title=model.folder.name title=model.folder.name
desc=model.folder.desc desc=model.folder.desc
meta=model.folder.icon}} meta=model.folder.icon}}
</div>
<div class="grid-cell-2 grid-cell-right">
{{folder/space-toolbar
spaces=model.folders
space=model.folder
permissions=model.permissions
templates=model.templates
category=category
categories=model.categories
documents=filteredDocs
onRefresh=(action "onRefresh")}}
</div>
</div>
{{folder/documents-list {{folder/documents-list
documents=filteredDocs documents=filteredDocs
@ -98,4 +58,5 @@
onExportDocument=(action "onExportDocument") onExportDocument=(action "onExportDocument")
onDeleteDocument=(action "onDeleteDocument") onDeleteDocument=(action "onDeleteDocument")
onMoveDocument=(action "onMoveDocument")}} onMoveDocument=(action "onMoveDocument")}}
{{/layout/master-content}} </Layout::Grid::Content>
</Layout::Grid::Container>

View file

@ -1,13 +1,16 @@
{{#layout/master-sidebar}} <Layout::MasterNavigation />
<Ui::UiSpacer @size=300 /> <Layout::MasterToolbar>
<div class="zone-1">
<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.Gray outline=true uppercase=false icon=constants.Icon.ArrowLeft label=model.folder.name}}
{{/link-to}} {{/link-to}}
</div>
</Layout::MasterToolbar>
<Ui::UiSpacer @size=400 /> <Layout::Grid::Container>
<Layout::Grid::Sidebar>
<div class="sidebar-content">
<div class="section">
<div class="title">space management</div> <div class="title">space management</div>
<div class="list"> <div class="list">
<div class="item {{if (eq tab "general") "selected"}}" {{action "onTab" "general"}}> <div class="item {{if (eq tab "general") "selected"}}" {{action "onTab" "general"}}>
@ -40,9 +43,10 @@
{{/if}} {{/if}}
</div> </div>
</div> </div>
{{/layout/master-sidebar}} </div>
</Layout::Grid::Sidebar>
{{#layout/master-content}} <Layout::Grid::Content>
{{#if (eq tab "general")}} {{#if (eq tab "general")}}
{{folder/settings-general permissions=model.permissions space=model.folder labels=model.labels}} {{folder/settings-general permissions=model.permissions space=model.folder labels=model.labels}}
{{/if}} {{/if}}
@ -72,4 +76,5 @@
{{#if (eq tab "deletion")}} {{#if (eq tab "deletion")}}
{{folder/settings-delete permissions=model.permissions spaces=model.folder space=model.folder}} {{folder/settings-delete permissions=model.permissions spaces=model.folder space=model.folder}}
{{/if}} {{/if}}
{{/layout/master-content}} </Layout::Grid::Content>
</Layout::Grid::Container>

View file

@ -17,7 +17,7 @@
**************************************************************/ **************************************************************/
/************************************************************** /**************************************************************
* Gray, Grey shades * Gray shades
**************************************************************/ **************************************************************/
$gray-shades: ( $gray-shades: (
900: #1F2833, 900: #1F2833,
@ -155,7 +155,7 @@ $color-white-dark-1: #f5f5f5;
// Documents and spaces card background color // Documents and spaces card background color
$color-card: #F6F4EE; $color-card: #F6F4EE;
$color-sidebar: #F6F4EE; $color-sidebar: #f2f8fd;
// $color-card: #F6F4EE; // $color-card: #F6F4EE;
// $color-sidebar: #f2f8fd; // $color-sidebar: #f2f8fd;

View file

@ -162,7 +162,7 @@ $sidebar-height: auto;
height: $sidebar-height; height: $sidebar-height;
// overflow-x: hidden; // overflow-x: hidden;
// overflow-y: auto; // overflow-y: auto;
padding: 20px 15px; padding: 20px 10px 20px 20px;
} }
.master-content { .master-content {
@ -199,7 +199,7 @@ $sidebar-height: auto;
.master-sidebar { .master-sidebar {
width: 300px; width: 300px;
padding: 40px 20px; padding: 40px 10px 40px 20px;
} }
.master-content { .master-content {
@ -214,11 +214,11 @@ $sidebar-height: auto;
@media (min-width: $display-break-4) and (min-height: 650px) { @media (min-width: $display-break-4) and (min-height: 650px) {
.master-grid-container { .master-grid-container {
display: grid; display: grid;
grid-template-columns: 350px minmax(auto, 1200px); grid-template-columns: 400px minmax(auto, 1200px);
.master-sidebar { .master-sidebar {
width: 350px; width: 400px;
padding: 40px 20px; padding: 40px 10px 40px 20px;
} }
.master-content { .master-content {
@ -264,6 +264,6 @@ $sidebar-height: auto;
@media (min-width: $display-break-4) and (min-height: 650px) { @media (min-width: $display-break-4) and (min-height: 650px) {
.master-container { .master-container {
padding: 40px; padding: 40px;
max-width: 1200px; // max-width: 1200px;
} }
} }

View file

@ -1,10 +1,11 @@
.sidebar-content { .sidebar-content {
display: block; display: block;
position: relative; position: relative;
padding: 20px 10px 10px 10px; padding: 20px 5px 20px 10px;
// background-color: $theme-100;
background-color: $color-sidebar; background-color: $color-sidebar;
@include border-radius(4px); // background-color: map-get($gray-shades, 100);
border: 1px solid map-get($gray-shades, 100); @include border-radius(6px);
> .section { > .section {
margin: 0; margin: 0;

View file

@ -10,7 +10,6 @@
padding: 0; padding: 0;
> .file { > .file {
@include card();
list-style-type: none; list-style-type: none;
margin: 10px 0 0 0; margin: 10px 0 0 0;
padding: 5px; padding: 5px;
@ -25,11 +24,6 @@
margin-right: 10px; margin-right: 10px;
width: 90%; width: 90%;
@extend .text-truncate; @extend .text-truncate;
color: map-get($gray-shades, 800);
&:hover {
color: map-get($gray-shades, 900);
}
} }
> .menu { > .menu {

View file

@ -26,21 +26,24 @@
padding: 0; padding: 0;
list-style: none; list-style: none;
font-size: 1rem; font-size: 1rem;
overflow-x: hidden;
list-style-type: none; list-style-type: none;
margin: 0 0 0 0; margin: 0 0 0 0;
.item { .item {
@extend .no-select; @extend .no-select;
padding: 5px 0; padding: 5px 0;
text-overflow: ellipsis; // text-overflow: ellipsis;
word-wrap: break-word; // word-wrap: break-word;
white-space: nowrap; // white-space: nowrap;
overflow: hidden; // overflow: hidden;
> .link { > .link {
color: map-get($gray-shades, 800); color: map-get($gray-shades, 800);
font-weight: 500; // font-weight: 300;
// text-overflow: ellipsis;
// word-wrap: break-word;
// white-space: nowrap;
overflow: hidden;
&:hover { &:hover {
color: map-get($yellow-shades, 600); color: map-get($yellow-shades, 600);
@ -48,7 +51,7 @@
> .numbering { > .numbering {
color: map-get($gray-shades, 600); color: map-get($gray-shades, 600);
font-weight: 500; font-weight: 300;
display: inline-block; display: inline-block;
margin-right: 10px; margin-right: 10px;
font-size: 0.9rem; font-size: 0.9rem;

View file

@ -17,7 +17,6 @@
> .document { > .document {
@include card(); @include card();
box-shadow: none;
list-style-type: none; list-style-type: none;
margin: 0 0 2rem 0; margin: 0 0 2rem 0;
padding: 15px 20px; padding: 15px 20px;

View file

@ -1,10 +1,4 @@
<div class="document-meta"> <div class="document-meta">
{{#link-to "folder.index" space.id space.slug class="no-print"}}
{{ui/ui-button light=true color=constants.Color.Yellow uppercase=false
icon=constants.Icon.ArrowLeft label=space.name stretch=true truncate=true}}
{{/link-to}}
<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>
{{#if (gt versions.length 0)}} {{#if (gt versions.length 0)}}

View file

@ -1,5 +1,5 @@
<Layout::Grid::Sidebar>
<div class="sidebar-content"> <div class="sidebar-content">
<div class="section">
<div class="title">filter</div> <div class="title">filter</div>
<div class="list"> <div class="list">
<div class="item {{if (eq selectedFilter "space") "selected"}}" {{action "onDocumentFilter" "space" space.id}}> <div class="item {{if (eq selectedFilter "space") "selected"}}" {{action "onDocumentFilter" "space" space.id}}>
@ -39,9 +39,11 @@
<div class="name">Updated recently ({{recentUpdate.length}})</div> <div class="name">Updated recently ({{recentUpdate.length}})</div>
</div> </div>
</div> </div>
</div>
<Ui::UiSpacer @size=200 /> <Ui::UiSpacer @size=200 />
<div class="section">
<div class="title">category</div> <div class="title">category</div>
<div class="list"> <div class="list">
{{#if categories}} {{#if categories}}
@ -55,4 +57,4 @@
{{/if}} {{/if}}
</div> </div>
</div> </div>
</Layout::Grid::Sidebar> </div>

View file

@ -18,7 +18,7 @@
{{/ui/ui-toolbar}} {{/ui/ui-toolbar}}
{{#if permissions.documentAdd}} {{#if permissions.documentAdd}}
{{#ui/ui-toolbar dark=false light=true raised=true large=true bordered=true}} {{#ui/ui-toolbar dark=false light=true raised=true large=false bordered=true}}
{{ui/ui-toolbar-icon icon=constants.Icon.Plus color=constants.Color.Green}} {{ui/ui-toolbar-icon icon=constants.Icon.Plus color=constants.Color.Green}}
{{ui/ui-toolbar-label label="CONTENT" color=constants.Color.Green}} {{ui/ui-toolbar-label label="CONTENT" color=constants.Color.Green}}
{{#attach-popover class="ember-attacher-popper" hideOn="clickout" showOn="click" isShown=false}} {{#attach-popover class="ember-attacher-popper" hideOn="clickout" showOn="click" isShown=false}}