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

Bump Vue to latest and fix universal selector CSS

Browse Source 
This commit updates the Vue package from v3.4.21 to v3.4.27.

This version change addressed styling issues introduced by changes in
CSS universal selector handling in Vue 3.4.22.
The change that has caused this:
- vuejs/core#10551
- vuejs/core#10548
- vuejs/core@54a6afa75a

This commit fixes two main issues that this has led to:

1. Universal CSS selector causing 'Revert' buttons to stretch and
   truncate incorrectly.
   This is fixed by modifying selectors to apply styles more
   specifically, maintaining correct display of toggle buttons.
2. Universal `*` selector that's used to understand parent HTML
   structure causing information tooltip icons to be misaligned.
   This is fixed by replacing `*` with a new `InfoTooltipWrapper`
   component, which manages layout concerns more explicitly and
   maintainably.
This commit is contained in:
undergroundwires
2024-05-19 15:02:38 +02:00
parent 2390530d92
commit aae5434451
9 changed files with 305 additions and 266 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src/presentation/components/Code/CodeButtons/Save/RunInstructions/InfoTooltip.vue → src/presentation/components/Code/CodeButtons/Save/RunInstructions/Help/InfoTooltipInline.vue
View File

@@ -1,5 +1,7 @@
<template>
<span class="info-container">
<span
class="info-container"
>
<TooltipWrapper>
<AppIcon icon="circle-info" />
<template #tooltip>
@@ -19,27 +21,17 @@ export default defineComponent({
TooltipWrapper,
AppIcon,
},
props: {
hasLeftMargin: {
type: Boolean,
default: false,
},
},
});
</script>
<style scoped lang="scss">
@use "@/presentation/assets/styles/main" as *;
@mixin apply-style-when-placed-after-non-text {
* + & {
@content;
}
}
<style lang="scss">
.info-container {
vertical-align: text-top;
* + & { // If it's followed by any other element
vertical-align: middle;
@include set-property-ch-value-with-fallback(
$property: margin-left,
$value-in-ch: 0.5,
)
}
}
</style>

36
src/presentation/components/Code/CodeButtons/Save/RunInstructions/Help/InfoTooltipWrapper.vue Normal file
View File

@@ -0,0 +1,36 @@
<template>
<span class="info-tooltip-wrapper">
<span>
<slot />
</span>
<span>
<InfoTooltipInline>
<slot name="info" />
</InfoTooltipInline>
</span>
</span>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import InfoTooltipInline from './InfoTooltipInline.vue';
export default defineComponent({
components: {
InfoTooltipInline,
},
});
</script>
<style lang="scss">
@use "@/presentation/assets/styles/main" as *;
.info-tooltip-wrapper {
display: flex;
align-items: center;
@include set-property-ch-value-with-fallback(
$property: gap,
$value-in-ch: 0.5,
)
}
</style>

6
src/presentation/components/Code/CodeButtons/Save/RunInstructions/RunInstructions.vue
View File

