Allow resizing Branch and Push/Pull toolbar buttons by jpedroso · Pull Request #18095 · desktop/desktop

jpedroso · 2024-01-28T16:01:16Z

Closes #4569
Closes #17388

Description

Allow the user to resize the Branch and Push/Pull toolbar buttons, and their dropdown panels.

Both buttons have a minimum width of 230px, same as the sidebar. The max width of each button is determined by the available space in the toolbar after taking out the sidebar, minus the other button’s width. This is controlled by IConstrainedValue values and determined in updateResizableConstraints().
If the user-defined width of both buttons is wider than the toolbar's available width the Branch toolbar button takes precedence over the Push/Pull button. For example, when the window resizes, the Push/Pull button’s width is reduced before the Branch button’s.
Like the sidebar, their width can be reset to the original value (230px) with a double-click on the resizable edge.
The dropdown panels of each button follow the width of the button. The Branches/Pull Requests dropdown has a minimum width of 365px—the previous fixed width—to avoid the panel getting too narrow if the branches names are not long enough.
The empty states for the Branches and Pull Requests tabs are adjusted to the flexible width. They are now centered in the container. Decided to give them a fixed width of 365px, same as previous size, to maintain the aspect of their contents. Letting them flex to full width would make the imagery scale too much and the call to action button quite wide.

Screenshots

Walkthrough of resizing the Branch and Push/Pull toolbar buttons, Branches/PR dropdown and empty states

2024-01-28-002293.mp4

Branches dropdown empty state

Minimum window size and maximum zoom

Max zoom, branches dropdown empty state

Release notes

Allow the user to resize the Branches and Push/Pull toolbar buttons.

jpedroso · 2024-01-28T20:23:26Z

app/src/ui/toolbar/dropdown.tsx

Required to correctly place the dropdown below its toolbar button.

Changing the default properties of the foldout style here might not be the best approach. I’m thinking the branch dropdown should instead provide its own foldoutStyle similar to what the sidebar dropdown has.

jpedroso · 2024-01-28T21:00:40Z

app/styles/ui/_branches.scss

Replace the fixed width with minimum width so the branch toolbar dropdown always has at least 365px. If the toolbar button is wider than that, allow it to fill the same width.

jpedroso · 2024-01-28T21:01:52Z

app/styles/ui/_branches.scss

Replace the fixed width and allow the branch list to fill the dropdown container (.branches-container).

jpedroso · 2024-01-28T21:06:06Z

app/styles/ui/_branches.scss

Center the empty state content of the Pull Requests tab in the dropdown container, and give its imagery some spacing vertically.

Read more about the why center empty states below in the Branches tab empty state comments.

jpedroso · 2024-01-28T21:10:37Z

app/styles/ui/_no-branches.scss

Both for the Branches and Pull Requests empty states, I decided to keep the fixed width of 365px instead of letting the imagery, text and button expand to fill the container. Specifically, in the case of Branches tab, the Create New Branch could get uncomfortably wide. See comparison below.

Full width empty state

Fixed width empty state

jpedroso · 2024-01-28T21:11:31Z

app/styles/ui/toolbar/_toolbar.scss

Prevent shrinking the dropdown arrow button. Keep them always pinned to the right.

jpedroso · 2024-01-28T21:12:04Z

app/styles/ui/toolbar/_toolbar.scss

Apply flexible width on the Branch and Push/Pull toolbar buttons.

There’s another button just below named .revert-progress also with fixed width.

&.revert-progress { width: 230px; }

I believe this button should also change to width: 100%; but haven’t yet found a way to get to a state where the button shows to confirm. Any ideas welcome.

This is seen when reverting a commit in a git LFS repo in which reverting a commit is very slow. Thus, this does need addressed. We can follow up with another PR since Git LFS is not a common usage and the likely hood that this would result in a negative experience is slim (worse case during loading the last toolbar button switches to 230px which could only be a clipping problem on a very small zoomed in screen). The RevertProgress toolbar button is rendered instead of the PullPushFetch so we can send the dimensions for the PullPushFetch button down to it.

chronvas · 2024-02-15T12:59:29Z

@jacortinas @sergiou87 Hello, can we hope to get that feature in? Any plans?

