mirror of
https://github.com/gitbutlerapp/gitbutler.git
synced 2024-12-26 02:51:57 +03:00
Limit max height of project selector popup
- requested by LaylaTichy on discord
This commit is contained in:
parent
4e1c7910e1
commit
811d94030e
@ -1,5 +1,6 @@
|
||||
<script lang="ts">
|
||||
import ListItem from './ListItem.svelte';
|
||||
import ScrollableContainer from './ScrollableContainer.svelte';
|
||||
import { ProjectService } from '$lib/backend/projects';
|
||||
import { getContextByClass } from '$lib/utils/context';
|
||||
import { goto } from '$app/navigation';
|
||||
@ -26,22 +27,24 @@
|
||||
{#if !hidden}
|
||||
<div class="popup" class:collapsed={isNavCollapsed}>
|
||||
{#if $projects$.length > 0}
|
||||
<div class="popup__projects">
|
||||
{#each $projects$ as project}
|
||||
{@const selected = project.id == $page.params.projectId}
|
||||
<ListItem
|
||||
{selected}
|
||||
icon={selected ? 'tick' : undefined}
|
||||
on:click={() => {
|
||||
hide();
|
||||
projectService.setLastOpenedProject(project.id);
|
||||
goto(`/${project.id}/board`);
|
||||
}}
|
||||
>
|
||||
{project.title}
|
||||
</ListItem>
|
||||
{/each}
|
||||
</div>
|
||||
<ScrollableContainer maxHeight="20rem">
|
||||
<div class="popup__projects">
|
||||
{#each $projects$ as project}
|
||||
{@const selected = project.id == $page.params.projectId}
|
||||
<ListItem
|
||||
{selected}
|
||||
icon={selected ? 'tick' : undefined}
|
||||
on:click={() => {
|
||||
hide();
|
||||
projectService.setLastOpenedProject(project.id);
|
||||
goto(`/${project.id}/board`);
|
||||
}}
|
||||
>
|
||||
{project.title}
|
||||
</ListItem>
|
||||
{/each}
|
||||
</div>
|
||||
</ScrollableContainer>
|
||||
{/if}
|
||||
<div class="popup__actions">
|
||||
<ListItem
|
||||
|
@ -6,7 +6,7 @@
|
||||
export let contents: HTMLDivElement | undefined = undefined;
|
||||
export let height: string | undefined = undefined;
|
||||
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 scrolled = false;
|
||||
@ -26,7 +26,6 @@
|
||||
observer = new ResizeObserver(() => {
|
||||
if (viewport && contents) {
|
||||
scrollable = viewport.offsetHeight < contents.offsetHeight;
|
||||
maxHeight = contents.offsetHeight;
|
||||
}
|
||||
});
|
||||
if (viewport) observer.observe(viewport);
|
||||
@ -40,6 +39,7 @@
|
||||
class="scrollable"
|
||||
class:scrolled={showBorderWhenScrolled && scrolled}
|
||||
style:flex-grow={wide ? 1 : 0}
|
||||
style:max-height={maxHeight}
|
||||
>
|
||||
<div
|
||||
bind:this={viewport}
|
||||
|
Loading…
Reference in New Issue
Block a user