gitbutlerapp/gitbutler
1
1
Fork 0
mirror of https://github.com/gitbutlerapp/gitbutler.git synced 2024-11-30 01:17:37 +03:00
Code Issues Packages Projects Releases Wiki Activity

Add scrollbar to project selector

Browse Source
This commit is contained in:
Mattias Granlund 2023-12-03 17:56:45 +01:00
parent 4af41d639d
commit 444b15631a
2 changed files with 30 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
packages/ui/src/routes/+page.svelte
View File

@ -12,26 +12,8 @@
{#if !$projects$}
Loading...
{:else}
<div class="absolute h-4 w-full" data-tauri-drag-region></div>
<div class="homepage">
<div class="homepage__content">
<SelectProject projects={$projects$} user={$user$} />
</div>
</div>
<SelectProject projects={$projects$} user={$user$} />
{/if}
<style lang="postcss">
.homepage {
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
flex-grow: 1;
}
.homepage__content {
display: flex;
flex-direction: column;
max-width: 420px;
gap: var(--space-8);
}
</style>

37
packages/ui/src/routes/components/SelectProject.svelte
View File

@ -5,23 +5,32 @@
import * as events from '$lib/utils/events';
import AccountLink from '$lib/components/AccountLink.svelte';
import type { User } from '$lib/backend/cloud';
import Scrollbar from '$lib/components/Scrollbar.svelte';
export let projects: Project[] | undefined;
export let user: User | undefined;
let viewport: HTMLElement | undefined;
let contents: HTMLElement | undefined;
</script>
<div class="projects card">
<div class="card__header">
<span class="card__title text-base-14 font-semibold">Projects</span>
</div>
<div class="card__content">
{#if projects && projects.length > 0}
{#each projects || [] as project}
<SelectProjectItem {project} />
{/each}
{:else}
<pre>Go ahead and add your first project. :)</pre>
{/if}
<div class="scroll-wrapper">
<div bind:this={viewport} class="viewport hide-native-scrollbar">
<div bind:this={contents} class="card__content">
{#if projects && projects.length > 0}
{#each projects || [] as project}
<SelectProjectItem {project} />
{/each}
{:else}
<pre>Go ahead and add your first project. :)</pre>
{/if}
</div>
</div>
<Scrollbar {viewport} {contents} alwaysVisible thickness="0.4rem" opacity="0.1" />
</div>
<div class="card__footer">
<IconButton icon="plus" on:click={() => events.emit('openNewProjectModal')}></IconButton>
@ -31,9 +40,21 @@
<style lang="postcss">
.projects {
align-self: center;
max-width: 640px;
max-height: 65%;
}
.scroll-wrapper {
display: flex;
flex-direction: column;
position: relative;
overflow-y: hidden;
}
.viewport {
height: 100%;
overflow-y: scroll;
overscroll-behavior: none;
}
.card__content {
gap: var(--space-6);
}