Docker/documize
Docker/documize
1
0
Fork 0
mirror of https://github.com/documize/community.git synced 2025-07-23 15:19:42 +02:00
Code Releases Activity

WIP sticky doc toc with sticky toc toolbox

Browse source
This commit is contained in:
Harvey Kandola 2017-12-12 18:30:39 +00:00
parent e158c9f0f8
commit b339df5125
7 changed files with 64 additions and 52 deletions
Download patch file Download diff file Expand all files Collapse all files

9
gui/app/pods/document/index/controller.js
View file

@ -10,13 +10,11 @@
// https://documize.com // https://documize.com
import { Promise as EmberPromise } from 'rsvp'; import { Promise as EmberPromise } from 'rsvp';
import { inject as service } from '@ember/service'; import { inject as service } from '@ember/service';
import Controller from '@ember/controller'; import Controller from '@ember/controller';
import NotifierMixin from '../../../mixins/notifier';
import TooltipMixin from '../../../mixins/tooltip'; import TooltipMixin from '../../../mixins/tooltip';
export default Controller.extend(NotifierMixin, TooltipMixin, { export default Controller.extend(TooltipMixin, {
documentService: service('document'), documentService: service('document'),
templateService: service('template'), templateService: service('template'),
sectionService: service('section'), sectionService: service('section'),
@ -43,7 +41,6 @@ export default Controller.extend(NotifierMixin, TooltipMixin, {
onCopyPage(pageId, targetDocumentId) { onCopyPage(pageId, targetDocumentId) {
let documentId = this.get('model.document.id'); let documentId = this.get('model.document.id');
this.get('documentService').copyPage(documentId, pageId, targetDocumentId).then(() => { this.get('documentService').copyPage(documentId, pageId, targetDocumentId).then(() => {
this.showNotification("Copied");
// refresh data if copied to same document // refresh data if copied to same document
if (documentId === targetDocumentId) { if (documentId === targetDocumentId) {
@ -61,7 +58,6 @@ export default Controller.extend(NotifierMixin, TooltipMixin, {
let documentId = this.get('model.document.id'); let documentId = this.get('model.document.id');
this.get('documentService').copyPage(documentId, pageId, targetDocumentId).then(() => { this.get('documentService').copyPage(documentId, pageId, targetDocumentId).then(() => {
this.showNotification("Moved");
this.send('onPageDeleted', { id: pageId, children: false }); this.send('onPageDeleted', { id: pageId, children: false });
}); });
}, },
@ -165,7 +161,6 @@ export default Controller.extend(NotifierMixin, TooltipMixin, {
onDeleteBlock(blockId) { onDeleteBlock(blockId) {
return new EmberPromise((resolve) => { return new EmberPromise((resolve) => {
this.get('sectionService').deleteBlock(blockId).then(() => { this.get('sectionService').deleteBlock(blockId).then(() => {
this.send("showNotification", "Deleted");
resolve(); resolve();
}); });
}); });
@ -174,7 +169,6 @@ export default Controller.extend(NotifierMixin, TooltipMixin, {
onSavePageAsBlock(block) { onSavePageAsBlock(block) {
return new EmberPromise((resolve) => { return new EmberPromise((resolve) => {
this.get('sectionService').addBlock(block).then(() => { this.get('sectionService').addBlock(block).then(() => {
this.showNotification("Published");
resolve(); resolve();
}); });
}); });
@ -182,7 +176,6 @@ export default Controller.extend(NotifierMixin, TooltipMixin, {
onDocumentDelete() { onDocumentDelete() {
this.get('documentService').deleteDocument(this.get('model.document.id')).then(() => { 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')); this.transitionToRoute('folder', this.get('model.folder.id'), this.get('model.folder.slug'));
}); });
}, },

1
gui/app/services/session.js
View file

@ -10,7 +10,6 @@
// https://documize.com // https://documize.com
import { inject as service } from '@ember/service'; import { inject as service } from '@ember/service';
import { computed } from '@ember/object'; import { computed } from '@ember/object';
import SimpleAuthSession from 'ember-simple-auth/services/session'; import SimpleAuthSession from 'ember-simple-auth/services/session';

9
gui/app/styles/app.scss
View file

@ -30,3 +30,12 @@
@import "section/code.scss"; @import "section/code.scss";
@import "section/papertrail.scss"; @import "section/papertrail.scss";
@import "section/wysiwyg.scss"; @import "section/wysiwyg.scss";
// Bootstrap override that removes gutter space on smaller screens
@media (max-width: 1200px) {
.container {
width: 100%;
max-width: none;
}
}

2
gui/app/styles/base.scss
View file

@ -16,7 +16,7 @@ html {
height: 100%; height: 100%;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
text-shadow: 1px 1px 1px rgba(0,0,0,0.004); -ms-overflow-style: -ms-autohiding-scrollbar;
} }
body { body {

47
gui/app/styles/view/document/doc-toc.scss
View file

@ -1,33 +1,42 @@
.document-toc { .document-toc {
@include border-radius(3px); @include border-radius(3px);
margin: 30px 0 30px 0; margin: 30px 0 30px 0;
padding: 20px 20px; padding: 0 20px 20px 20px;
background-color: $color-off-white; background-color: $color-off-white;
// background-color: $color-primary-light;
border: 1px solid $color-border; border: 1px solid $color-border;
overflow: scroll; overflow: scroll;
> .title { > .header {
color: $color-gray; @include sticky();
font-weight: bold; flex-direction: column;
font-size: 1.1rem; top: 0;
margin-bottom: 20px; padding-top: 20px;
text-align: center; margin: 0;
} background-color: $color-off-white;
> .toc-controls { > .title {
margin: 10px 0 0 0; color: $color-gray;
text-align: center; font-weight: bold;
font-size: 1.1rem;
> .disabled { margin-bottom: 20px;
cursor: not-allowed !important; text-align: center;
}
> .material-icons { > .toc-controls {
color: $color-gray-light; margin: 0 0 0 0;
text-align: center;
> .disabled {
cursor: not-allowed !important;
> .material-icons {
color: $color-gray-light;
}
} }
} }
} }
> .index-list { > .index-list {
padding: 0; padding: 0;
list-style: none; list-style: none;
@ -70,10 +79,10 @@
.document-toc-desktop { .document-toc-desktop {
display: inline-block; display: inline-block;
position: fixed; position: fixed;
left: 20px; right: 30px;
z-index: 777; z-index: 777;
} }
.document-toc-small { .document-toc-small {
display: block; display: block;
} }

46
gui/app/templates/components/document/document-toc.hbs
View file

@ -1,28 +1,30 @@
<div id="doc-toc" class="document-toc {{if isDesktop 'document-toc-desktop' 'document-toc-small'}}"> <div id="doc-toc" class="document-toc {{if isDesktop 'document-toc-desktop' 'document-toc-small'}}">
<div class="title">Table of contents</div> <div class="header">
{{#if session.authenticated}} <div class="title">Table of contents</div>
{{#if permissions.documentEdit}} {{#if session.authenticated}}
{{#unless emptyState}} {{#if permissions.documentEdit}}
<div id="tocToolbar" class="toc-controls {{if state.actionablePage 'current-page' ''}}"> {{#unless emptyState}}
<div id="toc-up-button" class="button-icon-green button-icon-small {{if state.upDisabled 'disabled'}}" {{action 'pageUp'}}> <div id="tocToolbar" class="toc-controls {{if state.actionablePage 'current-page' ''}}">
<i class="material-icons">arrow_upward</i> <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>
<div class="button-icon-gap" />
<div id="toc-down-button" class="button-icon-green button-icon-small {{if state.downDisabled 'disabled'}}" {{action 'pageDown'}}>
<i class="material-icons">arrow_downward</i>
</div>
<div class="button-icon-gap" />
<div id="toc-outdent-button" class="button-icon-green button-icon-small {{if state.outdentDisabled 'disabled'}}" {{action 'pageOutdent'}}>
<i class="material-icons">arrow_back</i>
</div>
<div class="button-icon-gap" />
<div id="toc-indent-button" class="button-icon-green button-icon-small {{if state.indentDisabled 'disabled'}}" {{action 'pageIndent'}}>
<i class="material-icons">arrow_forward</i>
</div>
</div> </div>
<div class="button-icon-gap" /> {{/unless}}
<div id="toc-down-button" class="button-icon-green button-icon-small {{if state.downDisabled 'disabled'}}" {{action 'pageDown'}}> {{/if}}
<i class="material-icons">arrow_downward</i>
</div>
<div class="button-icon-gap" />
<div id="toc-outdent-button" class="button-icon-green button-icon-small {{if state.outdentDisabled 'disabled'}}" {{action 'pageOutdent'}}>
<i class="material-icons">arrow_back</i>
</div>
<div class="button-icon-gap" />
<div id="toc-indent-button" class="button-icon-green button-icon-small {{if state.indentDisabled 'disabled'}}" {{action 'pageIndent'}}>
<i class="material-icons">arrow_forward</i>
</div>
</div>
{{/unless}}
{{/if}} {{/if}}
{{/if}} </div>
<ul class="index-list"> <ul class="index-list">
{{#each pages key="id" as |page index|}} {{#each pages key="id" as |page index|}}

2
gui/app/templates/components/document/page-heading.hbs
View file

@ -1,4 +1,4 @@
<div class="row no-gutters"> <div class="row no-gutters align-items-center">
<div class="col-10"> <div class="col-10">
<div class="document-structure"> <div class="document-structure">