#314 Red dislike button when clicked (instead of blue)

[priyank780]

Adding support of changing Dislike button color red

[priyank780]

Verified on chrome by using the shortcut for dislike D,

Again pressing D,

[ghost]

Please avoid using JavaScript functions for features that might work in CSS.

[priyank780]

You mean addition of css class for element color and use that class in js?

[ghost]

@priyank780

1. Add "Switch" element to /src/template/js/template-parts/appearance.js line 263 -> to the end of Menu.main.section.appearance.details.section:

red_dislike_button: {
    type: 'switch',
    label: 'redDislikeButton'
}

2. Add styles to /src/youtube/css/appearance.css :

html[it-red-dislike-button='true'] YOUR_QUERY {
    /* YOUR_STYLES */
}

3. Add lang string to /_locales/en:

"redDislikeButton": {
    "message": "Red dislike button"
}

[ImprovedTube]

Popup-menu re-structuring: Strictly people who dont click on details>'likes'(thumbs) also wont want to see this feature? (No accidental dislike can do too much harm) . So it can belong inside the likes-item? As another option there. Then some people could miss ability to set 'icons only + turn red when I disliked'. So 'Likes' could also be type='folder' with 3 switches, but then it takes one click more (to go back from likes).
So instead we should have:
1. Likes: Hide ; Red color when disliked
below that: 2. "hide number of likes/thumbs" (same as icons only) (because this can be sweet idea to vote without being influenced by the numbers) and there is another option that would be nice: Show numbers after i voted.
And it is possible that a person wants to see the numbers but never the icons.)

[priyank780]

Closing this PR as I've raised another PR https://github.com/ImprovedTube/ImprovedTube/pull/455/files for the same.

[ImprovedTube]

Thanks! @victor-savinov @priyank780

We are looking forward to more people trying these easy steps.

Example:

Somebody wished: "Would it be possible to get an option to make the sidebar on the left side?"

CSS Solution:
#columns>#primary{order:7;}
also moving autoplay button to the outside as the glow bothers next to the video:
#head>#upnext {order:7;}
To purely/consequently adjust the experience from right to left, we also would need to mirror the sidebar content:
Thus another feature was added:
appearance>sidebar>"thumbnails on the right":
#dismissable>ytd-thumbnail{order:7;}
(This makes sense to have a button and be activated alone too, as it can be less distractive to have the thumbnails on the outside. - So just like that, without knowing moments ago, we already create a solutions for not just one wish but three)

2 Files edited (2 Commits): /src/youtube/css/appearance.css

(your CSS & JS can be tested with ImprovedTube's developer feature (next to Browser console). (Or on any site with our "Dark Mode" extension ) ( Newbies: CSS names of elements on websites can be explored with right click ("inspect") )

And 2. for our GUI: src/template/js/template-parts/appearance.js - also resorting the sidebar section along the way by size of visual change ~ priority ~ popularity

Steps to edit ImprovedTube & Popup Menu

1. Add "Switch" element to /src/template/js/template-parts/appearance.js line 263 -> to the end of Menu.main.section.appearance.details.section:

red_dislike_button: {
    type: 'switch',
    label: 'redDislikeButton'
}

2. Add styles to /src/youtube/css/appearance.css :

html[it-red-dislike-button='true'] YOUR_QUERY {
    /* YOUR_STYLES */
}

3. Add lang string to /_locales/any lang (that is English and other languages you might know well:

"redDislikeButton": {
    "message": "Red dislike button"
}

...about 2. : We can think ahead of some YouTube changes.
(i.e. Dont make your feature depend on an xpath or anything unnecessarily, that might likely change)
Use Javascript for logic of course ( besides that CSS Selectors allow some RegEx *= ^= $= and pseudo classes (conditions) like :empty ( en.wikipedia/CSS Selectors )
( a lot of CSS4 is not supported anywhere tho yet w3.org/CSS Selectors , caniUse.com/CSS where )
CSS can also use some variables too. ( However IF & ELSE dont exist in CSS stackoverflow: "binary conditions with CSS" )

...about 3. : we have a build-script to add your message to all languages files: github/ImprovedTube/locale.py
Enter "1", to add item to every language file. Enter a message like "Red dislike button")
(or enter "2", to remove an item entering the label name like "redDislikeButton") - this is necessary, because when a message is missing in any Language file, then Brower Extensions fall back to display your label's name (for example "redDislikeButton") (besides that this can also have spaces and be the same as the English message)

(to test the whole extension, we combine the source files ( /src/ ) (into content-scripts.js & popup.js) using our build.py since fewer files can reduce use of IOPS, since storage devices are most computer's speed bottlenecks and can wear down...)