transition(:duration="400")
.modal(v-show='isShown', v-cloak)
transition(name='modal-background')
.modal-background(v-show='isShown')
.modal-container
transition(name='modal-content')
.modal-content.is-expanded(v-show='isShown')
header.is-green
span {{ (mode === 'file') ? $t('editor.filetitle') : $t('editor.imagetitle') }}
p.modal-notify(:class='{ "is-active": isLoading }')
span {{ isLoadingText }}
i
.modal-toolbar.is-green
a.button(@click='newFolder')
i.nc-icon-outline.files_folder-14
span {{ $t('editor.newfolder') }}
a.button#btn-editor-file-upload
i.nc-icon-outline.arrows-1_cloud-upload-94
span {{ (mode === 'file') ? $t('editor.fileupload') : $t('editor.imageupload') }}
label
input(type='file', multiple, :disabled='isLoading', ref='editorFileUploadInput')
a.button(v-if='mode === "image"', @click='fetchFromUrl')
i.nc-icon-outline.arrows-1_cloud-download-93
span Fetch from URL
section.is-gapless
.columns.is-stretched
.column.is-one-quarter.modal-sidebar.is-green(style={'max-width':'350px'})
.model-sidebar-header {{ $t('editor.folders') }}
ul.model-sidebar-list
li(v-for='fld in folders')
a(@click='selectFolder(fld)', :class='{ "is-active": currentFolder === fld }')
i.nc-icon-outline.files_folder-17
span / {{ fld }}
.model-sidebar-header(v-if='mode === "image"') Alignment
.model-sidebar-content(v-if='mode === "image"')
p.control.is-fullwidth
select(v-model='currentAlign')
option(value='left') {{ $t('editor.imagealignleft') }}
option(value='center') {{ $t('editor.imagealigncenter') }}
option(value='right') {{ $t('editor.imagealignright') }}
option(value='logo') {{ $t('editor.imagealignlogo') }}
.column.editor-modal-choices.editor-modal-file-choices(v-if='mode === "file"')
figure(v-for='fl in files', :class='{ "is-active": currentFile === fl._id }', @click='selectFile(fl._id)', :data-uid='fl._id')
i(class='icon-file')
span: strong {{ fl.filename }}
span {{ fl.mime }}
span {{ filesize(fl.filesize) }}
em(v-show='files.length < 1')
i.icon-marquee-minus
| {{ $t('editor.filefolderempty') }}
.column.editor-modal-choices.editor-modal-image-choices(v-if='mode === "image"')
figure(v-for='img in files', v-bind:class='{ "is-active": currentFile === img._id }', v-on:click='selectFile(img._id)', v-bind:data-uid='img._id')
img(v-bind:src='"/uploads/t/" + img._id + ".png"')
span: strong {{ img.basename }}
span {{ filesize(img.filesize) }}
em(v-show='files.length < 1')
i.icon-marquee-minus
| {{ $t('editor.filefolderempty') }}
footer
a.button.is-grey.is-outlined(@click='cancel') {{ $t('editor.discard') }}
a.button.is-green(@click='insertFileLink') {{ (mode === 'file') ? $t('editor.fileinsert') : $t('editor.imageinsert') }}
transition(:duration="400")
.modal.is-superimposed(v-show='newFolderShow')
transition(name='modal-background')
.modal-background(v-show='newFolderShow')
.modal-container
transition(name='modal-content')
.modal-content(v-show='newFolderShow')
header.is-light-blue {{ $t('modal.newfoldertitle') }}
section
label.label {{ $t('modal.newfoldername') }}
p.control.is-fullwidth
input.input(type='text', :placeholder='$t("modal.newfoldernameplaceholder")', v-model='newFolderName', ref='editorFileNewFolderInput', @keyup.enter='newFolderCreate', @keyup.esc='newFolderDiscard')
span.help.is-danger(v-show='newFolderError') {{ $t('modal.newfolderinvalid') }}
footer
a.button.is-grey.is-outlined(@click='newFolderDiscard') {{ $t('modal.discard') }}
a.button.is-light-blue(@click='newFolderCreate') {{ $t('modal.create') }}
transition(:duration="400")
.modal.is-superimposed(v-show='fetchFromUrlShow')
transition(name='modal-background')
.modal-background(v-show='fetchFromUrlShow')
.modal-container
transition(name='modal-content')
.modal-content(v-show='fetchFromUrlShow')
header.is-light-blue Fetch Image from URL
section
label.label Enter full URL path to the image:
p.control.is-fullwidth
input.input(type='text', placeholder='http://www.example.com/some-image.png', v-model='fetchFromUrlURL', ref='editorFileFetchInput', @keyup.enter='fetchFromUrlGo', @keyup.esc='fetchFromUrlDiscard')
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
transition(:duration="400")
.modal.is-superimposed(v-show='renameFileShow')
transition(name='modal-background')
.modal-background(v-show='renameFileShow')
.modal-container
transition(name='modal-content')
.modal-content(v-show='renameFileShow')
header.is-indigo {{ $t('modal.renamefiletitle') }}
section
label.label {{ $t('modal.renamefilename') }}
p.control.is-fullwidth
input.input#txt-editor-file-rename(type='text', :placeholder='$t("modal.renamefilenameplaceholder")', v-model='renameFileFilename', ref='editorFileRenameInput', @keyup.enter='renameFileGo', @keyup.esc='renameFileDiscard')
span.help.is-danger.is-hidden {{ $t('modal.renamefileinvalid') }}
footer
a.button.is-grey.is-outlined(@click='renameFileDiscard') {{ $t('modal.discard') }}
a.button.is-light-blue(@click='renameFileGo') {{ $t('modal.renamefile') }}
transition(:duration="400")
.modal.is-superimposed(v-show='deleteFileShow')
transition(name='modal-background')
.modal-background(v-show='deleteFileShow')
.modal-container
transition(name='modal-content')
.modal-content(v-show='deleteFileShow')
header.is-red {{ $t('modal.deletefiletitle') }}
section
span {{ $t('modal.deletefilewarn') }} #[strong {{deleteFileFilename}}]?
footer
a.button.is-grey.is-outlined(@click='deleteFileWarn(false)') {{ $t('modal.discard') }}
a.button.is-red(@click='deleteFileGo') {{ $t('modal.delete') }}