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

Merge pull request #1701 from gitbutlerapp/css-fixes

Browse Source 
Css fixes
This commit is contained in:
Pavel Laptev 2023-11-24 12:19:18 +01:00 committed by GitHub
commit 2fd5c9ba7a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 125 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
packages/ui/src/app.html
View File

@ -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>

1
packages/ui/src/lib/components/Resizer.svelte
View File

@ -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}` : ''}"
/> />

27
packages/ui/src/routes/[projectId]/navigation/BaseBranchCard.svelte
View File

@ -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);

91
packages/ui/src/routes/[projectId]/navigation/Header.svelte
View File

@ -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>

17
packages/ui/src/routes/[projectId]/navigation/ProjectSelector.svelte
View File

@ -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);
} }

16
packages/ui/src/styles/main.postcss
View File

@ -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,

18
packages/ui/src/styles/text-classes.css
View File

@ -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;
}

3
packages/ui/src/styles/tokens.css
View File

@ -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 {