diff --git a/client/js/app.js b/client/js/app.js index 743b5c5a..89708261 100644 --- a/client/js/app.js +++ b/client/js/app.js @@ -38,6 +38,7 @@ import join from 'lodash/join' import kebabCase from 'lodash/kebabCase' import last from 'lodash/last' import map from 'lodash/map' +import nth from 'lodash/nth' import pullAt from 'lodash/pullAt' import reject from 'lodash/reject' import slice from 'lodash/slice' @@ -101,6 +102,7 @@ const _ = { kebabCase, last, map, + nth, pullAt, reject, slice, diff --git a/client/js/components/editor-file.vue b/client/js/components/editor-file.vue index d995ab2b..0cbf739b 100644 --- a/client/js/components/editor-file.vue +++ b/client/js/components/editor-file.vue @@ -8,29 +8,29 @@ .modal-content.is-expanded(v-show='isShown') header.is-green span {{ $t('editor.filetitle') }} - p.modal-notify(v-bind:class='{ "is-active": isLoading }') + p.modal-notify(:class='{ "is-active": isLoading }') span {{ isLoadingText }} i .modal-toolbar.is-green - a.button(v-on:click='newFolder') + a.button(@click='newFolder') i.icon-folder2 span {{ $t('editor.newfolder') }} a.button#btn-editor-file-upload i.icon-cloud-upload span {{ $t('editor.fileupload') }} label - input(type='file', multiple) + input(type='file', multiple, :disabled='isLoading', ref='editorFileUploadInput') 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(v-on:click='selectFolder(fld)', v-bind:class='{ "is-active": currentFolder === fld }') + a(@click='selectFolder(fld)', :class='{ "is-active": currentFolder === fld }') i.icon-folder2 span / {{ fld }} .column.editor-modal-file-choices - figure(v-for='fl in files', v-bind:class='{ "is-active": currentFile === fl._id }', v-on:click='selectFile(fl._id)', v-bind:data-uid='fl._id') + 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 }} @@ -39,49 +39,56 @@ i.icon-marquee-minus | {{ $t('editor.filefolderempty') }} footer - a.button.is-grey.is-outlined(v-on:click='cancel') {{ $t('editor.discard') }} - a.button.is-green(v-on:click='insertFileLink') {{ $t('editor.fileinsert') }} + a.button.is-grey.is-outlined(@click='cancel') {{ $t('editor.discard') }} + a.button.is-green(@click='insertFileLink') {{ $t('editor.fileinsert') }} - .modal.is-superimposed(v-show='newFolderShow') - transition(name='modal-background') - .modal-background - .modal-container(v-show='newFolderShow') - 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', v-bind:placeholder='$t("modal.newfoldernameplaceholder")', v-model='newFolderName', ref='editorFileNewFolderInput', v-on:keyup.enter='newFolderCreate', v-on:keyup.esc='newFolderDiscard') - span.help.is-danger(v-show='newFolderError') {{ $t('modal.newfolderinvalid') }} - footer - a.button.is-grey.is-outlined(v-on:click='newFolderDiscard') {{ $t('modal.discard') }} - a.button.is-light-blue(v-on:click='newFolderCreate') {{ $t('modal.create') }} + 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') }} - .modal.is-superimposed(v-show='renameFileShow') - .modal-background - .modal-container - .modal-content - header.is-indigo {{ $t('modal.renamefiletitle') }} - section - label.label {{ $t('modal.renamefilename') }} - p.control.is-fullwidth - input.input#txt-editor-file-rename(type='text', v-bind:placeholder='$t("modal.renamefilenameplaceholder")', v-model='renameFileFilename', ref='editorFileRenameInput', v-on:keyup.enter='renameFileGo', v-on:keyup.esc='renameFileDiscard') - span.help.is-danger.is-hidden {{ $t('modal.renamefileinvalid') }} - footer - a.button.is-grey.is-outlined(v-on:click='renameFileDiscard') {{ $t('modal.discard') }} - a.button.is-light-blue(v-on:click='renameFileGo') {{ $t('modal.renamefile') }} + 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') }} - .modal.is-superimposed(v-show='deleteFileShow') - .modal-background - .modal-container - .modal-content - header.is-red {{ $t('modal.deletefiletitle') }} - section - span {{ $t('modal.deletefilewarn') }} #[strong {{deleteFileFilename}}]? - footer - a.button.is-grey.is-outlined(v-on:click='deleteFileWarn(false)') {{ $t('modal.discard') }} - a.button.is-red(v-on:click='deleteFileGo') {{ $t('modal.delete') }} + 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') }}