Image Editor UI redesign (2)
This commit is contained in:
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) => {
|
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()) {
|
||||||
|
@ -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 {
|
||||||
|
@ -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'")
|
||||||
|
Loading…
Reference in New Issue
Block a user