Skip to content

Commit fdec28a

Browse files
n0th1ng-elsen0th1ng-else
authored
Merge pull request #267 from n0th1ng-else/icons
fix(button): Properly pass the icon into the button
2 parents 61f910e + 92497c8 commit fdec28a

File tree

6 files changed

+99
-70
lines changed

6 files changed

+99
-70
lines changed

‎src/lib/browser/components/Arrow.svelte‎

Lines changed: 11 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
<script lang="ts">
2-
import { onDestroy, createEventDispatcher } from 'svelte';
3-
import { onThemeChange, isDarkTheme } from '$lib/browser/stores/theme';
2+
import { createEventDispatcher } from 'svelte';
43
import Button from '$lib/browser/ui/Button.svelte';
54
65
import iconUp from '../../../assets/icons/arrow-up.svg';
@@ -12,50 +11,18 @@
1211
};
1312
1413
export let type: 'up' | 'left' = 'up';
15-
export let size: 'sm' | 'md' | 'lg' = 'lg';
14+
export let size: 'xl' | 'md' | 'lg' = 'xl';
1615
export let hint: string | undefined = undefined;
1716
1817
const icon = type === 'up' ? iconUp : iconLeft;
19-
20-
const control = false;
21-
22-
let isDark = true;
23-
24-
const unsubscribeTheme = onThemeChange(th => (isDark = isDarkTheme(th)));
25-
26-
onDestroy(() => unsubscribeTheme());
2718
</script>
2819

29-
<Button secondary on:click="{onClick}" {control} {hint}>
30-
<img class="btn-logo {size}" class:l="{!isDark}" class:d="{isDark}" src="{icon}" alt="" />
31-
</Button>
32-
33-
<style lang="scss">
34-
@import '../ui/theme';
35-
@import '../../../global';
36-
37-
.btn-logo {
38-
@include smooth-change(filter, transform);
39-
40-
&.l {
41-
@include draw-image-black();
42-
}
43-
44-
&.d {
45-
@include draw-image-white();
46-
}
47-
48-
&.lg {
49-
height: $unit-triple;
50-
width: $unit-triple;
51-
}
52-
&.md {
53-
height: $unit-double;
54-
width: $unit-double;
55-
}
56-
&.sm {
57-
height: $unit-plus;
58-
width: $unit-plus;
59-
}
60-
}
61-
</style>
20+
<Button
21+
secondary
22+
on:click="{onClick}"
23+
printVisible="{false}"
24+
{hint}
25+
{icon}
26+
iconOutline
27+
iconSize="{size}"
28+
/>

‎src/lib/browser/components/Footer.svelte‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@
6060
<div class="network big-screen centered w-space">
6161
<SocialNetworks accounts="{$accountsStore}" />
6262
</div>
63-
<p class="centered w-space">
63+
<p class="centered w-space no-print">
6464
{#if fcp}
6565
<AdditionalText small>{version} // first contentful paint took {fcp}s.</AdditionalText>
6666
{:else}
@@ -107,4 +107,10 @@
107107
display: block;
108108
}
109109
}
110+
111+
@media print {
112+
.no-print {
113+
display: none;
114+
}
115+
}
110116
</style>

‎src/lib/browser/components/Header.svelte‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@
4848
<div class="navigation-wrapper">
4949
{#if showBack}
5050
<p>
51-
<Arrow type="left" size="sm" on:click="{onBack}" hint="Go back to the articles list" />
51+
<Arrow type="left" size="md" on:click="{onBack}" hint="Go back to the articles list" />
5252
</p>
5353
{/if}
5454
<p class="logo-container">
@@ -60,7 +60,13 @@
6060
<HeaderNavigation {activePath} />
6161
</div>
6262
<p class="theme">
63-
<Button secondary on:click="{switchTheme}" {icon} hint="change theme" />
63+
<Button
64+
secondary
65+
on:click="{switchTheme}"
66+
printVisible="{false}"
67+
{icon}
68+
hint="change theme"
69+
/>
6470
</p>
6571
</div>
6672
<div class="navigation">

‎src/lib/browser/components/SocialNetworks.svelte‎

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@
2424
<img
2525
src="{network.image}"
2626
alt="{network.title} profile link"
27-
class="logo"
27+
class="logo no-print"
2828
class:l="{!isDark}"
2929
class:d="{isDark}"
3030
/>
@@ -33,7 +33,13 @@
3333
{/each}
3434
<p class="social-networks-item">
3535
<Link url="{rssRoute}">
36-
<img src="{icoRss}" alt="RSS feed" class="logo" class:l="{!isDark}" class:d="{isDark}" />
36+
<img
37+
src="{icoRss}"
38+
alt="RSS feed"
39+
class="logo no-print"
40+
class:l="{!isDark}"
41+
class:d="{isDark}"
42+
/>
3743
</Link>
3844
</p>
3945
</div>
@@ -76,4 +82,10 @@
7682
@include image-container($unit-triple);
7783
}
7884
}
85+
86+
@media print {
87+
.no-print {
88+
display: none;
89+
}
90+
}
7991
</style>

