gitbutlerapp/gitbutler
1
1
Fork 0
mirror of https://github.com/gitbutlerapp/gitbutler.git synced 2024-12-24 10:02:26 +03:00
Code Issues Packages Projects Releases Wiki Activity

fix dialog for commit page

Browse Source
This commit is contained in:
Kiril Videlov 2023-04-05 16:14:42 +02:00 committed by Kiril Videlov
parent e5e47bf64a
commit 4b15a9b1f2
8 changed files with 96 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/lib/components/Button/Button.svelte
View File

@ -66,7 +66,7 @@
{disabled}
{type}
class:disabled
on:click
on:click|preventDefault
>
{#if loading}
{#if icon}

48
src/lib/components/Dialog/Dialog.stories.svelte
View File

@ -11,50 +11,6 @@
<Meta title="GitButler/Dialog" component={Dialog} />
<Story name="Dialog with title only">
<Button on:click={() => dialog.show()}>"Open Dialog"</Button>
<Dialog
title="Dialog title"
secondaryActionLabel="Cancel"
primaryActionLabel="You clicked: {count}"
primaryAction={() => count++}
bind:this={dialog}
/>
</Story>
<Story name="Dialog with title and body">
<Button on:click={() => dialog.show()}>"Open Dialog"</Button>
<Dialog
title="Dialog title"
content="Dialog body content"
secondaryActionLabel="Cancel"
primaryActionLabel="You clicked: {count}"
primaryAction={() => count++}
bind:this={dialog}
/>
</Story>
<Story name="Dialog small">
<Button on:click={() => dialog.show()}>"Open Dialog"</Button>
<Dialog
title="Dialog title"
content="Dialog body content"
size="small"
secondaryActionLabel="Cancel"
primaryActionLabel="You clicked: {count}"
primaryAction={() => count++}
bind:this={dialog}
/>
</Story>
<Story name="Dialog large">
<Button on:click={() => dialog.show()}>"Open Dialog"</Button>
<Dialog
title="Dialog title"
content="Dialog body content"
size="large"
secondaryActionLabel="Cancel"
primaryActionLabel="You clicked: {count}"
primaryAction={() => count++}
bind:this={dialog}
/>
<Button on:click={() => dialog.show()}>Open Dialog</Button>
<Dialog bind:this={dialog} />
</Story>

58
src/lib/components/Dialog/Dialog.svelte
View File

@ -1,56 +1,32 @@
<script lang="ts">
import ButtonGroup from '../ButtonGroup/ButtonGroup.svelte';
import Button from '../Button/Button.svelte';
import Modal from '../Modal.svelte';
import { IconClose } from '$lib/components/icons';
export let title: string;
export let content: string | undefined = undefined;
export let secondaryActionLabel = 'Cancel';
export let primaryActionLabel = 'Confirm';
export let primaryAction: () => void;
export let size: 'default' | 'small' | 'large' = 'default';
export const show = () => modal.show();
const hide = () => modal.hide();
let modal: Modal;
export const show = () => {
modal.show();
};
</script>
<Modal on:close bind:this={modal}>
<div
class="flex flex-col text-[#D4D4D8]
{size === 'small' ? 'w-[380px]' : size === 'large' ? 'w-[980px]' : 'w-[620px]'}
"
>
<div class="flex w-[620px] flex-col text-[#D4D4D8]">
<div class="mx-4 my-4 flex">
<div class="flex-grow text-[18px]">{title}</div>
<div class="flex-grow text-[18px]">
<slot name="title">Title</slot>
</div>
<button on:click={() => modal.hide()}>
<svg
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M15.6569 4.65685C15.364 4.36396 14.8891 4.36396 14.5962 4.65685L10 9.25305L5.40381 4.65685C5.11091 4.36396 4.63604 4.36396 4.34315 4.65685C4.05025 4.94975 4.05025 5.42462 4.34315 5.71751L8.93934 10.3137L4.34315 14.9099C4.05025 15.2028 4.05025 15.6777 4.34315 15.9706C4.63604 16.2635 5.11091 16.2635 5.40381 15.9706L10 11.3744L14.5962 15.9706C14.8891 16.2635 15.364 16.2635 15.6569 15.9706C15.9497 15.6777 15.9497 15.2028 15.6569 14.9099L11.0607 10.3137L15.6569 5.71751C15.9497 5.42462 15.9497 4.94975 15.6569 4.65685Z"
fill="#A1A1AA"
/>
</svg>
<IconClose class="h-6 w-6" />
</button>
</div>
{#if content}
<p class="mx-4 my-4 text-base">{content}</p>
{/if}
<div class="m-4 flex flex-row-reverse">
<ButtonGroup
leftLabel={secondaryActionLabel}
leftAction={() => modal.hide()}
rightLabel={primaryActionLabel}
rightAction={primaryAction}
/>
<p class="mx-4 my-4 text-base">
<slot />
</p>
<div class="m-4 ml-auto flex gap-4">
<slot name="controls" {hide} {show}>
<Button filled on:click={hide}>Cancel</Button>
<Button filled role="primary" on:click={hide}>Confirm</Button>
</slot>
</div>
</div>
</Modal>

3
src/lib/components/Modal.svelte
View File

@ -12,6 +12,7 @@
export const show = () => {
open = true;
console.log('lfkjdsflkdsj');
dialog.showModal();
};
export const hide = () => {
@ -22,7 +23,7 @@
export const isOpen = () => open;
const handleClick = (event: MouseEvent) => {
if (content && !content.contains(event.target as Node | null)) {
if (content && !content.contains(event.target as Node | null) && !event.defaultPrevented) {
hide();
}
};

20
src/lib/components/icons/IconClose.svelte Normal file
View File

@ -0,0 +1,20 @@
<script lang="ts">
let className = '';
export { className as class };
</script>
<svg
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
class={className}
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M15.6569 4.65685C15.364 4.36396 14.8891 4.36396 14.5962 4.65685L10 9.25305L5.40381 4.65685C5.11091 4.36396 4.63604 4.36396 4.34315 4.65685C4.05025 4.94975 4.05025 5.42462 4.34315 5.71751L8.93934 10.3137L4.34315 14.9099C4.05025 15.2028 4.05025 15.6777 4.34315 15.9706C4.63604 16.2635 5.11091 16.2635 5.40381 15.9706L10 11.3744L14.5962 15.9706C14.8891 16.2635 15.364 16.2635 15.6569 15.9706C15.9497 15.6777 15.9497 15.2028 15.6569 14.9099L11.0607 10.3137L15.6569 5.71751C15.9497 5.42462 15.9497 4.94975 15.6569 4.65685Z"
fill="#A1A1AA"
/>
</svg>

1
src/lib/components/icons/index.ts
View File

@ -22,3 +22,4 @@ export { default as IconGitBranch } from './IconGitBranch.svelte';
export { default as IconHome } from './IconHome.svelte';
export { default as IconLoading } from './IconLoading.svelte';
export { default as IconTerminal } from './IconTerminal.svelte';
export { default as IconClose } from './IconClose.svelte';

48
src/routes/projects/[projectId]/commit/+page.svelte
View File

@ -8,10 +8,12 @@
import { error, success } from '$lib/toasts';
import { fly } from 'svelte/transition';
import { IconRotateClockwise } from '$lib/components/icons';
import { Dialog } from '$lib/components';
export let data: PageData;
const { statuses, diffs, user, api, projectId } = data;
const { statuses, diffs, user, api, projectId, project } = data;
let connectToCloudDialog: Dialog;
let summary = '';
let description = '';
@ -58,6 +60,14 @@
};
const onGenerateCommitMessage = async () => {
if (!isLoggedIn) {
// TODO: Modal prompting the user to log in
return;
}
if (!isCloudEnabled) {
connectToCloudDialog.show();
return;
}
if ($user === undefined) return;
const partialDiff = Object.fromEntries(
@ -118,10 +128,46 @@
$: isCommitEnabled = summary.length > 0 && $statuses.filter(({ staged }) => staged).length > 0;
$: isLoggedIn = $user !== undefined;
$: isCloudEnabled = $project?.api?.sync;
$: isSomeFilesSelected = $statuses.some(({ staged }) => staged) && $statuses.length > 0;
$: isGenerateCommitEnabled = isLoggedIn && isSomeFilesSelected;
</script>
<Dialog bind:this={connectToCloudDialog}>
<svelte:fragment slot="title">GitButler Cloud required</svelte:fragment>
<svelte:fragment>
<p>
By connecting to GitButler Cloud you'll unlock improved, cloud only features, including
AI-generated commit summaries, and the assurance of never losing your work with synced
project.
</p>
<p class="mt-2 flex flex-col">
<span class="font-semibold">AI-genearate commits</span>
<span>
This not only saves you time and effort but also ensures consistency in tone and style,
ultimately helping you to boost sales and improve customer satisfaction.
</span>
</p>
<p class="mt-2 flex flex-col">
<span class="font-semibold">Secure and reliable backup</span>
<span>
GitButler backup guarantees that anything you’ve ever written in your projects are safe,
secure and easily recoverable.
</span>
</p>
</svelte:fragment>
<svelte:fragment slot="controls" let:hide let:show>
<Button filled on:click={hide}>Cancel</Button>
<Button
filled
role="primary"
on:click={() => {
// TODO
hide();
}}>Connect</Button
>
</svelte:fragment>
</Dialog>
<div id="commit-page" class="flex h-full w-full">
<div class="commit-panel-container border-r border-zinc-700 p-4">
<h1 class="px-2 py-1 text-xl font-bold">Commit</h1>

8
src/routes/projects/[projectId]/commit/+page.ts
View File

@ -2,9 +2,13 @@ import { building } from '$app/environment';
import { readable } from 'svelte/store';
import type { PageLoad } from '../$types';
export const load: PageLoad = async ({ params }) => {
export const load: PageLoad = async ({ parent, params }) => {
const { project } = await parent();
const diffs = building
? readable<Record<string, string>>({})
: await import('$lib/git/diffs').then((m) => m.default({ projectId: params.projectId }));
return { diffs };
return {
diffs,
project
};
};