mirror of
https://github.com/gitbutlerapp/gitbutler.git
synced 2024-12-13 23:48:07 +03:00
commit
2fd5c9ba7a
packages/ui/src
@ -6,10 +6,7 @@
|
|||||||
%sveltekit.head%
|
%sveltekit.head%
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body
|
<body class="text-base">
|
||||||
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)"
|
|
||||||
>
|
|
||||||
<div style="display: contents">%sveltekit.body%</div>
|
<div style="display: contents">%sveltekit.body%</div>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
@ -120,5 +120,6 @@
|
|||||||
: `${width}px`
|
: `${width}px`
|
||||||
: `${width}px`
|
: `${width}px`
|
||||||
: undefined}
|
: undefined}
|
||||||
|
style:cursor={direction == 'horizontal' ? 'ew-resize' : 'ns-resize'}
|
||||||
class="shrink-0 {classes ? ` ${classes}` : ''}"
|
class="shrink-0 {classes ? ` ${classes}` : ''}"
|
||||||
/>
|
/>
|
||||||
|
@ -26,19 +26,20 @@
|
|||||||
style:background-color={selected ? 'var(--clr-theme-container-pale)' : undefined}
|
style:background-color={selected ? 'var(--clr-theme-container-pale)' : undefined}
|
||||||
bind:this={baseContents}
|
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">
|
<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" />
|
<rect width="16" height="16" rx="4" fill="#FB7D61" />
|
||||||
<path d="M8 4L12 8L8 12L4 8L8 4Z" fill="white" />
|
<path d="M8 4L12 8L8 12L4 8L8 4Z" fill="white" />
|
||||||
</svg>
|
</svg>
|
||||||
</div>
|
</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>
|
<span>Trunk</span>
|
||||||
<Tooltip label="Unmerged upstream commits">
|
|
||||||
<Badge count={$base$?.behind || 0} />
|
|
||||||
</Tooltip>
|
|
||||||
{#if ($base$?.behind || 0) > 0}
|
{#if ($base$?.behind || 0) > 0}
|
||||||
|
<Tooltip label="Unmerged upstream commits">
|
||||||
|
<Badge count={$base$?.behind || 0} />
|
||||||
|
</Tooltip>
|
||||||
<Tooltip label="Merge upstream commits into common base">
|
<Tooltip label="Merge upstream commits into common base">
|
||||||
<Button
|
<Button
|
||||||
height="small"
|
height="small"
|
||||||
@ -60,9 +61,9 @@
|
|||||||
</Tooltip>
|
</Tooltip>
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
<div class="card__row_2 text-base-12">
|
<div class="row_2 text-base-12">
|
||||||
{#if $base$?.remoteUrl.includes('github.com')}
|
{#if $base$?.remoteUrl.includes('github.com')}
|
||||||
<IconGithub class="h-4 w-4" />
|
<IconGithub class="h-3 w-3" />
|
||||||
{:else}
|
{:else}
|
||||||
<Icon name="branch" />
|
<Icon name="branch" />
|
||||||
{/if}
|
{/if}
|
||||||
@ -76,27 +77,27 @@
|
|||||||
display: flex;
|
display: flex;
|
||||||
gap: var(--space-10);
|
gap: var(--space-10);
|
||||||
padding: var(--space-8);
|
padding: var(--space-8);
|
||||||
border-radius: var(--m, 6px);
|
border-radius: var(--radius-m);
|
||||||
&:hover,
|
&:hover,
|
||||||
&:focus {
|
&:focus {
|
||||||
background-color: var(--clr-theme-container-pale);
|
background-color: var(--clr-theme-container-pale);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.card__icon {
|
.icon {
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
.card__content {
|
.content {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: var(--space-8);
|
gap: var(--space-8);
|
||||||
}
|
}
|
||||||
.card__row_1 {
|
.row_1 {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: var(--space-6);
|
gap: var(--space-6);
|
||||||
align-items: center;
|
align-items: center;
|
||||||
color: var(--clr-theme-scale-ntrl-10);
|
color: var(--clr-theme-scale-ntrl-10);
|
||||||
}
|
}
|
||||||
.card__row_2 {
|
.row_2 {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: var(--space-4);
|
gap: var(--space-4);
|
||||||
|
@ -17,29 +17,40 @@
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div data-tauri-drag-region class="header">
|
<div data-tauri-drag-region class="header">
|
||||||
<div class="header__sync text-base-11 font-semibold">
|
<button
|
||||||
<IconButton
|
class="sync-btn"
|
||||||
class="items-center justify-center align-top "
|
on:click={async (e) => {
|
||||||
on:click={async (e) => {
|
e.preventDefault();
|
||||||
e.preventDefault();
|
e.stopPropagation();
|
||||||
e.stopPropagation();
|
fetching = true;
|
||||||
fetching = true;
|
await branchController.fetchFromTarget().finally(() => {
|
||||||
await branchController.fetchFromTarget().finally(() => {
|
fetching = false;
|
||||||
fetching = false;
|
prService.reload();
|
||||||
prService.reload();
|
});
|
||||||
});
|
}}
|
||||||
}}
|
>
|
||||||
>
|
{#if !fetching}
|
||||||
<div class:animate-spin={fetching}>
|
<svg viewBox="0 0 12 12" class="sync-btn__icon" xmlns="http://www.w3.org/2000/svg">
|
||||||
<IconRefresh class="h-4 w-4" />
|
<path
|
||||||
</div>
|
fill-rule="evenodd"
|
||||||
</IconButton>
|
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">
|
<Tooltip label="Last fetch from upstream">
|
||||||
{#if $base$?.fetchedAt}
|
{#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}
|
{/if}
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
</div>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<style lang="postcss">
|
<style lang="postcss">
|
||||||
@ -48,17 +59,49 @@
|
|||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: right;
|
justify-content: right;
|
||||||
color: var(--clr-theme-scale-ntrl-50);
|
|
||||||
}
|
}
|
||||||
.header__sync {
|
|
||||||
|
.sync-btn {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: var(--space-4);
|
gap: var(--space-6);
|
||||||
padding-top: var(--space-2);
|
height: var(--space-20);
|
||||||
padding-bottom: var(--space-2);
|
|
||||||
padding-left: var(--space-6);
|
padding-left: var(--space-6);
|
||||||
padding-right: var(--space-6);
|
padding-right: var(--space-6);
|
||||||
background: var(--clr-theme-container-pale);
|
background: var(--clr-theme-container-pale);
|
||||||
border-radius: var(--radius-m);
|
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>
|
</style>
|
||||||
|
@ -27,7 +27,7 @@
|
|||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{project.title}
|
<span class="button__label text-base-14 text-bold">{project.title}</span>
|
||||||
<div class="button__icon">
|
<div class="button__icon">
|
||||||
<Icon name="select-chevron" />
|
<Icon name="select-chevron" />
|
||||||
</div>
|
</div>
|
||||||
@ -36,22 +36,24 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<style>
|
<style lang="postcss">
|
||||||
.wrapper {
|
.wrapper {
|
||||||
margin-top: var(--space-10);
|
margin-top: var(--space-10);
|
||||||
margin-bottom: var(--space-16);
|
margin-bottom: var(--space-16);
|
||||||
}
|
}
|
||||||
|
|
||||||
.button {
|
.button {
|
||||||
display: flex;
|
display: flex;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: var(--space-12);
|
padding: var(--space-12);
|
||||||
|
|
||||||
background-color: var(--clr-theme-container-pale);
|
background-color: var(--clr-theme-container-pale);
|
||||||
color: var(--clr-theme-scale-ntrl-0);
|
|
||||||
font-weight: 700;
|
|
||||||
|
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
|
||||||
|
transition: background-color var(--transition-fast);
|
||||||
|
|
||||||
&:focus,
|
&:focus,
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: var(--clr-theme-container-mid);
|
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 {
|
.button__icon {
|
||||||
color: var(--clr-theme-scale-ntrl-60);
|
color: var(--clr-theme-scale-ntrl-60);
|
||||||
}
|
}
|
||||||
|
@ -10,11 +10,27 @@
|
|||||||
@tailwind utilities;
|
@tailwind utilities;
|
||||||
|
|
||||||
/* BOILERPLATE CSS */
|
/* 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,
|
a,
|
||||||
button {
|
button {
|
||||||
-webkit-user-select: none;
|
-webkit-user-select: none;
|
||||||
-webkit-user-drag: none;
|
-webkit-user-drag: none;
|
||||||
-webkit-app-region: no-drag;
|
-webkit-app-region: no-drag;
|
||||||
|
cursor: default;
|
||||||
}
|
}
|
||||||
|
|
||||||
input,
|
input,
|
||||||
|
@ -1,11 +1,3 @@
|
|||||||
.text-semibold {
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
|
|
||||||
.text-bold {
|
|
||||||
font-weight: 700;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* text Base Classes */
|
/* text Base Classes */
|
||||||
.text-base-10 {
|
.text-base-10 {
|
||||||
font-family: var(--base-font-family);
|
font-family: var(--base-font-family);
|
||||||
@ -144,3 +136,13 @@
|
|||||||
letter-spacing: 0;
|
letter-spacing: 0;
|
||||||
line-height: 100%;
|
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-48: 3rem; /* 48px / 16px = 3rem */
|
||||||
--space-56: 3.5rem; /* 56px / 16px = 3.5rem */
|
--space-56: 3.5rem; /* 56px / 16px = 3.5rem */
|
||||||
--space-64: 4rem; /* 64px / 16px = 4rem */
|
--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 {
|
:root.dark {
|
||||||
|
Loading…
Reference in New Issue
Block a user