mirror of
https://github.com/gitbutlerapp/gitbutler.git
synced 2024-12-12 07:13:34 +03:00
Pavel Laptev
GitHub
commit
2fd5c9ba7a
@ -6,10 +6,7 @@
|
||||
%sveltekit.head%
|
||||
</head>
|
||||
|
||||
<body
|
||||
class="text-color-2 h-full w-full cursor-default select-none overscroll-y-none font-sans text-base"
|
||||
style="height: 100vh; background-color: var(--bg-body)"
|
||||
>
|
||||
<body class="text-base">
|
||||
<div style="display: contents">%sveltekit.body%</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -120,5 +120,6 @@
|
||||
: `${width}px`
|
||||
: `${width}px`
|
||||
: undefined}
|
||||
style:cursor={direction == 'horizontal' ? 'ew-resize' : 'ns-resize'}
|
||||
class="shrink-0 {classes ? ` ${classes}` : ''}"
|
||||
/>
|
||||
|
||||
@ -26,19 +26,20 @@
|
||||
style:background-color={selected ? 'var(--clr-theme-container-pale)' : undefined}
|
||||
bind:this={baseContents}
|
||||
>
|
||||
<div class="card__icon">
|
||||
<div class="icon">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="16" height="16" rx="4" fill="#FB7D61" />
|
||||
<path d="M8 4L12 8L8 12L4 8L8 4Z" fill="white" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="card__content">
|
||||
<div class="card__row_1 text-base-13 font-bold">
|
||||
|
||||
<div class="content">
|
||||
<div class="row_1 text-base-13 font-bold">
|
||||
<span>Trunk</span>
|
||||
<Tooltip label="Unmerged upstream commits">
|
||||
<Badge count={$base$?.behind || 0} />
|
||||
</Tooltip>
|
||||
{#if ($base$?.behind || 0) > 0}
|
||||
<Tooltip label="Unmerged upstream commits">
|
||||
<Badge count={$base$?.behind || 0} />
|
||||
</Tooltip>
|
||||
<Tooltip label="Merge upstream commits into common base">
|
||||
<Button
|
||||
height="small"
|
||||
@ -60,9 +61,9 @@
|
||||
</Tooltip>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="card__row_2 text-base-12">
|
||||
<div class="row_2 text-base-12">
|
||||
{#if $base$?.remoteUrl.includes('github.com')}
|
||||
<IconGithub class="h-4 w-4" />
|
||||
<IconGithub class="h-3 w-3" />
|
||||
{:else}
|
||||
<Icon name="branch" />
|
||||
{/if}
|
||||
@ -76,27 +77,27 @@
|
||||
display: flex;
|
||||
gap: var(--space-10);
|
||||
padding: var(--space-8);
|
||||
border-radius: var(--m, 6px);
|
||||
border-radius: var(--radius-m);
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: var(--clr-theme-container-pale);
|
||||
}
|
||||
}
|
||||
.card__icon {
|
||||
.icon {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.card__content {
|
||||
.content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-8);
|
||||
}
|
||||
.card__row_1 {
|
||||
.row_1 {
|
||||
display: flex;
|
||||
gap: var(--space-6);
|
||||
align-items: center;
|
||||
color: var(--clr-theme-scale-ntrl-10);
|
||||
}
|
||||
.card__row_2 {
|
||||
.row_2 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-4);
|
||||
|
||||
@ -17,29 +17,40 @@
|
||||
</script>
|
||||
|
||||
<div data-tauri-drag-region class="header">
|
||||
<div class="header__sync text-base-11 font-semibold">
|
||||
<IconButton
|
||||
class="items-center justify-center align-top "
|
||||
on:click={async (e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
fetching = true;
|
||||
await branchController.fetchFromTarget().finally(() => {
|
||||
fetching = false;
|
||||
prService.reload();
|
||||
});
|
||||
}}
|
||||
>
|
||||
<div class:animate-spin={fetching}>
|
||||
<IconRefresh class="h-4 w-4" />
|
||||
</div>
|
||||
</IconButton>
|
||||
<button
|
||||
class="sync-btn"
|
||||
on:click={async (e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
fetching = true;
|
||||
await branchController.fetchFromTarget().finally(() => {
|
||||
fetching = false;
|
||||
prService.reload();
|
||||
});
|
||||
}}
|
||||
>
|
||||
{#if !fetching}
|
||||
<svg viewBox="0 0 12 12" class="sync-btn__icon" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M6 12C9.31371 12 12 9.31371 12 6C12 2.68629 9.31371 0 6 0C2.68629 0 0 2.68629 0 6C0 9.31371 2.68629 12 6 12ZM6 3.59999C4.67452 3.59999 3.6 4.67451 3.6 5.99999C3.6 7.32548 4.67452 8.39999 6 8.39999C6.71074 8.39999 7.34871 8.0918 7.78903 7.59985L8.68319 8.40014C8.02486 9.13568 7.06626 9.59999 6 9.59999C4.01178 9.59999 2.4 7.98822 2.4 5.99999C2.4 4.01177 4.01178 2.39999 6 2.39999C7.74209 2.39999 9.19517 3.63741 9.52824 5.28125H10.6719L8.88281 7.53906L7.09375 5.28125H8.29052C7.98509 4.3069 7.0751 3.59999 6 3.59999Z"
|
||||
/>
|
||||
</svg>
|
||||
{/if}
|
||||
|
||||
<Tooltip label="Last fetch from upstream">
|
||||
{#if $base$?.fetchedAt}
|
||||
<TimeAgo date={$base$.fetchedAt} />
|
||||
<span class="text-base-11 text-semibold sync-btn__label">
|
||||
{#if fetching}
|
||||
fetching...
|
||||
{:else}
|
||||
<TimeAgo date={$base$?.fetchedAt} />
|
||||
{/if}
|
||||
</span>
|
||||
{/if}
|
||||
</Tooltip>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<style lang="postcss">
|
||||
@ -48,17 +59,49 @@
|
||||
flex-shrink: 0;
|
||||
align-items: center;
|
||||
justify-content: right;
|
||||
color: var(--clr-theme-scale-ntrl-50);
|
||||
}
|
||||
.header__sync {
|
||||
|
||||
.sync-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-4);
|
||||
padding-top: var(--space-2);
|
||||
padding-bottom: var(--space-2);
|
||||
gap: var(--space-6);
|
||||
height: var(--space-20);
|
||||
padding-left: var(--space-6);
|
||||
padding-right: var(--space-6);
|
||||
background: var(--clr-theme-container-pale);
|
||||
border-radius: var(--radius-m);
|
||||
transition: background var(--transition-fast);
|
||||
|
||||
&:hover {
|
||||
background: var(--clr-theme-container-sub);
|
||||
}
|
||||
|
||||
&:hover .sync-btn__icon {
|
||||
fill: var(--clr-theme-scale-ntrl-40);
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
&:hover .sync-btn__label {
|
||||
color: var(--clr-theme-scale-ntrl-40);
|
||||
}
|
||||
}
|
||||
|
||||
.sync-btn__icon {
|
||||
fill: var(--clr-theme-scale-ntrl-50);
|
||||
width: var(--space-12);
|
||||
height: var(--space-12);
|
||||
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-50);
|
||||
transition: color var(--transition-fast);
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -27,7 +27,7 @@
|
||||
e.preventDefault();
|
||||
}}
|
||||
>
|
||||
{project.title}
|
||||
<span class="button__label text-base-14 text-bold">{project.title}</span>
|
||||
<div class="button__icon">
|
||||
<Icon name="select-chevron" />
|
||||
</div>
|
||||
@ -36,22 +36,24 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
<style lang="postcss">
|
||||
.wrapper {
|
||||
margin-top: var(--space-10);
|
||||
margin-bottom: var(--space-16);
|
||||
}
|
||||
|
||||
.button {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
padding: var(--space-12);
|
||||
|
||||
background-color: var(--clr-theme-container-pale);
|
||||
color: var(--clr-theme-scale-ntrl-0);
|
||||
font-weight: 700;
|
||||
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
transition: background-color var(--transition-fast);
|
||||
|
||||
&:focus,
|
||||
&:hover {
|
||||
background-color: var(--clr-theme-container-mid);
|
||||
@ -60,6 +62,13 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.button__label {
|
||||
flex-grow: 1;
|
||||
color: var(--clr-theme-scale-ntrl-0);
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.button__icon {
|
||||
color: var(--clr-theme-scale-ntrl-60);
|
||||
}
|
||||
|
||||
@ -10,11 +10,27 @@
|
||||
@tailwind utilities;
|
||||
|
||||
/* BOILERPLATE CSS */
|
||||
body {
|
||||
font-family: 'Inter', sans-serif;
|
||||
user-select: none;
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
overflow-y: hidden;
|
||||
padding: 0;
|
||||
color: var(--clr-theme-scale-ntrl-40);
|
||||
background-color: var(--bg-body);
|
||||
|
||||
/* optimise font rendering */
|
||||
-webkit-font-smoothing: antialiased;
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
|
||||
a,
|
||||
button {
|
||||
-webkit-user-select: none;
|
||||
-webkit-user-drag: none;
|
||||
-webkit-app-region: no-drag;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
input,
|
||||
|
||||
@ -1,11 +1,3 @@
|
||||
.text-semibold {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.text-bold {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
/* text Base Classes */
|
||||
.text-base-10 {
|
||||
font-family: var(--base-font-family);
|
||||
@ -144,3 +136,13 @@
|
||||
letter-spacing: 0;
|
||||
line-height: 100%;
|
||||
}
|
||||
|
||||
/* modifiers */
|
||||
|
||||
.text-semibold {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.text-bold {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
@ -216,6 +216,9 @@
|
||||
--space-48: 3rem; /* 48px / 16px = 3rem */
|
||||
--space-56: 3.5rem; /* 56px / 16px = 3.5rem */
|
||||
--space-64: 4rem; /* 64px / 16px = 4rem */
|
||||
--transition-fast: 0.05s ease-in-out;
|
||||
--transition-medium: 0.1s ease-in-out;
|
||||
--transition-slow: 0.25s ease-in-out;
|
||||
}
|
||||
|
||||
:root.dark {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user