44r0n7/privacy.sexy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor usage of tooltips for flexibility

Browse Source 
This commit introduces a new Vue component to handle tooltips. It acts
as a wrapper for the `v-tooltip`. It enhances the maintainability,
readability and portability of tooltips by enabling the direct inclusion
of inline HTML in the tooltip components. It solves issues such as
absence of linting or editor support and cumbersome string
concatenation.

It also provides an abstraction layer that simplifies the switching
between different tooltip implementations, which would allow a smooth
migration to Vue 3 (see #230).
This commit is contained in:
undergroundwires
2023-08-12 16:53:58 +02:00
parent 9e5491fdbf
commit bc91237d7c
5 changed files with 171 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
src/presentation/components/Code/CodeButtons/Instructions/InstructionList.vue
View File

@@ -26,21 +26,27 @@
>
<div class="step__action">
<span>{{ step.action.instruction }}</span>
<font-awesome-icon
v-if="step.action.details"
class="explanation"
:icon="['fas', 'info-circle']"
v-tooltip.top-center="step.action.details"
/>
<TooltipWrapper v-if="step.action.details">
<font-awesome-icon
class="explanation"
:icon="['fas', 'info-circle']"
/>
<template v-slot:tooltip>
<div v-html="step.action.details" />
</template>
</TooltipWrapper>
</div>
<div v-if="step.code" class="step__code">
<CodeInstruction>{{ step.code.instruction }}</CodeInstruction>
<font-awesome-icon
v-if="step.code.details"
class="explanation"
:icon="['fas', 'info-circle']"
v-tooltip.top-center="step.code.details"
/>
<TooltipWrapper v-if="step.code.details">
<font-awesome-icon
class="explanation"
:icon="['fas', 'info-circle']"
/>
<template v-slot:tooltip>
<div v-html="step.code.details" />
</template>
</TooltipWrapper>
</div>
</li>
</ol>
@@ -53,6 +59,7 @@ import {
defineComponent, PropType, computed,
} from 'vue';
import { OperatingSystem } from '@/domain/OperatingSystem';
import TooltipWrapper from '@/presentation/components/Shared/TooltipWrapper.vue';
import { useApplication } from '@/presentation/components/Shared/Hooks/UseApplication';
import CodeInstruction from './CodeInstruction.vue';
import { IInstructionListData } from './InstructionListData';
@@ -60,6 +67,7 @@ import { IInstructionListData } from './InstructionListData';
export default defineComponent({
components: {
CodeInstruction,
TooltipWrapper,
},
props: {
data: {