Image Editor UI redesign (2)

This commit is contained in:
NGPixel 2016-11-29 22:23:44 -05:00
parent 238ba96037
commit f7ba9ad143
6 changed files with 51 additions and 64 deletions

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

View File

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

View File

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

View File

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