langfingaz/anki
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Implement new way to way to display icons in IconButtons

Browse Source 
* allows for multiple icons overlay
* allows to make individual icons smaller/bigger
This commit is contained in:
Henrik Giesel 2021-05-30 21:05:16 +02:00
parent 09af4d5ecd
commit 54609f408a
1 changed files with 12 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
ts/components/IconButton.svelte
View File

@ -13,6 +13,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
export { className as class }; export { className as class };
export let tooltip: string | undefined = undefined; export let tooltip: string | undefined = undefined;
export let iconSize: number = 80;
export let active = false; export let active = false;
export let disables = true; export let disables = true;
export let tabbable = false; export let tabbable = false;
@ -37,6 +38,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
class:dropdown-toggle={dropdownProps.dropdown} class:dropdown-toggle={dropdownProps.dropdown}
class:btn-day={!nightMode} class:btn-day={!nightMode}
class:btn-night={nightMode} class:btn-night={nightMode}
style={`--icon-size: ${iconSize}%`}
title={tooltip} title={tooltip}
{...dropdownProps} {...dropdownProps}
disabled={_disabled} disabled={_disabled}
@ -44,7 +46,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
on:click on:click
on:mousedown|preventDefault on:mousedown|preventDefault
> >
<span class="p-1"><slot /></span> <span> <slot /> </span>
</button> </button>
<style lang="scss"> <style lang="scss">
@ -60,6 +62,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
span { span {
display: inline-block; display: inline-block;
position: relative;
vertical-align: middle; vertical-align: middle;
/* constrain icon */ /* constrain icon */
@ -68,10 +71,16 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
& > :global(svg), & > :global(svg),
& > :global(img) { & > :global(img) {
position: absolute;
width: var(--icon-size);
height: var(--icon-size);
top: calc((100% - var(--icon-size)) / 2);
bottom: calc((100% - var(--icon-size)) / 2);
left: calc((100% - var(--icon-size)) / 2);
right: calc((100% - var(--icon-size)) / 2);
fill: currentColor; fill: currentColor;
vertical-align: unset; vertical-align: unset;
width: 100%;
height: 100%;
} }
} }