From 9a10fe1ff0e379b9bf91d68ad8f8dc0d488f8c81 Mon Sep 17 00:00:00 2001 From: Francesco Minnocci Date: Thu, 10 Oct 2024 00:37:08 +0200 Subject: [PATCH] fiat combobox + happy utenti page uWu --- bun.lockb | Bin 350375 -> 350375 bytes src/client/ComboBox.tsx | 60 ++++++++++++++++++++++++++++ src/client/UtentiPage.tsx | 76 +++++++++++++++++++++++------------- src/content/meta/design.mdx | 21 ++++++++++ src/styles/components.scss | 60 +++++++++++++++++++++++++++- src/styles/main.scss | 4 ++ tsconfig.json | 2 +- 7 files changed, 194 insertions(+), 29 deletions(-) create mode 100644 src/client/ComboBox.tsx diff --git a/bun.lockb b/bun.lockb index da3686a0cd39bfc91df3dde2103674f319f24b10..ea33bd3b07e856aa3348b7a38f859fdc9b4723e5 100755 GIT binary patch delta 33 pcmZ3!QFQr6(S{br7N#xC?$g*A void + children: Record +}) => { + const [cloak, setCloak] = useState(true) + const [open, setOpen] = useState(true) + const comboRef = useRef(null) + + useEffect(() => { + const handleClick = (e: MouseEvent) => { + if (comboRef.current && !comboRef.current.contains(e.target as Node)) { + setOpen(false) + } + } + document.addEventListener('mousedown', handleClick) + return () => document.removeEventListener('mousedown', handleClick) + }, []) + + const [itemWidth, setItemWidth] = useState(200) + + useEffect(() => { + setOpen(false) + setCloak(false) + }, []) + + return ( +
+
setOpen(!open)}> +
{children[value]}
+ expand_more +
+ {open && ( +
el && setItemWidth(el.offsetWidth)} + > + {Object.keys(children).map(key => ( +
{ + setValue(key) + setOpen(false) + }} + > + {children[key]} +
+ ))} +
+ )} +
+ ) +} diff --git a/src/client/UtentiPage.tsx b/src/client/UtentiPage.tsx index a8a7b76..4dd333f 100644 --- a/src/client/UtentiPage.tsx +++ b/src/client/UtentiPage.tsx @@ -2,12 +2,28 @@ import { effect, useComputed, useSignal } from '@preact/signals' import Fuse from 'fuse.js' import { useEffect } from 'preact/hooks' import { ShowMore } from './Paginate' +import { ComboBox } from './ComboBox' type User = { uid: string gecos: string } +const FILTERS = { + utenti: { + icon: 'person', + label: 'Utenti', + }, + macchinisti: { + icon: 'construction', + label: 'Macchinisti', + }, + rappstud: { + icon: 'account_balance', + label: 'Rappresentanti', + }, +} + function applyPatches(users: User[]) { users.forEach(user => { // strip ",+" from the end of the gecos field @@ -21,21 +37,25 @@ function applyPatches(users: User[]) { users.reverse() } -const MACCHINISTI = [ - // Lista dei macchinisti attuali - 'delucreziis', - 'minnocci', - 'baldino', - 'mossa', - 'manicastri', - 'llombardo', -] +const MACCHINISTI = ['delucreziis', 'minnocci', 'baldino', 'manicastri', 'llombardo', 'serdyuk'] const RAPPSTUD = [ - // Lista dei rappresentanti degli studenti attuali 'smannella', - 'falcionella', - 'piazza', + 'lotti', + 'rotolo', + 'saccani', + 'carbone', + 'mburatti', + 'ppuddu', + 'marinari', + 'evsilvestri', + 'tateo', + 'graccione', + 'dilella', + 'rocca', + 'odetti', + 'borso', + 'numero', ] export const UtentiPage = () => { @@ -80,20 +100,16 @@ export const UtentiPage = () => { return ( <>
-
{ - e.currentTarget.querySelector('select')?.showPicker() - }} - > - filter_list - - expand_more -
+ ($filter.value = s)}> + {Object.fromEntries( + Object.entries(FILTERS).map(([k, v]) => [ + k, + <> + {v.icon} {v.label} + , + ]), + )} +
{ {poissonUser => (
- person + + {RAPPSTUD.includes(poissonUser.uid) + ? 'account_balance' + : MACCHINISTI.includes(poissonUser.uid) + ? 'construction' + : 'person'} +
{poissonUser.gecos}
diff --git a/src/content/meta/design.mdx b/src/content/meta/design.mdx index 72cbb99..98b9703 100644 --- a/src/content/meta/design.mdx +++ b/src/content/meta/design.mdx @@ -186,3 +186,24 @@ Varie sezioni del sito utilizzano diverse palette di colori. Questa è la palett 'var(--guide-lightest)', ]} /> + +## Combo Box + +I combo box sono un componente per fare dropdown scritto in Preact. Questo è un esempio di come funzionano. + +```js +import { ComboBox } from '$lib/components/ComboBox' + +const [value, setValue] = useState('option-1') +``` + + +```jsx + + {{ + 'option-1': <>Option 1 + 'option-2': <>Option 2 + 'option-3': <>Option 3 + }} + +``` diff --git a/src/styles/components.scss b/src/styles/components.scss index 6fbf75f..27f1568 100644 --- a/src/styles/components.scss +++ b/src/styles/components.scss @@ -608,7 +608,7 @@ gap: 1rem; } - .filter-select { + /* .filter-select { width: 100%; height: 2.5rem; @@ -646,5 +646,63 @@ background: var(--filter-bg-color, #ddd); } + } */ + + .combobox { + width: 100%; + height: 2.5rem; + position: relative; + padding: 0 0.25rem 0 0.25rem; + + @include neo-brutalist-card; + + cursor: pointer; + + --filter-bg-color-hover: color-mix(in srgb, var(--filter-bg-color, #ddd), #000 10%); + + background: var(--filter-bg-color, #ddd); + + .material-symbols-outlined { + padding: 0 0.35rem; + } + + .selected { + height: 100%; + gap: 0.25rem; + display: grid; + grid-auto-flow: column; + grid-template-columns: 1fr auto; + align-items: center; + + .content { + display: grid; + grid-auto-flow: column; + align-items: center; + justify-content: start; + } + } + + .dropdown { + position: absolute; + z-index: 10; + top: calc(100% + 8px); + left: -3px; + + @include neo-brutalist-card; + + background: #fff; + + .option { + height: 2rem; + padding: 0 0.5rem 0 0.25rem; + display: grid; + grid-auto-flow: column; + align-items: center; + justify-content: start; + &:hover { + background: #ddd; + } + } + } } } diff --git a/src/styles/main.scss b/src/styles/main.scss index afaa7b7..f218a65 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -184,3 +184,7 @@ body { ::selection { background: #0002; } + +.invisible { + opacity: 0 !important; +} diff --git a/tsconfig.json b/tsconfig.json index 6101b0e..897f6f8 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,7 +1,7 @@ { "extends": "astro/tsconfigs/strict", "compilerOptions": { - "strict": false, + "strict": true, "jsx": "react-jsx", "jsxImportSource": "preact", "strictNullChecks": true,