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

add tooltip on composer

Browse Source
This commit is contained in:
grimhilt
2023-04-26 12:56:58 +02:00
parent dc20ccfec0
commit 10fc3fd628
10 changed files with 2381 additions and 127 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
front/src/App.vue
View File

@@ -1,5 +1,6 @@
<script setup>
import { RouterView } from "vue-router";
import Sidebar from "./views/sidebar/Sidebar";
</script>
<template>
@@ -9,17 +10,6 @@ import { RouterView } from "vue-router";
</div>
</template>
<script>
import Sidebar from "./views/sidebar/Sidebar";
export default {
name: "App",
components: {
Sidebar,
},
};
</script>
<style>
#app {
display: flex;

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

@@ -100,27 +100,31 @@ function sendMessage() {
svg="bold"
@click="editor.chain().focus().toggleBold().run()"
:class="[{ 'is-active': editor.isActive('bold') }, 'editorOption']"
v-tooltip="{ text: 'Bold', shortcut: ['Ctrl', 'B'] }"
/>
<SvgLoader
svg="italic"
@click="editor.chain().focus().toggleItalic().run()"
:class="[{ 'is-active': editor.isActive('italic') }, 'editorOption']"
v-tooltip="'Italic'"
v-tooltip="{ text: 'Italic', shortcut: ['Ctrl', 'I'] }"
/>
<SvgLoader
svg="strikethrough"
@click="editor.chain().focus().toggleStrike().run()"
:class="[{ 'is-active': editor.isActive('strike') }, 'editorOption']"
v-tooltip="{ text: 'Strike', shortcut: ['Ctrl', 'Shift', 'X'] }"
/>
<SvgLoader
svg="underline"
@click="editor.chain().focus().toggleUnderline().run()"
:class="[{ 'is-active': editor.isActive('underline') }, 'editorOption']"
v-tooltip="{ text: 'Underline', shortcut: ['Ctrl', 'U'] }"
/>
<SvgLoader
svg="font-color"
@click="editor.commands.toggleHighlight({ color: '#ffcc00' })"
:class="[{ 'is-active': editor.isActive('highlight') }, 'editorOption']"
v-tooltip="{ text: 'Highlight', shortcut: ['Ctrl', 'Shift', 'H'] }"
/>
</span>
<span class="category">
@@ -128,16 +132,19 @@ function sendMessage() {
svg="h-2"
@click="editor.chain().focus().toggleHeading({ level: 2 }).run()"
:class="[{ 'is-active': editor.isActive({ level: 2 }) }, 'editorOption']"
v-tooltip="{ text: 'Heading 2', shortcut: ['Ctrl', 'Alt', '2'] }"
/>
<SvgLoader
svg="h-3"
@click="editor.chain().focus().toggleHeading({ level: 3 }).run()"
:class="[{ 'is-active': editor.isActive({ level: 3 }) }, 'editorOption']"
v-tooltip="{ text: 'Heading 3', shortcut: ['Ctrl', 'Alt', '3'] }"
/>
<SvgLoader
svg="h-4"
@click="editor.chain().focus().toggleHeading({ level: 4 }).run()"
:class="[{ 'is-active': editor.isActive({ level: 4 }) }, 'editorOption']"
v-tooltip="{ text: 'Heading 4', shortcut: ['Ctrl', 'Alt', '4'] }"
/>
</span>
<!-- <SvgLoader
@@ -150,11 +157,13 @@ function sendMessage() {
svg="list-ordered"
@click="editor.chain().focus().toggleOrderedList().run()"
:class="[{ 'is-active': editor.isActive('orderedList') }, 'editorOption']"
v-tooltip="{ text: 'Ordered List', shortcut: ['Ctrl', 'Alt', '7'] }"
/>
<SvgLoader
svg="list-unordered"
@click="editor.chain().focus().toggleBulletList().run()"
:class="[{ 'is-active': editor.isActive('bulletList') }, 'editorOption']"
v-tooltip="{ text: 'Unordered List', shortcut: ['Ctrl', 'Alt', '8'] }"
/>
</span>
<span class="category">
@@ -162,21 +171,25 @@ function sendMessage() {
svg="align-left"
@click="editor.chain().focus().setTextAlign('left').run()"
:class="[{ 'is-active': editor.isActive({ textAlign: 'left' }) }, 'editorOption']"
v-tooltip="{ text: 'Align Left', shortcut: ['Ctrl', 'Shift', 'L'] }"
/>
<SvgLoader
svg="align-center"
@click="editor.chain().focus().setTextAlign('center').run()"
:class="[{ 'is-active': editor.isActive({ textAlign: 'center' }) }, 'editorOption']"
v-tooltip="{ text: 'Align Left', shortcut: ['Ctrl', 'Shift', 'E'] }"
/>
<SvgLoader
svg="align-right"
@click="editor.chain().focus().setTextAlign('right').run()"
:class="[{ 'is-active': editor.isActive({ textAlign: 'right' }) }, 'editorOption']"
v-tooltip="{ text: 'Align Left', shortcut: ['Ctrl', 'Shift', 'R'] }"
/>
<SvgLoader
svg="align-justify"
@click="editor.chain().focus().setTextAlign('justify').run()"
:class="[{ 'is-active': editor.isActive({ textAlign: 'justify' }) }, 'editorOption']"
v-tooltip="{ text: 'Align Left', shortcut: ['Ctrl', 'Shift', 'J'] }"
/>
</span>
@@ -196,12 +209,14 @@ function sendMessage() {
@click="!$event.disabled ? editor.chain().focus().sinkListItem('listItem').run() : ''"
:class="[{ disabled: !editor.can().sinkListItem('listItem') }, 'editorOption']"
:isDisabled="!editor.can().sinkListItem('listItem')"
v-tooltip="{ text: 'Sink Item', shortcut: ['Tab'] }"
/>
<SvgLoader
svg="indent-decrease"
@click="!$event.disabled ? editor.chain().focus().liftListItem('listItem').run() : ''"
:class="[{ disabled: !editor.can().liftListItem('listItem') }, 'editorOption']"
:isDisabled="!editor.can().liftListItem('listItem')"
v-tooltip="{ text: 'Lift Item', shortcut: ['Shift', 'Tab'] }"
/>
</span>
<!-- <SvgLoader

15
front/src/components/Tooltip.ts → front/src/components/tooltip/Tooltip.ts
View File

@@ -1,21 +1,26 @@
import { DirectiveBinding, ObjectDirective, VNode } from "vue";
import { DirectiveBinding, ObjectDirective } from "vue";
import { createPopper } from "@popperjs/core";
import { createApp } from "vue";
import Tooltip from "./Tooltip.vue";
const VTooltip: ObjectDirective = {
mounted(el: HTMLElement, binding: DirectiveBinding<any>) {
const tooltipText = binding.value;
const tooltip = document.createElement("div");
tooltip.innerText = tooltipText;
tooltip.classList.add("tooltip");
tooltip.style.position = "absolute";
el.appendChild(tooltip);
const tooltipText = binding.value?.text ?? binding.value;
createApp(Tooltip, { text: tooltipText, shortcut: binding.value?.shortcut }).mount(tooltip);
tooltip.style.display = "none";
const popper = createPopper(el, tooltip, {
createPopper(el, tooltip, {
placement: "top",
modifiers: [
{
name: "offset",
options: {
offset: [0, 8],
offset: [0, 14],
},
},
],

45
front/src/components/tooltip/Tooltip.vue Normal file
View File

@@ -0,0 +1,45 @@
<script setup>
import { defineProps, PropType } from "vue";
const props = defineProps({ text: String, shortcut: Array });
console.log(props.shortcut.join());
</script>
<template>
<div class="tooltip">
<div>
<b>{{ props.text }}</b>
</div>
<div v-if="props.shortcut" class="shortcut">
<span v-for="(code, index) in props.shortcut" :key="index">{{ code }}</span>
</div>
</div>
</template>
<style scoped>
.tooltip {
background-color: var(--primary-background);
border: solid 1px var(--border-color);
padding: 4px;
text-align: center;
border-radius: 6px;
}
.shortcut {
margin: 2px;
display: flex;
flex-direction: row;
gap: 3px;
justify-content: center;
}
span {
display: inline-block;
border: solid 1px var(--quaternary-background);
border-bottom-width: 3px;
border-radius: 3px;
color: var(--secondary-text);
background-color: var(--secondary-background);
font-size: 1.3rem;
padding: 0.18rem 0.31rem;
}
</style>

2
front/src/main.ts
View File

@@ -3,7 +3,7 @@ import router from "./router";
import App from "./App.vue";
import store from "./store/store";
import "@/assets/css/main.css";
import VTooltip from "./components/Tooltip";
import VTooltip from "./components/tooltip/Tooltip";
const app = createApp(App);
app.use(router);

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

@@ -60,7 +60,7 @@ provide("room", room);
@open-message-view="(id) => openMessageView(id)"
/>
</div>
<Composer v-if="shouldDisplayComposer()" />
<Composer v-if="shouldDisplayComposer() || true" />
<MessageViewModal :message="message" :messageId="messageIdView" @close="() => openMessageView(-1)" />
</div>
</template>