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

WIP section editors UX

Browse source
This commit is contained in:
Harvey Kandola 2017-12-08 17:24:39 +00:00
parent 35947ffbfc
commit 57b3801f87
21 changed files with 210 additions and 308 deletions
Download patch file Download diff file Expand all files Collapse all files

1
gui/app/components/document/block-editor.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 Component from '@ember/component'; import Component from '@ember/component';
export default Component.extend({ export default Component.extend({

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

@ -12,7 +12,6 @@
import { debounce } from '@ember/runloop'; import { debounce } from '@ember/runloop';
import { computed, set } from '@ember/object'; import { computed, set } from '@ember/object';
import { inject as service } from '@ember/service'; import { inject as service } from '@ember/service';
import { A } from '@ember/array';
import Component from '@ember/component'; import Component from '@ember/component';
import TooltipMixin from '../../mixins/tooltip'; import TooltipMixin from '../../mixins/tooltip';
import ModalMixin from '../../mixins/modal'; import ModalMixin from '../../mixins/modal';

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

@ -38,6 +38,8 @@ export default Component.extend(ModalMixin, {
return; return;
} }
this.modalInputFocus('#publish-page-modal-' + this.get('page.id'), '#block-title-' + this.get('page.id'));
this.load(); this.load();
}, },
@ -49,6 +51,10 @@ export default Component.extend(ModalMixin, {
i.set('selected', false); i.set('selected', false);
}); });
if (this.get('isDestroyed') || this.get('isDestroying')) {
return;
}
this.set('documentList', A(d)); this.set('documentList', A(d));
this.set('documentListOthers', A(d.filter((item) => item.get('id') !== me.get('id')))); this.set('documentListOthers', A(d.filter((item) => item.get('id') !== me.get('id'))));
}); });

4
gui/app/components/section/base-editor-inline.js
View file

