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

fix: pr description scroll

Browse Source
This commit is contained in:
Pavel Laptev 2024-10-07 11:52:48 +02:00
parent 59b73c7c07
commit 06bd38af5d
3 changed files with 94 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -20,7 +20,6 @@
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';
@ -290,6 +289,18 @@
}
}
function showBorderOnScroll(e: Event) {
const target = e.target as HTMLElement;
const scrollPosition = target.scrollTop;
const top = scrollPosition < 5;
if (top) {
target.style.borderTop = 'none';
} else {
target.style.borderTop = '1px solid var(--clr-border-3)';
}
}
function onClose() {
isEditing = true;
inputTitle = undefined;
@ -342,77 +353,77 @@
{/if}
</div>
{#if isPreviewOnly || !isEditing}
<div class="pr-description-preview scrollbar">
<Markdown content={actualBody} />
</div>
{:else}
<BorderlessTextarea
bind:value={inputBody}
maxHeight="66vh"
padding={{ top: 16, right: 16, bottom: 16, left: 20 }}
placeholder="Add description…"
oninput={(e) => {
inputBody = e.currentTarget.value;
}}
/>
{/if}
<div class="pr-fields scrollbar" onscroll={showBorderOnScroll}>
{#if isPreviewOnly || !isEditing}
<div class="pr-description-preview scrollbar">
<Markdown content={actualBody} />
</div>
{:else}
<BorderlessTextarea
bind:value={inputBody}
padding={{ top: 0, right: 16, bottom: 16, left: 20 }}
placeholder="Add description…"
oninput={(e) => {
inputBody = e.currentTarget.value;
}}
/>
{/if}
<!-- AI GENRATION -->
{#if !isPreviewOnly && canUseAI && isEditing}
<div class="pr-ai" class:show-ai-box={showAiBox}>
{#if showAiBox}
<BorderlessTextarea
bind:value={aiDescriptionDirective}
maxHeight="66vh"
padding={{ top: 16, right: 16, bottom: 16, left: 20 }}
placeholder={aiService.prSummaryMainDirective}
onkeydown={onMetaEnter(handleAIButtonPressed)}
oninput={(e) => {
aiDescriptionDirective = e.currentTarget.value;
}}
/>
<div class="pr-ai__actions">
<Button style="ghost" outline onclick={() => (showAiBox = false)}>Hide</Button>
<Button
style="neutral"
kind="solid"
icon="ai-small"
tooltip={!aiConfigurationValid
? 'You must be logged in or have provided your own API key'
: !$aiGenEnabled
? 'You must have summary generation enabled'
: undefined}
disabled={!canUseAI || aiIsLoading}
isLoading={aiIsLoading}
onclick={handleAIButtonPressed}
>
Generate
</Button>
</div>
{:else}
<div class="pr-ai__actions">
<Button
style="ghost"
outline
icon="ai-small"
tooltip={!aiConfigurationValid
? 'You must be logged in or have provided your own API key'
: !$aiGenEnabled
? 'You must have summary generation enabled'
: undefined}
disabled={!canUseAI || aiIsLoading}
isLoading={aiIsLoading}
onclick={() => {
showAiBox = true;
<!-- AI GENRATION -->
{#if !isPreviewOnly && canUseAI && isEditing}
<div class="pr-ai" class:show-ai-box={showAiBox}>
{#if showAiBox}
<BorderlessTextarea
bind:value={aiDescriptionDirective}
padding={{ top: 16, right: 16, bottom: 0, left: 20 }}
placeholder={aiService.prSummaryMainDirective}
onkeydown={onMetaEnter(handleAIButtonPressed)}
oninput={(e) => {
aiDescriptionDirective = e.currentTarget.value;
}}
>
Generate description
</Button>
</div>
{/if}
</div>
{/if}
/>
<div class="pr-ai__actions">
<Button style="ghost" outline onclick={() => (showAiBox = false)}>Hide</Button>
<Button
style="neutral"
kind="solid"
icon="ai-small"
tooltip={!aiConfigurationValid
? 'You must be logged in or have provided your own API key'
: !$aiGenEnabled
? 'You must have summary generation enabled'
: undefined}
disabled={!canUseAI || aiIsLoading}
isLoading={aiIsLoading}
onclick={handleAIButtonPressed}
>
Generate
</Button>
</div>
{:else}
<div class="pr-ai__actions">
<Button
style="ghost"
outline
icon="ai-small"
tooltip={!aiConfigurationValid
? 'You must be logged in or have provided your own API key'
: !$aiGenEnabled
? 'You must have summary generation enabled'
: undefined}
disabled={!canUseAI || aiIsLoading}
isLoading={aiIsLoading}
onclick={() => {
showAiBox = true;
}}
>
Generate description
</Button>
</div>
{/if}
</div>
{/if}
</div>
</div>
<!-- FOOTER -->
@ -435,9 +446,6 @@
onclick={async () => await handleCreatePR(close)}
>{isDraft ? 'Create draft pull request' : 'Create pull request'}</Button
>
<!-- {:else if props.type === 'display'}
<Button style="ghost" outline onclick={close}>Done</Button>
{/if} -->
</div>
</div>
{/snippet}
@ -447,12 +455,18 @@
.pr-content {
display: flex;
flex-direction: column;
/* max-height: 66vh; */
}
.pr-fields {
overflow-y: auto;
max-height: 66vh;
}
.pr-header {
display: flex;
gap: 16px;
padding: 16px 16px 0 20px;
padding: 16px 16px 12px 20px;
}
.pr-title {
@ -464,7 +478,6 @@
overflow-y: auto;
display: flex;
padding: 16px 16px 16px 20px;
max-height: 66vh;
}
/* AI BOX */
@ -481,7 +494,7 @@
.pr-ai__actions {
display: flex;
gap: 6px;
padding: 0 20px 16px;
padding: 12px 20px 16px;
}
/* FOOTER */

1
apps/desktop/src/lib/shared/BorderlessTextarea.svelte
View File

@ -80,6 +80,7 @@
color: var(--clr-text-1);
overflow-y: auto; /* Enable scrolling when max height is reached */
background-color: transparent;
/* background-color: rgba(0, 0, 0, 0.1); */
}
/* placeholder */

4
packages/ui/src/styles/sharable/markdown.css
View File

@ -1,4 +1,8 @@
@layer sharable {
.markdown {
user-select: text;
}
.markdown p:last-child,
.markdown ul:last-child,
.markdown ol:last-child,