From 7e7f63e6f4a01235a70b46d793dc568505fe6c34 Mon Sep 17 00:00:00 2001 From: Harvey Kandola Date: Sun, 5 Mar 2017 19:11:01 +0000 Subject: [PATCH] refactored base-editor-inline to support section and block editing --- app/app/components/document/edit-tools.js | 2 +- .../components/section/base-editor-inline.js | 18 ++- .../section/markdown/type-editor.js | 6 +- app/app/pods/document/block/controller.js | 28 ++-- app/app/styles/view/document/all.scss | 2 +- .../{edit-tools.scss => content-linker.scss} | 17 --- .../styles/view/document/inline-editor.scss | 14 +- .../styles/view/document/section-editor.scss | 2 - app/app/styles/view/document/view.scss | 5 - .../components/document/block-editor.hbs | 2 +- .../components/document/edit-tools.hbs | 144 ++++++++---------- .../components/section/base-editor-inline.hbs | 35 ++++- .../section/markdown/type-editor.hbs | 16 +- .../section/wysiwyg/type-editor.hbs | 5 +- core/api/endpoint/sections_endpoint.go | 10 +- 15 files changed, 157 insertions(+), 149 deletions(-) rename app/app/styles/view/document/{edit-tools.scss => content-linker.scss} (65%) diff --git a/app/app/components/document/edit-tools.js b/app/app/components/document/edit-tools.js index 8d6059c9..609a7e5c 100644 --- a/app/app/components/document/edit-tools.js +++ b/app/app/components/document/edit-tools.js @@ -31,7 +31,7 @@ export default Ember.Component.extend(TooltipMixin, { { label: 'Attachment', selected: false }, { label: 'Search', selected: false } ], - buttonId: Ember.computed('page', function () { + contentLinkerButtonId: Ember.computed('page', function () { let page = this.get('page'); return `content-linker-button-${page.id}`; }), diff --git a/app/app/components/section/base-editor-inline.js b/app/app/components/section/base-editor-inline.js index 1535dd95..98b37874 100644 --- a/app/app/components/section/base-editor-inline.js +++ b/app/app/components/section/base-editor-inline.js @@ -33,6 +33,14 @@ export default Ember.Component.extend({ let page = this.get('page'); return `discard-edits-dialog-${page.id}`; }), + contentLinkerButtonId: Ember.computed('page', function () { + let page = this.get('page'); + return `content-linker-button-${page.id}`; + }), + previewButtonId: Ember.computed('page', function () { + let page = this.get('page'); + return `content-preview-button-${page.id}`; + }), didRender() { let self = this; @@ -108,6 +116,14 @@ export default Ember.Component.extend({ discardEdits() { this.attrs.onCancel(); - } + }, + + onInsertLink(selection) { + return this.get('onInsertLink')(selection); + }, + + onPreview() { + return this.get('onPreview')(); + }, } }); diff --git a/app/app/components/section/markdown/type-editor.js b/app/app/components/section/markdown/type-editor.js index 8dac5289..6755b1ae 100644 --- a/app/app/components/section/markdown/type-editor.js +++ b/app/app/components/section/markdown/type-editor.js @@ -32,10 +32,6 @@ export default Ember.Component.extend(TooltipMixin, { let page = this.get('page'); return `markdown-preview-${page.id}`; }), - tooltipId: Ember.computed('page', function () { - let page = this.get('page'); - return `markdown-tooltip-${page.id}`; - }), init() { this._super(...arguments); @@ -127,7 +123,7 @@ export default Ember.Component.extend(TooltipMixin, { }, actions: { - toggleMode() { + onPreview() { this.set('editMode', !this.get('editMode')); Ember.run.schedule('afterRender', () => { diff --git a/app/app/pods/document/block/controller.js b/app/app/pods/document/block/controller.js index 4699a8d9..50c7908b 100644 --- a/app/app/pods/document/block/controller.js +++ b/app/app/pods/document/block/controller.js @@ -16,31 +16,23 @@ export default Ember.Controller.extend({ actions: { onCancel( /*page*/ ) { - this.transitionToRoute('document', { - queryParams: { - page: this.get('model.page.id') - } - }); + this.transitionToRoute('document'); }, onAction(page, meta) { let self = this; - let block = this.get('model.block'); - block.set('title', page.get('title')); - block.set('body', page.get('body')); - block.set('excerpt', page.get('excerpt')); - block.set('rawBody', meta.get('rawBody')); - block.set('config', meta.get('config')); - block.set('externalSource', meta.get('externalSource')); + let b = this.get('model.block'); + b.set('title', page.get('title')); + b.set('body', page.get('body')); + b.set('excerpt', page.get('excerpt')); + b.set('rawBody', meta.get('rawBody')); + b.set('config', meta.get('config')); + b.set('externalSource', meta.get('externalSource')); - this.get('sectionService').updateBlock(block).then(function () { + this.get('sectionService').updateBlock(b).then(function () { self.audit.record("edited-block"); - self.transitionToRoute('document', { - queryParams: { - page: page.get('id') - } - }); + self.transitionToRoute('document'); }); } } diff --git a/app/app/styles/view/document/all.scss b/app/app/styles/view/document/all.scss index b01392b9..18251000 100644 --- a/app/app/styles/view/document/all.scss +++ b/app/app/styles/view/document/all.scss @@ -1,5 +1,5 @@ @import "activity.scss"; -@import "edit-tools.scss"; +@import "content-linker.scss"; @import "files.scss"; @import "history.scss"; @import "inline-editor.scss"; diff --git a/app/app/styles/view/document/edit-tools.scss b/app/app/styles/view/document/content-linker.scss similarity index 65% rename from app/app/styles/view/document/edit-tools.scss rename to app/app/styles/view/document/content-linker.scss index a659f565..21434a45 100644 --- a/app/app/styles/view/document/edit-tools.scss +++ b/app/app/styles/view/document/content-linker.scss @@ -1,20 +1,3 @@ -.edit-tools { - position: absolute; - top: 18px; - right: 78px; - - > .toolbar { - margin: 0; - padding: 0; - line-height: 0; - - > li { - list-style: none; - list-style-type: none; - } - } -} - .content-counter-dialog { width: 200px; height: 200px; diff --git a/app/app/styles/view/document/inline-editor.scss b/app/app/styles/view/document/inline-editor.scss index da9ea604..d5e0d4f1 100644 --- a/app/app/styles/view/document/inline-editor.scss +++ b/app/app/styles/view/document/inline-editor.scss @@ -1,6 +1,6 @@ .document-editor { position: relative; - + > .toolbar { width: 100%; padding: 0; @@ -11,7 +11,7 @@ > input { font-weight: bold; font-size: 1.5rem; - margin: 17px 0 0 0; + margin: 16px 0 10px 0; color: $color-wysiwyg; } } @@ -29,3 +29,13 @@ display: none; } } + +.document-editor-full { + @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; +} diff --git a/app/app/styles/view/document/section-editor.scss b/app/app/styles/view/document/section-editor.scss index 5598e4f0..dbbf873f 100644 --- a/app/app/styles/view/document/section-editor.scss +++ b/app/app/styles/view/document/section-editor.scss @@ -1,6 +1,4 @@ .zone-section-editor { - // min-height: 500px; //ensure dropdowns render in viewport - // height: 100%; margin-left: 60px; padding: 20px 60px; z-index: 777; diff --git a/app/app/styles/view/document/view.scss b/app/app/styles/view/document/view.scss index 3b814730..f479ec0b 100644 --- a/app/app/styles/view/document/view.scss +++ b/app/app/styles/view/document/view.scss @@ -344,11 +344,6 @@ } } -.empty-state-document { - margin-top: 150px; - text-align: center; -} - .dropdown-page-toolbar { width: 300px; } diff --git a/app/app/templates/components/document/block-editor.hbs b/app/app/templates/components/document/block-editor.hbs index 96b3adc1..f6265f8f 100644 --- a/app/app/templates/components/document/block-editor.hbs +++ b/app/app/templates/components/document/block-editor.hbs @@ -1 +1 @@ -{{component editorType document=document folder=folder page=page meta=meta onCancel=(action 'onCancel') onAction=(action 'onAction')}} +{{component editorType document=document folder=folder page=page meta=meta blockMode=true onCancel=(action 'onCancel') onAction=(action 'onAction')}} diff --git a/app/app/templates/components/document/edit-tools.hbs b/app/app/templates/components/document/edit-tools.hbs index 6abb3d6a..25af8aa6 100644 --- a/app/app/templates/components/document/edit-tools.hbs +++ b/app/app/templates/components/document/edit-tools.hbs @@ -1,82 +1,72 @@ -
- +{{#dropdown-dialog target=contentLinkerButtonId position="bottom right" button="Insert" color="flat-blue" onAction=(action 'onInsertLink')}} +
+
+ {{ui/ui-tab tabs=tabs onTabSelect=(action 'onTabSelect')}} - {{#dropdown-dialog target=buttonId position="bottom right" button="Insert" color="flat-blue" onAction=(action 'onInsertLink')}} -
- - {{ui/ui-tab tabs=tabs onTabSelect=(action 'onTabSelect')}} +
-
+ {{#if showSections}} +
    + {{#each candidates.pages as |p|}} +
  • + {{#ui/ui-selection selected=p.selected}} + {{p.title}} + {{/ui/ui-selection}} +
    • + {{/each}} +
+ {{/if}} - {{#if showSections}} -
    - {{#each candidates.pages as |p|}} -
  • - {{#ui/ui-selection selected=p.selected}} - {{p.title}} - {{/ui/ui-selection}} -
    • - {{/each}} -
- {{/if}} + {{#if showAttachments}} +
    + {{#each candidates.attachments as |a|}} +
  • + {{#ui/ui-selection selected=a.selected}} + + {{ a.title }} + {{/ui/ui-selection}} +
    • + {{/each}} +
+ {{/if}} - {{#if showAttachments}} -
    - {{#each candidates.attachments as |a|}} -
  • - {{#ui/ui-selection selected=a.selected}} - - {{ a.title }} - {{/ui/ui-selection}} -
    • - {{/each}} -
- {{/if}} + {{#if showSearch}} +
+ +
For content or attachments
+ {{focus-input id="content-linker-search" type="input" value=keywords placeholder="keyword search" autocomplete="off"}} +
+ {{#unless hasMatches}} + Nothing found. + {{/unless}} +
    + {{#each matches.documents as |m|}} +
  • + {{#ui/ui-selection selected=m.selected}} + {{m.title}} + {{/ui/ui-selection}} +
    • + {{/each}} + {{#each matches.pages as |m|}} +
  • + {{#ui/ui-selection selected=m.selected}} + {{m.title}}
    {{m.context}} + {{/ui/ui-selection}} +
    • + {{/each}} + {{#each matches.attachments as |a|}} +
  • + {{#ui/ui-selection selected=a.selected}} + + {{ a.title }} + {{/ui/ui-selection}} +
    • + {{/each}} +
+ {{/if}} - {{#if showSearch}} -
- -
For content or attachments
- {{focus-input id="content-linker-search" type="input" value=keywords placeholder="keyword search" autocomplete="off"}} -
- {{#unless hasMatches}} - Nothing found. - {{/unless}} -
    - {{#each matches.documents as |m|}} -
  • - {{#ui/ui-selection selected=m.selected}} - {{m.title}} - {{/ui/ui-selection}} -
    • - {{/each}} - {{#each matches.pages as |m|}} -
  • - {{#ui/ui-selection selected=m.selected}} - {{m.title}}
    {{m.context}} - {{/ui/ui-selection}} -
    • - {{/each}} - {{#each matches.attachments as |a|}} -
  • - {{#ui/ui-selection selected=a.selected}} - - {{ a.title }} - {{/ui/ui-selection}} -
    • - {{/each}} -
- {{/if}} - -
Insert
-
- -
- {{/dropdown-dialog}} -
+
Insert
+
+ +
+{{/dropdown-dialog}} diff --git a/app/app/templates/components/section/base-editor-inline.hbs b/app/app/templates/components/section/base-editor-inline.hbs index d853d78e..aaa7984a 100644 --- a/app/app/templates/components/section/base-editor-inline.hbs +++ b/app/app/templates/components/section/base-editor-inline.hbs @@ -1,12 +1,23 @@ -
+
-
- {{focus-input type="text" id=pageId value=page.title class=(if hasNameError 'error-inline') placeholder="Name" class="mousetrap"}} -
{{#if busy}} {{/if}} + + {{#if contentLinkerButton}} + {{document/edit-tools tagName="span" document=document folder=folder page=page onInsertLink=(action 'onInsertLink')}} +
+ link +
+ {{/if}} + + {{#if previewButton}} +
+ visibility +
+ {{/if}} +
check
@@ -14,7 +25,23 @@ close
+ {{#if blockMode}} +
+
+ + {{focus-input id="page-id-{{pageId}}" value=page.title class="mousetrap"}} +
+
+ + {{textarea id="page-excerpt-{{pageId}}" value=page.excerpt class="mousetrap" rows="3"}} +
+ {{else}} +
+ {{focus-input type="text" id=pageId value=page.title class=(if hasNameError 'error-inline') placeholder="Name" class="mousetrap"}} +
+ {{/if}}
+