gitbutlerapp/gitbutler
1
1
Fork 0
mirror of https://github.com/gitbutlerapp/gitbutler.git synced 2024-11-24 05:29:51 +03:00
Code Issues Packages Projects Releases Wiki Activity

Use modified branch header whens stacking is enabled

Browse Source
This commit is contained in:
Mattias Granlund 2024-09-11 16:11:19 +02:00
parent 3c61856481
commit 35b3991ab8
2 changed files with 135 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

173
apps/desktop/src/lib/branch/BranchHeader.svelte
View File

@ -2,10 +2,12 @@
import ActiveBranchStatus from './ActiveBranchStatus.svelte';
import BranchLabel from './BranchLabel.svelte';
import BranchLaneContextMenu from './BranchLaneContextMenu.svelte';
import DefaultTargetButton from './DefaultTargetButton.svelte';
import PullRequestButton from '../pr/PullRequestButton.svelte';
import { BaseBranch } from '$lib/baseBranch/baseBranch';
import { BaseBranchService } from '$lib/baseBranch/baseBranchService';
import ContextMenu from '$lib/components/contextmenu/ContextMenu.svelte';
import { featureBranchStacking } from '$lib/config/uiFeatureFlags';
import { mapErrorToToast } from '$lib/gitHost/github/errorMap';
import { getGitHost } from '$lib/gitHost/interface/gitHost';
import { getGitHostListingService } from '$lib/gitHost/interface/gitHostListingService';
@ -44,6 +46,8 @@
const branch = $derived($branchStore);
const pr = $derived($prMonitor?.pr);
const branchStacking = featureBranchStacking();
let contextMenu = $state<ContextMenu>();
let meatballButtonEl = $state<HTMLDivElement>();
let isLoading = $state(false);
@ -208,90 +212,101 @@
<Icon name="draggable" />
</div>
<div class="header__info">
<div class:header__info={!branchStacking} class:stacking-header__info={branchStacking}>
<BranchLabel name={branch.name} onChange={(name) => handleBranchNameChange(name)} />
<div class="header__remote-branch">
<ActiveBranchStatus
{hasIntegratedCommits}
remoteExists={!!branch.upstream}
isLaneCollapsed={$isLaneCollapsed}
/>
{#if branchStacking}
<span class="button-group">
<DefaultTargetButton
selectedForChanges={branch.selectedForChanges}
onclick={async () => {
isTargetBranchAnimated = true;
await branchController.setSelectedForChanges(branch.id);
}}
/>
<Button
bind:el={meatballButtonEl}
style="ghost"
icon="kebab"
onclick={() => {
contextMenu?.toggle();
}}
/>
<BranchLaneContextMenu
bind:contextMenuEl={contextMenu}
target={meatballButtonEl}
onCollapse={collapseLane}
{onGenerateBranchName}
/>
</span>
{:else}
<div class="header__remote-branch">
<ActiveBranchStatus
{hasIntegratedCommits}
remoteExists={!!branch.upstream}
isLaneCollapsed={$isLaneCollapsed}
/>
{#await branch.isMergeable then isMergeable}
{#if !isMergeable}
<Button
size="tag"
clickable={false}
icon="locked-small"
style="warning"
tooltip="Applying this branch will add merge conflict markers that you will have to resolve"
>
Conflict
</Button>
{/if}
{/await}
</div>
{#await branch.isMergeable then isMergeable}
{#if !isMergeable}
<Button
size="tag"
clickable={false}
icon="locked-small"
style="warning"
tooltip="Applying this branch will add merge conflict markers that you will have to resolve"
>
Conflict
</Button>
{/if}
{/await}
</div>
{/if}
</div>
</div>
<div class="header__actions">
<div class="header__buttons">
{#if branch.selectedForChanges}
<Button
style="pop"
kind="soft"
tooltip="New changes will land here"
icon="target"
clickable={false}
>
Default branch
</Button>
{:else}
<Button
style="ghost"
outline
tooltip="When selected, new changes land here"
icon="target"
{#if !branchStacking}
<div class="header__actions">
<div class="header__buttons">
<DefaultTargetButton
selectedForChanges={branch.selectedForChanges}
onclick={async () => {
isTargetBranchAnimated = true;
await branchController.setSelectedForChanges(branch.id);
}}
>
Set as default
</Button>
{/if}
</div>
<div class="relative">
<div class="header__buttons">
{#if !$pr}
<PullRequestButton
click={async ({ draft }) => await createPr({ draft })}
disabled={branch.commits.length === 0 || !$gitHost || !$prService}
tooltip={!$gitHost || !$prService
? 'You can enable git host integration in the settings'
: ''}
loading={isLoading}
/>
{/if}
<Button
bind:el={meatballButtonEl}
style="ghost"
outline
icon="kebab"
onclick={() => {
contextMenu?.toggle();
}}
/>
<BranchLaneContextMenu
bind:contextMenuEl={contextMenu}
target={meatballButtonEl}
onCollapse={collapseLane}
{onGenerateBranchName}
/>
</div>
<div class="relative">
<div class="header__buttons">
{#if !$pr}
<PullRequestButton
click={async ({ draft }) => await createPr({ draft })}
disabled={branch.commits.length === 0 || !$gitHost || !$prService}
tooltip={!$gitHost || !$prService
? 'You can enable git host integration in the settings'
: ''}
loading={isLoading}
/>
{/if}
<Button
bind:el={meatballButtonEl}
style="ghost"
outline
icon="kebab"
onclick={() => {
contextMenu?.toggle();
}}
/>
<BranchLaneContextMenu
bind:contextMenuEl={contextMenu}
target={meatballButtonEl}
onCollapse={collapseLane}
{onGenerateBranchName}
/>
</div>
</div>
</div>
</div>
{/if}
</div>
<div class="header__top-overlay" data-remove-from-draggable data-tauri-drag-region></div>
</div>
@ -362,6 +377,20 @@
overflow: hidden;
gap: 10px;
}
/* TODO: Remove me after stacking feature toggle has been removed. */
.stacking-header__info {
flex: 1;
display: flex;
overflow: hidden;
justify-content: space-between;
align-items: center;
gap: 10px;
}
.button-group {
display: flex;
align-items: center;
gap: 10px;
}
.header__actions {
display: flex;
gap: 4px;

34
apps/desktop/src/lib/branch/DefaultTargetButton.svelte Normal file
View File

@ -0,0 +1,34 @@
<script lang="ts">
import Button from '@gitbutler/ui/Button.svelte';
interface Props {
selectedForChanges: boolean;
onclick: () => void;
}
const { selectedForChanges }: Props = $props();
</script>
{#if selectedForChanges}
<Button
style="pop"
kind="soft"
tooltip="New changes will land here"
icon="target"
size="tag"
clickable={false}
>
Default branch
</Button>
{:else}
<Button
style="ghost"
outline
tooltip="When selected, new changes land here"
icon="target"
size="tag"
{onclick}
>
Set as default
</Button>
{/if}