From c7342b1cdf7689f4306ad144ae44b8da85970918 Mon Sep 17 00:00:00 2001 From: Pavel Laptev Date: Mon, 14 Oct 2024 11:10:00 +0200 Subject: [PATCH] Integration modal design (#5116) * new IntegrationListItem component * Simple commit row added, componenets rename * Tweak styles and `Select` update * check fix --- apps/desktop/src/lib/commit/CommitCard.svelte | 10 +- .../components/IntegrateUpstreamModal.svelte | 403 ++++++++---------- apps/desktop/src/lib/select/Select.svelte | 4 +- .../ui/src/lib/IntegrationSeriesRow.svelte | 139 ++++++ packages/ui/src/lib/Modal.svelte | 7 +- packages/ui/src/lib/SimpleCommitRow.svelte | 114 +++++ packages/ui/src/lib/utils/getTimeAndAuthor.ts | 11 + .../DemoIntegrationSeriesRow.svelte | 27 ++ .../IntegrationSeriesRow.stories.ts | 15 + .../DemoSimpleCommitRow.svelte | 46 ++ .../SimpleCommitRow.stories.ts | 15 + .../src/stories/checkbox/Checkbox.stories.ts | 4 +- .../src/stories/fileIcon/FileIcon.stories.ts | 2 +- .../fileListItem/FileListItem.stories.ts | 6 +- packages/ui/src/styles/utility/helpers.css | 4 + 15 files changed, 571 insertions(+), 236 deletions(-) create mode 100644 packages/ui/src/lib/IntegrationSeriesRow.svelte create mode 100644 packages/ui/src/lib/SimpleCommitRow.svelte create mode 100644 packages/ui/src/lib/utils/getTimeAndAuthor.ts create mode 100644 packages/ui/src/stories/IntegrationSeriesRow/DemoIntegrationSeriesRow.svelte create mode 100644 packages/ui/src/stories/IntegrationSeriesRow/IntegrationSeriesRow.stories.ts create mode 100644 packages/ui/src/stories/SimpleCommitRow/DemoSimpleCommitRow.svelte create mode 100644 packages/ui/src/stories/SimpleCommitRow/SimpleCommitRow.stories.ts diff --git a/apps/desktop/src/lib/commit/CommitCard.svelte b/apps/desktop/src/lib/commit/CommitCard.svelte index 42c7c67fe..cf5530a08 100644 --- a/apps/desktop/src/lib/commit/CommitCard.svelte +++ b/apps/desktop/src/lib/commit/CommitCard.svelte @@ -27,6 +27,7 @@ import Icon from '@gitbutler/ui/Icon.svelte'; import Modal from '@gitbutler/ui/Modal.svelte'; import Tooltip from '@gitbutler/ui/Tooltip.svelte'; + import { getTimeAndAuthor } from '@gitbutler/ui/utils/getTimeAndAuthor'; import { getTimeAgo } from '@gitbutler/ui/utils/timeAgo'; import { type Snippet } from 'svelte'; @@ -114,12 +115,6 @@ commitMessageModal.close(); } - function getTimeAndAuthor() { - const timeAgo = getTimeAgo(commit.createdAt); - const author = type === 'localAndRemote' || type === 'remote' ? commit.author.name : 'you'; - return `${timeAgo} by ${author}`; - } - const commitShortSha = commit.id.substring(0, 7); let topHeightPx = 24; @@ -381,7 +376,8 @@ {/if} • - {getTimeAndAuthor()} + + {getTimeAndAuthor(commit.createdAt, commit.author.name)} {/if} diff --git a/apps/desktop/src/lib/components/IntegrateUpstreamModal.svelte b/apps/desktop/src/lib/components/IntegrateUpstreamModal.svelte index 84a2fa933..74fd36662 100644 --- a/apps/desktop/src/lib/components/IntegrateUpstreamModal.svelte +++ b/apps/desktop/src/lib/components/IntegrateUpstreamModal.svelte @@ -1,10 +1,11 @@ - - -
- {#if $base} -
- {#each $base.upstreamCommits.slice(0, 2) as commit, index} - { - if (expanded) { - return $base.upstreamCommits.length - 1 === index; - } else { - if ($base.upstreamCommits.length > 2) { - return index === 1; - } else { - return $base.upstreamCommits.length - 1 === index; + + + + {#if $base} +
+

+ Incoming changes +

+
+ + {#each $base.upstreamCommits as commit} + { + if ($gitHost) { + openExternalUrl($gitHost.commitUrl(commit.id)); } - } - })()} - isUnapplied={true} - commitUrl={$gitHost?.commitUrl(commit.id)} - type="remote" - filesToggleable={false} - /> - {/each} - {#if $base.upstreamCommits.length > 2} - {#if expanded} - {#each $base.upstreamCommits.slice(2) as commit, index} - - {/each} -
- -
- {:else} -
- -
- {/if} - {/if} + }} + onCopy={() => { + copyToClipboard(commit.id); + }} + /> + {/each} +
- {/if} +
+ {/if} - {#if $base?.diverged} -
-
-
- -
{$base.branchName ?? 'Unknown'}
-
- -
+ {#if $base?.diverged} +
+ -
- -
+
+

Target branch divergence

+

+ Branch target/main has diverged from the workspace. +
+ Select an action to proceed with updating. +

- {/if} - {#if statuses.length > 0} -
- {#each statuses as { branch, status }} -
-
-
-
- {#if status.type === 'conflicted'} - - {:else if status.type === 'saflyUpdatable' || status.type === 'empty'} - - {:else if status.type === 'fullyIntegrated'} - - {/if} -
- -
- {#if status.type === 'fullyIntegrated'} -

Changes included in base branch

- {:else if results.get(branch.id)} - - {/if} -
-
- {/each} +
+
- {/if} -
+
+ {/if} + + {#if statuses.length > 0} +
+

To be updated:

+
+ + {#each statuses as { branch, status }} + + {#snippet select()} + {#if status.type !== 'fullyIntegrated' && results.get(branch.id)} + + {/if} + {/snippet} + + {/each} + +
+
+ {/if} {#snippet controls()} - - +
+ + +
{/snippet} diff --git a/apps/desktop/src/lib/select/Select.svelte b/apps/desktop/src/lib/select/Select.svelte index 27ee19bc3..a26ff34a1 100644 --- a/apps/desktop/src/lib/select/Select.svelte +++ b/apps/desktop/src/lib/select/Select.svelte @@ -39,7 +39,7 @@ wide, options = [], value, - placeholder, + placeholder = 'Select an option...', maxHeight, searchable, itemSnippet, @@ -161,7 +161,7 @@ type="select" reversedDirection icon="select-chevron" - value={options.find((item) => item.value === value)?.label || 'Select an option...'} + value={options.find((item) => item.value === value)?.label} disabled={disabled || loading} on:mousedown={toggleList} on:keydown={(ev) => handleKeyDown(ev)} diff --git a/packages/ui/src/lib/IntegrationSeriesRow.svelte b/packages/ui/src/lib/IntegrationSeriesRow.svelte new file mode 100644 index 000000000..a424566ff --- /dev/null +++ b/packages/ui/src/lib/IntegrationSeriesRow.svelte @@ -0,0 +1,139 @@ + + + + +
+
+ +
+
+ + {title} + + + + {#if type === 'clear'} + Clear + {:else if type === 'conflicted'} + Conflicted + {:else if type === 'integrated'} + Integrated + {/if} + +
+ + {#if select} +
+ {@render select()} +
+ {/if} + + {#if type === 'integrated'} +
+ + Part of the new base +
+ {/if} +
+ + diff --git a/packages/ui/src/lib/Modal.svelte b/packages/ui/src/lib/Modal.svelte index af1ca1481..fa13a265b 100644 --- a/packages/ui/src/lib/Modal.svelte +++ b/packages/ui/src/lib/Modal.svelte @@ -1,11 +1,12 @@ + + + +
+ +
+ + {title} + +
+ + • + + + • + {getTimeAndAuthor(date, author)} +
+
+
+ + diff --git a/packages/ui/src/lib/utils/getTimeAndAuthor.ts b/packages/ui/src/lib/utils/getTimeAndAuthor.ts new file mode 100644 index 000000000..f8c8b4e96 --- /dev/null +++ b/packages/ui/src/lib/utils/getTimeAndAuthor.ts @@ -0,0 +1,11 @@ +import { getTimeAgo } from './timeAgo'; + +export function getTimeAndAuthor(createdAt: Date, name: string | undefined): string { + const timeAgo = getTimeAgo(createdAt); + + if (name) { + return `${timeAgo} by ${name}`; + } + + return timeAgo; +} diff --git a/packages/ui/src/stories/IntegrationSeriesRow/DemoIntegrationSeriesRow.svelte b/packages/ui/src/stories/IntegrationSeriesRow/DemoIntegrationSeriesRow.svelte new file mode 100644 index 000000000..b19d00350 --- /dev/null +++ b/packages/ui/src/stories/IntegrationSeriesRow/DemoIntegrationSeriesRow.svelte @@ -0,0 +1,27 @@ + + +
+ {#each items as item} + + {/each} +
+ + diff --git a/packages/ui/src/stories/IntegrationSeriesRow/IntegrationSeriesRow.stories.ts b/packages/ui/src/stories/IntegrationSeriesRow/IntegrationSeriesRow.stories.ts new file mode 100644 index 000000000..e008a98a0 --- /dev/null +++ b/packages/ui/src/stories/IntegrationSeriesRow/IntegrationSeriesRow.stories.ts @@ -0,0 +1,15 @@ +import DemoIntegrationSeriesRow from './DemoIntegrationSeriesRow.svelte'; +import type { Meta, StoryObj } from '@storybook/svelte'; + +const meta: Meta = { + title: 'List items / Integration Series Row', + component: DemoIntegrationSeriesRow +}; + +export default meta; +type Story = StoryObj; + +export const Story: Story = { + name: 'Integration Series Row', + args: {} +}; diff --git a/packages/ui/src/stories/SimpleCommitRow/DemoSimpleCommitRow.svelte b/packages/ui/src/stories/SimpleCommitRow/DemoSimpleCommitRow.svelte new file mode 100644 index 000000000..e44ac1ef9 --- /dev/null +++ b/packages/ui/src/stories/SimpleCommitRow/DemoSimpleCommitRow.svelte @@ -0,0 +1,46 @@ + + +
+ {#each items as item} + + {/each} +
+ + diff --git a/packages/ui/src/stories/SimpleCommitRow/SimpleCommitRow.stories.ts b/packages/ui/src/stories/SimpleCommitRow/SimpleCommitRow.stories.ts new file mode 100644 index 000000000..e528d74f8 --- /dev/null +++ b/packages/ui/src/stories/SimpleCommitRow/SimpleCommitRow.stories.ts @@ -0,0 +1,15 @@ +import DemoSimpleCommitRow from './DemoSimpleCommitRow.svelte'; +import type { Meta, StoryObj } from '@storybook/svelte'; + +const meta: Meta = { + title: 'List items / Simple Commit Row', + component: DemoSimpleCommitRow +}; + +export default meta; +type Story = StoryObj; + +export const Story: Story = { + name: 'Simple Commit Row', + args: {} +}; diff --git a/packages/ui/src/stories/checkbox/Checkbox.stories.ts b/packages/ui/src/stories/checkbox/Checkbox.stories.ts index 6d4dc4b94..132d3bbd8 100644 --- a/packages/ui/src/stories/checkbox/Checkbox.stories.ts +++ b/packages/ui/src/stories/checkbox/Checkbox.stories.ts @@ -3,8 +3,8 @@ import type { Meta, StoryObj } from '@storybook/svelte'; const meta = { title: 'Inputs / Checkbox', - component: DemoCheckbox -} satisfies Meta; + component: DemoCheckbox as any +} satisfies Meta; export default meta; type Story = StoryObj; diff --git a/packages/ui/src/stories/fileIcon/FileIcon.stories.ts b/packages/ui/src/stories/fileIcon/FileIcon.stories.ts index 4cc496fa9..146e0d44a 100644 --- a/packages/ui/src/stories/fileIcon/FileIcon.stories.ts +++ b/packages/ui/src/stories/fileIcon/FileIcon.stories.ts @@ -2,7 +2,7 @@ import FileIcon from '$lib/file/FileIcon.svelte'; import type { Meta, StoryObj } from '@storybook/svelte'; const meta = { - title: 'Files / File Icon', + title: 'Elements / File Icon', component: FileIcon } satisfies Meta; diff --git a/packages/ui/src/stories/fileListItem/FileListItem.stories.ts b/packages/ui/src/stories/fileListItem/FileListItem.stories.ts index b90974dc0..2e2399c50 100644 --- a/packages/ui/src/stories/fileListItem/FileListItem.stories.ts +++ b/packages/ui/src/stories/fileListItem/FileListItem.stories.ts @@ -2,9 +2,9 @@ import DemoFileListItem from './DemoFileListItem.svelte'; import type { Meta, StoryObj } from '@storybook/svelte'; const meta = { - title: 'Files / FileListItem', - component: DemoFileListItem -} satisfies Meta; + title: 'List items / FileListItem', + component: DemoFileListItem as any +} satisfies Meta; export default meta; type Story = StoryObj; diff --git a/packages/ui/src/styles/utility/helpers.css b/packages/ui/src/styles/utility/helpers.css index 36fbc8f8b..48b4140b2 100644 --- a/packages/ui/src/styles/utility/helpers.css +++ b/packages/ui/src/styles/utility/helpers.css @@ -52,3 +52,7 @@ pre { text-overflow: ellipsis; white-space: nowrap; } + +.no-select { + user-select: none; +}