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:
parent
14f313a836
commit
08794f8d5f
17 changed files with 419 additions and 414 deletions
|
@ -17,6 +17,9 @@ import AuthMixin from '../../mixins/auth';
|
|||
import Component from '@ember/component';
|
||||
|
||||
export default Component.extend(AuthMixin, {
|
||||
tagName: 'div',
|
||||
classNames: ['master-sidebar'],
|
||||
|
||||
router: service(),
|
||||
documentService: service('document'),
|
||||
folderService: service('folder'),
|
||||
|
|
|
@ -1,19 +1,31 @@
|
|||
{{#layout/master-sidebar}}
|
||||
<Ui::UiSpacer @size=100 />
|
||||
|
||||
<div class="section">
|
||||
{{document/sidebar-meta
|
||||
<Layout::MasterNavigation />
|
||||
<Layout::MasterToolbar>
|
||||
<div class="zone-1">
|
||||
{{#link-to "folder.index" folder.id folder.slug class="no-print"}}
|
||||
{{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
|
||||
pages=pages
|
||||
space=folder
|
||||
spaces=folders
|
||||
document=document
|
||||
versions=versions
|
||||
permissions=permissions
|
||||
contributionStatus=contributionStatus
|
||||
approvalStatus=approvalStatus}}
|
||||
refresh=(action "refresh")
|
||||
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">
|
||||
{{#ui/ui-toolbar dark=false light=true raised=true large=false bordered=true}}
|
||||
|
@ -56,21 +68,21 @@
|
|||
document=document
|
||||
permissions=permissions}}
|
||||
{{/if}}
|
||||
{{/layout/master-sidebar}}
|
||||
</div>
|
||||
</Layout::Grid::Sidebar>
|
||||
|
||||
{{#layout/master-content}}
|
||||
{{document/document-toolbar
|
||||
tab=tab
|
||||
<Layout::Grid::Content>
|
||||
|
||||
{{document/sidebar-meta
|
||||
roles=roles
|
||||
pages=pages
|
||||
space=folder
|
||||
spaces=folders
|
||||
document=document
|
||||
versions=versions
|
||||
permissions=permissions
|
||||
refresh=(action "refresh")
|
||||
onSaveTemplate=(action "onSaveTemplate")
|
||||
onSaveDocument=(action "onSaveDocument")
|
||||
onDocumentDelete=(action "onDocumentDelete")}}
|
||||
contributionStatus=contributionStatus
|
||||
approvalStatus=approvalStatus}}
|
||||
|
||||
{{document/document-meta
|
||||
tab=tab
|
||||
|
@ -134,4 +146,7 @@
|
|||
onPageSequenceChange=(action "onPageSequenceChange")
|
||||
onAttachmentUpload=(action "onAttachmentUpload")
|
||||
onAttachmentDelete=(action "onAttachmentDelete")}}
|
||||
{{/layout/master-content}}
|
||||
</Layout::Grid::Content>
|
||||
</Layout::Grid::Container>
|
||||
|
||||
|
||||
|
|
|
@ -1,13 +1,18 @@
|
|||
{{#layout/master-sidebar}}
|
||||
<Ui::UiSpacer @size=300 />
|
||||
|
||||
<div class="section">
|
||||
<Layout::MasterNavigation />
|
||||
<Layout::MasterToolbar>
|
||||
<div class="zone-1">
|
||||
{{#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}}
|
||||
</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="list">
|
||||
{{#each revisions as |revision|}}
|
||||
|
@ -18,9 +23,10 @@
|
|||
{{/each}}
|
||||
</div>
|
||||
</div>
|
||||
{{/layout/master-sidebar}}
|
||||
</div>
|
||||
</Layout::Grid::Sidebar>
|
||||
|
||||
{{#layout/master-content}}
|
||||
<Layout::Grid::Content>
|
||||
{{layout/logo-heading
|
||||
title="Content Revisions"
|
||||
desc="Review previous content changes and roll back edits"
|
||||
|
@ -34,5 +40,7 @@
|
|||
revisions=revisions
|
||||
revision=selectedRevision
|
||||
onRollback=(action "onRollback")}}
|
||||
{{/layout/master-content}}
|
||||
</Layout::Grid::Content>
|
||||
</Layout::Grid::Container>
|
||||
|
||||
|
||||
|
|
|
@ -1,14 +1,15 @@
|
|||
{{#layout/master-sidebar}}
|
||||
<Ui::UiSpacer @size=300 />
|
||||
|
||||
<div class="section">
|
||||
<Layout::MasterNavigation />
|
||||
<Layout::MasterToolbar>
|
||||
<div class="zone-1">
|
||||
{{#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}}
|
||||
</div>
|
||||
{{/layout/master-sidebar}}
|
||||
<div class="zone-2" />
|
||||
<div class="zone-3" />
|
||||
</Layout::MasterToolbar>
|
||||
|
||||
{{#layout/master-content}}
|
||||
<Layout::Container>
|
||||
{{document/document-editor
|
||||
document=model.document
|
||||
folder=model.folder
|
||||
|
@ -22,4 +23,4 @@
|
|||
files=model.attachments
|
||||
onAttachmentUpload=(action "onAttachmentUpload")
|
||||
onAttachmentDelete=(action "onAttachmentDelete")}}
|
||||
{{/layout/master-content}}
|
||||
</Layout::Container>
|
||||
|
|
|
@ -1,13 +1,19 @@
|
|||
{{#layout/master-sidebar}}
|
||||
<Ui::UiSpacer @size=300 />
|
||||
<div class="section">
|
||||
<Layout::MasterNavigation />
|
||||
<Layout::MasterToolbar>
|
||||
<div class="zone-1">
|
||||
{{#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}}
|
||||
</div>
|
||||
<div class="zone-2" />
|
||||
<div class="zone-3" />
|
||||
</Layout::MasterToolbar>
|
||||
|
||||
<Ui::UiSpacer @size=400 />
|
||||
|
||||
<div class="title">Document Options</div>
|
||||
<Layout::Grid::Container>
|
||||
<Layout::Grid::Sidebar>
|
||||
<div class="sidebar-content">
|
||||
<div class="section">
|
||||
<div class="title">Options</div>
|
||||
<div class="list">
|
||||
<div class="item {{if (eq tab "general") "selected"}}" {{action "onTab" "general"}}>
|
||||
<i class={{concat "dicon " constants.Icon.Settings}} />
|
||||
|
@ -37,9 +43,10 @@
|
|||
{{/if}}
|
||||
</div>
|
||||
</div>
|
||||
{{/layout/master-sidebar}}
|
||||
</div>
|
||||
</Layout::Grid::Sidebar>
|
||||
|
||||
{{#layout/master-content}}
|
||||
<Layout::Grid::Content>
|
||||
{{#if (eq tab "general")}}
|
||||
{{document/settings-general
|
||||
space=model.folder
|
||||
|
@ -84,4 +91,5 @@
|
|||
onRefresh=(action "onRefresh")
|
||||
onSaveDocument=(action "onSaveDocument")}}
|
||||
{{/if}}
|
||||
{{/layout/master-content}}
|
||||
</Layout::Grid::Content>
|
||||
</Layout::Grid::Container>
|
||||
|
|
|
@ -1,13 +1,23 @@
|
|||
{{#layout/master-sidebar}}
|
||||
<Ui::UiSpacer @size=300 />
|
||||
<div class="section">
|
||||
<Layout::MasterNavigation />
|
||||
<Layout::MasterToolbar>
|
||||
<div class="zone-1">
|
||||
{{#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}}
|
||||
</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
|
||||
title="Content Blocks"
|
||||
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
|
||||
onCancel=(action "onCancel") onAction=(action "onAction")}}
|
||||
{{/layout/master-content}}
|
||||
</Layout::Grid::Content>
|
||||
</Layout::Grid::Container>
|
||||
|
|
|
@ -3,6 +3,15 @@
|
|||
<div class="zone-1" />
|
||||
<div class="zone-2" />
|
||||
<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>
|
||||
</Layout::MasterToolbar>
|
||||
|
||||
|
@ -26,66 +35,17 @@
|
|||
onFiltered=(action "onFiltered")
|
||||
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/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 "")}}
|
||||
<div class="space-label">Unclassified</div>
|
||||
{{else}}
|
||||
<div class="space-label" style={{{model.label.bgColor}}}>{{model.label.name}}</div>
|
||||
{{/if}}
|
||||
|
||||
{{layout/logo-heading
|
||||
title=model.folder.name
|
||||
desc=model.folder.desc
|
||||
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
|
||||
documents=filteredDocs
|
||||
|
@ -98,4 +58,5 @@
|
|||
onExportDocument=(action "onExportDocument")
|
||||
onDeleteDocument=(action "onDeleteDocument")
|
||||
onMoveDocument=(action "onMoveDocument")}}
|
||||
{{/layout/master-content}}
|
||||
</Layout::Grid::Content>
|
||||
</Layout::Grid::Container>
|
||||
|
|
|
@ -1,13 +1,16 @@
|
|||
{{#layout/master-sidebar}}
|
||||
<Ui::UiSpacer @size=300 />
|
||||
|
||||
<div class="section">
|
||||
<Layout::MasterNavigation />
|
||||
<Layout::MasterToolbar>
|
||||
<div class="zone-1">
|
||||
{{#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}}
|
||||
</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="list">
|
||||
<div class="item {{if (eq tab "general") "selected"}}" {{action "onTab" "general"}}>
|
||||
|
@ -40,9 +43,10 @@
|
|||
{{/if}}
|
||||
</div>
|
||||
</div>
|
||||
{{/layout/master-sidebar}}
|
||||
</div>
|
||||
</Layout::Grid::Sidebar>
|
||||
|
||||
{{#layout/master-content}}
|
||||
<Layout::Grid::Content>
|
||||
{{#if (eq tab "general")}}
|
||||
{{folder/settings-general permissions=model.permissions space=model.folder labels=model.labels}}
|
||||
{{/if}}
|
||||
|
@ -72,4 +76,5 @@
|
|||
{{#if (eq tab "deletion")}}
|
||||
{{folder/settings-delete permissions=model.permissions spaces=model.folder space=model.folder}}
|
||||
{{/if}}
|
||||
{{/layout/master-content}}
|
||||
</Layout::Grid::Content>
|
||||
</Layout::Grid::Container>
|
||||
|
|
|
@ -17,7 +17,7 @@
|
|||
**************************************************************/
|
||||
|
||||
/**************************************************************
|
||||
* Gray, Grey shades
|
||||
* Gray shades
|
||||
**************************************************************/
|
||||
$gray-shades: (
|
||||
900: #1F2833,
|
||||
|
@ -155,7 +155,7 @@ $color-white-dark-1: #f5f5f5;
|
|||
|
||||
// Documents and spaces card background color
|
||||
$color-card: #F6F4EE;
|
||||
$color-sidebar: #F6F4EE;
|
||||
$color-sidebar: #f2f8fd;
|
||||
// $color-card: #F6F4EE;
|
||||
// $color-sidebar: #f2f8fd;
|
||||
|
||||
|
|
|
@ -162,7 +162,7 @@ $sidebar-height: auto;
|
|||
height: $sidebar-height;
|
||||
// overflow-x: hidden;
|
||||
// overflow-y: auto;
|
||||
padding: 20px 15px;
|
||||
padding: 20px 10px 20px 20px;
|
||||
}
|
||||
|
||||
.master-content {
|
||||
|
@ -199,7 +199,7 @@ $sidebar-height: auto;
|
|||
|
||||
.master-sidebar {
|
||||
width: 300px;
|
||||
padding: 40px 20px;
|
||||
padding: 40px 10px 40px 20px;
|
||||
}
|
||||
|
||||
.master-content {
|
||||
|
@ -214,11 +214,11 @@ $sidebar-height: auto;
|
|||
@media (min-width: $display-break-4) and (min-height: 650px) {
|
||||
.master-grid-container {
|
||||
display: grid;
|
||||
grid-template-columns: 350px minmax(auto, 1200px);
|
||||
grid-template-columns: 400px minmax(auto, 1200px);
|
||||
|
||||
.master-sidebar {
|
||||
width: 350px;
|
||||
padding: 40px 20px;
|
||||
width: 400px;
|
||||
padding: 40px 10px 40px 20px;
|
||||
}
|
||||
|
||||
.master-content {
|
||||
|
@ -264,6 +264,6 @@ $sidebar-height: auto;
|
|||
@media (min-width: $display-break-4) and (min-height: 650px) {
|
||||
.master-container {
|
||||
padding: 40px;
|
||||
max-width: 1200px;
|
||||
// max-width: 1200px;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,10 +1,11 @@
|
|||
.sidebar-content {
|
||||
display: block;
|
||||
position: relative;
|
||||
padding: 20px 10px 10px 10px;
|
||||
padding: 20px 5px 20px 10px;
|
||||
// background-color: $theme-100;
|
||||
background-color: $color-sidebar;
|
||||
@include border-radius(4px);
|
||||
border: 1px solid map-get($gray-shades, 100);
|
||||
// background-color: map-get($gray-shades, 100);
|
||||
@include border-radius(6px);
|
||||
|
||||
> .section {
|
||||
margin: 0;
|
||||
|
|
|
@ -10,7 +10,6 @@
|
|||
padding: 0;
|
||||
|
||||
> .file {
|
||||
@include card();
|
||||
list-style-type: none;
|
||||
margin: 10px 0 0 0;
|
||||
padding: 5px;
|
||||
|
@ -25,11 +24,6 @@
|
|||
margin-right: 10px;
|
||||
width: 90%;
|
||||
@extend .text-truncate;
|
||||
color: map-get($gray-shades, 800);
|
||||
|
||||
&:hover {
|
||||
color: map-get($gray-shades, 900);
|
||||
}
|
||||
}
|
||||
|
||||
> .menu {
|
||||
|
|
|
@ -26,21 +26,24 @@
|
|||
padding: 0;
|
||||
list-style: none;
|
||||
font-size: 1rem;
|
||||
overflow-x: hidden;
|
||||
list-style-type: none;
|
||||
margin: 0 0 0 0;
|
||||
|
||||
.item {
|
||||
@extend .no-select;
|
||||
padding: 5px 0;
|
||||
text-overflow: ellipsis;
|
||||
word-wrap: break-word;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
// text-overflow: ellipsis;
|
||||
// word-wrap: break-word;
|
||||
// white-space: nowrap;
|
||||
// overflow: hidden;
|
||||
|
||||
> .link {
|
||||
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 {
|
||||
color: map-get($yellow-shades, 600);
|
||||
|
@ -48,7 +51,7 @@
|
|||
|
||||
> .numbering {
|
||||
color: map-get($gray-shades, 600);
|
||||
font-weight: 500;
|
||||
font-weight: 300;
|
||||
display: inline-block;
|
||||
margin-right: 10px;
|
||||
font-size: 0.9rem;
|
||||
|
|
|
@ -17,7 +17,6 @@
|
|||
|
||||
> .document {
|
||||
@include card();
|
||||
box-shadow: none;
|
||||
list-style-type: none;
|
||||
margin: 0 0 2rem 0;
|
||||
padding: 15px 20px;
|
||||
|
|
|
@ -1,10 +1,4 @@
|
|||
<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)}}
|
||||
<div class="title">VERSION</div>
|
||||
{{#if (gt versions.length 0)}}
|
||||
|
|
|
@ -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="list">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Ui::UiSpacer @size=200 />
|
||||
|
||||
<div class="section">
|
||||
<div class="title">category</div>
|
||||
<div class="list">
|
||||
{{#if categories}}
|
||||
|
@ -55,4 +57,4 @@
|
|||
{{/if}}
|
||||
</div>
|
||||
</div>
|
||||
</Layout::Grid::Sidebar>
|
||||
</div>
|
||||
|
|
|
@ -18,7 +18,7 @@
|
|||
{{/ui/ui-toolbar}}
|
||||
|
||||
{{#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-label label="CONTENT" color=constants.Color.Green}}
|
||||
{{#attach-popover class="ember-attacher-popper" hideOn="clickout" showOn="click" isShown=false}}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue