BradNut/boredgame
1
0
Fork 0
mirror of https://github.com/BradNut/boredgame synced 2025-09-08 17:40:22 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Update icons in preferences.

Browse source
This commit is contained in:
Bradley Shellnut 2022-08-03 23:32:18 -07:00
parent c416630aad
commit 112b5dae4a
1 changed files with 25 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

31
src/lib/components/preferences/gameCollection.svelte
View file

@ -2,7 +2,7 @@
import { browser } from '$app/env'; import { browser } from '$app/env';
import { collectionStore } from '$root/lib/stores/collectionStore'; import { collectionStore } from '$root/lib/stores/collectionStore';
import { ToastType } from '$root/lib/types'; import { ToastType } from '$root/lib/types';
import { SaveIcon } from '@rgossiaux/svelte-heroicons/outline'; import { SaveIcon, TrashIcon } from '@rgossiaux/svelte-heroicons/outline';
import { toast } from '../toast/toast'; import { toast } from '../toast/toast';
function saveCollection() { function saveCollection() {
@ -10,19 +10,26 @@
console.log('collectionStore', $collectionStore); console.log('collectionStore', $collectionStore);
if (!browser) return; if (!browser) return;
localStorage.collection = JSON.stringify($collectionStore); localStorage.collection = JSON.stringify($collectionStore);
toast.send("Saved collection", { duration: 3000, type: ToastType.INFO }); toast.send('Saved collection', { duration: 3000, type: ToastType.INFO });
} }
function clearCollection() { function clearCollection() {
if (!browser) return; if (!browser) return;
localStorage.collection = []; localStorage.collection = [];
toast.send("Cleared collection", { duration: 3000, type: ToastType.INFO }); toast.send('Cleared collection', { duration: 3000, type: ToastType.INFO });
} }
</script> </script>
<div> <div>
<button type="button" on:click={() => saveCollection()}><SaveIcon class="preferences-icon" /> Save Collection</button> <span class="collection-title">Your Collection</span>
<button type="button" on:click={() => clearCollection()}><SaveIcon class="preferences-icon" /> Clear Collection</button> <div class="collection-buttons">
<button type="button" aria-label="Save Collection" on:click={() => saveCollection()}
><SaveIcon class="preferences-icon" />Save</button
>
<button type="button" aria-label="Clear saved collection" on:click={() => clearCollection()}
><TrashIcon class="preferences-icon" />Clear</button
>
</div>
</div> </div>
<style> <style>
@ -31,8 +38,18 @@
width: 24px; width: 24px;
} }
div { :global(.collection-title) {
display: grid; padding-bottom: var(--spacing-8);
font-size: var(--font-24);
font-weight: 700;
line-height: 32px;
}
:global(.collection-buttons) {
display: flex;
flex-direction: row;
justify-content: space-between;
gap: 1.5rem;
} }
button { button {