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",
|
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 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.editor-modal-folderlist {
|
.editor-modal-folderlist {
|
||||||
height: 358px;
|
height: 100%;
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,130 +1,111 @@
|
|||||||
|
|
||||||
.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 {{ isLoadingText }}
|
span Insert Image
|
||||||
i
|
p.modal-notify(v-bind:class="{ 'is-active': isLoading }")
|
||||||
|
span {{ isLoadingText }}
|
||||||
.column.is-narrow
|
i
|
||||||
.control.is-grouped
|
.modal-toolbar.is-green
|
||||||
p.control
|
a.button(v-on:click="newFolder")
|
||||||
a.button.is-dark.is-outlined(v-on:click="newFolder")
|
i.fa.fa-folder
|
||||||
span.icon.is-small: i.fa.fa-folder
|
span New Folder
|
||||||
span New Folder
|
a.button#btn-editor-uploadimage
|
||||||
.control.has-addons
|
i.fa.fa-upload
|
||||||
a.button.is-info.is-outlined#btn-editor-uploadimage
|
span Upload Image
|
||||||
span.icon.is-small: i.fa.fa-upload
|
label
|
||||||
span Upload Image
|
input(type="file", multiple)
|
||||||
label
|
a.button(v-on:click="fetchFromUrl")
|
||||||
input(type="file", multiple)
|
i.fa.fa-download
|
||||||
a.button.is-info.is-outlined(v-on:click="fetchFromUrl")
|
span Fetch from URL
|
||||||
span.icon.is-small: i.fa.fa-download
|
section.is-gapless
|
||||||
span Fetch from URL
|
.columns
|
||||||
.column.is-narrow
|
.column.is-one-quarter.modal-sidebar.is-green(style={'max-width':'350px'})
|
||||||
.control.is-grouped
|
.box.editor-modal-folderlist
|
||||||
p.control
|
aside.menu
|
||||||
a.button.is-warning.is-outlined(v-on:click="cancel") Cancel
|
p.menu-label
|
||||||
p.control
|
| Folders
|
||||||
a.button.is-primary.is-outlined(v-on:click="insertImage") Insert Image
|
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
|
.modal.is-superimposed(v-bind:class="{ 'is-active': newFolderShow }")
|
||||||
.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-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
|
label.label Enter the new folder name:
|
||||||
.card-content
|
p.control.is-fullwidth
|
||||||
.content
|
input.input#txt-editor-newfoldername(type='text', placeholder='folder name', v-model='newFolderName', v-on:keyup.enter="newFolderCreate", v-on:keyup.esc="newFolderDiscard")
|
||||||
label.label Enter the new folder name:
|
span.help.is-danger(v-show="newFolderError") This folder name is invalid!
|
||||||
p.control
|
footer
|
||||||
input.input#txt-editor-newfoldername(type='text', placeholder='folder name', v-model='newFolderName', v-on:keyup.enter="newFolderCreate", v-on:keyup.esc="newFolderDiscard")
|
a.button.is-grey.is-outlined(v-on:click="newFolderDiscard") Discard
|
||||||
span.help.is-danger(v-show="newFolderError") This folder name is invalid!
|
a.button.is-light-blue(v-on:click="newFolderCreate") Create
|
||||||
footer.card-footer
|
|
||||||
a.card-footer-item(v-on:click="newFolderDiscard") Discard
|
|
||||||
a.card-footer-item(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
|
label.label Enter full URL path to the image:
|
||||||
.card-content
|
p.control.is-fullwidth
|
||||||
.content
|
input.input#txt-editor-fetchimgurl(type='text', placeholder='http://www.example.com/some-image.png', v-model='fetchFromUrlURL')
|
||||||
label.label Enter full URL path to the image:
|
span.help.is-danger.is-hidden This URL path is invalid!
|
||||||
p.control
|
footer
|
||||||
input.input#txt-editor-fetchimgurl(type='text', placeholder='http://www.example.com/some-image.png', v-model='fetchFromUrlURL')
|
a.button.is-grey.is-outlined(v-on:click="fetchFromUrlDiscard") Discard
|
||||||
span.help.is-danger.is-hidden This URL path is invalid!
|
a.button.is-light-blue(v-on:click="fetchFromUrlGo") Fetch
|
||||||
footer.card-footer
|
|
||||||
a.card-footer-item(v-on:click="fetchFromUrlDiscard") Discard
|
|
||||||
a.card-footer-item(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
|
label.label Enter the new filename (without the extension) of the image:
|
||||||
.card-content
|
p.control.is-fullwidth
|
||||||
.content
|
input.input#txt-editor-renameimage(type='text', placeholder='filename', v-model='renameImageFilename')
|
||||||
label.label Enter the new filename (without the extension) of the image:
|
span.help.is-danger.is-hidden This filename is invalid!
|
||||||
p.control
|
footer
|
||||||
input.input#txt-editor-renameimage(type='text', placeholder='filename', v-model='renameImageFilename')
|
a.button.is-grey.is-outlined(v-on:click="renameImageDiscard") Discard
|
||||||
span.help.is-danger.is-hidden This filename is invalid!
|
a.button.is-light-blue(v-on:click="renameImageGo") Rename
|
||||||
footer.card-footer
|
|
||||||
a.card-footer-item(v-on:click="renameImageDiscard") Discard
|
|
||||||
a.card-footer-item(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
|
|
||||||
a.card-footer-item(v-on:click="deleteImageWarn(false)") Discard
|
|
||||||
a.card-footer-item(v-on:click="deleteImageGo") Delete
|
|
||||||
Loading…
Reference in New Issue
Block a user