Allow resizing Branch and Push/Pull toolbar buttons #18095

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

-      position: 'absolute',
+      position: 'fixed',


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

-  width: 365px;
+  min-width: 365px;
+  width: 100%;


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

-    width: 365px;
+    width: 100%;


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

@@ -198,6 +199,7 @@

 .no-pull-requests {
  width: 365px;
+  margin: var(--spacing) auto;


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

+  width: 365px;
+  margin: var(--spacing) auto;
  display: flex;
-  flex: 1;


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

    }
    &.revert-progress {
      width: 230px;
    }
    &.toolbar-dropdown-arrow-button {
      width: 39px;
+      flex-shrink: 0;


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

-      width: 230px;
+      width: 100%;
    }
  }

  .toolbar-button {
    &.branch-toolbar-button {
-      width: 230px;
+      width: 100%;


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.

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`)

This was referenced Jan 28, 2024

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

Open

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

Open

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

jpedroso force-pushed the resizable-branch-dropdown-button branch from f379c37 to b554ec1 Compare January 28, 2024 20:22

jpedroso commented Jan 28, 2024

View reviewed changes

jpedroso force-pushed the resizable-branch-dropdown-button branch 2 times, most recently from 81c707e to 3fca175 Compare February 23, 2024 08:59

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.

jpedroso force-pushed the resizable-branch-dropdown-button branch from 3fca175 to 9d7df28 Compare May 10, 2024 10:32

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Allow resizing Branch and Push/Pull toolbar buttons #18095

Allow resizing Branch and Push/Pull toolbar buttons #18095

jpedroso commented Jan 28, 2024 •

edited

jpedroso Jan 28, 2024

jpedroso Jan 29, 2024 •

edited

jpedroso Jan 28, 2024

jpedroso Jan 28, 2024

jpedroso Jan 28, 2024

jpedroso Jan 28, 2024

jpedroso Jan 28, 2024

jpedroso Jan 28, 2024

jpedroso Jan 28, 2024 •

edited

chronvas commented Feb 15, 2024

jpedroso commented Apr 19, 2024

tidy-dev commented Apr 19, 2024

jpedroso commented May 10, 2024

Allow resizing Branch and Push/Pull toolbar buttons #18095

Are you sure you want to change the base?

Allow resizing Branch and Push/Pull toolbar buttons #18095

Conversation

jpedroso commented Jan 28, 2024 • edited

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

jpedroso Jan 28, 2024

Choose a reason for hiding this comment

jpedroso Jan 29, 2024 • edited

Choose a reason for hiding this comment

jpedroso Jan 28, 2024

Choose a reason for hiding this comment

jpedroso Jan 28, 2024

Choose a reason for hiding this comment

jpedroso Jan 28, 2024

Choose a reason for hiding this comment

jpedroso Jan 28, 2024

Choose a reason for hiding this comment

Full width empty state

Fixed width empty state

jpedroso Jan 28, 2024

Choose a reason for hiding this comment

jpedroso Jan 28, 2024

Choose a reason for hiding this comment

jpedroso Jan 28, 2024 • edited

Choose a reason for hiding this comment

chronvas commented Feb 15, 2024

jpedroso commented Apr 19, 2024

tidy-dev commented Apr 19, 2024

jpedroso commented May 10, 2024

Before (6657053)

After (9d7df28)

jpedroso commented Jan 28, 2024 •

edited

jpedroso Jan 29, 2024 •

edited

jpedroso Jan 28, 2024 •

edited

Before (`6657053`)

After (`9d7df28`)