gitbutlerapp/gitbutler
1
1
Fork 0
mirror of https://github.com/gitbutlerapp/gitbutler.git synced 2024-11-23 20:54:50 +03:00
Code Issues Packages Projects Releases Wiki Activity

added custom scrollbar component

Browse Source
This commit is contained in:
Pavel Laptev 2024-10-07 12:07:04 +02:00
parent 06bd38af5d
commit 96e9e7b3bb
2 changed files with 33 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
apps/desktop/src/lib/pr/PrDetailsModal.svelte
View File

@ -20,6 +20,7 @@
import { getGitHostPrService } from '$lib/gitHost/interface/gitHostPrService';
import { showError, showToast } from '$lib/notifications/toasts';
import { isFailure } from '$lib/result';
import ScrollableContainer from '$lib/scroll/ScrollableContainer.svelte';
import BorderlessTextarea from '$lib/shared/BorderlessTextarea.svelte';
import Toggle from '$lib/shared/Toggle.svelte';
import { User } from '$lib/stores/user';
@ -29,6 +30,7 @@
import { KeyName, onMetaEnter } from '$lib/utils/hotkeys';
import { sleep } from '$lib/utils/sleep';
import { error } from '$lib/utils/toasts';
import { openExternalUrl } from '$lib/utils/url';
import { BranchController } from '$lib/vbranches/branchController';
import { DetailedCommit, VirtualBranch } from '$lib/vbranches/types';
import Button from '@gitbutler/ui/Button.svelte';
@ -353,9 +355,9 @@
{/if}
</div>
<div class="pr-fields scrollbar" onscroll={showBorderOnScroll}>
<ScrollableContainer wide maxHeight="66vh" onscroll={showBorderOnScroll}>
{#if isPreviewOnly || !isEditing}
<div class="pr-description-preview scrollbar">
<div class="pr-description-preview">
<Markdown content={actualBody} />
</div>
{:else}
@ -423,30 +425,41 @@
{/if}
</div>
{/if}
</div>
</ScrollableContainer>
</div>
<!-- FOOTER -->
{#snippet controls(close)}
<div class="pr-footer">
<!-- {#if props.type === 'preview' || props.type === 'preview-series'} -->
<label class="draft-toggle__wrap">
<Toggle id="is-draft-toggle" small checked={isDraft} on:click={handleCheckDraft} />
<label class="text-12 draft-toggle__label" for="is-draft-toggle">Create as a draft</label>
</label>
{#if props.type !== 'display'}
<label class="draft-toggle__wrap">
<Toggle id="is-draft-toggle" small checked={isDraft} on:click={handleCheckDraft} />
<label class="text-12 draft-toggle__label" for="is-draft-toggle">Create as a draft</label>
</label>
<div class="pr-footer__actions">
<Button style="ghost" outline onclick={close}>Cancel</Button>
<div class="pr-footer__actions">
<Button style="ghost" outline onclick={close}>Cancel</Button>
<Button
style="pop"
kind="solid"
disabled={isLoading || aiIsLoading}
{isLoading}
onclick={async () => await handleCreatePR(close)}
>{isDraft ? 'Create draft pull request' : 'Create pull request'}</Button
>
</div>
{:else}
<Button
style="pop"
kind="solid"
disabled={isLoading || aiIsLoading}
{isLoading}
onclick={async () => await handleCreatePR(close)}
>{isDraft ? 'Create draft pull request' : 'Create pull request'}</Button
style="ghost"
outline
icon="open-link"
onclick={() => {
openExternalUrl(props.pr.htmlUrl);
}}>Open in browser</Button
>
</div>
<Button style="ghost" outline onclick={close}>Close</Button>
{/if}
</div>
{/snippet}
</Modal>
@ -455,12 +468,6 @@
.pr-content {
display: flex;
flex-direction: column;
/* max-height: 66vh; */
}
.pr-fields {
overflow-y: auto;
max-height: 66vh;
}
.pr-header {

13
apps/desktop/src/lib/scroll/ScrollableContainer.svelte
View File

@ -14,8 +14,8 @@
thickness?: string;
horz?: boolean;
onthumbdrag?: (dragging: boolean) => void;
onscroll?: (e: Event) => void;
children: Snippet;
scrollEndVisible?: boolean;
}
let {
@ -30,7 +30,7 @@
horz,
children,
onthumbdrag,
scrollEndVisible = $bindable(false)
onscroll
}: Props = $props();
let viewport = $state<HTMLDivElement>();
@ -47,10 +47,6 @@
});
if (viewport) observer.observe(viewport);
if (contents) observer.observe(contents);
scrollEndVisible = viewport
? viewport.scrollTop + viewport.clientHeight >= viewport.scrollHeight
: false;
});
onDestroy(() => observer.disconnect());
@ -62,10 +58,7 @@
class="viewport hide-native-scrollbar"
style:height
style:overflow-y={scrollable ? 'auto' : 'hidden'}
onscroll={(e) => {
const target = e.target as HTMLDivElement;
scrollEndVisible = target.scrollTop + target.clientHeight >= target.scrollHeight;
}}
{onscroll}
>
<div bind:this={contents} class="contents" class:fill-viewport={fillViewport}>
{@render children()}