mirror of
https://github.com/documize/community.git
synced 2025-07-21 22:29:41 +02:00
WIP document TOC for widescreen displays
This commit is contained in:
Harvey Kandola
parent
4cf8c34ebd
commit
e158c9f0f8
6 changed files with 115 additions and 40 deletions
|
|
@ -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
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -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';
|
||||
|
|
|
|||
|
|
@ -1,17 +1,13 @@
|
|||
{{toolbar/nav-bar}}
|
||||
|
||||
<div class="container-fluid">
|
||||
|
||||
<div class="row">
|
||||
|
||||
<div class="col-12 col-md-4">
|
||||
|
||||
<div class="d-none d-xl-block">
|
||||
{{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')}}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-md-8">
|
||||
<div id="doc-view" class="container">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
|
||||
{{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')}}
|
||||
|
||||
<div class="mb-5 text-center">
|
||||
<ul class="tabnav-control">
|
||||
<li class="tab {{if (eq tab 'content') 'selected'}}" {{action 'onTabChange' 'content'}}>Content</li>
|
||||
<li class="tab {{if (eq tab 'attachment') 'selected'}}" {{action 'onTabChange' 'attachment'}}>Attachments</li>
|
||||
<li class="tab {{if (eq tab 'activity') 'selected'}}" {{action 'onTabChange' 'activity'}}>Activity</li>
|
||||
<li class="tab {{if (eq tab 'revision') 'selected'}}" {{action 'onTabChange' 'revision'}}>Revisions</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{{#if (eq tab 'content')}}
|
||||
{{document/view-content
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -1,9 +1,9 @@
|
|||
<div class="document-toc">
|
||||
<div id="doc-toc" class="document-toc {{if isDesktop 'document-toc-desktop' 'document-toc-small'}}">
|
||||
<div class="title">Table of contents</div>
|
||||
{{#if session.authenticated}}
|
||||
{{#if permissions.documentEdit}}
|
||||
{{#unless emptyState}}
|
||||
<div id="tocToolbar" class="hidden-xs hidden-sm toc-controls {{if state.actionablePage 'current-page' ''}}">
|
||||
<div id="tocToolbar" class="toc-controls {{if state.actionablePage 'current-page' ''}}">
|
||||
<div id="toc-up-button" class="button-icon-green button-icon-small {{if state.upDisabled 'disabled'}}" {{action 'pageUp'}}>
|
||||
<i class="material-icons">arrow_upward</i>
|
||||
</div>
|
||||
|
|
@ -28,7 +28,7 @@
|
|||
{{#each pages key="id" as |page index|}}
|
||||
<li class="item">
|
||||
<a id="index-{{page.id}}" {{action 'onEntryClick' page.id}} class="link toc-index-item {{page.tocIndentCss}} {{if (eq page.id currentPageId) 'selected'}}">
|
||||
{{page.numbering}}. {{page.title}}
|
||||
<span class="numbering">{{page.numbering}}</span>{{page.title}}
|
||||
</a>
|
||||
</li>
|
||||
{{/each}}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue