NG-SD-Plugins/PowerTools
NG-SD-Plugins/PowerTools
4
4
Fork 3
Code Issues 19 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 { tr } from "usdpl-front";
@ -22,27 +25,84 @@ export class StoreResultsPage extends Component {
if (storeItems) {
if (storeItems.length == 0) {
backend.log(backend.LogLevel.Warn, "No store results; got array with length 0 from cache");
return (<div>
return (<PanelSection>
{ tr("No results") /* TODO translate */ }
</div>);
</PanelSection>);
} else {
// TODO
return storeItems.map((meta: backend.StoreMetadata) => {
<div>
<div> { meta.name } </div>
<div> { tr("Created by") /* TODO translate */} { meta.steam_username } </div>
<div> { meta.tags.map((tag: string) => <span>{tag}</span>) } </div>
Hey NG you should finish this page
</div>
});
return (<PanelSection>
{
storeItems.map((meta: backend.StoreMetadata) => {
<PanelSectionRow>
<Focusable style={{
display: "flex",
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 {
backend.log(backend.LogLevel.Warn, "Store failed to load; got null from cache");
// store did not pre-load when the game started
return (<Fragment>
return (<PanelSection>
{ tr("Store failed to load") /* TODO translate */ }
</Fragment>);
</PanelSection>);
}
}
}