Editor - Codeblock UI

requarks · Dec 4, 2016 · f7ce81e · f7ce81e
1 parent f7ba9ad
commit f7ce81e
Show file tree

Hide file tree

Showing 8 changed files with 76 additions and 31 deletions.
diff --git a/assets/css/app.css b/assets/css/app.css
diff --git a/assets/js/app.js b/assets/js/app.js
diff --git a/client/js/components/editor-codeblock.js b/client/js/components/editor-codeblock.js
@@ -44,9 +44,20 @@ let vueCodeBlock = new Vue({
 		}
 	},
 	methods: {
+		open: (ev) => {
+			$('#modal-editor-codeblock').addClass('is-active');
+
+			_.delay(() => {
+				codeEditor.resize();
+				codeEditor.focus();
+				codeEditor.setAutoScrollEditorIntoView(true);
+				codeEditor.renderer.updateFull();
+			}, 1000);
+
+		},
 		cancel: (ev) => {
 			mdeModalOpenState = false;
-			$('#modal-editor-codeblock').slideUp();
+			$('#modal-editor-codeblock').removeClass('is-active');
 		},
 		insertCode: (ev) => {
 

diff --git a/client/js/components/editor-image.js b/client/js/components/editor-image.js
@@ -27,12 +27,12 @@ let vueImage = new Vue({
 
 		open: () => {
 			mdeModalOpenState = true;
-			$('#modal-editor-image').slideDown();
+			$('#modal-editor-image').addClass('is-active');
 			vueImage.refreshFolders();
 		},
 		cancel: (ev) => {
 			mdeModalOpenState = false;
-			$('#modal-editor-image').slideUp();
+			$('#modal-editor-image').removeClass('is-active');
 		},
 
 		// -------------------------------------------

diff --git a/client/js/components/editor.js b/client/js/components/editor.js
@@ -138,10 +138,7 @@ if($('#mk-editor').length === 1) {
 							codeEditor.setValue('');
 						}
 
-						$('#modal-editor-codeblock').slideDown(400, () => {
-							codeEditor.resize();
-							codeEditor.focus();
-						});
+						vueCodeBlock.open();
 
 					}
 				},

diff --git a/client/scss/components/_editor.scss b/client/scss/components/_editor.scss
@@ -102,6 +102,20 @@
 	overflow: auto;
 	overflow-x: hidden;
 
+	> em {
+		display: flex;
+		align-items: center;
+		padding: 25px;
+		color: mc('grey', '500');
+
+		> i {
+			font-size: 32px;
+			margin-right: 10px;
+			color: mc('grey', '300');
+		}
+
+	}
+
 	> figure {
 		display: flex;
 		flex-direction: column;
@@ -235,12 +249,31 @@
 	position: relative;
 }
 
+.ace_scroller {
+	width: 100%;
+}
+.ace_content {
+	height: 100%;
+}
+
 #page-type-source .ace-container {
 	min-height: 95vh;
 }
 
 #modal-editor-codeblock .ace-container {
-	height: 400px;
+	display: flex;
+	align-items: stretch;
+	padding: 0;
+	position: relative;
+	width: 100%;
+	height: 100%;
+
+	#codeblock-editor {
+		width: 100%;
+		height: 100%;
+		min-height: 500px;
+	}
+
 }
 
 #source-display, #codeblock-editor {

diff --git a/views/modals/editor-codeblock.pug b/views/modals/editor-codeblock.pug
@@ -1,21 +1,23 @@
 
-.modallayer#modal-editor-codeblock
-	.modallayer-content
-
-		.columns
-			.column
-				h3 Code Block
-			.column.is-narrow
-				p.control
-					span.select
-						select(style={width: '300px'}, v-model='modeSelected')
-							option(v-for="mode in modes" v-bind:value='mode.name') {{ mode.caption }}
-			.column.is-narrow
-				.control.is-grouped
-					p.control
-						a.button.is-warning.is-outlined(v-on:click="cancel") Cancel
-					p.control
-						a.button.is-primary.is-outlined(v-on:click="insertCode") Insert Code Block
+.modal#modal-editor-codeblock
+	.modal-background
+	.modal-container
+		.modal-content.is-expanded
+
+			header.is-green
+				span Insert Code Block
 
-		.ace-container(style={'border-radius':'5px'})
-			#codeblock-editor
+			section.is-gapless
+				.columns.is-stretched
+					.column.is-one-quarter.modal-sidebar.is-green(style={'max-width':'350px'})
+						.model-sidebar-header Language
+						.model-sidebar-content
+							p.control.is-fullwidth
+								select(v-model='modeSelected')
+									option(v-for="mode in modes" v-bind:value='mode.name') {{ mode.caption }}
+					.column.ace-container
+						#codeblock-editor
+
+			footer
+				a.button.is-grey.is-outlined(v-on:click="cancel") Discard
+				a.button.is-green(v-on:click="insertCode") Insert Code Block
diff --git a/views/modals/editor-image.pug b/views/modals/editor-image.pug
@@ -29,7 +29,7 @@
 							li(v-for="fld in folders")
 								a(v-on:click="selectFolder(fld)", v-bind:class="{ 'is-active': currentFolder === fld }")
 									i.icon-folder2
-									span /{{ fld }}
+									span / {{ fld }}
 						.model-sidebar-header Alignment
 						.model-sidebar-content
 							p.control.is-fullwidth
@@ -43,7 +43,9 @@
 							img(v-bind:src="'/uploads/t/' + img._id + '.png'")
 							span: strong {{ img.basename }}
 							span {{ img.filesize | filesize }}
-						em(v-show="images.length < 1") This folder is empty.
+						em(v-show="images.length < 1")
+							i.icon-marquee-minus
+							| This folder is empty.
 			footer
 				a.button.is-grey.is-outlined(v-on:click="cancel") Discard
 				a.button.is-green(v-on:click="insertImage") Insert Image