You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
|
|
<script lang="ts"> import { commonIcons, uncommonIcons } from "../external/icons"; import type { IconName } from "../external/icons"; import Icon from "./Icon.svelte";
export let value: IconName; export let disabled: boolean;
let showAll = !commonIcons.includes(value);
function toggleShowAll() { showAll = !showAll; } </script>
<div class:disabled class="icon-select"> {#each commonIcons as iconName (iconName)} <div class="icon-item" class:selected={value===iconName} on:click={() => {if (!disabled) { value = iconName }}}> <Icon name={iconName} /> </div> {/each} <div class="show-all" on:click={toggleShowAll}> { showAll ? "Hide uncommon icons" : "Show uncommon icons" } </div> {#if showAll} {#each uncommonIcons as iconName (iconName)} <div class="icon-item" class:selected={value===iconName} on:click={() => {if (!disabled) { value = iconName }}}> <Icon name={iconName} /> </div> {/each} {/if} </div>
<style> div.icon-select { background: #222; margin: 0; padding: 0; border-radius: 0.05em; margin-bottom: 0.5em; }
div.icon-select.disabled { background: #444; }
div.icon-item { display: inline-block; box-sizing: border-box; width: calc(100% / 8); padding: 0.35em 0 0.25em 0; text-align: center;
cursor: pointer; } div.icon-item:hover { background-color: #292929; } div.icon-item.selected { background-color: rgb(18, 63, 75); } div.icon-item.selected:hover { background-color: rgb(24, 83, 99); } div.icon-select.disabled > div.icon-item { background-color: #444; cursor: default; } div.icon-select.disabled > div.icon-item.selected { background-color: #555; }
div.show-all { color: #777; cursor: pointer; text-align: center; padding: 0.25em 0; } div.show-all:hover { color: #ccc; background-color: #2c2c2c; } </style>
|