diff options
author | Julius Härtl <jus@bitgrid.net> | 2019-08-19 14:40:42 +0300 |
---|---|---|
committer | Julius Härtl <jus@bitgrid.net> | 2019-11-04 21:35:10 +0300 |
commit | d8cc1e80d6ce7401310eca1d532d731a4ff507b1 (patch) | |
tree | dab5621c440d42cddd42882bdd58d5a9738a993a /src/views | |
parent | f5e23e2566f3037c2434030d73b7e5a7f799c544 (diff) |
Rich workspace
Signed-off-by: Julius Härtl <jus@bitgrid.net>
Diffstat (limited to 'src/views')
-rw-r--r-- | src/views/RichWorkspace.vue | 142 |
1 files changed, 142 insertions, 0 deletions
diff --git a/src/views/RichWorkspace.vue b/src/views/RichWorkspace.vue new file mode 100644 index 000000000..ed7dd7223 --- /dev/null +++ b/src/views/RichWorkspace.vue @@ -0,0 +1,142 @@ +<!-- + - @copyright Copyright (c) 2019 Julius Härtl <jus@bitgrid.net> + - + - @author Julius Härtl <jus@bitgrid.net> + - + - @license GNU AGPL version 3 or any later version + - + - This program is free software: you can redistribute it and/or modify + - it under the terms of the GNU Affero General Public License as + - published by the Free Software Foundation, either version 3 of the + - License, or (at your option) any later version. + - + - This program is distributed in the hope that it will be useful, + - but WITHOUT ANY WARRANTY; without even the implied warranty of + - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + - GNU Affero General Public License for more details. + - + - You should have received a copy of the GNU Affero General Public License + - along with this program. If not, see <http://www.gnu.org/licenses/>. + - + --> + +<template> + <div id="rich-workspace" :class="{'icon-loading': !loaded || !ready }"> + <div v-if="!file && loaded" class="empty-workspace" @click="createNew"> + <i>Click to enter notes, lists or links</i> + </div> + <EditorWrapper v-if="file" + v-show="ready" + :key="file.id" + :file-id="file.id" + :active="true" + :mime="file.mimetype" + :autofocus="autofocus" + @ready="ready=true" /> + </div> +</template> + +<script> +import EditorWrapper from '../components/EditorWrapper' +export default { + name: 'RichWorkspace', + components: { + EditorWrapper + }, + props: { + path: { + type: String, + required: true + } + }, + data() { + return { + file: null, + loaded: false, + ready: false, + autofocus: false + } + }, + watch: { + path: function() { + this.getFileInfo() + } + }, + async mounted() { + this.getFileInfo() + }, + methods: { + getFileInfo() { + this.loaded = false + this.autofocus = false + this.ready = false + OCA.Files.App.fileList.filesClient.getFileInfo(this.path + '/README.md').then((status, fileInfo) => { + this.file = fileInfo + this.editing = true + this.loaded = true + }).fail(() => { + this.file = null + this.loaded = true + this.ready = true + }) + }, + createNew() { + window.FileList.createFile('README.md', { scrollTo: false }).then((status, data) => { + this.getFileInfo() + this.autofocus = true + }) + } + } +} +</script> + +<style scoped> + #rich-workspace { + padding: 20px; + min-height: 141px; + } + .empty-workspace { + opacity: 0.7; + } + #rich-workspace::v-deep div[contenteditable=false] { + width: 100%; + padding: 0px; + background-color: var(--color-main-background); + opacity: 1; + border: none; + } + + #rich-workspace::v-deep #read-only-editor { + margin-top: 44px; + } + + #rich-workspace::v-deep #editor-container { + height: 100%; + position: unset !important; + } + + #rich-workspace::v-deep #editor-wrapper { + position: unset !important; + } + + #rich-workspace::v-deep #editor-wrapper .ProseMirror { + padding: 0px; + margin: 0; + } + + #rich-workspace::v-deep .menubar .menubar-icons { + margin-left: 0; + } + + #rich-workspace::v-deep .editor__content { + margin: 0; + max-width: 100%; + } + .component-fade-enter-active, .component-fade-leave-active { + transition: opacity .3s ease; + } + .component-fade-enter, .component-fade-leave-to + /* .component-fade-leave-active below version 2.1.8 */ { + opacity: 0; + } +</style> |