add goal icons to Select Goal

fivaz · May 20, 2024 · 967f400 · 967f400
1 parent 453b33e
commit 967f400
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 5 deletions.
diff --git a/...ar-body/calendar-columns/calendar-rows/event-panel/event-panel-core/EventPanelCore.svelte b/...ar-body/calendar-columns/calendar-rows/event-panel/event-panel-core/EventPanelCore.svelte
@@ -55,9 +55,9 @@
 		tailwindColors[event.category.color].hoverBg,
 	)}
 >
-	<div class="flex gap-1">
+	<div class="flex items-center gap-1">
 		{#if event.goal?.icon}
-			<GoalIcon class="h-5 w-5" name={event.goal.icon} />
+			<GoalIcon class="h-4 w-4" name={event.goal.icon} />
 		{/if}
 		<span class="truncate pr-3 font-semibold">
 			{getTitle()}

diff --git a/src/lib/components/select/select-item/SelectItem.svelte b/src/lib/components/select/select-item/SelectItem.svelte
@@ -19,7 +19,7 @@
 			'relative cursor-default select-none py-2 pl-3 pr-9',
 		)}
 	>
-		<span class={clsx(active ? 'font-semibold' : 'font-normal', 'block truncate', className)}>
+		<span class={clsx(active ? 'font-semibold' : 'font-normal', 'truncate', className)}>
 			<slot />
 		</span>
 

diff --git a/src/lib/components/task-form/TaskForm.svelte b/src/lib/components/task-form/TaskForm.svelte
@@ -20,6 +20,8 @@
 	import { Icon } from '@steeze-ui/svelte-icon';
 	import { createEventDispatcher } from 'svelte';
 
+	import GoalIcon from '../../../routes/dashboard/goals/goal-form/goal-icon/GoalIcon.svelte';
+
 	export let task: AnyTask;
 
 	export let goals: Goal[];
@@ -155,7 +157,10 @@
 				<span slot="placeholder">{taskIn.goal?.name || 'no goal'}</span>
 				<SelectItem value={null}>no goal</SelectItem>
 				{#each goals as goal (goal)}
-					<SelectItem value={goal}>{goal.name}</SelectItem>
+					<SelectItem class="flex gap-2" value={goal}>
+						<GoalIcon class="h-5 w-5" name={goal.icon} />
+						<span class="w-[calc(100%-20px)] truncate">{goal.name}</span>
+					</SelectItem>
 				{/each}
 			</Select>
 

diff --git a/src/routes/dashboard/goals/goal-form/goal-icon/service.ts b/src/routes/dashboard/goals/goal-form/goal-icon/service.ts
@@ -62,7 +62,6 @@ export const icons: GoalIconType[] = [
 	{ component: Dumbbell, name: 'Weightlifting Barbell' },
 	{ component: Paintbrush, name: 'Paintbrush' },
 	{ component: MoneyBill1Wave, name: 'Money' },
-	{ component: Globe, name: 'Globe' },
 	{ component: Book, name: 'Book' },
 	{ component: Stopwatch, name: 'Stopwatch' },
 	{ component: Lightbulb, name: 'Lightbulb', theme: 'default' },