refactored base-editor-inline to support section and block editing

2025-07-19 13:19:43 +02:00 · 2017-03-05 19:11:01 +00:00 · 2017-03-05 19:11:01 +00:00 · 7e7f63e6f4
commit 7e7f63e6f4
parent 81fcf0f5df
15 changed files with 157 additions and 149 deletions
--- 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}`;
 	}),
--- 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')();
+		},		
 	}
 });
--- 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', () => {
--- 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');
 			});
 		}
 	}
--- 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";
--- a/app/app/styles/view/document/content-linker.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;
--- a/app/app/styles/view/document/inline-editor.scss
+++ b/app/app/styles/view/document/inline-editor.scss
@ -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;
+}
--- 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;
--- 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;
 }
--- 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')}}
--- a/app/app/templates/components/document/edit-tools.hbs
+++ b/app/app/templates/components/document/edit-tools.hbs
@ -1,13 +1,4 @@
-<div class="edit-tools">
-	<ul class="toolbar">
-		<li class="item">
-			<div class="round-button-mono" id={{buttonId}} data-tooltip="Reference link" data-tooltip-position="top center">
-				<i class="material-icons color-blue">link</i>
-			</div>
-		</li>
-	</ul>
-
-	{{#dropdown-dialog target=buttonId position="bottom right" button="Insert" color="flat-blue" onAction=(action 'onInsertLink')}}
+{{#dropdown-dialog target=contentLinkerButtonId position="bottom right" button="Insert" color="flat-blue" onAction=(action 'onInsertLink')}}
 	<div class="content-linker-dialog">
 		<form>
 			{{ui/ui-tab tabs=tabs onTabSelect=(action 'onTabSelect')}}
@ -79,4 +70,3 @@
 		</form>
 	</div>
 {{/dropdown-dialog}}
-</div>
--- a/app/app/templates/components/section/base-editor-inline.hbs
+++ b/app/app/templates/components/section/base-editor-inline.hbs
@ -1,12 +1,23 @@
-<div class="document-editor">
+<div class="document-editor {{if blockMode 'document-editor-full'}}">
 	<div class="toolbar">
-		<div class="input-inline input-transparent edit-title pull-left">
-			{{focus-input type="text" id=pageId value=page.title class=(if hasNameError 'error-inline') placeholder="Name" class="mousetrap"}}
-		</div>
 		<div class="buttons pull-right">
 			{{#if busy}}
 				<img src="/assets/img/busy-gray.gif" class="busy-indicator" />
 			{{/if}}
+
+			{{#if contentLinkerButton}}
+				{{document/edit-tools tagName="span" document=document folder=folder page=page onInsertLink=(action 'onInsertLink')}}
+				<div class="round-button-mono" id={{contentLinkerButtonId}} data-tooltip="Reference link" data-tooltip-position="top center">
+					<i class="material-icons color-blue">link</i>
+				</div>
+			{{/if}}
+
+			{{#if previewButton}}
+				<div class="round-button-mono" {{action 'onPreview'}}  id={{previewButtonId}} data-tooltip="Toggle Preview" data-tooltip-position="top center">
+					<i class="material-icons color-gray">visibility</i>
+				</div>
+			{{/if}}
+
 			<div class="round-button-mono" {{action 'onAction'}}>
 				<i class="material-icons color-green">check</i>
 			</div>
@ -14,7 +25,23 @@
 				<i class="material-icons color-gray">close</i>
 			</div>
 		</div>
+		{{#if blockMode}}
 			<div class="clearfix"></div>
+			<div class="input-control">
+				<label>Name</label>
+				{{focus-input id="page-id-{{pageId}}" value=page.title class="mousetrap"}}
+			</div>
+			<div class="input-control">
+				<label>Description</label>
+				{{textarea id="page-excerpt-{{pageId}}" value=page.excerpt class="mousetrap" rows="3"}}
+			</div>
+		{{else}}
+			<div class="input-inline input-transparent edit-title pull-left">
+				{{focus-input type="text" id=pageId value=page.title class=(if hasNameError 'error-inline') placeholder="Name" class="mousetrap"}}
+			</div>
+		{{/if}}		
+		<div class="clearfix"></div>
+
 		<div class="dropdown-dialog cancel-edits-dialog" id={{dialogId}}>
 			<div class="content">
 				<p>Do you want to cancel editing and lose unsaved changes?</p>
--- a/app/app/templates/components/section/markdown/type-editor.hbs
+++ b/app/app/templates/components/section/markdown/type-editor.hbs
@ -1,15 +1,7 @@
-{{#section/base-editor-inline document=document folder=folder page=page tip="Concise name that describes code snippet" isDirty=(action 'isDirty') onCancel=(action 'onCancel') onAction=(action 'onAction')}}
-	<style>
-		.CodeMirror {
-			height: auto;
-			font-size: 17px;
-		}
-	</style>
-
-	<div class="section-markdown-preview-button round-button-mono" id={{tooltipId}} {{action 'toggleMode'}} data-tooltip="Toggle Preview" data-tooltip-position="top center">
-		<i class="material-icons color-gray">visibility</i>
-	</div>
-	{{document/edit-tools document=document folder=folder page=page onInsertLink=(action 'onInsertLink')}}
+{{#section/base-editor-inline document=document folder=folder page=page blockMode=blockMode 
+	contentLinkerButton=true onInsertLink=(action 'onInsertLink') 
+	previewButton=true onPreview=(action 'onPreview')  
+	isDirty=(action 'isDirty') onCancel=(action 'onCancel') onAction=(action 'onAction')}}

 	<div class="section-code-editor">
 		{{#if editMode}}
--- a/app/app/templates/components/section/wysiwyg/type-editor.hbs
+++ b/app/app/templates/components/section/wysiwyg/type-editor.hbs
@ -1,5 +1,6 @@
-{{#section/base-editor-inline document=document folder=folder page=page isDirty=(action 'isDirty') onCancel=(action 'onCancel') onAction=(action 'onAction')}}
-	{{document/edit-tools document=document folder=folder page=page onInsertLink=(action 'onInsertLink')}}
+{{#section/base-editor-inline document=document folder=folder page=page 
+	blockMode=blockMode contentLinkerButton=true onInsertLink=(action 'onInsertLink')
+	isDirty=(action 'isDirty') onCancel=(action 'onCancel') onAction=(action 'onAction')}}
 	<div id={{editorId}} class="mousetrap wysiwyg wysiwyg-editor">
 		{{{pageBody}}}
 	</div>
--- a/core/api/endpoint/sections_endpoint.go
+++ b/core/api/endpoint/sections_endpoint.go
@ -320,9 +320,15 @@ func UpdateBlock(w http.ResponseWriter, r *http.Request) {
 	method := "UpdateBlock"
 	p := request.GetPersister(r)

+	params := mux.Vars(r)
+	blockID := params["blockID"]
+	if len(blockID) == 0 {
+		writeMissingDataError(w, method, "blockID")
+		return
+	}
+
 	defer utility.Close(r.Body)
 	body, err := ioutil.ReadAll(r.Body)
-
 	if err != nil {
 		writeBadRequestError(w, method, "Bad payload")
 		return
@ -335,6 +341,8 @@ func UpdateBlock(w http.ResponseWriter, r *http.Request) {
 		return
 	}

+	b.RefID = blockID
+
 	if !p.CanUploadDocument(b.LabelID) {
 		writeForbiddenError(w)
 		return