feat: review collapsible icons and alignment

junobuild · Feb 5, 2025 · 8080482 · 8080482
1 parent 8e3c1bd
commit 8080482
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 16 deletions.
diff --git a/src/frontend/src/lib/components/icons/IconUnfoldLess.svelte b/src/frontend/src/lib/components/icons/IconUnfoldLess.svelte
@@ -0,0 +1,19 @@
+<!-- source: https://fonts.google.com/icons?selected=Material+Symbols+Rounded:unfold_less:FILL@0;wght@400;GRAD@0;opsz@24&icon.size=24&icon.color=%23000000&icon.query=collapse&icon.style=Rounded -->
+<script lang="ts">
+	interface Props {
+		size?: string;
+	}
+
+	let { size = '24px' }: Props = $props();
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	height={size}
+	width={size}
+	fill="currentColor"
+	viewBox="0 -960 960 960"
+	><path
+		d="m480-284-96 96q-11 11-28 11t-28-11q-11-11-11-28t11-28l124-124q6-6 13-8.5t15-2.5q8 0 15 2.5t13 8.5l124 124q11 11 11 28t-11 28q-11 11-28 11t-28-11l-96-96Zm0-392 96-96q11-11 28-11t28 11q11 11 11 28t-11 28L508-592q-6 6-13 8.5t-15 2.5q-8 0-15-2.5t-13-8.5L328-716q-11-11-11-28t11-28q11-11 28-11t28 11l96 96Z"
+	/></svg
+>
diff --git a/src/frontend/src/lib/components/icons/IconUnfoldMore.svelte b/src/frontend/src/lib/components/icons/IconUnfoldMore.svelte
@@ -0,0 +1,19 @@
+<!-- source: https://fonts.google.com/icons?selected=Material+Symbols+Rounded:unfold_more:FILL@0;wght@400;GRAD@0;opsz@24&icon.size=24&icon.color=%23000000&icon.query=collapse&icon.style=Rounded -->
+<script lang="ts">
+	interface Props {
+		size?: string;
+	}
+
+	let { size = '24px' }: Props = $props();
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	height={size}
+	width={size}
+	fill="currentColor"
+	viewBox="0 -960 960 960"
+	><path
+		d="m480-236 93-93q12-12 29-12t29 12q12 12 12 29t-12 29L508-148q-6 6-13 8.5t-15 2.5q-8 0-15-2.5t-13-8.5L329-271q-12-12-12-29t12-29q12-12 29-12t29 12l93 93Zm0-484-93 93q-12 12-29 12t-29-12q-12-12-12-29t12-29l123-123q6-6 13-8.5t15-2.5q8 0 15 2.5t13 8.5l123 123q12 12 12 29t-12 29q-12 12-29 12t-29-12l-93-93Z"
+	/></svg
+>
diff --git a/src/frontend/src/lib/components/ui/Collapsible.svelte b/src/frontend/src/lib/components/ui/Collapsible.svelte
@@ -2,7 +2,9 @@
 <script lang="ts">
 	import { isNullish, nonNullish } from '@dfinity/utils';
 	import { afterUpdate } from 'svelte';
-	import IconChevron from '$lib/components/icons/IconChevron.svelte';
+	import { fade } from 'svelte/transition';
+	import IconUnfoldLess from '$lib/components/icons/IconUnfoldLess.svelte';
+	import IconUnfoldMore from '$lib/components/icons/IconUnfoldMore.svelte';
 	import { i18n } from '$lib/stores/i18n.store';
 	import { handleKeyPress } from '$lib/utils/keyboard.utils';
 
@@ -94,7 +96,11 @@
 			title={expanded ? $i18n.core.collapse : $i18n.core.expand}
 			tabindex="-1"
 		>
-			<IconChevron size="16px" />
+			{#if expanded}
+				<span in:fade class="icon"><IconUnfoldLess size="16px" /></span>
+			{:else}
+				<span in:fade class="icon"><IconUnfoldMore size="16px" /></span>
+			{/if}
 		</button>
 		<slot name="header" />
 	</div>
@@ -128,13 +134,15 @@
 		position: relative;
 
 		display: flex;
-
+		justify-content: center;
+		align-items: center;
+		flex-direction: row-reverse;
 		gap: var(--padding);
 
 		outline: none;
 
 		color: var(--placeholder-color);
-		font-size: var(--font-size-small);
+		font-size: var(--font-size-very-small);
 
 		@include interaction.tappable;
 		user-select: none;
@@ -145,20 +153,8 @@
 	}
 
 	button {
-		transform: rotate(90deg);
-
 		border-color: transparent;
 		background-color: transparent;
-
-		:global(svg) {
-			transition: transform var(--animation-time);
-		}
-
-		&.expanded {
-			:global(svg) {
-				transform: rotate(180deg);
-			}
-		}
 	}
 
 	.wrapper {
@@ -187,4 +183,10 @@
 			padding-bottom: var(--padding);
 		}
 	}
+
+	.icon {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+	}
 </style>