Skip to content

Commit cf55ffa

Browse files
PavelLaptevPavelLaptev
authored
"Create PR" box styles updated (#9010)
1 parent b559ba6 commit cf55ffa

14 files changed

+157
-364
lines changed

‎apps/desktop/src/components/BranchReview.svelte‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,6 @@
4646
);
4747
4848
const allowedToPublishBR = $derived(!!canPublishReviewPlugin?.imports.allowedToPublishBR);
49-
const canPublishBR = $derived(!!canPublishReviewPlugin?.imports.canPublishBR);
5049
const canPublishPR = $derived(!!canPublishReviewPlugin?.imports.canPublishPR);
5150
const ctaLabel = $derived(canPublishReviewPlugin?.imports.ctaLabel);
5251
const branchEmpty = $derived(canPublishReviewPlugin?.imports.branchIsEmpty);
@@ -71,7 +70,7 @@
7170
reactive(() => reviewId)
7271
);
7372
74-
const ctaDisabled = $derived(reviewCreation ? !reviewCreation.imports.creationEnabled : false);
73+
const submitDisabled = $derived(reviewCreation ? !reviewCreation.imports.creationEnabled : false);
7574
</script>
7675

7776
<CanPublishReviewPlugin
@@ -117,8 +116,7 @@
117116
{#snippet controls(close)}
118117
<ReviewCreationControls
119118
isSubmitting={!!reviewCreation?.imports.isLoading}
120-
{ctaDisabled}
121-
{canPublishBR}
119+
{submitDisabled}
122120
{canPublishPR}
123121
onCancel={close}
124122
onSubmit={async () => {

‎apps/desktop/src/components/PrTemplateSection.svelte‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,7 @@
5050
<label class="pr-template__toggle" for="pr-template-toggle">
5151
<span class="text-13 text-semibold">Use template</span>
5252
<Toggle
53+
small
5354
id="pr-template-toggle"
5455
onchange={(checked) => setEnabled(checked)}
5556
checked={$templateEnabled}

‎apps/desktop/src/components/ReviewCreation.svelte‎

Lines changed: 57 additions & 188 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@
1313
import PrTemplateSection from '$components/PrTemplateSection.svelte';
1414
import AsyncRender from '$components/v3/AsyncRender.svelte';
1515
import MessageEditor from '$components/v3/editor/MessageEditor.svelte';
16+
import MessageEditorInput from '$components/v3/editor/MessageEditorInput.svelte';
1617
import { AIService } from '$lib/ai/service';
1718
import { PostHogWrapper } from '$lib/analytics/posthog';
1819
import { BaseBranch } from '$lib/baseBranch/baseBranch';
@@ -43,11 +44,6 @@
4344
import { sleep } from '$lib/utils/sleep';
4445
import { getContext } from '@gitbutler/shared/context';
4546
import { persisted } from '@gitbutler/shared/persisted';
46-
import Checkbox from '@gitbutler/ui/Checkbox.svelte';
47-
import Icon from '@gitbutler/ui/Icon.svelte';
48-
import Textbox from '@gitbutler/ui/Textbox.svelte';
49-
import Toggle from '@gitbutler/ui/Toggle.svelte';
50-
import Link from '@gitbutler/ui/link/Link.svelte';
5147
import { error } from '@gitbutler/ui/toasts';
5248
import { isDefined } from '@gitbutler/ui/utils/typeguards';
5349
import { tick } from 'svelte';
@@ -115,7 +111,7 @@
115111
!forgeBranch || (branchDetails ? requiresPush(branchDetails.pushStatus) : true)
116112
);
117113
118-
let titleInput = $state<ReturnType<typeof Textbox>>();
114+
let titleInput = $state<HTMLInputElement | undefined>(undefined);
119115
let messageEditor = $state<MessageEditor>();
120116
121117
// AI things
@@ -422,24 +418,7 @@
422418
};
423419
</script>
424420

425-
<div class="pr-content">
426-
<Textbox
427-
testId={TestId.ReviewTitleInput}
428-
autofocus
429-
size="large"
430-
placeholder="PR title"
431-
bind:this={titleInput}
432-
value={$prTitle}
433-
disabled={isExecuting}
434-
oninput={(value: string) => prTitle.set(value)}
435-
onkeydown={(e: KeyboardEvent) => {
436-
if (e.key === 'Enter' || e.key === 'Tab') {
437-
e.preventDefault();
438-
messageEditor?.focus();
439-
}
440-
}}
441-
/>
442-
421+
<div class="pr-editor">
443422
<PrTemplateSection
444423
{projectId}
445424
disabled={isExecuting}
@@ -450,183 +429,73 @@
450429
/>
451430

452431
<AsyncRender>
453-
<MessageEditor
454-
bind:this={messageEditor}
455-
testId={TestId.ReviewDescriptionInput}
456-
{projectId}
457-
disabled={isExecuting}
458-
initialValue={$prBody}
459-
enableFileUpload
460-
placeholder="PR Description"
461-
{onAiButtonClick}
462-
{canUseAI}
463-
{aiIsLoading}
464-
onChange={(text: string) => {
465-
prBody.set(text);
466-
}}
467-
onKeyDown={(e: KeyboardEvent) => {
468-
if (e.key === 'Tab' && e.shiftKey) {
469-
e.preventDefault();
470-
titleInput?.focus();
471-
return true;
472-
}
432+
<div class="pr-editor__content">
433+
<MessageEditorInput
434+
testId={TestId.ReviewTitleInput}
435+
bind:ref={titleInput}
436+
value={$prTitle}
437+
onchange={(value) => {
438+
prTitle.set(value);
439+
}}
440+
onkeydown={(e: KeyboardEvent) => {
441+
if (e.key === 'Enter' || (e.key === 'Tab' && !e.shiftKey)) {
442+
e.preventDefault();
443+
messageEditor?.focus();
444+
}
445+
}}
446+
placeholder="PR title"
447+
showCount={false}
448+
oninput={(e: Event) => {
449+
const target = e.target as HTMLInputElement;
450+
prTitle.set(target.value);
451+
}}
452+
/>
453+
<MessageEditor
454+
bind:this={messageEditor}
455+
testId={TestId.ReviewDescriptionInput}
456+
{projectId}
457+
disabled={isExecuting}
458+
initialValue={$prBody}
459+
enableFileUpload
460+
enableSmiles
461+
placeholder="PR Description"
462+
{onAiButtonClick}
463+
{canUseAI}
464+
{aiIsLoading}
465+
onChange={(text: string) => {
466+
prBody.set(text);
467+
}}
468+
onKeyDown={(e: KeyboardEvent) => {
469+
if (e.key === 'Tab' && e.shiftKey) {
470+
e.preventDefault();
471+
titleInput?.focus();
472+
return true;
473+
}
473474

474-
if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) {
475-
e.preventDefault();
476-
createReview();
477-
return true;
478-
}
475+
if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) {
476+
e.preventDefault();
477+
createReview();
478+
return true;
479+
}
479480

480-
return false;
481-
}}
482-
/>
481+
return false;
482+
}}
483+
/>
484+
</div>
483485
</AsyncRender>
484-
485-
{#if canPublishBR && canPublishPR}
486-
<AsyncRender>
487-
<div class="options text-13">
488-
<label for="create-br" class="option-card">
489-
<div class="option-card-header" class:selected={$createButlerRequest}>
490-
<div class="option-card-header-content">
491-
<div class="option-card-header-title text-semibold">
492-
<Icon name="bowtie" />
493-
Create Butler Request
494-
</div>
495-
<span class="options__learn-more">
496-
<Link href="https://docs.gitbutler.com/review/overview">Learn more</Link>
497-
</span>
498-
</div>
499-
<div class="option-card-header-action">
500-
<Checkbox
501-
disabled={isExecuting}
502-
name="create-br"
503-
bind:checked={$createButlerRequest}
504-
/>
505-
</div>
506-
</div>
507-
</label>
508-
509-
<div class="option-card">
510-
<label
511-
for="create-pr"
512-
class="option-card-header has-settings"
513-
class:selected={$createPullRequest}
514-
>
515-
<div class="option-card-header-content">
516-
<div class="option-card-header-title text-semibold">
517-
<Icon name="github" />
518-
Create Pull Request
519-
</div>
520-
</div>
521-
522-
<div class="option-card-header-action">
523-
<Checkbox name="create-pr" bind:checked={$createPullRequest} />
524-
</div>
525-
</label>
526-
<label
527-
for="create-pr-draft"
528-
class="option-subcard-drafty"
529-
class:disabled={!$createPullRequest}
530-
>
531-
<span class="text-semibold">PR Draft</span>
532-
<Toggle disabled={isExecuting} id="create-pr-draft" bind:checked={$createDraft} />
533-
</label>
534-
</div>
535-
</div>
536-
</AsyncRender>
537-
{/if}
538486
</div>
539487

540488
<style lang="postcss">
541-
.pr-content {
489+
.pr-editor {
542490
display: flex;
543491
flex: 1;
544492
flex-direction: column;
545493
overflow: hidden;
546-
gap: 14px;
547-
}
548-
549-
.options {
550-
display: grid;
551-
grid-template-columns: 1fr 1fr;
552-
align-items: stretch;
553-
width: 100%;
554-
gap: 8px;
555-
}
556-
557-
.option-card {
558-
display: flex;
559-
flex-direction: column;
560-
overflow: hidden;
561-
border-radius: var(--radius-m);
562-
}
563-
564-
/* OPTION BOX */
565-
.option-card-header {
566-
display: flex;
567-
flex-grow: 1;
568-
padding: 12px;
569-
border: 1px solid var(--clr-border-2);
570-
border-radius: var(--radius-m);
571-
transition: background-color var(--transition-fast);
572-
573-
&:hover {
574-
background-color: var(--clr-bg-1-muted);
575-
}
576-
577-
&.has-settings {
578-
border-radius: var(--radius-m) var(--radius-m) 0 0;
579-
}
580-
581-
&.selected {
582-
border-color: var(--clr-theme-pop-element);
583-
background-color: var(--clr-theme-pop-bg);
584-
}
585-
}
586-
587-
.option-card-header-content {
588-
display: flex;
589-
flex-grow: 1;
590-
flex-direction: column;
591-
justify-content: flex-end;
592494
gap: 10px;
593495
}
594496
595-
.option-card-header-title {
497+
.pr-editor__content {
596498
display: flex;
597-
align-items: center;
598-
gap: 8px;
599-
}
600-
601-
.option-card-header-action {
602-
display: block;
603-
flex-grow: 0;
604-
}
605-
606-
.option-subcard-drafty {
607-
display: flex;
608-
align-items: center;
609-
justify-content: space-between;
610-
padding: 12px;
611-
border: 1px solid var(--clr-border-2);
612-
border-top: none;
613-
614-
border-radius: 0 0 var(--radius-m) var(--radius-m);
615-
transition: background-color var(--transition-fast);
616-
617-
&:hover {
618-
background-color: var(--clr-bg-1-muted);
619-
}
620-
621-
&.disabled {
622-
background-color: var(--clr-bg-2);
623-
cursor: not-allowed;
624-
opacity: 0.5;
625-
pointer-events: none;
626-
}
627-
}
628-
629-
.options__learn-more {
630-
color: var(--clr-text-2);
499+
flex-direction: column;
631500
}
632501
</style>

0 commit comments

Comments
 (0)