add tooltip on composer
This commit is contained in:
grimhilt
@@ -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
|
||||
|
||||
@@ -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
45
front/src/components/tooltip/Tooltip.vue
Normal 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>
|
||||
Reference in New Issue
Block a user