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

Merge pull request #1765 from gitbutlerapp/css-changes

Browse Source 
css fixes
This commit is contained in:
Pavel Laptev 2023-11-28 01:01:46 +01:00 committed by GitHub
commit 63108d1afd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 101 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
packages/ui/src/lib/components/Button.svelte
View File

@ -19,7 +19,7 @@
</script>
<button
class="btn text-base-12"
class="btn"
class:error-outline={color == 'error' && kind == 'outlined'}
class:primary-outline={color == 'primary' && kind == 'outlined'}
class:error-filled={color == 'error' && kind == 'filled'}
@ -31,7 +31,9 @@
{id}
{tabindex}
>
<slot />
<span class="label text-base-12">
<slot />
</span>
{#if icon}
<Icon name={loading ? 'spinner' : icon} />
{:else if loading}
@ -47,11 +49,15 @@
flex-shrink: 0;
gap: var(--space-2);
align-items: center;
height: calc(var(--space-24) + var(--space-2));
height: var(--size-btn-m);
&:disabled {
opacity: 0.6;
}
}
.label {
display: inline-flex;
padding: 0 var(--space-2);
}
.primary-filled {
background: var(--clr-theme-pop-element);
color: var(--clr-theme-pop-on-element);

13
packages/ui/src/lib/components/DropDown.svelte
View File

@ -22,8 +22,8 @@
class:filled={type == 'filled'}
class:outlined={type == 'outlined'}
>
<button class="label text-base-12" disabled={disabled || loading} on:click>
<slot />
<button class="btn" disabled={disabled || loading} on:click>
<span class="label text-base-12"> <slot /></span>
</button>
<button class="icon" disabled={disabled || loading} on:click={() => show()}>
<Icon name={loading ? 'spinner' : visible ? 'chevron-top' : 'chevron-down'} />
@ -50,7 +50,7 @@
align-items: center;
}
.label,
.btn,
.icon {
display: flex;
align-items: center;
@ -62,6 +62,11 @@
}
.label {
display: inline-flex;
padding: 0 var(--space-2);
}
.btn {
border-radius: var(--radius-m) 0 0 var(--radius-m);
}
@ -101,7 +106,7 @@
border-color: var(--clr-theme-pop-outline-dim);
}
& .label {
& .btn {
border-width: 1px 0 1px 1px;
&:hover {
border-right-width: 1px;

8
packages/ui/src/lib/components/IconButton.svelte
View File

@ -30,7 +30,7 @@ disabled:text-light-200 dark:text-dark-400 hover:dark:text-dark-100 focus:dark:t
.icon-btn {
display: inline-flex;
align-items: center;
align-self: center;
justify-content: center;
color: var(--clr-theme-scale-ntrl-40);
border-radius: var(--radius-m);
color: var(--clr-theme-scale-ntrl-50);
@ -43,12 +43,18 @@ disabled:text-light-200 dark:text-dark-400 hover:dark:text-dark-100 focus:dark:t
background-color: var(--clr-theme-container-sub);
}
.large {
height: var(--size-btn-l);
width: var(--size-btn-l);
padding: var(--space-8);
}
.medium {
height: var(--size-btn-m);
width: var(--size-btn-m);
padding: var(--space-4);
}
.small {
height: var(--size-btn-s);
width: var(--size-btn-s);
padding: var(--space-2);
}
</style>

52
packages/ui/src/lib/components/SegmentControl/Segment.svelte
View File

@ -7,6 +7,7 @@
export let id: string;
export let disabled = false;
export let icon: keyof typeof iconsJson | undefined = undefined;
export let label: string | undefined = undefined;
let ref: HTMLButtonElement | undefined;
const dispatcher = createEventDispatcher<{ select: string }>();
@ -52,11 +53,15 @@
}
}}
>
<span class="text-base-12">
<slot />
</span>
{#if label}
<span class="label text-base-12">
{label}
</span>
{/if}
{#if icon}
<Icon name={icon} />
<div class="icon">
<Icon name={icon} />
</div>
{/if}
</button>
@ -69,14 +74,15 @@
justify-content: center;
gap: var(--space-4);
height: calc(var(--space-24) + var(--space-2));
color: var(--clr-theme-scale-ntrl-40);
height: var(--size-btn-m);
background-color: var(--clr-theme-container-pale);
padding: var(--space-4) var(--space-8);
border-top-width: 1px;
border-bottom-width: 1px;
border-color: var(--clr-theme-container-outline-light);
border-width: 1px;
border-top-color: var(--clr-theme-container-outline-light);
border-bottom-color: var(--clr-theme-container-outline-light);
border-left-color: transparent;
border-right-color: transparent;
transition: background var(--transition-fast);
@ -86,25 +92,39 @@
&[aria-selected='true'] {
background-color: var(--clr-theme-container-light);
border-left-width: 1px;
color: var(--clr-theme-scale-ntrl-10);
border-left-color: var(--clr-theme-container-outline-light);
border-right-color: var(--clr-theme-container-outline-light);
& > .label {
color: var(--clr-theme-scale-ntrl-0);
}
& > .icon {
color: var(--clr-theme-scale-ntrl-0);
}
&.left {
border-right-width: 1px;
border-right-color: var(--clr-theme-container-outline-light);
}
&.right {
border-left-width: 1px;
border-left-color: var(--clr-theme-container-outline-light);
}
border-right-width: 1px;
}
&.left {
border-top-left-radius: var(--radius-m);
border-left-width: 1px;
border-left-color: var(--clr-theme-container-outline-light);
border-bottom-left-radius: var(--radius-m);
}
&.right {
border-right-width: 1px;
border-right-color: var(--clr-theme-container-outline-light);
border-top-right-radius: var(--radius-m);
border-bottom-right-radius: var(--radius-m);
}
}
.icon {
color: var(--clr-theme-scale-ntrl-50);
}
.label {
color: var(--clr-theme-scale-ntrl-40);
}
</style>

9
packages/ui/src/routes/[projectId]/components/BranchFiles.svelte
View File

@ -56,8 +56,8 @@
Changes <Badge count={branch.files.length} />
</div>
<SegmentedControl bind:selected={selectedListMode} selectedIndex={0}>
<Segment id="list" icon="list-view"></Segment>
<Segment id="tree" icon="tree-view"></Segment>
<Segment id="list" icon="list-view" />
<Segment id="tree" icon="tree-view" />
</SegmentedControl>
</div>
<div class="scrollbar">
@ -134,11 +134,12 @@
.header {
color: var(----clr-theme-scale-ntrl-0);
display: flex;
align-items: center;
justify-content: space-between;
padding-top: var(--space-12);
padding-bottom: var(--space-12);
padding-left: var(--space-16);
padding-right: var(--space-12);
justify-content: space-between;
border-color: var(--clr-theme-container-outline-light);
}
.scrollbar {
@ -148,7 +149,7 @@
}
.files {
flex-grow: 1;
padding-top: var(--space-8);
padding-top: 0;
padding-bottom: var(--space-16);
padding-left: var(--space-12);
padding-right: var(--space-12);

3
packages/ui/src/routes/[projectId]/components/BranchHeader.svelte
View File

@ -49,11 +49,12 @@
{/if}
<BranchLabel bind:name={branch.name} on:change={handleBranchNameChange} />
</div>
<div class="flex items-center gap-x-1 px-1" transition:fade={{ duration: 150 }}>
<div class="flex items-center gap-x-1" transition:fade={{ duration: 150 }}>
{#if !readonly}
<div bind:this={meatballButton}>
<IconButton
icon="kebab"
size="m"
on:click={() => popupMenu.openByElement(meatballButton, branch.id)}
/>
</div>

2
packages/ui/src/routes/[projectId]/components/FileListItem.svelte
View File

@ -58,7 +58,7 @@
.file-list-item {
display: flex;
align-items: center;
padding: var(--space-8);
padding: var(--space-6) var(--space-8);
gap: var(--space-16);
border-radius: var(--radius-s);
max-width: 100%;

10
packages/ui/src/routes/[projectId]/navigation/AccountLink.svelte
View File

@ -26,11 +26,15 @@
<style lang="postcss">
.btn {
display: flex;
color: var(--clr-theme-scale-ntrl-50);
padding: var(--space-4) var(--space-8);
border-radius: var(--radius-m);
align-items: center;
gap: var(--space-8);
height: var(--size-btn-l);
padding: var(--space-6) var(--space-8);
border-radius: var(--radius-m);
color: var(--clr-theme-scale-ntrl-50);
&:hover {
background-color: var(--clr-theme-container-pale);
color: var(--clr-theme-scale-ntrl-40);

2
packages/ui/src/routes/[projectId]/navigation/BranchFilter.svelte
View File

@ -27,7 +27,7 @@
<div class="filter-btns">
<SegmentedControl on:select={(e) => onSelect(e.detail)} wide selectedIndex={0}>
{#each options as option}
<Segment id={option.id}>{option.name}</Segment>
<Segment id={option.id} label={option.name} />
{/each}
</SegmentedControl>
</div>

38
packages/ui/src/routes/[projectId]/navigation/Footer.svelte
View File

@ -13,31 +13,29 @@
export let projectId: string | undefined;
</script>
<div
class="text-color-3 flex flex-shrink-0 items-center justify-between border-t px-3 py-3"
style:border-color="var(--clr-theme-container-outline-light)"
>
<div class="flex items-center">
<Link href="/" class="p-1"><IconButton icon="home" /></Link>
<div class="footer" style:border-color="var(--clr-theme-container-outline-light)">
<div class="left-btns">
<Link href="/"><IconButton icon="home" /></Link>
<Tooltip label="Send feedback">
<IconButton icon="mail" on:click={() => events.emit('openSendIssueModal')}></IconButton>
</Tooltip>
<Link href={`/${projectId}/settings`} class="p-1">
<Link href={`/${projectId}/settings`}>
<IconButton icon="settings" />
</Link>
{#if $isLoading}
<Tooltip>
<IconSpinner class="scale-75" />
<div slot="label">
{#each loadStack as item}
<p>
{item.name}
- <TimeAgo date={item.startedAt} addSuffix={true} />
</p>
{/each}
</div>
</Tooltip>
{/if}
</div>
<AccountLink {user} />
</div>
<style lang="postcss">
.footer {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-12);
border-top: 1px solid var(--clr-theme-container-outline-light);
}
.left-btns {
display: flex;
}
</style>

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

@ -208,9 +208,12 @@
--fx-shadow-l: 0 16px 40px 0 #0000001f;
--fx-shadow-m: 0 10px 30px 0 #00000024;
--fx-shadow-s: 0 7px 14px 0 #0000001a;
--radius-l: 0.75rem; /* 12px / 16px = 0.75rem */
--radius-m: 0.375rem; /* 6px / 16px = 0.375rem */
--radius-s: 0.25rem; /* 4px / 16px = 0.25rem */
--radius-l: var(--space-12);
--radius-m: var(--space-6);
--radius-s: var(--space-4);
--size-btn-s: 1.25rem;
--size-btn-m: 1.625rem;
--size-btn-l: 2rem;
--space-2: 0.125rem; /* 2px / 16px = 0.125rem */
--space-4: 0.25rem; /* 4px / 16px = 0.25rem */
--space-6: 0.375rem; /* 6px / 16px = 0.375rem */