UI: Update branch tags styles (#5747)

PavelLaptev · web-flow · commit 7661b278c3a8 · 2024-12-06T09:31:31.000+01:00
diff --git a/apps/desktop/src/lib/select/Select.svelte b/apps/desktop/src/lib/select/Select.svelte
@@ -38,6 +38,7 @@
 		itemSnippet: Snippet<[{ item: SelectItem<T>; highlighted: boolean; idx: number }]>;
 		children?: Snippet;
 		onselect?: (value: T) => void;
+		ontoggle?: (isOpen: boolean) => void;
 	}
 
 	const {
@@ -58,7 +59,8 @@
 		customSelectButton,
 		itemSnippet,
 		children,
-		onselect
+		onselect,
+		ontoggle
 	}: SelectProps = $props();
 
 	let selectWrapperEl: HTMLElement;
@@ -83,10 +85,12 @@
 	function openList() {
 		setMaxHeight();
 		listOpen = true;
+		ontoggle?.(true);
 	}
 
 	function closeList() {
 		listOpen = false;
+		ontoggle?.(false);
 	}
 
 	function clickOutside(e: MouseEvent) {
diff --git a/apps/desktop/src/lib/stack/CollapsedLane.svelte b/apps/desktop/src/lib/stack/CollapsedLane.svelte
@@ -53,7 +53,7 @@
 						{uncommittedChanges === 1 ? 'change' : 'changes'}
 					</Button>
 				{/if}
-				<SeriesLabelsRow series={nonArchivedSeries.map((s) => s.name)} showCounterLabel />
+				<SeriesLabelsRow series={nonArchivedSeries.map((s) => s.name)} showRestAmount />
 			</div>
 
 			<div class="collapsed-lane__info__details">
diff --git a/apps/desktop/src/lib/stack/header/SeriesLabels.svelte b/apps/desktop/src/lib/stack/header/SeriesLabels.svelte
@@ -24,10 +24,12 @@
 			return 'local';
 		})
 	);
+
+	let selectorShown = $state(false);
 </script>
 
 <div class="stack-series-row">