@ -20,10 +20,12 @@ export default Component.extend(TooltipMixin, ModalMixin, {
mousetrap: null, mousetrap: null,
showLinkModal: false, showLinkModal: false,
hasNameError: empty('page.title'), hasNameError: empty('page.title'),
hasDescError: empty('page.excerpt'),
pageId: computed('page', function () { pageId: computed('page', function () {
let page = this.get('page'); let page = this.get('page');
return `page-editor-${page.id}`; return `page-editor-${page.id}`;
}), }),
previewText: 'Preview',
didRender() { didRender() {
let msContainer = document.getElementById('section-editor-' + this.get('containerId')); let msContainer = document.getElementById('section-editor-' + this.get('containerId'));
@ -91,6 +93,8 @@ export default Component.extend(TooltipMixin, ModalMixin, {
}, },
onPreview() { onPreview() {
let pt = this.get('previewText');
this.set('previewText', pt === 'Preview' ? 'Edit Mode' : 'Preview');
return this.get('onPreview')(); return this.get('onPreview')();
}, },

62
gui/app/components/section/base-editor.js
View file

@ -9,19 +9,16 @@
// //
// https://documize.com // https://documize.com
import { computed } from '@ember/object'; import { empty } from '@ember/object/computed';
import Component from '@ember/component'; import Component from '@ember/component';
import ModalMixin from '../../mixins/modal';
export default Component.extend({ export default Component.extend(ModalMixin, {
drop: null,
cancelLabel: "Close", cancelLabel: "Close",
actionLabel: "Save", actionLabel: "Save",
tip: "Short and concise title",
busy: false, busy: false,
hasExcerpt: computed('page', function () { hasNameError: empty('page.title'),
return is.not.undefined(this.get('page.excerpt')); hasDescError: empty('page.excerpt'),
}),
didRender() { didRender() {
let self = this; let self = this;
@ -34,8 +31,8 @@ export default Component.extend({
return false; return false;
}); });
$("#page-title").removeClass("error"); $("#page-title").removeClass("is-invalid");
$("#page-excerpt").removeClass("error"); $("#page-excerpt").removeClass("is-invalid");
$("#page-title").focus(function() { $("#page-title").focus(function() {
$(this).select(); $(this).select();
@ -45,65 +42,38 @@ export default Component.extend({
}); });
}, },
willDestroyElement() {
let drop = this.get('drop');
if (is.not.null(drop)) {
drop.destroy();
}
},
actions: { actions: {
onCancel() { onCancel() {
if (this.attrs.isDirty() !== null && this.attrs.isDirty()) { if (this.attrs.isDirty() !== null && this.attrs.isDirty()) {
$(".discard-edits-dialog").css("display", "block"); this.modalOpen('#discard-modal', {show: true});
let drop = new Drop({
target: $("#editor-cancel")[0],
content: $(".cancel-edits-dialog")[0],
classes: 'drop-theme-basic',
position: "bottom right",
openOn: "always",
tetherOptions: {
offset: "5px 0",
targetOffset: "10px 0"
},
remove: false
});
this.set('drop', drop);
return; return;
} }
this.attrs.onCancel(); this.attrs.onCancel();
}, },
onDiscard() {
this.modalClose('#discard-modal');
this.attrs.onCancel();
},
onAction() { onAction() {
if (this.get('busy')) { if (this.get('busy')) {
return; return;
} }
if (is.empty(this.get('page.title'))) { if (is.empty(this.get('page.title'))) {
$("#page-title").addClass("error").focus(); $("#page-title").addClass("is-invalid").focus();
return; return;
} }
if (this.get('hasExcerpt') && is.empty(this.get('page.excerpt'))) { if (this.get('hasExcerpt') && is.empty(this.get('page.excerpt'))) {
$("#page-excerpt").addClass("error").focus(); $("#page-excerpt").addClass("is-invalid").focus();
return; return;
} }
this.attrs.onAction(this.get('page.title')); this.attrs.onAction(this.get('page.title'));
},
keepEditing() {
let drop = this.get('drop');
drop.close();
},
discardEdits() {
this.attrs.onCancel();
} }
} }
}); });

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

@ -29,6 +29,8 @@ export default Component.extend(ModalMixin, TooltipMixin, AuthMixin, {
name: '', name: '',
description: '' description: ''
}, },
showTools: true, // show document related tools? favourite, delete, make template...
showDocumentLink: false, // show link to document in breadcrumbs
didReceiveAttrs() { didReceiveAttrs() {
this._super(...arguments); this._super(...arguments);

1
gui/app/pods/document/block/controller.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 Controller from '@ember/controller'; import Controller from '@ember/controller';
export default Controller.extend({ export default Controller.extend({

9
gui/app/pods/document/block/route.js
View file

@ -10,7 +10,6 @@
// https://documize.com // https://documize.com
import { hash } from 'rsvp'; import { hash } from 'rsvp';
import { inject as service } from '@ember/service'; import { inject as service } from '@ember/service';
import Route from '@ember/routing/route'; import Route from '@ember/routing/route';
import AuthenticatedRouteMixin from 'ember-simple-auth/mixins/authenticated-route-mixin'; import AuthenticatedRouteMixin from 'ember-simple-auth/mixins/authenticated-route-mixin';
@ -29,12 +28,4 @@ export default Route.extend(AuthenticatedRouteMixin, {
block: self.get('sectionService').getBlock(params.block_id), block: self.get('sectionService').getBlock(params.block_id),
}); });
}, },
activate() {
$('body').addClass('background-color-off-white');
},
deactivate() {
$('body').removeClass('background-color-off-white');
}
}); });

23
gui/app/pods/document/block/template.hbs
View file

@ -1,18 +1,7 @@
<div class="zone-section-editor"> {{layout/nav-bar}}
<div class="page-container">
<div id="page-content-wrapper"> <div class="container">
<div id="zone-document-content" class="zone-document-content"> {{toolbar/for-document document=model.document spaces=model.folders space=model.folder permissions=model.permissions showTools=false showDocumentLink=true}}
<div class="back-to-space">
{{#link-to 'document.index' model.folder.id model.folder.slug model.document.id model.document.slug}} {{document/block-editor document=model.document folder=model.folder block=model.block onCancel=(action 'onCancel') onAction=(action 'onAction')}}
<i class="material-icons">arrow_back</i>&nbsp;{{model.document.name}}
{{/link-to}}
</div>
{{document/document-heading document=model.document}}
{{document/block-editor document=model.document folder=model.folder block=model.block onCancel=(action 'onCancel') onAction=(action 'onAction')}}
</div>
</div>
</div>
</div> </div>

8
gui/app/pods/document/section/controller.js
View file

@ -10,11 +10,9 @@
// https://documize.com // https://documize.com
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';
export default Controller.extend(NotifierMixin, { export default Controller.extend({
documentService: service('document'), documentService: service('document'),
actions: { actions: {
@ -28,8 +26,6 @@ export default Controller.extend(NotifierMixin, {
}, },
onAction(page, meta) { onAction(page, meta) {
this.showNotification("Saved");
let model = { let model = {
page: page.toJSON({ includeId: true }), page: page.toJSON({ includeId: true }),
meta: meta.toJSON({ includeId: true }) meta: meta.toJSON({ includeId: true })
@ -43,7 +39,7 @@ export default Controller.extend(NotifierMixin, {
this.get('model.folder.id'), this.get('model.folder.id'),
this.get('model.folder.slug'), this.get('model.folder.slug'),
this.get('model.document.id'), this.get('model.document.id'),
this.get('model.document.slug'), this.get('model.document.slug'),
{ queryParams: { pageId: page.get('id')}}); { queryParams: { pageId: page.get('id')}});
}); });
}, },

8
gui/app/pods/document/section/route.js
View file

@ -31,13 +31,5 @@ export default Route.extend(AuthenticatedRouteMixin, {
page: this.get('documentService').getPage(this.modelFor('document').document.get('id'), params.page_id), page: this.get('documentService').getPage(this.modelFor('document').document.get('id'), params.page_id),
meta: this.get('documentService').getPageMeta(this.modelFor('document').document.get('id'), params.page_id) meta: this.get('documentService').getPageMeta(this.modelFor('document').document.get('id'), params.page_id)
}); });
},
activate() {
$('body').addClass('background-color-off-white');
},
deactivate() {
$('body').removeClass('background-color-off-white');
} }
}); });

