mirror of
https://github.com/documize/community.git
synced 2025-07-19 21:29:42 +02:00
Update document view to use new UI framework
1. Sidebar contains ToC & attachments. 2. Document meta moved up before content (to frame context). 3. Per section toolbar re-designed. Co-Authored-By: Harvey Kandola <harvey@documize.com>
This commit is contained in:
sauls8t
parent
3d2060ca60
commit
93253be0f2
27 changed files with 528 additions and 553 deletions
|
|
@ -10,8 +10,6 @@
|
|||
// https://documize.com
|
||||
|
||||
import { A } from '@ember/array';
|
||||
import { computed } from '@ember/object';
|
||||
import { notEmpty } from '@ember/object/computed';
|
||||
import { inject as service } from '@ember/service';
|
||||
import Modals from '../../mixins/modal';
|
||||
import Component from '@ember/component';
|
||||
|
|
@ -21,99 +19,13 @@ export default Component.extend(Modals, {
|
|||
sessionService: service('session'),
|
||||
categoryService: service('category'),
|
||||
router: service(),
|
||||
contributorMsg: '',
|
||||
approverMsg: '',
|
||||
userChanges: notEmpty('contributorMsg'),
|
||||
isApprover: computed('permissions', function() {
|
||||
return this.get('permissions.documentApprove');
|
||||
}),
|
||||
isSpaceAdmin: computed('permissions', function() {
|
||||
return this.get('permissions.spaceOwner') || this.get('permissions.spaceManage');
|
||||
}),
|
||||
changeControlMsg: computed('document.protection', function() {
|
||||
let p = this.get('document.protection');
|
||||
let constants = this.get('constants');
|
||||
let msg = '';
|
||||
|
||||
switch (p) {
|
||||
case constants.ProtectionType.None:
|
||||
msg = constants.ProtectionType.NoneLabel;
|
||||
break;
|
||||
case constants.ProtectionType.Lock:
|
||||
msg = constants.ProtectionType.LockLabel;
|
||||
break;
|
||||
case constants.ProtectionType.Review:
|
||||
msg = constants.ProtectionType.ReviewLabel;
|
||||
break;
|
||||
}
|
||||
|
||||
return msg;
|
||||
}),
|
||||
approvalMsg: computed('document.{protection,approval}', function() {
|
||||
let p = this.get('document.protection');
|
||||
let a = this.get('document.approval');
|
||||
let constants = this.get('constants');
|
||||
let msg = '';
|
||||
|
||||
if (p === constants.ProtectionType.Review) {
|
||||
switch (a) {
|
||||
case constants.ApprovalType.Anybody:
|
||||
msg = constants.ApprovalType.AnybodyLabel;
|
||||
break;
|
||||
case constants.ApprovalType.Majority:
|
||||
msg = constants.ApprovalType.MajorityLabel;
|
||||
break;
|
||||
case constants.ApprovalType.Unanimous:
|
||||
msg = constants.ApprovalType.UnanimousLabel;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
return msg;
|
||||
}),
|
||||
|
||||
didReceiveAttrs() {
|
||||
this._super(...arguments);
|
||||
|
||||
this.workflowStatus();
|
||||
this.load();
|
||||
},
|
||||
|
||||
workflowStatus() {
|
||||
let pages = this.get('pages');
|
||||
let contributorMsg = '';
|
||||
let userPendingCount = 0;
|
||||
let userReviewCount = 0;
|
||||
let userRejectedCount = 0;
|
||||
let approverMsg = '';
|
||||
let approverPendingCount = 0;
|
||||
let approverReviewCount = 0;
|
||||
let approverRejectedCount = 0;
|
||||
|
||||
pages.forEach((item) => {
|
||||
if (item.get('userHasChangePending')) userPendingCount+=1;
|
||||
if (item.get('userHasChangeAwaitingReview')) userReviewCount+=1;
|
||||
if (item.get('userHasChangeRejected')) userRejectedCount+=1;
|
||||
if (item.get('changePending')) approverPendingCount+=1;
|
||||
if (item.get('changeAwaitingReview')) approverReviewCount+=1;
|
||||
if (item.get('changeRejected')) approverRejectedCount+=1;
|
||||
});
|
||||
|
||||
if (userPendingCount > 0 || userReviewCount > 0 || userRejectedCount > 0) {
|
||||
let label = userPendingCount === 1 ? 'change' : 'changes';
|
||||
contributorMsg = `${userPendingCount} ${label} progressing, ${userReviewCount} awaiting review, ${userRejectedCount} rejected`;
|
||||
}
|
||||
this.set('contributorMsg', contributorMsg);
|
||||
|
||||
if (approverPendingCount > 0 || approverReviewCount > 0 || approverRejectedCount > 0) {
|
||||
let label = approverPendingCount === 1 ? 'change' : 'changes';
|
||||
approverMsg = `${approverPendingCount} ${label} progressing, ${approverReviewCount} awaiting review, ${approverRejectedCount} rejected`;
|
||||
}
|
||||
|
||||
this.set('approverMsg', approverMsg);
|
||||
this.set('selectedVersion', this.get('versions').findBy('documentId', this.get('document.id')));
|
||||
},
|
||||
|
||||
load() {
|
||||
this.get('categoryService').getDocumentCategories(this.get('document.id')).then((selected) => {
|
||||
this.set('selectedCategories', selected);
|
||||
|
|
@ -133,20 +45,6 @@ export default Component.extend(Modals, {
|
|||
},
|
||||
|
||||
actions: {
|
||||
onSelectVersion(version) {
|
||||
let space = this.get('folder');
|
||||
|
||||
this.get('router').transitionTo('document',
|
||||
space.get('id'), space.get('slug'),
|
||||
version.documentId, this.get('document.slug'));
|
||||
},
|
||||
|
||||
onEditLifecycle() {
|
||||
},
|
||||
|
||||
onEditProtection() {
|
||||
},
|
||||
|
||||
onEditCategory() {
|
||||
if (!this.get('permissions.spaceManage')) return;
|
||||
|
||||
|
|
|
|||
156
gui/app/components/document/zdocument-meta.js
Normal file
156
gui/app/components/document/zdocument-meta.js
Normal file
|
|
@ -0,0 +1,156 @@
|
|||
// 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 { A } from '@ember/array';
|
||||
import { computed } from '@ember/object';
|
||||
import { notEmpty } from '@ember/object/computed';
|
||||
import { inject as service } from '@ember/service';
|
||||
import Modals from '../../mixins/modal';
|
||||
import Component from '@ember/component';
|
||||
|
||||
export default Component.extend(Modals, {
|
||||
documentService: service('document'),
|
||||
sessionService: service('session'),
|
||||
categoryService: service('category'),
|
||||
router: service(),
|
||||
contributorMsg: '',
|
||||
approverMsg: '',
|
||||
userChanges: notEmpty('contributorMsg'),
|
||||
isApprover: computed('permissions', function() {
|
||||
return this.get('permissions.documentApprove');
|
||||
}),
|
||||
isSpaceAdmin: computed('permissions', function() {
|
||||
return this.get('permissions.spaceOwner') || this.get('permissions.spaceManage');
|
||||
}),
|
||||
changeControlMsg: computed('document.protection', function() {
|
||||
let p = this.get('document.protection');
|
||||
let constants = this.get('constants');
|
||||
let msg = '';
|
||||
|
||||
switch (p) {
|
||||
case constants.ProtectionType.None:
|
||||
msg = constants.ProtectionType.NoneLabel;
|
||||
break;
|
||||
case constants.ProtectionType.Lock:
|
||||
msg = constants.ProtectionType.LockLabel;
|
||||
break;
|
||||
case constants.ProtectionType.Review:
|
||||
msg = constants.ProtectionType.ReviewLabel;
|
||||
break;
|
||||
}
|
||||
|
||||
return msg;
|
||||
}),
|
||||
approvalMsg: computed('document.{protection,approval}', function() {
|
||||
let p = this.get('document.protection');
|
||||
let a = this.get('document.approval');
|
||||
let constants = this.get('constants');
|
||||
let msg = '';
|
||||
|
||||
if (p === constants.ProtectionType.Review) {
|
||||
switch (a) {
|
||||
case constants.ApprovalType.Anybody:
|
||||
msg = constants.ApprovalType.AnybodyLabel;
|
||||
break;
|
||||
case constants.ApprovalType.Majority:
|
||||
msg = constants.ApprovalType.MajorityLabel;
|
||||
break;
|
||||
case constants.ApprovalType.Unanimous:
|
||||
msg = constants.ApprovalType.UnanimousLabel;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
return msg;
|
||||
}),
|
||||
|
||||
didReceiveAttrs() {
|
||||
this._super(...arguments);
|
||||
|
||||
this.workflowStatus();
|
||||
this.load();
|
||||
},
|
||||
|
||||
workflowStatus() {
|
||||
let pages = this.get('pages');
|
||||
let contributorMsg = '';
|
||||
let userPendingCount = 0;
|
||||
let userReviewCount = 0;
|
||||
let userRejectedCount = 0;
|
||||
let approverMsg = '';
|
||||
let approverPendingCount = 0;
|
||||
let approverReviewCount = 0;
|
||||
let approverRejectedCount = 0;
|
||||
|
||||
pages.forEach((item) => {
|
||||
if (item.get('userHasChangePending')) userPendingCount+=1;
|
||||
if (item.get('userHasChangeAwaitingReview')) userReviewCount+=1;
|
||||
if (item.get('userHasChangeRejected')) userRejectedCount+=1;
|
||||
if (item.get('changePending')) approverPendingCount+=1;
|
||||
if (item.get('changeAwaitingReview')) approverReviewCount+=1;
|
||||
if (item.get('changeRejected')) approverRejectedCount+=1;
|
||||
});
|
||||
|
||||
if (userPendingCount > 0 || userReviewCount > 0 || userRejectedCount > 0) {
|
||||
let label = userPendingCount === 1 ? 'change' : 'changes';
|
||||
contributorMsg = `${userPendingCount} ${label} progressing, ${userReviewCount} awaiting review, ${userRejectedCount} rejected`;
|
||||
}
|
||||
this.set('contributorMsg', contributorMsg);
|
||||
|
||||
if (approverPendingCount > 0 || approverReviewCount > 0 || approverRejectedCount > 0) {
|
||||
let label = approverPendingCount === 1 ? 'change' : 'changes';
|
||||
approverMsg = `${approverPendingCount} ${label} progressing, ${approverReviewCount} awaiting review, ${approverRejectedCount} rejected`;
|
||||
}
|
||||
|
||||
this.set('approverMsg', approverMsg);
|
||||
this.set('selectedVersion', this.get('versions').findBy('documentId', this.get('document.id')));
|
||||
},
|
||||
|
||||
load() {
|
||||
this.get('categoryService').getDocumentCategories(this.get('document.id')).then((selected) => {
|
||||
this.set('selectedCategories', selected);
|
||||
});
|
||||
|
||||
let tagz = [];
|
||||
if (!_.isUndefined(this.get('document.tags')) && this.get('document.tags').length > 1) {
|
||||
let tags = this.get('document.tags').split('#');
|
||||
_.each(tags, function(tag) {
|
||||
if (tag.length > 0) {
|
||||
tagz.pushObject(tag);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
this.set('tagz', A(tagz));
|
||||
},
|
||||
|
||||
actions: {
|
||||
onSelectVersion(version) {
|
||||
let space = this.get('folder');
|
||||
|
||||
this.get('router').transitionTo('document',
|
||||
space.get('id'), space.get('slug'),
|
||||
version.documentId, this.get('document.slug'));
|
||||
},
|
||||
|
||||
onEditLifecycle() {
|
||||
},
|
||||
|
||||
onEditProtection() {
|
||||
},
|
||||
|
||||
onEditCategory() {
|
||||
if (!this.get('permissions.spaceManage')) return;
|
||||
|
||||
this.get('router').transitionTo('document.settings', {queryParams: {tab: 'meta'}});
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
@ -24,6 +24,7 @@ export default Component.extend({
|
|||
light: false,
|
||||
themed: false,
|
||||
dismiss: false,
|
||||
uppercase: true,
|
||||
|
||||
iconClass: '',
|
||||
hasIcon: computed('iconClass', function() {
|
||||
|
|
@ -46,6 +47,10 @@ export default Component.extend({
|
|||
bc += '-light';
|
||||
}
|
||||
|
||||
if (!this.uppercase) {
|
||||
bc += ' text-case-normal';
|
||||
}
|
||||
|
||||
return bc;
|
||||
}),
|
||||
|
||||
|
|
|
|||
|
|
@ -11,7 +11,6 @@
|
|||
|
||||
import { Promise as EmberPromise } from 'rsvp';
|
||||
import { inject as service } from '@ember/service';
|
||||
import { computed } from '@ember/object';
|
||||
import Notifier from '../../../mixins/notifier';
|
||||
import Controller from '@ember/controller';
|
||||
|
||||
|
|
@ -24,13 +23,6 @@ export default Controller.extend(Notifier, {
|
|||
sidebarTab: 'toc',
|
||||
tab: 'content',
|
||||
queryParams: ['currentPageId', 'source'],
|
||||
showRevisions: computed('permissions', 'document.protection', function() {
|
||||
if (!this.get('session.viewUsers')) return false;
|
||||
if (this.get('document.protection') === this.get('constants').ProtectionType.None) return true;
|
||||
if (this.get('document.protection') === this.get('constants').ProtectionType.Review && this.get('permissions.documentApprove')) return true;
|
||||
|
||||
return false;
|
||||
}),
|
||||
|
||||
actions: {
|
||||
onSidebarChange(tab) {
|
||||
|
|
|
|||
|
|
@ -1,23 +1,8 @@
|
|||
{{#layout/master-sidebar}}
|
||||
{{ui/ui-spacer size=300}}
|
||||
{{ui/ui-spacer size=200}}
|
||||
|
||||
<div class="section">
|
||||
<div class="title">status</div>
|
||||
|
||||
<div class="{{if (eq document.lifecycle constants.Lifecycle.Draft) "label-draft"}}
|
||||
{{if (eq document.lifecycle constants.Lifecycle.Live) "label-live"}}
|
||||
{{if (eq document.lifecycle constants.Lifecycle.Archived) "label-archived"}}">
|
||||
{{document.lifecycleLabel}}
|
||||
{{#attach-tooltip showDelay=1000}}Lifecycle: Draft · Live · Archived{{/attach-tooltip}}
|
||||
</div>
|
||||
<div class="label-approval">
|
||||
{{#if (eq document.protection constants.ProtectionType.None)}}OPEN{{/if}}
|
||||
{{#if (eq document.protection constants.ProtectionType.Review)}}PROTECTED{{/if}}
|
||||
{{#if (eq document.protection constants.ProtectionType.Lock)}}LOCKED{{/if}}
|
||||
{{#attach-tooltip showDelay=1000}}Change Control: Open · Protected · Locked{{/attach-tooltip}}
|
||||
</div>
|
||||
|
||||
{{ui/ui-spacer size=200}}
|
||||
{{ui/ui-spacer size=100}}
|
||||
|
||||
<div class="text-center">
|
||||
{{#ui/ui-toolbar dark=true light=true raised=true large=false bordered=true}}
|
||||
|
|
@ -30,6 +15,7 @@
|
|||
</div>
|
||||
|
||||
{{ui/ui-spacer size=200}}
|
||||
|
||||
{{#if (eq sidebarTab "toc")}}
|
||||
{{document/sidebar-toc
|
||||
tab=tab
|
||||
|
|
@ -54,10 +40,18 @@
|
|||
{{#layout/master-content}}
|
||||
<div class="grid-container-6-4">
|
||||
<div class="grid-cell-1">
|
||||
{{document/document-meta
|
||||
tab=tab
|
||||
roles=roles
|
||||
space=folder
|
||||
spaces=folders
|
||||
document=document
|
||||
versions=versions
|
||||
permissions=permissions}}
|
||||
</div>
|
||||
|
||||
<div class="grid-cell-2 grid-cell-right">
|
||||
{{toolbar/for-document
|
||||
{{document/document-toolbar
|
||||
tab=tab
|
||||
roles=roles
|
||||
space=folder
|
||||
|
|
@ -74,38 +68,16 @@
|
|||
|
||||
{{ui/ui-spacer size=400}}
|
||||
|
||||
<div class="text-center non-printable document-tabnav">
|
||||
<ul class="tabnav-control">
|
||||
<li class="tab {{if (eq tab "content") "selected"}}" {{action "onTabChange" "content"}}>Content</li>
|
||||
{{#if session.authenticated}}
|
||||
{{#if showRevisions}}
|
||||
<li class="tab {{if (eq tab "revision") "selected"}}" {{action "onTabChange" "revision"}}>Revisions</li>
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="view-document">
|
||||
<div class="document-heading {{if permissions.documentEdit "cursor-pointer"}}" {{action "onEditMeta"}}>
|
||||
<h1 class="doc-title">
|
||||
<div class="document-meta">
|
||||
<div class="document-heading">
|
||||
<h1 class="name">{{document.name}}</h1>
|
||||
<h2 class="desc">{{document.excerpt}}</h2>
|
||||
{{#if document.template}}
|
||||
<span class="bg-warning p-1 pr-2 pl-2">Template</span>
|
||||
{{/if}}
|
||||
{{document.name}}
|
||||
</h1>
|
||||
<div class="doc-excerpt">{{document.excerpt}}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{document/document-meta
|
||||
pages=pages
|
||||
folder=folder
|
||||
folders=folders
|
||||
document=document
|
||||
versions=versions
|
||||
permissions=permissions
|
||||
onSaveDocument=(action "onSaveDocument")}}
|
||||
|
||||
{{#if (eq tab "content")}}
|
||||
{{document/view-content
|
||||
roles=roles
|
||||
|
|
@ -139,6 +111,5 @@
|
|||
onRollback=(action "onRollback")}}
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
|
||||
{{/layout/master-content}}
|
||||
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@
|
|||
{{layout/page-desc desc="some space desc"}}
|
||||
</div>
|
||||
<div class="grid-cell-2 grid-cell-right">
|
||||
{{toolbar/for-space
|
||||
{{folder/space-toolbar
|
||||
spaces=model.folders
|
||||
space=model.folder
|
||||
permissions=model.permissions
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
{{ui/ui-spacer size=300}}
|
||||
|
||||
{{#link-to "folder.index"}}
|
||||
{{ui/ui-button color=constants.Color.Yellow light=true icon=constants.Icon.ArrowLeft label="Back to space"}}
|
||||
{{ui/ui-button color=constants.Color.Yellow light=true icon=constants.Icon.ArrowLeft label="Space"}}
|
||||
{{/link-to}}
|
||||
|
||||
{{ui/ui-spacer size=400}}
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@ $display-break-5: 1800px;
|
|||
justify-self: self-start;
|
||||
}
|
||||
|
||||
// X- axis alignment
|
||||
// X-axis alignment
|
||||
.grid-cell-left {
|
||||
justify-self: self-end;
|
||||
}
|
||||
|
|
@ -36,7 +36,7 @@ $display-break-5: 1800px;
|
|||
justify-self: center;
|
||||
}
|
||||
|
||||
// Y axis alignment
|
||||
// Y-axis alignment
|
||||
.grid-cell-top {
|
||||
align-self: self-start;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
.sidebar-content {
|
||||
display: block;
|
||||
position: relative;
|
||||
// @extend .text-truncate;
|
||||
|
||||
> .section {
|
||||
margin: 0;
|
||||
|
|
@ -13,6 +14,12 @@
|
|||
color: map-get($gray-shades, 700);
|
||||
}
|
||||
|
||||
> .nav-button {
|
||||
width: 100%;
|
||||
display: inline-block;
|
||||
@extend .no-select;
|
||||
}
|
||||
|
||||
> .center {
|
||||
text-align: center;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -31,6 +31,10 @@
|
|||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.text-case-normal {
|
||||
text-transform: none !important;
|
||||
}
|
||||
|
||||
.bold-100 { font-weight: 100; }
|
||||
.bold-200 { font-weight: 200; }
|
||||
.bold-300 { font-weight: 300; }
|
||||
|
|
|
|||
|
|
@ -48,6 +48,17 @@ a.broken-link {
|
|||
user-select: none;
|
||||
}
|
||||
|
||||
@media print {
|
||||
.no-print {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.no-width {
|
||||
white-space: nowrap;
|
||||
width: 1%;
|
||||
}
|
||||
|
||||
.cursor-pointer {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
|
@ -56,11 +67,6 @@ a.broken-link {
|
|||
cursor: auto !important;
|
||||
}
|
||||
|
||||
.no-width {
|
||||
white-space: nowrap;
|
||||
width: 1%;
|
||||
}
|
||||
|
||||
.absolute-center {
|
||||
margin: auto;
|
||||
position: absolute;
|
||||
|
|
@ -77,37 +83,39 @@ a.broken-link {
|
|||
.hide {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.display-block {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.display-inline-block {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.visible {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.invisible {
|
||||
visibility: none;
|
||||
}
|
||||
.display-block {
|
||||
display: block;
|
||||
}
|
||||
.display-inline-block {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.align-top {
|
||||
vertical-align: top!important;
|
||||
}
|
||||
|
||||
.align-middle {
|
||||
vertical-align: middle!important;
|
||||
}
|
||||
|
||||
.text-left {
|
||||
text-align: left;
|
||||
}
|
||||
.text-right {
|
||||
text-align: right;
|
||||
}
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media print {
|
||||
.no-print {
|
||||
display: none !important;
|
||||
}
|
||||
.float-left {
|
||||
float: left;
|
||||
}
|
||||
.float-right {
|
||||
float: right;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,28 +1,3 @@
|
|||
.start-section {
|
||||
@extend .no-select;
|
||||
background-color: transparent;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
font-size: 1.3rem;
|
||||
|
||||
> .start-button {
|
||||
text-align: center;
|
||||
margin: 30px 0 20px 0;
|
||||
position: relative;
|
||||
color: map-get($gray-shades, 300);
|
||||
|
||||
> .cta {
|
||||
@include ease-in();
|
||||
font-weight: bold;
|
||||
letter-spacing: 0.22rem;
|
||||
|
||||
&:hover {
|
||||
color: map-get($green-shades, 700);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.new-section-wizard {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
@import "add-section.scss";
|
||||
@import "copy-move.scss";
|
||||
@import "doc-meta.scss";
|
||||
@import "doc-structure.scss";
|
||||
@import "meta.scss";
|
||||
@import "section.scss";
|
||||
@import "section-editor.scss";
|
||||
@import "sidebar.scss";
|
||||
@import "sidebar-toc.scss";
|
||||
|
|
|
|||
|
|
@ -1,96 +0,0 @@
|
|||
.view-document {
|
||||
> .document-heading {
|
||||
.doc-title {
|
||||
margin: 50px 0 10px;
|
||||
font-size: 2.2rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.doc-excerpt {
|
||||
font-size: 1.2rem;
|
||||
color: map-get($gray-shades, 600);
|
||||
margin: 0 0 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.document-lifecycle-live {
|
||||
@include border-radius(3px);
|
||||
@include ease-in();
|
||||
display: inline-block;
|
||||
border: 2px solid map-get($green-shades, 700);
|
||||
padding: 2px 10px;
|
||||
color: map-get($gray-shades, 600);
|
||||
background-color: map-get($gray-shades, 100);
|
||||
font-weight: 800;
|
||||
font-size: 1rem;
|
||||
|
||||
&:hover {
|
||||
color: map-get($green-shades, 500);
|
||||
}
|
||||
}
|
||||
|
||||
.document-lifecycle-draft {
|
||||
@extend .document-lifecycle-live;
|
||||
border: 2px solid map-get($yellow-shades, 700);
|
||||
|
||||
&:hover {
|
||||
color: map-get($yellow-shades, 700);
|
||||
}
|
||||
}
|
||||
|
||||
.document-protection-unlocked {
|
||||
@include border-radius(3px);
|
||||
@include ease-in();
|
||||
display: inline-block;
|
||||
padding: 2px 10px;
|
||||
font-weight: 800;
|
||||
font-size: 1rem;
|
||||
color: map-get($gray-shades, 600);
|
||||
background-color: map-get($gray-shades, 100);
|
||||
border: 2px solid map-get($gray-shades, 600);
|
||||
|
||||
&:hover {
|
||||
color: map-get($gray-shades, 800);
|
||||
}
|
||||
}
|
||||
|
||||
.document-protection-review {
|
||||
@extend .document-protection-unlocked;
|
||||
border: 2px solid map-get($yellow-shades, 700);
|
||||
|
||||
&:hover {
|
||||
color: map-get($yellow-shades, 700);
|
||||
}
|
||||
}
|
||||
|
||||
.document-protection-locked {
|
||||
@extend .document-protection-unlocked;
|
||||
border: 2px solid map-get($red-shades, 600);
|
||||
|
||||
&:hover {
|
||||
color: map-get($red-shades, 600);
|
||||
}
|
||||
}
|
||||
|
||||
.document-category {
|
||||
display: inline-block;
|
||||
padding: 2px 10px;
|
||||
font-weight: 600;
|
||||
font-size: 1rem;
|
||||
color: map-get($gray-shades, 600);
|
||||
background-color: map-get($gray-shades, 100);
|
||||
border: 2px solid map-get($gray-shades, 600);
|
||||
border-left: 13px solid map-get($gray-shades, 600);
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.document-tag {
|
||||
display: inline-block;
|
||||
padding: 2px 0;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
font-style: italic;
|
||||
color: map-get($gray-shades, 600);
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
|
@ -1,69 +0,0 @@
|
|||
.document-tabnav {
|
||||
margin: 20px 0 0 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.document-structure {
|
||||
margin: 0 0 0 0;
|
||||
|
||||
> .page-header {
|
||||
margin: 0 0 2rem 0;
|
||||
|
||||
> .page-number {
|
||||
color: map-get($gray-shades, 600);
|
||||
background-color: map-get($gray-shades, 200);
|
||||
padding: 0.2rem 1rem;
|
||||
font-size: 1.8rem;
|
||||
margin: 0 1.5rem 0 0;
|
||||
font-weight: normal;
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
> .page-state-pending {
|
||||
color: map-get($red-shades, 600);
|
||||
}
|
||||
|
||||
> .page-state-review {
|
||||
color: map-get($green-shades, 600);
|
||||
}
|
||||
|
||||
> .page-title {
|
||||
display: inline;
|
||||
font-size: 2.0rem;
|
||||
font-weight: bold;
|
||||
margin: 16px 0;
|
||||
color: map-get($gray-shades, 800);
|
||||
}
|
||||
}
|
||||
|
||||
> .protection-table {
|
||||
> tbody, > thead {
|
||||
> tr, > th {
|
||||
> td, > th {
|
||||
margin: 0;
|
||||
padding: 10px 15px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
> td:first-child {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> thead {
|
||||
> tr {
|
||||
> th {
|
||||
background-color: map-get($gray-shades, 100);
|
||||
color: map-get($gray-shades, 600);
|
||||
}
|
||||
|
||||
> th:first-child {
|
||||
background-color: $color-white !important;
|
||||
border: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
97
gui/app/styles/core/view/document/meta.scss
Normal file
97
gui/app/styles/core/view/document/meta.scss
Normal file
|
|
@ -0,0 +1,97 @@
|
|||
.document-meta {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
> .title {
|
||||
text-transform: uppercase;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
color: map-get($gray-shades, 700);
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
> .meta-label {
|
||||
@include border-radius(3px);
|
||||
@extend .no-select;
|
||||
display: inline-block;
|
||||
margin: 5px 5px 5px 0;
|
||||
padding: 0.3rem 0.7rem;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 500;
|
||||
background-color: map-get($gray-shades, 200);
|
||||
color: map-get($gray-shades, 700);
|
||||
|
||||
> .dicon {
|
||||
vertical-align: middle;
|
||||
font-size: 1.2rem;
|
||||
margin-right: 5px;
|
||||
color: map-get($gray-shades, 600);
|
||||
}
|
||||
}
|
||||
|
||||
> .label-approval {
|
||||
@include border-radius(3px);
|
||||
@extend .no-select;
|
||||
display: inline-block;
|
||||
margin: 5px 5px 5px 0;
|
||||
padding: 0.3rem 0.7rem;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 500;
|
||||
background-color: map-get($gray-shades, 700);
|
||||
color: map-get($gray-shades, 100);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
> .label-draft {
|
||||
@include border-radius(3px);
|
||||
@extend .no-select;
|
||||
display: inline-block;
|
||||
margin: 5px 5px 5px 0;
|
||||
padding: 0.3rem 0.7rem;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 500;
|
||||
background-color: map-get($yellow-shades, 500);
|
||||
color: map-get($gray-shades, 100);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
> .label-live {
|
||||
@include border-radius(3px);
|
||||
@extend .no-select;
|
||||
display: inline-block;
|
||||
margin: 5px 5px 5px 0;
|
||||
padding: 0.3rem 0.7rem;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 500;
|
||||
background-color: map-get($green-shades, 500);
|
||||
color: map-get($gray-shades, 100);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
> .label-archived {
|
||||
@include border-radius(3px);
|
||||
@extend .no-select;
|
||||
display: inline-block;
|
||||
margin: 5px 5px 5px 0;
|
||||
padding: 0.3rem 0.7rem;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 500;
|
||||
background-color: map-get($red-shades, 300);
|
||||
color: map-get($gray-shades, 800);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
> .document-heading {
|
||||
.name {
|
||||
color: map-get($gray-shades, 900);
|
||||
font-size: 2.2rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.desc {
|
||||
color: map-get($gray-shades, 700);
|
||||
font-size: 1.2rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
72
gui/app/styles/core/view/document/section.scss
Normal file
72
gui/app/styles/core/view/document/section.scss
Normal file
|
|
@ -0,0 +1,72 @@
|
|||
.section-heading {
|
||||
margin: 0 0 0 0;
|
||||
|
||||
> .page-header {
|
||||
margin: 0 0 2rem 0;
|
||||
|
||||
> .page-number {
|
||||
color: $theme-500;
|
||||
background-color: $theme-100;
|
||||
padding: 0.2rem 1rem;
|
||||
font-size: 1.8rem;
|
||||
margin: 0 1.5rem 0 0;
|
||||
font-weight: normal;
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
> .page-state-pending {
|
||||
color: map-get($red-shades, 600);
|
||||
}
|
||||
|
||||
> .page-state-review {
|
||||
color: map-get($green-shades, 600);
|
||||
}
|
||||
|
||||
> .page-title {
|
||||
display: inline;
|
||||
font-size: 2.0rem;
|
||||
font-weight: bold;
|
||||
margin: 16px 0;
|
||||
color: map-get($gray-shades, 800);
|
||||
}
|
||||
}
|
||||
|
||||
> .section-toolbar {
|
||||
> i {
|
||||
font-size: 20px;
|
||||
color: map-get($gray-shades, 400);
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
color: map-get($gray-shades, 700);
|
||||
}
|
||||
}
|
||||
|
||||
> .gap {
|
||||
width: 5px;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.start-section {
|
||||
@include border-radius(5px);
|
||||
@extend .no-select;
|
||||
text-align: right;
|
||||
margin: 2rem 0;
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
|
||||
> i {
|
||||
background-color: map-get($yellow-shades, 100);
|
||||
color: map-get($yellow-shades, 500);
|
||||
vertical-align: middle;
|
||||
padding: 0.5rem;
|
||||
font-size: 16px;
|
||||
|
||||
&:hover {
|
||||
color: map-get($yellow-shades, 700);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,52 +0,0 @@
|
|||
.label-approval {
|
||||
@include border-radius(3px);
|
||||
@extend .no-select;
|
||||
display: inline-block;
|
||||
margin: 10px 5px 13px 0;
|
||||
padding: 0.3rem 0.7rem;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 400;
|
||||
background-color: map-get($gray-shades, 700);
|
||||
color: map-get($gray-shades, 100);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.label-draft {
|
||||
@include border-radius(3px);
|
||||
@extend .no-select;
|
||||
display: inline-block;
|
||||
margin: 10px 5px 13px 0;
|
||||
padding: 0.3rem 0.7rem;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 400;
|
||||
background-color: map-get($yellow-shades, 500);
|
||||
color: map-get($gray-shades, 100);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.label-live {
|
||||
@include border-radius(3px);
|
||||
@extend .no-select;
|
||||
display: inline-block;
|
||||
margin: 10px 5px 13px 0;
|
||||
padding: 0.3rem 0.7rem;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 400;
|
||||
background-color: map-get($green-shades, 500);
|
||||
color: map-get($gray-shades, 100);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.label-archived {
|
||||
@include border-radius(3px);
|
||||
@extend .no-select;
|
||||
display: inline-block;
|
||||
margin: 10px 5px 13px 0;
|
||||
padding: 0.3rem 0.7rem;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 400;
|
||||
background-color: map-get($red-shades, 300);
|
||||
color: map-get($gray-shades, 800);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
|
|
@ -1,38 +1,40 @@
|
|||
{{#if (eq document.lifecycle constants.Lifecycle.Live)}}
|
||||
<div id="document-lifecycle-popover" class="document-lifecycle-live text-uppercase" {{action "onEditLifecycle"}}>{{document.lifecycleLabel}}</div>
|
||||
{{/if}}
|
||||
{{#if (eq document.lifecycle constants.Lifecycle.Draft)}}
|
||||
<div id="document-lifecycle-popover" class="document-lifecycle-draft text-uppercase" {{action "onEditLifecycle"}}>{{document.lifecycleLabel}}</div>
|
||||
{{/if}}
|
||||
<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}}
|
||||
{{/link-to}}
|
||||
|
||||
<div class="d-block d-sm-none margin-top-20" />
|
||||
<div class="d-sm-inline-block margin-left-20" />
|
||||
{{ui/ui-spacer size=300}}
|
||||
|
||||
{{#if (eq document.protection constants.ProtectionType.None)}}
|
||||
<div id="document-protection-popover" class="document-protection-unlocked text-uppercase" {{action "onEditProtection"}}>OPEN</div>
|
||||
{{/if}}
|
||||
{{#if (eq document.protection constants.ProtectionType.Review)}}
|
||||
<div id="document-protection-popover" class="document-protection-review text-uppercase" {{action "onEditProtection"}}>PROTECTED</div>
|
||||
{{/if}}
|
||||
{{#if (eq document.protection constants.ProtectionType.Lock)}}
|
||||
<div id="document-protection-popover" class="document-protection-locked text-uppercase" {{action "onEditProtection"}}>LOCKED</div>
|
||||
{{/if}}
|
||||
|
||||
<div class="d-block d-sm-none margin-top-20" />
|
||||
<div class="d-sm-inline-block margin-left-20" />
|
||||
|
||||
{{#each selectedCategories as |cat|}}
|
||||
<div class="document-category {{if isSpaceAdmin "cursor-pointer"}}" {{action "onEditCategory"}}>
|
||||
<div class="title">CATEGORY / TAG</div>
|
||||
{{#each selectedCategories as |cat|}}
|
||||
<div class="meta-label">
|
||||
<i class="dicon {{constants.Icon.Category}}"/>
|
||||
{{cat.category}}
|
||||
{{#attach-tooltip showDelay=1000}}Category{{/attach-tooltip}}
|
||||
</div>
|
||||
{{/each}}
|
||||
|
||||
<div class="d-block d-sm-none margin-top-20" />
|
||||
|
||||
{{#each tagz as |t|}}
|
||||
<div class="document-tag {{if isSpaceAdmin "cursor-pointer"}}" {{action "onEditCategory"}}>
|
||||
{{/each}}
|
||||
{{#each tagz as |t|}}
|
||||
<div class="meta-label">
|
||||
<i class="dicon {{constants.Icon.Tag}}"/>
|
||||
{{t}}
|
||||
{{#attach-tooltip showDelay=1000}}Tag{{/attach-tooltip}}
|
||||
{{concat "#" t}}
|
||||
</div>
|
||||
{{/each}}
|
||||
{{/each}}
|
||||
|
||||
{{ui/ui-spacer size=200}}
|
||||
|
||||
<div class="title">STATUS</div>
|
||||
<div class="{{if (eq document.lifecycle constants.Lifecycle.Draft) "label-draft"}}
|
||||
{{if (eq document.lifecycle constants.Lifecycle.Live) "label-live"}}
|
||||
{{if (eq document.lifecycle constants.Lifecycle.Archived) "label-archived"}}">
|
||||
{{document.lifecycleLabel}}
|
||||
{{#attach-tooltip showDelay=1000}}Lifecycle: Draft · Live · Archived{{/attach-tooltip}}
|
||||
</div>
|
||||
<div class="label-approval">
|
||||
{{#if (eq document.protection constants.ProtectionType.None)}}OPEN{{/if}}
|
||||
{{#if (eq document.protection constants.ProtectionType.Review)}}PROTECTED{{/if}}
|
||||
{{#if (eq document.protection constants.ProtectionType.Lock)}}LOCKED{{/if}}
|
||||
{{#attach-tooltip showDelay=1000}}Change Control: Open · Protected · Locked{{/attach-tooltip}}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<div class="text-right non-printable">
|
||||
<div class="no-print">
|
||||
{{#if session.authenticated}}
|
||||
{{#if permissions.documentEdit}}
|
||||
{{#link-to "document.settings" space.id space.slug document.id document.slug class="button-icon-gray align-middle"}}
|
||||
|
|
@ -1,27 +1,23 @@
|
|||
<div class="row no-gutters align-items-top">
|
||||
<div class="col-10">
|
||||
<div class="document-structure">
|
||||
<div class="grid-container-8-2">
|
||||
<div class="grid-cell-1 grid-cell-middle">
|
||||
<div class="section-heading">
|
||||
<div class="page-header">
|
||||
<span class="page-number">{{page.numbering}}</span>
|
||||
<span class="page-title">{{page.title}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-2">
|
||||
<div class="grid-cell-2 grid-cell-right grid-cell-middle">
|
||||
{{#unless (eq document.protection constants.ProtectionType.Lock)}}
|
||||
<div class="document-structure">
|
||||
<div class="page-toolbar" id="page-toolbar-{{ page.id }}">
|
||||
<div class="float-right">
|
||||
<div class="section-heading no-print" id="page-toolbar-{{ page.id }}">
|
||||
<div class="section-toolbar">
|
||||
{{#if canEdit}}
|
||||
<div id="page-edit-button-{{page.id}}" class="button-icon-gray align-middle d-none d-md-inline-block" {{action "onEdit"}}>
|
||||
<i class="material-icons">mode_edit</i>
|
||||
</div>
|
||||
<i class="dicon {{constants.Icon.Edit}}" {{action "onEdit"}} />
|
||||
{{/if}}
|
||||
{{#if hasMenuPermissions}}
|
||||
<div class="button-icon-gap" />
|
||||
<div id="page-menu-button-{{page.id}}" class="button-icon-gray align-middle">
|
||||
<i class="material-icons">more_vert</i>
|
||||
{{#attach-popover class="ember-attacher-popper" hideOn="clickout" showOn="click" isShown=false}}
|
||||
<div class="gap"/>
|
||||
<i class="dicon {{constants.Icon.Settings}}">
|
||||
{{#attach-popover class="ember-attacher-popper" hideOn="clickout click" showOn="click" isShown=false}}
|
||||
<div class="menu">
|
||||
{{#if canEdit}}
|
||||
<a class="item" href="#" id={{concat "edit-page-button-" page.id}} {{action "onEdit"}}>Edit</a>
|
||||
|
|
@ -55,11 +51,10 @@
|
|||
{{/if}}
|
||||
</div>
|
||||
{{/attach-popover}}
|
||||
</div>
|
||||
</i>
|
||||
{{/if}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{/unless}}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,14 +1,13 @@
|
|||
{{#if hasPages}}
|
||||
|
||||
{{#each pages key="id" as |item|}}
|
||||
{{#if canEdit}}
|
||||
<div class="start-section" {{action "onShowSectionWizard" item.page}}>
|
||||
<div class="start-button">
|
||||
<div class="cta">+ SECTION</div>
|
||||
</div>
|
||||
<div class="start-section">
|
||||
<i class="dicon {{constants.Icon.Plus}}" {{action "onShowSectionWizard" item.page}}>
|
||||
{{#attach-tooltip showDelay=1000}}Insert section here{{/attach-tooltip}}
|
||||
</i>
|
||||
</div>
|
||||
{{else}}
|
||||
<div class="margin-top-70" />
|
||||
{{ui/ui-spacer size=700}}
|
||||
{{/if}}
|
||||
{{document/document-page
|
||||
roles=roles
|
||||
|
|
@ -32,10 +31,10 @@
|
|||
{{/each}}
|
||||
|
||||
{{#if canEdit}}
|
||||
<div class="start-section" {{action "onShowSectionWizard"}}>
|
||||
<div class="start-button">
|
||||
<div class="cta">+ SECTION</div>
|
||||
</div>
|
||||
<div class="start-section">
|
||||
<i class="dicon {{constants.Icon.Plus}}" {{action "onShowSectionWizard"}}>
|
||||
{{#attach-tooltip showDelay=1000}}Insert section here{{/attach-tooltip}}
|
||||
</i>
|
||||
</div>
|
||||
{{/if}}
|
||||
|
||||
|
|
@ -56,17 +55,14 @@
|
|||
</div>
|
||||
</div>
|
||||
{{/if}}
|
||||
|
||||
{{else }}
|
||||
|
||||
{{#if canEdit}}
|
||||
<div class="start-section" {{action "onShowSectionWizard"}}>
|
||||
<div class="start-button">
|
||||
<div class="cta">+ SECTION</div>
|
||||
</div>
|
||||
<div class="start-section">
|
||||
<i class="dicon {{constants.Icon.Plus}}" {{action "onShowSectionWizard"}}>
|
||||
{{#attach-tooltip showDelay=1000}}Insert section here{{/attach-tooltip}}
|
||||
</i>
|
||||
</div>
|
||||
{{/if}}
|
||||
|
||||
{{/if}}
|
||||
|
||||
{{#if canEdit}}
|
||||
|
|
|
|||
13
gui/app/templates/components/document/zdocument-meta.hbs
Normal file
13
gui/app/templates/components/document/zdocument-meta.hbs
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
{{#each selectedCategories as |cat|}}
|
||||
<div class="document-category {{if isSpaceAdmin "cursor-pointer"}}" {{action "onEditCategory"}}>
|
||||
{{cat.category}}
|
||||
{{#attach-tooltip showDelay=1000}}Category{{/attach-tooltip}}
|
||||
</div>
|
||||
{{/each}}
|
||||
|
||||
{{#each tagz as |t|}}
|
||||
<div class="document-tag {{if isSpaceAdmin "cursor-pointer"}}" {{action "onEditCategory"}}>
|
||||
{{#attach-tooltip showDelay=1000}}Tag{{/attach-tooltip}}
|
||||
{{concat "#" t}}
|
||||
</div>
|
||||
{{/each}}
|
||||
|
|
@ -2,3 +2,4 @@
|
|||
<i class="dicon {{iconClass}}"/>
|
||||
{{/if}}
|
||||
<div class="label">{{label}}</div>
|
||||
{{yield}}
|
||||
Loading…
Add table
Add a link
Reference in a new issue