-	<SeriesLabelsRow series={series.map((s) => s.name)} showCounterLabel={disableSelector} />
+	<SeriesLabelsRow series={series.map((s) => s.name)} showRestAmount={disableSelector} />
 
 	<!-- SERIES SELECTOR -->
 	{#if series.length > 1}
@@ -36,24 +38,30 @@
 				popupAlign="right"
 				customWidth={300}
 				options={shiftedSeries.map((b) => ({ label: b.name, value: b.name }))}
+				ontoggle={(isOpen) => {
+					selectorShown = isOpen;
+				}}
 				onselect={(value) => {
 					// find in DOM and scroll to
 					const el = document.querySelector(`[data-series-name="${value}"]`) as HTMLElement;
 
 					if (!el) return;
 
 					el.scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'nearest' });
-					el.classList.add('series-highlight-animation');
+
+					setTimeout(() => {
+						el.classList.add('series-highlight-animation');
+					}, 300);
 
 					setTimeout(() => {
 						el.classList.remove('series-highlight-animation');
-					}, 1000);
+					}, 1200);
 				}}
 			>
 				{#snippet customSelectButton()}
-					<div class="selector-series-select">
+					<div class="selector-series-select" class:opened={selectorShown}>
 						<span class="text-12 text-semibold">{shiftedSeries.length} more</span>
-						<Icon name="chevron-down-small" />
+						<div class="selector-series-select__icon"><Icon name="chevron-down-small" /></div>
 					</div>
 				{/snippet}
 
@@ -119,31 +127,40 @@
 		align-items: center;
 		gap: 2px;
 		padding: 2px 4px 2px 6px;
+		margin-left: -2px;
 		color: var(--clr-text-1);
-		background-color: var(--clr-bg-1);
 		border-radius: var(--radius-m);
-		border: 1px solid var(--clr-border-2);
-		height: 100%;
 		text-wrap: nowrap;
 		transition: border-color var(--transition-fast);
 
 		&:hover {
-			border-color: var(--clr-border-1);
+			background-color: var(--clr-bg-1-muted);
 		}
+
+		&.opened {
+			background-color: var(--clr-bg-1-muted);
+
+			& .selector-series-select__icon {
+				transform: rotate(180deg);
+			}
+		}
+	}
+
+	.selector-series-select__icon {
+		display: flex;
+		color: var(--clr-text-2);
 	}
 
 	.selector-series-item {
 		position: relative;
 		display: flex;
 		align-items: center;
-		gap: 6px;
+		gap: 10px;
 		width: 100%;
 		padding: 6px 2px 6px 6px;
 		border-radius: var(--radius-s);
 
 		&:hover {
-			/* background-color: var(--clr-bg-1-muted); */
-
 			.selector-series-scroll-to {
 				opacity: 1;
 				flex: none;
diff --git a/packages/ui/src/lib/Button.svelte b/packages/ui/src/lib/Button.svelte
@@ -141,7 +141,7 @@
 		{#if icon || loading}
 			<div class="btn-icon">
 				{#if loading}
-					<Icon name="spinner" spinnerRadius={4.5} />
+					<Icon name="spinner" spinnerRadius={size === 'tag' ? 4 : 5} />
 				{:else if icon}
 					<Icon name={icon} />
 				{/if}
diff --git a/packages/ui/src/lib/SeriesIcon.svelte b/packages/ui/src/lib/SeriesIcon.svelte
@@ -22,15 +22,8 @@
 		align-items: center;
 		justify-content: center;
 		flex-shrink: 0;
-		width: 20px;
-		height: 22px;
 		color: var(--clr-text-2);
-		background-color: oklch(from var(--clr-core-ntrl-60) l c h / 0.15);
+		border: 1px solid var(--clr-border-2);
 		border-radius: var(--radius-m);
-
-		&.outlined {
-			border: 1px solid var(--clr-border-2);
-			background: none;
-		}
 	}
 </style>
diff --git a/packages/ui/src/lib/SeriesLabelsRow.svelte b/packages/ui/src/lib/SeriesLabelsRow.svelte
@@ -4,11 +4,11 @@
 
 	interface Props {
 		series: string[];
-		showCounterLabel?: boolean;
+		showRestAmount?: boolean;
 		selected?: boolean;
 	}
 
-	const { series, selected, showCounterLabel }: Props = $props();
+	const { series, selected, showRestAmount }: Props = $props();
 </script>
 
 <div class="series-labels-row">
@@ -18,8 +18,21 @@
 		<span class="truncate">{series[0]}</span>
 	</div>
 
-	{#if showCounterLabel && series.length > 1}
-		<Tooltip text={'🠶 ' + series.slice(1).join(' 🠶 ')}>
+	{#if series.length > 1}
+		<svg
+			class="more-series-arrow"
+			width="14"
+			height="12"
+			viewBox="0 0 14 12"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+		>
+			<path d="M2 6H12M12 6L6.6 1M12 6L6.6 11" stroke-width="1.5" />
+		</svg>
+	{/if}
+
+	{#if showRestAmount && series.length > 1}
+		<Tooltip text={'→ ' + series.slice(1).join(' → ')}>
 			<div class="series-name more-series text-12 text-semibold">
 				<span>{series.length - 1} more</span>
 			</div>
@@ -41,11 +54,7 @@
 		display: flex;
 		align-items: center;
 		color: var(--clr-text-2);
-		height: 22px;
-		padding: 2px 6px;
-		background-color: oklch(from var(--clr-core-ntrl-60) l c h / 0.15);
-		border-radius: var(--radius-m);
-		/* width: 100%; */
+		margin-left: 3px;
 		overflow: hidden;
 
 		&.contrast {
@@ -57,4 +66,9 @@
 		flex-shrink: 0;
 		max-width: fit-content;
 	}
+
+	.more-series-arrow {
+		stroke: var(--clr-text-2);
+		opacity: 0.6;
+	}
 </style>
diff --git a/packages/ui/src/lib/SidebarEntry.svelte b/packages/ui/src/lib/SidebarEntry.svelte
@@ -66,7 +66,7 @@
 	bind:this={intersectionTarget}
 >
 	{#if series}
-		<SeriesLabelsRow {series} showCounterLabel {selected} />
+		<SeriesLabelsRow {series} showRestAmount {selected} />
 	{/if}
 
 	{#if title}
diff --git a/packages/ui/src/lib/data/icons.json b/packages/ui/src/lib/data/icons.json
@@ -53,8 +53,8 @@
 	"question-mark": "M8 1.75C4.54822 1.75 1.75 4.54822 1.75 8C1.75 11.4518 4.54822 14.25 8 14.25C11.4518 14.25 14.25 11.4518 14.25 8C14.25 4.54822 11.4518 1.75 8 1.75ZM0.25 8C0.25 3.71979 3.71979 0.25 8 0.25C12.2802 0.25 15.75 3.71979 15.75 8C15.75 12.2802 12.2802 15.75 8 15.75C3.71979 15.75 0.25 12.2802 0.25 8Z M8 4.75C7.30964 4.75 6.75 5.30964 6.75 6V7H5.25V6C5.25 4.48122 6.48122 3.25 8 3.25C9.51878 3.25 10.75 4.48122 10.75 6V6.12132C10.75 6.88284 10.4475 7.61317 9.90901 8.15165L8.53033 9.53033L7.46967 8.46967L8.84835 7.09099C9.10552 6.83382 9.25 6.48502 9.25 6.12132V6C9.25 5.30964 8.69036 4.75 8 4.75Z M9 11C9 11.5523 8.55229 12 8 12C7.44772 12 7 11.5523 7 11C7 10.4477 7.44772 10 8 10C8.55229 10 9 10.4477 9 11Z",
 	"rebase": "M8 9L13 12L8 15L8 12.75L4.5 12.75C3.5335 12.75 2.75 11.9665 2.75 11L2.75 7L4.25 7L4.25 11C4.25 11.1381 4.36193 11.25 4.5 11.25L8 11.25L8 9ZM13.25 9L13.25 5C13.25 4.0335 12.4665 3.25 11.5 3.25L8 3.25L8 1L3 4L8 7L8 4.75L11.5 4.75C11.6381 4.75 11.75 4.86193 11.75 5L11.75 9L13.25 9Z",
 	"cloud": "M4 6.5C4 4.84315 5.34315 3.5 7 3.5C8.65685 3.5 10 4.84315 10 6.5H11C12.6569 6.5 14 7.84315 14 9.5C14 11.1569 12.6569 12.5 11 12.5H5C3.34315 12.5 2 11.1569 2 9.5C2 8.19378 2.83481 7.08254 4 6.67071V6.5ZM5.5 7.73147L4.49987 8.08497C3.91525 8.2916 3.5 8.84923 3.5 9.5C3.5 10.3284 4.17157 11 5 11H11C11.8284 11 12.5 10.3284 12.5 9.5C12.5 8.67157 11.8284 8 11 8H8.5V6.5C8.5 5.67157 7.82843 5 7 5C6.17157 5 5.5 5.67157 5.5 6.5V7.73147Z",
+	"branch": "M4.75 7.25L4.75 3H3.25V13H4.75L4.75 8.75H10C11.5188 8.75 12.75 7.51878 12.75 6V3H11.25V6C11.25 6.69036 10.6904 7.25 10 7.25H4.75Z",
 	"branch-small": "M5.75 7.25L5.75 4H4.25V12H5.75L5.75 8.75H9C10.5188 8.75 11.75 7.51878 11.75 6V4H10.25V6C10.25 6.69036 9.69036 7.25 9 7.25H5.75Z",
-	"removed-branch-small": "M3.38588 10.6431L8.00002 7.87463L12.6142 10.6431L13.3859 9.35687L9.45775 6.99999L13.3859 4.64311L12.6141 3.35687L8.00002 6.12534L3.38589 3.35687L2.61415 4.64311L6.54228 6.99999L2.61414 9.35687L3.38588 10.6431Z M8.75002 13V9.99999H7.25002V13H8.75002Z",
 	"repo-book-small": "M6.04674 5.7471L7.61282 7.58931L5.74573 10.3148L6.98321 11.1625L8.60607 8.79356L10.5659 11.211L11.7311 10.2664L9.13261 7.06116L7.18959 4.77555L6.04674 5.7471Z M12.4668 2.25H3.5332C2.5667 2.25 1.7832 3.0335 1.7832 4V12C1.7832 12.9665 2.5667 13.75 3.5332 13.75H12.4668C13.4333 13.75 14.2168 12.9665 14.2168 12V4C14.2168 3.0335 13.4333 2.25 12.4668 2.25ZM4.19843 4C4.19843 3.86193 4.31035 3.75 4.44843 3.75H12.4668C12.6049 3.75 12.7168 3.86193 12.7168 4V12C12.7168 12.1381 12.6049 12.25 12.4668 12.25H4.44843C4.31035 12.25 4.19843 12.1381 4.19843 12V4Z",
 	"sandwatch-small": "M12.75 2.25H3.25V4.22868C3.25 5.29542 3.86692 6.26593 4.83281 6.71869L5.15172 6.86818C6.11099 7.31784 6.11099 8.68216 5.15172 9.13182L4.83281 9.28131C3.86691 9.73407 3.25 10.7046 3.25 11.7713V13.75H12.75V11.7713C12.75 10.7046 12.1331 9.73407 11.1672 9.28131L10.8483 9.13182C9.88901 8.68216 9.88901 7.31784 10.8483 6.86818L11.1672 6.71869C12.1331 6.26593 12.75 5.29542 12.75 4.22868V2.25ZM4.75 4.22868V3.75H11.25V4.22868C11.25 4.71356 10.9696 5.1547 10.5305 5.3605L10.2116 5.50999C8.79686 6.17316 8.33052 7.74066 8.81261 9H7.18739C7.66948 7.74066 7.20314 6.17316 5.78837 5.50999L5.46946 5.3605C5.03042 5.1547 4.75 4.71356 4.75 4.22868Z",
 	"search": "M10.0557 11.1164C9.21619 11.7378 8.17732 12.1053 7.05263 12.1053C4.26214 12.1053 2 9.84312 2 7.05263C2 4.26214 4.26214 2 7.05263 2C9.84312 2 12.1053 4.26214 12.1053 7.05263C12.1053 8.17732 11.7378 9.21618 11.1164 10.0557L14.5303 13.4697L13.4697 14.5303L10.0557 11.1164ZM10.6053 7.05263C10.6053 9.0147 9.0147 10.6053 7.05263 10.6053C5.09057 10.6053 3.5 9.0147 3.5 7.05263C3.5 5.09057 5.09057 3.5 7.05263 3.5C9.0147 3.5 10.6053 5.09057 10.6053 7.05263Z",
@@ -128,5 +128,5 @@
 	"text-quote": "M7 13V7.99998H3.91549L7.11442 3.43008L5.88558 2.56989L2.25 7.76357V13H7Z M8.25 13V7.76357L11.8856 2.56989L13.1144 3.43008L9.91549 7.99998H13V13H8.25Z",
 	"text-link": "M2.75 8C2.75 6.20507 4.20507 4.75 6 4.75H6.5V3.25H6C3.37665 3.25 1.25 5.37665 1.25 8C1.25 10.6234 3.37665 12.75 6 12.75H6.5V11.25H6C4.20507 11.25 2.75 9.79493 2.75 8Z M9.5 4.75H10C11.7949 4.75 13.25 6.20507 13.25 8C13.25 9.79493 11.7949 11.25 10 11.25H9.5V12.75H10C12.6234 12.75 14.75 10.6234 14.75 8C14.75 5.37665 12.6234 3.25 10 3.25H9.5V4.75Z M5 8.75H11V7.25H5V8.75Z",
 	"text-code": "M5.61442 3.43008L2.41549 7.99998L5.61442 12.5699L4.38557 13.4301L0.584503 7.99998L4.38557 2.56989L5.61442 3.43008Z M10.3856 3.43008L13.5845 7.99998L10.3856 12.5699L11.6144 13.4301L15.4155 7.99998L11.6144 2.56989L10.3856 3.43008Z M8.24627 13.0746L9.24627 3.07461L7.75372 2.92535L6.75372 12.9254L8.24627 13.0746Z",
-	"chain-link": "M4.28769 4.28772C5.55689 3.01851 7.61468 3.01851 8.88388 4.28772L9.23744 4.64127L10.2981 3.58061L9.94454 3.22706C8.08955 1.37207 5.08202 1.37207 3.22703 3.22706C1.37204 5.08205 1.37204 8.08958 3.22703 9.94457L3.58058 10.2981L4.64124 9.23747L4.28769 8.88391C3.01848 7.61471 3.01848 5.55692 4.28769 4.28772Z M11.3588 6.76259L11.7123 7.11615C12.9815 8.38535 12.9815 10.4431 11.7123 11.7123C10.4431 12.9815 8.38532 12.9815 7.11612 11.7123L6.76256 11.3588L5.7019 12.4194L6.05545 12.773C7.91044 14.628 10.918 14.628 12.773 12.773C14.628 10.918 14.628 7.91048 12.773 6.05549L12.4194 5.70193L11.3588 6.76259Z M9.59099 10.6517L5.34835 6.40904L6.40901 5.34838L10.6516 9.59102L9.59099 10.6517Z"
+	"chain-link": "M4.97479 4.97481C5.99101 3.95859 7.63863 3.95859 8.65485 4.9748L8.95114 5.2711L10.0118 4.21044L9.71551 3.91414C8.1135 2.31214 5.51614 2.31214 3.91413 3.91415C2.31213 5.51615 2.31212 8.11351 3.91413 9.71552L4.21043 10.0118L5.27109 8.95116L4.97479 8.65486C3.95857 7.63864 3.95857 5.99103 4.97479 4.97481ZM10.7289 7.04887L11.0252 7.34517C12.0414 8.36138 12.0414 10.009 11.0252 11.0252C10.009 12.0414 8.36137 12.0414 7.34515 11.0252L7.04885 10.7289L5.98819 11.7896L6.28449 12.0859C7.8865 13.6879 10.4839 13.6879 12.0859 12.0859C13.6879 10.4839 13.6879 7.88651 12.0859 6.28451L11.7896 5.98821L10.7289 7.04887ZM5.69191 6.75257L9.24745 10.3081L10.3081 9.24744L6.75257 5.69191L5.69191 6.75257Z"
 }
diff --git a/packages/ui/src/stories/seriesLabelsRow/SeriesLabelsRow.stories.ts b/packages/ui/src/stories/seriesLabelsRow/SeriesLabelsRow.stories.ts
@@ -24,7 +24,7 @@ export const DefaultStory: Story = {
 			'feature/add-password-reset',
 			'hotfix/correct-typo-in-readme'
 		],
-		showCounterLabel: true,
+		showRestAmount: true,
 		selected: false
 	}
 };

Original file line number	Diff line number	Diff line change
`@@ -66,7 +66,7 @@`
`66`	`66`	`bind:this={intersectionTarget}`
`67`	`67`	`>`
`68`	`68`	`{#if series}`
`69`		`- <SeriesLabelsRow {series} showCounterLabel {selected} />`
	`69`	`+ <SeriesLabelsRow {series} showRestAmount {selected} />`
`70`	`70`	`{/if}`
`71`	`71`
`72`	`72`	`{#if title}`
Original file line number	Diff line number	Diff line change
`@@ -24,7 +24,7 @@ export const DefaultStory: Story = {`
`24`	`24`	`'feature/add-password-reset',`
`25`	`25`	`'hotfix/correct-typo-in-readme'`
`26`	`26`	`],`
`27`		`- showCounterLabel: true,`
	`27`	`+ showRestAmount: true,`
`28`	`28`	`selected: false`
`29`	`29`	`}`
`30`	`30`	`};`