akanealw/misode.github.io
1
0
Fork 0
mirror of https://github.com/misode/misode.github.io.git synced 2026-04-23 15:17:09 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Allow multiple errors and dismissing errors

Browse Source
This commit is contained in:
Misode
2021-07-02 02:59:19 +02:00
parent f43cb03cc3
commit 985057ab4e
5 changed files with 40 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/app/components/ErrorPanel.tsx
View File

@@ -1,5 +1,12 @@
export function ErrorPanel({ error }: { error: string }) {
import { Octicon } from './Octicon'
type ErrorPanelProps = {
error: string,
onDismiss?: () => unknown,
}
export function ErrorPanel({ error, onDismiss }: ErrorPanelProps) {
return <div class="error">
{onDismiss && <div class="error-dismiss" onClick={onDismiss}>{Octicon.x}</div>}
<h3>{error}</h3>
<p>You can report this as a bug <a href="https://github.com/misode/misode.github.io/issues/new" target="_blank">on GitHub</a></p>
</div>

1
src/app/components/Octicon.tsx
View File

@@ -26,5 +26,6 @@ export const Octicon = {
three_bars: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M1 2.75A.75.75 0 011.75 2h12.5a.75.75 0 110 1.5H1.75A.75.75 0 011 2.75zm0 5A.75.75 0 011.75 7h12.5a.75.75 0 110 1.5H1.75A.75.75 0 011 7.75zM1.75 12a.75.75 0 100 1.5h12.5a.75.75 0 100-1.5H1.75z"></path></svg>,
unfold: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path d="M8.177.677l2.896 2.896a.25.25 0 01-.177.427H8.75v1.25a.75.75 0 01-1.5 0V4H5.104a.25.25 0 01-.177-.427L7.823.677a.25.25 0 01.354 0zM7.25 10.75a.75.75 0 011.5 0V12h2.146a.25.25 0 01.177.427l-2.896 2.896a.25.25 0 01-.354 0l-2.896-2.896A.25.25 0 015.104 12H7.25v-1.25zm-5-2a.75.75 0 000-1.5h-.5a.75.75 0 000 1.5h.5zM6 8a.75.75 0 01-.75.75h-.5a.75.75 0 010-1.5h.5A.75.75 0 016 8zm2.25.75a.75.75 0 000-1.5h-.5a.75.75 0 000 1.5h.5zM12 8a.75.75 0 01-.75.75h-.5a.75.75 0 010-1.5h.5A.75.75 0 0112 8zm2.25.75a.75.75 0 000-1.5h-.5a.75.75 0 000 1.5h.5z"></path></svg>,
upload: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M8.53 1.22a.75.75 0 00-1.06 0L3.72 4.97a.75.75 0 001.06 1.06l2.47-2.47v6.69a.75.75 0 001.5 0V3.56l2.47 2.47a.75.75 0 101.06-1.06L8.53 1.22zM3.75 13a.75.75 0 000 1.5h8.5a.75.75 0 000-1.5h-8.5z"></path></svg>,
x: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M3.72 3.72a.75.75 0 011.06 0L8 6.94l3.22-3.22a.75.75 0 111.06 1.06L9.06 8l3.22 3.22a.75.75 0 11-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 01-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 010-1.06z"></path></svg>,
x_circle: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M3.404 12.596a6.5 6.5 0 119.192-9.192 6.5 6.5 0 01-9.192 9.192zM2.344 2.343a8 8 0 1011.313 11.314A8 8 0 002.343 2.343zM6.03 4.97a.75.75 0 00-1.06 1.06L6.94 8 4.97 9.97a.75.75 0 101.06 1.06L8 9.06l1.97 1.97a.75.75 0 101.06-1.06L9.06 8l1.97-1.97a.75.75 0 10-1.06-1.06L8 6.94 6.03 4.97z"></path></svg>,
}

4
src/app/components/PreviewPanel.tsx
View File

@@ -44,7 +44,7 @@ export const Previews: {
},
]
type PreviewProps = {
type PreviewPanelProps = {
lang: string,
model: DataModel | null,
version: VersionId,
@@ -52,7 +52,7 @@ type PreviewProps = {
shown: boolean,
onError: (message: string) => unknown,
}
export function PreviewPanel({ lang, model, version, id, shown }: PreviewProps) {
export function PreviewPanel({ lang, model, version, id, shown }: PreviewPanelProps) {
const [, setCount] = useState(0)
useModel(model, () => {

20
src/app/pages/Generator.tsx
View File

@@ -19,7 +19,13 @@ type GeneratorProps = {
}
export function Generator({ lang, changeTitle, version, onChangeVersion }: GeneratorProps) {
const loc = locale.bind(null, lang)
const [error, setError] = useState('')
const [errors, setErrors] = useState<string[]>([])
const addError = (error: string) => {
setErrors([...errors, error])
}
const dismissError = (error: string) => {
setErrors(errors.filter(e => e !== error))
}
const [errorBoundary] = useErrorBoundary()
if (errorBoundary) {
return <main><ErrorPanel error={`Something went wrong rendering the generator: ${errorBoundary.message}`}/></main>
@@ -45,7 +51,7 @@ export function Generator({ lang, changeTitle, version, onChangeVersion }: Gener
.then(b => setBlockStates(b))
getModel(version, generator.id)
.then(m => setModel(m))
.catch(e => { console.error(e); setError(e.message) })
.catch(e => { console.error(e); addError(e.message) })
}, [version, generator.id])
const reset = () => {
@@ -92,7 +98,7 @@ export function Generator({ lang, changeTitle, version, onChangeVersion }: Gener
setPresetResults(presets)
}
})
.catch(e => { console.error(e); setError(e.message) })
.catch(e => { console.error(e); addError(e.message) })
}, [version, generator.id, presetFilter])
const loadPreset = (id: string) => {
@@ -163,8 +169,8 @@ export function Generator({ lang, changeTitle, version, onChangeVersion }: Gener
<Btn icon="arrow_right" label={loc('redo')} onClick={redo} />
</BtnMenu>
</div>
{error && <ErrorPanel error={error} />}
<Tree {...{lang, model, version, blockStates}} onError={setError} />
{errors.map(e => <ErrorPanel error={e} onDismiss={() => dismissError(e)} />)}
<Tree {...{lang, model, version, blockStates}} onError={addError} />
</main>
<div class="popup-actions" style={`--offset: -${10 + actionsShown * 50}px;`}>
<div class={`popup-action action-preview${hasPreview ? ' shown' : ''}`} onClick={togglePreview}>
@@ -181,10 +187,10 @@ export function Generator({ lang, changeTitle, version, onChangeVersion }: Gener
</div>
</div>
<div class={`popup-preview${previewShown ? ' shown' : ''}`}>
<PreviewPanel {...{lang, model, version, id: generator.id}} shown={previewShown} onError={setError} />
<PreviewPanel {...{lang, model, version, id: generator.id}} shown={previewShown} onError={addError} />
</div>
<div class={`popup-source${sourceShown ? ' shown' : ''}`}>
<SourcePanel {...{lang, model, blockStates, doCopy, doDownload, doImport}} name={generator.schema ?? 'data'} onError={setError} />
<SourcePanel {...{lang, model, blockStates, doCopy, doDownload, doImport}} name={generator.schema ?? 'data'} onError={addError} />
</div>
</>
}

16
src/styles/global.css
View File

@@ -219,6 +219,10 @@ main > .controls {
padding: 4px 16px 50vh;
}
.error + .tree {
margin-top: 0;
}
.popup-source {
position: fixed;
display: flex;
@@ -464,6 +468,18 @@ main.has-preview {
margin: 10px 0;
}
.error .error-dismiss {
float: right;
cursor: pointer;
margin-left: 10px;
}
.error-dismiss svg {
display: block;
width: 24px;
height: 24px;
}
.error a {
color: var(--text-1)
}