From 91d0fca84afbddc01e4829da470d2f4cd22d329f Mon Sep 17 00:00:00 2001 From: Jorge Pedroso Date: Thu, 21 Sep 2023 09:57:21 +0300 Subject: [PATCH] Make toolbar branch dropdown button resizable --- app/src/lib/app-state.ts | 3 ++ app/src/lib/stores/app-store.ts | 29 ++++++++++++ app/src/ui/app.tsx | 1 + app/src/ui/dispatcher/dispatcher.ts | 8 ++++ app/src/ui/toolbar/branch-dropdown.tsx | 64 +++++++++++++++++--------- app/src/ui/toolbar/dropdown.tsx | 2 +- app/styles/ui/_branches.scss | 4 +- app/styles/ui/toolbar/_toolbar.scss | 2 +- 8 files changed, 87 insertions(+), 26 deletions(-) diff --git a/app/src/lib/app-state.ts b/app/src/lib/app-state.ts index cd99ca63d6..0a99bb95e3 100644 --- a/app/src/lib/app-state.ts +++ b/app/src/lib/app-state.ts @@ -185,6 +185,9 @@ export interface IAppState { /** The width of the files list in the pull request files changed view */ readonly pullRequestFilesListWidth: IConstrainedValue + /** The width of the resizable branch drop down button in the toolbar. */ + readonly branchDropdownWidth: IConstrainedValue + /** * Used to highlight access keys throughout the app when the * Alt key is pressed. Only applicable on non-macOS platforms. diff --git a/app/src/lib/stores/app-store.ts b/app/src/lib/stores/app-store.ts index 1dab7acd59..bfdcee71a5 100644 --- a/app/src/lib/stores/app-store.ts +++ b/app/src/lib/stores/app-store.ts @@ -358,6 +358,9 @@ const stashedFilesWidthConfigKey: string = 'stashed-files-width' const defaultPullRequestFileListWidth: number = 250 const pullRequestFileListConfigKey: string = 'pull-request-files-width' +const defaultBranchDropdownWidth: number = 230 +const branchDropdownWidthConfigKey: string = 'branch-dropdown-width' + const askToMoveToApplicationsFolderDefault: boolean = true const confirmRepoRemovalDefault: boolean = true const showCommitLengthWarningDefault: boolean = false @@ -475,6 +478,7 @@ export class AppStore extends TypedBaseStore { private commitSummaryWidth = constrain(defaultCommitSummaryWidth) private stashedFilesWidth = constrain(defaultStashedFilesWidth) private pullRequestFileListWidth = constrain(defaultPullRequestFileListWidth) + private branchDropdownWidth = constrain(defaultBranchDropdownWidth) private windowState: WindowState | null = null private windowZoomFactor: number = 1 @@ -994,6 +998,7 @@ export class AppStore extends TypedBaseStore { focusCommitMessage: this.focusCommitMessage, emoji: this.emoji, sidebarWidth: this.sidebarWidth, + branchDropdownWidth: this.branchDropdownWidth, commitSummaryWidth: this.commitSummaryWidth, stashedFilesWidth: this.stashedFilesWidth, pullRequestFilesListWidth: this.pullRequestFileListWidth, @@ -2112,6 +2117,9 @@ export class AppStore extends TypedBaseStore { this.pullRequestFileListWidth = constrain( getNumber(pullRequestFileListConfigKey, defaultPullRequestFileListWidth) ) + this.branchDropdownWidth = constrain( + getNumber(branchDropdownWidthConfigKey, defaultBranchDropdownWidth) + ) this.updateResizableConstraints() // TODO: Initiliaze here for now... maybe move to dialog mounting @@ -5165,6 +5173,27 @@ export class AppStore extends TypedBaseStore { return Promise.resolve() } + public _setBranchDropdownWidth(width: number): Promise { + this.branchDropdownWidth = { ...this.branchDropdownWidth, value: width } + setNumber(branchDropdownWidthConfigKey, width) + this.updateResizableConstraints() + this.emitUpdate() + + return Promise.resolve() + } + + public _resetBranchDropdownWidth(): Promise { + this.branchDropdownWidth = { + ...this.branchDropdownWidth, + value: defaultBranchDropdownWidth, + } + localStorage.removeItem(branchDropdownWidthConfigKey) + this.updateResizableConstraints() + this.emitUpdate() + + return Promise.resolve() + } + public _setCommitSummaryWidth(width: number): Promise { this.commitSummaryWidth = { ...this.commitSummaryWidth, value: width } setNumber(commitSummaryWidthConfigKey, width) diff --git a/app/src/ui/app.tsx b/app/src/ui/app.tsx index 5b9393bf6f..d5c36f032d 100644 --- a/app/src/ui/app.tsx +++ b/app/src/ui/app.tsx @@ -3211,6 +3211,7 @@ export class App extends React.Component { { + return this.appStore._setBranchDropdownWidth(width) + } + + public resetBranchDropdownWidth(): Promise { + return this.appStore._resetBranchDropdownWidth() + } + /** * Set the update banner's visibility */ diff --git a/app/src/ui/toolbar/branch-dropdown.tsx b/app/src/ui/toolbar/branch-dropdown.tsx index fe063a8f78..12cb594871 100644 --- a/app/src/ui/toolbar/branch-dropdown.tsx +++ b/app/src/ui/toolbar/branch-dropdown.tsx @@ -3,10 +3,12 @@ import { Dispatcher } from '../dispatcher' import * as octicons from '../octicons/octicons.generated' import { OcticonSymbol, syncClockwise } from '../octicons' import { Repository } from '../../models/repository' +import { Resizable } from '../resizable' import { TipState } from '../../models/tip' import { ToolbarDropdown, DropdownState } from './dropdown' import { FoldoutType, + IConstrainedValue, IRepositoryState, isRebaseConflictState, } from '../../lib/app-state' @@ -33,6 +35,9 @@ interface IBranchDropdownProps { /** The current repository state as derived from AppState */ readonly repositoryState: IRepositoryState + /** The width of the resisable branch drop down button, as derived from AppState. */ + readonly branchDropdownWidth: IConstrainedValue + /** Whether or not the branch dropdown is currently open */ readonly isOpen: boolean @@ -190,33 +195,48 @@ export class BranchDropdown extends React.Component { return ( <> - - {this.renderPullRequestInfo()} - - {this.props.showCIStatusPopover && this.renderPopover()} + + {this.renderPullRequestInfo()} + + {this.props.showCIStatusPopover && this.renderPopover()} + ) } + private onResize = (width: number) => { + this.props.dispatcher.setBranchDropdownWidth(width) + } + + private onReset = () => { + this.props.dispatcher.resetBranchDropdownWidth() + } + /** * Method to capture when the mouse is over the branch dropdown button. * diff --git a/app/src/ui/toolbar/dropdown.tsx b/app/src/ui/toolbar/dropdown.tsx index ae2d5dae11..db4df1ce37 100644 --- a/app/src/ui/toolbar/dropdown.tsx +++ b/app/src/ui/toolbar/dropdown.tsx @@ -352,7 +352,7 @@ export class ToolbarDropdown extends React.Component< } return { - position: 'absolute', + position: 'fixed', top: rect.bottom, left: 0, width: '100%', diff --git a/app/styles/ui/_branches.scss b/app/styles/ui/_branches.scss index a0d88ec264..5e54d24620 100644 --- a/app/styles/ui/_branches.scss +++ b/app/styles/ui/_branches.scss @@ -4,14 +4,14 @@ height: 100%; display: flex; flex-direction: column; - width: 365px; + width: 100%; & > .tab-bar { border-top: var(--base-border); } .branches-list { - width: 365px; + width: 100%; min-height: 0; } diff --git a/app/styles/ui/toolbar/_toolbar.scss b/app/styles/ui/toolbar/_toolbar.scss index c4ef988a71..cc0f7d3ffb 100644 --- a/app/styles/ui/toolbar/_toolbar.scss +++ b/app/styles/ui/toolbar/_toolbar.scss @@ -39,7 +39,7 @@ .toolbar-button { &.branch-toolbar-button { - width: 230px; + width: 100%; } &.revert-progress { width: 230px;