diff options
| author |  Corentin THOMASSET <corentin.thomasset74@gmail.com>
| 2023-10-14 18:24:54 +0200 |
|---|---|---|
| committer |  GitHub <noreply@github.com>
| 2023-10-14 16:24:54 +0000 |
| commit | 025f556023c29f8f31dc00870c80a9d790bbb2f4 (patch) | |
| tree | 2886353373cc17b24f97c31f6e8880fd335c443c /src/components/TextareaCopyable.vue | |
| parent | 2d2dffb14a2b51f931934055b5a59e51a070ff93 (diff) | |
| download | it-tools-025f556023c29f8f31dc00870c80a9d790bbb2f4.tar.gz it-tools-025f556023c29f8f31dc00870c80a9d790bbb2f4.tar.zst it-tools-025f556023c29f8f31dc00870c80a9d790bbb2f4.zip | |
refactor(ui): switched naive tooltip components to custom ones (#661)
Diffstat (limited to 'src/components/TextareaCopyable.vue')
| -rw-r--r-- | src/components/TextareaCopyable.vue | 40 |
1 files changed, 8 insertions, 32 deletions
diff --git a/src/components/TextareaCopyable.vue b/src/components/TextareaCopyable.vue index b349d04..8b0aae6 100644 --- a/src/components/TextareaCopyable.vue +++ b/src/components/TextareaCopyable.vue @@ -40,7 +40,7 @@ const tooltipText = computed(() => isJustCopied.value ? 'Copied!' : copyMessage. <template> <div style="overflow-x: hidden; width: 100%"> - <c-card class="result-card"> + <c-card relative> <n-scrollbar x-scrollable trigger="none" @@ -50,16 +50,13 @@ const tooltipText = computed(() => isJustCopied.value ? 'Copied!' : copyMessage. <n-code :code="value" :language="language" :trim="false" data-test-id="area-content" /> </n-config-provider> </n-scrollbar> - <n-tooltip v-if="value" trigger="hover"> - <template #trigger> - <div class="copy-button" :class="[copyPlacement]"> - <c-button circle important:h-10 important:w-10 @click="copy()"> - <n-icon size="22" :component="Copy" /> - </c-button> - </div> - </template> - <span>{{ tooltipText }}</span> - </n-tooltip> + <div absolute right-10px top-10px> + <c-tooltip v-if="value" :tooltip="tooltipText" position="left"> + <c-button circle important:h-10 important:w-10 @click="copy()"> + <n-icon size="22" :component="Copy" /> + </c-button> + </c-tooltip> + </div> </c-card> <div v-if="copyPlacement === 'outside'" mt-4 flex justify-center> <c-button @click="copy()"> @@ -74,25 +71,4 @@ const tooltipText = computed(() => isJustCopied.value ? 'Copied!' : copyMessage. padding-bottom: 10px; margin-bottom: -10px; } -.result-card { - position: relative; - .copy-button { - position: absolute; - opacity: 1; - - &.top-right { - top: 10px; - right: 10px; - } - - &.bottom-right { - bottom: 10px; - right: 10px; - } - &.outside, - &.none { - display: none; - } - } -} </style> |