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

101
src/presentation/components/Scripts/Menu/Selector/TheSelector.vue
View File

@@ -1,49 +1,73 @@
<template>
<MenuOptionList label="Select">
<MenuOptionListItem
label="None"
:enabled="currentSelection !== SelectionType.None"
@click="selectType(SelectionType.None)"
v-tooltip="
'Deselect all selected scripts.<br/>'
+ '💡 Good start to dive deeper into tweaks and select only what you want.'
"
/>
<MenuOptionListItem
label="Standard"
:enabled="currentSelection !== SelectionType.Standard"
@click="selectType(SelectionType.Standard)"
v-tooltip="
'🛡️ Balanced for privacy and functionality.<br/>'
+ 'OS and applications will function normally.<br/>'
+ '💡 Recommended for everyone'"
/>
<MenuOptionListItem
label="Strict"
:enabled="currentSelection !== SelectionType.Strict"
@click="selectType(SelectionType.Strict)"
v-tooltip="
'🚫 Stronger privacy, disables risky functions that may leak your data.<br/>'
+ '⚠️ Double check to remove scripts where you would trade functionality for privacy<br/>'
+ '💡 Recommended for daily users that prefers more privacy over non-essential functions'
"
/>
<MenuOptionListItem
label="All"
:enabled="currentSelection !== SelectionType.All"
@click="selectType(SelectionType.All)"
v-tooltip="
'🔒 Strongest privacy, disabling any functionality that may leak your data.<br/>'
+ '🛑 Not designed for daily users, it will break important functionalities.<br/>'
+ '💡 Only recommended for extreme use-cases like crime labs where no leak is acceptable'
"
/>
<TooltipWrapper>
<!-- None -->
<MenuOptionListItem
label="None"
:enabled="currentSelection !== SelectionType.None"
@click="selectType(SelectionType.None)"
/>
<template v-slot:tooltip>
Deselect all selected scripts.
<br />
💡 Good start to dive deeper into tweaks and select only what you want.
</template>
</TooltipWrapper>
<!-- Standard -->
<TooltipWrapper>
<MenuOptionListItem
label="Standard"
:enabled="currentSelection !== SelectionType.Standard"
@click="selectType(SelectionType.Standard)"
/>
<template v-slot:tooltip>
🛡️ Balanced for privacy and functionality.
<br />
OS and applications will function normally.
<br />
💡 Recommended for everyone
</template>
</TooltipWrapper>
<!-- Strict -->
<TooltipWrapper>
<MenuOptionListItem
label="Strict"
:enabled="currentSelection !== SelectionType.Strict"
@click="selectType(SelectionType.Strict)"
/>
<template v-slot:tooltip>
🚫 Stronger privacy, disables risky functions that may leak your data.
<br />
⚠️ Double check to remove scripts where you would trade functionality for privacy
<br />
💡 Recommended for daily users that prefers more privacy over non-essential functions
</template>
</TooltipWrapper>
<!-- All -->
<TooltipWrapper>
<MenuOptionListItem
label="All"
:enabled="currentSelection !== SelectionType.All"
@click="selectType(SelectionType.All)"
/>
<template v-slot:tooltip>
🔒 Strongest privacy, disabling any functionality that may leak your data.
<br />
🛑 Not designed for daily users, it will break important functionalities.
<br />
💡 Only recommended for extreme use-cases like crime labs where no leak is acceptable
</template>
</TooltipWrapper>
</MenuOptionList>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
import { useCollectionState } from '@/presentation/components/Shared/Hooks/UseCollectionState';
import TooltipWrapper from '@/presentation/components/Shared/TooltipWrapper.vue';
import { ICategoryCollectionState } from '@/application/Context/State/ICategoryCollectionState';
import MenuOptionList from '../MenuOptionList.vue';
import MenuOptionListItem from '../MenuOptionListItem.vue';
@@ -53,6 +77,7 @@ export default defineComponent({
components: {
MenuOptionList,
MenuOptionListItem,
TooltipWrapper,
},
setup() {
const { modifyCurrentState, onStateChange, events } = useCollectionState();