Image Editor UI redesign (2)

client/js/components/editor-image.js

@@ -42,9 +42,6 @@ let vueImage = new Vue({
 		selectImage: (imageId) => {
 			vueImage.currentImage = imageId;
 		},
-		selectAlignment: (align) => {
-			vueImage.currentAlign = align;
-		},
 		insertImage: (ev) => {
 
 			if(mde.codemirror.doc.somethingSelected()) {

client/scss/components/_editor.scss

@@ -98,7 +98,7 @@
 	display: flex;
 	flex-wrap: wrap;
 	align-items: flex-start;
-	max-height: 450px;
+	
 	overflow: auto;
 	overflow-x: hidden;
 
@@ -143,11 +143,11 @@
 		}
 
 		&.is-active {
-			background-color: mc($primary, '500');
+			background-color: mc('green', '500');
 			color: #FFF;
 
 			> img {
-				border-color: darken(mc($primary, '500'), 10%);
+				border-color: darken(mc('green', '500'), 10%);
 			}
 
 			> span > strong {
@@ -157,11 +157,11 @@
 		}
 
 		&.is-contextopen {
-			background-color: mc('orange', '500');
+			background-color: mc('blue', '500');
 			color: #FFF;
 
 			> img {
-				border-color: darken(mc('orange', '500'), 10%);
+				border-color: darken(mc('blue', '500'), 10%);
 			}
 
 			> span > strong {

views/modals/editor-image.pug

@@ -22,31 +22,22 @@
 						i.fa.fa-download
 						span Fetch from URL
 			section.is-gapless
-				.columns
+				.columns.is-stretched
 					.column.is-one-quarter.modal-sidebar.is-green(style={'max-width':'350px'})
-						.box.editor-modal-folderlist
+						.model-sidebar-header Folders
-							aside.menu
+						ul.model-sidebar-list
-								p.menu-label
+							li(v-for="fld in folders")
-									| Folders
+								a(v-on:click="selectFolder(fld)", v-bind:class="{ 'is-active': currentFolder === fld }")
-								ul.menu-list
+									i.icon-folder2
-									li(v-for="fld in folders")
+									span /{{ fld }}
-										a(v-on:click="selectFolder(fld)", v-bind:class="{ 'is-active': currentFolder === fld }")
+						.model-sidebar-header Alignment
-											span.icon.is-small: i.fa.fa-folder
+						.model-sidebar-content
-											span /{{ fld }}
+							p.control.is-fullwidth
-						.box.editor-modal-imagealign
+								select(v-model='currentAlign')
-							.control.is-grouped
+									option(value='left') Left (default)
-								.control
+									option(value='center') Centered
-									span Alignment
+									option(value='right') Right
-								.control.has-addons
+									option(value='logo') Page Logo
-									a.button.is-primary(title="Left", v-on:click="selectAlignment('left')", v-bind:class="{ 'is-outlined': currentAlign !== 'left' }")
-										span.icon.is-small: i.fa.fa-align-left
-									a.button.is-primary(title="Center", v-on:click="selectAlignment('center')", v-bind:class="{ 'is-outlined': currentAlign !== 'center' }")
-										span.icon.is-small: i.fa.fa-align-center
-									a.button.is-primary(title="Right", v-on:click="selectAlignment('right')", v-bind:class="{ 'is-outlined': currentAlign !== 'right' }")
-										span.icon.is-small: i.fa.fa-align-right
-								.control
-									a.button.is-primary(title="Page Logo", v-on:click="selectAlignment('logo')", v-bind:class="{ 'is-outlined': currentAlign !== 'logo' }")
-										span.icon.is-small: i.fa.fa-external-link-square
 					.column.editor-modal-imagechoices
 						figure(v-for="img in images", v-bind:class="{ 'is-active': currentImage === img._id }", v-on:click="selectImage(img._id)", v-bind:data-uid="img._id")
 							img(v-bind:src="'/uploads/t/' + img._id + '.png'")