mirror of
https://github.com/documize/community.git
synced 2025-08-08 06:55:28 +02:00
v12.5 revised add smart section UX
This commit is contained in:
Harvey Kandola
parent
236aa2c7ad
commit
4186117b54
8 changed files with 60 additions and 101 deletions
|
|
@ -1,37 +1,22 @@
|
|||
// Copyright 2016 Documize Inc. <legal@documize.com>. All rights reserved.
|
||||
//
|
||||
// This software (Documize Community Edition) is licensed under
|
||||
// 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>.
|
||||
// by contacting <sales@documize.com>.
|
||||
//
|
||||
// https://documize.com
|
||||
|
||||
import Ember from 'ember';
|
||||
import models from '../../utils/model';
|
||||
import TooltipMixin from '../../mixins/tooltip';
|
||||
|
||||
export default Ember.Component.extend(TooltipMixin, {
|
||||
sectionService: Ember.inject.service('section'),
|
||||
documentService: Ember.inject.service('document'),
|
||||
|
||||
document: {},
|
||||
folder: {},
|
||||
sections: [],
|
||||
showToc: true,
|
||||
showSectionList: false,
|
||||
|
||||
// didRender() {
|
||||
// if (this.get('isEditor')) {
|
||||
// this.addTooltip(document.getElementById("add-section-button"));
|
||||
// }
|
||||
// },
|
||||
|
||||
// willDestroyElement() {
|
||||
// this.destroyTooltips();
|
||||
// },
|
||||
|
||||
actions: {
|
||||
// Page up - above pages shunt down.
|
||||
|
|
@ -46,48 +31,6 @@ export default Ember.Component.extend(TooltipMixin, {
|
|||
|
||||
gotoPage(id) {
|
||||
return this.attrs.gotoPage(id);
|
||||
},
|
||||
|
||||
addSection() {
|
||||
let self = this;
|
||||
|
||||
this.get('sectionService').getAll().then(function(sections) {
|
||||
self.set('sections', sections);
|
||||
self.set('showToc', false);
|
||||
self.set('showSectionList', true);
|
||||
});
|
||||
},
|
||||
|
||||
showToc() {
|
||||
this.set('showSectionList', false);
|
||||
this.set('showToc', true);
|
||||
},
|
||||
|
||||
onAddSection(section) {
|
||||
this.audit.record("added-section");
|
||||
this.audit.record("added-section-" + section.contentType);
|
||||
|
||||
let page = models.PageModel.create({
|
||||
documentId: this.get('document.id'),
|
||||
title: `${section.title} Section`,
|
||||
level: 2,
|
||||
sequence: 2048,
|
||||
body: "",
|
||||
contentType: section.contentType
|
||||
});
|
||||
|
||||
let meta = models.PageMetaModel.create({
|
||||
documentId: this.get('document.id'),
|
||||
rawBody: "",
|
||||
config: ""
|
||||
});
|
||||
|
||||
let model = {
|
||||
page: page,
|
||||
meta: meta
|
||||
};
|
||||
|
||||
this.attrs.onAddPage(model);
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -13,7 +13,20 @@ import Ember from 'ember';
|
|||
import NotifierMixin from '../../mixins/notifier';
|
||||
|
||||
export default Ember.Component.extend(NotifierMixin, {
|
||||
|
||||
didRender() {
|
||||
let self = this;
|
||||
Mousetrap.bind('esc', function() {
|
||||
self.send('onCancel');
|
||||
return false;
|
||||
});
|
||||
},
|
||||
|
||||
actions: {
|
||||
onCancel() {
|
||||
this.attrs.onCancel();
|
||||
},
|
||||
|
||||
addSection(section) {
|
||||
|
||||
if (section.preview) {
|
||||
|
|
@ -24,4 +37,4 @@ export default Ember.Component.extend(NotifierMixin, {
|
|||
this.attrs.onAction(section);
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -10,18 +10,19 @@ export default Ember.Controller.extend(NotifierMixin, {
|
|||
this.transitionToRoute('document');
|
||||
},
|
||||
|
||||
onAction(title, contentType) {
|
||||
this.audit.record("added-page");
|
||||
onAddSection(section) {
|
||||
let self = this;
|
||||
|
||||
let self = this;
|
||||
this.audit.record("added-section");
|
||||
this.audit.record("added-section-" + section.contentType);
|
||||
|
||||
let page = models.PageModel.create({
|
||||
documentId: this.get('model.document.id'),
|
||||
title: title,
|
||||
title: `${section.title} Section`,
|
||||
level: 2,
|
||||
sequence: 2048,
|
||||
body: "",
|
||||
contentType: contentType
|
||||
contentType: section.contentType
|
||||
});
|
||||
|
||||
let meta = models.PageMetaModel.create({
|
||||
|
|
@ -45,4 +46,4 @@ export default Ember.Controller.extend(NotifierMixin, {
|
|||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
{{document/page-wizard document=model.document folder=model.folder sections=model.sections onCancel=(action 'onCancel') onAction=(action 'onAction')}}
|
||||
{{document/page-wizard document=model.document folder=model.folder sections=model.sections onCancel=(action 'onCancel') onAction=(action 'onAddSection')}}
|
||||
|
|
|
|||
|
|
@ -1,20 +1,24 @@
|
|||
.section-wizard {
|
||||
margin: 30px;
|
||||
|
||||
> .canvas {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
||||
margin: 30px 0;
|
||||
|
||||
> .list {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
> .item {
|
||||
list-style: none;
|
||||
float: left;
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
border: 1px solid transparent;
|
||||
width: 400px;
|
||||
height: 80px;
|
||||
background-color: $color-white;
|
||||
border: 1px solid $color-border2;
|
||||
border-radius: 3px;
|
||||
margin: 0 0 20px 0;
|
||||
padding: 10px;
|
||||
margin: 0 30px 30px 0;
|
||||
|
||||
&:hover {
|
||||
background-color: $color-card-active;
|
||||
|
|
@ -24,32 +28,33 @@
|
|||
|
||||
.icon {
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
|
||||
> .img {
|
||||
// margin: 17px 10px 0 20px;
|
||||
display: block;
|
||||
text-align: center;
|
||||
margin: 17px 10px 0 20px;
|
||||
display: inline-block;
|
||||
height: 45px;
|
||||
width: 45px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
> .details {
|
||||
display: block;
|
||||
margin-top: 10px;
|
||||
vertical-align: top;
|
||||
display: inline-block;
|
||||
|
||||
> .title {
|
||||
font-size: 1rem;
|
||||
font-weight: bold;
|
||||
color: $color-off-black;
|
||||
// margin-top: 18px;
|
||||
margin-right: 10px;
|
||||
margin-top: 18px;
|
||||
letter-spacing: 0.5px;
|
||||
|
||||
.preview {
|
||||
font-size: 0.7rem;
|
||||
color: #cc9933;
|
||||
display: inline-block;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -57,7 +62,10 @@
|
|||
color: $color-stroke;
|
||||
font-size: 0.8rem;
|
||||
margin-top: 5px;
|
||||
width: 100%;
|
||||
max-width: 300px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,27 +1,17 @@
|
|||
<div class="document-container">
|
||||
<div class="sidebar hidden-xs hidden-sm">
|
||||
{{#if showToc}}
|
||||
{{#if isEditor}}
|
||||
<div class="margin-bottom-20 text-center">
|
||||
<div {{action 'addSection'}} class="regular-button button-green" id="add-section-button" data-tooltip="Add section" data-tooltip-position="top center">
|
||||
{{#if isEditor}}
|
||||
<div class="margin-bottom-20 text-center">
|
||||
{{#link-to 'document.wizard' folder.id folder.slug document.id document.slug}}
|
||||
<div class="regular-button button-green" id="add-section-button">
|
||||
<i class="material-icons">add</i>
|
||||
<div class="name">section</div>
|
||||
</div>
|
||||
</div>
|
||||
{{/if}}
|
||||
{{document/document-sidebar-toc document=model folder=folder pages=pages page=page isEditor=isEditor
|
||||
changePageSequence=(action 'onPageSequenceChange') changePageLevel=(action 'onPageLevelChange')
|
||||
gotoPage=(action 'gotoPage')}}
|
||||
{{/if}}
|
||||
|
||||
{{#if showSectionList}}
|
||||
<div class="margin-bottom-20 pull-right">
|
||||
<div {{action 'showToc'}} class="flat-button">
|
||||
Cancel
|
||||
</div>
|
||||
{{/link-to}}
|
||||
</div>
|
||||
<div class="clearfix" />
|
||||
{{document/page-wizard document=model folder=folder sections=sections onAction=(action 'onAddSection')}}
|
||||
{{/if}}
|
||||
{{document/document-sidebar-toc document=model folder=folder pages=pages page=page isEditor=isEditor
|
||||
changePageSequence=(action 'onPageSequenceChange') changePageLevel=(action 'onPageLevelChange')
|
||||
gotoPage=(action 'gotoPage')}}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,8 @@
|
|||
<div class="section-wizard">
|
||||
<div class="buttons pull-right">
|
||||
<div class="flat-button flat-gray" {{action 'onCancel'}}>Cancel</div>
|
||||
</div>
|
||||
<div class="clearfix"></div>
|
||||
<div class="canvas">
|
||||
<ul class="list">
|
||||
{{#each sections as |section|}}
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@ const (
|
|||
// AppVersion does what it says
|
||||
// Versioning scheme major.minor where "minor" is optional
|
||||
// e.g. 1, 2, 3, 4.1, 4.2, 5, 6, 7, 7.1, 8, 9, 10, ..... 127, 127.1, 128
|
||||
AppVersion = "12.4"
|
||||
AppVersion = "12.5"
|
||||
)
|
||||
|
||||
var port, certFile, keyFile, forcePort2SSL string
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue