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 upgrades TypeScript to the latest version 5.3 and introduces
`verbatimModuleSyntax` in line with the official Vue guide
recommendatinos (vuejs/docs#2592).
By enforcing `import type` for type-only imports, this commit improves
code clarity and supports tooling optimization, ensuring imports are
only bundled when necessary for runtime.
Changes:
- Bump TypeScript to 5.3.3 across the project.
- Adjust import statements to utilize `import type` where applicable,
promoting cleaner and more efficient code.
This commit introduces 'Revert: None - Selected' toggle, enabling users
to revert all reversible scripts with a single action, improving user
safety and control over script effects.
This feature addresses user-reported concerns about the ease of
reverting script changes. This feature should enhance the user experience
by streamlining the revert process along with providing essential
information about script reversibility.
Key changes:
- Add buttons to revert all selected scripts or setting all selected
scripts to non-revert state.
- Add tooltips with detailed explanations about consequences of
modifying revert states, includinginformation about irreversible
script changes.
Supporting changes:
- Align items on top menu vertically for better visual consistency.
- Rename `SelectionType` to `RecommendationStatusType` for more clarity.
- Rename `IReverter` to `Reverter` to move away from `I` prefix
convention.
- The `.script` CSS class was duplicated in `TheScriptsView.vue` and
`TheScriptsArea.vue`, leading to style collisions in the development
environment. The class has been renamed to component-specific classes
to avoid such issues in the future.
