From 43b2269ea710c02278f784f28521a99dc9d3915b Mon Sep 17 00:00:00 2001 From: EMERALD Date: Wed, 1 Feb 2023 19:16:42 -0600 Subject: Fix UI inconsistencies, various improvements (#357) * Make version gray in plugin list * Settings/store icons together & plugin list fix * Navigation name/icon improvements * Decky settings overhaul and other fixes - Revert the tab icon to a plug - Rename DeckyFlat function to DeckyIcon - Add DialogBody to settings pages to improve scrolling - Add remote debugging settings to the developer settings - Fix React devtools interactions to work more easily - Add spacing to React devtools description - Specify Decky vs. plugin store - Compact version information by update button - Add current version to bottom of settings - Remove unnecessary settings icons - Change CEF debugger icon to Chrome (bug icon too generic, is Chromium) - Make buttons/dropdowns in settings have fixed width - Make download icon act/appear similar to Valve's for Deck * Final UI adjustments * Switch plugin settings icon to plug --- frontend/src/components/DeckyIcon.tsx | 37 ++++++++ frontend/src/components/TitleView.tsx | 13 +-- frontend/src/components/settings/index.tsx | 18 ++-- .../components/settings/pages/developer/index.tsx | 80 +++++++----------- .../settings/pages/general/BranchSelect.tsx | 2 +- .../settings/pages/general/RemoteDebugging.tsx | 6 +- .../settings/pages/general/StoreSelect.tsx | 2 +- .../components/settings/pages/general/Updater.tsx | 22 ++--- .../components/settings/pages/general/index.tsx | 77 ++++++++++------- .../settings/pages/plugin_list/index.tsx | 98 ++++++++++++---------- 10 files changed, 204 insertions(+), 151 deletions(-) create mode 100644 frontend/src/components/DeckyIcon.tsx diff --git a/frontend/src/components/DeckyIcon.tsx b/frontend/src/components/DeckyIcon.tsx new file mode 100644 index 00000000..515bd847 --- /dev/null +++ b/frontend/src/components/DeckyIcon.tsx @@ -0,0 +1,37 @@ +export default function DeckyIcon() { + return ( + + + + + + + + + + ); +} diff --git a/frontend/src/components/TitleView.tsx b/frontend/src/components/TitleView.tsx index cd1f9eba..7e529d21 100644 --- a/frontend/src/components/TitleView.tsx +++ b/frontend/src/components/TitleView.tsx @@ -1,6 +1,7 @@ import { DialogButton, Focusable, Router, staticClasses } from 'decky-frontend-lib'; import { CSSProperties, VFC } from 'react'; -import { FaArrowLeft, FaCog, FaStore } from 'react-icons/fa'; +import { BsGearFill } from 'react-icons/bs'; +import { FaArrowLeft, FaStore } from 'react-icons/fa'; import { useDeckyState } from './DeckyState'; @@ -26,18 +27,18 @@ const TitleView: VFC = () => { if (activePlugin === null) { return ( +
Decky
- + -
Decky
- + ); diff --git a/frontend/src/components/settings/index.tsx b/frontend/src/components/settings/index.tsx index 01f7d407..6f104710 100644 --- a/frontend/src/components/settings/index.tsx +++ b/frontend/src/components/settings/index.tsx @@ -1,7 +1,9 @@ import { SidebarNavigation } from 'decky-frontend-lib'; import { lazy } from 'react'; +import { FaCode, FaPlug } from 'react-icons/fa'; import { useSetting } from '../../utils/hooks/useSetting'; +import DeckyIcon from '../DeckyIcon'; import WithSuspense from '../WithSuspense'; import GeneralSettings from './pages/general'; import PluginList from './pages/plugin_list'; @@ -13,19 +15,18 @@ export default function SettingsPage() { const pages = [ { - title: 'General', + title: 'Decky', content: , route: '/decky/settings/general', + icon: , }, { title: 'Plugins', content: , route: '/decky/settings/plugins', + icon: , }, - ]; - - if (isDeveloper) - pages.push({ + { title: 'Developer', content: ( @@ -33,7 +34,10 @@ export default function SettingsPage() { ), route: '/decky/settings/developer', - }); + icon: , + visible: isDeveloper, + }, + ]; - return ; + return ; } diff --git a/frontend/src/components/settings/pages/developer/index.tsx b/frontend/src/components/settings/pages/developer/index.tsx index 447c9606..d9859c46 100644 --- a/frontend/src/components/settings/pages/developer/index.tsx +++ b/frontend/src/components/settings/pages/developer/index.tsx @@ -1,9 +1,10 @@ -import { Field, Focusable, TextField, Toggle } from 'decky-frontend-lib'; +import { DialogBody, Field, TextField, Toggle } from 'decky-frontend-lib'; import { useRef } from 'react'; import { FaReact, FaSteamSymbol } from 'react-icons/fa'; import { setShouldConnectToReactDevTools, setShowValveInternal } from '../../../../developer'; import { useSetting } from '../../../../utils/hooks/useSetting'; +import RemoteDebuggingSettings from '../general/RemoteDebugging'; export default function DeveloperSettings() { const [enableValveInternal, setEnableValveInternal] = useSetting('developer.valve_internal', false); @@ -12,7 +13,8 @@ export default function DeveloperSettings() { const textRef = useRef(null); return ( - <> + + - {' '} - { - (textRef.current?.childNodes[0] as HTMLInputElement)?.focus(); - } - : undefined - } - onClick={ - reactDevtoolsIP == '' - ? () => { - (textRef.current?.childNodes[0] as HTMLInputElement)?.focus(); - } - : undefined - } - onOKButton={ - reactDevtoolsIP == '' - ? () => { - (textRef.current?.childNodes[0] as HTMLInputElement)?.focus(); - } - : undefined + + + + Enables connection to a computer running React DevTools. Changing this setting will reload Steam. Set the + IP address before enabling. + +
+
+
+ setReactDevtoolsIP(e?.target.value)} /> +
+ } + icon={} > - - - Enables connection to a computer running React DevTools. Changing this setting will reload Steam. Set - the IP address before enabling. - -
- setReactDevtoolsIP(e?.target.value)} /> -
- - } - icon={} - > - { - setReactDevtoolsEnabled(toggleValue); - setShouldConnectToReactDevTools(toggleValue); - }} - /> - - - + { + setReactDevtoolsEnabled(toggleValue); + setShouldConnectToReactDevTools(toggleValue); + }} + /> + + ); } diff --git a/frontend/src/components/settings/pages/general/BranchSelect.tsx b/frontend/src/components/settings/pages/general/BranchSelect.tsx index 27db6229..5387b655 100644 --- a/frontend/src/components/settings/pages/general/BranchSelect.tsx +++ b/frontend/src/components/settings/pages/general/BranchSelect.tsx @@ -19,7 +19,7 @@ const BranchSelect: FunctionComponent<{}> = () => { return ( // Returns numerical values from 0 to 2 (with current branch setup as of 8/28/22) // 0 being stable, 1 being pre-release and 2 being nightly - + typeof branch == 'string') diff --git a/frontend/src/components/settings/pages/general/RemoteDebugging.tsx b/frontend/src/components/settings/pages/general/RemoteDebugging.tsx index 36badf45..db604c69 100644 --- a/frontend/src/components/settings/pages/general/RemoteDebugging.tsx +++ b/frontend/src/components/settings/pages/general/RemoteDebugging.tsx @@ -1,5 +1,5 @@ import { Field, Toggle } from 'decky-frontend-lib'; -import { FaBug } from 'react-icons/fa'; +import { FaChrome } from 'react-icons/fa'; import { useSetting } from '../../../../utils/hooks/useSetting'; @@ -11,10 +11,10 @@ export default function RemoteDebuggingSettings() { label="Allow Remote CEF Debugging" description={ - Allow unauthenticated access to the CEF debugger to anyone in your network + Allows unauthenticated access to the CEF debugger to anyone in your network. } - icon={} + icon={} > = () => { // 0 being Default, 1 being Testing and 2 being Custom return ( <> - + typeof store == 'string') diff --git a/frontend/src/components/settings/pages/general/Updater.tsx b/frontend/src/components/settings/pages/general/Updater.tsx index f617e0ff..b38b6d01 100644 --- a/frontend/src/components/settings/pages/general/Updater.tsx +++ b/frontend/src/components/settings/pages/general/Updater.tsx @@ -11,7 +11,7 @@ import { import { useCallback } from 'react'; import { Suspense, lazy } from 'react'; import { useEffect, useState } from 'react'; -import { FaArrowDown } from 'react-icons/fa'; +import { FaExclamation } from 'react-icons/fa'; import { VerInfo, callUpdaterMethod, finishUpdate } from '../../../../updater'; import { findSP } from '../../../../utils/windows'; @@ -95,21 +95,21 @@ export default function UpdaterSettings() { {`Current version: ${versionInfo.current}\n${ - versionInfo.updatable ? `Latest version: ${versionInfo.remote?.tag_name}` : '' - }`} + checkingForUpdates || versionInfo?.remote?.tag_name != versionInfo?.current || !versionInfo?.remote ? ( + '' + ) : ( + Up to date: running {versionInfo?.current} ) } icon={ - !versionInfo ? ( - - ) : ( - + versionInfo?.remote && + versionInfo?.remote?.tag_name != versionInfo?.current && ( + ) } + childrenContainerWidth={'fixed'} > {updateProgress == -1 && !isLoaderUpdating ? ( )} - {versionInfo?.remote && ( + {versionInfo?.remote && versionInfo?.remote?.tag_name != versionInfo?.current && ( void; }) { const [pluginURL, setPluginURL] = useState(''); + const { versionInfo } = useDeckyState(); return ( -
- - - - - Enables Decky's developer settings.} - icon={} - > - { - setIsDeveloper(toggleValue); - }} - /> - - setPluginURL(e?.target.value)} />} - icon={} - > - installFromURL(pluginURL)}> - Install - - -
+ + + Updates + + + + Beta Participation + + + + + Other + + { + setIsDeveloper(toggleValue); + }} + /> + + setPluginURL(e?.target.value)} />} + > + installFromURL(pluginURL)}> + Install + + + + + About + +
{versionInfo?.current}
+ + + ); } diff --git a/frontend/src/components/settings/pages/plugin_list/index.tsx b/frontend/src/components/settings/pages/plugin_list/index.tsx index 4eb89615..48894031 100644 --- a/frontend/src/components/settings/pages/plugin_list/index.tsx +++ b/frontend/src/components/settings/pages/plugin_list/index.tsx @@ -1,4 +1,12 @@ -import { DialogButton, Focusable, Menu, MenuItem, showContextMenu } from 'decky-frontend-lib'; +import { + DialogBody, + DialogButton, + DialogControlsSection, + Focusable, + Menu, + MenuItem, + showContextMenu, +} from 'decky-frontend-lib'; import { useEffect } from 'react'; import { FaDownload, FaEllipsisH } from 'react-icons/fa'; @@ -21,46 +29,52 @@ export default function PluginList() { } return ( -
    - {plugins.map(({ name, version }) => { - const update = updates?.get(name); - return ( -
  • - - {name} {version} - - - {update && ( - requestPluginInstall(name, update)} - > -
    - Update to {update.name} - -
    -     - )} - - showContextMenu( - - window.DeckyPluginLoader.importPlugin(name, version)}> - Reload - - window.DeckyPluginLoader.uninstallPlugin(name)}>Uninstall - , - e.currentTarget ?? window, - ) - } - > - - -     -
    • - ); - })} -
+ + +
    + {plugins.map(({ name, version }) => { + const update = updates?.get(name); + return ( +
  • + + {name} {'(' + version + ')'} + + + {update && ( + requestPluginInstall(name, update)} + > +
    + Update to {update.name} + +
    +     + )} + + showContextMenu( + + window.DeckyPluginLoader.importPlugin(name, version)}> + Reload + + window.DeckyPluginLoader.uninstallPlugin(name)}> + Uninstall + + , + e.currentTarget ?? window, + ) + } + > + + +     +
    • + ); + })} +
+ + ); } -- cgit v1.2.3