NG-SD-Plugins/PowerTools
NG-SD-Plugins/PowerTools
4
4
Fork 3
Code Issues 18 Pull requests 1 Projects Releases 24 Wiki Activity

Use basic DFL components for store UI

Browse source
This commit is contained in:
NGnius (Graham) 2024-02-02 21:40:35 -05:00
parent 2ec89ee1eb
commit 9dedebb234
1 changed files with 73 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

86
src/store/page.tsx
View file

@ -1,4 +1,7 @@
import { Component, Fragment } from "react"; import { Component } from "react";
import { HiDownload } from "react-icons/hi";
import { PanelSectionRow, PanelSection, Focusable, staticClasses, DialogButton } from "decky-frontend-lib";
import * as backend from "../backend"; import * as backend from "../backend";
import { tr } from "usdpl-front"; import { tr } from "usdpl-front";
@ -22,27 +25,84 @@ export class StoreResultsPage extends Component {
if (storeItems) { if (storeItems) {
if (storeItems.length == 0) { if (storeItems.length == 0) {
backend.log(backend.LogLevel.Warn, "No store results; got array with length 0 from cache"); backend.log(backend.LogLevel.Warn, "No store results; got array with length 0 from cache");
return (<div> return (<PanelSection>
{ tr("No results") /* TODO translate */ } { tr("No results") /* TODO translate */ }
</div>); </PanelSection>);
} else { } else {
// TODO // TODO
return storeItems.map((meta: backend.StoreMetadata) => { return (<PanelSection>
<div> {
<div> { meta.name } </div> storeItems.map((meta: backend.StoreMetadata) => {
<div> { tr("Created by") /* TODO translate */} { meta.steam_username } </div> <PanelSectionRow>
<div> { meta.tags.map((tag: string) => <span>{tag}</span>) } </div> <Focusable style={{
Hey NG you should finish this page display: "flex",
</div> flexDirection: "row",
}); borderRadius: "2px",
}}>
<DialogButton
//layout="below"
style={{
width: "56px",
display: "flex",
flexShrink: "0",
alignSelf: "center",
}}
onClick={(_: MouseEvent) => {
backend.log(backend.LogLevel.Info, "Downloading settings " + meta.name + " (" + meta.id + ")");
backend.storeDownloadById(meta.id);
}}
>
{ /* TODO make this responsive when clicked */}
<HiDownload/>
</DialogButton>
<div style={{
flexGrow: "1",
display: "flex",
flexDirection: "column",
minWidth: "0",
marginBottom: "2px",
}}
className={staticClasses.Text}>
<div style={{
display: "flex",
flexDirection: "row",
minWidth: "0",
fontSize: "16px",
}}
className={staticClasses.Text}>
{ meta.name }
</div>
<div style={{
display: "flex",
flexDirection: "row",
minWidth: "0",
fontSize: "12px",
}}
className={staticClasses.Text}>
{ tr("Created by") /* TODO translate */} { meta.steam_username }
</div>
<div>
{ meta.tags.map((tag: string) => (<span style={{
borderRadius: "10px",
}}>
{tag}
</span>)
) }
</div>
</div>
</Focusable>
</PanelSectionRow>
})
}
</PanelSection>);
} }
} else { } else {
backend.log(backend.LogLevel.Warn, "Store failed to load; got null from cache"); backend.log(backend.LogLevel.Warn, "Store failed to load; got null from cache");
// store did not pre-load when the game started // store did not pre-load when the game started
return (<Fragment> return (<PanelSection>
{ tr("Store failed to load") /* TODO translate */ } { tr("Store failed to load") /* TODO translate */ }
</Fragment>); </PanelSection>);
} }
} }
} }