This commit consolidates scripts and categories under a unified
'Executable' concept. This simplifies the architecture and improves code
readability.
- Introduce subfolders within `src/domain` to segregate domain elements.
- Update class and interface names by removing the 'I' prefix in
alignment with new coding standards.
- Replace 'Node' with 'Executable' to clarify usage; reserve 'Node'
exclusively for the UI's tree component.
This commit fixes a bug that causes tooltips to be slightly misaligned.
Tooltip positioning was incorrect during modal transitions due to their
initial movement, causing tooltips to align incorrectly at the start of
the animation rather than the end.
One way to solve this would be using `autoUpdate` from `floating-ui`
with `animationFrame: true`. However, this recalculates positions tens
of times per second, impacting performance. This is a monkey solution.
This commit adopts a more efficient approach by updating tooltip
positions only at the end of the transitions, which reduces calculations
and conserves resources.
Key changes:
- Addd transition end event listener for updating tooltip positions.
- Use throttling to eliminate excessive position recalculations.
Other supporting changes:
- Improve throttle function to support efficient recalculations of
positions:
- Add ability to optionally exclude the first execution (leading
call).
- Refactor to simplify it make it easier to follow and read.
- Fix a bug where initial calls were incorrectly throttled if
`dateNow()` returned `0`.
- Introduce and use a global hook for efficient DOM event management.
This greatily introduce safety, reuse and testability of event
listening.
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 UI inconsitency where the arrow did not animate in
sync with with the card's expansion panel during the expansion process.
The solution implemented involves the use of actual DOM element for the
arrow, rather than a pseude-element, allowing for unified animation with
the expansion panel.
Changes:
- Extraction of the expansion arrow into its own Vue component,
`CardExpansionArrow`, improving maintainability and separation of
concerns.
- Transition to using a real DOM element for the expansion arrow, moving
away from the `&:before` pseudo-class. This leads to simpler codebase,
better separation of concerns and closer alignment with HTML
semantics.
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 fixes an unintended bottom gap in the card expansional
panel, observed in the Windows script collection's "Advanced settings".
This issue arrives from a `min-height` CSS property that no longer
aligns with the current method for achieving balanced padding. It's only
visible when an action (a card) contains too few scripts (nodes).
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.
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.
This commit improves consistency in the UI by ensuring that all nodes in
the tree component expand to take full available width. This approach
eliminates layout shifts that were previously observed when toggling
documentation.
- Bump all ESLint dependencies related to TypeScript to their latest
version. This was made possible by the resolution of compatibility
issues with `@vue/eslint-config-airbnb-with-typescript`.
See vuejs/eslint-config-airbnb#58 for details.
- Refactor code to comply with the latest linting configuration.
- Improve documentation in the ESLint configuration file to better
describe the functionality and limitations of
`@vue/typescript/recommended`.
See vuejs/eslint-config-typescript#67 for details.
- Document functionality and limitation of `@vue/typescript/recommended`
more clearly in ESLint configuration file.
This commit fixes layout shifts experienced in macOS Safari when
hovering over top menu items. Instead of making text bold — which was
causing layout shifts — the hover effect now changes the text color.
This ensures a consistent UI across different browsers and platforms.
Additionally, this commit fixes the styling of the privacy button
located in the bottom right corner. Previously styled as an `<a>`
element, it is now correctly represented as a `<button>`.
Furthermore, the commit enhances HTML conformity and accessibility by
correctly using `<button>` and `<a>` tags instead of relying on click
interactions on `<span>` elements.
This commit introduces `FlatButton` Vue component and a new
`flat-button` mixin. These centralize button usage and link styles,
aligning the hover/touch reactions of buttons across the application,
thereby creating a more consistent user interface.
This commit addresses issues with the tree view not fully utilizing the
available width (appearing squeezed on the left) on bigger screens, and
inconsistent padding during searches.
The changes centralize padding and script tree rendering logic to
enforce consistency and prevent regression.
Changes:
- Fix tree view width utilization.
- Refactor SCSS variables for better IDE support.
- Unify padding and tree background color logic for consistent padding
and coloring around the tree component.
- Fix no padding around the tree in tree view.
- Centralize color SCSS variable for script background for consistent
application theming.
Styling of codeblocks:
- Uniform margins as other documentation elements.
- Add small margin for inline code-blocks.
- Use different background color for inline code-blocks.
- Introduce `inline-code` and `code-block` mixins for clarity in
styling.
Overflowing of codeblocks:
- Improve flex layout of the tree component to be handle overflowing
content and providing maximum available width. To be able to correctly
provide maximum available width in card content, card expansion layout
is changed so both close button and the content gets their full width.
- Other refactorings to support this:
- Introduce separate Vue component for checkboxes of nodes for better
separation of concerns and improved maintainability.
- Refactor `LeafTreeNode` to make it simpler, separating layout concerns
from other styling.
- `ScriptsTree.vue`: Prefer `<div>`s instead of `<span>`s as they
represent large content.
- Remove unnecessary `<div>`s and use `<template>`s to reduce HTML
complexity.
- Update script documentation to not include unnecessary left padding
on script code blocks.
- Refactor SCSS variable names in `DocumentationText.vue` for clarity.
This commit introduces a batched debounce mechanism for managing user
selection state changes. It effectively reduces unnecessary processing
during rapid script checking, preventing multiple triggers for code
compilation and UI rendering.
Key improvements include:
- Enhanced performance, especially noticeable when selecting large
categories. This update resolves minor UI freezes experienced when
selecting categories with numerous scripts.
- Correction of a bug where the code area only highlighted the last
selected script when multiple scripts were chosen.
Other changes include:
- Timing functions:
- Create a `Timing` folder for `throttle` and the new
`batchedDebounce` functions.
- Move these functions to the application layer from the presentation
layer, reflecting their application-wide use.
- Refactor existing code for improved clarity, naming consistency, and
adherence to new naming conventions.
- Add missing unit tests.
- `UserSelection`:
- State modifications in `UserSelection` now utilize a singular object
inspired by the CQRS pattern, enabling batch updates and flexible
change configurations, thereby simplifying change management.
- Remove the `I` prefix from related interfaces to align with new coding
standards.
- Refactor related code for better testability in isolation with
dependency injection.
- Repository:
- Move repository abstractions to the application layer.
- Improve repository abstraction to combine `ReadonlyRepository` and
`MutableRepository` interfaces.
- E2E testing:
- Introduce E2E tests to validate the correct batch selection
behavior.
- Add a specialized data attribute in `TheCodeArea.vue` for improved
testability.
- Reorganize shared Cypress functions for a more idiomatic Cypress
approach.
- Improve test documentation with related information.
- `SelectedScript`:
- Create an abstraction for simplified testability.
- Introduce `SelectedScriptStub` in tests as a substitute for the
actual object.
These updates ensure better adherence to Vue 3 standards and improve
overall code quality and readability.
- Update ESLint configuration from Vue 2.x to Vue 3 rules.
- Switch from "essential" to strictest "recommended" ESLint ruleset.
- Adjust ESLint script to treat warnings as errors by using
`--max-warnings=0` flag. This enforces stricter code quality controls
provided by Vue 3 rules.
This commit fixes layout shifts that occur on card list part of the page
when the page is initially loaded.
- Resolve issue where card list starts with minimal width, leading
to jumps in UI until correct width is calculated on medium and
big screens.
- Dispose of existing `ResizeObserver` properly before creating a new
one. This prevents leaks and incorrect width calculations if
`containerElement` changes.
- Throttle resize events to minimize width/height calculation changes,
enhancing performance and reducing the chances for layout shifts.
Supporting CI/CD improvements:
- Enable artifact upload in CI/CD even if E2E tests fail.
- Distinguish uploaded artifacts by operating system for clarity.
This commit applies `strictNullChecks` to the entire codebase to improve
maintainability and type safety. Key changes include:
- Remove some explicit null-checks where unnecessary.
- Add necessary null-checks.
- Refactor static factory functions for a more functional approach.
- Improve some test names and contexts for better debugging.
- Add unit tests for any additional logic introduced.
- Refactor `createPositionFromRegexFullMatch` to its own function as the
logic is reused.
- Prefer `find` prefix on functions that may return `undefined` and
`get` prefix for those that always return a value.
This commit introduces `useUserSelectionState` compositional hook. it
centralizes and allows reusing the logic for tracking and mutation user
selection state across the application.
The change aims to increase code reusability, simplify the code, improve
testability, and adhere to the single responsibility principle. It makes
the code more reliable against race conditions and removes the need for
tracking deep changes.
Other supporting changes:
- Introduce `CardStateIndicator` component for displaying the card state
indicator icon, improving the testability and separation of concerns.
- Refactor `SelectionTypeHandler` to use functional code with more clear
interfaces to simplify the code. It reduces complexity, increases
maintainability and increase readability by explicitly separating
mutating functions.
- Add new unit tests and extend improving ones to cover the new logic
introduced in this commit. Remove the need to mount a wrapper
component to simplify and optimize some tests, using parameter
injection to inject dependencies intead.
This commit improves the dependency injection mechanism by introducing a
custom `injectKey` function.
Key improvements are:
- Enforced type consistency during dependency registration and
instantiation.
- Simplified injection process, abstracting away the complexity with a
uniform API, regardless of the dependency's lifetime.
- Eliminated the possibility of `undefined` returns during dependency
injection, promoting fail-fast behavior.
- Removed the necessity for type casting to `symbol` for injection keys
in unit tests by using existing types.
- Consalidated imports, combining keys and injection functions in one
`import` statement.
- Migrate from "Vue 2.X" to "Vue 3.X"
- Migrate from "Vue Test Utils v1" to "Vue Test Utils v2"
Changes in detail:
- Change `inserted` to `mounted`.
- Change `::v-deep` to `:deep`.
- Change to Vue 3.0 `v-modal` syntax.
- Remove old Vue 2.0 transition name, keep the ones for Vue 3.0.
- Use new global mounting API `createApp`.
- Change `destroy` to `unmount`.
- Bootstrapping:
- Move `provide`s for global dependencies to a bootsrapper from
`App.vue`.
- Remove `productionTip` setting (not in Vue 3).
- Change `IVueBootstrapper` for simplicity and Vue 3 compatible API.
- Add missing tests.
- Remove `.text` access on `VNode` as it's now internal API of Vue.
- Import `CSSProperties` from `vue` instead of `jsx` package.
- Shims:
- Remove unused `shims-tsx.d.ts`.
- Remove `shims-vue.d.ts` that's missing in quickstart template.
- Unit tests:
- Remove old typing workaround for mounting components.
- Rename `propsData` to `props`.
- Remove unneeded `any` cast workarounds.
- Move stubs and `provide`s under `global` object.
Other changes:
- Add `dmg-license` dependency explicitly due to failing electron builds
on macOS (electron-userland/electron-builder#6520,
electron-userland/electron-builder#6489). This was a side-effect of
updating dependencies for this commit.
- Replace `ref`s with `shallowRef` when deep reactivity is not needed.
- Replace `readonly`s with `shallowReadonly` where the goal is to only
prevent `.value` mutation.
- Remove redundant `ref` in `SizeObserver.vue`.
- Remove redundant nested `ref` in `TooltipWrapper.vue`.
- Remove redundant `events` export from `UseCollectionState.ts`.
- Remove redundant `computed` from `UseCollectionState.ts`.
- Remove `timestamp` from `TreeViewFilterEvent` that becomes unnecessary
after using `shallowRef`.
- Add missing unit tests for `UseTreeViewFilterEvent`.
- Add missing stub for `FilterChangeDetails`.
Key highlights:
- Written from scratch to cater specifically to privacy.sexy's
needs and requirements.
- The visual look mimics the previous component with minimal changes,
but its internal code is completely rewritten.
- Lays groundwork for future functionalities like the "expand all"
button a flat view mode as discussed in #158.
- Facilitates the transition to Vue 3 by omitting the Vue 2.0 dependent
`liquour-tree` as part of #230.
Improvements and features:
- Caching for quicker node queries.
- Gradual rendering of nodes that introduces a noticable boost in
performance, particularly during search/filtering.
- `TreeView` solely governs the check states of branch nodes.
Changes:
- Keyboard interactions now alter the background color to highlight the
focused item. Previously, it was changing the color of the text.
- Better state management with clear separation of concerns:
- `TreeView` exclusively manages indeterminate states.
- `TreeView` solely governs the check states of branch nodes.
- Introduce transaction pattern to update state in batches to minimize
amount of events handled.
- Improve keyboard focus, style background instead of foreground. Use
hover/touch color on keyboard focus.
- `SelectableTree` has been removed. Instead, `TreeView` is now directly
integrated with `ScriptsTree`.
- `ScriptsTree` has been refactored to incorporate hooks for clearer
code and separation of duties.
- Adopt Vue-idiomatic bindings instead of keeping a reference of the
tree component.
- Simplify and change filter event management.
- Abandon global styles in favor of class-scoped styles.
- Use global mixins with descriptive names to clarify indended
functionality.
This commit simplifies event handling, providing a unified and robust
way to handle event lifecycling. This way, it fixes events not being
unsubscribed when state is changed.
Introduce a new function in `EventSubscriptionCollection` to remove
existing events and adding new events. This provides an easier to use
API, which leads to code that's easier to understand. It also prevents
potential bugs that may occur due to forgetting to call both functions.
It fixes `TheScriptsMenu` not unregistering events on state change.
Other improvements include:
- Include a getter to get total amount of registered subcriptions.
This helps in unit testing.
- Have nullish checks to prevent potential errors further down the
execution.
- Use array instead of rest parameters to increase readability and
simplify tests.
Ensure `SliderHandler` stops resizes on unmount, unsubscribing from all
events and resetting state to default.
Update `injectionKeys` to do imports as types to avoid circular
dependencies. Simplify importing `injectionKeys` to enable and strict
typings for iterating injection keys.
Add tests covering new behavior.
- Remove existing integration tests for hooks as they're redundant after
this change.
- Document the pattern in relevant documentation.
- Introduce `useEnvironment` to increase testability.
- Update components to inject dependencies rather than importing hooks
directly.
- Migrate `StatefulVue`:
- Introduce `UseCollectionState` that replaces its behavior and acts
as a shared state store.
- Add more encapsulated, granular functions based on read or write
access to state in CollectionState.
- Some linting rules get activates due to new code-base compability to
modern parses, fix linting errors.
- Rename Dialog to ModalDialog as after refactoring,
eslintvue/no-reserved-component-names does not allow name Dialog.
- To comply with `vue/multi-word-component-names`, rename:
- `Code` -> `CodeInstruction`
- `Handle` -> `SliderHandle`
- `Documentable` -> `DocumentableNode`
- `Node` -> `NodeContent`
- `INode` -> `INodeContent`
- `Responsive` -> `SizeObserver`
- Remove `vue-property-decorator` and `vue-class-component`
dependencies.
- Refactor `watch` with computed properties when possible for cleaner
code.
- Introduce `UseApplication` to reduce repeated code in new components
that use `computed` more heavily than before.
- Change TypeScript target to `es2017` to allow top level async calls
for getting application context/state/instance to simplify the code by
removing async calls. However, mocha (unit and integration) tests do
not run with top level awaits, so a workaround is used.
- Migrate to newer `eslint-config-airbnb-with-typescript` from
`eslint-config-airbnb`.
- Add also `rushstack/eslint-patch` as per instructed by
`eslint-config-airbnb-with-typescript` docs.
- Update codebase to align with new linting standards.
- Add script to configure VS Code for effective linting for project
developers, move it to `scripts` directory along with clean npm
install script for better organization.
Disable selecting clickables as text. Selecting buttons leads to
unintended selection. This is seen when touching on clickables using
mobile devices.
Prevent blue highlight when touching on clickables. This is seen on
mobile webkit browsers. It looks ugly and the visual clue provided is
not needed beacuse all clickables on mobile already have visual clues.
This commit improves mobile support. `:hover` CSS selector is not mobile
friendly because there is typically no mouse support on mobile. This
commit make hover behavior to become active during touch on mobile.
`:hover` selector is emulated on mobile devices. But this emulated
behavior is not desired. When emulated, the CSS style gets attached when
starting touching but does not get removed after stopping touching. This
sticky behavior is undesired.
This commit solve this issue by using Saas mixing that uses `:active`
selector instead of `:hover` when `:hover` is not really supported but
emulated.
Major refactoring using ESLint with rules from AirBnb and Vue.
Enable most of the ESLint rules and do necessary linting in the code.
Also add more information for rules that are disabled to describe what
they are and why they are disabled.
Allow logging (`console.log`) in test files, and in development mode
(e.g. when working with `npm run serve`), but disable it when
environment is production (as pre-configured by Vue). Also add flag
(`--mode production`) in `lint:eslint` command so production linting is
executed earlier in lifecycle.
Disable rules that requires a separate work. Such as ESLint rules that
are broken in TypeScript: no-useless-constructor (eslint/eslint#14118)
and no-shadow (eslint/eslint#13014).
Using more granular interfaces adds to expressiveness of the code.
Knowing what needs to mutate the state explicitly helps easier
understanding of the code and therefore increases the maintainability.
- Add more documentation.
- Use `main.scss` instead of importing components individually. This
improves productivity without compilation errors due to missing
imports and allows for easier future file/folder changes and
refactorings inside `./styles`.
- Use partials with underscored naming. Because it documents that the
files should not be individually imported.
- Introduce `third-party-extensions` folder to group styles that
overwrites third party components.
- Refactor variable names from generic to specific.
- Use Sass modules (`@use` and `@forward`) over depreciated `@import`
syntax.
- Separate font assets from Sass files (`styles/`). Create `assets/`
folder that will contain both.
- Create `_globals.css` for global styling of common element instead of
using `App.vue`.
Remove convention where Async suffix is added to functions that returns
a Promise. It was a habit from C#, but is not widely used in JavaScript
/ TypeScript world, also bloats the code. The code is more consistent
with third party dependencies/frameworks without the suffix.
1. Renames color names in palette. Using names such as "primary" and
"secondary" that are in consistent with designs such as material,
bootstrap and metro UI palettes. It adds `color-` prefix on color
variables in line with Vue Design System.
2. Introduces necessary changes to follow the system color system
everywhere without using any other color:
- It changes tooltip background from black to darker primary
colors.
- It overrides unset styles from tree component
- It ensures footer has same color as top menu.
3. Removes opacity CSS changes to have better control on choices. To
achieve that:
- It introduces new "light" variants of main colors
- It switches to colors with different variants (e.g. in Dialogs it
uses primary color as button as it has variants that can be
activated on hover meanwhile on-surface color is single).
4. Styles a tags (anchor elements) globally for consistency
1. It vertically centers top script menu (including selectors for view,
OS and recommendation levels). Before, it did not utilize the empty
space on smaller screens when of the menu items overflowed to a new
line. This commit fixes it, also adds margin on top selectors on
small screens.
2. It adds vertical margin between slider items on vertical view. It
also refactors slider component so that the `v-deep` is no longer
used, instead style is set through properties.
3. It ensures symmetrical margin on both sides of the handle in slider
during horizontal view. Before, the left margin did not exist and
right margin was too wide. This commit balances right and left margin
of the arrow.
4. It changes the way margining is done for the card list. It removes
internal margin from cards, because when they have them they also add
that to the outer card list. This commit solves it in a way that
unifies setting gap between cards and setting gap between cards.
The styles are controlled on card list instead. This way same margins
and paddings is also applied to non-card view (i.e. scripts tree).
Before margining was done separately and those views looked
diferently.
5. It improves styling of cards. It uses variables instead of hardcoded
values and also refactors and renames variables for simpler
understanding.
Detects clickable elements automatically and exempts them from
collapsing cards, also interacting with code area does no longer
collapse cards.
This commit also fixes subscribing to clicks on document every time card
list is loaded, but never unsubscribing. This impacts performance and
causes memory leaks. Now, registered event listener is removed every
time card list component is destroyed.
1. *Grouping* becomes *view*. Because *view* is more clear and extensible than *grouping*. It increases flexibility to extend by e.g. adding *flat* as a new view as discussed in #50, in this case "flat *view*" would make more sense than "flat *grouping*".
2. *None* becomes *tree*. Because *tree* is more descriptive than *none*.
Updates labels on top menu. As labels are updated, the file structure/names are refactored to follow the same concept. `TheScriptsList` is renamed to `TheScriptsView`. Also refactors `ViewChanger` so view types are presented in same way.
