* 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>
* Add pastel and hot pink base configuration & labels
* Update Author Background Color to be based on --secondary-card-bg-color instead of --scrollbar-color
This unneeded dependency on the scrollbar color here resulted in the Author Background text blending into its background on the new Hot Pink theme. This change does not tangibly affect any other theme, whose scrollbar colors are incidentally similar to the secondary-card-bg-color, as this color is already being used for tags on the Channel About tab.
* Implement Pastel Pink and Hot Pink styling
Note that Hot Pink styling overwrites the primary and secondary color themes to maintain accessible color contrasts throughout FreeTube. It also updates the underline styling to match its aesthetic. The scrollbar-text-color-hover and side-nav-active-text-color colors are added for allow for the text and icon to both change on hover. This allows for more accessible hover and active styling.
* Add textWhiteSmall and iconWhiteSmall to repo; add FT pink icon themes
The textWhiteSmall was actually already sized exactly the same as the other small text files, so I just changed the name to reflect that fact.
* Add side-nav-hover-text-color and side-nav-active-text-color throughout FT
* Update Hot Pink theme accent-color-active
* Add side-nav hover-text and active-text styling to ft-icon-button
* Fix incorrect variable name
* Disable primary & secondary color theme controls when hot pink theme is enabled
* Deduplicate CSS rules for the Catppuccin Mocha colours
* Deduplicate CSS rules for the Dracula colours
* Deduplicate CSS rules for the themes
* Deduplicate CSS rules for the main and secondary colours
* Add system preference to theme-settings
* Add watching logic to check for dark theme settings
* Add en system theme translation
* Add explicit darkTheme option to browserWindow
* Remove unnecessary themeSource line
* Fix lint errors
* Move to using main process messaging for theme change
* Add system dataset selectors for themes
* Fix lint errors
* Change system theme to system default
* Use system default for deciding background color of newWindow
* Add baseTheme to state persistance
* Use baseTheme on browserWindow creation
* Fix lint errors
* Improve window background logic
* Catch settingsDb errors
* Remove dark flash on light themes
* Fix lint issues
* Fix system default sync on multiple windows
* Load database on each new window
* Fix lint errors
* Update compatibility for shared electron storage
* Remove unused console log
* Revert unnecessary changes
* Fix window maximize white flash
* Fix handleBaseTheme usage
* Use data-system-theme instead of data-theme
* Revert window maximize changes
* Fix theme flash on new window open
* Don't blind dark theme users
It is better to start the temporary background dark so it doesnt flashbang dark theme users late at night.
Just happened to me 😢
This makes the loading background color the normal dark theme background color.
* Grab theme before await
* make it consistent when built
* final fixes
* removed accidental file
Co-authored-by: Preston <freetubeapp@protonmail.com>
* update colors to match theme
* fixed issues with light theme
* readded line that was accidentally deleted
* update colour to match search bar
* update profile selector & dropdown
* increase blur on ft-profile-selector box shadow
* don't change search suggestion background color to primary color
Co-authored-by: Preston <freetubeapp@protonmail.com>
* Added Dracula Theme
• Added Light and Dark versions of the logo using Dracula Colors
• Added the base theme and Dracula accent colors to the theme.css
• Added the options for the new theme and colors in the theme-settings comp
• Added translations for the theme and color names to all local yaml files that
already had theme and color information
* fixed some yamls that I broke
* fixed some more yamls that I broke
* fixed an indentation error
* fixed the formating issues. It's back to 2 spaces rather than 4.
* removed package-lock, added back a new line at the end of the .gitignore, tweaked the colors a bit to add more contrast beween the text and backgroud colors in the overflow menu on the video cards., changed the card color to be slightly ligher than the background instead of slightly darker.
* apparently there was a blank line in the package.json file that was removed. Just trying to get this diff out of the pr
* apparently there was a blank line in the package.json file that was removed. Just trying to get this diff out of the pr
* fixed formating issues that I created in the theme.css. Converted my new code to use double quotes and uppercase hex codes to match existing formatting.
* fixed formating issues that I created in the theme.css. Converted my new code to use double quotes and uppercase hex codes to match existing formatting.
* fixed formating issues that I created in the theme.css. Converted my new code to use double quotes and uppercase hex codes to match existing formatting.
* resoliving conflicts in a local file
* added contract to all of the dracula primary colors. Added contrast for the main dracula theme's secondary and teriary text colors
JonahFoster
Jason
PikachuEXE
absidue
Rekito
vallode
jilv220
PrestonN
peepopoggers
ChunkyProgrammer
Cody Sechelski
Airradda
Airradda
Cadence Ember