Grey out commit buttons when title isnt present

This commit is contained in:
Caleb Owens 2024-05-03 19:41:45 +01:00
parent c4108dc22c
commit 601d6ba809
3 changed files with 19 additions and 4 deletions

View File

@ -90,6 +90,7 @@
const hasCommitUrl = !commit.isLocal && commitUrl; const hasCommitUrl = !commit.isLocal && commitUrl;
let commitMessageModal: Modal; let commitMessageModal: Modal;
let commitMessageValid = false;
let description = ''; let description = '';
function openCommitMessageModal(e: Event) { function openCommitMessageModal(e: Event) {
@ -112,10 +113,16 @@
</script> </script>
<Modal bind:this={commitMessageModal}> <Modal bind:this={commitMessageModal}>
<CommitMessageInput bind:commitMessage={description} /> <CommitMessageInput bind:commitMessage={description} bind:valid={commitMessageValid} />
<svelte:fragment slot="controls"> <svelte:fragment slot="controls">
<Button style="ghost" kind="solid" on:click={() => commitMessageModal.close()}>Cancel</Button> <Button style="ghost" kind="solid" on:click={() => commitMessageModal.close()}>Cancel</Button>
<Button style="pop" kind="solid" grow on:click={submitCommitMessageModal}>Submit</Button> <Button
style="pop"
kind="solid"
grow
disabled={!commitMessageValid}
on:click={submitCommitMessageModal}>Submit</Button
>
</svelte:fragment> </svelte:fragment>
</Modal> </Modal>

View File

@ -22,6 +22,8 @@
let isCommitting = false; let isCommitting = false;
let commitMessageValid = false;
async function commit() { async function commit() {
const message = $commitMessage; const message = $commitMessage;
isCommitting = true; isCommitting = true;
@ -42,7 +44,11 @@
<div class="commit-box" class:commit-box__expanded={$expanded}> <div class="commit-box" class:commit-box__expanded={$expanded}>
{#if $expanded} {#if $expanded}
<div class="commit-box__expander" transition:slide={{ duration: 150, easing: quintOut }}> <div class="commit-box__expander" transition:slide={{ duration: 150, easing: quintOut }}>
<CommitMessageInput bind:commitMessage={$commitMessage} {commit} /> <CommitMessageInput
bind:commitMessage={$commitMessage}
bind:valid={commitMessageValid}
{commit}
/>
</div> </div>
{/if} {/if}
<div class="actions"> <div class="actions">
@ -63,7 +69,7 @@
kind="solid" kind="solid"
grow grow
loading={isCommitting} loading={isCommitting}
disabled={(isCommitting || !$commitMessage || $selectedOwnership.isEmpty()) && $expanded} disabled={(isCommitting || !commitMessageValid || $selectedOwnership.isEmpty()) && $expanded}
id="commit-to-branch" id="commit-to-branch"
on:click={() => { on:click={() => {
if ($expanded) { if ($expanded) {

View File

@ -25,6 +25,7 @@
import { fly } from 'svelte/transition'; import { fly } from 'svelte/transition';
export let commitMessage: string; export let commitMessage: string;
export let valid: boolean = false;
export let commit: (() => void) | undefined = undefined; export let commit: (() => void) | undefined = undefined;
const user = getContextStore(User); const user = getContextStore(User);
@ -51,6 +52,7 @@
$: ({ title, description } = splitMessage(commitMessage)); $: ({ title, description } = splitMessage(commitMessage));
$: if (commitMessage) updateHeights(); $: if (commitMessage) updateHeights();
$: valid = !!title;
function concatMessage(title: string, description: string) { function concatMessage(title: string, description: string) {
return `${title}\n\n${description}`; return `${title}\n\n${description}`;