Merge pull request #267 from n0th1ng-else/icons

fix(button): Properly pass the icon into the button
n0th1ng-else · Sep 19, 2024 · fdec28a · fdec28a
2 parents 61f910e + 92497c8
commit fdec28a
Show file tree

Hide file tree

Showing 6 changed files with 99 additions and 70 deletions.
diff --git a/src/lib/browser/components/Arrow.svelte b/src/lib/browser/components/Arrow.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
-	import { onDestroy, createEventDispatcher } from 'svelte';
-	import { onThemeChange, isDarkTheme } from '$lib/browser/stores/theme';
+	import { createEventDispatcher } from 'svelte';
 	import Button from '$lib/browser/ui/Button.svelte';
 
 	import iconUp from '../../../assets/icons/arrow-up.svg';
@@ -12,50 +11,18 @@
 	};
 
 	export let type: 'up' | 'left' = 'up';
-	export let size: 'sm' | 'md' | 'lg' = 'lg';
+	export let size: 'xl' | 'md' | 'lg' = 'xl';
 	export let hint: string | undefined = undefined;
 
 	const icon = type === 'up' ? iconUp : iconLeft;
-
-	const control = false;
-
-	let isDark = true;
-
-	const unsubscribeTheme = onThemeChange(th => (isDark = isDarkTheme(th)));
-
-	onDestroy(() => unsubscribeTheme());
 </script>
 
-<Button secondary on:click="{onClick}" {control} {hint}>
-	<img class="btn-logo {size}" class:l="{!isDark}" class:d="{isDark}" src="{icon}" alt="" />
-</Button>
-
-<style lang="scss">
-	@import '../ui/theme';
-	@import '../../../global';
-
-	.btn-logo {
-		@include smooth-change(filter, transform);
-
-		&.l {
-			@include draw-image-black();
-		}
-
-		&.d {
-			@include draw-image-white();
-		}
-
-		&.lg {
-			height: $unit-triple;
-			width: $unit-triple;
-		}
-		&.md {
-			height: $unit-double;
-			width: $unit-double;
-		}
-		&.sm {
-			height: $unit-plus;
-			width: $unit-plus;
-		}
-	}
-</style>
+<Button
+	secondary
+	on:click="{onClick}"
+	printVisible="{false}"
+	{hint}
+	{icon}
+	iconOutline
+	iconSize="{size}"
+/>
diff --git a/src/lib/browser/components/Footer.svelte b/src/lib/browser/components/Footer.svelte
@@ -60,7 +60,7 @@
 	<div class="network big-screen centered w-space">
 		<SocialNetworks accounts="{$accountsStore}" />
 	</div>
-	<p class="centered w-space">
+	<p class="centered w-space no-print">
 		{#if fcp}
 			<AdditionalText small>{version} // first contentful paint took {fcp}s.</AdditionalText>
 		{:else}
@@ -107,4 +107,10 @@
 			display: block;
 		}
 	}
+
+	@media print {
+		.no-print {
+			display: none;
+		}
+	}
 </style>
diff --git a/src/lib/browser/components/Header.svelte b/src/lib/browser/components/Header.svelte
@@ -48,7 +48,7 @@
 		<div class="navigation-wrapper">
 			{#if showBack}
 				<p>
-					<Arrow type="left" size="sm" on:click="{onBack}" hint="Go back to the articles list" />
+					<Arrow type="left" size="md" on:click="{onBack}" hint="Go back to the articles list" />
 				</p>
 			{/if}
 			<p class="logo-container">
@@ -60,7 +60,13 @@
 				<HeaderNavigation {activePath} />
 			</div>
 			<p class="theme">
-				<Button secondary on:click="{switchTheme}" {icon} hint="change theme" />
+				<Button
+					secondary
+					on:click="{switchTheme}"
+					printVisible="{false}"
+					{icon}
+					hint="change theme"
+				/>
 			</p>
 		</div>
 		<div class="navigation">

diff --git a/src/lib/browser/components/SocialNetworks.svelte b/src/lib/browser/components/SocialNetworks.svelte
@@ -24,7 +24,7 @@
 				<img
 					src="{network.image}"
 					alt="{network.title} profile link"
-					class="logo"
+					class="logo no-print"
 					class:l="{!isDark}"
 					class:d="{isDark}"
 				/>
@@ -33,7 +33,13 @@
 	{/each}
 	<p class="social-networks-item">
 		<Link url="{rssRoute}">
-			<img src="{icoRss}" alt="RSS feed" class="logo" class:l="{!isDark}" class:d="{isDark}" />
+			<img
+				src="{icoRss}"
+				alt="RSS feed"
+				class="logo no-print"
+				class:l="{!isDark}"
+				class:d="{isDark}"
+			/>
 		</Link>
 	</p>
 </div>
@@ -76,4 +82,10 @@
 			@include image-container($unit-triple);
 		}
 	}
