[UI/UX] Use Tabs on Game Settings (Heroic-Games-Launcher#3105)

* [UI/UX] Use Tabs on Game Settings * fix: deadcode * fix: crash on app settings * fix: fields appearing and order by OS * fix: fix and improve Tools Buttons * chore: make animation more obvious * fix: tab order bug and native options * feat: make modal static and tabs scrollable * chore: pr comments * fix: windows tabs * fix: show more settings on windows * chore: hide game defaults on windows * chore: hide settings button for browser games * fix: fix native and sideload settings * fix: macOS and sideloaded fixes * chore: hide language options for sideloaded games --------- Co-authored-by: Flavio F Lima <[email protected]>
stifflerstiff0 · Oct 14, 2023 · 9079cf4 · 9079cf4
1 parent 616d49f
commit 9079cf4
Show file tree

Hide file tree

Showing 14 changed files with 250 additions and 148 deletions.
diff --git a/src/backend/main.ts b/src/backend/main.ts
@@ -630,7 +630,7 @@ ipcMain.handle('callTool', async (event, { tool, exe, appName, runner }) => {
       await Winetricks.run(runner, appName, event)
       break
     case 'winecfg':
-      runWineCommandOnGame(runner, appName, {
+      await runWineCommandOnGame(runner, appName, {
         gameSettings,
         commandParts: ['winecfg'],
         wait: false
@@ -639,7 +639,7 @@ ipcMain.handle('callTool', async (event, { tool, exe, appName, runner }) => {
     case 'runExe':
       if (exe) {
         const workingDir = path.parse(exe).dir
-        runWineCommandOnGame(runner, appName, {
+        await runWineCommandOnGame(runner, appName, {
           gameSettings,
           commandParts: [exe],
           wait: false,

diff --git a/src/frontend/components/UI/Collapsible/Collapsible.tsx b/src/frontend/components/UI/Collapsible/Collapsible.tsx
diff --git a/src/frontend/components/UI/Sidebar/components/SidebarLinks/index.tsx b/src/frontend/components/UI/Sidebar/components/SidebarLinks/index.tsx
@@ -213,18 +213,23 @@ export default function SidebarLinks() {
             >
               <span>{t('settings.navbar.general')}</span>
             </NavLink>
-            <NavLink
-              role="link"
-              to={`/settings/${runner}/${appName}/games_settings`}
-              state={{ ...state, runner: state?.runner }}
-              className={classNames('Sidebar__item SidebarLinks__subItem', {
-                ['active']: type === 'games_settings'
-              })}
-            >
-              <span>
-                {t('settings.navbar.games_settings_defaults', 'Game Defaults')}
-              </span>
-            </NavLink>
+            {!isWin && (
+              <NavLink
+                role="link"
+                to={`/settings/${runner}/${appName}/games_settings`}
+                state={{ ...state, runner: state?.runner }}
+                className={classNames('Sidebar__item SidebarLinks__subItem', {
+                  ['active']: type === 'games_settings'
+                })}
+              >
+                <span>
+                  {t(
+                    'settings.navbar.games_settings_defaults',
+                    'Game Defaults'
+                  )}
+                </span>
+              </NavLink>
+            )}
             <NavLink
               role="link"
               to={`/settings/${runner}/${appName}/advanced`}

diff --git a/src/frontend/screens/Game/GamePage/index.tsx b/src/frontend/screens/Game/GamePage/index.tsx
@@ -113,6 +113,7 @@ export default React.memo(function GamePage(): JSX.Element | null {
   const isLinux = platform === 'linux'
   const isMac = platform === 'darwin'
   const isSideloaded = runner === 'sideload'
+  const isBrowserGame = gameInfo?.install.platform === 'Browser'
 
   const isInstalling = status === 'installing'
   const isPlaying = status === 'playing'
@@ -338,7 +339,7 @@ export default React.memo(function GamePage(): JSX.Element | null {
                 <div className="gameInfo">
                   <div className="titleWrapper">
                     <h1 className="title">{title}</h1>
-                    <SettingsButton gameInfo={gameInfo} />
+                    {!isBrowserGame && <SettingsButton gameInfo={gameInfo} />}
                     <DotsMenu gameInfo={gameInfo} handleUpdate={handleUpdate} />
                   </div>
                   <div className="infoWrapper">
@@ -391,8 +392,7 @@ export default React.memo(function GamePage(): JSX.Element | null {
                   </NavLink>
 
                   <DotsMenu gameInfo={gameInfo} handleUpdate={handleUpdate} />
-                  <SettingsButton gameInfo={gameInfo} />
-
+                  {!isBrowserGame && <SettingsButton gameInfo={gameInfo} />}
                   <div className="mainInfo">
                     <GamePicture art_square={art_cover} store={runner} />
                     <div className="store-icon">

diff --git a/src/frontend/screens/Library/components/GameCard/index.tsx b/src/frontend/screens/Library/components/GameCard/index.tsx
@@ -117,6 +117,8 @@ const GameCard = ({
 
   const { status, folder, label } = hasStatus(appName, gameInfo, size)
 
+  const isBrowserGame = gameInfo.install.platform === 'Browser'
+
   useEffect(() => {
     setIsLaunching(false)
     const updateGameInfo = async () => {
@@ -311,15 +313,12 @@ const GameCard = ({
       // settings
       label: t('submenu.settings', 'Settings'),
       onclick: () => setIsSettingsModalOpen(true, 'settings', gameInfo),
-      show: isInstalled && !isUninstalling
+      show: isInstalled && !isUninstalling && !isBrowserGame
     },
     {
       label: t('submenu.logs', 'Logs'),
       onclick: () => setIsSettingsModalOpen(true, 'log', gameInfo),
-      show:
-        isInstalled &&
-        !isUninstalling &&
-        gameInfo.install.platform !== 'Browser'
+      show: isInstalled && !isUninstalling && !isBrowserGame
     },
     {
       // hide
@@ -385,6 +384,8 @@ const GameCard = ({
     )
   }
 
+  const showSettingsButton = isInstalled && !isUninstalling && !isBrowserGame
+
   return (
     <div>
       {showUninstallModal && (
@@ -464,7 +465,7 @@ const GameCard = ({
                   <FontAwesomeIcon size={'2x'} icon={faRepeat} />
                 </SvgButton>
               )}
-              {isInstalled && !isUninstalling && (
+              {showSettingsButton && (
                 <>
                   <SvgButton
                     title={`${t('submenu.settings')} (${title})`}

diff --git a/src/frontend/screens/Settings/components/BattlEyeRuntime.tsx b/src/frontend/screens/Settings/components/BattlEyeRuntime.tsx
@@ -1,9 +1,10 @@
-import React, { useState } from 'react'
+import React, { useContext, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { ToggleSwitch } from 'frontend/components/UI'
 import useSetting from 'frontend/hooks/useSetting'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faSyncAlt } from '@fortawesome/free-solid-svg-icons'
+import ContextProvider from 'frontend/state/ContextProvider'
 
 const BattlEyeRuntime = () => {
   const { t } = useTranslation()
@@ -12,6 +13,11 @@ const BattlEyeRuntime = () => {
     'battlEyeRuntime',
     false
   )
+  const { platform } = useContext(ContextProvider)
+
+  if (platform !== 'linux') {
+    return null
+  }
 
   const handleBattlEyeRuntime = async () => {
     if (!battlEyeRuntime) {

diff --git a/src/frontend/screens/Settings/components/EacRuntime.tsx b/src/frontend/screens/Settings/components/EacRuntime.tsx
@@ -11,7 +11,11 @@ const EacRuntime = () => {
   const [installing, setInstalling] = useState(false)
   const [eacRuntime, setEacRuntime] = useSetting('eacRuntime', false)
   const [useGameMode, setUseGameMode] = useSetting('useGameMode', false)
-  const { showDialogModal } = useContext(ContextProvider)
+  const { showDialogModal, platform } = useContext(ContextProvider)
+
+  if (platform !== 'linux') {
+    return null
+  }
 
   const handleEacRuntime = async () => {
     if (!eacRuntime) {

diff --git a/src/frontend/screens/Settings/components/SettingsModal/index.scss b/src/frontend/screens/Settings/components/SettingsModal/index.scss
@@ -2,8 +2,9 @@
   width: 65vw;
   display: flex;
   flex-direction: column;
-  justify-content: space-between;
+  flex: 1 1 60vh;
   max-width: 800px;
+  min-height: 50vh;
 
   .log-box {
     width: 100%;

diff --git a/src/frontend/screens/Settings/components/SettingsModal/index.tsx b/src/frontend/screens/Settings/components/SettingsModal/index.tsx
@@ -51,7 +51,7 @@ function SettingsModal({ gameInfo, type }: Props) {
       </DialogHeader>
       <DialogContent className="settingsDialogContent">
         <SettingsContext.Provider value={contextValues}>
-          {type === 'settings' ? <GamesSettings useDetails /> : <LogSettings />}
+          {type === 'settings' ? <GamesSettings /> : <LogSettings />}
         </SettingsContext.Provider>
       </DialogContent>
     </Dialog>

diff --git a/src/frontend/screens/Settings/components/Tools/index.scss b/src/frontend/screens/Settings/components/Tools/index.scss
@@ -8,6 +8,13 @@
   .button {
     padding-block: var(--space-lg);
     margin: 0 var(--space-3xs);
+    display: flex;
+    align-items: center;
+    border-radius: 8px;
+  }
+
+  .active {
+    animation: fading 1s alternate infinite;
   }
 
   .drag {
@@ -19,8 +26,9 @@
     flex-direction: column;
     text-decoration: none;
     white-space: nowrap;
+    justify-content: center;
 
-    & > span {
+    & span {
       transition: 350ms;
       font-size: var(--text-xs);
       font-style: italic;
@@ -29,3 +37,19 @@
     }
   }
 }
+
+@keyframes fading {
+  0% {
+    opacity: 0.2;
+  }
+
+  50% {
+    opacity: 0.5;
+    background-color: var(--navbar-background);
+    color: var(--text-default);
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
diff --git a/src/frontend/screens/Settings/components/Tools/index.tsx b/src/frontend/screens/Settings/components/Tools/index.tsx
@@ -14,6 +14,7 @@ export default function Tools() {
   const { t } = useTranslation()
   const [winecfgRunning, setWinecfgRunning] = useState(false)
   const [winetricksRunning, setWinetricksRunning] = useState(false)
+  const [runExeRunning, setRunExeRunning] = useState(false)
   const [progress, setProgress] = useState<string[]>([])
   const { appName, runner, isDefault } = useContext(SettingsContext)
   const { platform } = useContext(ContextProvider)
@@ -25,20 +26,26 @@ export default function Tools() {
 
   type Tool = 'winecfg' | 'winetricks' | string
   async function callTools(tool: Tool, exe?: string) {
-    if (tool === 'winetricks') {
-      setWinetricksRunning(true)
+    const toolStates = {
+      winetricks: setWinetricksRunning,
+      winecfg: setWinecfgRunning,
+      runExe: setRunExeRunning
     }
-    if (tool === 'winecfg') {
-      setWinecfgRunning(true)
+
+    if (tool in toolStates) {
+      toolStates[tool](true)
     }
+
     await window.api.callTool({
       tool,
       exe,
       appName,
       runner
     })
-    setWinetricksRunning(false)
-    setWinecfgRunning(false)
+
+    if (tool in toolStates) {
+      toolStates[tool](false)
+    }
   }
 
   useEffect(() => {
@@ -131,11 +138,12 @@ export default function Tools() {
           <a
             onDrop={async (ev) => dropHandler(ev)}
             onDragOver={(ev) => dragOverHandler(ev)}
-            className="button outline drag"
+            className={classNames('button outline drag', {
+              active: runExeRunning
+            })}
             onClick={handleRunExe}
           >
-            {t('setting.runexe.title')}
-            <br />
+            {t('setting.runexe.title')} <br />
             <span>{t('setting.runexe.message')}</span>
           </a>
         </div>

diff --git a/src/frontend/screens/Settings/index.tsx b/src/frontend/screens/Settings/index.tsx
@@ -121,7 +121,7 @@ function Settings() {
             </h1>
 
             {isGeneralSettings && <GeneralSettings />}
-            {isGamesSettings && <GamesSettings useDetails={false} />}
+            {isGamesSettings && <GamesSettings />}
             {isSyncSettings && <SyncSaves />}
             {isAdvancedSetting && <AdvancedSettings />}
             {isLogSettings && <LogSettings />}

diff --git a/src/frontend/screens/Settings/sections/GamesSettings/index.scss b/src/frontend/screens/Settings/sections/GamesSettings/index.scss
@@ -26,6 +26,26 @@
   }
 }
 
+.MuiTabs-root {
+  padding-bottom: var(--space-xs);
+
+  .MuiTabs-scroller {
+    .MuiTabs-indicator {
+      background-color: var(--accent);
+    }
+
+    .MuiTabs-flexContainer {
+      .MuiTab-root {
+        color: var(--text-default);
+      }
+
+      .Mui-selected {
+        color: var(--accent);
+      }
+    }
+  }
+}
+
 // details, should have an hover effect and a pointer cursor and also the summary should be bold and have a background color
 details {
   cursor: pointer;