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 improves UI consistency. It also improves maintainability by
removing "magic values" in favor of standardized spacing throughout the
application.
- Adjust spacing variables to match the convention.
- Add `_spacing.scss` to define a centralized set of spacing variables, both
absolute and relative, to standardize the spacing throughout the application.
This new approach ensures a consistent spacing logic across all components and
layouts, facilitating easier maintenance and scalability of the styling codebase.
- Update various SCSS styles to utilize the new spacing variables. This change
harmonizes the spacing across different parts of the application, aligning with
the new design system's principles.
- Slightly adjust existing padding/margin/gaps for better consistency.
Other supporting changes per component:
- RatingCircle: Update style names to match convention and simplify
hacky way to inject circle width value through CSS variables. Add
tests for the new behavior and refactor existing tests for easier
extensibility.
- TheFooter: Add small gap when footer items wrap.
- HiearchicalTreeNode: Refactor variables to separate caret size clearly
from padding applied.
- App: Make padding responsive as initial behavior of v0.13.0 before
5d940b57ef.
- ModalDialog: Use responsive absolute values instead of percentage.
- HorizontalResizeSlider:
- Use `v-bind` instead of hacky way to inject SCSS values through variables.
- Remove `verticalMargin` property to simplify its styling.
- Move `src/presentation/assets/styles/components/_card.scss` closer to
components that it styles. Update structure documentation.
The centralization of spacing definitions will aid in future design
adjustments, ensuring that updates to spacing can be made swiftly and
uniformly across the application. It's a step towards a more maintainable
and scalable frontend architecture.
This commit fixes an issue where the card's header would improperly
expand to full height during card collapse, leading to a less smooth
user experience. Previously, this was caused by the indiscriminate use
of `transition: all` in the `.card__expander`, which included unwanted
properties in the transition during collapse, such as height. This is
solved by using Vue transitions to apply transition only during
expansion.
Changes:
- Introduce a new Vue component, `CardExpandAnimation`:
- Centralizes the animation process, applying the same animation to
both the card and its arrow for consistency.
- Resolves the glitch by adjusting classes exclusively during the
enter animation phase, avoiding unintended side effects during leave
animation phase.
- Adopts a Vue-idiomatic approach for transition management, improving
code readability and maintainability.
- Improves separation of concerns by isolating animation logic from
the component's core functionality, facilitating easier updates or
replacements.
- Remove unnecessary transitions to enhance code simplicity and
performance:
- Remove `transition: all` on `.card__expander`, which was identified
as the cause of the issue.
- Remove unnecessary `transition: all` on `.card`.
- Adjust transitions to specifically target and affect the transform
property (instead of `all`) to optimize animation behavior and
eliminate potential side-effects.
These changes not only fix the issue at hand but also contribute to a
more maintainable and performant codebase by clarifying animation logic
and reducing unnecessary CSS transitions.
This commit centralizes the styling of key UI elements across the
project to ensure:
- Consistent look and feel.
- Enhanced code reusability.
- Simpified maintenance, improving development speed.
It establishes a uniform foundation that can be leveraged across
different parts of the project, even enabling the styling to be shared
across different websites (supporting issue #49).
Key changes:
- Apply the following shared styles globally:
* Styling of code, blockquotes, superscripts, horizontal rules and
anchors.
* Vertical and horizontal spacing.
- Segregate base styling into dedicated SCSS files for clearer structure
and increased maintainability.
- Remove custom styling from affected components, enabling global style
reuse for visual uniformity, reduced redundancy, and enhanced
semantics.
Other supporting changes:
- Rename `globals.scss` to `base.scss` for better clarity.
- Add `.editorconfig` for `.scss` files to ensure consistent whitespace
usage.
- Remove `2` file from the project root, that was included in the source
code by mistake.
- Remove unused font-face imports
Key changes:
- Change main font to Roboto Slab for enhanced readability.
- Change code font to 'Source Code Pro' for consistent monospace code
rendering.
- Import and set code font explicitly for uniform appearance across
platforms.
- Update Slabo 27px (logo font) version from v6 to v14.
- Update Yesteryear (cursive font) version from v8 to v18.
- Drop support for historic browser-specific formats, retaining only
WOFF2 for modern and TTF for legacy browsers.
- Use `font-display: swap` to improve perceived load times and minimize
layout shifts.
Supporting changes:
- Simplify font-weight usage to 'normal' and 'bold' for consistency.
- Adjust inline code padding for better scalability and prevent
overflow.
- Introduce `$font-main` as main font variable.
- Remove specification of main font as it's best practice to rely on the
default font defined on `body` style.
- Specify font in code area to ensure it uses the code font consistently
as the rest of the application.
- Remove local font search through `local` to simplify the import logic
and prioritize consistency over performance.
- Import bold font explicitly (`font-weight: 700`) for smooth and
consistent rendering.
- Move `font-family` definitions to `_typography.scss` to better adhere
to the common standards and conventions.
- Refactor font variables to have `font-family-` prefix instead of
`font-` to improve clarity and differentiation between `font-size`
variables.
- Rename 'artistic' font to 'cursive' for preciseness and clarity.
- Use smaller font sizes to match the new main font size, as Roboto Slab
is relatively larger.
- Add missing fallbacks for serif fonts to improve fault tolerance.
- Change padding slightly on toggle switch for revert buttons to align
well with new main font and its sizing.
This commit improves markdown rendering to convert reference labels
(e.g., `[1]`) to superscripts, improving document readability without
cluttering the text. This improvement applies documentation of all
scripts and categories.
Changes:
- Implement superscript conversion for reference labels within markdown
content, ensuring a cleaner presentation of textual references.
- Enable HTML content within markdown, necessary for inserting `<sup>`
elements due to limitations in `markdown-it`, see
markdown-it/markdown-it#999 for details.
- Refactor markdown rendering process for improved testability and
adherence to the Single Responsibility Principle.
- Create `_typography.scss` with font size definitions, facilitating
better control over text presentation.
- Adjust external URL indicator icon sizing for consistency, aligning
images with the top of the text to maintain a uniform appearence.
- Use normal font-size explicitly for documentation text to ensure
consistency.
- Remove text size specification in `markdown-styles` mixin, using `1em`
for spacing to simplify styling.
- Rename font sizing variables for clarity, distinguishing between
absolute and relative units.
- Change `font-size-relative-smaller` to be `80%`, browser default for
`font-size: smaller;` CSS style and use it with `<sup>` elements.
- Improve the logic for converting plain URLs to hyperlinks, removing
trailing whitespace for cleaner link generation.
- Fix plain URL to hyperlink (autolinking) logic removing trailing
whitespace from the original markdown content. This was revealed by
tests after separating its logic.
- Increase test coverage with more tests.
- Add types for `markdown-it` through `@types/markdown-it` package for
better editor support and maintainability.
- Simplify implementation of adding custom anchor attributes in
`markdown-it` using latest documentation.
This commit standardizes font sizes across components for a uniform
look. The icon sizes, font weights and line heights are also adjusted
accordingly for better standardization and simplicity.
- Introduce variables for standard font sizes, enhancing
maintainability.
- Remove explicit pixel values, replaced with scalable units based on
root size.
- Remove workaround for line-height adoptation of bigger font-size.
- Use consistent small font-size for the code area.
- Adjust checkbox tick to scale with font size.
- Include the script's directory path #304.
- Exclude Windows-specific instructions on non-Windows OS.
- Standardize language across dialogs for consistency.
Other supporting changes:
- Add script diagnostics data collection from main process.
- Document script file storage and execution tamper protection in
SECURITY.md.
- Remove redundant comment in `NodeReadbackFileWriter`.
- Centralize error display for uniformity and simplicity.
- Simpify `WindowVariablesValidator` to omit checks when not on the
renderer process.
- Improve and centralize Electron environment detection.
- Use more emphatic language (don't worry) in error messages.
This commit addresses issues #264 and #304, where users were not
receiving error messages when script execution failed due to
antivirus intervention, particularly with Microsoft Defender.
Now, desktop app users will see a detailed error message with
guidance on next steps if script saving or execution fails due
to antivirus removal.
Key changes:
- Implement a check to detect failure in file writing,
including reading the written file back. This method effectively
detects antivirus interventions, as the read operation triggers
an antivirus scan, leading to file deletion by the antivirus.
- Introduce a specific error message for scenarios where an
antivirus intervention is detected.
- Add Windows instruction dialog when saving scripts for Windows.
- Fix incorrect macOS download URL given for Linux instructions.
- Refactor UI rendering, eleminating the use of `v-html` and JavaScript
variables to hold HTML code.