jpedroso · 2024-04-19T06:47:26Z

@steveward @tidy-dev will this pr get any attention?

i ask because i found one layout problem with it -- the branch list grows beyond desired size when the current branch name is long enough, for which i can’t seem to find a quick fix --, but i will not put any more time into this if this just ends up stalled here.

tidy-dev · 2024-04-19T12:09:22Z

@jpedroso Sorry for the delay and thank you for your patience. I cannot say a timeline, but I am interested in reviewing this. If you can find time to address the problem found that would be fantastic, (and if so, also updating this with the latest development would be awesome). Thank you for your time and patience on this.

Prevents the dropdown arrow button from shrinking when the window or toolbar items are resized.

Set a new constrained value for the branch dropdown so it can only be as wide as the available space after taking the sidebar and pull fetch button widths. The minimum size remains constant at its default width.

Instead of using a hardcoded max width of 600 and the default min width of 200, the branch dropdown resizable now uses the min and max that are provided with the constrained value.

This local var needs to reflect that some of the toolbar buttons are now resizable, and what is represents the total min width of those buttons.

Replace the inline hardcoded value with a constant defined closer the other toolbar constants.

More consistent with the `PushPullButton` type they relate to.

When there are no branches or pull requests to show, the corresponding empty states are centered on the container with a fixed width of 365px. For the branches empty state container, the fixed width replaces `flex: 1` to prevent it from filling the container and make the Create Branch button too wide.

Prevents the branches dropdown container from becoming too narrow when branch names are not long enough.

With the empty states centered on the container, their imagery would get uncomfortably close to the top. This introduces some spacing on top and bottom to make layout more balanced.

Branch names can expand to the available width in `.branches-list-item`.

Introduce the new property to avoid changing behavior of the existing `foldoutStyle` property. Whereas `foldoutStyle` replaces default style entirely, `foldoutStyleOverrides` is used to add to or override the default style properties.

jpedroso · 2024-05-10T10:52:03Z

@tidy-dev i fixed the remaining known issue, quoted below. also rebased with latest development. this is now ready for proper review.

the branch list grows beyond desired size when the current branch name is long enough, for which i can’t seem to find a quick fix

Tried many things but couldn’t fix the issue entirely in stylesheets, so the way i fixed this was to pass additional style properties for the default styles that get returned in ToolbarDropdown.getFoldoutStyle(). I decided to preserve the existing functionality of foldoutStyle since it can be used to replace the default style entirely, and instead create a new property that adds to the default style, called foldoutStyleOverrides. Tried to convey this idea in the documentation best i could.

Here’s the before and after when having a long branch name.

Before (`6657053`)

After (`9d7df28`)

…screen and max zoom

tidy-dev

@jpedroso Thank you for this PR and apologies for taking so long to review.

It works beautifully. 💖

I kicked it around quite a bit and found an accessibility issue where on the min width screen and max zoom the fetch dropdown button was being clipped. Thus, I updated this to latest dev and added changes to make the branch dropdown and pull/push split the difference of the available screen width when it gets this limited size. Due to that I am going to get another engineer to review this before merging.

I also found that on max zoom and smallest windows, the branch list and pr list is clipped, but it is in production too.. just not as much so I don't think this PR should be held back because of it.

sergiou87

Awesome work! 💖

tidy-dev · 2024-09-11T12:50:27Z

Going to go ahead and merge. Tho we did discuss and decided we would like it behind a feature flag as it is such a prominent part of the app so we can have it on beta for a bit. I have got a working branch for that and will open a PR up shortly. It also addresses applying this logic to the revert commit toolbar button (which only applies to git LFS repos and only when reverting)

Jay-o-Way · 2024-09-11T13:08:01Z

@tidy-dev glad this is finally picked up.
However I believe that a "feature flag" should be used for new features, not for a simple UI improvement.

This was referenced Jan 28, 2024

ToolbarButton: Can't read "Pull origin with rebase" because of truncation #17388

Closed

Allow Branches button to take up full middle of toolbar because get truncated pretty early #4569

Closed

jpedroso changed the title ~~Resizable Branches and Push/Pull toolbar buttons~~ Allow resizing Branch and Push/Pull toolbar buttons Jan 28, 2024

