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

page toolbar

Browse source
This commit is contained in:
Harvey Kandola 2017-12-06 19:56:51 +00:00
parent 836b7f3fb4
commit 13a879a89b
11 changed files with 213 additions and 224 deletions
Download patch file Download diff file Expand all files Collapse all files

1
gui/app/components/document/content-linker.js
View file

@ -10,7 +10,6 @@
// https://documize.com
import { debounce } from '@ember/runloop';
import { computed, set } from '@ember/object';
import Component from '@ember/component';
import { inject as service } from '@ember/service';

163
gui/app/components/document/page-heading.js
View file

@ -10,65 +10,18 @@
// https://documize.com
import Component from '@ember/component';
import { computed } from '@ember/object';
import { inject as service } from '@ember/service';
import TooltipMixin from '../../mixins/tooltip';
import { A } from "@ember/array"
import ModalMixin from '../../mixins/modal';
export default Component.extend(TooltipMixin, {
export default Component.extend(ModalMixin, {
documentService: service('document'),
deleteChildren: false,
menuOpen: false,
blockTitle: "",
blockExcerpt: "",
documentList: [], //includes the current document
documentListOthers: [], //excludes the current document
selectedDocument: null,
checkId: computed('page', function () {
let id = this.get('page.id');
return `delete-check-button-${id}`;
}),
menuTarget: computed('page', function () {
let id = this.get('page.id');
return `page-menu-${id}`;
}),
deleteButtonId: computed('page', function () {
let id = this.get('page.id');
return `delete-page-button-${id}`;
}),
publishButtonId: computed('page', function () {
let id = this.get('page.id');
return `publish-button-${id}`;
}),
publishDialogId: computed('page', function () {
let id = this.get('page.id');
return `publish-dialog-${id}`;
}),
blockTitleId: computed('page', function () {
let id = this.get('page.id');
return `block-title-${id}`;
}),
blockExcerptId: computed('page', function () {
let id = this.get('page.id');
return `block-excerpt-${id}`;
}),
copyButtonId: computed('page', function () {
let id = this.get('page.id');
return `copy-page-button-${id}`;
}),
copyDialogId: computed('page', function () {
let id = this.get('page.id');
return `copy-dialog-${id}`;
}),
moveButtonId: computed('page', function () {
let id = this.get('page.id');
return `move-page-button-${id}`;
}),
moveDialogId: computed('page', function () {
let id = this.get('page.id');
return `move-dialog-${id}`;
}),
documentList: A([]), //includes the current document
documentListOthers: A([]), //excludes the current document
hasMenuPermissions: computed('permissions', function() {
let permissions = this.get('permissions');
@ -77,48 +30,57 @@ export default Component.extend(TooltipMixin, {
permissions.get('documentMove') || permissions.get('documentTemplate');
}),
didRender() {
$("#" + this.get('blockTitleId')).removeClass('error');
$("#" + this.get('blockExcerptId')).removeClass('error');
didReceiveAttrs() {
this._super(...arguments);
// Fetch document targets once
if (this.get('documentList').length > 0) {
return;
}
this.load();
},
load() {
this.get('documentService').getPageMoveCopyTargets().then((d) => {
let me = this.get('document');
d.forEach((i) => {
i.set('selected', false);
});
this.set('documentList', A(d));
this.set('documentListOthers', A(d.filter((item) => item.get('id') !== me.get('id'))));
});
},
actions: {
onMenuOpen() {
if ($('#' + this.get('publishDialogId')).is( ":visible" )) {
return;
}
if ($('#' + this.get('copyDialogId')).is( ":visible" )) {
return;
}
if ($('#' + this.get('moveDialogId')).is( ":visible" )) {
return;
}
this.set('menuOpen', !this.get('menuOpen'));
},
onEdit() {
this.attrs.onEdit();
},
deletePage() {
onDeletePage() {
this.attrs.onDeletePage(this.get('deleteChildren'));
this.load();
this.modalClose('#delete-page-modal-' + this.get('page.id'));
},
onSavePageAsBlock() {
let page = this.get('page');
let titleElem = '#' + this.get('blockTitleId');
let titleElem = '#block-title-' + page.get('id');
let blockTitle = this.get('blockTitle');
if (is.empty(blockTitle)) {
$(titleElem).addClass('error');
$(titleElem).addClass('is-invalid');
return;
}
let excerptElem = '#' + this.get('blockExcerptId');
let excerptElem = '#block-desc-' + page.get('id');
let blockExcerpt = this.get('blockExcerpt');
blockExcerpt = blockExcerpt.replace(/\n/g, "");
if (is.empty(blockExcerpt)) {
$(excerptElem).addClass('error');
$(excerptElem).addClass('is-invalid');
return;
}
@ -140,44 +102,33 @@ export default Component.extend(TooltipMixin, {
this.set('menuOpen', false);
this.set('blockTitle', '');
this.set('blockExcerpt', '');
$(titleElem).removeClass('error');
$(excerptElem).removeClass('error');
$(titleElem).removeClass('is-invalid');
$(excerptElem).removeClass('is-invalid');
return true;
this.load();
this.modalClose('#publish-page-modal-' + this.get('page.id'));
});
},
// Copy/move actions
onCopyDialogOpen() {
// Fetch document targets once.
if (this.get('documentList').length > 0) {
return;
}
this.get('documentService').getPageMoveCopyTargets().then((d) => {
let me = this.get('document');
this.set('documentList', d);
this.set('documentListOthers', d.filter((item) => item.get('id') !== me.get('id')));
});
},
onTargetChange(d) {
this.set('selectedDocument', d);
},
onCopyPage() {
// can't proceed if no data
if (this.get('documentList.length') === 0) {
return;
}
let targetDocumentId = this.get('document.id');
if (is.not.null(this.get('selectedDocument'))) {
targetDocumentId = this.get('selectedDocument.id');
let targetDocumentId = this.get('documentList').findBy('selected', true).get('id');
// fall back to self
if (is.null(targetDocumentId)) {
targetDocumentId = this.get('document.id');
}
this.attrs.onCopyPage(targetDocumentId);
return true;
this.load();
this.modalClose('#copy-page-modal-' + this.get('page.id'));
},
onMovePage() {
@ -186,14 +137,18 @@ export default Component.extend(TooltipMixin, {
return;
}
if (is.null(this.get('selectedDocument'))) {
this.set('selectedDocument', this.get('documentListOthers')[0]);
let targetDocumentId = this.get('documentListOthers').findBy('selected', true).get('id');
// fall back to first document
if (is.null(targetDocumentId)) {
targetDocumentId = this.get('documentListOthers')[0].get('id');
}
let targetDocumentId = this.get('selectedDocument.id');
this.attrs.onMovePage(targetDocumentId);
return true;
this.load();
this.modalClose('#move-page-modal-' + this.get('page.id'));
}
}
});

12
gui/app/components/ui/ui-list-picker.js
View file

@ -10,13 +10,23 @@
// https://documize.com
import { set } from '@ember/object';
import Component from '@ember/component';
import { computed } from '@ember/object';
export default Component.extend({
nameField: 'category',
singleSelect: false,
items: [],
maxHeight: 0,
styleCss: computed('maxHeight', function () {
let height = this.get('maxHeight');
if (height > 0) {
return `overflow-y: scroll; max-height: ${height}px;`;
} else {
return '';
}
}),
actions: {
onToggle(item) {

10
gui/app/styles/view/document/doc-structure.scss
View file

@ -1,11 +1,7 @@
.document-structure {
margin: 0 0 0 0;
.page-toolbar {
text-align: right;
}
.page-header {
> .page-header {
margin: 0 0 0.7rem 0;
> .page-number {
@ -21,6 +17,10 @@
> .page-title {
display: inline-block;
font-size: 1.8rem;
font-weight: bold;
margin: 16px 0;
color: $color-dark;
}
}
}

4
gui/app/templates/components/document/document-meta.hbs
View file

@ -46,7 +46,7 @@
</div>
{{#if permissions.documentEdit}}
{{#ui/ui-dialog title="Document Categories" confirmCaption="Select" buttonType="btn-outline-success" show=showCategoryModal onAction=(action 'onSaveCategory')}}
{{#ui/ui-dialog title="Document Categories" confirmCaption="Select" buttonType="btn-success" show=showCategoryModal onAction=(action 'onSaveCategory')}}
<p>Select who can view documents within category</p>
{{ui/ui-list-picker items=categories nameField='category' singleSelect=false}}
{{/ui/ui-dialog}}
@ -74,7 +74,7 @@
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-secondary" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-outline-success" onclick={{action 'onSaveTags'}}>Save</button>
<button type="button" class="btn btn-success" onclick={{action 'onSaveTags'}}>Save</button>
</div>
</div>
</div>

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

@ -1,10 +1,14 @@
<div id="page-{{page.id}}" class="is-a-page wysiwyg" data-id="{{ page.id }}" data-type="{{page.contentType}}">
<div id="page-{{page.id}}" class="is-a-page" data-id="{{ page.id }}" data-type="{{page.contentType}}">
{{#if editMode}}
{{document/document-editor document=document folder=folder page=page meta=meta onCancel=(action 'onCancelEdit') onAction=(action 'onSavePage')}}
<div class="wysiwyg">
{{document/document-editor document=document folder=folder page=page meta=meta onCancel=(action 'onCancelEdit') onAction=(action 'onSavePage')}}
</div>
{{else}}
{{document/page-heading tagName=page.tagName document=document folder=folder page=page permissions=permissions tabMode=tabMode
{{document/page-heading document=document folder=folder page=page permissions=permissions tabMode=tabMode
onEdit=(action 'onEdit') onSavePageAsBlock=(action 'onSavePageAsBlock')
onCopyPage=(action 'onCopyPage') onMovePage=(action 'onMovePage') onDeletePage=(action 'onDeletePage')}}
{{section/base-renderer page=page}}
<div class="wysiwyg">
{{section/base-renderer page=page}}
</div>
{{/if}}
</div>

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

@ -1,95 +1,133 @@
<div class="row no-gutters document-structure">
<div class="row no-gutters">
<div id="page-title-{{ page.id }}" class="col-10 page-header">
<span class="page-number">1</span>
<span class="page-title">{{page.title}}</span>
<div class="col-10">
<div class="document-structure">
<div class="page-header">
<span class="page-number">1</span>
<span class="page-title">{{page.title}}</span>
</div>
</div>
</div>
<div id="page-toolbar-{{ page.id }}" class="col-2 page-toolbar">
{{#if permissions.documentEdit}}
<div class="round-button-mono" {{action 'onEdit'}}>
<i class="material-icons color-gray">mode_edit</i>
</div>
{{#if hasMenuPermissions}}
<div class="round-button-mono" id="page-menu-{{page.id}}">
<i class="material-icons color-gray">more_vert</i>
</div>
{{#dropdown-menu target=menuTarget position="top right" open="click" onOpenCallback=(action 'onMenuOpen') onCloseCallback=(action 'onMenuOpen')}}
<ul class="menu">
{{#if permissions.documentCopy}}
<li class="item" id={{copyButtonId}}>Copy</li>
<div class="col-2">
<div class="document-structure">
<div class="page-toolbar" id="page-toolbar-{{ page.id }}">
{{#if permissions.documentEdit}}
<div class="float-right">
<div id="page-edit-button-{{page.id}}" class="button-icon-gray align-middle" {{action 'onEdit'}}>
<i class="material-icons">mode_edit</i>
</div>
{{#if hasMenuPermissions}}
<div class="button-icon-gap" />
<div id="page-menu-button-{{page.id}}" class="button-icon-gray align-middle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="material-icons">more_vert</i>
</div>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="page-menu-button-{{page.id}}">
{{#if permissions.documentCopy}}
<a class="dropdown-item" href="#" id={{concat 'copy-page-button-' page.id}} data-toggle="modal" data-target={{concat '#copy-page-modal-' page.id}} data-backdrop="static">Copy</a>
{{/if}}
{{#if permissions.documentMove}}
<a class="dropdown-item" href="#" id={{concat 'move-page-button-' page.id}} data-toggle="modal" data-target={{concat '#move-page-modal-' page.id}} data-backdrop="static">Move</a>
{{/if}}
{{#if permissions.documentTemplate}}
<a class="dropdown-item" href="#" id={{concat 'publish-page-button-' page.id}} data-toggle="modal" data-target={{concat '#publish-page-modal-' page.id}} data-backdrop="static">Publish</a>
{{/if}}
{{#if permissions.documentDelete}}
<a class="dropdown-item text-danger" href="#" id={{concat 'delete-page-button-' page.id}} data-toggle="modal" data-target={{concat '#delete-page-modal-' page.id}} data-backdrop="static">Delete</a>
{{/if}}
</div>
{{/if}}
{{#if permissions.documentMove}}
<li class="item" id={{moveButtonId}}>Move</li>
{{/if}}
{{#if permissions.documentTemplate}}
<li class="item" id={{publishButtonId}}>Publish</li>
{{/if}}
{{#if permissions.documentDelete}}
<li class="item danger" id={{deleteButtonId}}>Delete</li>
{{/if}}
</ul>
{{/dropdown-menu}}
{{/if}}
</div>
{{/if}}
</div>
</div>
</div>
{{#if menuOpen}}
{{#if permissions.documentDelete}}
{{#dropdown-dialog target=deleteButtonId position="bottom right" button="Delete" color="flat-red" onAction=(action 'deletePage')}}
<p>Are you sure you want to delete <span class="font-weight-bold">{{page.title}}?</span></p>
<p>
{{input type="checkbox" id=checkId class="margin-left-20" checked=deleteChildren}}
<label for="{{checkId}}">&nbsp;Delete child sections</label>
</p>
{{/dropdown-dialog}}
{{/if}}
{{#if permissions.documentTemplate}}
{{#dropdown-dialog id=publishDialogId target=publishButtonId position="bottom right" button="Publish" color="flat-green" focusOn=blockTitleId onAction=(action 'onSavePageAsBlock')}}
<div class="form-header">
<div class="tip">
<span class="font-weight-bold">{{folder.name}}:</span> Content Block
</div>
{{#if permissions.documentCopy}}
<div id={{concat 'copy-page-modal-' page.id}} class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">Copy Section</div>
<div class="modal-body">
<div class="form-group">
<label>Destination Document</label>
{{ui/ui-list-picker items=documentList nameField='name' singleSelect=true maxHeight=300}}
</div>
<div class="input-control">
<label>Name</label>
<div class="tip">Short title for reusable content block</div>
{{input type="text" value=blockTitle id=blockTitleId}}
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-secondary" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-success" onclick={{action 'onCopyPage'}}>Copy</button>
</div>
</div>
</div>
</div>
{{/if}}
{{#if permissions.documentMove}}
<div id={{concat 'move-page-modal-' page.id}} class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">Move Section</div>
<div class="modal-body">
<div class="form-group">
<label>Destination Document</label>
{{ui/ui-list-picker items=documentListOthers nameField='name' singleSelect=true maxHeight=300}}
</div>
<div class="input-control">
<label>Description</label>
<div class="tip">Short description to help others understand<br/>the reusable content block</div>
{{textarea rows="3" value=blockExcerpt id=blockExcerptId}}
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-secondary" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-success" onclick={{action 'onMovePage'}}>Move</button>
</div>
</div>
</div>
</div>
{{/if}}
{{#if permissions.documentDelete}}
<div id={{concat 'delete-page-modal-' page.id}} class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">Delete Section</div>
<div class="modal-body">
<p>Are you shire you want to delete this section?</p>
<label class="form-check-label">
<input type="checkbox" class="form-check-input" checked={{deleteChildren}} />
Also delete child sections
</label>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-secondary" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-danger" onclick={{action 'onDeletePage'}}>Delete</button>
</div>
</div>
</div>
</div>
{{/if}}
{{#if permissions.documentTemplate}}
<div id={{concat 'publish-page-modal-' page.id}} class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">Publish Reusable Content Block</div>
<div class="modal-body">
<div class="form-group">
<label for="block-title-{{page.id}}">Name</label>
{{input id=(concat 'block-title-' page.id) type='text' class="form-control mousetrap" placeholder="Enter name" value=blockTitle}}
<small class="form-text text-muted">Provide a short title for the reusable content block</small>
</div>
{{/dropdown-dialog}}
{{/if}}
{{#if permissions.documentCopy}}
{{#dropdown-dialog id=copyDialogId target=copyButtonId position="bottom right" button="Copy" color="flat-green" onOpenCallback=(action 'onCopyDialogOpen') onAction=(action 'onCopyPage')}}
<div class="form-header">
<div class="tip">
<span class="font-weight-bold">Copy:</span> {{page.title}}
</div>
<div class="form-group">
<label for="block-desc-{{page.id}}">Description</label>
{{textarea id=(concat 'block-desc-' page.id) rows="3" class="form-control mousetrap" placeholder="Enter description" value=blockExcerpt}}
<small class="form-text text-muted">Short description to help others understand the reusable content block</small>
</div>
<div class="input-control">
<label>Target</label>
<div class="tip">Select where the content should be copied to</div>
{{ui-select cssClass="dropdown-page-toolbar" content=documentList action=(action 'onTargetChange') optionValuePath="id" optionLabelPath="name" selection=document}}
</div>
{{/dropdown-dialog}}
{{/if}}
{{#if permissions.documentMove}}
{{#dropdown-dialog id=moveDialogId target=moveButtonId position="bottom right" button="Move" color="flat-green" onOpenCallback=(action 'onCopyDialogOpen') onAction=(action 'onMovePage')}}
<div class="form-header">
<div class="tip">
<span class="font-weight-bold">Move:</span> {{page.title}}
</div>
</div>
<div class="input-control">
<label>Target</label>
<div class="tip">Select where the content should be moved to</div>
{{ui-select cssClass="dropdown-page-toolbar" content=documentListOthers action=(action 'onTargetChange') optionValuePath="id" optionLabelPath="name"}}
</div>
{{/dropdown-dialog}}
{{/if}}
{{/if}}
{{/if}}
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-secondary" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-success" onclick={{action 'onSavePageAsBlock'}}>Publish</button>
</div>
</div>
</div>
</div>
{{/if}}
</div>

2
gui/app/templates/components/toolbar/for-document.hbs
View file

@ -32,7 +32,7 @@
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-secondary" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-outline-success" onclick={{action 'onSaveTemplate'}}>Save</button>
<button type="button" class="btn btn-success" onclick={{action 'onSaveTemplate'}}>Save</button>
</div>
</div>
</div>

4
gui/app/templates/components/toolbar/for-space.hbs
View file

@ -27,7 +27,7 @@
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-secondary" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-outline-success" onclick={{action 'onSpaceInvite'}}>Invite</button>
<button type="button" class="btn btn-success" onclick={{action 'onSpaceInvite'}}>Invite</button>
</div>
</div>
</div>
@ -93,7 +93,7 @@
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-secondary" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-outline-success" onclick={{action 'onAddSpace'}}>Add</button>
<button type="button" class="btn btn-success" onclick={{action 'onAddSpace'}}>Add</button>
</div>
</div>
</div>

19
gui/app/templates/components/toolbar/for-spaces.hbs
View file

@ -31,7 +31,7 @@
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-secondary" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-outline-success" onclick={{action 'onAddSpace'}}>Add</button>
<button type="button" class="btn btn-success" onclick={{action 'onAddSpace'}}>Add</button>
</div>
</div>
</div>
@ -39,20 +39,3 @@
{{/if}}
{{/toolbar/t-actions}}
{{/toolbar/t-toolbar}}
<div class="row">
<div class="col col-sm-8">
<div class="toolbar">
<ul class="links">
</ul>
</div>
</div>
<div class="col col-sm-4">
<div class="toolbar">
<div class="buttons">
</div>
</div>
</div>
</div>

2
gui/app/templates/components/ui/ui-list-picker.hbs
View file

@ -1,5 +1,5 @@
<div class="widget-list-picker">
<ul class="options">
<ul class="options" style="{{{styleCss}}}">
{{#each items as |item|}}
<li class="option {{if item.selected 'selected'}}" {{action 'onToggle' item}}>
<div class="text text-truncate">{{get item nameField}}</div>