20
gui/app/pods/document/section/template.hbs
View file

@ -1,15 +1,9 @@
<div class="zone-section-editor"> {{layout/nav-bar}}
<div class="page-container">
<div id="page-content-wrapper"> <div class="container">
<div id="zone-document-content" class="zone-document-content"> {{toolbar/for-document document=model.document spaces=model.folders space=model.folder permissions=model.permissions showTools=false showDocumentLink=true}}
<div class="back-to-space">
{{#link-to 'document.index' model.folder.id model.folder.slug model.document.id model.document.slug}} <div class="mt-5">
<i class="material-icons">arrow_back</i>&nbsp;{{model.document.name}} {{document/document-editor document=model.document folder=model.folder page=model.page meta=model.meta onCancel=(action 'onCancel') onAction=(action 'onAction')}}
{{/link-to}}
</div>
{{document/document-heading document=model.document permissions=model.permissions}}
{{document/document-editor document=model.document folder=model.folder page=model.page meta=model.meta onCancel=(action 'onCancel') onAction=(action 'onAction')}}
</div>
</div>
</div> </div>
</div> </div>

15
gui/app/styles/section/trello.scss
View file

@ -23,14 +23,15 @@
font-weight: bold; font-weight: bold;
color: #4c4c4c; color: #4c4c4c;
font-size: 14px; font-size: 14px;
margin: 5px; display: inline-block;
vertical-align: text-top;
} }
.section-trello-list-checkbox { .section-trello-list-checkbox {
vertical-align: text-bottom; vertical-align: text-top;
margin-right: 10px;
} }
.section-trello-render { .section-trello-render {
> .trello-board { > .trello-board {
width: 100%; width: 100%;
@ -44,7 +45,7 @@
font-weight: bold; font-weight: bold;
color: #fff; color: #fff;
font-size: 16px; font-size: 16px;
} }
} }
> .trello-list { > .trello-list {
@ -65,7 +66,7 @@
font-size: 14px; font-size: 14px;
margin: 0 10px 10px 0; margin: 0 10px 10px 0;
} }
> a { > a {
> .trello-card { > .trello-card {
color: #4c4c4c; color: #4c4c4c;
@ -82,8 +83,8 @@
white-space: normal; white-space: normal;
cursor: pointer; cursor: pointer;
vertical-align: top; vertical-align: top;
} }
} }
} }
} }
} }

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

