diff options
| -rw-r--r-- | css/prosemirror.scss | 5 | ||||
| -rw-r--r-- | src/components/EditorWrapper.vue | 3 | ||||
| -rw-r--r-- | src/views/RichWorkspace.vue | 28 |
3 files changed, 16 insertions, 20 deletions
diff --git a/css/prosemirror.scss b/css/prosemirror.scss index 7b47a6e9d..b9e58a7af 100644 --- a/css/prosemirror.scss +++ b/css/prosemirror.scss @@ -1,5 +1,5 @@ /* Document rendering styles */ -.ProseMirror { +div.ProseMirror { margin-top: 44px; height: 100%; position: relative; @@ -21,6 +21,7 @@ opacity: 1; -webkit-user-select: text; user-select: text; + font-size: 14px; } p:first-child, @@ -208,7 +209,7 @@ .editor__content p.is-empty:first-child::before { content: attr(data-empty-text); float: left; - color: #aaa; + color: var(--color-text-maxcontrast); pointer-events: none; height: 0; font-style: italic; diff --git a/src/components/EditorWrapper.vue b/src/components/EditorWrapper.vue index 9de97bdfa..f5181101f 100644 --- a/src/components/EditorWrapper.vue +++ b/src/components/EditorWrapper.vue @@ -49,8 +49,7 @@ <MenuBubble v-if="!readOnly && isRichEditor" :editor="tiptap" /> <EditorContent v-show="initialLoading" class="editor__content" - :editor="tiptap" - spellcheck="false" /> + :editor="tiptap" /> </div> </div> <ReadOnlyEditor v-if="hasSyncCollission" diff --git a/src/views/RichWorkspace.vue b/src/views/RichWorkspace.vue index ed7dd7223..154034157 100644 --- a/src/views/RichWorkspace.vue +++ b/src/views/RichWorkspace.vue @@ -22,9 +22,13 @@ <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 v-if="!file || (autofocus && !ready)" class="empty-workspace" @click="createNew"> + <i>{{ t('text', 'Click to enter notes, lists or links …') }}</i> </div> + <div v-if="(file && !ready)" class="empty-workspace"> + <i>{{ t('text', 'Write something …') }}</i> + </div> + <EditorWrapper v-if="file" v-show="ready" :key="file.id" @@ -92,11 +96,14 @@ export default { <style scoped> #rich-workspace { - padding: 20px; - min-height: 141px; + padding: 0 20px; + min-height: 90px; } .empty-workspace { - opacity: 0.7; + margin-top: 54px; + color: var(--color-text-maxcontrast); + height: 0; + font-style: italic; } #rich-workspace::v-deep div[contenteditable=false] { width: 100%; @@ -106,10 +113,6 @@ export default { border: none; } - #rich-workspace::v-deep #read-only-editor { - margin-top: 44px; - } - #rich-workspace::v-deep #editor-container { height: 100%; position: unset !important; @@ -132,11 +135,4 @@ export default { 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> |