From c364d6e9012330600ac700838b1fb5b627219c9b Mon Sep 17 00:00:00 2001 From: Pavel Laptev Date: Tue, 23 Jul 2024 00:54:27 +0200 Subject: [PATCH 01/10] Groups and search functionality added --- app/src/lib/branch/BranchIcon.svelte | 93 -------- app/src/lib/navigation/BranchItemNew.svelte | 124 +++++++++++ .../lib/navigation/BranchesHeaderNew.svelte | 57 +++++ app/src/lib/navigation/BranchesNew.svelte | 200 ++++++++++++++++++ app/src/lib/navigation/Navigation.svelte | 10 +- app/src/lib/navigation/ProjectAvatar.svelte | 26 +-- app/src/lib/utils/stringToColor.ts | 22 ++ .../ui/src/lib/CommitLines/AvatarImage.svelte | 4 +- 8 files changed, 410 insertions(+), 126 deletions(-) delete mode 100644 app/src/lib/branch/BranchIcon.svelte create mode 100644 app/src/lib/navigation/BranchItemNew.svelte create mode 100644 app/src/lib/navigation/BranchesHeaderNew.svelte create mode 100644 app/src/lib/navigation/BranchesNew.svelte create mode 100644 app/src/lib/utils/stringToColor.ts diff --git a/app/src/lib/branch/BranchIcon.svelte b/app/src/lib/branch/BranchIcon.svelte deleted file mode 100644 index ac99eb0ee..000000000 --- a/app/src/lib/branch/BranchIcon.svelte +++ /dev/null @@ -1,93 +0,0 @@ - - -
- {#if name === 'virtual-branch'} - - - - - {/if} - {#if name === 'remote-branch'} - - - - {/if} - {#if name === 'pr'} - - - - - {/if} - {#if name === 'pr-draft'} - - - - - - - {/if} - {#if name === 'pr-closed'} - - - - - - {/if} -
- - diff --git a/app/src/lib/navigation/BranchItemNew.svelte b/app/src/lib/navigation/BranchItemNew.svelte new file mode 100644 index 000000000..257f8c52f --- /dev/null +++ b/app/src/lib/navigation/BranchItemNew.svelte @@ -0,0 +1,124 @@ + + + + + diff --git a/app/src/lib/navigation/BranchesHeaderNew.svelte b/app/src/lib/navigation/BranchesHeaderNew.svelte new file mode 100644 index 000000000..cbf285d63 --- /dev/null +++ b/app/src/lib/navigation/BranchesHeaderNew.svelte @@ -0,0 +1,57 @@ + + +
+
+ Branches + + {#if filteredBranchCount !== undefined} + + {/if} +
+ + + onSearch(e.detail)} + value={searchValueState} + /> +
+ + diff --git a/app/src/lib/navigation/BranchesNew.svelte b/app/src/lib/navigation/BranchesNew.svelte new file mode 100644 index 000000000..588e65d72 --- /dev/null +++ b/app/src/lib/navigation/BranchesNew.svelte @@ -0,0 +1,200 @@ + + +{#snippet branchGroup(props: { + title: string, + children: CombinedBranch[] + +})} + {#if props.children.length > 0} +
+

{props.title}

+ {#each props.children as branch} + + {/each} +
+ {/if} +{/snippet} + +
+ (searchValue = value)} + > + + + {#if $branches.length > 0} + {#if searchedBranches.length > 0} + +
+ {@render branchGroup({ title: 'Today', children: groupedBranches.today })} + {@render branchGroup({ title: 'Yesterday', children: groupedBranches.yesterday })} + {@render branchGroup({ title: 'Last week', children: groupedBranches.lastWeek })} + {@render branchGroup({ title: 'Older', children: groupedBranches.older })} +
+ + {:else} +
+
+ {@html noBranchesSvg} +
+ No branches match your filter +
+ {/if} + {:else} +
+
+ {@html noBranchesSvg} +
+ You have no branches +
+ {/if} +
+ + diff --git a/app/src/lib/navigation/Navigation.svelte b/app/src/lib/navigation/Navigation.svelte index 8564eca20..f2d51df1a 100644 --- a/app/src/lib/navigation/Navigation.svelte +++ b/app/src/lib/navigation/Navigation.svelte @@ -1,6 +1,6 @@ -
+
{firstLetter.toUpperCase()} diff --git a/app/src/lib/utils/stringToColor.ts b/app/src/lib/utils/stringToColor.ts new file mode 100644 index 000000000..8f6f45991 --- /dev/null +++ b/app/src/lib/utils/stringToColor.ts @@ -0,0 +1,22 @@ +const colors = [ + '#E78D8D', + '#62CDCD', + '#EC90D2', + '#7DC8D8', + '#F1BC55', + '#50D6AE', + '#9785DE', + '#99CE63', + '#636ECE', + '#5FD2B0' +]; + +export function stringToColor(name: string | undefined) { + const trimmed = name?.replace(/\s/g, ''); + if (!trimmed) { + return `linear-gradient(45deg, ${colors[0][0]} 15%, ${colors[0][1]} 90%)`; + } + + const startHash = trimmed.split('').reduce((acc, char) => acc + char.charCodeAt(0), 0); + return colors[startHash % colors.length]; +} diff --git a/packages/ui/src/lib/CommitLines/AvatarImage.svelte b/packages/ui/src/lib/CommitLines/AvatarImage.svelte index 91c6ebaf6..afc277f1e 100644 --- a/packages/ui/src/lib/CommitLines/AvatarImage.svelte +++ b/packages/ui/src/lib/CommitLines/AvatarImage.svelte @@ -13,7 +13,7 @@
- {altText} + /> --> Date: Tue, 23 Jul 2024 01:12:19 +0200 Subject: [PATCH 02/10] avatars component updated --- app/src/lib/navigation/BranchItemNew.svelte | 3 +- app/src/lib/navigation/BranchesNew.svelte | 2 +- app/src/lib/navigation/ProjectAvatar.svelte | 2 +- .../ui/src/lib/CommitLines/AvatarImage.svelte | 34 ++++++++----------- .../ui}/src/lib/utils/stringToColor.ts | 0 5 files changed, 18 insertions(+), 23 deletions(-) rename {app => packages/ui}/src/lib/utils/stringToColor.ts (100%) diff --git a/app/src/lib/navigation/BranchItemNew.svelte b/app/src/lib/navigation/BranchItemNew.svelte index 257f8c52f..309adcdbe 100644 --- a/app/src/lib/navigation/BranchItemNew.svelte +++ b/app/src/lib/navigation/BranchItemNew.svelte @@ -1,7 +1,7 @@ -
- - {altText}
@@ -40,20 +30,24 @@ display: grid; place-content: center; overflow: hidden; + border-radius: 6px; + width: 12px; + height: 12px; } .image-wrapper > * { grid-area: 1 / 1; } - .hidden { + .avatar { + position: relative; + width: 100%; + height: 100%; + object-fit: cover; opacity: 0; } - .avatar { - position: relative; - width: 12px; - height: 12px; - border-radius: 6px; + .show { + opacity: 1; } diff --git a/app/src/lib/utils/stringToColor.ts b/packages/ui/src/lib/utils/stringToColor.ts similarity index 100% rename from app/src/lib/utils/stringToColor.ts rename to packages/ui/src/lib/utils/stringToColor.ts From 11c7f8354d04bb4bc27deaec2f6a517c09ef214b Mon Sep 17 00:00:00 2001 From: Pavel Laptev Date: Tue, 23 Jul 2024 01:32:32 +0200 Subject: [PATCH 03/10] remove tooltip --- app/src/lib/navigation/BranchItemNew.svelte | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/app/src/lib/navigation/BranchItemNew.svelte b/app/src/lib/navigation/BranchItemNew.svelte index 309adcdbe..522845b3e 100644 --- a/app/src/lib/navigation/BranchItemNew.svelte +++ b/app/src/lib/navigation/BranchItemNew.svelte @@ -1,6 +1,5 @@ + +
+ {#if name === 'virtual-branch'} + + + + + {/if} + {#if name === 'remote-branch'} + + + + {/if} + {#if name === 'pr'} + + + + + {/if} + {#if name === 'pr-draft'} + + + + + + + {/if} + {#if name === 'pr-closed'} + + + + + + {/if} +
+ + diff --git a/app/src/lib/branch/BranchLane.svelte b/app/src/lib/branch/BranchLane.svelte index ae0a14b31..95192bc4d 100644 --- a/app/src/lib/branch/BranchLane.svelte +++ b/app/src/lib/branch/BranchLane.svelte @@ -50,9 +50,10 @@ // Pretty cumbersome way of getting the PR number, would be great if we can // make it more concise somehow. const hostedListingServiceStore = getGitHostListingService(); - const prs = $derived($hostedListingServiceStore?.prs); + const prStore = $derived($hostedListingServiceStore?.prs); + const prs = $derived(prStore ? $prStore : undefined); - const listedPr = $derived($prs?.find((pr) => pr.sourceBranch === branch.upstreamName)); + const listedPr = $derived(prs?.find((pr) => pr.sourceBranch === branch.upstreamName)); const sourceBranch = $derived(listedPr?.sourceBranch); const prNumber = $derived(listedPr?.number); diff --git a/app/src/lib/branch/BranchPreviewHeader.svelte b/app/src/lib/branch/BranchPreviewHeader.svelte index 843db0618..130ddc018 100644 --- a/app/src/lib/branch/BranchPreviewHeader.svelte +++ b/app/src/lib/branch/BranchPreviewHeader.svelte @@ -5,9 +5,9 @@ import Icon from '$lib/shared/Icon.svelte'; import { getContext } from '$lib/utils/context'; import { error } from '$lib/utils/toasts'; - import { tooltip } from '$lib/utils/tooltip'; import { openExternalUrl } from '$lib/utils/url'; import { BranchController } from '$lib/vbranches/branchController'; + import { tooltip } from '@gitbutler/ui/utils/tooltip'; import type { BaseBranch } from '$lib/baseBranch/baseBranch'; import type { PullRequest } from '$lib/gitHost/interface/types'; import type { Branch } from '$lib/vbranches/types'; diff --git a/app/src/lib/commit/CommitCard.svelte b/app/src/lib/commit/CommitCard.svelte index e89b46f78..e921ce1ae 100644 --- a/app/src/lib/commit/CommitCard.svelte +++ b/app/src/lib/commit/CommitCard.svelte @@ -13,7 +13,6 @@ import { copyToClipboard } from '$lib/utils/clipboard'; import { getContext, getContextStore } from '$lib/utils/context'; import { getTimeAgo } from '$lib/utils/timeAgo'; - import { tooltip } from '$lib/utils/tooltip'; import { openExternalUrl } from '$lib/utils/url'; import { BranchController } from '$lib/vbranches/branchController'; import { createCommitStore } from '$lib/vbranches/contexts'; @@ -25,6 +24,7 @@ VirtualBranch, type CommitStatus } from '$lib/vbranches/types'; + import { tooltip } from '@gitbutler/ui/utils/tooltip'; import { type Snippet } from 'svelte'; export let branch: VirtualBranch | undefined = undefined; diff --git a/app/src/lib/commit/CommitMessageInput.svelte b/app/src/lib/commit/CommitMessageInput.svelte index 0f258cd48..e245ae384 100644 --- a/app/src/lib/commit/CommitMessageInput.svelte +++ b/app/src/lib/commit/CommitMessageInput.svelte @@ -19,9 +19,9 @@ import { splitMessage } from '$lib/utils/commitMessage'; import { getContext, getContextStore } from '$lib/utils/context'; import { resizeObserver } from '$lib/utils/resizeObserver'; - import { tooltip } from '$lib/utils/tooltip'; import { Ownership } from '$lib/vbranches/ownership'; import { VirtualBranch, LocalFile } from '$lib/vbranches/types'; + import { tooltip } from '@gitbutler/ui/utils/tooltip'; import { createEventDispatcher, onMount } from 'svelte'; import { fly } from 'svelte/transition'; diff --git a/app/src/lib/components/BaseBranch.svelte b/app/src/lib/components/BaseBranch.svelte index 62e9bd5dc..65543f62c 100644 --- a/app/src/lib/components/BaseBranch.svelte +++ b/app/src/lib/components/BaseBranch.svelte @@ -7,8 +7,8 @@ import Button from '$lib/shared/Button.svelte'; import Modal from '$lib/shared/Modal.svelte'; import { getContext } from '$lib/utils/context'; - import { tooltip } from '$lib/utils/tooltip'; import { BranchController } from '$lib/vbranches/branchController'; + import { tooltip } from '@gitbutler/ui/utils/tooltip'; import type { BaseBranch } from '$lib/baseBranch/baseBranch'; export let base: BaseBranch; diff --git a/app/src/lib/components/DomainButton.svelte b/app/src/lib/components/DomainButton.svelte index 272c832fc..18328f625 100644 --- a/app/src/lib/components/DomainButton.svelte +++ b/app/src/lib/components/DomainButton.svelte @@ -2,7 +2,7 @@ import UpdateBaseButton from './UpdateBaseButton.svelte'; import { BaseBranch } from '$lib/baseBranch/baseBranch'; import { getContextStore } from '$lib/utils/context'; - import { tooltip } from '$lib/utils/tooltip'; + import { tooltip } from '@gitbutler/ui/utils/tooltip'; import { goto } from '$app/navigation'; import { page } from '$app/stores'; diff --git a/app/src/lib/dragging/draggable.ts b/app/src/lib/dragging/draggable.ts index c88d92982..2c080c431 100644 --- a/app/src/lib/dragging/draggable.ts +++ b/app/src/lib/dragging/draggable.ts @@ -1,7 +1,7 @@ import { dropzoneRegistry } from './dropzone'; import { getFileIcon } from '$lib/ext-icons'; -import { pxToRem } from '$lib/utils/pxToRem'; import { type CommitStatus } from '$lib/vbranches/types'; +import { pxToRem } from '@gitbutler/ui/utils/pxToRem'; import type { Draggable } from './draggables'; export interface DraggableConfig { @@ -76,7 +76,7 @@ function setupDragHandlers( clone.style.width = node.clientWidth + 'px'; } if (params.maxHeight) { - clone.style.maxHeight = pxToRem(params.maxHeight); + clone.style.maxHeight = pxToRem(params.maxHeight) as string; } selectedElements.forEach((el) => el.classList.add('drag-handle')); diff --git a/app/src/lib/dropzone/CardOverlay.svelte b/app/src/lib/dropzone/CardOverlay.svelte index 6add83165..69d072176 100644 --- a/app/src/lib/dropzone/CardOverlay.svelte +++ b/app/src/lib/dropzone/CardOverlay.svelte @@ -1,5 +1,5 @@ diff --git a/app/src/lib/shared/Resizer.svelte b/app/src/lib/shared/Resizer.svelte index dd7a1f1ba..c1dfc985c 100644 --- a/app/src/lib/shared/Resizer.svelte +++ b/app/src/lib/shared/Resizer.svelte @@ -1,5 +1,5 @@ - -
- {#if name === 'virtual-branch'} - - - - - {/if} - {#if name === 'remote-branch'} - - - - {/if} - {#if name === 'pr'} - - - - - {/if} - {#if name === 'pr-draft'} - - - - - - - {/if} - {#if name === 'pr-closed'} - - - - - - {/if} -
- - diff --git a/app/src/lib/navigation/BranchItemNew.svelte b/app/src/lib/navigation/BranchItemNew.svelte index 522845b3e..a929d2d48 100644 --- a/app/src/lib/navigation/BranchItemNew.svelte +++ b/app/src/lib/navigation/BranchItemNew.svelte @@ -1,6 +1,8 @@ + + + + diff --git a/packages/ui/src/lib/SegmentedControl/SegmentedControl.svelte b/packages/ui/src/lib/SegmentedControl/SegmentedControl.svelte new file mode 100644 index 000000000..1403f6ae5 --- /dev/null +++ b/packages/ui/src/lib/SegmentedControl/SegmentedControl.svelte @@ -0,0 +1,48 @@ + + +
+ {@render children()} +
+ + diff --git a/packages/ui/src/lib/SegmentedControl/segmentTypes.ts b/packages/ui/src/lib/SegmentedControl/segmentTypes.ts new file mode 100644 index 000000000..83e0359d6 --- /dev/null +++ b/packages/ui/src/lib/SegmentedControl/segmentTypes.ts @@ -0,0 +1,11 @@ +import type { Writable } from 'svelte/store'; + +export interface SegmentItem { + index: number; +} +export interface SegmentContext { + selectedSegmentIndex: Writable; + setIndex(): number; + addSegment(segment: SegmentItem): void; + setSelected({ index, id }: { index: number; id: string }): void; +} diff --git a/packages/ui/src/stories/SegmentedControl/SegmentedControl.stories.ts b/packages/ui/src/stories/SegmentedControl/SegmentedControl.stories.ts new file mode 100644 index 000000000..c768e9ddf --- /dev/null +++ b/packages/ui/src/stories/SegmentedControl/SegmentedControl.stories.ts @@ -0,0 +1,15 @@ +import SegmentedControl from './SegmentedControl.svelte'; +import type { Meta, StoryObj } from '@storybook/svelte'; + +const meta = { + component: SegmentedControl +} satisfies Meta; + +export default meta; +type Story = StoryObj; + +export const SegmentedControlStory: Story = { + args: { + selectedIndex: 1 + } +}; diff --git a/packages/ui/src/stories/SegmentedControl/SegmentedControl.svelte b/packages/ui/src/stories/SegmentedControl/SegmentedControl.svelte new file mode 100644 index 000000000..2fda08b33 --- /dev/null +++ b/packages/ui/src/stories/SegmentedControl/SegmentedControl.svelte @@ -0,0 +1,22 @@ + + + { + console.log('Selected index:', id); + }} +> + First + Second + Third + Fourth + From 1f656d8f8c0f076f178e2bbcd395d67e33a4919b Mon Sep 17 00:00:00 2001 From: Pavel Laptev Date: Tue, 23 Jul 2024 16:17:49 +0200 Subject: [PATCH 08/10] remove old component, component name changed --- .../components/SegmentControl/Segment.svelte | 138 ------------------ .../SegmentControl/SegmentedControl.svelte | 58 -------- .../lib/components/SegmentControl/segment.ts | 15 -- .../lib/navigation/BranchesHeaderNew.svelte | 8 +- .../Segment.svelte | 2 +- .../SegmentControl.svelte} | 2 +- .../segmentTypes.ts | 0 .../SegmentControl/SegmentControl.stories.ts | 15 ++ .../SegmentControl.svelte} | 8 +- .../SegmentedControl.stories.ts | 15 -- 10 files changed, 25 insertions(+), 236 deletions(-) delete mode 100644 app/src/lib/components/SegmentControl/Segment.svelte delete mode 100644 app/src/lib/components/SegmentControl/SegmentedControl.svelte delete mode 100644 app/src/lib/components/SegmentControl/segment.ts rename packages/ui/src/lib/{SegmentedControl => SegmentControl}/Segment.svelte (97%) rename packages/ui/src/lib/{SegmentedControl/SegmentedControl.svelte => SegmentControl/SegmentControl.svelte} (94%) rename packages/ui/src/lib/{SegmentedControl => SegmentControl}/segmentTypes.ts (100%) create mode 100644 packages/ui/src/stories/SegmentControl/SegmentControl.stories.ts rename packages/ui/src/stories/{SegmentedControl/SegmentedControl.svelte => SegmentControl/SegmentControl.svelte} (66%) delete mode 100644 packages/ui/src/stories/SegmentedControl/SegmentedControl.stories.ts diff --git a/app/src/lib/components/SegmentControl/Segment.svelte b/app/src/lib/components/SegmentControl/Segment.svelte deleted file mode 100644 index 4df14c826..000000000 --- a/app/src/lib/components/SegmentControl/Segment.svelte +++ /dev/null @@ -1,138 +0,0 @@ - - - - - diff --git a/app/src/lib/components/SegmentControl/SegmentedControl.svelte b/app/src/lib/components/SegmentControl/SegmentedControl.svelte deleted file mode 100644 index f75b40fde..000000000 --- a/app/src/lib/components/SegmentControl/SegmentedControl.svelte +++ /dev/null @@ -1,58 +0,0 @@ - - -
- -
- - diff --git a/app/src/lib/components/SegmentControl/segment.ts b/app/src/lib/components/SegmentControl/segment.ts deleted file mode 100644 index 00d8003a7..000000000 --- a/app/src/lib/components/SegmentControl/segment.ts +++ /dev/null @@ -1,15 +0,0 @@ -import type { Writable } from 'svelte/store'; - -export interface SegmentItem { - id: string; - index: number; - disabled: boolean; -} -export interface SegmentContext { - focusedSegmentIndex: Writable; - selectedSegmentIndex: Writable; - length: Writable; - setIndex(): number; - addSegment(segment: SegmentItem): void; - setSelected(index: number): void; -} diff --git a/app/src/lib/navigation/BranchesHeaderNew.svelte b/app/src/lib/navigation/BranchesHeaderNew.svelte index d070e138d..b459c5a34 100644 --- a/app/src/lib/navigation/BranchesHeaderNew.svelte +++ b/app/src/lib/navigation/BranchesHeaderNew.svelte @@ -1,8 +1,8 @@
diff --git a/packages/ui/src/lib/SegmentedControl/segmentTypes.ts b/packages/ui/src/lib/SegmentControl/segmentTypes.ts similarity index 100% rename from packages/ui/src/lib/SegmentedControl/segmentTypes.ts rename to packages/ui/src/lib/SegmentControl/segmentTypes.ts diff --git a/packages/ui/src/stories/SegmentControl/SegmentControl.stories.ts b/packages/ui/src/stories/SegmentControl/SegmentControl.stories.ts new file mode 100644 index 000000000..9f914acce --- /dev/null +++ b/packages/ui/src/stories/SegmentControl/SegmentControl.stories.ts @@ -0,0 +1,15 @@ +import SegmentControl from './SegmentControl.svelte'; +import type { Meta, StoryObj } from '@storybook/svelte'; + +const meta = { + component: SegmentControl +} satisfies Meta; + +export default meta; +type Story = StoryObj; + +export const SegmentControlStory: Story = { + args: { + selectedIndex: 1 + } +}; diff --git a/packages/ui/src/stories/SegmentedControl/SegmentedControl.svelte b/packages/ui/src/stories/SegmentControl/SegmentControl.svelte similarity index 66% rename from packages/ui/src/stories/SegmentedControl/SegmentedControl.svelte rename to packages/ui/src/stories/SegmentControl/SegmentControl.svelte index 2fda08b33..353c37570 100644 --- a/packages/ui/src/stories/SegmentedControl/SegmentedControl.svelte +++ b/packages/ui/src/stories/SegmentControl/SegmentControl.svelte @@ -1,6 +1,6 @@ - { console.log('Selected index:', id); @@ -19,4 +19,4 @@ Second Third Fourth - + diff --git a/packages/ui/src/stories/SegmentedControl/SegmentedControl.stories.ts b/packages/ui/src/stories/SegmentedControl/SegmentedControl.stories.ts deleted file mode 100644 index c768e9ddf..000000000 --- a/packages/ui/src/stories/SegmentedControl/SegmentedControl.stories.ts +++ /dev/null @@ -1,15 +0,0 @@ -import SegmentedControl from './SegmentedControl.svelte'; -import type { Meta, StoryObj } from '@storybook/svelte'; - -const meta = { - component: SegmentedControl -} satisfies Meta; - -export default meta; -type Story = StoryObj; - -export const SegmentedControlStory: Story = { - args: { - selectedIndex: 1 - } -}; From becfd09520b72aac849b6cc9a0e79c6878e38027 Mon Sep 17 00:00:00 2001 From: Pavel Laptev Date: Tue, 23 Jul 2024 16:23:55 +0200 Subject: [PATCH 09/10] segment control updates --- app/src/lib/navigation/BranchesHeaderNew.svelte | 2 +- packages/ui/src/lib/SegmentControl/Segment.svelte | 2 +- .../ui/src/lib/SegmentControl/SegmentControl.svelte | 11 ++++++++--- .../stories/SegmentControl/SegmentControl.stories.ts | 3 ++- .../src/stories/SegmentControl/SegmentControl.svelte | 4 +++- 5 files changed, 15 insertions(+), 7 deletions(-) diff --git a/app/src/lib/navigation/BranchesHeaderNew.svelte b/app/src/lib/navigation/BranchesHeaderNew.svelte index b459c5a34..54378616a 100644 --- a/app/src/lib/navigation/BranchesHeaderNew.svelte +++ b/app/src/lib/navigation/BranchesHeaderNew.svelte @@ -33,7 +33,7 @@ value={searchValueState} /> - + All PRs Mine diff --git a/packages/ui/src/lib/SegmentControl/Segment.svelte b/packages/ui/src/lib/SegmentControl/Segment.svelte index 1c9f62175..9e63e5dec 100644 --- a/packages/ui/src/lib/SegmentControl/Segment.svelte +++ b/packages/ui/src/lib/SegmentControl/Segment.svelte @@ -83,7 +83,7 @@ color: var(--clr-text-1); border-color: var(--clr-border-2); background-color: var(--clr-bg-1); - height: var(--size-cta); + height: var(--size-button); transition: background var(--transition-fast); diff --git a/packages/ui/src/lib/SegmentControl/SegmentControl.svelte b/packages/ui/src/lib/SegmentControl/SegmentControl.svelte index 41efce76f..d8071f73a 100644 --- a/packages/ui/src/lib/SegmentControl/SegmentControl.svelte +++ b/packages/ui/src/lib/SegmentControl/SegmentControl.svelte @@ -6,11 +6,12 @@ interface SegmentProps { selectedIndex: number; - children: Snippet; + fullWidth?: boolean; onselect?: (id: string) => void; + children: Snippet; } - const { selectedIndex, children, onselect }: SegmentProps = $props(); + const { selectedIndex, fullWidth, onselect, children }: SegmentProps = $props(); let indexesIterator = -1; let segments: SegmentItem[] = []; @@ -37,7 +38,7 @@ setContext('SegmentControl', context); -
+
{@render children()}
@@ -45,4 +46,8 @@ .wrapper { display: inline-flex; } + + .wrapper.full-width { + width: 100%; + } diff --git a/packages/ui/src/stories/SegmentControl/SegmentControl.stories.ts b/packages/ui/src/stories/SegmentControl/SegmentControl.stories.ts index 9f914acce..20ae8e50f 100644 --- a/packages/ui/src/stories/SegmentControl/SegmentControl.stories.ts +++ b/packages/ui/src/stories/SegmentControl/SegmentControl.stories.ts @@ -10,6 +10,7 @@ type Story = StoryObj; export const SegmentControlStory: Story = { args: { - selectedIndex: 1 + selectedIndex: 1, + fullWidth: false } }; diff --git a/packages/ui/src/stories/SegmentControl/SegmentControl.svelte b/packages/ui/src/stories/SegmentControl/SegmentControl.svelte index 353c37570..fb404fbcf 100644 --- a/packages/ui/src/stories/SegmentControl/SegmentControl.svelte +++ b/packages/ui/src/stories/SegmentControl/SegmentControl.svelte @@ -4,13 +4,15 @@ interface Props { selectedIndex: number; + fullWidth?: boolean; } - const { selectedIndex }: Props = $props(); + const { selectedIndex, fullWidth }: Props = $props(); { console.log('Selected index:', id); }} From ac728b3bc8072bc70594ad2ca8fd018379b1178a Mon Sep 17 00:00:00 2001 From: Pavel Laptev Date: Wed, 24 Jul 2024 15:20:03 +0200 Subject: [PATCH 10/10] remove console.log --- app/src/lib/navigation/BranchItemNew.svelte | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/src/lib/navigation/BranchItemNew.svelte b/app/src/lib/navigation/BranchItemNew.svelte index 1de6168ec..86acf1087 100644 --- a/app/src/lib/navigation/BranchItemNew.svelte +++ b/app/src/lib/navigation/BranchItemNew.svelte @@ -19,7 +19,7 @@ $effect(() => { selected = href ? $page.url.href.endsWith(href) : false; - console.log(branch); + // console.log(branch); }); function getBranchLink(b: CombinedBranch): string | undefined {