@ -7,7 +7,7 @@
> .page-number { > .page-number {
color: $color-dark; color: $color-dark;
background-color: $color-gray-light2; background-color: $color-gray-light2;
padding: 0.4rem 1rem; padding: 0.2rem 1rem;
font-size: 1.8rem; font-size: 1.8rem;
margin: 0 1.5rem 0 0; margin: 0 1.5rem 0 0;
font-weight: normal; font-weight: normal;

42
gui/app/styles/view/document/section-editor.scss
View file

@ -4,7 +4,9 @@
} }
> .canvas { > .canvas {
margin: 34px 0 0 0; // margin: 34px 0 0 0;
padding: 30px 20px;
box-shadow: 0 0 0 0.75pt $color-stroke,0 0 3pt 0.75pt $color-stroke;
} }
} }
@ -19,41 +21,7 @@
} }
} }
.block-editor {
margin-top: 3rem;
.section-editor-fullscreen {
@extend .transition-all;
@include border-radius(2px);
@include ease-in();
position: relative;
padding: 25px 50px;
box-shadow: 0 0 0 0.75pt $color-stroke,0 0 3pt 0.75pt $color-stroke;
background-color: $color-white;
} }
.zone-section-editor {
margin-left: 60px;
padding: 20px 60px;
z-index: 777;
position: relative;
.section-editor {
@extend .transition-all;
@include border-radius(2px);
@include ease-in();
position: relative;
padding: 25px 50px;
box-shadow: 0 0 0 0.75pt $color-stroke,0 0 3pt 0.75pt $color-stroke;
background-color: $color-white;
> .buttons {
margin-top: 17px;
float: right;
}
.cancel-edits-dialog {
display: none;
}
}
}

5
gui/app/templates/components/document/block-editor.hbs
View file

@ -1 +1,4 @@
{{component editorType document=document folder=folder page=page meta=meta blockMode=true onCancel=(action 'onCancel') onAction=(action 'onAction')}} <div class="block-editor">
{{component editorType document=document folder=folder page=page meta=meta blockMode=true onCancel=(action 'onCancel') onAction=(action 'onAction')}}
</div>

11
gui/app/templates/components/section/airtable/type-editor.hbs
View file

