Image Editor redesign
This commit is contained in:
NGPixel
parent
607ecf61cf
commit
a04bed7c89
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -82,10 +82,10 @@ if($('#mk-editor').length === 1) {
|
||||
{
|
||||
name: "link",
|
||||
action: (editor) => {
|
||||
if(!mdeModalOpenState) {
|
||||
/*if(!mdeModalOpenState) {
|
||||
mdeModalOpenState = true;
|
||||
$('#modal-editor-link').slideToggle();
|
||||
}
|
||||
}*/
|
||||
},
|
||||
className: "fa fa-link",
|
||||
title: "Insert Link",
|
||||
|
||||
@ -196,7 +196,7 @@
|
||||
}
|
||||
|
||||
.editor-modal-folderlist {
|
||||
height: 358px;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
@ -1,130 +1,111 @@
|
||||
|
||||
.modallayer#modal-editor-image
|
||||
.modallayer-content
|
||||
|
||||
.columns
|
||||
.column
|
||||
h3 Insert Image
|
||||
.modal#modal-editor-image
|
||||
.modal-background
|
||||
.modal-container
|
||||
.modal-content.is-expanded
|
||||
|
||||
.column.is-narrow.editor-modal-load(v-bind:class="{ 'is-active': isLoading }")
|
||||
span {{ isLoadingText }}
|
||||
i
|
||||
|
||||
.column.is-narrow
|
||||
.control.is-grouped
|
||||
p.control
|
||||
a.button.is-dark.is-outlined(v-on:click="newFolder")
|
||||
span.icon.is-small: i.fa.fa-folder
|
||||
span New Folder
|
||||
.control.has-addons
|
||||
a.button.is-info.is-outlined#btn-editor-uploadimage
|
||||
span.icon.is-small: i.fa.fa-upload
|
||||
span Upload Image
|
||||
label
|
||||
input(type="file", multiple)
|
||||
a.button.is-info.is-outlined(v-on:click="fetchFromUrl")
|
||||
span.icon.is-small: i.fa.fa-download
|
||||
span Fetch from URL
|
||||
.column.is-narrow
|
||||
.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
|
||||
header.is-green
|
||||
span Insert Image
|
||||
p.modal-notify(v-bind:class="{ 'is-active': isLoading }")
|
||||
span {{ isLoadingText }}
|
||||
i
|
||||
.modal-toolbar.is-green
|
||||
a.button(v-on:click="newFolder")
|
||||
i.fa.fa-folder
|
||||
span New Folder
|
||||
a.button#btn-editor-uploadimage
|
||||
i.fa.fa-upload
|
||||
span Upload Image
|
||||
label
|
||||
input(type="file", multiple)
|
||||
a.button(v-on:click="fetchFromUrl")
|
||||
i.fa.fa-download
|
||||
span Fetch from URL
|
||||
section.is-gapless
|
||||
.columns
|
||||
.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
|
||||
.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'")
|
||||
span: strong {{ img.basename }}
|
||||
span {{ img.filesize | filesize }}
|
||||
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
|
||||
|
||||
.columns
|
||||
.column.is-one-quarter(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
|
||||
.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'")
|
||||
span: strong {{ img.basename }}
|
||||
span {{ img.filesize | filesize }}
|
||||
em(v-show="images.length < 1") This folder is empty.
|
||||
|
||||
.modal(v-bind:class="{ 'is-active': newFolderShow }")
|
||||
.modal.is-superimposed(v-bind:class="{ 'is-active': newFolderShow }")
|
||||
.modal-background
|
||||
.modal-container
|
||||
.modal-content
|
||||
.card.is-fullwidth
|
||||
header.card-header
|
||||
p.card-header-title New Folder
|
||||
.card-content
|
||||
.content
|
||||
label.label Enter the new folder name:
|
||||
p.control
|
||||
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!
|
||||
footer.card-footer
|
||||
a.card-footer-item(v-on:click="newFolderDiscard") Discard
|
||||
a.card-footer-item(v-on:click="newFolderCreate") Create
|
||||
header.is-light-blue New Folder
|
||||
section
|
||||
label.label Enter the new folder name:
|
||||
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")
|
||||
span.help.is-danger(v-show="newFolderError") This folder name is invalid!
|
||||
footer
|
||||
a.button.is-grey.is-outlined(v-on:click="newFolderDiscard") Discard
|
||||
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-container
|
||||
.modal-content
|
||||
.card.is-fullwidth
|
||||
header.card-header
|
||||
p.card-header-title Fetch Image from URL
|
||||
.card-content
|
||||
.content
|
||||
label.label Enter full URL path to the image:
|
||||
p.control
|
||||
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!
|
||||
footer.card-footer
|
||||
a.card-footer-item(v-on:click="fetchFromUrlDiscard") Discard
|
||||
a.card-footer-item(v-on:click="fetchFromUrlGo") Fetch
|
||||
header.is-light-blue Fetch Image from URL
|
||||
section
|
||||
label.label Enter full URL path to the image:
|
||||
p.control.is-fullwidth
|
||||
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!
|
||||
footer
|
||||
a.button.is-grey.is-outlined(v-on:click="fetchFromUrlDiscard") Discard
|
||||
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-container
|
||||
.modal-content
|
||||
.card.is-fullwidth
|
||||
header.card-header
|
||||
p.card-header-title Rename Image
|
||||
.card-content
|
||||
.content
|
||||
label.label Enter the new filename (without the extension) of the image:
|
||||
p.control
|
||||
input.input#txt-editor-renameimage(type='text', placeholder='filename', v-model='renameImageFilename')
|
||||
span.help.is-danger.is-hidden This filename is invalid!
|
||||
footer.card-footer
|
||||
a.card-footer-item(v-on:click="renameImageDiscard") Discard
|
||||
a.card-footer-item(v-on:click="renameImageGo") Rename
|
||||
header.is-indigo Rename Image
|
||||
section
|
||||
label.label Enter the new filename (without the extension) of the image:
|
||||
p.control.is-fullwidth
|
||||
input.input#txt-editor-renameimage(type='text', placeholder='filename', v-model='renameImageFilename')
|
||||
span.help.is-danger.is-hidden This filename is invalid!
|
||||
footer
|
||||
a.button.is-grey.is-outlined(v-on:click="renameImageDiscard") Discard
|
||||
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-container
|
||||
.modal-content
|
||||
.card.is-fullwidth
|
||||
header.card-header.is-danger
|
||||
p.card-header-title Delete image?
|
||||
.card-content
|
||||
.content
|
||||
| Are you sure you want to delete #[strong {{deleteImageFilename}}]?
|
||||
footer.card-footer
|
||||
a.card-footer-item(v-on:click="deleteImageWarn(false)") Discard
|
||||
a.card-footer-item(v-on:click="deleteImageGo") Delete
|
||||
header.is-red Delete image?
|
||||
section
|
||||
span Are you sure you want to delete #[strong {{deleteImageFilename}}]?
|
||||
footer
|
||||
a.button.is-grey.is-outlined(v-on:click="deleteImageWarn(false)") Discard
|
||||
a.button.is-red(v-on:click="deleteImageGo") Delete
|
||||
Loading…
Reference in New Issue
Block a user