From 4186117b54f1e1e42937bab6837c9dcd0a22e6f0 Mon Sep 17 00:00:00 2001 From: Harvey Kandola Date: Sun, 12 Jun 2016 13:43:23 +0100 Subject: [PATCH] v12.5 revised add smart section UX --- .../components/document/document-sidebar.js | 63 +------------------ app/app/components/document/page-wizard.js | 15 ++++- app/app/pods/document/wizard/controller.js | 13 ++-- app/app/pods/document/wizard/template.hbs | 2 +- app/app/styles/view/document/wizard.scss | 36 ++++++----- .../components/document/document-sidebar.hbs | 26 +++----- .../components/document/page-wizard.hbs | 4 ++ documize/api/endpoint/router.go | 2 +- 8 files changed, 60 insertions(+), 101 deletions(-) diff --git a/app/app/components/document/document-sidebar.js b/app/app/components/document/document-sidebar.js index c91de379..9e333e9a 100644 --- a/app/app/components/document/document-sidebar.js +++ b/app/app/components/document/document-sidebar.js @@ -1,37 +1,22 @@ // Copyright 2016 Documize Inc. . 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 . +// by contacting . // // 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); } } -}); \ No newline at end of file +}); diff --git a/app/app/components/document/page-wizard.js b/app/app/components/document/page-wizard.js index 15467b08..493a49e3 100644 --- a/app/app/components/document/page-wizard.js +++ b/app/app/components/document/page-wizard.js @@ -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); } } -}); \ No newline at end of file +}); diff --git a/app/app/pods/document/wizard/controller.js b/app/app/pods/document/wizard/controller.js index 4bf5ac6f..b475e927 100644 --- a/app/app/pods/document/wizard/controller.js +++ b/app/app/pods/document/wizard/controller.js @@ -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, { }); } } -}); \ No newline at end of file +}); diff --git a/app/app/pods/document/wizard/template.hbs b/app/app/pods/document/wizard/template.hbs index ba8d9326..9692f3bf 100644 --- a/app/app/pods/document/wizard/template.hbs +++ b/app/app/pods/document/wizard/template.hbs @@ -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')}} diff --git a/app/app/styles/view/document/wizard.scss b/app/app/styles/view/document/wizard.scss index 322e4ced..62fde865 100644 --- a/app/app/styles/view/document/wizard.scss +++ b/app/app/styles/view/document/wizard.scss @@ -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; } } } diff --git a/app/app/templates/components/document/document-sidebar.hbs b/app/app/templates/components/document/document-sidebar.hbs index ba0e8045..39692aa6 100644 --- a/app/app/templates/components/document/document-sidebar.hbs +++ b/app/app/templates/components/document/document-sidebar.hbs @@ -1,27 +1,17 @@