mirror of
https://github.com/SteamDeckHomebrew/decky-loader.git
synced 2026-06-17 08:47:49 +00:00
add some classes for nicer scrolling, update lib
This commit is contained in:
@@ -37,7 +37,7 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"decky-frontend-lib": "^1.5.1",
|
"decky-frontend-lib": "^1.6.2",
|
||||||
"react-icons": "^4.4.0"
|
"react-icons": "^4.4.0"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Generated
+4
-4
@@ -9,7 +9,7 @@ specifiers:
|
|||||||
'@types/react': 16.14.0
|
'@types/react': 16.14.0
|
||||||
'@types/react-router': 5.1.18
|
'@types/react-router': 5.1.18
|
||||||
'@types/webpack': ^5.28.0
|
'@types/webpack': ^5.28.0
|
||||||
decky-frontend-lib: ^1.5.1
|
decky-frontend-lib: ^1.6.2
|
||||||
husky: ^8.0.1
|
husky: ^8.0.1
|
||||||
import-sort-style-module: ^6.0.0
|
import-sort-style-module: ^6.0.0
|
||||||
inquirer: ^8.2.4
|
inquirer: ^8.2.4
|
||||||
@@ -23,7 +23,7 @@ specifiers:
|
|||||||
typescript: ^4.7.4
|
typescript: ^4.7.4
|
||||||
|
|
||||||
dependencies:
|
dependencies:
|
||||||
decky-frontend-lib: 1.5.1
|
decky-frontend-lib: 1.6.2
|
||||||
react-icons: 4.4.0_react@16.14.0
|
react-icons: 4.4.0_react@16.14.0
|
||||||
|
|
||||||
devDependencies:
|
devDependencies:
|
||||||
@@ -806,8 +806,8 @@ packages:
|
|||||||
ms: 2.1.2
|
ms: 2.1.2
|
||||||
dev: true
|
dev: true
|
||||||
|
|
||||||
/decky-frontend-lib/1.5.1:
|
/decky-frontend-lib/1.6.2:
|
||||||
resolution: {integrity: sha512-XrcMNxqdXJFyuJYJX4Wmo7DvFVkwBsl8aWU5wfLdPQmcPz3drafyEgqIdO4AxpFuTsHTf1qaHBiYYw349vYpgw==}
|
resolution: {integrity: sha512-O34rHg6BWYP99jxlosAl0hUfo+SmOyjN+TtcyutdIjvPkg/FgHwahTd+SMujTpZemV31c4JX8hdGnN/Z7tjL9g==}
|
||||||
dependencies:
|
dependencies:
|
||||||
minimist: 1.2.6
|
minimist: 1.2.6
|
||||||
dev: false
|
dev: false
|
||||||
|
|||||||
@@ -1,4 +1,11 @@
|
|||||||
import { ButtonItem, PanelSection, PanelSectionRow } from 'decky-frontend-lib';
|
import {
|
||||||
|
ButtonItem,
|
||||||
|
PanelSection,
|
||||||
|
PanelSectionRow,
|
||||||
|
joinClassNames,
|
||||||
|
scrollClasses,
|
||||||
|
staticClasses,
|
||||||
|
} from 'decky-frontend-lib';
|
||||||
import { VFC } from 'react';
|
import { VFC } from 'react';
|
||||||
|
|
||||||
import { useDeckyState } from './DeckyState';
|
import { useDeckyState } from './DeckyState';
|
||||||
@@ -7,24 +14,33 @@ const PluginView: VFC = () => {
|
|||||||
const { plugins, activePlugin, setActivePlugin } = useDeckyState();
|
const { plugins, activePlugin, setActivePlugin } = useDeckyState();
|
||||||
|
|
||||||
if (activePlugin) {
|
if (activePlugin) {
|
||||||
return <div style={{ height: '100%' }}>{activePlugin.content}</div>;
|
return (
|
||||||
|
<div
|
||||||
|
className={joinClassNames(staticClasses.TabGroupPanel, scrollClasses.ScrollPanel, scrollClasses.ScrollY)}
|
||||||
|
style={{ height: '100%' }}
|
||||||
|
>
|
||||||
|
{activePlugin.content}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<PanelSection>
|
<div className={joinClassNames(staticClasses.TabGroupPanel, scrollClasses.ScrollPanel, scrollClasses.ScrollY)}>
|
||||||
{plugins
|
<PanelSection>
|
||||||
.filter((p) => p.content)
|
{plugins
|
||||||
.map(({ name, icon }) => (
|
.filter((p) => p.content)
|
||||||
<PanelSectionRow key={name}>
|
.map(({ name, icon }) => (
|
||||||
<ButtonItem layout="below" onClick={() => setActivePlugin(name)}>
|
<PanelSectionRow key={name}>
|
||||||
<div style={{ display: 'flex', justifyContent: 'space-between' }}>
|
<ButtonItem layout="below" onClick={() => setActivePlugin(name)}>
|
||||||
<div>{icon}</div>
|
<div style={{ display: 'flex', justifyContent: 'space-between' }}>
|
||||||
<div>{name}</div>
|
<div>{icon}</div>
|
||||||
</div>
|
<div>{name}</div>
|
||||||
</ButtonItem>
|
</div>
|
||||||
</PanelSectionRow>
|
</ButtonItem>
|
||||||
))}
|
</PanelSectionRow>
|
||||||
</PanelSection>
|
))}
|
||||||
|
</PanelSection>
|
||||||
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@@ -7,7 +7,6 @@ import { useDeckyState } from './DeckyState';
|
|||||||
const titleStyles: CSSProperties = {
|
const titleStyles: CSSProperties = {
|
||||||
display: 'flex',
|
display: 'flex',
|
||||||
paddingTop: '3px',
|
paddingTop: '3px',
|
||||||
paddingBottom: '14px',
|
|
||||||
paddingRight: '16px',
|
paddingRight: '16px',
|
||||||
boxShadow: 'unset',
|
boxShadow: 'unset',
|
||||||
};
|
};
|
||||||
|
|||||||
Reference in New Issue
Block a user