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

Limit max height of project selector popup

Browse Source 
- requested by LaylaTichy on discord
This commit is contained in:
Mattias Granlund 2024-03-27 17:15:03 +01:00
parent 4e1c7910e1
commit 811d94030e
2 changed files with 21 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
gitbutler-ui/src/lib/components/ProjectsPopup.svelte
View File

@ -1,5 +1,6 @@
<script lang="ts"> <script lang="ts">
import ListItem from './ListItem.svelte'; import ListItem from './ListItem.svelte';
import ScrollableContainer from './ScrollableContainer.svelte';
import { ProjectService } from '$lib/backend/projects'; import { ProjectService } from '$lib/backend/projects';
import { getContextByClass } from '$lib/utils/context'; import { getContextByClass } from '$lib/utils/context';
import { goto } from '$app/navigation'; import { goto } from '$app/navigation';
@ -26,22 +27,24 @@
{#if !hidden} {#if !hidden}
<div class="popup" class:collapsed={isNavCollapsed}> <div class="popup" class:collapsed={isNavCollapsed}>
{#if $projects$.length > 0} {#if $projects$.length > 0}
<div class="popup__projects"> <ScrollableContainer maxHeight="20rem">
{#each $projects$ as project} <div class="popup__projects">
{@const selected = project.id == $page.params.projectId} {#each $projects$ as project}
<ListItem {@const selected = project.id == $page.params.projectId}
{selected} <ListItem
icon={selected ? 'tick' : undefined} {selected}
on:click={() => { icon={selected ? 'tick' : undefined}
hide(); on:click={() => {
projectService.setLastOpenedProject(project.id); hide();
goto(`/${project.id}/board`); projectService.setLastOpenedProject(project.id);
}} goto(`/${project.id}/board`);
> }}
{project.title} >
</ListItem> {project.title}
{/each} </ListItem>
</div> {/each}
</div>
</ScrollableContainer>
{/if} {/if}
<div class="popup__actions"> <div class="popup__actions">
<ListItem <ListItem

4
gitbutler-ui/src/lib/components/ScrollableContainer.svelte
View File

@ -6,7 +6,7 @@
export let contents: HTMLDivElement | undefined = undefined; export let contents: HTMLDivElement | undefined = undefined;
export let height: string | undefined = undefined; export let height: string | undefined = undefined;
export let fillViewport: boolean = false; export let fillViewport: boolean = false;
export let maxHeight: number | undefined = undefined; export let maxHeight: string | undefined = undefined;
export let scrollable: boolean | undefined = undefined; export let scrollable: boolean | undefined = undefined;
export let scrolled = false; export let scrolled = false;
@ -26,7 +26,6 @@
observer = new ResizeObserver(() => { observer = new ResizeObserver(() => {
if (viewport && contents) { if (viewport && contents) {
scrollable = viewport.offsetHeight < contents.offsetHeight; scrollable = viewport.offsetHeight < contents.offsetHeight;
maxHeight = contents.offsetHeight;
} }
}); });
if (viewport) observer.observe(viewport); if (viewport) observer.observe(viewport);
@ -40,6 +39,7 @@
class="scrollable" class="scrollable"
class:scrolled={showBorderWhenScrolled && scrolled} class:scrolled={showBorderWhenScrolled && scrolled}
style:flex-grow={wide ? 1 : 0} style:flex-grow={wide ? 1 : 0}
style:max-height={maxHeight}
> >
<div <div
bind:this={viewport} bind:this={viewport}