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
Show Stats 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>

46
front/src/views/room/RoomView.vue
View File

@ -49,50 +49,38 @@ provide("room", room);
</script>
<template>
<div id="main">
<div class="container">
<Header :id="id" :room="room"></Header>
<div id="RoomViewBody">
<div class="content">
<Message
v-for="(message, index) in store.getters.messages(room?.id)"
:key="index"
:msg="message"
:members="room?.members"
@open-message-view="(id) => openMessageView(id)"
/>
</div>
<Composer class="composer" v-if="shouldDisplayComposer()" />
<div class="messages">
<Message
v-for="(message, index) in store.getters.messages(room?.id)"
:key="index"
:msg="message"
:members="room?.members"
@open-message-view="(id) => openMessageView(id)"
/>
</div>
<Composer class="composer" v-if="shouldDisplayComposer()" />
<MessageViewModal :message="message" :messageId="messageIdView" @close="() => openMessageView(-1)" />
</div>
</template>
<style scoped>
#main {
.container {
display: flex;
flex-direction: column;
background-color: var(--primary-background);
color: var(--primary-text);
height: 100vh;
width: 100%;
}
#RoomViewBody {
display: flex;
flex-direction: column;
height: 100%;
.messages {
flex-grow: 1;
}
.composer {
position: absolute;
bottom: 0;
width: 100%;
padding-top: 10px;
height: 35px;
}
.content {
display: flex;
flex-direction: column-reverse;
overflow: auto;
margin-bottom: 60px;
align-items: center;
}
</style>