grimhilt/mail
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

simplify and composer design

Browse Source
This commit is contained in:
grimhilt
2023-04-15 00:39:24 +02:00
parent 956bc35158
commit e44584df0a
2 changed files with 84 additions and 141 deletions
Download Patch File Download Diff File Expand all files Collapse all files

179
front/src/components/structure/message/Composer.vue
View File

@@ -3,7 +3,7 @@ import imapAPI from "@/services/imapAPI";
import store from "@/store/store";
import StarterKit from "@tiptap/starter-kit";
import { BubbleMenu, useEditor, EditorContent, FloatingMenu } from "@tiptap/vue-3";
import { inject, onBeforeUnmount } from "vue";
import { inject } from "vue";
const editor = useEditor({
extensions: [StarterKit],
@@ -35,120 +35,75 @@ const send = () => {
</script>
<template>
<div v-if="editor">
<bubble-menu class="bubble-menu" :tippy-options="{ duration: 100 }" :editor="editor">
<button
@click="editor.chain().focus().toggleBold().run()"
:class="{ 'is-active': editor.isActive('bold') }"
>
Bold
</button>
<button
@click="editor.chain().focus().toggleItalic().run()"
:class="{ 'is-active': editor.isActive('italic') }"
>
Italic
</button>
<button
@click="editor.chain().focus().toggleStrike().run()"
:class="{ 'is-active': editor.isActive('strike') }"
>
Strike
</button>
</bubble-menu>
<div class="main">
<div v-if="editor">
<bubble-menu class="bubble-menu" :tippy-options="{ duration: 100 }" :editor="editor">
<button
@click="editor.chain().focus().toggleBold().run()"
:class="{ 'is-active': editor.isActive('bold') }"
>
Bold
</button>
<button
@click="editor.chain().focus().toggleItalic().run()"
:class="{ 'is-active': editor.isActive('italic') }"
>
Italic
</button>
<button
@click="editor.chain().focus().toggleStrike().run()"
:class="{ 'is-active': editor.isActive('strike') }"
>
Strike
</button>
</bubble-menu>
<floating-menu class="floating-menu" :tippy-options="{ duration: 100 }" :editor="editor">
<button
@click="editor.chain().focus().toggleHeading({ level: 1 }).run()"
:class="{ 'is-active': editor.isActive('heading', { level: 1 }) }"
>
H1
</button>
<button
@click="editor.chain().focus().toggleHeading({ level: 2 }).run()"
:class="{ 'is-active': editor.isActive('heading', { level: 2 }) }"
>
H2
</button>
<button
@click="editor.chain().focus().toggleBulletList().run()"
:class="{ 'is-active': editor.isActive('bulletList') }"
>
Bullet List
</button>
</floating-menu>
<floating-menu class="floating-menu" :tippy-options="{ duration: 100 }" :editor="editor">
<button
@click="editor.chain().focus().toggleHeading({ level: 1 }).run()"
:class="{ 'is-active': editor.isActive('heading', { level: 1 }) }"
>
H1
</button>
<button
@click="editor.chain().focus().toggleHeading({ level: 2 }).run()"
:class="{ 'is-active': editor.isActive('heading', { level: 2 }) }"
>
H2
</button>
<button
@click="editor.chain().focus().toggleBulletList().run()"
:class="{ 'is-active': editor.isActive('bulletList') }"
>
Bullet List
</button>
</floating-menu>
</div>
<editor-content class="editor" :editor="editor" aria-expanded="false" />
<button @click="send()">SEND</button>
</div>
<editor-content class="editor" :editor="editor" />
<div class="send" @click="send()">SEND</div>
</template>
<style lang="scss">
.send:hover {
background-color: var(--selected);
}
/* Basic editor styles */
.editor {
background-color: var(--secondary-background);
}
.ProseMirror {
> * + * {
margin-top: 0.75em;
}
ul,
ol {
padding: 0 1rem;
}
blockquote {
padding-left: 1rem;
border-left: 2px solid rgba(#0d0d0d, 0.1);
}
}
.bubble-menu {
display: flex;
background-color: #0d0d0d;
padding: 0.2rem;
border-radius: 0.5rem;
button {
border: none;
background: none;
color: #fff;
font-size: 0.85rem;
font-weight: 500;
padding: 0 0.2rem;
opacity: 0.6;
&:hover,
&.is-active {
opacity: 1;
}
}
}
.floating-menu {
display: flex;
background-color: #0d0d0d10;
padding: 0.2rem;
border-radius: 0.5rem;
button {
border: none;
background: none;
font-size: 0.85rem;
font-weight: 500;
padding: 0 0.2rem;
opacity: 0.6;
&:hover,
&.is-active {
opacity: 1;
}
}
<style>
.ProseMirror:focus {
outline: none;
}
</style>
<style lang="scss" scoped>
.main {
display: flex;
flex-direction: row;
padding: 10px;
}
.editor {
background-color: var(--secondary-background);
flex: 1;
margin-right: 10px;
border-radius: 10px;
padding: 0 10px;
line-height: 0.6rem;
}
</style>