Skip to content

Commit 06501dc

Browse files
AkazaRennAkazaRenn
committed
More clean ups on the styling
1 parent f1c7dd3 commit 06501dc

6 files changed

Lines changed: 142 additions & 150 deletions

File tree

‎src/components/container.tsx‎

Lines changed: 22 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
1-
import { Field, Focusable } from "@decky/ui";
1+
import { DialogFooter, DialogBodyText } from "@decky/ui";
22
import { PropsWithChildren } from "react";
3+
import Row from "./row";
34

45
interface ContainerProps {
56
title: React.ReactNode;
@@ -10,21 +11,26 @@ interface ContainerProps {
1011
export default function container({ title, description, titleItem, children }: PropsWithChildren<ContainerProps>) {
1112
return (
1213
<>
13-
<Field
14-
label={title}
15-
description={description && (<small>{description}</small>)}
16-
highlightOnFocus={false}>
17-
<Focusable
18-
style={{ display: "flex" }}
19-
children={
20-
<div style={{
21-
display: "flex",
22-
gap: "8px",
23-
alignItems: "center",
24-
}}>
25-
{titleItem}
26-
</div>} />
27-
</Field>
14+
<div style={{
15+
display: "flex",
16+
}}>
17+
<div style={{
18+
flex: 1,
19+
display: "flex",
20+
flexDirection: "column",
21+
paddingBottom: "16px",
22+
}}>
23+
<DialogFooter>
24+
{title}
25+
</DialogFooter>
26+
{description && <DialogBodyText>
27+
{description}
28+
</DialogBodyText>}
29+
</div>
30+
<Row>
31+
{titleItem}
32+
</Row>
33+
</div>
2834
<div style={{
2935
overflowY: "auto",
3036
}}>

‎src/components/filtersView.tsx‎

Lines changed: 117 additions & 124 deletions
Original file line numberDiff line numberDiff line change
@@ -90,134 +90,127 @@ export default function filtersView({ title, description, fullPage = false, getF
9090
fullPage={fullPage}
9191
titleItem={children}
9292
>
93-
<div style={{
94-
overflowY: "scroll",
95-
overflowX: "hidden",
96-
}}>
97-
<ReorderableList
98-
onSave={setFilterEntries}
99-
entries={filterEntries}
100-
interactables={(props: { entry: ReorderableEntry<void> }) =>
101-
<div style={{
102-
height: "28px",
103-
}}>
104-
<Row>
105-
{showAdvancedOptions && (<>
106-
<IconButton
107-
icon={FaCopy}
108-
onOKActionDescription="Copy"
109-
onClick={() => {
110-
Clipboard.copy(String(props.entry.label));
111-
Toaster.toast("Copied to clipboard");
112-
}}
113-
/>
114-
<IconButton
115-
icon={FaPen}
116-
onOKActionDescription="Edit"
117-
onClick={() => textInputPopup("Edit Filter", {
118-
value: String(props.entry.label),
119-
set: (value) => filterEntriesEdit(props.entry.position, value),
120-
}
121-
)}
122-
/>
123-
</>)}
93+
<ReorderableList
94+
onSave={setFilterEntries}
95+
entries={filterEntries}
96+
interactables={(props: { entry: ReorderableEntry<void> }) =>
97+
<div style={{
98+
height: "28px",
99+
}}>
100+
<Row>
101+
{showAdvancedOptions && (<>
124102
<IconButton
125-
icon={MdDelete}
126-
onOKActionDescription="Remove"
127-
onClick={() => filterEntriesRemove(props.entry.position)}
128-
/>
129-
</Row>
130-
</div>
131-
}
132-
/>
133-
<div style={{
134-
display: "flex",
135-
flexDirection: "column",
136-
paddingTop: "8px",
137-
paddingBottom: "20px",
138-
paddingLeft: "8px",
139-
paddingRight: "8px",
140-
gap: "4px",
141-
}}>
142-
<Row>
143-
<FilterPickerButton
144-
text="Add Include Filter"
145-
onConfirm={(path: string) => filterEntriesAppend(`+ ${path}`)}
146-
/>
147-
<FilterPickerButton
148-
text="Add Exclude Filter"
149-
onConfirm={(path: string) => filterEntriesAppend(`- ${path}`)}
150-
/>
151-
</Row>
152-
{showAdvancedOptions && (
153-
<>
154-
<Row>
155-
<DialogButton
156-
onClick={() => {
157-
Clipboard.copy(filterEntriesToArray().join('\n'));
158-
Toaster.toast("Filters copied to clipboard")
159-
}}
160-
>
161-
Copy Whole Filter
162-
</DialogButton>
163-
<DialogButton
164-
onClick={() => {
165-
const text = Clipboard.paste().trim();
166-
if (text) {
167-
filterEntriesAppend(text);
168-
Toaster.toast("Filters pasted from clipboard");
169-
} else {
170-
Toaster.toast("Clipboard is empty");
171-
}
172-
}}
173-
>
174-
Paste Filter (Append)
175-
</DialogButton>
176-
<DialogButton
103+
icon={FaCopy}
104+
onOKActionDescription="Copy"
177105
onClick={() => {
178-
const text = Clipboard.paste().trim();
179-
if (text) {
180-
filterEntriesfromString(text);
181-
Toaster.toast("Filters pasted from clipboard");
182-
} else {
183-
Toaster.toast("Clipboard is empty");
184-
}
106+
Clipboard.copy(String(props.entry.label));
107+
Toaster.toast("Copied to clipboard");
185108
}}
186-
>
187-
Paste Filter (Replace)
188-
</DialogButton>
189-
</Row>
190-
<Row>
191-
<DialogButton
192-
onClick={() => textInputPopup(
193-
"Add Arbitrary String", {
194-
value: "",
195-
set: (value: string) => filterEntriesAppend(`${value}`),
196-
}
109+
/>
110+
<IconButton
111+
icon={FaPen}
112+
onOKActionDescription="Edit"
113+
onClick={() => textInputPopup("Edit Filter", {
114+
value: String(props.entry.label),
115+
set: (value) => filterEntriesEdit(props.entry.position, value),
116+
}
197117
)}
198-
>
199-
Add Arbitrary Line
200-
</DialogButton>
201-
<DialogButton
202-
onClick={() => setFilterEntries([])}
203-
>
204-
Delete All
205-
</DialogButton>
206-
</Row>
207-
</>
208-
)}
209-
<Row>
210-
<DialogButton
211-
onClick={() => setFiltersFunction(filterEntriesToArray())}
212-
ref={saveButtonRef}
213-
style={{ backgroundColor: CSS_STEAM_HIGHLIGHT_COLOR }}
214-
onGamepadFocus={() => saveButtonRef.current && (saveButtonRef.current.style.backgroundColor = "white")}
215-
onGamepadBlur={() => saveButtonRef.current && (saveButtonRef.current.style.backgroundColor = CSS_STEAM_HIGHLIGHT_COLOR)}
216-
>
217-
Save
218-
</DialogButton>
219-
</Row>
220-
</div>
118+
/>
119+
</>)}
120+
<IconButton
121+
icon={MdDelete}
122+
onOKActionDescription="Remove"
123+
onClick={() => filterEntriesRemove(props.entry.position)}
124+
/>
125+
</Row>
126+
</div>
127+
}
128+
/>
129+
<div style={{
130+
display: "flex",
131+
flexDirection: "column",
132+
paddingTop: "8px",
133+
paddingBottom: "20px",
134+
gap: "4px",
135+
}}>
136+
<Row>
137+
<FilterPickerButton
138+
text="Add Include Filter"
139+
onConfirm={(path: string) => filterEntriesAppend(`+ ${path}`)}
140+
/>
141+
<FilterPickerButton
142+
text="Add Exclude Filter"
143+
onConfirm={(path: string) => filterEntriesAppend(`- ${path}`)}
144+
/>
145+
</Row>
146+
{showAdvancedOptions && (
147+
<>
148+
<Row>
149+
<DialogButton
150+
onClick={() => {
151+
Clipboard.copy(filterEntriesToArray().join('\n'));
152+
Toaster.toast("Filters copied to clipboard")
153+
}}
154+
>
155+
Copy Whole Filter
156+
</DialogButton>
157+
<DialogButton
158+
onClick={() => {
159+
const text = Clipboard.paste().trim();
160+
if (text) {
161+
filterEntriesAppend(text);
162+
Toaster.toast("Filters pasted from clipboard");
163+
} else {
164+
Toaster.toast("Clipboard is empty");
165+
}
166+
}}
167+
>
168+
Paste Filter (Append)
169+
</DialogButton>
170+
<DialogButton
171+
onClick={() => {
172+
const text = Clipboard.paste().trim();
173+
if (text) {
174+
filterEntriesfromString(text);
175+
Toaster.toast("Filters pasted from clipboard");
176+
} else {
177+
Toaster.toast("Clipboard is empty");
178+
}
179+
}}
180+
>
181+
Paste Filter (Replace)
182+
</DialogButton>
183+
</Row>
184+
<Row>
185+
<DialogButton
186+
onClick={() => textInputPopup(
187+
"Add Arbitrary String", {
188+
value: "",
189+
set: (value: string) => filterEntriesAppend(`${value}`),
190+
}
191+
)}
192+
>
193+
Add Arbitrary Line
194+
</DialogButton>
195+
<DialogButton
196+
onClick={() => setFilterEntries([])}
197+
>
198+
Delete All
199+
</DialogButton>
200+
</Row>
201+
</>
202+
)}
203+
<Row>
204+
<DialogButton
205+
onClick={() => setFiltersFunction(filterEntriesToArray())}
206+
ref={saveButtonRef}
207+
style={{ backgroundColor: CSS_STEAM_HIGHLIGHT_COLOR }}
208+
onGamepadFocus={() => saveButtonRef.current && (saveButtonRef.current.style.backgroundColor = "white")}
209+
onGamepadBlur={() => saveButtonRef.current && (saveButtonRef.current.style.backgroundColor = CSS_STEAM_HIGHLIGHT_COLOR)}
210+
>
211+
Save
212+
</DialogButton>
213+
</Row>
221214
</div>
222215
</PageView>
223216
)

‎src/components/logsView.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ export default function LogsView({ title, fullPage = true, getLog, children }: P
4848
wordBreak: 'break-word',
4949
fontSize: "smaller",
5050
lineHeight: "1.2em",
51-
maxHeight: "calc(100% - 1px)",
51+
maxHeight: "75vh",
5252
margin: "0",
5353
paddingLeft: "8px",
5454
paddingRight: "8px",

‎src/components/pageView.tsx‎

Lines changed: 1 addition & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import { CSSProperties, PropsWithChildren, ReactNode } from "react";
2-
import { CSS_MAX_VIEWABLE_HEIGHT } from "../helpers/commonDefs";
32
import Container from "./container";
43

54
interface pageViewProps {
@@ -11,24 +10,18 @@ interface pageViewProps {
1110

1211
export default function pageView({ title, description, titleItem, fullPage = true, children }: PropsWithChildren<pageViewProps>) {
1312
const baseStyles: CSSProperties = {
14-
height: "100%",
15-
maxHeight: CSS_MAX_VIEWABLE_HEIGHT,
16-
boxSizing: "border-box",
1713
display: "flex",
1814
flexDirection: "column",
1915
};
2016

2117
const styles: CSSProperties= fullPage
2218
? {
2319
...baseStyles,
24-
margin: "40px 0",
20+
margin: "40px 16px",
2521
}
2622
: {
2723
...baseStyles,
28-
width: "100%",
2924
marginTop: "-24px",
30-
marginLeft: "-24px",
31-
position: "fixed",
3225
};
3326

3427
const HeadingTag = fullPage ? 'h1' : 'h2';

‎src/components/row.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ export default function row({ children }: PropsWithChildren) {
1313
display: "flex",
1414
gap: "4px",
1515
width: "100%",
16+
alignItems: "center",
1617
}}>
1718
{children}
1819
</div>} />

‎src/helpers/commonDefs.ts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,5 +10,4 @@ export const SHARED_FILTER_APP_ID: number = -1;
1010
export const CONTEXT_MENU_GAME_FILTER_KEY: string = `${PLUGIN_NAME_AS_PATH}-filters`;
1111
export const CLIPBOARD_KEY: string = `${PLUGIN_NAME_AS_PATH}-clipboard`;
1212

13-
export const CSS_MAX_VIEWABLE_HEIGHT: string = "calc(100vh - 80px)";
1413
export const CSS_STEAM_HIGHLIGHT_COLOR: string = "#1A9FFE";

0 commit comments

Comments
 (0)