Store project panel open state

This commit is contained in:
Misode
2022-06-14 16:56:03 +02:00
parent 90eac0f9b8
commit 9cb323e80c
2 changed files with 26 additions and 10 deletions

View File

@@ -13,6 +13,7 @@ export namespace Store {
export const ID_SOUNDS_VERSION = 'minecraft_sounds_version'
export const ID_PROJECTS = 'misode_projects'
export const ID_BACKUPS = 'misode_generator_backups'
export const ID_PROJECT_PANEL_OPEN = 'misode_project_panel_open'
export const ID_OPEN_PROJECT = 'misode_open_project'
export const ID_TREE_VIEW_MODE = 'misode_tree_view_mode'
@@ -69,6 +70,12 @@ export namespace Store {
return backups[id]
}
export function getProjectPanelOpen(): boolean | undefined {
const open = localStorage.getItem(ID_PROJECT_PANEL_OPEN)
if (open === null) return undefined
return JSON.parse(open)
}
export function getOpenProject() {
return localStorage.getItem(ID_OPEN_PROJECT) ?? DRAFT_PROJECT.name
}
@@ -119,6 +126,14 @@ export namespace Store {
localStorage.setItem(ID_BACKUPS, JSON.stringify(backups))
}
export function setProjectPanelOpen(open: boolean | undefined) {
if (open === undefined) {
localStorage.removeItem(ID_PROJECT_PANEL_OPEN)
} else {
localStorage.setItem(ID_PROJECT_PANEL_OPEN, JSON.stringify(open))
}
}
export function setOpenProject(projectName: string | undefined) {
if (projectName === undefined) {
localStorage.removeItem(ID_OPEN_PROJECT)

View File

@@ -1,6 +1,6 @@
import { DataModel, Path } from '@mcschema/core'
import { getCurrentUrl, route } from 'preact-router'
import { useEffect, useErrorBoundary, useMemo, useRef, useState } from 'preact/hooks'
import { useCallback, useEffect, useErrorBoundary, useMemo, useRef, useState } from 'preact/hooks'
import config from '../../config.json'
import { Analytics } from '../Analytics'
import { Ad, Btn, BtnMenu, ErrorPanel, FileCreation, FileRenaming, Footer, HasPreview, Octicon, PreviewPanel, ProjectCreation, ProjectDeletion, ProjectPanel, SearchList, SourcePanel, TextInput, Tree, VersionSwitcher } from '../components'
@@ -302,20 +302,21 @@ export function Generator({}: Props) {
}
}
const [projectShown, setProjectShown] = useState(window.innerWidth > 600)
const [projectCreating, setProjectCreating] = useState(false)
const [projectDeleting, setprojectDeleting] = useState(false)
const [fileSaving, setFileSaving] = useState<string | undefined>(undefined)
const [fileRenaming, setFileRenaming] = useState<{ type: string, id: string } | undefined>(undefined)
const toggleProject = () => {
const [projectShown, setProjectShown] = useState(Store.getProjectPanelOpen() ?? window.innerWidth > 600)
const toggleProjectShown = useCallback(() => {
if (projectShown) {
Analytics.hideProject(gen.id, projects.length, project.files.length, 'menu')
} else {
Analytics.showProject(gen.id, projects.length, project.files.length, 'menu')
}
Store.setProjectPanelOpen(!projectShown)
setProjectShown(!projectShown)
}
}, [projectShown])
const [projectCreating, setProjectCreating] = useState(false)
const [projectDeleting, setprojectDeleting] = useState(false)
const [fileSaving, setFileSaving] = useState<string | undefined>(undefined)
const [fileRenaming, setFileRenaming] = useState<{ type: string, id: string } | undefined>(undefined)
return <>
<main class={`generator${previewShown ? ' has-preview' : ''}${projectShown ? ' has-project' : ''}`}>
@@ -366,7 +367,7 @@ export function Generator({}: Props) {
<Btn icon={shareCopyActive ? 'check' : 'clippy'} onClick={copySharedId} tooltip={locale(shareCopyActive ? 'copied' : 'copy_share')} tooltipLoc="nw" active={shareCopyActive} />
</div>
<div class="popup-actions left-actions" style="--offset: 50px;">
<div class={'popup-action action-project shown tooltipped tip-ne'} aria-label={locale(projectShown ? 'hide_project' : 'show_project')} onClick={toggleProject}>
<div class={'popup-action action-project shown tooltipped tip-ne'} aria-label={locale(projectShown ? 'hide_project' : 'show_project')} onClick={toggleProjectShown}>
{projectShown ? Octicon.chevron_left : Octicon.repo}
</div>
</div>