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

refactor: replace custom sync button with Tag component

Browse Source 
The custom sync button is replaced with the Tag component. The Tag
component is updated to support a loading state and help text. The
busy label is moved inside the Tag component. The custom sync button
styles are removed.
This commit is contained in:
Caleb Owens 2024-03-21 23:30:24 +01:00
parent 1bd2dfda2e
commit 39864eeb5a
2 changed files with 18 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

84
gitbutler-ui/src/lib/components/SyncButton.svelte
View File

@ -1,11 +1,10 @@
<script lang="ts">
import { syncToCloud } from '$lib/backend/cloud';
import { Project } from '$lib/backend/projects';
import Icon from '$lib/components/Icon.svelte';
import Tag from '$lib/components/Tag.svelte';
import TimeAgo from '$lib/components/TimeAgo.svelte';
import { GitHubService } from '$lib/github/service';
import { getContextByClass } from '$lib/utils/context';
import { tooltip } from '$lib/utils/tooltip';
import { BaseBranchService } from '$lib/vbranches/branchStoresCache';
const project = getContextByClass(Project);
@ -20,9 +19,14 @@
$: cloudEnabled = project?.api?.sync || false;
</script>
<button
class="sync-btn"
class:sync-btn-busy={$baseServiceBusy$}
<Tag
clickable
border
reversedDirection
color="ghost"
icon="update-small"
help="Last fetch from upstream"
loading={$baseServiceBusy$}
on:mousedown={async (e) => {
e.preventDefault();
e.stopPropagation();
@ -33,74 +37,14 @@
}
}}
>
{#if !$baseServiceBusy$}
<div class="sync-btn__icon">
<Icon name="update-small" />
</div>
{#if $baseServiceBusy$}
<div class="sync-btn__busy-label">busy…</div>
{:else if $baseBranch?.lastFetched}
<TimeAgo date={$baseBranch?.lastFetched} />
{/if}
<span class="text-base-11 text-semibold sync-btn__label" use:tooltip={'Last fetch from upstream'}>
{#if $baseServiceBusy$}
<div class="sync-btn__busy-label">busy…</div>
{:else if $baseBranch?.lastFetched}
<TimeAgo date={$baseBranch?.lastFetched} />
{/if}
</span>
</button>
</Tag>
<style lang="postcss">
.sync-btn {
display: flex;
align-items: center;
gap: var(--size-2);
height: var(--size-20);
padding-left: var(--size-2);
padding-right: var(--size-4);
background: var(--clr-theme-container-light);
border: 1px solid var(--clr-theme-container-outline-light);
border-radius: var(--radius-m);
cursor: pointer;
&.sync-btn-busy {
cursor: default;
}
transition:
background var(--transition-fast),
border var(--transition-fast);
&:hover {
background: var(--clr-theme-container-light);
border: 1px solid var(--clr-theme-container-outline-pale);
}
&:hover .sync-btn__icon {
fill: var(--clr-theme-scale-ntrl-40);
}
&:hover .sync-btn__label {
color: var(--clr-theme-scale-ntrl-40);
}
}
.sync-btn__icon {
display: flex;
color: var(--clr-theme-scale-ntrl-40);
transform-origin: center;
transform: rotate(0deg);
transition:
fill var(--transition-fast),
transform var(--transition-slow);
}
.sync-btn__label {
display: block;
line-height: 1;
white-space: nowrap;
color: var(--clr-theme-scale-ntrl-40);
transition: color var(--transition-fast);
}
.sync-btn__busy-label {
padding-left: var(--size-4);
}

5
gitbutler-ui/src/lib/components/Tag.svelte
View File

@ -25,6 +25,7 @@
export let clickable = false;
export let shrinkable = false;
export let verticalOrientation = false;
export let loading = false;
</script>
<div
@ -54,7 +55,9 @@
<span class="label" class:verticalLabel={verticalOrientation}>
<slot />
</span>
{#if icon}
{#if loading}
<Icon name="spinner" />
{:else if icon}
<div class="icon" class:verticalIcon={verticalOrientation}>
<Icon name={icon} spinnerRadius={3.5} />
</div>