learn-javascript-the-hard-way
/
bandolier-template
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Bring back the docs for components and improve the Icon demo.

Browse Source
main
Zed A. Shaw 2 years ago
parent 17e05130e3
commit 7c6c810efc
3 changed files with 38 additions and 98 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 5
      admin/bando/Components.svelte
  2. 126
      admin/bando/demos/Icon.svelte
  3. 5
      admin/bando/demos/Icon.svelte.md

5
admin/bando/Components.svelte
Unescape View File

@ -204,11 +204,14 @@
</tabs>
<component data-testid="demo-{ selected.title }">
{#if show == "CODE"}
<Code src={ selected.code } />
<Code src={ selected.code } language="javascript" />
{:else if show == "DOCS"}
{#await load_docs(selected) then docs }
{#if docs}
<Markdown content={ docs } />
{:else}
<h1>No Docs</h1>
<p>This component is not documented yet.</p>
{/if}
{/await}
{:else}

126
admin/bando/demos/Icon.svelte
Unescape View File

@ -1,114 +1,46 @@
<script>
import Icon from "$/client/components/Icon.svelte";
import { onMount } from "svelte";
import api from "$/client/api.js";
import { log } from "$/client/logging.js";
let all_icons = [];
let inactive = false;
let icons = [];
export let size=48;
let search = "";
export let labels=true;
export let tight=false;
let message = "";
const search_icons = (pattern) => {
icons = all_icons.filter(i => i.includes(pattern));
}
$: search_icons(search);
const gen_code = (name) => {
let results = `<Icon name="${name}" size="${size}" />`;
navigator.clipboard.writeText(results).then(() => {
message = `${name} copied to clipboard.`;
}, () => {
message = `${name} copy FAILED.`;
});
}
onMount(async () => {
const [status, data] = await api.get("/icons/index.json");
if(status === 200) {
icons = data;
all_icons = icons;
} else {
log.error("Invalid response", status, data);
}
});
let size = 64;
let fill = "none";
let color = "var(--color)";
let width = "2px";
let shadow = "";
let tooltip = "This is a tip!";
let tip_position = "bottom";
</script>
<style>
icons {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: auto;
row-gap: 1rem;
}
icons.tight {
grid-template-columns: repeat(10, 1fr);
}
icons icon {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
search-bar {
icons div {
display: flex;
justify-content: space-evenly;
flex-wrap: nowrap;
flex-direction: row;
font-size: 2em;
}
search-bar input#size {
width: 6ch;
icons div input {
font-size: 1em;
}
search-bar input#search {
min-width: 30ch;
max-wdith: 30ch;
width: 30ch;
}
search-bar span {
padding-right: 1rem;
}
@media only screen and (max-width: 900px) {
icons {
grid-template-columns: repeat(4, 1fr);
}
}
@media only screen and (max-width: 600px) {
icons {
grid-template-columns: repeat(3, 1fr);
}
}
</style>
<search-bar>
<span on:click={ () => inactive = !inactive }><Icon name={ inactive ? 'eye' : 'eye-off'} size="24" /></span>
<input bind:value={ search } id="search" > <Icon name="x" size="24" /> <input bind:value={ size } id="size" >
<span>{ message }</span>
</search-bar>
<icons class:tight={ tight }>
{#each icons as name}
<icon on:click={ () => gen_code(name) }>
<Icon name={ name } size={ size } inactive={inactive}/>
{#if labels}
<span>{ name }</span>
{/if}
</icon>
{:else}
<h1>No Icons</h1>
{/each}
<icons>
<div>size: <input name="size" bind:value={ size } /></div>
<div>fill: <input name="fill" bind:value={ fill } /></div>
<div>width: <input name="width" bind:value={ width } /></div>
<div>color: <input name="color" bind:value={ color } /></div>
<div>shadow: <input name="shadow" type="checkbox" bind:checked={ shadow } /></div>
<div>tooltip: <input name="tooltip" bind:value={ tooltip } /></div>
<div>tip_position: <input name="tip_position" bind:value={ tip_position } /></div>
<Icon name="keyboard" color={color} size={size} fill={fill} width={width} shadow={shadow} tooltip={tooltip} tip_position={tip_position} />
<Icon name="alarm-clock" color={color} size={size} fill={fill} width={width} shadow={shadow} tooltip={tooltip} tip_position={tip_position} />
<Icon name="activity" color={color} size={size} fill={fill} width={width} shadow={shadow} tooltip={tooltip} tip_position={tip_position} />
<Icon name="apple" color={color} size={size} fill={fill} width={width} shadow={shadow} tooltip={tooltip} tip_position={tip_position} />
<Icon name="angry" color={color} size={size} fill={fill} width={width} shadow={shadow} tooltip={tooltip} tip_position={tip_position} />
<Icon name="anchor" color={color} size={size} fill={fill} width={width} shadow={shadow} tooltip={tooltip} tip_position={tip_position} />
</icons>
<hr>
<a href="/admin/#/icons"><button type="button">See all icons and search them.</button></a>

5
admin/bando/demos/Icon.svelte.md
Unescape View File

@ -0,0 +1,5 @@
# Icons by <a href="https://lucide.dev">lucide</a>
The Bandolier includes the great icon collection from <a href="https://lucide.dev">lucide</a> to get you started. Probably every icon you could possibly need is in this collection, and there's a nice Icon Finder tool to find what you need at <a href="/admin/#/icons/">/admin/#/icons/</a>.
Using `Icon` is very simple. You find the name, and can set a size, whether it's inactive or not, and a few other options to control the appearance. In the Icon Finder you can click on an icon to copy the code for it.
Write Preview
Loading…
Cancel
Save