mirror of
https://github.com/documize/community.git
synced 2025-07-23 15:19:42 +02:00
WIP sticky doc toc with sticky toc toolbox
This commit is contained in:
Harvey Kandola
parent
e158c9f0f8
commit
b339df5125
7 changed files with 64 additions and 52 deletions
|
|
@ -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'));
|
||||
});
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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';
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
> .title {
|
||||
color: $color-gray;
|
||||
font-weight: bold;
|
||||
font-size: 1.1rem;
|
||||
margin-bottom: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
> .disabled {
|
||||
cursor: not-allowed !important;
|
||||
> .toc-controls {
|
||||
margin: 0 0 0 0;
|
||||
text-align: center;
|
||||
|
||||
> .material-icons {
|
||||
color: $color-gray-light;
|
||||
> .disabled {
|
||||
cursor: not-allowed !important;
|
||||
|
||||
> .material-icons {
|
||||
color: $color-gray-light;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
> .index-list {
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
|
|
@ -70,7 +79,7 @@
|
|||
.document-toc-desktop {
|
||||
display: inline-block;
|
||||
position: fixed;
|
||||
left: 20px;
|
||||
right: 30px;
|
||||
z-index: 777;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,28 +1,30 @@
|
|||
<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="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 class="header">
|
||||
<div class="title">Table of contents</div>
|
||||
{{#if session.authenticated}}
|
||||
{{#if permissions.documentEdit}}
|
||||
{{#unless emptyState}}
|
||||
<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>
|
||||
<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 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>
|
||||
{{/unless}}
|
||||
{{/unless}}
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
</div>
|
||||
|
||||
<ul class="index-list">
|
||||
{{#each pages key="id" as |page index|}}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<div class="row no-gutters">
|
||||
<div class="row no-gutters align-items-center">
|
||||
|
||||
<div class="col-10">
|
||||
<div class="document-structure">
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue