phc/storage
6
1
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Better toasts, a bit responsive and more

Browse Source
This commit is contained in:
aziis98
2022-07-05 01:53:42 +02:00
parent bd0a9b5c6e
commit 70ab93de0a
8 changed files with 273 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files
_frontend/src/components/Sidebar.jsx
+15 -3
View File
@@ -1,6 +1,8 @@
import { useState } from 'preact/hooks'
import { useEffect, useState } from 'preact/hooks'
import { Icon } from './Icon.jsx'
import { useStore } from '../context.jsx'
import { useRemoteState } from '../util.jsx'
import { useToasts } from './Toasts.jsx'
const SidebarDropdownItem = ({ icon, label, children }) => {
const [collapsed, setCollapsed] = useState(false)
@@ -28,7 +30,16 @@ const SidebarDropdownItem = ({ icon, label, children }) => {
}
export const Sidebar = () => {
const { sidebarVisibile, buckets, user } = useStore()
const { sidebarVisibile, user } = useStore()
const [showToast] = useToasts()
const [buckets, err] = useRemoteState('/api/buckets', [])
useEffect(() => {
if (err) {
showToast(`Errore "${err}"`)
}
}, [err])
return (
user === 'admin' && (
@@ -77,7 +88,7 @@ export const Sidebar = () => {
</a>
</div>
{buckets.map(bucket => (
<div class="item">
<div class="item" style="margin-left: 1.75rem;">
<a href={'/buckets/' + bucket} class="label">
<div class="row">
<div class="row-group">
@@ -88,6 +99,7 @@ export const Sidebar = () => {
</a>
</div>
))}
{/* <hr /> */}
</div>
</div>
)
_frontend/src/components/Toasts.jsx
+48 -26
View File
@@ -1,35 +1,57 @@
import { useStore } from '../context.jsx'
import { createContext } from 'preact'
import { useContext, useState } from 'preact/hooks'
import { Icon } from './Icon.jsx'
let globalToastId = 0
export const Toasts = () => {
const { toasts } = useStore()
const ToastContext = createContext([])
export const ToastProvider = ({ children }) => {
const [toasts, setToasts] = useState([])
const removeToast = uid => {
setToasts(toasts => toasts.filter(t => t.uid !== uid))
}
return (
<div class="toasts">
{toasts.map(({ i, removed, message }) => (
<div key={i} class={removed ? 'toast removed' : 'toast'}>
{message}
</div>
))}
</div>
<ToastContext.Provider value={{ toasts, setToasts }}>
{children}
<div class="toasts">
{toasts.map(({ uid, removed, message }) => (
<div key={uid} class={removed ? 'toast removed' : 'toast'}>
<p>{message}</p>
<div class="toast-close" onClick={() => removeToast(uid)}>
<Icon name="close" />
</div>
</div>
))}
</div>
</ToastContext.Provider>
)
}
const cleanToasts = setToasts => {
setToasts(ts => ts.filter((t, i) => !t.removed))
}
export const showToast = (_toasts, setToasts) => message => {
const toast = { i: globalToastId++, removed: false, message }
setTimeout(() => {
setToasts(ts => ts.map(t => (t === toast ? { ...t, removed: true } : t)))
}, 3000)
setTimeout(() => {
cleanToasts(setToasts)
}, 4000)
setToasts(ts => [...ts.slice(-5), toast])
export const useToasts = () => {
const { setToasts } = useContext(ToastContext)
const showToast = (message, { duration } = {}) => {
duration ??= 3000
const toast = { uid: globalToastId++, removed: false, message }
setTimeout(() => {
setToasts(toasts => toasts.map(t => (t === toast ? { ...t, removed: true } : t)))
}, duration)
setTimeout(() => {
setToasts(toasts => toasts.filter(t => !t.removed))
}, duration + 1000)
setToasts(ts => [...ts.slice(-5), toast])
}
const clearToasts = () => {
setToasts([])
}
return [showToast, clearToasts]
}
_frontend/src/main.jsx
+7 -19
View File
@@ -7,9 +7,9 @@ import { Login } from './pages/Login.jsx'
import { Store, useStore } from './context.jsx'
import { changeCase, useRouter, useUser } from './util.jsx'
import { Dashboard } from './pages/Dashboard.jsx'
import { showToast, Toasts } from './components/Toasts.jsx'
import { Sidebar } from './components/Sidebar.jsx'
import { MainContent } from './components/MainContent.jsx'
import { ToastProvider } from './components/Toasts.jsx'
const App = () => {
const [id, route, routeParams] = useRouter({
@@ -52,27 +52,14 @@ const App = () => {
}
})
const [toasts, setToasts] = useState([])
const [sidebarVisibile, setSidebarVisible] = useState(true)
const [buckets, setBuckets] = useState([])
useEffect(() => {
fetch('/api/buckets')
.then(res => res.json())
.then(value => setBuckets(value))
}, [])
const context = {
// Auth
user,
// Sidebar
sidebarVisibile,
setSidebarVisible,
buckets,
// Toasts
toasts,
setToasts,
showToast: showToast(toasts, setToasts),
// Routing
route: {
...route,
@@ -82,11 +69,12 @@ const App = () => {
}
return (
<Store.Provider value={context}>
<Sidebar />
<MainContent />
<Toasts />
</Store.Provider>
<ToastProvider>
<Store.Provider value={context}>
{user === 'admin' && <Sidebar />}
<MainContent />
</Store.Provider>
</ToastProvider>
)
}
_frontend/src/pages/ApiKeys.jsx
+5 -4
View File
@@ -1,9 +1,10 @@
import { useEffect, useState } from 'preact/hooks'
import { Icon } from '../components/Icon.jsx'
import { useToasts } from '../components/Toasts.jsx'
import { useStore } from '../context.jsx'
export const ApiKeys = () => {
const { showToast } = useStore()
const [showToast] = useToasts()
const [keys, setKeys] = useState([])
@@ -40,7 +41,7 @@ export const ApiKeys = () => {
await navigator.clipboard.writeText(key)
showToast(
<>
Copiata <code>{key}</code> negli appunti
Copiata chiave <code>{key.substring(0, 6)}</code>... negli appunti
</>
)
}
@@ -62,7 +63,7 @@ export const ApiKeys = () => {
<div class="cells" style="grid-template-columns: 1fr auto;">
{/* Header */}
<div class="header">Chiave</div>
<div class="header">Opzioni</div>
<div class="header">Azioni</div>
{/* Rows */}
{keys.map(key => {
return (
@@ -72,7 +73,7 @@ export const ApiKeys = () => {
{key}
</button>
</div>
<div class="options">
<div class="actions">
<button
class="icon delete flat"
onClick={() => removeKey(key)}
_frontend/src/pages/Bucket.jsx
+10 -3
View File
@@ -1,5 +1,6 @@
import { useEffect, useRef, useState } from 'preact/hooks'
import { Icon } from '../components/Icon.jsx'
import { useToasts } from '../components/Toasts.jsx'
import { useStore } from '../context.jsx'
import { useRemoteState } from '../util.jsx'
@@ -8,10 +9,16 @@ export const Bucket = () => {
route: {
params: { bucket },
},
showToast,
} = useStore()
const [bucketObjects, updateBucketObjects] = useRemoteState(`/api/buckets/${bucket}`, [])
const [showToast] = useToasts()
const [bucketObjects, err, updateBucketObjects] = useRemoteState(`/api/buckets/${bucket}`, [])
useEffect(() => {
if (err) {
showToast(`Errore "${err}"`)
}
}, [err])
const fileInputRef = useRef(null)
@@ -46,7 +53,7 @@ export const Bucket = () => {
if (res.ok) {
showToast('Oggetto rimosso')
} else {
showToast(`Errore: ${await res.text()}`)
showToast(`Errore "${await res.text()}"`)
}
}
_frontend/src/pages/Buckets.jsx
+21 -6
View File
@@ -1,10 +1,18 @@
import { useEffect, useState } from 'preact/hooks'
import { Icon } from '../components/Icon.jsx'
import { showToast } from '../components/Toasts.jsx'
import { useToasts } from '../components/Toasts.jsx'
import { useRemoteState } from '../util.jsx'
export const Buckets = () => {
const [buckets, updateBuckets] = useRemoteState('/api/buckets', [])
const [showToast] = useToasts()
const [buckets, err, updateBuckets] = useRemoteState('/api/buckets', [])
useEffect(() => {
if (err) {
showToast(`Errore "${err}"`)
}
}, [err])
const [allBucketSettings, setAllBucketSettings] = useState({})
const updateBucketSettings = async bucket => {
@@ -44,6 +52,10 @@ export const Buckets = () => {
}
}
const deleteBucket = async bucket => {
showToast('TODO: Not implemented')
}
return (
<>
<div class="panel">
@@ -57,7 +69,7 @@ export const Buckets = () => {
{/* Header */}
<div class="header">Bucket</div>
<div class="header">Settings</div>
<div class="header">Options</div>
<div class="header">Actions</div>
{/* Rows */}
{buckets.map(bucket => (
<>
@@ -74,8 +86,11 @@ export const Buckets = () => {
value={JSON.stringify(allBucketSettings[bucket])}
/>
</div>
<div class="options">
<button class="icon delete flat">
<div class="actions">
<button
class="icon delete flat"
onClick={() => deleteBucket(bucket)}
>
<Icon name="delete" />
</button>
</div>
@@ -85,7 +100,7 @@ export const Buckets = () => {
</div>
</div>
<form action="/api/buckets" method="POST">
<form action="/api/buckets" method="POST" autocomplete="off">
<div class="fill title">Nuovo Bucket</div>
<label for="new-bucket-name">Name</label>
_frontend/src/util.jsx
+14 -8
View File
@@ -58,22 +58,28 @@ export const useRouter = routes => {
// useRemoteState
export function useRemoteState(url, initialValue = null) {
const [error, setError] = useState(null)
const [value, setValue] = useState(initialValue)
const updateValue = async () => {
const res = await fetch(url)
if (!res.ok) {
console.error(res.body)
}
const refresh = async () => {
try {
const res = await fetch(url)
if (!res.ok) {
setError(await res.text())
return
}
setValue(await res.json())
setValue(await res.json())
} catch (err) {
setError(err)
}
}
useEffect(() => {
updateValue()
refresh()
}, [])
return [value, updateValue]
return [value, error, refresh]
}
//
_frontend/styles/main.scss
+153 -5
View File
@@ -18,6 +18,7 @@
--fg-light-500: #333;
--fg-dark-300: #505050;
--fg-dark-450: #c0c0c0;
--fg-dark-500: #ddd;
--ft-mono: 'JetBrains Mono', monospace;
@@ -262,6 +263,10 @@ main {
gap: 0.5rem;
}
.grow {
flex-grow: 1;
}
}
//
@@ -269,6 +274,8 @@ main {
//
.toasts {
user-select: none;
position: absolute;
z-index: 10;
@@ -291,7 +298,7 @@ main {
background: #38383d;
color: var(--fg-dark-500);
padding: 0.5rem 1rem;
padding: 0.5rem 0.5rem 0.5rem 1rem;
border-radius: 0.5rem;
opacity: 0.95;
@@ -299,6 +306,22 @@ main {
animation: toast-fade-in 250ms ease-out;
transition: opacity 250ms ease-in;
display: flex;
align-items: center;
gap: 0.5rem;
.toast-close {
display: flex;
align-items: center;
cursor: pointer;
&:hover {
color: var(--fg-dark-450);
}
}
&.removed {
opacity: 0;
}
@@ -344,8 +367,6 @@ main {
}
& > div {
min-width: 4rem;
display: flex;
align-items: center;
}
@@ -363,6 +384,8 @@ form {
label {
justify-self: end;
font-weight: var(--ft-sans-wt-bold);
}
.fill {
@@ -589,7 +612,7 @@ $heading-scale: 1.33;
.route-api-keys {
.table {
min-width: 30rem;
min-width: 35rem;
.name {
button {
@@ -597,8 +620,9 @@ $heading-scale: 1.33;
}
}
.options {
.actions {
display: flex;
align-items: center;
justify-content: end;
gap: 0.5rem;
}
@@ -620,6 +644,13 @@ $heading-scale: 1.33;
width: 100%;
}
}
.actions {
display: flex;
align-items: center;
justify-content: end;
gap: 0.5rem;
}
}
}
}
@@ -634,3 +665,120 @@ $heading-scale: 1.33;
}
}
}
//
// Mobile
//
@media screen and (max-width: 512px) {
main {
.sidebar {
width: 0;
min-width: 0;
&.collapsed {
// width: 100%;
min-width: calc(100vw - 3rem);
}
}
.main-content {
& > .content {
max-width: 100%;
}
.table {
min-width: unset;
max-width: 100%;
.cells {
max-width: 100%;
gap: 0;
& > div {
min-height: 2.25rem;
gap: 1rem;
padding: 0;
}
.header {
display: none;
}
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
}
}
}
.panel {
max-width: 100%;
}
.route-api-keys .table {
.cells {
& > div {
overflow-x: auto;
}
.name {
&::before {
content: 'Nome: ';
font-weight: var(--ft-sans-wt-bold);
}
button {
font-size: 90%;
word-wrap: break-word;
}
}
.actions {
&::before {
content: 'Azioni: ';
font-weight: var(--ft-sans-wt-bold);
}
margin-bottom: 1rem;
}
}
}
.route-buckets .table .cells {
.name {
&::before {
content: 'Nome: ';
font-weight: var(--ft-sans-wt-bold);
}
}
.settings {
&::before {
content: 'Settings: ';
font-weight: var(--ft-sans-wt-bold);
}
min-width: unset;
}
.actions {
width: 100%;
&::before {
content: 'Azioni: ';
font-weight: var(--ft-sans-wt-bold);
}
justify-content: start;
&:not(:last-child) {
margin-bottom: 1rem;
}
}
}
input {
max-width: 100%;
}
}