mirrors/it-tools
1
0
Fork 0
mirror of https://github.com/CorentinTh/it-tools.git synced 2025-04-24 08:46:15 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

refactor(ui): switched naive tooltip components to custom ones (#661)

Browse source
This commit is contained in:
Corentin THOMASSET 2023-10-14 18:24:54 +02:00 • committed by GitHub
parent 2d2dffb14a
commit 025f556023
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
15 changed files with 177 additions and 243 deletions
Download patch file Download diff file Expand all files Collapse all files

13
src/tools/benchmark-builder/dynamic-values.vue
View file

@ -39,14 +39,11 @@ function onInputEnter(index: number) {
autofocus
@keydown.enter="onInputEnter(index)"
/>
<n-tooltip>
<template #trigger>
<c-button circle variant="text" @click="values.splice(index, 1)">
<n-icon :component="Trash" depth="3" size="18" />
</c-button>
</template>
Delete value
</n-tooltip>
<c-tooltip tooltip="Delete this value">
<c-button circle variant="text" @click="values.splice(index, 1)">
<n-icon :component="Trash" depth="3" size="18" />
</c-button>
</c-tooltip>
</div>
<c-button @click="addValue">

14
src/tools/html-wysiwyg-editor/editor/menu-bar-item.vue
View file

@ -6,13 +6,9 @@ const { icon, title, action, isActive } = toRefs(props);
</script>
<template>
<n-tooltip trigger="hover">
<template #trigger>
<c-button circle variant="text" :type="isActive?.() ? 'primary' : 'default'" @click="action">
<n-icon :component="icon" />
</c-button>
</template>
{{ title }}
</n-tooltip>
<c-tooltip :tooltip="title">
<c-button circle variant="text" :type="isActive?.() ? 'primary' : 'default'" @click="action">
<n-icon :component="icon" />
</c-button>
</c-tooltip>
</template>

15
src/tools/otp-code-generator-and-validator/otp-code-generator-and-validator.vue
View file

@ -61,19 +61,16 @@ const secretValidationRules = [
:validation-rules="secretValidationRules"
>
<template #suffix>
<n-tooltip trigger="hover">
<template #trigger>
<c-button circle variant="text" size="small" @click="refreshSecret">
<icon-mdi-refresh />
</c-button>
</template>
Generate secret token
</n-tooltip>
<c-tooltip tooltip="Generate a new random secret">
<c-button circle variant="text" size="small" @click="refreshSecret">
<icon-mdi-refresh />
</c-button>
</c-tooltip>
</template>
</c-input-text>
<div>
<TokenDisplay :tokens="tokens" style="margin-top: 2px" />
<TokenDisplay :tokens="tokens" />
<n-progress :percentage="(100 * interval) / 30" :color="theme.primaryColor" :show-indicator="false" />
<div style="text-align: center">

76
src/tools/otp-code-generator-and-validator/token-display.vue
View file

@ -11,7 +11,7 @@ const { tokens } = toRefs(props);
<template>
<div>
<div class="labels" w-full flex items-center>
<div mb-5px w-full flex items-center>
<div flex-1 text-left>
Previous
</div>
@ -22,60 +22,24 @@ const { tokens } = toRefs(props);
Next
</div>
</div>
<n-input-group>
<n-tooltip trigger="hover" placement="bottom">
<template #trigger>
<c-button important:h-12 data-test-id="previous-otp" @click.prevent="copyPrevious(tokens.previous)">
{{ tokens.previous }}
</c-button>
</template>
<div>{{ previousCopied ? 'Copied !' : 'Copy previous OTP' }}</div>
</n-tooltip>
<n-tooltip trigger="hover" placement="bottom">
<template #trigger>
<c-button
data-test-id="current-otp"
class="current-otp"
important:h-12
@click.prevent="copyCurrent(tokens.current)"
>
{{ tokens.current }}
</c-button>
</template>
<div>{{ currentCopied ? 'Copied !' : 'Copy current OTP' }}</div>
</n-tooltip>
<n-tooltip trigger="hover" placement="bottom">
<template #trigger>
<c-button important:h-12 data-test-id="next-otp" @click.prevent="copyNext(tokens.next)">
{{
tokens.next
}}
</c-button>
</template>
<div>{{ nextCopied ? 'Copied !' : 'Copy next OTP' }}</div>
</n-tooltip>
</n-input-group>
<div flex items-center>
<c-tooltip :tooltip="previousCopied ? 'Copied !' : 'Copy previous OTP'" position="bottom" flex-1>
<c-button data-test-id="previous-otp" w-full important:h-12 important:rounded-r-none important:font-mono @click.prevent="copyPrevious(tokens.previous)">
{{ tokens.previous }}
</c-button>
</c-tooltip>
<c-tooltip :tooltip="currentCopied ? 'Copied !' : 'Copy current OTP'" position="bottom" flex-1 flex-basis-5xl>
<c-button
data-test-id="current-otp" w-full important:border-x="1px solid gray op-40" important:h-12 important:rounded-0 important:text-22px @click.prevent="copyCurrent(tokens.current)"
>
{{ tokens.current }}
</c-button>
</c-tooltip>
<c-tooltip :tooltip="nextCopied ? 'Copied !' : 'Copy next OTP'" position="bottom" flex-1>
<c-button data-test-id="next-otp" w-full important:h-12 important:rounded-l-none @click.prevent="copyNext(tokens.next)">
{{ tokens.next }}
</c-button>
</c-tooltip>
</div>
</div>
</template>
<style scoped lang="less">
.current-otp {
font-size: 22px;
flex: 1 0 35% !important;
}
.n-button {
height: 45px;
}
.labels {
div {
padding: 0 2px 6px 2px;
line-height: 1.25;
}
}
.n-input-group > * {
flex: 1 0 0;
}
</style>

13
src/tools/user-agent-parser/user-agent-result-cards.vue
View file

@ -25,14 +25,11 @@ const { userAgentInfo, sections } = toRefs(props);
<div mt-5 flex gap-2>
<span v-for="{ label, getValue } in content" :key="label">
<n-tooltip v-if="getValue(userAgentInfo)" trigger="hover">
<template #trigger>
<n-tag type="success" size="large" round :bordered="false">
{{ getValue(userAgentInfo) }}
</n-tag>
</template>
{{ label }}
</n-tooltip>
<c-tooltip v-if="getValue(userAgentInfo)" :tooltip="label">
<n-tag type="success" size="large" round :bordered="false">
{{ getValue(userAgentInfo) }}
</n-tag>
</c-tooltip>
</span>
</div>
<div flex flex-col>