@ -1,8 +1,7 @@
{{#section/base-editor document=document folder=folder page=page isDirty=(action 'isDirty') onCancel=(action 'onCancel') {{#section/base-editor document=document folder=folder page=page isDirty=(action 'isDirty') onCancel=(action 'onCancel') onAction=(action 'onAction')}}
onAction=(action 'onAction')}} <div class="form-group">
<div class="input-control"> <label for="airtable-embed-code">Airtable embed code</label>
<label>Airtable embed code</label> {{textarea value=data rows="3" id="airtable-embed-code" class="form-control mousetrap" placeholder="Enter code" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"}}
<div class="tip">Paste the Airtable embed code snippet</div> <small class="form-text text-muted">Paste the Airtable embed code snippet</small>
{{textarea value=data rows="3" id="airtable-embed-code" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"}}
</div> </div>
{{/section/base-editor}} {{/section/base-editor}}

18
gui/app/templates/components/section/base-editor-inline.hbs
View file

@ -1,24 +1,22 @@
<div id="section-editor-{{pageId}}" class="{{if blockMode 'sectiopn-editor-fullscreen'}}"> <div id="section-editor-{{pageId}}">
<div class="row"> <div class="row">
<div class="col-9 section-editor"> <div class="col-8 section-editor">
{{#if blockMode}} {{#if blockMode}}
<div class="form-group"> <div class="form-group">
<label>Name</label> {{focus-input id="page-id-{{pageId}}" value=page.title class=(if hasNameError 'form-control mousetrap form-control-lg edit-title is-invalid' 'form-control form-control-lg edit-title mousetrap') placeholder="Enter name"}}
{{focus-input id="page-id-{{pageId}}" value=page.title class="form-control mousetrap"}}
</div> </div>
<div class="form-group"> <div class="form-group">
<label>Description</label> {{textarea id="page-excerpt-{{pageId}}" value=page.excerpt rows="2" class=(if hasDescError 'form-control mousetrap form-control-lg edit-title is-invalid' 'form-control form-control-lg edit-title mousetrap') placeholder="Enter description"}}
{{textarea id="page-excerpt-{{pageId}}" value=page.excerpt class="form-control mousetrap" rows="3"}}
</div> </div>
{{else}} {{else}}
<div class="form-group"> <div class="form-group">
{{focus-input type="text" id=pageId value=page.title class=(if hasNameError 'form-control mousetrap form-control-lg edit-title is-invalid' 'form-control form-control-lg edit-title mousetrap') placeholder="Name"}} {{focus-input type="text" id=pageId value=page.title class=(if hasNameError 'form-control mousetrap form-control-lg edit-title is-invalid' 'form-control form-control-lg edit-title mousetrap') placeholder="Enter name"}}
</div> </div>
{{/if}} {{/if}}
</div> </div>
<div class="col-3"> <div class="col-4">
<div class="float-right"> <div class="float-right">
{{#if busy}} {{#if busy}}
<img src="/assets/img/busy-gray.gif" class="busy-indicator" /> <img src="/assets/img/busy-gray.gif" class="busy-indicator" />
@ -29,7 +27,7 @@
{{/if}} {{/if}}
{{#if previewButton}} {{#if previewButton}}
<div class="btn btn-primary" id="section-editor-preview-button-{{pageId}}" data-toggle="tooltip" data-placement="top" title="Preview" {{action 'onPreview'}}>Preview</div> <div class="btn btn-primary" id="section-editor-preview-button-{{pageId}}" {{action 'onPreview'}}>{{previewText}}</div>
{{/if}} {{/if}}
<div class="btn btn-success" {{action 'onAction'}}>Save</div> <div class="btn btn-success" {{action 'onAction'}}>Save</div>
@ -40,7 +38,7 @@
<div class="row"> <div class="row">
<div class="col section-editor"> <div class="col section-editor">
<div class="canvas"> <div class="canvas rounded">
{{yield}} {{yield}}
</div> </div>
</div> </div>

87
gui/app/templates/components/section/base-editor.hbs
View file

@ -1,45 +1,50 @@
<div class="section-editor"> <div id="section-editor-{{pageId}}">
<div class="buttons">
{{#if busy}} <div class="row">
<img src="/assets/img/busy-gray.gif" class="busy-indicator" /> <div class="col-8 section-editor">
{{/if}} <div class="form-group">
<div id="editor-cancel" class="flat-button flat-gray" {{action 'onCancel'}}>{{cancelLabel}}</div> {{focus-input type="text" id="page-title" value=page.title class=(if hasNameError 'form-control mousetrap form-control-lg edit-title is-invalid' 'form-control form-control-lg edit-title mousetrap') placeholder="Enter name"}}
<div class="button-gap" />
<div class="regular-button button-green" {{action 'onAction'}}>{{actionLabel}}</div>
</div>
<div class="clearfix"></div>
<div class="title">
<div class="input-control">
<label>Title</label>
<div class="tip">{{tip}}</div>
{{focus-input type='text' id="page-title" value=page.title class="mousetrap"}}
</div>
{{#if hasExcerpt}}
<div class="margin-top-30">
<div class="input-control">
<label>Excerpt</label>
<div class="tip">Short description</div>
{{textarea rows="3" id="page-excerpt" value=page.excerpt class="mousetrap"}}
</div>
</div> </div>
{{/if}} {{#if hasExcerpt}}
</div> <div class="form-group">
<div class="dropdown-dialog cancel-edits-dialog"> {{textarea id="page-excerpt" value=page.excerpt rows="2" class=(if hasDescError 'form-control mousetrap form-control-lg edit-title is-invalid' 'form-control form-control-lg edit-title mousetrap') placeholder="Enter description"}}
<div class="content"> </div>
<p>Do you want to cancel editing and lose unsaved changes?</p> {{/if}}
</div> </div>
<div class="actions">
<div class="flat-button" {{action 'keepEditing'}}> <div class="col-4">
no <div class="float-right">
{{#if busy}}
<img src="/assets/img/busy-gray.gif" class="busy-indicator" />
{{/if}}
<div class="btn btn-success" {{action 'onAction'}}>{{actionLabel}}</div>
<div class="btn btn-outline-secondary" id="section-editor-cancel-button-{{pageId}}" {{action 'onCancel'}}>{{cancelLabel}}</div>
</div> </div>
<div class="flat-button flat-red" {{action 'discardEdits'}}> </div>
yes </div>
</div>
</div> <div class="row">
<div class="clearfix"></div> <div class="col section-editor">
<div class="canvas rounded">
{{yield}}
</div>
</div>
</div> </div>
<div class="canvas">
{{yield}}
</div>
<div class="clearfix"></div>
</div> </div>
<div id={{concat "discard-modal"}} class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">Discard Changes</div>
<div class="modal-body">
<p>You have made changes - continue editing or discard changes?</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-secondary" data-dismiss="modal">Continue editing</button>
<button type="button" class="btn btn-danger" onclick={{action 'onDiscard'}}>Discard changes</button>
</div>
</div>
</div>
</div>

68
gui/app/templates/components/section/trello/type-editor.hbs
View file

@ -3,51 +3,33 @@
isDirty=(action 'isDirty') onCancel=(action 'onCancel') onAction=(action 'onAction')}} isDirty=(action 'isDirty') onCancel=(action 'onCancel') onAction=(action 'onAction')}}
{{#if authenticated}} {{#if authenticated}}
{{#if noBoards}}
<div class="pull-left width-50"> <p>You have no team boards to share - personal boards are never shown</p>
{{#if noBoards}} {{else}}
<div class="input-control"> <div class="form-group">
<div class="color-error">You have no team boards to share - personal boards are never shown.</div> <label>Select Board</label>
{{ui-select id="boards-dropdown" content=boards action=(action 'onBoardChange') optionValuePath="id" optionLabelPath="name" selection=config.board}}
</div>
<div class="form-group">
<label for="airtable-embed-cod">Select Lists</label>
<div class="section-trello-board" style= {{boardStyle}}>
<div class="section-trello-board-title">{{config.board.name}}</div>
{{#each config.lists as |list|}}
<div class="section-trello-list" {{action 'onListCheckbox' list.id}}>
{{#if list.included}}
<i class="material-icons widget-checkbox checkbox-gray section-trello-list-checkbox">check_box</i>
{{else}}
<i class="material-icons widget-checkbox checkbox-gray section-trello-list-checkbox">check_box_outline_blank</i>
{{/if}}
<span class="trello-list-title">{{list.name}}</span>
</div>
{{/each}}
<div class="clearfix" />
</div> </div>
{{else}} </div>
<div class="input-control"> {{/if}}
<label>Select Board</label>
<div class="tip">Choose lists to include from board</div>
{{ui-select id="boards-dropdown" content=boards action=(action 'onBoardChange') optionValuePath="id" optionLabelPath="name" selection=config.board}}
</div>
<div class="input-control">
<label>Lists</label>
<div class="tip">Select lists to include</div>
<div class="section-trello-board" style= {{boardStyle}}>
<div class="section-trello-board-title">{{config.board.name}}</div>
{{#each config.lists as |list|}}
<div class="section-trello-list" {{action 'onListCheckbox' list.id}}>
{{#if list.included}}
<i class="material-icons widget-checkbox checkbox-gray section-trello-list-checkbox">check_box</i>
{{else}}
<i class="material-icons widget-checkbox checkbox-gray section-trello-list-checkbox">check_box_outline_blank</i>
{{/if}}
<span class="trello-list-title">{{list.name}}</span>
</div>
{{/each}}
<div class="clearfix" />
</div>
</div>
{{/if}}
</div>
{{else}} {{else}}
<div class="btn btn-success" {{action 'auth'}}>Authenticate</div>
<div class="pull-left width-50">
<form>
<div class="form-header">
<div class="title">Authentication</div>
<div class="tip">Click to authenticate with Trello</div>
</div>
<div class="regular-button button-blue" {{ action 'auth' }}>Authenticate</div>
</form>
</div>
{{/if}} {{/if}}
{{/section/base-editor}} {{/section/base-editor}}

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

@ -3,80 +3,85 @@
{{#toolbar/t-links}} {{#toolbar/t-links}}
{{#link-to "folders" class="link" tagName="li"}}Spaces{{/link-to}} {{#link-to "folders" class="link" tagName="li"}}Spaces{{/link-to}}
{{#link-to "folder" space.id space.slug class="link" tagName="li"}}{{space.name}}{{/link-to}} {{#link-to "folder" space.id space.slug class="link" tagName="li"}}{{space.name}}{{/link-to}}
{{#if showDocumentLink}}
{{#link-to 'document.index' space.id space.slug document.id document.slug class="link"}}{{document.name}}{{/link-to}}
{{/if}}
{{/toolbar/t-links}} {{/toolbar/t-links}}
{{#toolbar/t-actions}} {{#if showTools}}
{{#if session.authenticated}} {{#toolbar/t-actions}}
{{#if permissions.documentAdd}} {{#if session.authenticated}}
<div id="document-template-button" class="button-icon-gray align-middle" data-toggle="tooltip" data-placement="top" title="Save as template"> {{#if permissions.documentAdd}}
<i class="material-icons" data-toggle="modal" data-target="#document-template-modal" data-backdrop="static">content_copy</i> <div id="document-template-button" class="button-icon-gray align-middle" data-toggle="tooltip" data-placement="top" title="Save as template">
<i class="material-icons" data-toggle="modal" data-target="#document-template-modal" data-backdrop="static">content_copy</i>
</div>
<div class="button-icon-gap" />
<div id="document-template-modal" class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">Save as Template</div>
<div class="modal-body">
<form onsubmit={{action 'onSaveTemplate'}}>
<div class="form-group">
<label for="new-template-name">Name</label>
{{input id="new-template-name" value=saveTemplate.name type='email' class="form-control mousetrap" placeholder="Template name"}}
<small class="form-text text-muted">Good template name conveys document type</small>
</div>
<div class="form-group">
<label for="new-template-desc">Description</label>
{{textarea id="new-template-desc" value=saveTemplate.description class="form-control" rows="5"}}
<small class="form-text text-muted">Explain use case for this template</small>
</div>
</form>
</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 'onSaveTemplate'}}>Save</button>
</div>
</div>
</div>
</div>
{{/if}}
{{/if}}
<div id="document-print-button" class="button-icon-gray align-middle" data-toggle="tooltip" data-placement="top" title="Print" {{action 'onPrintDocument'}}>
<i class="material-icons">print</i>
</div>
<div class="button-icon-gap" />
{{#if pinState.isPinned}}
<div id="document-pin-button" class="button-icon-gold align-middle" data-toggle="tooltip" data-placement="top" title="Remove favorite" {{action 'onUnpin'}}>
<i class="material-icons">star</i>
</div> </div>
<div class="button-icon-gap" /> <div class="button-icon-gap" />
<div id="document-template-modal" class="modal" tabindex="-1" role="dialog"> {{else if session.authenticated}}
<div id="document-pin-button" class="button-icon-gray align-middle" data-toggle="tooltip" data-placement="top" title="Save favorite" {{action 'onPin'}}>
<i class="material-icons">star</i>
</div>
<div class="button-icon-gap" />
{{/if}}
{{#if permissions.documentDelete}}
<div id="document-delete-button" class="button-icon-danger align-middle" data-toggle="tooltip" data-placement="top" title="Delete document">
<i class="material-icons" data-toggle="modal" data-target="#document-delete-modal" data-backdrop="static">delete</i>
</div>
<div class="button-icon-gap" />
<div id="document-delete-modal" class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document"> <div class="modal-dialog" role="document">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header">Save as Template</div> <div class="modal-header">Delete Document</div>
<div class="modal-body"> <div class="modal-body">
<form onsubmit={{action 'onSaveTemplate'}}> <p>Are you sure you want to delete this document?</p>
<div class="form-group">
<label for="new-template-name">Name</label>
{{input id="new-template-name" value=saveTemplate.name type='email' class="form-control mousetrap" placeholder="Template name"}}
<small class="form-text text-muted">Good template name conveys document type</small>
</div>
<div class="form-group">
<label for="new-template-desc">Description</label>
{{textarea id="new-template-desc" value=saveTemplate.description class="form-control" rows="5"}}
<small class="form-text text-muted">Explain use case for this template</small>
</div>
</form>
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<button type="button" class="btn btn-outline-secondary" data-dismiss="modal">Cancel</button> <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-success" onclick={{action 'onSaveTemplate'}}>Save</button> <button type="button" class="btn btn-danger" onclick={{action 'onDocumentDelete'}}>Delete</button>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
{{/if}} {{/if}}
{{/if}} {{/toolbar/t-actions}}
{{/if}}
<div id="document-print-button" class="button-icon-gray align-middle" data-toggle="tooltip" data-placement="top" title="Print" {{action 'onPrintDocument'}}>
<i class="material-icons">print</i>
</div>
<div class="button-icon-gap" />
{{#if pinState.isPinned}}
<div id="document-pin-button" class="button-icon-gold align-middle" data-toggle="tooltip" data-placement="top" title="Remove favorite" {{action 'onUnpin'}}>
<i class="material-icons">star</i>
</div>
<div class="button-icon-gap" />
{{else if session.authenticated}}
<div id="document-pin-button" class="button-icon-gray align-middle" data-toggle="tooltip" data-placement="top" title="Save favorite" {{action 'onPin'}}>
<i class="material-icons">star</i>
</div>
<div class="button-icon-gap" />
{{/if}}
{{#if permissions.documentDelete}}
<div id="document-delete-button" class="button-icon-danger align-middle" data-toggle="tooltip" data-placement="top" title="Delete document">
<i class="material-icons" data-toggle="modal" data-target="#document-delete-modal" data-backdrop="static">delete</i>
</div>
<div class="button-icon-gap" />
<div id="document-delete-modal" class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">Delete Document</div>
<div class="modal-body">
<p>Are you sure you want to delete this document?</p>
</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 'onDocumentDelete'}}>Delete</button>
</div>
</div>
</div>
</div>
{{/if}}
{{/toolbar/t-actions}}
{{/toolbar/t-toolbar}} {{/toolbar/t-toolbar}}