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.
On very small screens (that can be tested with iPhone SE size), the
`All` button overflows. This makes E2E tests fail with width like
`320px`.
This commit fixes the issue by removing `whitespace: no-break` but
employing simpler and self-documenting layout.
Key changes:
- Simplify scripts menu layout instead of relying on
`white-space: nowrap`.
- Increase gap when script menu items starts wrapping to avoid
"squeezed" look.
Other supporting changes:
- Simplify gaps by using `column-gap` and `row-gap` properties rather
than calculating margins.
- Use class-based styling instead of using `id`.
- Use more clear, consistent CSS class naming with prefixes in
`TheScriptsMenu` to improve maintainability.
- Introduce `center-middle-flex-item` mixin for better documenting the
code.
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 broadens the search functionality within privacy.sexy by
including documentation text in the search scope. Users can now find
scripts and categories not only by their names but also by content in
their documentation. This improvement aims to make the discovery of
relevant scripts and information more intuitive and comprehensive.
Key changes:
- Documentation text is now searchable, enhancing the ability to
discover scripts and categories based on content details.
Other supporting changes:
- Remove interface prefixes (`I`) from related interfaces to adhere to
naming conventions, enhancing code readability.
- Refactor filtering to separate actual filtering logic from filter
state management, improving the structure for easier maintenance.
- Improve test coverage to ensure relability of existing and new search
capabilities.
- Test coverage expanded to ensure the reliability of the new search
capabilities.
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.
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 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.
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.
Refactor filter event handling to a unified event with visitor pattern
to simplify the code, avoid future bugs and provide better test
coverage.
This commit shifts from using separate `filtered` and `filterRemoved`
events to a singular, more expressive `filterChanged` event. The new
approach emits a detailed payload that explicitly indicates the filter
action and the associated filter data. The event object unifies the way
the presentation layer reacts to the events.
Benefits with this approach include:
- Simplifying event listeners by reducing the number of events to
handle.
- Increasing code clarity and reduces potential for oversight by
providing explicit action details in the event payload.
- Offering extensibility for future actions without introducing new
events.
- Providing visitor pattern to handle different kind of events in easy
and robust manner without code repetition.
Other changes:
- Refactor components handling of events to follow DRY and KISS
principles better.
- Refactor `UserFilter.spec.ts` to:
- Make it easier to add new tests.
- Increase code coverage by running all event-based tests on the
current property.
- 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.
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.
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.
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.
- Move most GUI related code to /presentation
- Move components to /components (separate from bootstrap and style)
- Move shared components helpers to /components/shared
- Rename Bootstrapping to bootstrapping to enforce same naming
convention in /presentation
