Image Editor UI redesign (2)

pull/33/head
NGPixel 9 years ago
parent 238ba96037
commit f7ba9ad143

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

@ -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()) {

@ -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 {

@ -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
aside.menu
p.menu-label
| Folders
ul.menu-list
li(v-for="fld in folders")
a(v-on:click="selectFolder(fld)", v-bind:class="{ 'is-active': currentFolder === fld }")
span.icon.is-small: i.fa.fa-folder
span /{{ fld }}
.box.editor-modal-imagealign
.control.is-grouped
.control
span Alignment
.control.has-addons
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
.model-sidebar-header Folders
ul.model-sidebar-list
li(v-for="fld in folders")
a(v-on:click="selectFolder(fld)", v-bind:class="{ 'is-active': currentFolder === fld }")
i.icon-folder2
span /{{ fld }}
.model-sidebar-header Alignment
.model-sidebar-content
p.control.is-fullwidth
select(v-model='currentAlign')
option(value='left') Left (default)
option(value='center') Centered
option(value='right') Right
option(value='logo') Page Logo
.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'")

Loading…
Cancel
Save