* Implement proposed formatting changes
* Increase font-size of video metrics to 14px
* More closely colocate title and channel to compensate for larger video metrics font size
* Update breakpoint for single column template to 1000px to minimize icon wrapping
* Fix like icon being on a different line from the text on smaller screen widths
* Update all Watch breakpoints to 1050px from 900px
* Implement hiding of videos with user-inputted text
* Implement ft-input minInputLength
* Enable for playlists
* Enable feature on channel pages
The premise for this change is that users would not want to see that forbidden content anywhere, as opposed to hidden channels, where you're clearly on a channel page to see things from that channel.
* Fix 'Play Next Video' playing forbiddenTitle videos and hidden channel videos
* Fix issue of hidden recommended videos taking up vertical space
* Rename variables to better match non-video-specific function, and remove blocks from History and videos in playlists
* Fix to respect hideForbiddenTitles value
* Modify label
* Clarify restriction affecting original titles
* Add toast for entered input of length below min input length
* Add toast for element already exists
* Update to not clear if duplicate tag is entered for Hide Forbidden feature
* Add back 'Turn on Subtitles by Default'
* Update variable name
* Fix double-selection issue when auto-generated & native tracks exist, & fix similar pre-existing bug
Also fixes pre-existing bug with pressing 'c' having the effect of multiple tracks (inaccurately) showing as selected.
* Add subscribe button to channel search result
* Fix description logic not accounting for forceListType
* Fix video list item width issues on smaller viewport widths (esp. when in List mode)
* Expand link area for hashtag and channel list items
* Equalize thumbnail width of different element types (channel, playlist, hashtag, video) in list view
* Fix ft-list-playlist not actually respecting imposed appearance prop
* Add pointer-events: none to # of videos in playlist bar
* Adjust channel click area to be full width in grid view
* Adjust list item sizing for mobile devices
* Implement least-changes fix to subscribe button wrap, & fix channel icon resizing on smaller device sizes
* 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
* Implement styling for new subscribe button
* Implement dropdown element and styling
* Implements remaining styling and logic
* Correct use of aria-selected in FT
Note: was able to add aria-controls to ft-profile-selector because it keeps the hidden dropdown in the DOM. The same is not true of the ft-icon-button or ft-subscribe-button. Main point: aria-expanded should go on the button opening the dropdown, not the dropdown itself.
* Resolve subscribe button staying upon bug
* Remove unneeded vendor-specific transition prefixes
See discussion here: https://www.web-plus-plus.com/Articles/css-transition-moz-and-webkit-vs-css3
* Implement customizable landing pages
* Implement curated list for default landing page dropdown options
* Update top nav link to redirect back to selected landing page
* Update top nav title to be 'Go to {page}' for improved clarity
* Remove landing page from selection and/or restore selection to default if is no longer valid
* Chore: move stylelint-use-logical-spec to devDependencies
* Update blur to be a thumbnail preference instead of its own ft-toggle-switch
* Update en-US.yaml
* Implement fix to elements escaping container on Channel page at small widths
* Show all Channel tabs on smaller viewport widths & reduce bulky gap
* Update Channel page to not break at even lower sizes
* Re-introduce channel button clipping fix
* Implement updated share button styling
* Fix issue with prompt box shrinking on small enough viewport sizes / overflow
* Update share button to work at all sizes'
* Fix pre-existing issue of Channel tabs overflowing on desktop view in some locales
* Fix buttons intersecting on Subscribed Channels tab in many languages
Note that this can still occur if one of the words in 'Unsubscribe' is pretty big on smaller screen sizes, e.g., Svenska at 515px. This is because we allow the Unsubscribe button to be wider than the element itself, which is hard to change here without completely reworking the structure using (due to limitations with minmax being unable to have fit-content in a grid definition).
* Update src/renderer/components/ft-subscribe-button/ft-subscribe-button.css
Co-authored-by: PikachuEXE <pikachuexe@gmail.com>
---------
Co-authored-by: PikachuEXE <pikachuexe@gmail.com>
* 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
* This is due to my previous change which included the use of a poorly researched 'user-select: all' to unset a 'user-select'. The problem is that all does something else altogether: 'The content of the element shall be selected atomically: If a selection would contain part of the element, then the selection must contain the entire element including all its descendants. If a double-click or context-click occurred in sub-elements, the highest ancestor with this value will be selected.' Source: https://developer.mozilla.org/en-US/docs/Web/CSS/user-select
* Add user-select:none to one more area
* Remove extraneous additional dash
Co-authored-by: LQ2' <lq2.apostrophe@gmail.com>
---------
Co-authored-by: LQ2' <lq2.apostrophe@gmail.com>
* Implement external player icon and favorites icon only appearing after hover/focus
As a way of cleaning up the look of videos, only shows the video icons on hover or focus. This is for all purposes a very 'free' change that I would opine makes FreeTube appear much cleaner.
* Implement video list settings button only appearing on hover/focus
Same idea as for the favorites & external player icons; much cleaner look without any sizable 'cost' to boot.
* Ensure video list buttons always show on devices without hover (e.g., mobile)
* Remove user-select lines (already in another PR) & one extraneous line
* 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
* Adds :disabled styling/functionality for ft-button & ft-select
* Disable proxy, external player, & SponsorBlock settings when applicable
* Changes Invidious General Settings, Proxy Settings, and SponsorBlock settings to disappear when appropriate
* Update ft-toggle-switch.sass
* Switches to styling with disabled class for ft-toggle-switch
* Sets cursor to not-allowed for disabled controls
* Fixes#1733
* Improves Trending & Channel tab styling
Removes :focus styling for unintended effects with auto-focusing on Trending page. Replaces underline with bold text weight & primary color bottom border on selected/active tab. Replaces animated background color change with bold text weight on tab:hover. Changes inactive tab color to tertiary. Removes unnecessary margin beneath tabs. Removes some of the empty vertical space between Channel info section & channel banner. Adds margin changes to maintain good appearance on smaller screens.
* Adds base dropdown ability to settings page with <details> & <summary>
* Adjusts styling of settings page
Replaces css stylesheets with sass stylesheets on some settings elements for better standardization of styling. Removes now unnecessary ft-card, .card, etc styling. Adds styling to new dropdown functionality.
* Update subscription-settings.sass
* Update Settings.css
* Makes reload buttons' position fixed
* Changes reload buttons' positions to absolute on narrow enough screens
Co-authored-by: Preston <freetubeapp@protonmail.com>
* Setting to customize fast-forward/rewind times
* Move variable placement to keep alphabetical order
Moves defaultSkipInterval to be one line below defaultQuality because Q comes before S in the alphabet. This keeps the variable declarations alphabetical.
JasonandGitHub
