wgu/decky-frontend-lib
Template
1
0
Fork 0
mirror of https://github.com/SteamDeckHomebrew/decky-frontend-lib.git synced 2026-05-21 10:29:00 +02:00
Code Issues Packages Projects Releases Wiki Activity

refactor: changes to improve deck cohesion

Browse Source
This commit is contained in:
Tormak
2023-02-01 15:25:23 -06:00
parent 5adc5e14ed
commit c57e0eed34
1 changed files with 2 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
src/custom-components/ReorderableList.tsx
View File

@@ -1,6 +1,6 @@
import { Fragment, JSXElementConstructor, ReactElement, useState } from "react"
import { FaEllipsisH } from "react-icons/fa"
import { DialogButton, Field, Focusable, GamepadButton, gamepadDialogClasses, quickAccessControlsClasses } from "../deck-components"
import { DialogButton, Field, Focusable, GamepadButton } from "../deck-components"
export type ReorderableEntry<T> = {
label: string,
@@ -47,27 +47,12 @@ export function ReorderableList<T>(props: ListProps<T>) {
justify-content: flex-start;
align-content: stretch;
}
.reorderable-list .${quickAccessControlsClasses.PanelSection} {
padding: 0px;
}
.reorderable-list .${gamepadDialogClasses.FieldChildren} {
margin: 0px 16px;
}
.reorderable-list .${gamepadDialogClasses.FieldLabel} {
margin-left: 16px;
}
.reorderable-list .custom-buttons {
width: inherit;
height: inherit;
display: inherit;
}
.reorderable-list .custom-buttons .${gamepadDialogClasses.FieldChildren} {
margin: 0px 16px;
}
`}</style>
<div className="reorderable-list">
<Focusable
@@ -139,7 +124,7 @@ function ReorderableItem<T>(props: ListEntryProps<T>) {
<Field label={props.entryData.label} style={props.reorderEnabled ? {...baseCssProps, background: "#678BA670"} : {...baseCssProps}}>
<Focusable style={{ display: "flex", width: "100%", position: "relative" }} onButtonDown={onReorder}>
{props.children}
<DialogButton style={{ minWidth: "30px", maxWidth: "60px", display: "flex", justifyContent: "center", alignItems: "center" }} onClick={() => props.onAction(props.entryData)} onOKButton={() => props.onAction(props.entryData)}>
<DialogButton style={{ height: "40px", minWidth: "40px", width: "40px", display: "flex", justifyContent: "center", alignItems: "center", padding: "10px" }} onClick={() => props.onAction(props.entryData)} onOKButton={() => props.onAction(props.entryData)}>
<FaEllipsisH />
</DialogButton>
</Focusable>