@@ -17,7 +17,7 @@
<p>
This requires you to do additional manual
steps. If you are unsure how to follow the instructions, tap or hover on information
<InfoTooltip>Engage with icons like this for extra wisdom!</InfoTooltip>
<InfoTooltipInline>Engage with icons like this for extra wisdom!</InfoTooltipInline>
icons near the steps, or follow the easy alternative described above.
</p>
<p>
@@ -32,12 +32,12 @@ import { defineComponent, computed } from 'vue';
import { injectKey } from '@/presentation/injectionSymbols';
import { OperatingSystem } from '@/domain/OperatingSystem';
import { getOperatingSystemDisplayName } from '@/presentation/components/Shared/OperatingSystemNames';
import InfoTooltip from './InfoTooltip.vue';
import InfoTooltipInline from './Help/InfoTooltipInline.vue';
import PlatformInstructionSteps from './Steps/PlatformInstructionSteps.vue';
export default defineComponent({
components: {
InfoTooltip,
InfoTooltipInline,
PlatformInstructionSteps,
},
props: {

119
src/presentation/components/Code/CodeButtons/Save/RunInstructions/Steps/Platforms/LinuxInstructions.vue
View File

@@ -2,7 +2,7 @@
<InstructionSteps>
<InstructionStep>
Download the file.
<InfoTooltip>
<InfoTooltipInline>
<p>
You should have already been prompted to save the script file.
</p>
@@ -10,11 +10,11 @@
If this was not the case or you did not save the script when prompted,
please try to download your script file again.
</p>
</InfoTooltip>
</InfoTooltipInline>
</InstructionStep>
<InstructionStep>
Open terminal.
<InfoTooltip>
<InfoTooltipInline>
<p>
Opening terminal changes based on the distro you run.
</p>
@@ -39,30 +39,32 @@
</li>
</ul>
</p>
</InfoTooltip>
</InfoTooltipInline>
</InstructionStep>
<InstructionStep>
<p>
Navigate to the folder where you downloaded the file e.g.:
</p>
<p>
<CopyableCommand>cd ~/Downloads</CopyableCommand>
<InfoTooltip>
<p>
Press on <code>enter/return</code> key after running the command.
</p>
<p>
If the file is not downloaded on Downloads folder,
change <code>Downloads</code> to path where the file is downloaded.
</p>
<p>
This command means:
<ul>
<li><code>cd</code> will change the current folder.</li>
<li><code>~</code> is the user home directory.</li>
</ul>
</p>
</InfoTooltip>
<InfoTooltipWrapper>
<CopyableCommand>cd ~/Downloads</CopyableCommand>
<template #info>
<p>
Press on <code>enter/return</code> key after running the command.
</p>
<p>
If the file is not downloaded on Downloads folder,
change <code>Downloads</code> to path where the file is downloaded.
</p>
<p>
This command means:
<ul>
<li><code>cd</code> will change the current folder.</li>
<li><code>~</code> is the user home directory.</li>
</ul>
</p>
</template>
</InfoTooltipWrapper>
</p>
</InstructionStep>
<InstructionStep>
@@ -70,26 +72,28 @@
Give the file execute permissions:
</p>
<p>
<CopyableCommand>chmod +x {{ filename }}</CopyableCommand>
<InfoTooltip>
<p>
Press on <code>enter/return</code> key after running the command.
</p>
<p>
It will make the file executable.
</p>
<p>
If you use desktop environment you can alternatively (instead of running the command):
<ol>
<li>Locate the file using your file manager.</li>
<li>Right click on the file, select "Properties".</li>
<li>Go to "Permissions" and check "Allow executing file as program".</li>
</ol>
</p>
<p>
These GUI steps and name of options may change depending on your file manager.'
</p>
</InfoTooltip>
<InfoTooltipWrapper>
<CopyableCommand>chmod +x {{ filename }}</CopyableCommand>
<template #info>
<p>
Press on <code>enter/return</code> key after running the command.
</p>
<p>
It will make the file executable.
</p>
<p>
If you use desktop environment you can alternatively (instead of running the command):
<ol>
<li>Locate the file using your file manager.</li>
<li>Right click on the file, select "Properties".</li>
<li>Go to "Permissions" and check "Allow executing file as program".</li>
</ol>
</p>
<p>
These GUI steps and name of options may change depending on your file manager.'
</p>
</template>
</InfoTooltipWrapper>
</p>
</InstructionStep>
<InstructionStep>
@@ -97,21 +101,24 @@
Execute the file:
</p>
<p>
<CopyableCommand>./{{ filename }}</CopyableCommand>
<InfoTooltip>
<p>
If you have desktop environment, instead of running this command you can alternatively:
</p>
<ol>
<li>Locate the file using your file manager.</li>
<li>Right click on the file, select "Run as program".</li>
</ol>
</InfoTooltip>
<InfoTooltipWrapper>
<CopyableCommand>./{{ filename }}</CopyableCommand>
<template #info>
<p>
If you have desktop environment, instead of running this command
you can alternatively:
</p>
<ol>
<li>Locate the file using your file manager.</li>
<li>Right click on the file, select "Run as program".</li>
</ol>
</template>
</InfoTooltipWrapper>
</p>
</InstructionStep>
<InstructionStep>
If asked, enter your administrator password.
<InfoTooltip>
<InfoTooltipInline>
<p>
As you type, your password will be hidden but the keys are still
registered, so keep typing.
@@ -122,7 +129,7 @@
<p>
Administrator privileges are required to configure OS.
</p>
</InfoTooltip>
</InfoTooltipInline>
</InstructionStep>
</InstructionSteps>
</template>
@@ -131,13 +138,15 @@
import { defineComponent } from 'vue';
import InstructionSteps from '../InstructionSteps.vue';
import InstructionStep from '../InstructionStep.vue';
import InfoTooltip from '../../InfoTooltip.vue';
import InfoTooltipInline from '../../Help/InfoTooltipInline.vue';
import InfoTooltipWrapper from '../../Help/InfoTooltipWrapper.vue';
import CopyableCommand from '../CopyableCommand.vue';
export default defineComponent({
components: {
CopyableCommand,
InfoTooltip,
InfoTooltipInline,
InfoTooltipWrapper,
InstructionSteps,
InstructionStep,
},

86
src/presentation/components/Code/CodeButtons/Save/RunInstructions/Steps/Platforms/MacOsInstructions.vue
View File

@@ -2,7 +2,7 @@
<InstructionSteps>
<InstructionStep>
Download the file.
<InfoTooltip>
<InfoTooltipInline>
<p>
You should have already been prompted to save the script file.
</p>
@@ -10,38 +10,38 @@
If this was not the case or you did not save the script when prompted,
please try to download your script file again.
</p>
</InfoTooltip>
</InfoTooltipInline>
</InstructionStep>
<InstructionStep>
Open terminal.
<InfoTooltip>
<InfoTooltipInline>
Type Terminal into Spotlight or open it from the Applications -> Utilities folder.
</InfoTooltip>
</InfoTooltipInline>
</InstructionStep>
<InstructionStep>
<p>
Navigate to the folder where you downloaded the file e.g.:
</p>
<p>
<CopyableCommand>
cd ~/Downloads
</CopyableCommand>
<InfoTooltip>
<p>
Press on <code>enter/return</code> key after running the command.
</p>
<p>
If the file is not downloaded on Downloads folder,
change <code>Downloads</code> to path where the file is downloaded.
</p>
<p>
This command means:
<ul>
<li><code>cd</code> will change the current folder.</li>
<li><code>~</code> is the user home directory.</li>
</ul>
</p>
</InfoTooltip>
<InfoTooltipWrapper>
<CopyableCommand>cd ~/Downloads</CopyableCommand>
<template #info>
<p>
Press on <code>enter/return</code> key after running the command.
</p>
<p>
If the file is not downloaded on Downloads folder,
change <code>Downloads</code> to path where the file is downloaded.
</p>
<p>
This command means:
<ul>
<li><code>cd</code> will change the current folder.</li>
<li><code>~</code> is the user home directory.</li>
</ul>
</p>
</template>
</InfoTooltipWrapper>
</p>
</InstructionStep>
<InstructionStep>
@@ -49,15 +49,17 @@
Give the file execute permissions:
</p>
<p>
<CopyableCommand>chmod +x {{ filename }}</CopyableCommand>
<InfoTooltip>
<p>
Press on <code>enter/return</code> key after running the command.
</p>
<p>
It will make the file executable.
</p>
</InfoTooltip>
<InfoTooltipWrapper>
<CopyableCommand>chmod +x {{ filename }}</CopyableCommand>
<template #info>
<p>
Press on <code>enter/return</code> key after running the command.
</p>
<p>
It will make the file executable.
</p>
</template>
</InfoTooltipWrapper>
</p>
</InstructionStep>
<InstructionStep>
@@ -65,15 +67,17 @@
Execute the file:
</p>
<p>
<CopyableCommand>./{{ filename }}</CopyableCommand>
<InfoTooltip>
Alternatively you can locate the file in <strong>Finder</strong> and double click on it.
</InfoTooltip>
<InfoTooltipWrapper>
<CopyableCommand>./{{ filename }}</CopyableCommand>
<template #info>
Alternatively you can locate the file in <strong>Finder</strong> and double click on it.
</template>
</InfoTooltipWrapper>
</p>
</InstructionStep>
<InstructionStep>
If asked, enter your administrator password.
<InfoTooltip>
<InfoTooltipInline>
<p>
As you type, your password will be hidden but the keys are
still registered, so keep typing.
@@ -84,7 +88,7 @@
<p>
Administrator privileges are required to configure OS.
</p>
</InfoTooltip>
</InfoTooltipInline>
</InstructionStep>
</InstructionSteps>
</template>
@@ -93,13 +97,15 @@
import { defineComponent } from 'vue';
import InstructionSteps from '../InstructionSteps.vue';
import InstructionStep from '../InstructionStep.vue';
import InfoTooltip from '../../InfoTooltip.vue';
import InfoTooltipInline from '../../Help/InfoTooltipInline.vue';
import InfoTooltipWrapper from '../../Help/InfoTooltipWrapper.vue';
import CopyableCommand from '../CopyableCommand.vue';
export default defineComponent({
components: {
CopyableCommand,
InfoTooltip,
InfoTooltipInline,
InfoTooltipWrapper,
InstructionSteps,
InstructionStep,
},

28
src/presentation/components/Code/CodeButtons/Save/RunInstructions/Steps/Platforms/WindowsInstructions.vue
View File

@@ -2,13 +2,13 @@
<InstructionSteps>
<InstructionStep>
Download the file.
<InfoTooltip>
<InfoTooltipInline>
<p>If a save prompt doesn't appear, try downloading the script again.</p>
</InfoTooltip>
</InfoTooltipInline>
</InstructionStep>
<InstructionStep>
If warned by your browser, keep the file.
<InfoTooltip>
<InfoTooltipInline>
<!--
Tests (15/01/2023):
- Edge (Defender activated): "filename isn't commonly downloaded..."
@@ -33,11 +33,11 @@
For <strong>Firefox</strong> and <strong>Chrome</strong>, typically no additional
action is needed.
</p>
</InfoTooltip>
</InfoTooltipInline>
</InstructionStep>
<InstructionStep>
If your antivirus (e.g., Defender) alerts you, address the warning.
<InfoTooltip>
<InfoTooltipInline>
<!--
Tests (15/01/2023):
- Edge (Defender activated): "Couldn't download - Virus detected"
@@ -75,7 +75,7 @@
<li>and keep real-time protection enabled whenever possible.</li>
</ul>
</blockquote>
</InfoTooltip>
</InfoTooltipInline>
</InstructionStep>
<InstructionStep>
<!--
@@ -85,7 +85,7 @@
- Firefox: "filename is executable file. Executable files may contain..?" OK/Cancel
-->
Open the downloaded file.
<InfoTooltip>
<InfoTooltipInline>
<p>
Confirm any browser prompts to open the file.
</p>
@@ -100,11 +100,11 @@
<strong>Edge</strong> and <strong>Chrome</strong> users usually will not
encounter additional prompts.
</p>
</InfoTooltip>
</InfoTooltipInline>
</InstructionStep>
<InstructionStep>
If prompted, confirm SmartScreen warnings.
<InfoTooltip>
<InfoTooltipInline>
<p>
Windows SmartScreen might display a cautionary message.
</p>
@@ -118,11 +118,11 @@
<li>Select <strong>Run anyway</strong>.</li>
</ol>
</p>
</InfoTooltip>
</InfoTooltipInline>
</InstructionStep>
<InstructionStep>
If administrative permissions are requested, grant them.
<InfoTooltip>
<InfoTooltipInline>
<p>
The script may request administrative rights to apply changes.
</p>
@@ -132,7 +132,7 @@
<p>
Click <strong>Yes</strong> to authorize and run the script.
</p>
</InfoTooltip>
</InfoTooltipInline>
</InstructionStep>
</InstructionSteps>
</template>
@@ -141,11 +141,11 @@
import { defineComponent } from 'vue';
import InstructionSteps from '../InstructionSteps.vue';
import InstructionStep from '../InstructionStep.vue';
import InfoTooltip from '../../InfoTooltip.vue';
import InfoTooltipInline from '../../Help/InfoTooltipInline.vue';
export default defineComponent({
components: {
InfoTooltip,
InfoTooltipInline,
InstructionSteps,
InstructionStep,
},