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
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/app.css
+1 -1
View File
File diff suppressed because one or more lines are too long
assets/js/app.js
+1 -1
View File
File diff suppressed because one or more lines are too long
assets/js/libs.js
+29 -30
View File
File diff suppressed because one or more lines are too long
client/js/components/editor-image.js
-3
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()) {
client/scss/components/_editor.scss
+5 -5
View File
@@ -98,7 +98,7 @@ .editor-modal-imagechoices {
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 @@ .editor-modal-imagechoices {
} }
&.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 @@ .editor-modal-imagechoices {
} }
&.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 {
views/modals/editor-image.pug
+15 -24
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 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 .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'")