Commit a04bed7c authored by NGPixel's avatar NGPixel

Image Editor redesign

parent 607ecf61
This source diff could not be displayed because it is too large. You can view the blob instead.
This diff was suppressed by a .gitattributes entry.
This diff was suppressed by a .gitattributes entry.
This diff was suppressed by a .gitattributes entry.
This diff was suppressed by a .gitattributes entry.
This source diff could not be displayed because it is too large. You can view the blob instead.
...@@ -82,10 +82,10 @@ if($('#mk-editor').length === 1) { ...@@ -82,10 +82,10 @@ if($('#mk-editor').length === 1) {
{ {
name: "link", name: "link",
action: (editor) => { action: (editor) => {
if(!mdeModalOpenState) { /*if(!mdeModalOpenState) {
mdeModalOpenState = true; mdeModalOpenState = true;
$('#modal-editor-link').slideToggle(); $('#modal-editor-link').slideToggle();
} }*/
}, },
className: "fa fa-link", className: "fa fa-link",
title: "Insert Link", title: "Insert Link",
......
...@@ -196,7 +196,7 @@ ...@@ -196,7 +196,7 @@
} }
.editor-modal-folderlist { .editor-modal-folderlist {
height: 358px; height: 100%;
overflow: auto; overflow: auto;
overflow-x: hidden; overflow-x: hidden;
} }
......
.modallayer#modal-editor-image .modal#modal-editor-image
.modallayer-content .modal-background
.modal-container
.columns .modal-content.is-expanded
.column
h3 Insert Image
.column.is-narrow.editor-modal-load(v-bind:class="{ 'is-active': isLoading }") header.is-green
span Insert Image
p.modal-notify(v-bind:class="{ 'is-active': isLoading }")
span {{ isLoadingText }} span {{ isLoadingText }}
i i
.modal-toolbar.is-green
.column.is-narrow a.button(v-on:click="newFolder")
.control.is-grouped i.fa.fa-folder
p.control
a.button.is-dark.is-outlined(v-on:click="newFolder")
span.icon.is-small: i.fa.fa-folder
span New Folder span New Folder
.control.has-addons a.button#btn-editor-uploadimage
a.button.is-info.is-outlined#btn-editor-uploadimage i.fa.fa-upload
span.icon.is-small: i.fa.fa-upload
span Upload Image span Upload Image
label label
input(type="file", multiple) input(type="file", multiple)
a.button.is-info.is-outlined(v-on:click="fetchFromUrl") a.button(v-on:click="fetchFromUrl")
span.icon.is-small: i.fa.fa-download i.fa.fa-download
span Fetch from URL span Fetch from URL
.column.is-narrow section.is-gapless
.control.is-grouped
p.control
a.button.is-warning.is-outlined(v-on:click="cancel") Cancel
p.control
a.button.is-primary.is-outlined(v-on:click="insertImage") Insert Image
.columns .columns
.column.is-one-quarter(style={'max-width':'350px'}) .column.is-one-quarter.modal-sidebar.is-green(style={'max-width':'350px'})
.box.editor-modal-folderlist .box.editor-modal-folderlist
aside.menu aside.menu
p.menu-label p.menu-label
...@@ -63,68 +53,59 @@ ...@@ -63,68 +53,59 @@
span: strong {{ img.basename }} span: strong {{ img.basename }}
span {{ img.filesize | filesize }} span {{ img.filesize | filesize }}
em(v-show="images.length < 1") This folder is empty. em(v-show="images.length < 1") This folder is empty.
footer
a.button.is-grey.is-outlined(v-on:click="cancel") Discard
a.button.is-green(v-on:click="insertImage") Insert Image
.modal(v-bind:class="{ 'is-active': newFolderShow }") .modal.is-superimposed(v-bind:class="{ 'is-active': newFolderShow }")
.modal-background .modal-background
.modal-container .modal-container
.modal-content .modal-content
.card.is-fullwidth header.is-light-blue New Folder
header.card-header section
p.card-header-title New Folder
.card-content
.content
label.label Enter the new folder name: label.label Enter the new folder name:
p.control p.control.is-fullwidth
input.input#txt-editor-newfoldername(type='text', placeholder='folder name', v-model='newFolderName', v-on:keyup.enter="newFolderCreate", v-on:keyup.esc="newFolderDiscard") input.input#txt-editor-newfoldername(type='text', placeholder='folder name', v-model='newFolderName', v-on:keyup.enter="newFolderCreate", v-on:keyup.esc="newFolderDiscard")
span.help.is-danger(v-show="newFolderError") This folder name is invalid! span.help.is-danger(v-show="newFolderError") This folder name is invalid!
footer.card-footer footer
a.card-footer-item(v-on:click="newFolderDiscard") Discard a.button.is-grey.is-outlined(v-on:click="newFolderDiscard") Discard
a.card-footer-item(v-on:click="newFolderCreate") Create a.button.is-light-blue(v-on:click="newFolderCreate") Create
.modal(v-bind:class="{ 'is-active': fetchFromUrlShow }") .modal.is-superimposed(v-bind:class="{ 'is-active': fetchFromUrlShow }")
.modal-background .modal-background
.modal-container .modal-container
.modal-content .modal-content
.card.is-fullwidth header.is-light-blue Fetch Image from URL
header.card-header section
p.card-header-title Fetch Image from URL
.card-content
.content
label.label Enter full URL path to the image: label.label Enter full URL path to the image:
p.control p.control.is-fullwidth
input.input#txt-editor-fetchimgurl(type='text', placeholder='http://www.example.com/some-image.png', v-model='fetchFromUrlURL') input.input#txt-editor-fetchimgurl(type='text', placeholder='http://www.example.com/some-image.png', v-model='fetchFromUrlURL')
span.help.is-danger.is-hidden This URL path is invalid! span.help.is-danger.is-hidden This URL path is invalid!
footer.card-footer footer
a.card-footer-item(v-on:click="fetchFromUrlDiscard") Discard a.button.is-grey.is-outlined(v-on:click="fetchFromUrlDiscard") Discard
a.card-footer-item(v-on:click="fetchFromUrlGo") Fetch a.button.is-light-blue(v-on:click="fetchFromUrlGo") Fetch
.modal(v-bind:class="{ 'is-active': renameImageShow }") .modal.is-superimposed(v-bind:class="{ 'is-active': renameImageShow }")
.modal-background .modal-background
.modal-container .modal-container
.modal-content .modal-content
.card.is-fullwidth header.is-indigo Rename Image
header.card-header section
p.card-header-title Rename Image
.card-content
.content
label.label Enter the new filename (without the extension) of the image: label.label Enter the new filename (without the extension) of the image:
p.control p.control.is-fullwidth
input.input#txt-editor-renameimage(type='text', placeholder='filename', v-model='renameImageFilename') input.input#txt-editor-renameimage(type='text', placeholder='filename', v-model='renameImageFilename')
span.help.is-danger.is-hidden This filename is invalid! span.help.is-danger.is-hidden This filename is invalid!
footer.card-footer footer
a.card-footer-item(v-on:click="renameImageDiscard") Discard a.button.is-grey.is-outlined(v-on:click="renameImageDiscard") Discard
a.card-footer-item(v-on:click="renameImageGo") Rename a.button.is-light-blue(v-on:click="renameImageGo") Rename
.modal(v-bind:class="{ 'is-active': deleteImageShow }") .modal.is-superimposed(v-bind:class="{ 'is-active': deleteImageShow }")
.modal-background .modal-background
.modal-container .modal-container
.modal-content .modal-content
.card.is-fullwidth header.is-red Delete image?
header.card-header.is-danger section
p.card-header-title Delete image? span Are you sure you want to delete #[strong {{deleteImageFilename}}]?
.card-content footer
.content a.button.is-grey.is-outlined(v-on:click="deleteImageWarn(false)") Discard
| Are you sure you want to delete #[strong {{deleteImageFilename}}]? a.button.is-red(v-on:click="deleteImageGo") Delete
footer.card-footer \ No newline at end of file
a.card-footer-item(v-on:click="deleteImageWarn(false)") Discard
a.card-footer-item(v-on:click="deleteImageGo") Delete
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment