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

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

@ -1,6 +1,6 @@
<script lang="ts">
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 type { BranchController } from '$lib/vbranches/branchController';
import type { Branch, File } from '$lib/vbranches/types';
@ -113,9 +113,10 @@
let contextMenu: ContextMenu;
</script>
<div class="commit-box">
<div class="commit-box" class:commit-box__expanded={$expanded}>
{#if $expanded}
<div class="commit-box__expander" transition:slide={{ duration: 250 }}>
<div in:fade={{ duration: 200, delay: 50 }}>
<div class="commit-box__expander" in:slide={{ duration: 200 }}>
<div class="commit-box__textarea">
<TextArea
bind:value={commitMessage}
@ -143,7 +144,8 @@
<ContextMenuItem
checked={$commitGenerationExtraConcise}
label="Extra concise"
on:click={() => ($commitGenerationExtraConcise = !$commitGenerationExtraConcise)}
on:click={() =>
($commitGenerationExtraConcise = !$commitGenerationExtraConcise)}
/>
<ContextMenuItem
checked={$commitGenerationUseEmojis}
@ -161,15 +163,17 @@
class="text-bold"
target="_blank"
rel="noreferrer"
href="https://docs.gitbutler.com/features/virtual-branches/committer-mark">Learn more</a
href="https://docs.gitbutler.com/features/virtual-branches/committer-mark"
>Learn more</a
>
</div>
{/if}
</div>
</div>
{/if}
<div class="actions">
{#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
color="neutral"
kind="outlined"
@ -180,7 +184,7 @@
>
Cancel
</Button>
</div>
<!-- </div> -->
{/if}
<Button
grow
@ -198,7 +202,7 @@
}
}}
>
Commit
{$expanded ? 'Commit' : 'Commit changes'}
</Button>
</div>
</div>
@ -208,8 +212,9 @@
display: flex;
flex-direction: column;
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);
transition: background-color var(--transition-medium);
}
.commit-box__expander {
display: flex;
@ -243,11 +248,17 @@
border-width: 0 1px 1px 1px;
border-style: solid;
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 {
display: flex;
justify-content: right;
gap: var(--space-6);
}
/* modifiers */
.commit-box__expanded {
background-color: var(--clr-theme-container-pale);
}
</style>