‎src/lib/browser/ui/Button.svelte‎

Lines changed: 57 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,10 @@
2121
2222
export let icon = '';
2323
24+
export let iconOutline = false;
25+
26+
export let iconSize: 'sm' | 'md' | 'lg' | 'xl' = 'sm';
27+
2428
export let hint: string | undefined = undefined;
2529
2630
export let disabled = false;
@@ -29,17 +33,24 @@
2933
3034
export let external = false;
3135
32-
export let control = true;
36+
export let printVisible = true;
3337
</script>
3438

3539
{#if href}
36-
<Link on:click="{onClick}" {external} url="{href}" {hint} raw inline {control}>
40+
<Link on:click="{onClick}" {external} url="{href}" {hint} raw inline {printVisible}>
3741
<span class:l="{!isDark}" class:d="{isDark}" class:secondary class:inline class="ui-button">
38-
<span class="ui-button__text">
39-
<slot />
40-
</span>
42+
{#if $$slots.default}
43+
<span class="ui-button__text">
44+
<slot />
45+
</span>
46+
{/if}
4147
{#if icon}
42-
<img src="{icon}" class="ui-button__icon" alt="{hint}" />
48+
<img
49+
src="{icon}"
50+
class:outline="{iconOutline}"
51+
class="ui-button__icon {iconSize}"
52+
alt="{hint}"
53+
/>
4354
{/if}
4455
</span>
4556
</Link>
@@ -50,18 +61,23 @@
5061
class:d="{isDark}"
5162
class:secondary
5263
class:inline
53-
class:no-print="{!control}"
64+
class:no-print="{!printVisible}"
5465
on:click="{onClick}"
5566
title="{hint}"
5667
{disabled}
57-
aria-hidden="{control ? undefined : 'true'}"
58-
tabindex="{control ? undefined : -1}"
5968
>
60-
<span class="ui-button__text">
61-
<slot />
62-
</span>
69+
{#if $$slots.default}
70+
<span class="ui-button__text">
71+
<slot />
72+
</span>
73+
{/if}
6374
{#if icon}
64-
<img src="{icon}" class="ui-button__icon" alt="{hint}" />
75+
<img
76+
src="{icon}"
77+
class:outline="{iconOutline}"
78+
class="ui-button__icon {iconSize}"
79+
alt="{hint}"
80+
/>
6581
{/if}
6682
</button>
6783
{/if}
@@ -92,8 +108,7 @@
92108
93109
&.secondary {
94110
border: 0;
95-
padding-block: 0;
96-
padding-inline: $unit-half;
111+
padding: $unit-quarter $unit-half;
97112
}
98113
&.inline {
99114
border: 0;
@@ -109,10 +124,18 @@
109124
110125
&.l {
111126
@include button-style($l-primary, $l-accent);
127+
128+
.outline {
129+
@include draw-image-black();
130+
}
112131
}
113132
114133
&.d {
115134
@include button-style($d-primary, $d-accent);
135+
136+
.outline {
137+
@include draw-image-white();
138+
}
116139
}
117140
118141
&__text {
@@ -121,9 +144,26 @@
121144
}
122145
123146
&__icon {
124-
height: $unit;
125147
object-fit: contain;
126-
width: $unit;
148+
vertical-align: middle;
149+
@include smooth-change(filter, transform);
150+
151+
&.xl {
152+
height: $unit-triple;
153+
width: $unit-triple;
154+
}
155+
&.lg {
156+
height: $unit-double;
157+
width: $unit-double;
158+
}
159+
&.md {
160+
height: $unit-plus;
161+
width: $unit-plus;
162+
}
163+
&.sm {
164+
height: $unit;
165+
width: $unit;
166+
}
127167
}
128168
}
129169
</style>

‎src/lib/browser/ui/Link.svelte‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
1313
export let raw = false;
1414
15-
export let control = true;
15+
export let printVisible = true;
1616
1717
const dispatch = createEventDispatcher();
1818
@@ -35,8 +35,6 @@
3535
class:l="{!isDark}"
3636
class:d="{isDark}"
3737
on:click="{onClick}"
38-
aria-hidden="{control ? undefined : 'true'}"
39-
tabindex="{control ? undefined : -1}"
4038
href="{url}"
4139
title="{hint}"
4240
target="_blank"
@@ -51,7 +49,7 @@
5149
class:l="{!isDark}"
5250
class:d="{isDark}"
5351
class:inline
54-
class:no-print="{!control}"
52+
class:no-print="{!printVisible}"
5553
on:click="{onClick}"
5654
href="{url}"
5755
title="{hint}"

0 commit comments

Comments
 (0)