feat: double input handling and blur clear

gitbutlerapp · Oct 30, 2024 · 593afa5 · 593afa5
1 parent 998a2df
commit 593afa5
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 38 deletions.
diff --git a/apps/desktop/src/lib/branch/StackingSeriesDescription.svelte b/apps/desktop/src/lib/branch/StackingSeriesDescription.svelte
@@ -2,34 +2,36 @@
 	import Textarea from '@gitbutler/ui/Textarea.svelte';
 
 	interface Props {
-		autofocus?: boolean;
-
-		value: string;
+		value?: string;
 		disabled?: boolean;
-		oninput?: (e: Event & { currentTarget: EventTarget & HTMLTextAreaElement }) => void;
 		onEmpty?: () => void;
+		onBlur?: (value: string | undefined | null) => void;
+		textAreaEl?: HTMLDivElement;
 	}
-	const { autofocus, value, disabled = false, oninput, onEmpty }: Props = $props();
 
-	let textareaEl: HTMLDivElement | undefined = $state();
+	let { value, disabled = false, onBlur, onEmpty, textAreaEl = $bindable() }: Props = $props();
 </script>
 
 <div class="branch-description-input">
 	<Textarea
-		bind:textBoxEl={textareaEl}
-		{autofocus}
+		bind:textBoxEl={textAreaEl}
 		class="text-12 text-body"
 		{value}
 		{disabled}
-		{oninput}
 		flex="1"
 		fontSize={12}
 		placeholder="Series description"
 		unstyled
 		padding={{ top: 0, right: 0, bottom: 0, left: 0 }}
+		onblur={() => {
+			if (textAreaEl?.textContent === '') {
+				onEmpty?.();
+			}
+			onBlur?.(textAreaEl?.textContent);
+		}}
 		onkeydown={(e: KeyboardEvent & { currentTarget: EventTarget & HTMLTextAreaElement }) => {
 			if (e.key === 'Escape') {
-				textareaEl?.blur();
+				textAreaEl?.blur();
 
 				if (value === '') {
 					onEmpty?.();

diff --git a/apps/desktop/src/lib/branch/StackingSeriesHeader.svelte b/apps/desktop/src/lib/branch/StackingSeriesHeader.svelte
@@ -28,6 +28,7 @@
 	import Button from '@gitbutler/ui/Button.svelte';
 	import PopoverActionsContainer from '@gitbutler/ui/popoverActions/PopoverActionsContainer.svelte';
 	import PopoverActionsItem from '@gitbutler/ui/popoverActions/PopoverActionsItem.svelte';
+	import { tick } from 'svelte';
 
 	interface Props {
 		currentSeries: PatchSeries;
@@ -58,6 +59,7 @@
 	let kebabContextMenu = $state<ReturnType<typeof ContextMenu>>();
 	let stackingContextMenu = $state<ReturnType<typeof StackingSeriesHeaderContextMenu>>();
 	let kebabContextMenuTrigger = $state<HTMLButtonElement>();
+	let seriesDescriptionEl = $state<HTMLDivElement>();
 
 	let contextMenuOpened = $state(false);
 
@@ -109,15 +111,20 @@
 		}
 	}
 
-	async function editDescription(description: string) {
-		await branchController.updateSeriesDescription(branch.id, currentSeries.name, description);
+	async function editDescription(description: string | undefined | null) {
+		if (description) {
+			await branchController.updateSeriesDescription(branch.id, currentSeries.name, description);
+		}
 	}
 
 	async function toggleDescription() {
 		descriptionVisible = !descriptionVisible;
 
 		if (!descriptionVisible) {
 			await branchController.updateSeriesDescription(branch.id, currentSeries.name, '');
+		} else {
+			await tick();
+			seriesDescriptionEl?.focus();
 		}
 	}
 
@@ -133,7 +140,6 @@
 		});
 
 		if (isFailure(messageResult)) {
-			console.error(messageResult.failure);
 			showError('Failed to generate branch name', messageResult.failure);
 
 			return;
@@ -327,23 +333,6 @@
 		flex-grow: 1;
 	}
 
-	.branch-info__label {
-		display: inline-flex;
-
-		&.label-shifted {
-			margin-left: -2px;
-		}
-	}
-
-	.branch-info__content {
-		flex: 1;
-		width: 100%;
-		display: flex;
-		flex-direction: column;
-		gap: 6px;
-		padding: 14px 0;
-	}
-
 	.branch-action {
 		width: 100%;
 		display: flex;

diff --git a/apps/desktop/src/lib/branch/StackingSeriesHeaderContextMenu.svelte b/apps/desktop/src/lib/branch/StackingSeriesHeaderContextMenu.svelte
@@ -58,7 +58,6 @@
 	let newHeadName: string = $state(headName);
 	let isDeleting = $state(false);
 	let aiConfigurationValid = $state(false);
-	let showDescription = $state(!!description);
 
 	$effect(() => {
 		setAIConfigurationValid();
@@ -78,10 +77,9 @@
 <ContextMenu bind:this={contextMenuEl} {target} {onopen} {onclose}>
 	<ContextMenuSection>
 		<ContextMenuItem
-			label={`${!showDescription ? 'Add' : 'Remove'} description`}
+			label={`${!description ? 'Add' : 'Remove'} description`}
 			onclick={async () => {
 				await toggleDescription();
-				showDescription = !showDescription;
 				contextMenuEl?.close();
 			}}
 		/>
@@ -124,7 +122,6 @@
 			<ContextMenuItem
 				label="Copy PR link"
 				onclick={() => {
-					console.log(prUrl);
 					copyToClipboard(prUrl);
 					contextMenuEl?.close();
 				}}

diff --git a/packages/ui/src/lib/Textarea.svelte b/packages/ui/src/lib/Textarea.svelte
@@ -4,7 +4,7 @@
 		id?: string;
 		textBoxEl?: HTMLDivElement;
 		label?: string;
-		value: string | undefined;
+		value?: string;
 		placeholder?: string;
 		disabled?: boolean;
 		fontSize?: number;
@@ -90,8 +90,6 @@
 			}
 		}
 	});
-
-	console.log('placeholder', placeholder);
 </script>
 
 <div
@@ -115,7 +113,6 @@
 		aria-multiline="true"
 		tabindex={disabled ? -1 : 0}
 		contenteditable="plaintext-only"
-		bind:innerText={value}
 		onfocus={(e: Event) => {
 			if (e.currentTarget) {
 				onfocus?.(e as FocusEvent & { currentTarget: EventTarget & HTMLTextAreaElement });