diff options
Diffstat (limited to 'src/tools')
5 files changed, 41 insertions, 90 deletions
diff --git a/src/tools/benchmark-builder/dynamic-values.vue b/src/tools/benchmark-builder/dynamic-values.vue index 975a545..e048ef9 100644 --- a/src/tools/benchmark-builder/dynamic-values.vue +++ b/src/tools/benchmark-builder/dynamic-values.vue @@ -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"> diff --git a/src/tools/html-wysiwyg-editor/editor/menu-bar-item.vue b/src/tools/html-wysiwyg-editor/editor/menu-bar-item.vue index 9a4cf1b..5be2329 100644 --- a/src/tools/html-wysiwyg-editor/editor/menu-bar-item.vue +++ b/src/tools/html-wysiwyg-editor/editor/menu-bar-item.vue @@ -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> diff --git a/src/tools/otp-code-generator-and-validator/otp-code-generator-and-validator.vue b/src/tools/otp-code-generator-and-validator/otp-code-generator-and-validator.vue index 7b26a09..6bd881c 100644 --- a/src/tools/otp-code-generator-and-validator/otp-code-generator-and-validator.vue +++ b/src/tools/otp-code-generator-and-validator/otp-code-generator-and-validator.vue @@ -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"> diff --git a/src/tools/otp-code-generator-and-validator/token-display.vue b/src/tools/otp-code-generator-and-validator/token-display.vue index 5313b0b..317f083 100644 --- a/src/tools/otp-code-generator-and-validator/token-display.vue +++ b/src/tools/otp-code-generator-and-validator/token-display.vue @@ -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> diff --git a/src/tools/user-agent-parser/user-agent-result-cards.vue b/src/tools/user-agent-parser/user-agent-result-cards.vue index ed4724c..eeea073 100644 --- a/src/tools/user-agent-parser/user-agent-result-cards.vue +++ b/src/tools/user-agent-parser/user-agent-result-cards.vue @@ -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> |