mirror of
https://github.com/documize/community.git
synced 2025-07-21 14:19:43 +02:00
Turn add section UX into modal flow
At long last we have a modal-driven add section process @HarveyKandola !
This commit is contained in:
sauls8t
parent
716bd062d7
commit
fca6cc7ede
8 changed files with 286 additions and 303 deletions
161
gui/app/components/document/add-section.js
Normal file
161
gui/app/components/document/add-section.js
Normal file
|
|
@ -0,0 +1,161 @@
|
|||
// Copyright 2016 Documize Inc. <legal@documize.com>. All rights reserved.
|
||||
//
|
||||
// This software (Documize Community Edition) is licensed under
|
||||
// GNU AGPL v3 http://www.gnu.org/licenses/agpl-3.0.en.html
|
||||
//
|
||||
// You can operate outside the AGPL restrictions by purchasing
|
||||
// Documize Enterprise Edition and obtaining a commercial license
|
||||
// by contacting <sales@documize.com>.
|
||||
//
|
||||
// https://documize.com
|
||||
|
||||
import $ from 'jquery';
|
||||
import { empty } from '@ember/object/computed';
|
||||
import { inject as service } from '@ember/service';
|
||||
import { computed } from '@ember/object';
|
||||
import Tooltips from '../../mixins/tooltip';
|
||||
import Notifier from '../../mixins/notifier';
|
||||
import Modals from '../../mixins/modal';
|
||||
import Component from '@ember/component';
|
||||
|
||||
export default Component.extend(Tooltips, Notifier, Modals, {
|
||||
documentService: service('document'),
|
||||
sectionService: service('section'),
|
||||
store: service(),
|
||||
newSectionName: '',
|
||||
newSectionNameMissing: empty('newSectionName'),
|
||||
show: false,
|
||||
modalId: '#add-section-modal',
|
||||
canEdit: computed('permissions', 'document.protection', function() {
|
||||
let canEdit = this.get('document.protection') !== this.get('constants').ProtectionType.Lock && this.get('permissions.documentEdit');
|
||||
return canEdit;
|
||||
}),
|
||||
hasBlocks: computed('blocks', function() {
|
||||
return this.get('blocks.length') > 0;
|
||||
}),
|
||||
|
||||
onModalToggle: function () {
|
||||
let modalId = this.get('modalId');
|
||||
|
||||
if (this.get('show')) {
|
||||
this.modalOpen(modalId, {'show': true}, '#new-section-name');
|
||||
|
||||
let self = this;
|
||||
$(modalId).one('hidden.bs.modal', function(e) { // eslint-disable-line no-unused-vars
|
||||
self.set('show', false);
|
||||
});
|
||||
} else {
|
||||
this.modalClose(modalId);
|
||||
$(modalId).modal('hide');
|
||||
$(modalId).modal('dispose');
|
||||
}
|
||||
}.observes('show'),
|
||||
|
||||
addSection(model) {
|
||||
this.modalClose(this.get('modalId'));
|
||||
|
||||
let sequence = 0;
|
||||
let level = 1;
|
||||
let beforePage = this.get('beforePage');
|
||||
let constants = this.get('constants');
|
||||
let pages = this.get('pages');
|
||||
|
||||
// By default, we create page at the end of the document.
|
||||
if (pages.get('length') > 0 ) {
|
||||
let p = pages.get('lastObject');
|
||||
sequence = p.get('page.sequence') * 2;
|
||||
level = p.get('page.level');
|
||||
}
|
||||
|
||||
// But, if we can work work correct placement, we put new content as best we can.
|
||||
if (is.object(beforePage)) {
|
||||
level = beforePage.get('level');
|
||||
|
||||
// get any page before the beforePage so we can insert this new section between them
|
||||
let index = _.findIndex(this.get('pages'), function(item) { return item.get('page.id') === beforePage.get('id'); });
|
||||
|
||||
if (index !== -1) {
|
||||
let beforeBeforePage = this.get('pages')[index-1];
|
||||
|
||||
if (is.not.undefined(beforeBeforePage)) {
|
||||
sequence = (beforePage.get('sequence') + beforeBeforePage.get('page.sequence')) / 2;
|
||||
} else {
|
||||
sequence = beforePage.get('sequence') / 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
model.page.set('sequence', sequence);
|
||||
model.page.set('level', level);
|
||||
|
||||
if (this.get('document.protection') === constants.ProtectionType.Review) {
|
||||
model.page.set('status', model.page.get('relativeId') === '' ? constants.ChangeState.PendingNew : constants.ChangeState.Pending);
|
||||
}
|
||||
|
||||
return this.get('onInsertSection')(model);
|
||||
},
|
||||
|
||||
actions: {
|
||||
onInsertSection(section) {
|
||||
let sectionName = this.get('newSectionName');
|
||||
if (is.empty(sectionName)) {
|
||||
$("#new-section-name").focus();
|
||||
return;
|
||||
}
|
||||
|
||||
let page = this.get('store').createRecord('page');
|
||||
page.set('documentId', this.get('document.id'));
|
||||
page.set('title', sectionName);
|
||||
page.set('contentType', section.get('contentType'));
|
||||
page.set('pageType', section.get('pageType'));
|
||||
|
||||
let meta = {
|
||||
documentId: this.get('document.id'),
|
||||
rawBody: "",
|
||||
config: ""
|
||||
};
|
||||
|
||||
let model = {
|
||||
page: page,
|
||||
meta: meta
|
||||
};
|
||||
|
||||
const promise = this.addSection(model);
|
||||
promise.then((id) => {
|
||||
this.set('toEdit', model.page.pageType === 'section' ? id : '');
|
||||
});
|
||||
},
|
||||
|
||||
onInsertBlock(block) {
|
||||
let sectionName = this.get('newSectionName');
|
||||
if (is.empty(sectionName)) {
|
||||
$("#new-section-name").focus();
|
||||
return;
|
||||
}
|
||||
|
||||
let page = this.get('store').createRecord('page');
|
||||
page.set('documentId', this.get('document.id'));
|
||||
page.set('title', `${block.get('title')}`);
|
||||
page.set('body', block.get('body'));
|
||||
page.set('contentType', block.get('contentType'));
|
||||
page.set('pageType', block.get('pageType'));
|
||||
page.set('blockId', block.get('id'));
|
||||
|
||||
let meta = {
|
||||
documentId: this.get('document.id'),
|
||||
rawBody: block.get('rawBody'),
|
||||
config: block.get('config'),
|
||||
externalSource: block.get('externalSource')
|
||||
};
|
||||
|
||||
let model = {
|
||||
page: page,
|
||||
meta: meta
|
||||
};
|
||||
|
||||
const promise = this.addSection(model);
|
||||
promise.then((id) => { // eslint-disable-line no-unused-vars
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
@ -13,11 +13,12 @@ import $ from 'jquery';
|
|||
import { computed } from '@ember/object';
|
||||
import { debounce } from '@ember/runloop';
|
||||
import { inject as service } from '@ember/service';
|
||||
import Tooltips from '../../mixins/tooltip';
|
||||
import ModalMixin from '../../mixins/modal';
|
||||
import tocUtil from '../../utils/toc';
|
||||
import Component from '@ember/component';
|
||||
|
||||
export default Component.extend(ModalMixin, {
|
||||
export default Component.extend(ModalMixin, Tooltips, {
|
||||
documentService: service('document'),
|
||||
searchService: service('search'),
|
||||
router: service(),
|
||||
|
|
@ -77,6 +78,14 @@ export default Component.extend(ModalMixin, {
|
|||
this.setState(this.get('page.id'));
|
||||
},
|
||||
|
||||
didInsertElement() {
|
||||
this._super(...arguments);
|
||||
|
||||
if (this.get('session.authenticated')) {
|
||||
this.renderTooltips();
|
||||
}
|
||||
},
|
||||
|
||||
searchDocs() {
|
||||
let payload = { keywords: this.get('docSearchFilter').trim(), doc: true };
|
||||
if (payload.keywords.length == 0) return;
|
||||
|
|
|
|||
|
|
@ -10,37 +10,33 @@
|
|||
// https://documize.com
|
||||
|
||||
import $ from 'jquery';
|
||||
import { notEmpty, empty } from '@ember/object/computed';
|
||||
import { notEmpty } from '@ember/object/computed';
|
||||
import { inject as service } from '@ember/service';
|
||||
import { computed } from '@ember/object';
|
||||
import Component from '@ember/component';
|
||||
import TooltipMixin from '../../mixins/tooltip';
|
||||
import Notifier from '../../mixins/notifier';
|
||||
import Component from '@ember/component';
|
||||
|
||||
export default Component.extend(TooltipMixin, {
|
||||
export default Component.extend(TooltipMixin, Notifier, {
|
||||
documentService: service('document'),
|
||||
sectionService: service('section'),
|
||||
store: service(),
|
||||
appMeta: service(),
|
||||
link: service(),
|
||||
hasPages: notEmpty('pages'),
|
||||
newSectionName: '',
|
||||
newSectionNameMissing: empty('newSectionName'),
|
||||
showInsertSectionModal: false,
|
||||
newSectionLocation: '',
|
||||
beforePage: null,
|
||||
toEdit: '',
|
||||
showDeleteBlockDialog: false,
|
||||
deleteBlockId: '',
|
||||
canEdit: computed('permissions', 'document.protection', function() {
|
||||
let canEdit = this.get('document.protection') !== this.get('constants').ProtectionType.Lock && this.get('permissions.documentEdit');
|
||||
return canEdit;
|
||||
}),
|
||||
hasBlocks: computed('blocks', function() {
|
||||
return this.get('blocks.length') > 0;
|
||||
}),
|
||||
mousetrap: null,
|
||||
voteThanks: false,
|
||||
showLikes: false,
|
||||
|
||||
showDeleteBlockDialog: false,
|
||||
deleteBlockId: '',
|
||||
|
||||
didReceiveAttrs() {
|
||||
this._super(...arguments);
|
||||
this.set('showLikes', this.get('folder.allowLikes') && this.get('document.isLive'));
|
||||
|
|
@ -49,22 +45,12 @@ export default Component.extend(TooltipMixin, {
|
|||
didRender() {
|
||||
this._super(...arguments);
|
||||
this.contentLinkHandler();
|
||||
|
||||
let mousetrap = this.get('mousetrap');
|
||||
let msContainer = document.getElementById('new-section-wizard');
|
||||
if (is.null(mousetrap)) mousetrap = new Mousetrap(msContainer);
|
||||
|
||||
mousetrap.bind('esc', () => {
|
||||
this.send('onHideSectionWizard');
|
||||
return false;
|
||||
});
|
||||
},
|
||||
|
||||
didInsertElement() {
|
||||
this._super(...arguments);
|
||||
|
||||
if (this.get('session.authenticated')) {
|
||||
// this.setupAddWizard();
|
||||
this.renderTooltips();
|
||||
}
|
||||
|
||||
|
|
@ -75,14 +61,8 @@ export default Component.extend(TooltipMixin, {
|
|||
this._super(...arguments);
|
||||
|
||||
if (this.get('session.authenticated')) {
|
||||
$('.start-section:not(.start-section-empty-state)').off('.hoverIntent');
|
||||
this.removeTooltips();
|
||||
}
|
||||
|
||||
let mousetrap = this.get('mousetrap');
|
||||
if (is.not.null(mousetrap)) {
|
||||
mousetrap.unbind('esc');
|
||||
}
|
||||
},
|
||||
|
||||
contentLinkHandler() {
|
||||
|
|
@ -120,50 +100,6 @@ export default Component.extend(TooltipMixin, {
|
|||
});
|
||||
},
|
||||
|
||||
addSection(model) {
|
||||
let sequence = 0;
|
||||
let level = 1;
|
||||
let beforePage = this.get('beforePage');
|
||||
let constants = this.get('constants');
|
||||
|
||||
// calculate sequence of page (position in document)
|
||||
if (is.not.null(beforePage)) {
|
||||
level = beforePage.get('level');
|
||||
|
||||
// get any page before the beforePage so we can insert this new section between them
|
||||
let index = _.findIndex(this.get('pages'), function(item) { return item.get('page.id') === beforePage.get('id'); });
|
||||
|
||||
if (index !== -1) {
|
||||
let beforeBeforePage = this.get('pages')[index-1];
|
||||
|
||||
if (is.not.undefined(beforeBeforePage)) {
|
||||
sequence = (beforePage.get('sequence') + beforeBeforePage.get('page.sequence')) / 2;
|
||||
} else {
|
||||
sequence = beforePage.get('sequence') / 2;
|
||||
}
|
||||
|
||||
}
|
||||
} else {
|
||||
let pages = this.get('pages');
|
||||
if (pages.get('length') > 0 ) {
|
||||
let p = pages.get('lastObject');
|
||||
sequence = p.get('page.sequence') * 2;
|
||||
level = p.get('page.level');
|
||||
}
|
||||
}
|
||||
|
||||
model.page.set('sequence', sequence);
|
||||
model.page.set('level', level);
|
||||
|
||||
if (this.get('document.protection') === constants.ProtectionType.Review) {
|
||||
model.page.set('status', model.page.get('relativeId') === '' ? constants.ChangeState.PendingNew : constants.ChangeState.Pending);
|
||||
}
|
||||
|
||||
this.send('onHideSectionWizard');
|
||||
|
||||
return this.get('onInsertSection')(model);
|
||||
},
|
||||
|
||||
jumpToSection() {
|
||||
let cp = this.get('currentPageId');
|
||||
if (is.not.empty(cp) && is.not.undefined(cp) && is.not.null(cp)) {
|
||||
|
|
@ -209,8 +145,7 @@ export default Component.extend(TooltipMixin, {
|
|||
if (page.get('relativeId') === '' && page.get('status') === constants.ChangeState.PendingNew) {
|
||||
// new page, edits
|
||||
this.set('toEdit', '');
|
||||
let cb = this.get('onSavePage');
|
||||
cb(page, meta);
|
||||
this.get('onSavePage')(page, meta);
|
||||
} else if (page.get('relativeId') !== '' && page.get('status') === constants.ChangeState.Published) {
|
||||
// existing page, first edit
|
||||
const promise = this.addSection({ page: page, meta: meta });
|
||||
|
|
@ -218,120 +153,21 @@ export default Component.extend(TooltipMixin, {
|
|||
} else if (page.get('relativeId') !== '' && page.get('status') === constants.ChangeState.Pending) {
|
||||
// existing page, subsequent edits
|
||||
this.set('toEdit', '');
|
||||
let cb = this.get('onSavePage');
|
||||
cb(page, meta);
|
||||
this.get('onSavePage')(page, meta);
|
||||
}
|
||||
break;
|
||||
case constants.ProtectionType.None:
|
||||
// for un-protected documents, edits welcome!
|
||||
this.set('toEdit', '');
|
||||
// let cb2 = this.get('onSavePage');
|
||||
// cb2(page, meta);
|
||||
this.attrs.onSavePage(page, meta); // eslint-disable-line ember/no-attrs-in-components
|
||||
this.get('onSavePage')(page, meta);
|
||||
|
||||
break;
|
||||
}
|
||||
},
|
||||
|
||||
onShowSectionWizard(page) {
|
||||
if (is.undefined(page)) {
|
||||
page = { id: '0' };
|
||||
}
|
||||
|
||||
let beforePage = this.get('beforePage');
|
||||
if (is.not.null(beforePage) && $("#new-section-wizard").is(':visible') && beforePage.get('id') === page.id) {
|
||||
this.send('onHideSectionWizard');
|
||||
return;
|
||||
}
|
||||
|
||||
this.set('newSectionLocation', page.id);
|
||||
|
||||
if (page.id === '0') {
|
||||
// this handles add section at the end of the document
|
||||
// because we are not before another page
|
||||
this.set('beforePage', null);
|
||||
} else {
|
||||
this.set('beforePage', page);
|
||||
}
|
||||
|
||||
$("#new-section-wizard").insertAfter(`#add-section-button-${page.id}`);
|
||||
$("#new-section-wizard").velocity("transition.slideDownIn", { duration: 300, complete:
|
||||
function() {
|
||||
$("#new-section-name").focus();
|
||||
}});
|
||||
},
|
||||
|
||||
onHideSectionWizard() {
|
||||
if (this.get('isDestroyed') || this.get('isDestroying')) return;
|
||||
|
||||
this.set('newSectionLocation', '');
|
||||
this.set('beforePage', null);
|
||||
$("#new-section-wizard").insertAfter('#wizard-placeholder');
|
||||
$("#new-section-wizard").velocity("transition.slideUpOut", { duration: 300 });
|
||||
},
|
||||
|
||||
onInsertSection(section) {
|
||||
let sectionName = this.get('newSectionName');
|
||||
if (is.empty(sectionName)) {
|
||||
$("#new-section-name").focus();
|
||||
return;
|
||||
}
|
||||
|
||||
let page = this.get('store').createRecord('page');
|
||||
page.set('documentId', this.get('document.id'));
|
||||
page.set('title', sectionName);
|
||||
page.set('contentType', section.get('contentType'));
|
||||
page.set('pageType', section.get('pageType'));
|
||||
|
||||
let meta = {
|
||||
documentId: this.get('document.id'),
|
||||
rawBody: "",
|
||||
config: ""
|
||||
};
|
||||
|
||||
let model = {
|
||||
page: page,
|
||||
meta: meta
|
||||
};
|
||||
|
||||
const promise = this.addSection(model);
|
||||
promise.then((id) => {
|
||||
this.set('toEdit', model.page.pageType === 'section' ? id: '');
|
||||
// this.setupAddWizard();
|
||||
});
|
||||
},
|
||||
|
||||
onInsertBlock(block) {
|
||||
let sectionName = this.get('newSectionName');
|
||||
if (is.empty(sectionName)) {
|
||||
$("#new-section-name").focus();
|
||||
return;
|
||||
}
|
||||
|
||||
let page = this.get('store').createRecord('page');
|
||||
page.set('documentId', this.get('document.id'));
|
||||
page.set('title', `${block.get('title')}`);
|
||||
page.set('body', block.get('body'));
|
||||
page.set('contentType', block.get('contentType'));
|
||||
page.set('pageType', block.get('pageType'));
|
||||
page.set('blockId', block.get('id'));
|
||||
|
||||
let meta = {
|
||||
documentId: this.get('document.id'),
|
||||
rawBody: block.get('rawBody'),
|
||||
config: block.get('config'),
|
||||
externalSource: block.get('externalSource')
|
||||
};
|
||||
|
||||
let model = {
|
||||
page: page,
|
||||
meta: meta
|
||||
};
|
||||
|
||||
const promise = this.addSection(model);
|
||||
promise.then((id) => { // eslint-disable-line no-unused-vars
|
||||
// this.setupAddWizard();
|
||||
});
|
||||
onShowSectionWizard(beforePage) {
|
||||
this.set('newSectionLocation', beforePage);
|
||||
this.set('showInsertSectionModal', true)
|
||||
},
|
||||
|
||||
onShowDeleteBlockModal(id) {
|
||||
|
|
|
|||
|
|
@ -10,13 +10,12 @@
|
|||
// https://documize.com
|
||||
|
||||
import { computed } from '@ember/object';
|
||||
import Component from '@ember/component';
|
||||
import TooltipMixin from '../../../mixins/tooltip';
|
||||
import Component from '@ember/component';
|
||||
|
||||
export default Component.extend(TooltipMixin, {
|
||||
isDirty: false,
|
||||
pageBody: "",
|
||||
|
||||
codeSyntax: null,
|
||||
codeEditor: null,
|
||||
editorId: computed('page', function () {
|
||||
|
|
|
|||
|
|
@ -25,11 +25,3 @@
|
|||
@import "news.scss";
|
||||
@import "section/all.scss";
|
||||
@import "enterprise/all.scss";
|
||||
|
||||
// Bootstrap override that removes gutter space on smaller screens
|
||||
// @media (max-width: 1200px) {
|
||||
// .container {
|
||||
// width: 100%;
|
||||
// max-width: none;
|
||||
// }
|
||||
// }
|
||||
|
|
|
|||
|
|
@ -24,12 +24,8 @@
|
|||
}
|
||||
|
||||
.new-section-wizard {
|
||||
display: none;
|
||||
@include border-radius(2px);
|
||||
margin: 0 0 60px 0;
|
||||
padding: 30px;
|
||||
border: 1px solid $color-stroke;
|
||||
background-color: $color-primary-light;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
.new-section-caption {
|
||||
margin: 20px 0 10px 0;
|
||||
|
|
@ -39,7 +35,7 @@
|
|||
}
|
||||
|
||||
.preset-list {
|
||||
margin: 20px 0 0 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
> .item {
|
||||
|
|
@ -47,17 +43,16 @@
|
|||
@include border-radius(3px);
|
||||
list-style: none;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
border: 1px solid $color-border;
|
||||
background-color: $color-white;
|
||||
display: block;
|
||||
margin: 0 20px 20px 0;
|
||||
padding: 12px 0 0 20px;
|
||||
width: 250px;
|
||||
height: 60px;
|
||||
border: 1px solid $color-border;
|
||||
background-color: $color-off-white;
|
||||
|
||||
&:hover {
|
||||
@include ease-in();
|
||||
border-color: $color-link;
|
||||
border-color: $color-primary;
|
||||
background-color: $color-primary-light;
|
||||
}
|
||||
|
||||
.icon {
|
||||
|
|
@ -76,8 +71,8 @@
|
|||
|
||||
> .title {
|
||||
display: inline-block;
|
||||
font-size: 1rem;
|
||||
font-weight: normal;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 500;
|
||||
color: $color-off-black;
|
||||
letter-spacing: 0.5px;
|
||||
margin-top: 6px;
|
||||
|
|
@ -86,7 +81,7 @@
|
|||
}
|
||||
|
||||
.block-list {
|
||||
margin: 20px 0 0 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
> .item {
|
||||
|
|
@ -95,21 +90,16 @@
|
|||
list-style: none;
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
border: 1px solid $color-border;
|
||||
background-color: $color-white;
|
||||
margin: 0 20px 20px 0;
|
||||
padding: 20px;
|
||||
height: 90px;
|
||||
padding: 12px 20px;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
border: 1px solid $color-border;
|
||||
background-color: $color-off-white;
|
||||
|
||||
&:hover {
|
||||
@include ease-in();
|
||||
border-color: $color-link;
|
||||
|
||||
> .block-actions {
|
||||
display: block;
|
||||
}
|
||||
border-color: $color-primary;
|
||||
background-color: $color-primary-light;
|
||||
}
|
||||
|
||||
> .actions {
|
||||
|
|
@ -122,16 +112,14 @@
|
|||
> .details {
|
||||
> .title {
|
||||
font-size: 1.1rem;
|
||||
font-weight: bold;
|
||||
font-weight: 500;
|
||||
color: $color-off-black;
|
||||
letter-spacing: 0.5px;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
> .desc {
|
||||
color: $color-off-black;
|
||||
font-size: 1rem;
|
||||
margin-top: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
64
gui/app/templates/components/document/add-section.hbs
Normal file
64
gui/app/templates/components/document/add-section.hbs
Normal file
|
|
@ -0,0 +1,64 @@
|
|||
<div id="add-section-modal" class="modal" tabindex="-1" role="dialog">
|
||||
<div class="modal-dialog modal-80" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">Insert Section</div>
|
||||
<div class="modal-body">
|
||||
|
||||
<div id="new-section-wizard" class="new-section-wizard">
|
||||
<div class="container box">
|
||||
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="form-group">
|
||||
{{focus-input type="text" id="new-section-name" value=newSectionName
|
||||
class=(if newSectionNameMissing 'mousetrap form-control form-control-lg is-invalid' 'mousetrap form-control form-control-lg')
|
||||
placeholder="Enter section name" autocomplete="off"}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-12 col-md-6">
|
||||
<div class="form-group">
|
||||
<div class="new-section-caption">Select Section Type</div>
|
||||
<ul class="preset-list">
|
||||
{{#each sections as |section|}}
|
||||
<li class="item" {{action 'onInsertSection' section}}>
|
||||
<div class="icon">
|
||||
<img class="img" src="/sections/{{section.contentType}}.png" srcset="/sections/{{section.contentType}}@2x.png" />
|
||||
</div>
|
||||
<div class='title'>{{section.title}}</div>
|
||||
</li>
|
||||
{{/each}}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-md-6">
|
||||
{{#if hasBlocks}}
|
||||
<div class="new-section-caption">Select Re-usable Content</div>
|
||||
<ul class="block-list">
|
||||
{{#each blocks as |block|}}
|
||||
<li class="item" title="{{block.firstname}} {{block.lastname}}, {{time-ago block.created}}, used: {{ block.used }}" data-toggle="tooltip" data-placement="top">
|
||||
<div class="details" {{action 'onInsertBlock' block}}>
|
||||
<div class="title text-truncate">{{block.title}}</div>
|
||||
<div class="desc text-truncate">{{block.excerpt}}</div>
|
||||
</div>
|
||||
</li>
|
||||
{{/each}}
|
||||
</ul>
|
||||
{{else}}
|
||||
<div class="template-caption">You have no reusable content — publish any section as a template</div>
|
||||
{{/if}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -2,8 +2,7 @@
|
|||
|
||||
{{#each pages key="id" as |item index|}}
|
||||
{{#if canEdit}}
|
||||
<div class="start-section" data-index={{index}} data-before-id={{item.page.id}} id="add-section-button-{{item.page.id}}"
|
||||
{{action 'onShowSectionWizard' item.page}}>
|
||||
<div class="start-section" {{action 'onShowSectionWizard' item.page}}>
|
||||
<div class="start-button">
|
||||
<div class="cta">+ SECTION</div>
|
||||
</div>
|
||||
|
|
@ -33,7 +32,7 @@
|
|||
{{/each}}
|
||||
|
||||
{{#if canEdit}}
|
||||
<div class="start-section" data-index="0" data-before-id="0" id="add-section-button-0" {{action 'onShowSectionWizard'}}>
|
||||
<div class="start-section" {{action 'onShowSectionWizard'}}>
|
||||
<div class="start-button">
|
||||
<div class="cta">+ SECTION</div>
|
||||
</div>
|
||||
|
|
@ -58,94 +57,29 @@
|
|||
</div>
|
||||
{{/if}}
|
||||
|
||||
{{/if}}
|
||||
{{else }}
|
||||
|
||||
{{#unless hasPages}}
|
||||
{{#if canEdit}}
|
||||
<div class="start-section" data-index="-1" data-before-id="0" id="add-section-button-0" {{action 'onShowSectionWizard'}}>
|
||||
<div class="start-section" {{action 'onShowSectionWizard'}}>
|
||||
<div class="start-button">
|
||||
<div class="cta">+ SECTION</div>
|
||||
</div>
|
||||
</div>
|
||||
{{/if}}
|
||||
{{/unless}}
|
||||
|
||||
{{/if}}
|
||||
|
||||
{{#if canEdit}}
|
||||
<div id="wizard-placeholder" class="hide margin-top-50" />
|
||||
<div id="new-section-wizard" class="new-section-wizard">
|
||||
<div class="container box">
|
||||
<div class="row clearfix">
|
||||
<div class="col-12 clearfix">
|
||||
<div class="float-right mb-5">
|
||||
<button type="button" class="btn btn-secondary" {{action 'onHideSectionWizard'}}>Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="form-group">
|
||||
{{input type="text" id="new-section-name" value=newSectionName class=(if newSectionNameMissing 'mousetrap form-control form-control-lg
|
||||
is-invalid' 'mousetrap form-control form-control-lg') placeholder="Enter section name" autocomplete="off"}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="form-group">
|
||||
<div class="new-section-caption">Insert section type</div>
|
||||
<ul class="preset-list">
|
||||
{{#each sections as |section|}}
|
||||
<li class="item" {{action 'onInsertSection' section}}>
|
||||
<div class="icon">
|
||||
<img class="img" src="/sections/{{section.contentType}}.png" srcset="/sections/{{section.contentType}}@2x.png" />
|
||||
</div>
|
||||
<div class='title'>{{section.title}}</div>
|
||||
</li>
|
||||
{{/each}}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
{{#if hasBlocks}}
|
||||
<div class="new-section-caption">Insert re-usable content</div>
|
||||
<ul class="block-list">
|
||||
{{#each blocks as |block|}}
|
||||
<li class="item" title="{{block.firstname}} {{block.lastname}}, {{time-ago block.created}}, used: {{ block.used }}" data-toggle="tooltip"
|
||||
data-placement="top">
|
||||
<div class="actions">
|
||||
{{#if permissions.documentTemplate}} {{#link-to 'document.block' folder.id folder.slug document.id document.slug block.id
|
||||
class="button-icon-gray button-icon-small align-middle"}}
|
||||
<i class="material-icons">edit</i>
|
||||
{{/link-to}}
|
||||
<div class="button-icon-gap" />
|
||||
<div id={{concat 'delete-block-button-' block.id}} class="button-icon-danger button-icon-small align-middle" {{action
|
||||
'onShowDeleteBlockModal' block.id}}>
|
||||
<i class="material-icons">delete</i>
|
||||
</div>
|
||||
{{/if}}
|
||||
</div>
|
||||
<div class="details" {{action 'onInsertBlock' block}}>
|
||||
<div class="title text-truncate">{{block.title}}</div>
|
||||
<div class="desc text-truncate">{{block.excerpt}}</div>
|
||||
</div>
|
||||
</li>
|
||||
{{/each}}
|
||||
</ul>
|
||||
{{else}}
|
||||
<div class="template-caption">You have no reusable content — publish any section as a template</div>
|
||||
{{/if}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{/if}}
|
||||
|
||||
{{#if permissions.documentTemplate}}
|
||||
{{#ui/ui-dialog title="Delete Content Block" confirmCaption="Delete" buttonType="btn-danger" show=showDeleteBlockDialog onAction=(action 'onDeleteBlock')}}
|
||||
<p>Are you sure you want to delete this re-usable content block?</p>
|
||||
{{/ui/ui-dialog}}
|
||||
{{/if}}
|
||||
{{document/add-section
|
||||
pages=pages
|
||||
blocks=blocks
|
||||
folder=folder
|
||||
toEdit=toEdit
|
||||
folders=folders
|
||||
sections=sections
|
||||
document=document
|
||||
permissions=permissions
|
||||
show=showInsertSectionModal
|
||||
beforePage=newSectionLocation
|
||||
onInsertSection=(action onInsertSection)}}
|
||||
{{/if}}
|
||||
Loading…
Add table
Add a link
Reference in a new issue