From abb0d945432202591a58ba036fe2bacb4b8081e7 Mon Sep 17 00:00:00 2001 From: Scott Chacon Date: Wed, 2 Aug 2023 17:27:32 +0200 Subject: [PATCH] Add UI enhancements and refactor components In this commit, a series of UI enhancements and changes have been made on some components. The modifications help to improve the user interaction experience and the organization of the code by refactoring some of the elements, improving their visibility and adding new interactive elements. Changes include: - Improved opacity state for the 'isFileLocked' feature. - Added and integrated new Tooltip and IconLock classes. - Refactored color configurations in the color config section. - Introduced the creation of an SVG file for Icon elements rendering. - Modified text to "No uncommitted changes on this branch" for better clarity. - Added options to maximize and minimize in the PopupMenu. - Changed modal title from "Update target" to "Merge Upstream Work", and expanded the explanation of the work's impact. - Removed some redundant conditions in the checkbox state in the branches component. - Added help icon library. - Changed the modal confirmation button from "Update" to "Merge Upstream --- src/lib/icons/IconHelp.svelte | 19 ++++ src/lib/icons/IconLock.svelte | 19 ++++ src/routes/repo/[projectId]/+page.svelte | 2 +- src/routes/repo/[projectId]/BranchLane.svelte | 12 ++- .../repo/[projectId]/FileCardNext.svelte | 15 ++- src/routes/repo/[projectId]/Tray.svelte | 93 +++++++++++++------ .../[projectId]/UpstreamBranchLane.svelte | 18 +++- tailwind.config.cjs | 13 ++- 8 files changed, 151 insertions(+), 40 deletions(-) create mode 100644 src/lib/icons/IconHelp.svelte create mode 100644 src/lib/icons/IconLock.svelte diff --git a/src/lib/icons/IconHelp.svelte b/src/lib/icons/IconHelp.svelte new file mode 100644 index 000000000..ed2c84e59 --- /dev/null +++ b/src/lib/icons/IconHelp.svelte @@ -0,0 +1,19 @@ + + + + + diff --git a/src/lib/icons/IconLock.svelte b/src/lib/icons/IconLock.svelte new file mode 100644 index 000000000..0e38787ca --- /dev/null +++ b/src/lib/icons/IconLock.svelte @@ -0,0 +1,19 @@ + + + + + diff --git a/src/routes/repo/[projectId]/+page.svelte b/src/routes/repo/[projectId]/+page.svelte index d9ef26dbc..d20068101 100644 --- a/src/routes/repo/[projectId]/+page.svelte +++ b/src/routes/repo/[projectId]/+page.svelte @@ -51,7 +51,7 @@
{/if} {/if} @@ -512,6 +512,16 @@
+ {#if !maximized} + (maximized = !maximized)}>Maximize + {:else} + (maximized = !maximized)}>Minimize + {/if} + +
+
+
+ branchId && branchController.unapplyBranch(branchId)}> Unapply diff --git a/src/routes/repo/[projectId]/FileCardNext.svelte b/src/routes/repo/[projectId]/FileCardNext.svelte index 7bc28bd71..2f74b111b 100644 --- a/src/routes/repo/[projectId]/FileCardNext.svelte +++ b/src/routes/repo/[projectId]/FileCardNext.svelte @@ -22,6 +22,8 @@ import { slide } from 'svelte/transition'; import { SETTINGS_CONTEXT, type SettingsStore } from '$lib/userSettings'; import { summarizeHunk } from '$lib/summaries'; + import Tooltip from '$lib/components/Tooltip/Tooltip.svelte'; + import IconLock from '$lib/icons/IconLock.svelte'; export let file: File; export let conflicted: boolean; @@ -84,7 +86,7 @@ on:dragstart={(e) => e.dataTransfer?.setData('text/hunk', getAllHunksOwnership())} role="group" class="changed-file inner" - class:opacity-60={isFileLocked} + class:opacity-80={isFileLocked} >
+ {#if isFileLocked} +
+ + + +
+ {/if}
{ expanded = !expanded; @@ -120,7 +131,7 @@ on:keypress={() => (expanded = !expanded)} role="button" tabindex="0" - class="cursor-pointer px-3 py-2 text-light-600 dark:text-dark-200" + class="flex-grow-0 cursor-pointer px-3 py-2 text-light-600 dark:text-dark-200" > {#if !file.binary} {#if expanded} diff --git a/src/routes/repo/[projectId]/Tray.svelte b/src/routes/repo/[projectId]/Tray.svelte index 703b1c59e..67327cac9 100644 --- a/src/routes/repo/[projectId]/Tray.svelte +++ b/src/routes/repo/[projectId]/Tray.svelte @@ -14,6 +14,7 @@ import Tooltip from '$lib/components/Tooltip/Tooltip.svelte'; import Scrollbar from '$lib/components/Scrollbar.svelte'; import IconMeatballMenu from '$lib/icons/IconMeatballMenu.svelte'; + import IconHelp from '$lib/icons/IconHelp.svelte'; export let branches: Branch[]; export let remoteBranches: BranchData[]; @@ -124,26 +125,6 @@ bind:checked={branch.active} disabled={!(branch.mergeable || !branch.baseCurrent) || branch.conflicted} /> - {#if !branch.active} -
- {#if !branch.baseCurrent} - - -
●
- - {:else if branch.mergeable} - -
●
- - {:else} - -
●
- - {/if} -
- {/if}
{branch.name}
@@ -160,6 +141,26 @@
{latestModifiedAt ? formatDistanceToNow(latestModifiedAt) : ''}
+ {#if !branch.active} +
+ {#if !branch.baseCurrent} + + +
●
+ + {:else if branch.mergeable} + +
●
+ + {:else} + +
●
+ + {/if} +
+ {/if}
+{added} @@ -181,7 +182,16 @@
-
Remote Branches
+
+
Remote Branches
+ + + +
-
-
{formatDistanceToNow(branch.lastCommitTs * 1000)}
+
+
+ {formatDistanceToNow(branch.lastCommitTs * 1000)} +
+
+ +
{branch.ahead}/{branch.behind}
+ + {#if !branch.mergeable} +
!
+ {/if} +
{#each branch.authors as author} - Update target -

You are about to update the base branch.

+ Merge Upstream Work +
+

You are about to merge upstream work from your base branch.

+

What will this do?

+

+ We will try to merge the work that is upstream into each of your virtual branches, so that + they are all up to date. +

+

+ Any virtual branches that we can't merge cleanly, we will unapply and mark with a blue dot. + You can merge these manually later. +

+

Any virtual branches that are fully integrated upstream will be automatically removed.

+
diff --git a/tailwind.config.cjs b/tailwind.config.cjs index 5df72764e..f42f3798a 100644 --- a/tailwind.config.cjs +++ b/tailwind.config.cjs @@ -102,9 +102,16 @@ const config = { 900: '#1e3a8a' }, yellow: { - 400: '#facc15', - 500: '#eab308', - 900: '#713f12' + 50: '#FFFBE6', + 100: '#FFF7CC', + 200: '#FEF0A2', + 300: '#FDE978', + 400: '#FACC15', + 500: '#EAB308', + 600: '#C19206', + 700: '#987105', + 800: '#6F5004', + 900: '#713F12', }, red: { 400: '#F87171',