* Update Edit Profile styling, labels, and order
* Introduce additional styling updates
* Remove check for channel name of All Channels, as that can be faulty for users who renamed it & had another profile take the name
* Force use of All Channels profile translation (& forbid alteration of All Channels profile name
* Combine ProfileSettings and ProfileEdit routes under one route
* Implement active settings profile styling & profileList watcher
* Fix pre-existing bug of selected channels & count in Other Channels not updating when changing the profile filter
* Fix pre-existing behavior of filter profile selection resetting after each use
* Fix pre-existing bug with Edit Profile Subscription List of count bugging after adding new channel mid-count
And vice versa with removing channel mid-count on Other Channels.
* Fix two toasts to use localized profile name, & remove unnecessary mounted
* Remove old modification of base ft-input styling
* Add Stylelint plugin and rule for evaluating use of logical properties
* Implement stylelint-advised use of logical properties in SCSS files
* Implement stylelint-advised use of logical properties in CSS files
* Implement stylelint linting before each commit to any branch of the repo
* Remove other Stylelint plugins so that we can add them in later one-by-one
After discussing this with the FreeTube team, it seems that we are still undecided on which rules we want to be active, including ones currently enabled. As a stopgap fix, we disabled Stylelint checking in our pre-commit Git hook and our recommended
> freetube@0.19.0 lint-fix
> run-p eslint-fix lint-style-fix command. With this change, we will be using Stylelint in our
> freetube@0.19.0 lint-fix
> run-p eslint-fix lint-style-fix command, while giving us the flexibility to add in additional desired plugins and rules as separate efforts.
* Add video player to .stylelintignore
* Replace non-logical property usage in templates
This is not enforced by the plugin at this time.
* Remove use of logical properties from ft-video-player, & allow empty input when .stylelintignore files are changed
* Update ft-video-player.css to disable use of logical property linter
We want to avoid introducing directionality-specific properties that could muck up the video player.
* Remove redundant/unnecessary scripts in package.json
* Replace margin-left with margin-inline-start
* Replace margin-right with margin-inline-end
* Replace padding-left with padding-inline-start
* Replace padding-right with padding-inline-end
* Replace padding-top & padding-bottom with padding-block; continue replacing padding-left and padding-right with padding-inline-start and padding-inline-end
* Add updated rtl-compatible margins to ft-slider and fix indentation
* Replace margin-top & margin-bottom with margin-block; continue replacing margin-left and margin-right with margin-inline-start and margin-inline-end
* Continue replacing with margin-block and margin-inline
* Replace left and right with inset-inline-start and inset-inline-end
This commit also changes border-left to border-inline-start, and border-right to border-inline-end.
* Replace margin-bottom, top, and bottom with margin-block-end, inset-block-start, and inset-block-end
This commit also replaces border-top and border-bottom with border-block-start and border-block-end.
* Replace text-align left and right with text-align start and end
* Fix syntax error with inset-block-end
* Implement dynamic float: left/right based on direction ltr/rtl
* Implement dynamic navigation arrow placement based on direction ltr/rtl
To the fullest of my understanding, it is expected for the left navigation in rtl-supporting browsers to be for forward navigation, and the right one to be for backward navigation.
* Add direction to body based on preferred language
* Implement horizontal directionality coefficient to fix translate working in wrong x-direction for rtl languages
* Add explicit text-align: start in places to ensure rtl version is correctly aligned
* Add text-align: start to places where it is not inferred to enable proper rtl text orientation
* Fix search bar magnifying glass being too far right issue
* Move body.dir-setting logic to setLocale to fix dir not setting correctly on page reload
* Change .switchColumn to have align-items: start instead of justify-items: start
I have validated this for all settings tabs; the justify-content: start did nothing in any language, left-to-right or right-to-left. Replacing it with align-items: start aligned all menu switch items by their switches, not by their labels. This makes for a much more uniform settings section for trl languages.
* Fix emergent bug in which history icons are temporarily disabled on changing language to one with different directionality
Given that which icon is displayed for which history arrow is now dynamic based on the user's directionality, changing of the icon resets the font-awesome-icon state and thus re-adds the base disabled class to both arrows. This means that changing your language to one that has a different directionality was falsely setting the arrows to their disabled state (until the route is changed, after which the history icons will be fully back to normal). This commmit refactors the history icon setting logic to use class binding to two booleans in the top-nav component's data rather than adding and removing the disabled classes directly to the arrow elements' classLists, thus cleaning up the implementation and fixing the bug.
* Add Kurdish to rtl languages list & add li items to be right-aligned on rtl languages
* Force FreeTube logo to be ordered left-to-right for 'brand consistency'
* Add styling flipping font-awesome icons for rtl languages except for exclusion list
* Update isRightAligned with additional languages, and use it instead of locale value from store
Kudos to absidue for pointing out this existing function for representing this, and that it grabs directly from the i18n object. This means that FreeTube will display the proper rtl interface if one is the user's system language, where it did not before.
* Update isRightAligned property name to more clearly reflect rtl purpose
* Simplify left/right arrow display logic
Leverage the icons being flipped rather than manually setting the classes to their opposites when the directionality is RTL.
* Replace justify-self: left & justify-self: right with justify-self; start and justify-self: end
* Remove misguided attempt to emulate directionality-agnosticism with rightAligned class
* Explicitly center FreeTube version on About page
* Replace pre-existing identation issue
* Replace margin-left with margin-inline-start
* Replace margin-right with margin-inline-end
* Replace padding-left with padding-inline-start
* Replace padding-right with padding-inline-end
* Replace padding-top & padding-bottom with padding-block; continue replacing padding-left and padding-right with padding-inline-start and padding-inline-end
* Add updated rtl-compatible margins to ft-slider and fix indentation
* Replace margin-top & margin-bottom with margin-block; continue replacing margin-left and margin-right with margin-inline-start and margin-inline-end
* Continue replacing with margin-block and margin-inline
* Replace left and right with inset-inline-start and inset-inline-end
This commit also changes border-left to border-inline-start, and border-right to border-inline-end.
* Replace margin-bottom, top, and bottom with margin-block-end, inset-block-start, and inset-block-end
This commit also replaces border-top and border-bottom with border-block-start and border-block-end.
* Replace text-align left and right with text-align start and end
* Fix syntax error with inset-block-end
* Implement dynamic float: left/right based on direction ltr/rtl
* Implement dynamic navigation arrow placement based on direction ltr/rtl
To the fullest of my understanding, it is expected for the left navigation in rtl-supporting browsers to be for forward navigation, and the right one to be for backward navigation.
* Add direction to body based on preferred language
* Implement horizontal directionality coefficient to fix translate working in wrong x-direction for rtl languages
* Add explicit text-align: start in places to ensure rtl version is correctly aligned
* Add text-align: start to places where it is not inferred to enable proper rtl text orientation
* Fix search bar magnifying glass being too far right issue
* Move body.dir-setting logic to setLocale to fix dir not setting correctly on page reload
* Change .switchColumn to have align-items: start instead of justify-items: start
I have validated this for all settings tabs; the justify-content: start did nothing in any language, left-to-right or right-to-left. Replacing it with align-items: start aligned all menu switch items by their switches, not by their labels. This makes for a much more uniform settings section for trl languages.
* Fix emergent bug in which history icons are temporarily disabled on changing language to one with different directionality
Given that which icon is displayed for which history arrow is now dynamic based on the user's directionality, changing of the icon resets the font-awesome-icon state and thus re-adds the base disabled class to both arrows. This means that changing your language to one that has a different directionality was falsely setting the arrows to their disabled state (until the route is changed, after which the history icons will be fully back to normal). This commmit refactors the history icon setting logic to use class binding to two booleans in the top-nav component's data rather than adding and removing the disabled classes directly to the arrow elements' classLists, thus cleaning up the implementation and fixing the bug.
* Add Kurdish to rtl languages list & add li items to be right-aligned on rtl languages
* Force FreeTube logo to be ordered left-to-right for 'brand consistency'
* Add styling flipping font-awesome icons for rtl languages except for exclusion list
* Update isRightAligned with additional languages, and use it instead of locale value from store
Kudos to absidue for pointing out this existing function for representing this, and that it grabs directly from the i18n object. This means that FreeTube will display the proper rtl interface if one is the user's system language, where it did not before.
* Update isRightAligned property name to more clearly reflect rtl purpose
* Simplify left/right arrow display logic
Leverage the icons being flipped rather than manually setting the classes to their opposites when the directionality is RTL.
* Replace justify-self: left & justify-self: right with justify-self; start and justify-self: end
* Remove misguided attempt to emulate directionality-agnosticism with rightAligned class
* Explicitly center FreeTube version on About page
* Fix question mark reversing logic for Arabic, Hebrew, Persian, and Urdu
* Fix minor indentation issue
Co-authored-by: absidue <48293849+absidue@users.noreply.github.com>
* Remove unused function
Co-authored-by: absidue <48293849+absidue@users.noreply.github.com>
* Update src/renderer/components/ft-slider/ft-slider.css
Co-authored-by: PikachuEXE <pikachuexe@gmail.com>
---------
Co-authored-by: absidue <48293849+absidue@users.noreply.github.com>
Co-authored-by: PikachuEXE <pikachuexe@gmail.com>
* Make settings heading text unselectable
I often encounter the issue of accidentally selecting/highlighting the settings heading text, which ends up highlighting all of the text inside of that settings tab. This is an unpleasant appearance that I have to click to remove. This change removes this issue altogether.
* Switch all instances of user-select to be only user-select and -webkit-user-select
* Make side-nav labels unselectable
* Make side-nav and channels un-draggable
* Remove selection from ft-flex-box, ft-input placeholders, and profile icons
* Use named parameters instead of $ and % in localised strings
* Fix URL warning again
* Update placeholders in most locales
* Let the translators fix the problematic RTL strings
* Fix the missing quotes in some of the YAML files
* History: Refactor history module
* Profiles: Refactor profiles module
* IPC: Move channel ids to their own file and make them constants
* IPC: Replace single sync channel for one channel per sync type
* Everywhere: Replace default profile id magic strings with constant ref
* Profiles: Refactor `activeProfile` property from store
This commit makes it so that `activeProfile`'s getter returns
the entire profile, while the related update function only needs
the profile id (instead of the previously used array index)
to change the currently active profile.
This change was made due to inconsistency regarding the active profile
when creating new profiles.
If a new profile coincidentally landed in the current active profile's
array index after sorting, the app would mistakenly change to it
without any action from the user apart from the profile's creation.
Turning the profile id into the selector instead solves this issue.
* Revert "Store: Implement history synchronization between windows"
This reverts commit 99b61e6178.
This is necessary for an upcoming improved implementation of the
history synchronization.
* History: Remove unused mutation
* Everywhere: Create abstract database handlers
The project now utilizes abstract handlers to fetch, modify
or otherwise manipulate data from the database.
This facilitates 3 aspects of the app, in addition of
making them future proof:
- Switching database libraries is now trivial
Since most of the app utilizes the abstract handlers, it's incredibly
easily to change to a different DB library.
Hypothetically, all that would need to be done is to simply replace the
the file containing the base handlers, while the rest of the app
would go unchanged.
- Syncing logic between Electron and web is now properly separated
There are now two distinct DB handling APIs: the Electron one and
the web one.
The app doesn't need to manually choose the API, because it's detected
which platform is being utilized on import.
- All Electron windows now share the same database instance
This provides a single source of truth, improving consistency
regarding data manipulation and windows synchronization.
As a sidenote, syncing implementation has been left as is
(web unimplemented; Electron only syncs settings, remaining
datastore syncing will be implemented in the upcoming commits).
* Electron/History: Implement history synchronization
* Profiles: Implement suplementary profile creation logic
* ft-profile-edit: Small fix on profile name missing display
* Electron/Profiles: Implement profile synchronization
* Electron/Playlists: Implement playlist synchronization
* Rename `showArrow` to `showActionButton`
* * Display different icon for action button when input text look like a Youtube URL
* ! Fix transition for button appearing absent
* * Update to use new icon for all FT supported URLs
* Update src/renderer/components/ft-input/ft-input.js
Co-authored-by: Jason <84899178+jasonhenriquez@users.noreply.github.com>
* * Update action button to look disabled when input text is empty
* * Disable button hover/active visual effect when "disabled"
* * Make action button only respond to cursor when enabled
Co-authored-by: Jason <84899178+jasonhenriquez@users.noreply.github.com>