Update icon for channels button on side nav by PikachuEXE · Pull Request #5273 · FreeTubeApp/FreeTube

PikachuEXE · 2024-06-17T05:35:23Z

Pull Request Type

Bugfix
Feature Implementation
Documentation
Other

Related issue

#5003 (comment)

Description

Update icon for channels button so an icon similar to the existing one can be used for remote playlist in #5003

Screenshots

Width reduced from 1.25em to 1em:

height reduced from 1.3em > 1.15em

Mobile

Testing

Check the new icon in different modes

Desktop

OS:
OS Version:
FreeTube version:

Additional context

kommunarr · 2024-06-17T06:13:42Z

suggestion (non-blocking): The alignment of the icons is now bugging me given that this new icon is pretty wide. Could we left-align the icons?

PikachuEXE · 2024-06-17T07:21:10Z

I understand the content is wider than others but as it's already fixed width I doubt that left-align (I don't even know what it means) fixes anything

PikachuEXE · 2024-06-17T07:25:17Z

Or just use icon without large asymmetry

e.g. user

kommunarr · 2024-06-17T12:30:29Z

left-align (I don't even know what it means)

Here's how it looks like with a one-line change (the one highlighted) for reference. Needs a bit more tweaking for the other two cases, but just to demonstrate what I mean

PikachuEXE · 2024-06-17T21:55:43Z

In that case I might as well post all screenshots for using user for easier comparison

kommunarr · 2024-06-17T22:02:11Z

I'd prefer user-check because it's more clearly conveying "subscribing" with the checkmark. list and user seem roughly equivalent in terms of how effectively they describe the meaning. I will leave it at that and go along with whichever decision we make for this.

PikachuEXE · 2024-06-18T00:43:28Z

I am not quite sure that I agree with the left align for icons (for text I can understand)
Due to varying gap especially for Trending & Playlists
Centered

Left align

Right align

Youtube got no such issue

Still finding better solutions

Update 1: Add Right align screenshot
Update 2: Fix Right align screenshot

kommunarr · 2024-06-18T01:01:15Z

YouTube doesn't seem to have an issue because the icons are all very similar in size. We could try scaling this particular icon to a small width (with height auto)

PikachuEXE · 2024-06-18T01:39:02Z

Width reduced from 1.25em to 1em:

kommunarr · 2024-06-18T01:52:51Z

Ooh! We're very close now. That looks good on everything except the Hide Labels view, where the torso of the icon is poking out. Maybe we need some individual & commented patch for this specific Hide Labels case & icon, like a forced left padding that aligns the user part of the icon with the center.

PikachuEXE · 2024-06-18T02:05:32Z

height reduced from 1.3em > 1.15em

kommunarr

LGTM! Please update the OP with the newest screenshots when you have a sec!

kommunarr

Please update with the suggested change

PikachuEXE · 2024-06-18T13:13:15Z

OP screenshots updated, code change pushed

@jasonhenriquez I meant to push code changes after you feel fine with the preview XD

efb4f5ff-1298-471a-8973-3d47447115dc · 2024-06-18T17:58:18Z

I do agree that this icon is way better than the one we had before but im after all those changes im still a bit bothered by the alignment. If this is the best that can be done than i just have to deal with it but i just wanted to point out that it still looks a bit off to me

kommunarr · 2024-06-18T18:18:47Z

I think you can make an argument for making the bounding box of the icon centered around the user torso, and having the checkmark part not included in the positioning check. But I don't know of a good way to do that at the moment.

PikachuEXE · 2024-06-19T00:40:26Z

Manually adjusted the horizontal position
If it looks off please test locally to find the value that look right for you and share :)

efb4f5ff-1298-471a-8973-3d47447115dc

Icon in mobile view needs to be adjusted too

github-actions · 2024-07-18T16:31:04Z

This pull request has conflicts, please resolve those before we can evaluate the pull request.

