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

Commit box animation updated

Browse Source
This commit is contained in:
Pavel Laptev 2023-12-17 00:23:16 +01:00 committed by GitButler
parent 8f0c393ceb
commit 33f9e54b74
1 changed files with 76 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

141
packages/ui/src/routes/[projectId]/components/CommitDialog.svelte
View File

@ -1,6 +1,6 @@
<script lang="ts"> <script lang="ts">
import * as toasts from '$lib/utils/toasts'; import * as toasts from '$lib/utils/toasts';
import { slide } from 'svelte/transition'; import { slide, fade } from 'svelte/transition';
import { invoke } from '@tauri-apps/api/tauri'; import { invoke } from '@tauri-apps/api/tauri';
import type { BranchController } from '$lib/vbranches/branchController'; import type { BranchController } from '$lib/vbranches/branchController';
import type { Branch, File } from '$lib/vbranches/types'; import type { Branch, File } from '$lib/vbranches/types';
@ -113,74 +113,78 @@
let contextMenu: ContextMenu; let contextMenu: ContextMenu;
</script> </script>
<div class="commit-box"> <div class="commit-box" class:commit-box__expanded={$expanded}>
{#if $expanded} {#if $expanded}
<div class="commit-box__expander" transition:slide={{ duration: 250 }}> <div in:fade={{ duration: 200, delay: 50 }}>
<div class="commit-box__textarea"> <div class="commit-box__expander" in:slide={{ duration: 200 }}>
<TextArea <div class="commit-box__textarea">
bind:value={commitMessage} <TextArea
kind="plain" bind:value={commitMessage}
rows={messageRows} kind="plain"
disabled={isGeneratingCommigMessage} rows={messageRows}
placeholder="Your commit message here" disabled={isGeneratingCommigMessage}
/> placeholder="Your commit message here"
<Tooltip />
label={$aiGenEnabled && user <Tooltip
? undefined label={$aiGenEnabled && user
: 'You must be logged in and have summary generation enabled to use this feature'} ? undefined
> : 'You must be logged in and have summary generation enabled to use this feature'}
<DropDown
kind="outlined"
icon="ai-small"
color="neutral"
disabled={!$aiGenEnabled || !user}
loading={isGeneratingCommigMessage}
on:click={() => generateCommitMessage(branch.files)}
>
Generate message
<ContextMenu type="checklist" slot="context-menu" bind:this={contextMenu}>
<ContextMenuSection>
<ContextMenuItem
checked={$commitGenerationExtraConcise}
label="Extra concise"
on:click={() => ($commitGenerationExtraConcise = !$commitGenerationExtraConcise)}
/>
<ContextMenuItem
checked={$commitGenerationUseEmojis}
label="Use emojis 😎"
on:click={() => ($commitGenerationUseEmojis = !$commitGenerationUseEmojis)}
/>
</ContextMenuSection>
</ContextMenu>
</DropDown>
</Tooltip>
</div>
{#if annotateCommits}
<div class="commit-box__committer text-base-11">
GitButler will be the committer of this commit. <a
class="text-bold"
target="_blank"
rel="noreferrer"
href="https://docs.gitbutler.com/features/virtual-branches/committer-mark">Learn more</a
> >
<DropDown
kind="outlined"
icon="ai-small"
color="neutral"
disabled={!$aiGenEnabled || !user}
loading={isGeneratingCommigMessage}
on:click={() => generateCommitMessage(branch.files)}
>
Generate message
<ContextMenu type="checklist" slot="context-menu" bind:this={contextMenu}>
<ContextMenuSection>
<ContextMenuItem
checked={$commitGenerationExtraConcise}
label="Extra concise"
on:click={() =>
($commitGenerationExtraConcise = !$commitGenerationExtraConcise)}
/>
<ContextMenuItem
checked={$commitGenerationUseEmojis}
label="Use emojis 😎"
on:click={() => ($commitGenerationUseEmojis = !$commitGenerationUseEmojis)}
/>
</ContextMenuSection>
</ContextMenu>
</DropDown>
</Tooltip>
</div> </div>
{/if} {#if annotateCommits}
<div class="commit-box__committer text-base-11">
GitButler will be the committer of this commit. <a
class="text-bold"
target="_blank"
rel="noreferrer"
href="https://docs.gitbutler.com/features/virtual-branches/committer-mark"
>Learn more</a
>
</div>
{/if}
</div>
</div> </div>
{/if} {/if}
<div class="actions"> <div class="actions">
{#if $expanded && !isCommitting} {#if $expanded && !isCommitting}
<div transition:slide={{ duration: 250, axis: 'x' }} style="margin-right: var(--space-6)"> <!-- <div transition:slide={{ duration: 250, axis: 'x' }} style="margin-right: var(--space-6)"> -->
<Button <Button
color="neutral" color="neutral"
kind="outlined" kind="outlined"
id="commit-to-branch" id="commit-to-branch"
on:click={() => { on:click={() => {
$expanded = false; $expanded = false;
}} }}
> >
Cancel Cancel
</Button> </Button>
</div> <!-- </div> -->
{/if} {/if}
<Button <Button
grow grow
@ -198,7 +202,7 @@
} }
}} }}
> >
Commit {$expanded ? 'Commit' : 'Commit changes'}
</Button> </Button>
</div> </div>
</div> </div>
@ -208,8 +212,9 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: var(--space-16); padding: var(--space-16);
background: var(--clr-theme-container-pale); background: var(--clr-theme-container-light);
border-top: 1px solid var(--clr-theme-container-outline-light); border-top: 1px solid var(--clr-theme-container-outline-light);
transition: background-color var(--transition-medium);
} }
.commit-box__expander { .commit-box__expander {
display: flex; display: flex;
@ -243,11 +248,17 @@
border-width: 0 1px 1px 1px; border-width: 0 1px 1px 1px;
border-style: solid; border-style: solid;
border-color: var(--clr-theme-container-outline-light); border-color: var(--clr-theme-container-outline-light);
border-radius: 0 0 var(--radius-s) var(--radius-s); border-radius: 0 0 var(--radius-m) var(--radius-m);
} }
.actions { .actions {
display: flex; display: flex;
justify-content: right; justify-content: right;
gap: var(--space-6);
}
/* modifiers */
.commit-box__expanded {
background-color: var(--clr-theme-container-pale);
} }
</style> </style>