diff options
| author | AAGaming <aa@mail.catvibers.me> | 2022-10-14 23:33:16 -0400 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2022-10-14 23:33:16 -0400 |
| commit | 87a7361dc76949325421d9579e1e1813e84dcc1e (patch) | |
| tree | 463574c28429c4196b44a3ac1c58b52765744b26 /frontend/src/components/PluginView.tsx | |
| parent | acdea6da44fc3640934b10e40f9f73ecf3bb592a (diff) | |
| download | decky-loader-2.2.6-pre1.tar.gz decky-loader-2.2.6-pre1.zip | |
Allow B button to close active plugin and return to menu. (#218)v2.2.6-pre1
Diffstat (limited to 'frontend/src/components/PluginView.tsx')
| -rw-r--r-- | frontend/src/components/PluginView.tsx | 58 |
1 files changed, 34 insertions, 24 deletions
diff --git a/frontend/src/components/PluginView.tsx b/frontend/src/components/PluginView.tsx index 0d0a52cf..2ae0b555 100644 --- a/frontend/src/components/PluginView.tsx +++ b/frontend/src/components/PluginView.tsx @@ -1,5 +1,6 @@ import { ButtonItem, + Focusable, PanelSection, PanelSectionRow, joinClassNames, @@ -10,38 +11,47 @@ import { VFC } from 'react'; import { useDeckyState } from './DeckyState'; import NotificationBadge from './NotificationBadge'; +import { useQuickAccessVisible } from './QuickAccessVisibleState'; +import TitleView from './TitleView'; const PluginView: VFC = () => { - const { plugins, updates, activePlugin, setActivePlugin } = useDeckyState(); + const { plugins, updates, activePlugin, setActivePlugin, closeActivePlugin } = useDeckyState(); + const visible = useQuickAccessVisible(); if (activePlugin) { return ( - <div - className={joinClassNames(staticClasses.TabGroupPanel, scrollClasses.ScrollPanel, scrollClasses.ScrollY)} - style={{ height: '100%' }} - > - {activePlugin.content} - </div> + <Focusable onCancelButton={closeActivePlugin}> + <TitleView /> + <div + className={joinClassNames(staticClasses.TabGroupPanel, scrollClasses.ScrollPanel, scrollClasses.ScrollY)} + style={{ height: '100%' }} + > + {visible && activePlugin.content} + </div> + </Focusable> ); } return ( - <div className={joinClassNames(staticClasses.TabGroupPanel, scrollClasses.ScrollPanel, scrollClasses.ScrollY)}> - <PanelSection> - {plugins - .filter((p) => p.content) - .map(({ name, icon }) => ( - <PanelSectionRow key={name}> - <ButtonItem layout="below" onClick={() => setActivePlugin(name)}> - <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}> - {icon} - <div>{name}</div> - <NotificationBadge show={updates?.has(name)} style={{ top: '-5px', right: '-5px' }} /> - </div> - </ButtonItem> - </PanelSectionRow> - ))} - </PanelSection> - </div> + <> + <TitleView /> + <div className={joinClassNames(staticClasses.TabGroupPanel, scrollClasses.ScrollPanel, scrollClasses.ScrollY)}> + <PanelSection> + {plugins + .filter((p) => p.content) + .map(({ name, icon }) => ( + <PanelSectionRow key={name}> + <ButtonItem layout="below" onClick={() => setActivePlugin(name)}> + <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}> + {icon} + <div>{name}</div> + <NotificationBadge show={updates?.has(name)} style={{ top: '-5px', right: '-5px' }} /> + </div> + </ButtonItem> + </PanelSectionRow> + ))} + </PanelSection> + </div> + </> ); }; |