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

Added a nice animation

Browse Source
This commit is contained in:
Ian Donahue 2023-04-04 11:44:45 +02:00
parent 15201d9f8d
commit 4a29c592bd
1 changed files with 65 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

69
src/routes/projects/[projectId]/commit/+page.svelte
View File

@ -1,12 +1,14 @@
<script lang="ts">
import type { PageData } from './$types';
import { Button } from '$lib/components';
import { collapsable } from '$lib/paths';
import { derived, writable } from 'svelte/store';
import * as git from '$lib/git';
import DiffViewer from '$lib/components/DiffViewer.svelte';
import { error, success } from '$lib/toasts';
import { fade, fly } from 'svelte/transition';
import { IconRotateClockwise } from '$lib/components/icons';
import { Button } from '$lib/components';
export let data: PageData;
const { statuses, diffs, user, api, projectId } = data;
@ -182,8 +184,13 @@
<div class="commit-description-container relative">
{#if isGeneratingCommitMessage}
<div class="generating-commit absolute top-1 left-1 rounded bg-zinc-600 px-3 py-1">
✨ Summarizing changes...
<div in:fly="{{ y: 8, duration: 500 }}" out:fly="{{ y: -8, duration: 500 }}" class="generating-commit absolute top-2 left-2 rounded bg-[#583366] border-[0.5px] border-[#52305F] shadow px-3 py-1">
<span>✨ Summarizing changes</span>
<span class="dot-container">
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</span>
</div>
{/if}
<textarea
@ -209,7 +216,7 @@
"
>
<IconRotateClockwise class="h-5 w-5 animate-spin" />
<span>Generating commit message...</span>
Generating commit message
</div>
{:else}
<button
@ -260,3 +267,57 @@
{/if}
</div>
</div>
<style>
/**
* ==============================================
* Dot Typing
* ==============================================
*/
dot-container {
display:flex;
justify-content:center;
}
.dot-container{
padding-left: 4px;
padding-bottom: 3px;
}
.dot {
@apply bg-zinc-200;
display: inline-block;
width: 3px;
height: 3px;
border-radius: 50%;
position: relative;
bottom: 3px;
}
.dot-container .dot:nth-last-child(1) {
animation: jumpingAnimation 1.2s 0.6s linear infinite;
}
.dot-container .dot:nth-last-child(2) {
animation: jumpingAnimation 1.2s 0.3s linear infinite;
}
.dot-container .dot:nth-last-child(3) {
animation: jumpingAnimation 1.2s 0s linear infinite;
}
@keyframes jumpingAnimation {
0% {
transform: translate(0, 0);
}
16% {
transform: translate(0, -5px);
}
33% {
transform: translate(0, 0);
}
100% {
transform: translate(0, 0);
}
}
</style>