Skip to content

Commit

Permalink
Bump Vue to latest and fix universal selector CSS
Browse files Browse the repository at this point in the history 
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@54a6afa

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.
  • Loading branch information
@undergroundwires
undergroundwires committed May 19, 2024
1 parent 2390530 commit aae5434
Show file tree
Hide file tree
Showing 9 changed files with 308 additions and 269 deletions.
267 changes: 132 additions & 135 deletions package-lock.json
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@
"electron-updater": "^6.1.9",
"file-saver": "^2.0.5",
"markdown-it": "^14.1.0",
"vue": "^3.4.21"
"vue": "^3.4.27"
},
"devDependencies": {
"@modyfi/vite-plugin-yaml": "^1.1.0",
Expand Down
28 changes: 10 additions & 18 deletions ...tons/Save/RunInstructions/InfoTooltip.vue → ...unInstructions/Help/InfoTooltipInline.vue
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
<template>
<span class="info-container">
<span
class="info-container"
>
<TooltipWrapper>
<AppIcon icon="circle-info" />
<template #tooltip>
Expand All @@ -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 changes: 36 additions & 0 deletions ...presentation/components/Code/CodeButtons/Save/RunInstructions/Help/InfoTooltipWrapper.vue
View file
Original file line number Diff line number Diff line change
@@ -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 changes: 3 additions & 3 deletions src/presentation/components/Code/CodeButtons/Save/RunInstructions/RunInstructions.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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: {
Expand Down
119 changes: 64 additions & 55 deletions ...on/components/Code/CodeButtons/Save/RunInstructions/Steps/Platforms/LinuxInstructions.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,19 +2,19 @@
<InstructionSteps>
<InstructionStep>
Download the file.
<InfoTooltip>
<InfoTooltipInline>
<p>
You should have already been prompted to save the script file.
</p>
<p>
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>
Expand All @@ -39,79 +39,86 @@
</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>
<p>
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>
<p>
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.
Expand All @@ -122,7 +129,7 @@
<p>
Administrator privileges are required to configure OS.
</p>
</InfoTooltip>
</InfoTooltipInline>
</InstructionStep>
</InstructionSteps>
</template>
Expand All @@ -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,
},
Expand Down
Loading

0 comments on commit aae5434

Please sign in to comment.