From b339df5125290309d6cb5a277098eb7494a5f0d5 Mon Sep 17 00:00:00 2001 From: Harvey Kandola Date: Tue, 12 Dec 2017 18:30:39 +0000 Subject: [PATCH] WIP sticky doc toc with sticky toc toolbox --- gui/app/pods/document/index/controller.js | 9 +--- gui/app/services/session.js | 1 - gui/app/styles/app.scss | 9 ++++ gui/app/styles/base.scss | 2 +- gui/app/styles/view/document/doc-toc.scss | 47 +++++++++++-------- .../components/document/document-toc.hbs | 46 +++++++++--------- .../components/document/page-heading.hbs | 2 +- 7 files changed, 64 insertions(+), 52 deletions(-) diff --git a/gui/app/pods/document/index/controller.js b/gui/app/pods/document/index/controller.js index 83446890..42853cdc 100644 --- a/gui/app/pods/document/index/controller.js +++ b/gui/app/pods/document/index/controller.js @@ -10,13 +10,11 @@ // https://documize.com import { Promise as EmberPromise } from 'rsvp'; - import { inject as service } from '@ember/service'; import Controller from '@ember/controller'; -import NotifierMixin from '../../../mixins/notifier'; import TooltipMixin from '../../../mixins/tooltip'; -export default Controller.extend(NotifierMixin, TooltipMixin, { +export default Controller.extend(TooltipMixin, { documentService: service('document'), templateService: service('template'), sectionService: service('section'), @@ -43,7 +41,6 @@ export default Controller.extend(NotifierMixin, TooltipMixin, { onCopyPage(pageId, targetDocumentId) { let documentId = this.get('model.document.id'); this.get('documentService').copyPage(documentId, pageId, targetDocumentId).then(() => { - this.showNotification("Copied"); // refresh data if copied to same document if (documentId === targetDocumentId) { @@ -61,7 +58,6 @@ export default Controller.extend(NotifierMixin, TooltipMixin, { let documentId = this.get('model.document.id'); this.get('documentService').copyPage(documentId, pageId, targetDocumentId).then(() => { - this.showNotification("Moved"); this.send('onPageDeleted', { id: pageId, children: false }); }); }, @@ -165,7 +161,6 @@ export default Controller.extend(NotifierMixin, TooltipMixin, { onDeleteBlock(blockId) { return new EmberPromise((resolve) => { this.get('sectionService').deleteBlock(blockId).then(() => { - this.send("showNotification", "Deleted"); resolve(); }); }); @@ -174,7 +169,6 @@ export default Controller.extend(NotifierMixin, TooltipMixin, { onSavePageAsBlock(block) { return new EmberPromise((resolve) => { this.get('sectionService').addBlock(block).then(() => { - this.showNotification("Published"); resolve(); }); }); @@ -182,7 +176,6 @@ export default Controller.extend(NotifierMixin, TooltipMixin, { onDocumentDelete() { this.get('documentService').deleteDocument(this.get('model.document.id')).then(() => { - this.send("showNotification", "Deleted"); this.transitionToRoute('folder', this.get('model.folder.id'), this.get('model.folder.slug')); }); }, diff --git a/gui/app/services/session.js b/gui/app/services/session.js index cb917003..be40b39c 100644 --- a/gui/app/services/session.js +++ b/gui/app/services/session.js @@ -10,7 +10,6 @@ // https://documize.com import { inject as service } from '@ember/service'; - import { computed } from '@ember/object'; import SimpleAuthSession from 'ember-simple-auth/services/session'; diff --git a/gui/app/styles/app.scss b/gui/app/styles/app.scss index 9c34ee40..39bf0cfe 100644 --- a/gui/app/styles/app.scss +++ b/gui/app/styles/app.scss @@ -30,3 +30,12 @@ @import "section/code.scss"; @import "section/papertrail.scss"; @import "section/wysiwyg.scss"; + +// Bootstrap override that removes gutter space on smaller screens +@media (max-width: 1200px) { + .container { + width: 100%; + max-width: none; + } +} + diff --git a/gui/app/styles/base.scss b/gui/app/styles/base.scss index b87375b8..63e76733 100644 --- a/gui/app/styles/base.scss +++ b/gui/app/styles/base.scss @@ -16,7 +16,7 @@ html { height: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; - text-shadow: 1px 1px 1px rgba(0,0,0,0.004); + -ms-overflow-style: -ms-autohiding-scrollbar; } body { diff --git a/gui/app/styles/view/document/doc-toc.scss b/gui/app/styles/view/document/doc-toc.scss index d3944af4..c85a5109 100644 --- a/gui/app/styles/view/document/doc-toc.scss +++ b/gui/app/styles/view/document/doc-toc.scss @@ -1,33 +1,42 @@ .document-toc { @include border-radius(3px); margin: 30px 0 30px 0; - padding: 20px 20px; + padding: 0 20px 20px 20px; background-color: $color-off-white; - // background-color: $color-primary-light; border: 1px solid $color-border; overflow: scroll; - > .title { - color: $color-gray; - font-weight: bold; - font-size: 1.1rem; - margin-bottom: 20px; - text-align: center; - } + > .header { + @include sticky(); + flex-direction: column; + top: 0; + padding-top: 20px; + margin: 0; + background-color: $color-off-white; - > .toc-controls { - margin: 10px 0 0 0; - text-align: center; - - > .disabled { - cursor: not-allowed !important; + > .title { + color: $color-gray; + font-weight: bold; + font-size: 1.1rem; + margin-bottom: 20px; + text-align: center; + } - > .material-icons { - color: $color-gray-light; + > .toc-controls { + margin: 0 0 0 0; + text-align: center; + + > .disabled { + cursor: not-allowed !important; + + > .material-icons { + color: $color-gray-light; + } } } } + > .index-list { padding: 0; list-style: none; @@ -70,10 +79,10 @@ .document-toc-desktop { display: inline-block; position: fixed; - left: 20px; + right: 30px; z-index: 777; } .document-toc-small { display: block; -} \ No newline at end of file +} diff --git a/gui/app/templates/components/document/document-toc.hbs b/gui/app/templates/components/document/document-toc.hbs index 78ebec18..77709f59 100644 --- a/gui/app/templates/components/document/document-toc.hbs +++ b/gui/app/templates/components/document/document-toc.hbs @@ -1,28 +1,30 @@
-
Table of contents
- {{#if session.authenticated}} - {{#if permissions.documentEdit}} - {{#unless emptyState}} -
-
- arrow_upward +
+
Table of contents
+ {{#if session.authenticated}} + {{#if permissions.documentEdit}} + {{#unless emptyState}} +
+
+ arrow_upward +
+
+
+ arrow_downward +
+
+
+ arrow_back +
+
+
+ arrow_forward +
-
-
- arrow_downward -
-
-
- arrow_back -
-
-
- arrow_forward -
-
- {{/unless}} + {{/unless}} + {{/if}} {{/if}} - {{/if}} +
    {{#each pages key="id" as |page index|}} diff --git a/gui/app/templates/components/document/page-heading.hbs b/gui/app/templates/components/document/page-heading.hbs index 43e68e67..18b4ecf9 100644 --- a/gui/app/templates/components/document/page-heading.hbs +++ b/gui/app/templates/components/document/page-heading.hbs @@ -1,4 +1,4 @@ -
    +