diff options
author | Max <max@nextcloud.com> | 2022-07-09 00:10:35 +0300 |
---|---|---|
committer | Max <max@nextcloud.com> | 2022-07-29 15:17:03 +0300 |
commit | 887e93bacb1ced650fdeb60357cf166da9ee11e1 (patch) | |
tree | 5adfadc0c0ba5aaf151c53597d30afff4868fbf5 /src | |
parent | b2d690f18bbe53e2f8327b3f5183f401b13bf8ca (diff) |
refactor: add actual Wrapper, rename old to Main
Signed-off-by: Max <max@nextcloud.com>
Diffstat (limited to 'src')
-rw-r--r-- | src/components/Editor.vue | 58 | ||||
-rw-r--r-- | src/components/Editor/Main.vue | 54 | ||||
-rw-r--r-- | src/components/Editor/Wrapper.vue | 78 |
3 files changed, 129 insertions, 61 deletions
diff --git a/src/components/Editor.vue b/src/components/Editor.vue index 455f2e055..fa0c018bc 100644 --- a/src/components/Editor.vue +++ b/src/components/Editor.vue @@ -26,19 +26,14 @@ :idle="idle" :lock="lock" :sync-error="syncError" - :has-connection-issues="hasConnectionIssues" + :has-connection-issue="hasConnectionIssue" @reconnect="reconnect" /> - <div v-if="displayed" - id="editor-wrapper" - class="text-editor__wrapper" - :class="{ - 'has-conflicts': hasSyncCollission, - 'icon-loading': !contentLoaded && !hasConnectionIssue, - 'is-rich-workspace': isRichWorkspace, - 'is-rich-editor': isRichEditor, - 'show-color-annotations': showAuthorAnnotations - }"> - <Wrapper v-if="$editor"> + <Wrapper v-if="displayed" + :sync-error="syncError" + :has-connection-issue="hasConnectionIssue" + :content-loaded="contentLoaded" + :show-author-annotations="showAuthorAnnotations"> + <Main v-if="$editor"> <MenuBar v-if="renderMenus" ref="menubar" :autohide="autohide" @@ -47,7 +42,7 @@ :dirty="dirty" :sessions="filteredSessions" :sync-error="syncError" - :has-connection-issues="hasConnectionIssues" + :has-connection-issue="hasConnectionIssue" :last-saved-string="lastSavedString" /> <slot name="header" /> </MenuBar> @@ -58,11 +53,11 @@ :content-wrapper="contentWrapper" :file-path="relativePath" /> </Content> - </Wrapper> + </Main> <Reader v-if="hasSyncCollission" :content="syncError.data.outsideChange" :is-rich-editor="isRichEditor" /> - </div> + </Wrapper> <CollisionResolveDialog v-if="hasSyncCollission && !readOnly" @resolve-use-this-version="resolveUseThisVersion" @@ -74,7 +69,6 @@ import Vue, { set } from 'vue' import escapeHtml from 'escape-html' import moment from '@nextcloud/moment' -import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip' import { getVersion, receiveTransaction } from 'prosemirror-collab' import { Step } from 'prosemirror-transform' import { getCurrentUser } from '@nextcloud/auth' @@ -105,6 +99,7 @@ import store from './../mixins/store.js' import MenuBar from './Menu/MenuBar.vue' import Content from './Editor/Content.vue' import Status from './Editor/Status.vue' +import Main from './Editor/Main.vue' import Wrapper from './Editor/Wrapper.vue' const EDITOR_PUSH_DEBOUNCE = 200 @@ -114,6 +109,7 @@ export default { components: { DocumentStatus, Wrapper, + Main, Content, MenuBar, MenuBubble: () => import(/* webpackChunkName: "editor-rich" */'./MenuBubble.vue'), @@ -121,9 +117,6 @@ export default { Status, CollisionResolveDialog: () => import(/* webpackChunkName: "editor" */'./CollisionResolveDialog.vue'), }, - directives: { - Tooltip, - }, mixins: [ isMobile, store, @@ -683,33 +676,6 @@ export default { background-color: var(--color-main-background); } - .text-editor__wrapper { - display: flex; - width: 100%; - height: 100%; - overflow: hidden; - position: absolute; - - &.show-color-annotations::v-deep(.author-annotation) { - padding-top: 2px; - padding-bottom: 2px; - } - - &:not(.show-color-annotations)::v-deep(.author-annotation), - &:not(.show-color-annotations)::v-deep(.image) { - background-color: transparent !important; - } - - .ProseMirror { - margin-top: 0 !important; - } - &.icon-loading { - .text-editor__main { - opacity: 0.3; - } - } - } - .document-status { position: relative; background-color: var(--color-main-background); diff --git a/src/components/Editor/Main.vue b/src/components/Editor/Main.vue new file mode 100644 index 000000000..da7c1d134 --- /dev/null +++ b/src/components/Editor/Main.vue @@ -0,0 +1,54 @@ +<!-- + - @copyright Copyright (c) 2022 Max <max@nextcloud.com> + - + - @author Max <max@nextcloud.com> + - + - @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> + <MediaHandler id="editor" + class="text-editor__main"> + <slot /> + </MediaHandler> +</template> + +<script> +import MediaHandler from './MediaHandler.vue' + +export default { + name: 'Main', + components: { + MediaHandler, + }, + +} +</script> + +<style scoped lang="scss"> + .text-editor__main, .editor { + background: var(--color-main-background); + color: var(--color-main-text); + background-clip: padding-box; + border-radius: var(--border-radius); + padding: 0; + position: relative; + overflow-y: auto; + overflow-x: hidden; + width: 100%; + } +</style> diff --git a/src/components/Editor/Wrapper.vue b/src/components/Editor/Wrapper.vue index 4e6037a63..459eb3b96 100644 --- a/src/components/Editor/Wrapper.vue +++ b/src/components/Editor/Wrapper.vue @@ -21,34 +21,82 @@ --> <template> - <MediaHandler id="editor" - class="text-editor__main"> + <div id="editor-wrapper" + class="text-editor__wrapper" + :class="{ + 'has-conflicts': hasSyncCollission, + 'icon-loading': !contentLoaded && !hasConnectionIssue, + 'is-rich-workspace': $isRichWorkspace, + 'is-rich-editor': $isRichEditor, + 'show-color-annotations': showAuthorAnnotations + }"> <slot /> - </MediaHandler> + </div> </template> <script> -import MediaHandler from './MediaHandler.vue' +import { ERROR_TYPE } from './../../services/SyncService.js' +import { useIsRichEditorMixin, useIsRichWorkspaceMixin } from './../Editor.provider.js' export default { name: 'Wrapper', - components: { - MediaHandler, + mixins: [useIsRichEditorMixin, useIsRichWorkspaceMixin], + + props: { + syncError: { + type: Object, + default: null, + }, + hasConnectionIssue: { + type: Boolean, + require: true, + }, + contentLoaded: { + type: Boolean, + require: true, + }, + showAuthorAnnotations: { + type: Boolean, + require: true, + }, + }, + + computed: { + hasSyncCollission() { + return this.syncError && this.syncError.type === ERROR_TYPE.SAVE_COLLISSION + }, }, } </script> <style scoped lang="scss"> - .text-editor__main, .editor { - background: var(--color-main-background); - color: var(--color-main-text); - background-clip: padding-box; - border-radius: var(--border-radius); - padding: 0; - position: relative; - overflow-y: auto; - overflow-x: hidden; + + .text-editor__wrapper { + display: flex; width: 100%; + height: 100%; + overflow: hidden; + position: absolute; + + &.show-color-annotations::v-deep(.author-annotation) { + padding-top: 2px; + padding-bottom: 2px; + } + + &:not(.show-color-annotations)::v-deep(.author-annotation), + &:not(.show-color-annotations)::v-deep(.image) { + background-color: transparent !important; + } + + .ProseMirror { + margin-top: 0 !important; + } + &.icon-loading { + .text-editor__main { + opacity: 0.3; + } + } } + </style> |