From 963b99183e6b75680baacde4ae3f4f3df2dcf86b Mon Sep 17 00:00:00 2001 From: Benjamin VIELLARD Date: Wed, 13 Dec 2023 16:04:23 +0100 Subject: [PATCH] feat: icons in bubble menu #26 --- .changeset/six-boxes-wait.md | 5 ++++ src/tiptap-editor.vue | 47 ++++++++++++++++++++++++++++++------ 2 files changed, 44 insertions(+), 8 deletions(-) create mode 100644 .changeset/six-boxes-wait.md diff --git a/.changeset/six-boxes-wait.md b/.changeset/six-boxes-wait.md new file mode 100644 index 0000000..ef06aea --- /dev/null +++ b/.changeset/six-boxes-wait.md @@ -0,0 +1,5 @@ +--- +"@bicou/directus-extension-tiptap": minor +--- + +icons in bubble menu #26 diff --git a/src/tiptap-editor.vue b/src/tiptap-editor.vue index 206f6f8..0adc477 100644 --- a/src/tiptap-editor.vue +++ b/src/tiptap-editor.vue @@ -3,27 +3,43 @@ - {{ t("wysiwyg_options.bold").toLowerCase() }} + + + + - {{ t("wysiwyg_options.italic").toLowerCase() }} + - {{ t("wysiwyg_options.strikethrough").toLowerCase() }} + @@ -749,14 +765,29 @@ } &__bubble { + --v-icon-size: 18px; + --v-chip-color: var(--theme--border-color-accent); + --v-chip-background-color: var(--theme--border-color-accent); + --v-chip-color-hover: var(--theme--border-color-accent); + --v-chip-background-color-hover: var(--theme--border-color-accent); + .v-chip { - margin-left: 2px; + margin-left: 1px; cursor: pointer; &.outlined { - background-color: var(--theme--background); + background-color: var(--theme--form--field--input--background-subdued); } } + + .icon { + display: inline-block; + width: var(--v-icon-size, 24px); + min-width: var(--v-icon-size, 24px); + height: var(--v-icon-size, 24px); + color: var(--theme--foreground, currentColor); + fill: var(--theme--foreground, currentColor); + } } &__content {