From e158c9f0f824006ba3f1d566ce719018ebc6158e Mon Sep 17 00:00:00 2001 From: Harvey Kandola Date: Tue, 12 Dec 2017 16:21:05 +0000 Subject: [PATCH] WIP document TOC for widescreen displays --- gui/app/components/document/document-toc.js | 78 +++++++++++++++++-- gui/app/pods/document/index/route.js | 1 - gui/app/pods/document/index/template.hbs | 30 ++++--- .../styles/view/document/doc-structure.scss | 2 +- gui/app/styles/view/document/doc-toc.scss | 38 +++++---- .../components/document/document-toc.hbs | 6 +- 6 files changed, 115 insertions(+), 40 deletions(-) diff --git a/gui/app/components/document/document-toc.js b/gui/app/components/document/document-toc.js index 0a536c99..05a98e3c 100644 --- a/gui/app/components/document/document-toc.js +++ b/gui/app/components/document/document-toc.js @@ -29,6 +29,7 @@ export default Component.extend(NotifierMixin, { emptyState: computed('pages', function () { return this.get('pages.length') === 0; }), + isDesktop: true, didReceiveAttrs() { this._super(...arguments); @@ -43,21 +44,45 @@ export default Component.extend(NotifierMixin, { didInsertElement() { this._super(...arguments); + this.setSize(); + this.eventBus.subscribe('documentPageAdded', this, 'onDocumentPageAdded'); + this.eventBus.subscribe('resized', this, 'onResize'); }, willDestroyElement() { this._super(...arguments); this.eventBus.unsubscribe('documentPageAdded'); + this.eventBus.unsubscribe('resized'); }, onDocumentPageAdded(pageId) { this.send('onEntryClick', pageId); + this.setSize(); }, - // Controls what user can do with the toc (left sidebar). - // Identifies the target pages. + onResize() { + this.setSize(); + }, + + setSize() { + this.set('isDesktop', $(window).width() >= 1800); + + let h = $(window).height() - $("#nav-bar").height() - 140; + $("#doc-toc").css('max-height', h); + + let i = $("#doc-view").offset(); + + if (is.not.undefined(i)) { + let l = i.left - 100; + if (l > 350) l = 350; + $("#doc-toc").width(l); + } + }, + + // Controls what user can do with the toc (left sidebar) + // Identifies the target pages setState(pageId) { this.set('currentPageId', pageId); @@ -74,7 +99,7 @@ export default Component.extend(NotifierMixin, { }, actions: { - // Page up - above pages shunt down. + // Page up -- above pages shunt down pageUp() { if (this.get('state.upDisabled')) { return; @@ -93,7 +118,7 @@ export default Component.extend(NotifierMixin, { } }, - // Move down -- pages below shift up. + // Move down -- pages below shift up pageDown() { if (this.get('state.downDisabled')) { return; @@ -112,7 +137,7 @@ export default Component.extend(NotifierMixin, { } }, - // Indent - changes a page from H2 to H3, etc. + // Indent -- changes a page from H2 to H3, etc. pageIndent() { if (this.get('state.indentDisabled')) { return; @@ -131,7 +156,7 @@ export default Component.extend(NotifierMixin, { } }, - // Outdent - changes a page from H3 to H2, etc. + // Outdent -- changes a page from H3 to H2, etc. pageOutdent() { if (this.get('state.outdentDisabled')) { return; @@ -156,3 +181,44 @@ export default Component.extend(NotifierMixin, { } } }); + +/* + Specs + ----- + + 1. Must max max height to prevent off screen problems + 2. Must be usable on mobile and desktop + 3. Must be sticky and always visible (at least desktop) + 4. Must set width or leave to grid system + + Solution + -------- + + 1. max-height calc on insert/repaint + 1. overflow: scroll + + 2. on mobile/sm/md/lg we can put in little box to side of doc meta + and then set to fixed height based on screen size + 2. on xl we can put into sidebar + + 3. sticky on xl desktop is fine as sidebar uses fixed position + and content has max-height with overflow + 3. sticky on col/sm/md/lg is not available + + Notes + ----- + + We could go with container-fluid and use full width of screen. + This would work on all devices and take more space on + + $(window).width() needs to be 1800 or more for sticky sidebar... + $("#nav-bar").height() + $(window).height() - $("#nav-bar").height() - 100 + + Two choices: + + if width >= 1800 then sidebar sticky outside container + if widht < 1800 then switch to container-fluid? + ...but what about height? + ...put next to doc--meta +*/ diff --git a/gui/app/pods/document/index/route.js b/gui/app/pods/document/index/route.js index be55a273..412a1855 100644 --- a/gui/app/pods/document/index/route.js +++ b/gui/app/pods/document/index/route.js @@ -10,7 +10,6 @@ // https://documize.com import { hash } from 'rsvp'; - import { inject as service } from '@ember/service'; import Route from '@ember/routing/route'; import AuthenticatedRouteMixin from 'ember-simple-auth/mixins/authenticated-route-mixin'; diff --git a/gui/app/pods/document/index/template.hbs b/gui/app/pods/document/index/template.hbs index bcffacf2..2125f10d 100644 --- a/gui/app/pods/document/index/template.hbs +++ b/gui/app/pods/document/index/template.hbs @@ -1,17 +1,13 @@ {{toolbar/nav-bar}} -
+
+ {{document/document-toc document=model.document folder=model.folder pages=model.pages page=model.page permissions=model.permissions + onPageSequenceChange=(action 'onPageSequenceChange') onPageLevelChange=(action 'onPageLevelChange') onGotoPage=(action 'onGotoPage')}} +
+
- -
- - {{document/document-toc document=model.document folder=model.folder pages=model.pages page=model.page permissions=model.permissions - onPageSequenceChange=(action 'onPageSequenceChange') onPageLevelChange=(action 'onPageLevelChange') onGotoPage=(action 'onGotoPage')}} - -
- -
+
{{toolbar/for-document document=model.document spaces=model.folders space=model.folder permissions=model.permissions onDocumentDelete=(action 'onDocumentDelete') onSaveTemplate=(action 'onSaveTemplate')}} @@ -22,12 +18,14 @@ {{document/document-meta document=model.document folder=model.folder folders=model.folders permissions=model.permissions onSaveDocument=(action 'onSaveDocument')}} -
    -
  • Content
    • -
  • Attachments
    • -
  • Activity
    • -
  • Revisions
    • -
+
+
    +
  • Content
    • +
  • Attachments
    • +
  • Activity
    • +
  • Revisions
    • +
+
{{#if (eq tab 'content')}} {{document/view-content diff --git a/gui/app/styles/view/document/doc-structure.scss b/gui/app/styles/view/document/doc-structure.scss index 62041623..82f3426a 100644 --- a/gui/app/styles/view/document/doc-structure.scss +++ b/gui/app/styles/view/document/doc-structure.scss @@ -5,7 +5,7 @@ margin: 0 0 0.7rem 0; > .page-number { - color: $color-dark; + color: $color-gray; background-color: $color-gray-light2; padding: 0.2rem 1rem; font-size: 1.8rem; diff --git a/gui/app/styles/view/document/doc-toc.scss b/gui/app/styles/view/document/doc-toc.scss index ad14c68b..d3944af4 100644 --- a/gui/app/styles/view/document/doc-toc.scss +++ b/gui/app/styles/view/document/doc-toc.scss @@ -1,24 +1,22 @@ .document-toc { @include border-radius(3px); - margin: 20px 0; - padding: 10px 20px; + margin: 30px 0 30px 0; + padding: 20px 20px; background-color: $color-off-white; + // background-color: $color-primary-light; border: 1px solid $color-border; - display: inline-block; - position: fixed; - left: 20px; - z-index: 777; + overflow: scroll; > .title { - color: $color-off-black; + color: $color-gray; font-weight: bold; - font-size: 1rem; - margin-bottom: 10px; + font-size: 1.1rem; + margin-bottom: 20px; text-align: center; } > .toc-controls { - margin: 0; + margin: 10px 0 0 0; text-align: center; > .disabled { @@ -36,7 +34,7 @@ font-size: 0.9rem; overflow-x: hidden; list-style-type: none; - margin: 20px 0 0; + margin: 0 0 0 0; .item { @extend .no-select; @@ -53,15 +51,29 @@ &:hover { color: $color-link; } + + > .numbering { + color: $color-gray; + font-weight: bold; + display: inline-block; + margin-right: 10px; + } } > .selected { color: $color-link; - // font-weight: bold; } } } } +.document-toc-desktop { + display: inline-block; + position: fixed; + left: 20px; + 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 c67a2872..78ebec18 100644 --- a/gui/app/templates/components/document/document-toc.hbs +++ b/gui/app/templates/components/document/document-toc.hbs @@ -1,9 +1,9 @@ -
+
Table of contents
{{#if session.authenticated}} {{#if permissions.documentEdit}} {{#unless emptyState}} -