* development: (78 commits) Bump the stylelint group with 2 updates (FreeTubeApp#5411) Bump rimraf from 5.0.8 to 6.0.1 (FreeTubeApp#5412) Translated using Weblate (Indonesian) Bump the babel group across 1 directory with 3 updates (FreeTubeApp#5419) Bump sass from 1.77.6 to 1.77.8 (FreeTubeApp#5413) Bump webpack from 5.92.1 to 5.93.0 (FreeTubeApp#5414) Bump lefthook from 1.7.1 to 1.7.2 (FreeTubeApp#5415) Bump electron from 31.1.0 to 31.2.0 (FreeTubeApp#5416) Fix about page not reacting to locale changes (FreeTubeApp#5393) Delete .github/workflows/report.yml (FreeTubeApp#5395) Bump version number to v0.21.1 Fix Invidious DASH manifest generation (FreeTubeApp#5387) ^ Update YouTube.js to 10.1.0 (FreeTubeApp#5384) Fix Invidious API error toasts saying undefined (FreeTubeApp#5380) Bump lefthook from 1.6.18 to 1.7.1 (FreeTubeApp#5376) Bump eslint-plugin-vue from 9.26.0 to 9.27.0 in the eslint group (FreeTubeApp#5371) Bump rimraf from 5.0.7 to 5.0.8 (FreeTubeApp#5373) Bump npm-run-all2 from 6.2.0 to 6.2.2 (FreeTubeApp#5374) Bump marked from 13.0.1 to 13.0.2 (FreeTubeApp#5375) Translated using Weblate (Portuguese (Brazil)) ... # Conflicts: # src/renderer/components/side-nav/side-nav.css

github-actions · 2024-07-19T02:19:09Z

Conflicts have been resolved. A maintainer will review the pull request shortly.

PikachuEXE · 2024-07-19T02:20:21Z

@efb4f5ff-1298-471a-8973-3d47447115dc
Updated now, did not see your message (probably deleted accidentally)

* development: Bump version number to v0.21.2 Update YouTube.js to 10.2.0 (FreeTubeApp#5465) Update icon for channels button on side nav (FreeTubeApp#5273) Translated using Weblate (Azerbaijani) Fix getRegions script and update the regions (FreeTubeApp#5450) More flexible hardware acceleration for Linux (FreeTubeApp#5438) Bump the eslint group with 3 updates (FreeTubeApp#5441) Bump lefthook from 1.7.2 to 1.7.5 (FreeTubeApp#5445) Bump the fortawesome group with 4 updates (FreeTubeApp#5442) Bump swiper from 11.1.4 to 11.1.5 (FreeTubeApp#5443) Bump electron from 31.2.0 to 31.2.1 (FreeTubeApp#5444) Fix scss deprecation warnings (FreeTubeApp#5429) Bump the stylelint group with 2 updates (FreeTubeApp#5411)

* Update icon for channels button on side nav

960b8ad

github-actions bot added the PR: waiting for review For PRs that are complete, tested, and ready for review label Jun 17, 2024

FreeTubeBot enabled auto-merge (squash) June 17, 2024 05:35

* Reduce size of new icon

50755a0

kommunarr previously approved these changes Jun 18, 2024

View reviewed changes

kommunarr reviewed Jun 18, 2024

View reviewed changes

PikachuEXE dismissed kommunarr’s stale review via 50755a0 June 18, 2024 13:11

kommunarr previously approved these changes Jun 18, 2024

View reviewed changes

* Align new icon manually

63b333a

PikachuEXE dismissed kommunarr’s stale review via 63b333a June 19, 2024 00:39

kommunarr requested a review from efb4f5ff-1298-471a-8973-3d47447115dc June 19, 2024 00:54

ChunkyProgrammer requested review from ChunkyProgrammer, absidue and kommunarr June 26, 2024 11:13

efb4f5ff-1298-471a-8973-3d47447115dc requested changes Jul 13, 2024

View reviewed changes

efb4f5ff-1298-471a-8973-3d47447115dc added PR: changes requested and removed PR: waiting for review For PRs that are complete, tested, and ready for review labels Jul 13, 2024

github-actions bot added the PR: merge conflicts / rebase needed label Jul 18, 2024

PikachuEXE added 2 commits July 19, 2024 10:14

* Update mobile menu item icon

7a130ac

github-actions bot removed the PR: merge conflicts / rebase needed label Jul 19, 2024

efb4f5ff-1298-471a-8973-3d47447115dc approved these changes Jul 19, 2024

View reviewed changes

efb4f5ff-1298-471a-8973-3d47447115dc added PR: waiting for review For PRs that are complete, tested, and ready for review and removed PR: changes requested labels Jul 19, 2024

PikachuEXE mentioned this pull request Jul 21, 2024

Page bookmarks #5003

Closed

1 task

absidue approved these changes Jul 24, 2024

View reviewed changes

ChunkyProgrammer approved these changes Jul 25, 2024

View reviewed changes

FreeTubeBot merged commit 0ac277a into FreeTubeApp:development Jul 25, 2024

github-actions bot removed the PR: waiting for review For PRs that are complete, tested, and ready for review label Jul 25, 2024

Conversation

PikachuEXE commented Jun 17, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Pull Request Type

Related issue

Description

Screenshots

Testing

Desktop

Additional context

Uh oh!

kommunarr commented Jun 17, 2024

Uh oh!

PikachuEXE commented Jun 17, 2024

Uh oh!

PikachuEXE commented Jun 17, 2024

Uh oh!

kommunarr commented Jun 17, 2024

Uh oh!

PikachuEXE commented Jun 17, 2024

Uh oh!

kommunarr commented Jun 17, 2024

Uh oh!

PikachuEXE commented Jun 18, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

kommunarr commented Jun 18, 2024

Uh oh!

PikachuEXE commented Jun 18, 2024

Uh oh!

kommunarr commented Jun 18, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

PikachuEXE commented Jun 18, 2024

Uh oh!

kommunarr left a comment

Choose a reason for hiding this comment

Uh oh!

kommunarr left a comment

Choose a reason for hiding this comment

Uh oh!

PikachuEXE commented Jun 18, 2024

Uh oh!

efb4f5ff-1298-471a-8973-3d47447115dc commented Jun 18, 2024

Uh oh!

kommunarr commented Jun 18, 2024

Uh oh!

PikachuEXE commented Jun 19, 2024

Uh oh!

efb4f5ff-1298-471a-8973-3d47447115dc left a comment

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented Jul 18, 2024

Uh oh!

github-actions bot commented Jul 19, 2024

Uh oh!

PikachuEXE commented Jul 19, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

PikachuEXE commented Jun 17, 2024 •

edited

Loading

PikachuEXE commented Jun 18, 2024 •

edited

Loading

kommunarr commented Jun 18, 2024 •

edited

Loading

PikachuEXE commented Jul 19, 2024 •

edited

Loading