diff --git a/app/app/components/document/document-sidebar-toc.js b/app/app/components/document/document-sidebar-toc.js index 4fc5a44c..3cc285b0 100644 --- a/app/app/components/document/document-sidebar-toc.js +++ b/app/app/components/document/document-sidebar-toc.js @@ -19,18 +19,13 @@ export default Ember.Component.extend(NotifierMixin, TooltipMixin, { folder: {}, pages: [], page: "", - showToc: false, - tocTools: { - UpTarget: "", - DownTarget: "", - AllowIndent: false, - AllowOutdent: false - }, - actionablePage: false, - upDisabled: true, - downDisabled: true, - indentDisabled: true, - outdentDisabled: true, + state: { + actionablePage: false, + upDisabled: true, + downDisabled: true, + indentDisabled: true, + outdentDisabled: true + }, didReceiveAttrs: function() { this.set('showToc', is.not.undefined(this.get('pages')) && this.get('pages').get('length') > 2); diff --git a/app/app/components/document/document-sidebar.js b/app/app/components/document/document-sidebar.js index 9e333e9a..39a967ed 100644 --- a/app/app/components/document/document-sidebar.js +++ b/app/app/components/document/document-sidebar.js @@ -18,6 +18,16 @@ export default Ember.Component.extend(TooltipMixin, { document: {}, folder: {}, + didRender() { + if (this.session.authenticated) { + this.addTooltip(document.getElementById("owner-avatar")); + } + }, + + willDestroyElements() { + this.destroyElements(); + }, + actions: { // Page up - above pages shunt down. onPageSequenceChange(pendingChanges) { @@ -31,6 +41,11 @@ export default Ember.Component.extend(TooltipMixin, { gotoPage(id) { return this.attrs.gotoPage(id); + }, + + // close dialog + close() { + return true; } } }); diff --git a/app/app/components/document/document-toolbar.js b/app/app/components/document/document-toolbar.js index 253deb2a..0baff562 100644 --- a/app/app/components/document/document-toolbar.js +++ b/app/app/components/document/document-toolbar.js @@ -33,13 +33,10 @@ export default Ember.Component.extend(NotifierMixin, TooltipMixin, { this.addTooltip(document.getElementById("save-template-button")); this.addTooltip(document.getElementById("set-meta-button")); this.addTooltip(document.getElementById("delete-document-button")); + this.addTooltip(document.getElementById("add-section-button")); } this.addTooltip(document.getElementById("print-document-button")); - - if (this.session.authenticated) { - this.addTooltip(document.getElementById("owner-avatar")); - } }, didInsertElement() { @@ -138,10 +135,5 @@ export default Ember.Component.extend(NotifierMixin, TooltipMixin, { this.attrs.onDocumentChange(doc); return true; }, - - // close dialog - close() { - return true; - }, } }); diff --git a/app/app/pods/document/index/template.hbs b/app/app/pods/document/index/template.hbs index 2c036ac4..52901e8d 100644 --- a/app/app/pods/document/index/template.hbs +++ b/app/app/pods/document/index/template.hbs @@ -1,17 +1,29 @@ -{{#header/page-navigation folder=folder document=model documentMode=true}} - {{header/message-box message=model.excerpt}} -{{/header/page-navigation}} +{{#layout/zone-container}} -{{document/document-toolbar document=model pages=pages meta=meta folder=folder isEditor=isEditor users=users owner=owner onSaveTemplate=(action 'onSaveTemplate') onDocumentChange=(action 'onDocumentChange') onAttachmentUpload=(action -'onAttachmentUpload') onDocumentDelete=(action 'onDocumentDelete')}} + {{layout/zone-navigation}} -
-
-
- {{document/document-sidebar document=model meta=meta folder=folder pages=pages page=page isEditor=isEditor onAddPage=(action 'onAddPage') changePageSequence=(action 'onPageSequenceChange') changePageLevel=(action 'onPageLevelChange') gotoPage=(action 'gotoPage')}} -
-
- {{document/document-view document=model pages=pages attachments=attachments folder=folder folders=folders isEditor=isEditor onAttachmentDeleted=(action 'onAttachmentDeleted') onDeletePage=(action 'onPageDeleted')}} -
-
-
+ {{#layout/zone-header title=model.name message=model.excerpt}} + {{document/document-toolbar document=model pages=pages folder=folder + isEditor=isEditor users=users + onSaveTemplate=(action 'onSaveTemplate') + onDocumentChange=(action 'onDocumentChange') + onAttachmentUpload=(action 'onAttachmentUpload') + onDocumentDelete=(action 'onDocumentDelete')}} + {{/layout/zone-header}} + + {{#layout/zone-sidebar}} + {{document/document-sidebar document=model meta=meta folder=folder pages=pages page=page owner=owner isEditor=isEditor + onAddPage=(action 'onAddPage') + changePageSequence=(action 'onPageSequenceChange') + changePageLevel=(action 'onPageLevelChange') + gotoPage=(action 'gotoPage')}} + {{/layout/zone-sidebar}} + + {{#layout/zone-content}} + {{document/document-view document=model pages=pages attachments=attachments folder=folder folders=folders + isEditor=isEditor + onAttachmentDeleted=(action 'onAttachmentDeleted') + onDeletePage=(action 'onPageDeleted')}} + {{/layout/zone-content}} + +{{/layout/zone-container}} diff --git a/app/app/pods/folders/settings/template.hbs b/app/app/pods/folders/settings/template.hbs index 8d637dd9..121c5013 100644 --- a/app/app/pods/folders/settings/template.hbs +++ b/app/app/pods/folders/settings/template.hbs @@ -3,14 +3,12 @@ {{layout/zone-navigation}} {{#layout/zone-header title=model.name message="Settings, sharing, permissions and deletion"}} -
- {{#link-to 'folders.folder' model.id model.slug}} -
- arrow_back -
space
-
- {{/link-to}} -
+ {{#link-to 'folders.folder' model.id model.slug}} +
+ arrow_back +
space
+
+ {{/link-to}} {{/layout/zone-header}} {{#layout/zone-sidebar}} diff --git a/app/app/styles/print.scss b/app/app/styles/print.scss index 39da0655..48c8a469 100644 --- a/app/app/styles/print.scss +++ b/app/app/styles/print.scss @@ -10,21 +10,17 @@ // https://documize.com @media print { - .header, .sidebar, .non-printable { + .zone-navigation, .zone-header, .zone-sidebar, .non-printable { display: none !important; } - .document-container { - > .content { - padding: 20px 0 !important; + .document-view { + .page-toolbar, .document-summary, .attachment-zone, .document-tags { + display: none !important; + } - .page-toolbar, .document-summary, .attachment-zone { - display: none !important; - } - - .print-title, .non-printable-message{ - display: block !important; - } + .print-title, .non-printable-message{ + display: block !important; } } } diff --git a/app/app/styles/view/document/content.scss b/app/app/styles/view/document/content.scss index 8789b6ed..3a601b85 100644 --- a/app/app/styles/view/document/content.scss +++ b/app/app/styles/view/document/content.scss @@ -1,109 +1,105 @@ -.document-container { - > .content { - padding: 40px 40px 40px 20px; +.document-view { + .print-title { + display: none; + font-size: 2.3em; + font-weight: bold; + color:$color-black; + margin-bottom: 20px; + margin-top: 0; + } - .print-title { - display: none; - font-size: 2.3em; - font-weight: bold; - color:$color-black; - margin-bottom: 20px; - margin-top: 0; - } + .non-printable-message { + display: none; + font-size: 1em; + font-style: italic; + color: $color-gray; + } - .non-printable-message { - display: none; - font-size: 1em; - font-style: italic; - color: $color-gray; - } + .attachment-zone { + margin: 20px 0 30px 0; - .attachment-zone { - margin: 20px 0 30px 0; + > .list { + margin: 0; + padding: 7px; - > .list { - margin: 0; - padding: 7px; + > .item { + color: $color-off-black; + margin-top: 10px; + padding: 0; + list-style-type: none; + border-bottom: 1px dotted $color-border; + padding-bottom: 10px; - > .item { - color: $color-off-black; - margin-top: 10px; - padding: 0; - list-style-type: none; - border-bottom: 1px solid $color-border; - padding-bottom: 10px; + > .icon { + vertical-align: text-top; + margin-right: 10px; + } - > .icon { - vertical-align: text-top; - margin-right: 10px; - } - - > a { - color: $color-gray; - - &:hover { - color: $color-link; - } - - > .file { - font-size: 1rem; - } - } - - > .action { - float: right; - margin-top: -8px; - @extend .cursor-pointer; - display: none; - color: $color-stroke; - } + > a { + color: $color-gray; &:hover { - .file { - text-decoration: underline; - } + color: $color-link; + } - .action { - display: inline-block; - } + > .file { + font-size: 1rem; + } + } + + > .action { + float: right; + margin-top: -8px; + @extend .cursor-pointer; + display: none; + color: $color-stroke; + } + + &:hover { + .file { + text-decoration: underline; + } + + .action { + display: inline-block; } } } } + } - .delete-attachment-dialog, - .delete-page-dialog { - display: none; - } + .delete-attachment-dialog, + .delete-page-dialog { + display: none; + } - .is-template { - color: $color-gray; - font-weight: bold; - font-size: 1.5em; - margin-bottom: 50px; - padding-bottom: 5px; - @include border-bottom(1px); - } + .is-template { + color: $color-gray; + font-weight: bold; + font-size: 1.5em; + margin-bottom: 30px; + padding-bottom: 5px; + @include border-bottom(1px); + } - > .pages { - margin: 30px 0 50px 0; + > .pages { + margin: 30px 0 50px 0; - > .wysiwyg { - > .is-a-page { - .page-title { - > .page-toolbar { - opacity: 0.3; - @extend .transition-all; - - &:hover { - opacity: 1; - } - } + > .wysiwyg { + > .is-a-page { + .page-title { + > .page-toolbar { + opacity: 0.3; + @extend .transition-all; &:hover { - .page-toolbar { - opacity: 1; - } + opacity: 1; + } + } + + &:hover { + .page-toolbar { + opacity: 1; } } } @@ -130,6 +126,5 @@ > .regular-button { cursor: default !important; } - } } diff --git a/app/app/styles/view/document/sidebar.scss b/app/app/styles/view/document/sidebar.scss index 3c3d76ef..1be28d1f 100644 --- a/app/app/styles/view/document/sidebar.scss +++ b/app/app/styles/view/document/sidebar.scss @@ -1,73 +1,203 @@ -.document-container { - > .sidebar { - padding: 40px; - font-size: 0.875rem; - @extend .no-select; +.document-sidebar { + @extend .no-select; - .stick { - position: fixed; - top: 50px; - } + > .summary-line { + color: $color-gray; + margin-top: 20px; - .document-structure { - > .toc-controls { - text-align: center; - margin-bottom: 20px; + >.items { + padding: 0; + margin: 0; + text-align: center; - > .round-button-mono { - color: $color-off-black; - border-color: $color-off-black; - - > .material-icons { - color: $color-off-black; - } - } - - > .disabled { - @extend .cursor-not-allowed; - color: $color-stroke; - border-color: $color-stroke; - - > .material-icons { - color: $color-stroke; - } - } + > .divider { + margin-right: 20px; + display: inline-block; } - .entries { - padding: 0; - list-style: none; - font-size: 13px; - overflow-x: hidden; + > .item { list-style-type: none; + display: inline-block; + margin: 0; + padding: 0; + vertical-align: middle; - .item { - padding: 4px 0; - text-overflow: ellipsis; - word-wrap: break-word; - white-space: nowrap; - overflow: hidden; + > .metric { + @extend .cursor-pointer; + text-align: center; + color: $color-gray; - > .link { - color: $color-stroke; - - &:hover { - color: $color-link; - } - } - - > .selected { - color: $color-link; + .number { + font-size: 1.2rem; font-weight: bold; } + + .label { + margin: 0; + padding: 0; + font-size: 0.8rem; + } + + &:hover { + color: $color-link; + } + } + } + } + } + + .stick { + position: fixed; + top: 10px; + } + + .document-structure { + > .toc-controls { + text-align: center; + margin: 0; + padding: 30px 0 10px 0; + color: $color-gray; + + > .round-button-mono { + color: $color-green; + border-color: $color-green; + + > .material-icons { + color: $color-green; } } - .toc-bullet { - vertical-align: middle; + > .disabled { + @extend .cursor-not-allowed; color: $color-stroke; - font-size: 10px; - margin-right: 5px; + border-color: $color-stroke; + + > .material-icons { + color: $color-stroke; + } + } + } + + .entries { + padding: 0; + list-style: none; + font-size: 13px; + overflow-x: hidden; + list-style-type: none; + + .item { + padding: 4px 0; + text-overflow: ellipsis; + word-wrap: break-word; + white-space: nowrap; + overflow: hidden; + + > .link { + color: $color-gray; + + &:hover { + color: $color-link; + } + } + + > .selected { + color: $color-link; + font-weight: bold; + } + } + } + } +} + +.meta-viewers { + overflow-y: auto; + overflow-x: hidden; + + > .items { + list-style-type: none; + margin: 0; + padding: 0; + overflow-y: auto; + overflow-x: hidden; + height: 300px; + min-width: 300px; + white-space: nowrap; + + > .item { + margin: 15px 0; + overflow-x: hidden; + white-space: nowrap; + text-overflow: ellipsis; + width: 90%; + + > .avatar-box { + display: inline-block; + margin: 3px 10px 0 0; + vertical-align: top; + } + + > .detail { + display: inline-block; + + > .name { + font-size: 1rem; + color: $color-off-black; + } + + > .date { + font-size: 0.8rem; + } + } + } + } +} + +.meta-editors { + position: relative; + + > .items { + list-style-type: none; + margin: 0; + padding: 0; + overflow-y: auto; + overflow-x: hidden; + height: 300px; + min-width: 300px; + white-space: nowrap; + + > .item { + margin: 15px 0; + overflow-x: hidden; + white-space: nowrap; + text-overflow: ellipsis; + width: 90%; + + .avatar-box { + display: inline-block; + margin: 3px 10px 0 0; + vertical-align: top; + } + + .detail { + display: inline-block; + + .name { + font-size: 1rem; + color: $color-off-black; + } + + .changed { + font-size: 0.9rem; + } + + .deleted { + font-size: 0.9rem; + color: $color-red; + } + + .date { + font-size: 0.8rem; + } } } } diff --git a/app/app/styles/view/document/toolbar.scss b/app/app/styles/view/document/toolbar.scss index 87792975..eff0fcdd 100644 --- a/app/app/styles/view/document/toolbar.scss +++ b/app/app/styles/view/document/toolbar.scss @@ -1,153 +1,2 @@ -.document-container { - > .toolbar { - width: 100%; - margin: 0; - padding: 40px 40px 20px 40px; - background-color: $color-off-white; - color: $color-gray; - - > .meta-data { - margin: 0; - padding: 0; - - >.items { - padding: 0; - margin: 0; - - > .divider { - margin-right: 20px; - display: inline-block; - } - - > .item { - list-style-type: none; - display: inline-block; - margin: 0; - padding: 0; - vertical-align: middle; - - > .avatar { - } - - > .date { - } - - > .metric { - @extend .cursor-pointer; - text-align: center; - color: $color-primary; - - .number { - font-size: 1.2rem; - font-weight: bold; - } - - .label { - margin: 0; - padding: 0; - font-size: 0.8rem; - } - - &:hover { - color: $color-primary; - } - } - } - } - } - } -} - -.meta-viewers { - overflow-y: auto; - overflow-x: hidden; - - > .items { - list-style-type: none; - margin: 0; - padding: 0; - overflow-y: auto; - overflow-x: hidden; - height: 300px; - min-width: 300px; - white-space: nowrap; - - > .item { - margin: 15px 0; - overflow-x: hidden; - white-space: nowrap; - text-overflow: ellipsis; - width: 90%; - - > .avatar-box { - display: inline-block; - margin: 3px 10px 0 0; - vertical-align: top; - } - - > .detail { - display: inline-block; - - > .name { - font-size: 1rem; - color: $color-off-black; - } - - > .date { - font-size: 0.8rem; - } - } - } - } -} - -.meta-editors { - position: relative; - - > .items { - list-style-type: none; - margin: 0; - padding: 0; - overflow-y: auto; - overflow-x: hidden; - height: 300px; - min-width: 300px; - white-space: nowrap; - - > .item { - margin: 15px 0; - overflow-x: hidden; - white-space: nowrap; - text-overflow: ellipsis; - width: 90%; - - .avatar-box { - display: inline-block; - margin: 3px 10px 0 0; - vertical-align: top; - } - - .detail { - display: inline-block; - - .name { - font-size: 1rem; - color: $color-off-black; - } - - .changed { - font-size: 0.9rem; - } - - .deleted { - font-size: 0.9rem; - color: $color-red; - } - - .date { - font-size: 0.8rem; - } - } - } - } +.document-toolbar { } diff --git a/app/app/styles/view/layout.scss b/app/app/styles/view/layout.scss index db5b9aaf..981e9611 100644 --- a/app/app/styles/view/layout.scss +++ b/app/app/styles/view/layout.scss @@ -124,7 +124,7 @@ .zone-sidebar { height: 100%; min-height:100%; - padding: 0 0 0 40px; + padding: 0 40px 0 40px; border-right: 1px solid $color-border; float: left; } diff --git a/app/app/styles/view/page-search.scss b/app/app/styles/view/page-search.scss index 6a177a91..36819ea2 100644 --- a/app/app/styles/view/page-search.scss +++ b/app/app/styles/view/page-search.scss @@ -1,8 +1,8 @@ .page-search { - margin: 30px 40px; + margin: 50px 100px; .search-results { - margin: 50px; + margin: 50px 0; .heading { font-size: 1.2rem; diff --git a/app/app/styles/widget/widget-avatar.scss b/app/app/styles/widget/widget-avatar.scss index 94c88a52..e09dc5d2 100644 --- a/app/app/styles/widget/widget-avatar.scss +++ b/app/app/styles/widget/widget-avatar.scss @@ -2,11 +2,12 @@ color: $color-white; background-color: $color-gray; @include border-radius(20px); - padding: 8px 0 0 0; + padding: 7px 0 0 0; letter-spacing: 1px; text-align: center; height: 35px; width: 35px; + cursor: crosshair; } .avatar-large { @@ -20,4 +21,5 @@ letter-spacing: 1px; text-align: center; margin: 0 auto; + cursor: crosshair; } diff --git a/app/app/styles/widget/widget-button.scss b/app/app/styles/widget/widget-button.scss index a582598b..465447b6 100644 --- a/app/app/styles/widget/widget-button.scss +++ b/app/app/styles/widget/widget-button.scss @@ -99,6 +99,12 @@ } } +.button-red-text { + > .material-icons { + color: $color-red !important; + } +} + .round-button { display: inline-block; position: relative; diff --git a/app/app/templates/components/document/document-sidebar-toc.hbs b/app/app/templates/components/document/document-sidebar-toc.hbs index b471d11a..57659328 100644 --- a/app/app/templates/components/document/document-sidebar-toc.hbs +++ b/app/app/templates/components/document/document-sidebar-toc.hbs @@ -1,4 +1,4 @@ -