liz/wikijs-fork
liz/wikijs-fork
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Image Editor UI redesign (2)

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
assets/css/app.css
View File

File diff suppressed because one or more lines are too long

2
assets/js/app.js
View File

File diff suppressed because one or more lines are too long

59
assets/js/libs.js
View File

File diff suppressed because one or more lines are too long

3
client/js/components/editor-image.js
View File

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

10
client/scss/components/_editor.scss
View File

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

39
views/modals/editor-image.pug
View File

@ -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'")