mirror of
https://github.com/gitbutlerapp/gitbutler.git
synced 2024-12-24 10:02:26 +03:00
Merge pull request #3270 from gitbutlerapp/refactor-sync-button-to-use-tag
refactor: replace custom sync button with Tag component
This commit is contained in:
commit
61d6c678fc
@ -1,11 +1,10 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { syncToCloud } from '$lib/backend/cloud';
|
import { syncToCloud } from '$lib/backend/cloud';
|
||||||
import { Project } from '$lib/backend/projects';
|
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 TimeAgo from '$lib/components/TimeAgo.svelte';
|
||||||
import { GitHubService } from '$lib/github/service';
|
import { GitHubService } from '$lib/github/service';
|
||||||
import { getContextByClass } from '$lib/utils/context';
|
import { getContextByClass } from '$lib/utils/context';
|
||||||
import { tooltip } from '$lib/utils/tooltip';
|
|
||||||
import { BaseBranchService } from '$lib/vbranches/branchStoresCache';
|
import { BaseBranchService } from '$lib/vbranches/branchStoresCache';
|
||||||
|
|
||||||
const project = getContextByClass(Project);
|
const project = getContextByClass(Project);
|
||||||
@ -20,9 +19,14 @@
|
|||||||
$: cloudEnabled = project?.api?.sync || false;
|
$: cloudEnabled = project?.api?.sync || false;
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<button
|
<Tag
|
||||||
class="sync-btn"
|
clickable
|
||||||
class:sync-btn-busy={$baseServiceBusy$}
|
border
|
||||||
|
reversedDirection
|
||||||
|
color="ghost"
|
||||||
|
icon="update-small"
|
||||||
|
help="Last fetch from upstream"
|
||||||
|
loading={$baseServiceBusy$}
|
||||||
on:mousedown={async (e) => {
|
on:mousedown={async (e) => {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
e.stopPropagation();
|
e.stopPropagation();
|
||||||
@ -33,74 +37,14 @@
|
|||||||
}
|
}
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{#if !$baseServiceBusy$}
|
{#if $baseServiceBusy$}
|
||||||
<div class="sync-btn__icon">
|
<div class="sync-btn__busy-label">busy…</div>
|
||||||
<Icon name="update-small" />
|
{:else if $baseBranch?.lastFetched}
|
||||||
</div>
|
<TimeAgo date={$baseBranch?.lastFetched} />
|
||||||
{/if}
|
{/if}
|
||||||
|
</Tag>
|
||||||
<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>
|
|
||||||
|
|
||||||
<style lang="postcss">
|
<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 {
|
.sync-btn__busy-label {
|
||||||
padding-left: var(--size-4);
|
padding-left: var(--size-4);
|
||||||
}
|
}
|
||||||
|
@ -25,6 +25,7 @@
|
|||||||
export let clickable = false;
|
export let clickable = false;
|
||||||
export let shrinkable = false;
|
export let shrinkable = false;
|
||||||
export let verticalOrientation = false;
|
export let verticalOrientation = false;
|
||||||
|
export let loading = false;
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div
|
<div
|
||||||
@ -54,7 +55,9 @@
|
|||||||
<span class="label" class:verticalLabel={verticalOrientation}>
|
<span class="label" class:verticalLabel={verticalOrientation}>
|
||||||
<slot />
|
<slot />
|
||||||
</span>
|
</span>
|
||||||
{#if icon}
|
{#if loading}
|
||||||
|
<Icon name="spinner" />
|
||||||
|
{:else if icon}
|
||||||
<div class="icon" class:verticalIcon={verticalOrientation}>
|
<div class="icon" class:verticalIcon={verticalOrientation}>
|
||||||
<Icon name={icon} spinnerRadius={3.5} />
|
<Icon name={icon} spinnerRadius={3.5} />
|
||||||
</div>
|
</div>
|
||||||
|
Loading…
Reference in New Issue
Block a user