+
+	@media print {
+		.no-print {
+			display: none;
+		}
+	}
 </style>
diff --git a/src/lib/browser/ui/Button.svelte b/src/lib/browser/ui/Button.svelte
@@ -21,6 +21,10 @@
 
 	export let icon = '';
 
+	export let iconOutline = false;
+
+	export let iconSize: 'sm' | 'md' | 'lg' | 'xl' = 'sm';
+
 	export let hint: string | undefined = undefined;
 
 	export let disabled = false;
@@ -29,17 +33,24 @@
 
 	export let external = false;
 
-	export let control = true;
+	export let printVisible = true;
 </script>
 
 {#if href}
-	<Link on:click="{onClick}" {external} url="{href}" {hint} raw inline {control}>
+	<Link on:click="{onClick}" {external} url="{href}" {hint} raw inline {printVisible}>
 		<span class:l="{!isDark}" class:d="{isDark}" class:secondary class:inline class="ui-button">
-			<span class="ui-button__text">
-				<slot />
-			</span>
+			{#if $$slots.default}
+				<span class="ui-button__text">
+					<slot />
+				</span>
+			{/if}
 			{#if icon}
-				<img src="{icon}" class="ui-button__icon" alt="{hint}" />
+				<img
+					src="{icon}"
+					class:outline="{iconOutline}"
+					class="ui-button__icon {iconSize}"
+					alt="{hint}"
+				/>
 			{/if}
 		</span>
 	</Link>
@@ -50,18 +61,23 @@
 		class:d="{isDark}"
 		class:secondary
 		class:inline
-		class:no-print="{!control}"
+		class:no-print="{!printVisible}"
 		on:click="{onClick}"
 		title="{hint}"
 		{disabled}
-		aria-hidden="{control ? undefined : 'true'}"
-		tabindex="{control ? undefined : -1}"
 	>
-		<span class="ui-button__text">
-			<slot />
-		</span>
+		{#if $$slots.default}
+			<span class="ui-button__text">
+				<slot />
+			</span>
+		{/if}
 		{#if icon}
-			<img src="{icon}" class="ui-button__icon" alt="{hint}" />
+			<img
+				src="{icon}"
+				class:outline="{iconOutline}"
+				class="ui-button__icon {iconSize}"
+				alt="{hint}"
+			/>
 		{/if}
 	</button>
 {/if}
@@ -92,8 +108,7 @@
 
 		&.secondary {
 			border: 0;
-			padding-block: 0;
-			padding-inline: $unit-half;
+			padding: $unit-quarter $unit-half;
 		}
 		&.inline {
 			border: 0;
@@ -109,10 +124,18 @@
 
 		&.l {
 			@include button-style($l-primary, $l-accent);
+
+			.outline {
+				@include draw-image-black();
+			}
 		}
 
 		&.d {
 			@include button-style($d-primary, $d-accent);
+
+			.outline {
+				@include draw-image-white();
+			}
 		}
 
 		&__text {
@@ -121,9 +144,26 @@
 		}
 
 		&__icon {
-			height: $unit;
 			object-fit: contain;
-			width: $unit;
+			vertical-align: middle;
+			@include smooth-change(filter, transform);
+
+			&.xl {
+				height: $unit-triple;
+				width: $unit-triple;
+			}
+			&.lg {
+				height: $unit-double;
+				width: $unit-double;
+			}
+			&.md {
+				height: $unit-plus;
+				width: $unit-plus;
+			}
+			&.sm {
+				height: $unit;
+				width: $unit;
+			}
 		}
 	}
 </style>
diff --git a/src/lib/browser/ui/Link.svelte b/src/lib/browser/ui/Link.svelte
@@ -12,7 +12,7 @@
 
 	export let raw = false;
 
-	export let control = true;
+	export let printVisible = true;
 
 	const dispatch = createEventDispatcher();
 
@@ -35,8 +35,6 @@
 		class:l="{!isDark}"
 		class:d="{isDark}"
 		on:click="{onClick}"
-		aria-hidden="{control ? undefined : 'true'}"
-		tabindex="{control ? undefined : -1}"
 		href="{url}"
 		title="{hint}"
 		target="_blank"
@@ -51,7 +49,7 @@
 		class:l="{!isDark}"
 		class:d="{isDark}"
 		class:inline
-		class:no-print="{!control}"
+		class:no-print="{!printVisible}"
 		on:click="{onClick}"
 		href="{url}"
 		title="{hint}"