jpedroso commented Jan 28, 2024

View reviewed changes

steveward mentioned this pull request Apr 4, 2024

Push status is truncated #6956

Closed

jpedroso added 16 commits May 10, 2024 09:33

Make toolbar branch dropdown button resizable

91d0fca

Avoid shrink on toolbar-dropdown-arrow-button

20a3fdb

Prevents the dropdown arrow button from shrinking when the window or toolbar items are resized.

Update the max width available for the branch dropdown

ac6a9a2

Set a new constrained value for the branch dropdown so it can only be as wide as the available space after taking the sidebar and pull fetch button widths. The minimum size remains constant at its default width.

Use branch dropdown's constrained value min and max in resizable

da8d0cc

Instead of using a hardcoded max width of 600 and the default min width of 200, the branch dropdown resizable now uses the min and max that are provided with the constrained value.

Rename toolbarButtonsWidth to toolbarButtonsMinWidth

4f87f44

This local var needs to reflect that some of the toolbar buttons are now resizable, and what is represents the total min width of those buttons.

Use a constant for the push/fetch button width

3ed52eb

Replace the inline hardcoded value with a constant defined closer the other toolbar constants.

Fix typo in documentation

e9360f8

Rename vars related to push/pull button

32dbe77

More consistent with the `PushPullButton` type they relate to.

Make push pull toolbar button resizable

cce104e

Set min width for the branches container

9724c31

Prevents the branches dropdown container from becoming too narrow when branch names are not long enough.

Add vertical spacing around branches and pr list empty states

5e0b5cf

With the empty states centered on the container, their imagery would get uncomfortably close to the top. This introduces some spacing on top and bottom to make layout more balanced.

Documentation for Branch dropdown dispatchers

5f233d6

Remove max width 65% for branch names

6657053

Branch names can expand to the available width in `.branches-list-item`.

Use foldoutStyle to control min and max width

d4f7558

New ToolboxDropdown.foldoutStyleOverrides property

9d7df28

Introduce the new property to avoid changing behavior of the existing `foldoutStyle` property. Whereas `foldoutStyle` replaces default style entirely, `foldoutStyleOverrides` is used to add to or override the default style properties.

tidy-dev added 2 commits September 10, 2024 10:46

Merge branch 'development' into pr/18095

54e3d0c

Make it so that the pull push fetch button isn't clipped on smallest …

628020a

…screen and max zoom

tidy-dev approved these changes Sep 10, 2024

View reviewed changes

sergiou87 approved these changes Sep 11, 2024

View reviewed changes

tidy-dev merged commit 782af8d into desktop:development Sep 11, 2024

tidy-dev mentioned this pull request Sep 11, 2024

Feature flag the resizable toolbars #19239

Merged

niik mentioned this pull request Sep 30, 2024

enableResizingToolbarButtons causes misaligned toolbar on Windows and macOS #19330

Closed

Conversation

jpedroso commented Jan 28, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Screenshots

Walkthrough of resizing the Branch and Push/Pull toolbar buttons, Branches/PR dropdown and empty states

Branches dropdown empty state

Minimum window size and maximum zoom

Max zoom, branches dropdown empty state

Release notes

Uh oh!

Choose a reason for hiding this comment

Uh oh!

jpedroso Jan 29, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Full width empty state

Fixed width empty state

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

jpedroso Jan 28, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

chronvas commented Feb 15, 2024

Uh oh!

jpedroso commented Apr 19, 2024

Uh oh!

tidy-dev commented Apr 19, 2024

Uh oh!

jpedroso commented May 10, 2024

Before (6657053)

After (9d7df28)

Uh oh!

tidy-dev left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

sergiou87 left a comment

Choose a reason for hiding this comment

Uh oh!

tidy-dev commented Sep 11, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Jay-o-Way commented Sep 11, 2024

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

jpedroso commented Jan 28, 2024 •

edited

Loading

jpedroso Jan 29, 2024 •

edited

Loading

jpedroso Jan 28, 2024 •

edited

Loading

Before (`6657053`)

After (`9d7df28`)

tidy-dev left a comment •

edited

Loading

tidy-dev commented Sep 11, 2024 •

edited

Loading