[UI/UX] Use Tabs on Game Settings #3105

flavioislima · 2023-10-01T19:11:01Z

This replaces the Collapsable elements with a Tabbing approach on the Game Settings.
It also remembers the last used tab for each game so makes our life easier when testing different configs.

Use the following Checklist if you have changed something on the Backend or Frontend:

Tested the feature and it's working on a current and clean install.
Tested the main App features and they are still working on a current and clean install. (Login, Install, Play, Uninstall, Move games, etc.)
Created / Updated Tests (If necessary)
Created / Updated documentation (If necessary)

src/frontend/screens/Settings/components/SettingsModal/index.scss

src/frontend/screens/Settings/sections/GamesSettings/index.tsx

arielj · 2023-10-01T19:23:52Z

Looks like the change to a different place broke the alignment for the text of these buttons

arielj · 2023-10-01T19:25:49Z

Going to the General Settings > Game Defaults crashes with:

I guess it's for the tab remembering thingy?

flavioislima · 2023-10-02T10:12:34Z

Looks like the change to a different place broke the alignment for the text of these buttons

Fixed and Also added a small fading animation to when they are running:

flavioislima · 2023-10-02T10:12:54Z

Going to the General Settings > Game Defaults crashes with:

I guess it's for the tab remembering thingy?

Fixed that as well.

imLinguin · 2023-10-02T14:45:11Z

Let's make Wine tab hidden for native games :D

Same goes for some options in different tabs, like anti cheat runtimes

flavioislima · 2023-10-03T08:58:57Z

Let's make Wine tab hidden for native games :D

Same goes for some options in different tabs, like anti cheat runtimes

Fixed.
Also changed the index to strings because using numbers was causing other issues when the Wine tab was not available.

arielj · 2023-10-04T01:43:04Z

src/frontend/screens/Settings/components/Tools/index.tsx

+  console.log('toolsSettings', {
+    winetricksRunning,
+    winecfgRunning,
+    runExeRunning
+  })


Suggested change

console.log('toolsSettings', {

winetricksRunning,

winecfgRunning,

runExeRunning

})

to delete this

arielj

I left a few comments, but it works good for me and looks way better.

I'll wait for the change setting a fixed top distance and it's all good from me

arielj · 2023-10-04T01:43:17Z

src/frontend/screens/Settings/components/Tools/index.tsx

+  console.log('toolsSettings', {
+    winetricksRunning,
+    winecfgRunning,
+    runExeRunning
+  })


to delete this

src/frontend/screens/Settings/components/Tools/index.tsx

src/frontend/screens/Settings/components/Tools/index.scss

src/frontend/screens/Settings/sections/GamesSettings/index.tsx

flavioislima · 2023-10-04T11:15:15Z

Addressed all comments, I think looks good now.

arielj

Looks good to me 👍

arielj

wait, I found a bug opening settings for a browser app sideloaded

arielj · 2023-10-04T22:49:46Z

(well I guess we have a bigger problem with those apps, we are showing a bunch of settings that makes no sense, maybe the settings button for sideloaded apps should open the edit app modal instead of settings, no setting applies for theme)

arielj · 2023-10-04T22:52:04Z

That same error happens for any native linux game since the wine tab doesn't exist. I imagine it's the same for native Mac games too

arielj · 2023-10-04T22:52:55Z

when that happens, there's no Wine tab, but the wine tab content is displayed

flavioislima · 2023-10-06T10:03:21Z

@arielj ooff, the burden of supporting so many configurations I guess. lol
will check, thanks for testing!

…uncher into ui/settings_tabs

flavioislima · 2023-10-06T12:38:37Z

@arielj removed the settings button for browser games for now until we have proper settings for them (maybe user-agent, open fullscreen by default, etc) in the future.
Improved the logic to get more use cases and tested on macOS, Windows and Linux, native, sideloaded, wine, etc.
Also the Default game settings on each platform
Could not find any other issue so far.

arielj

Looks good to me 👍

I tested only on linux though, but I haven't seen any other issue.

* [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]>

[UI/UX] Use Tabs on Game Settings

0c09bbc

flavioislima requested review from arielj, CommandMC, Etaash-mathamsetty, Nocccer and imLinguin October 1, 2023 19:12

flavioislima added the pr:ready-for-review Feature-complete, ready for the grind! :P label Oct 1, 2023

arielj reviewed Oct 1, 2023

View reviewed changes

src/frontend/screens/Settings/components/SettingsModal/index.scss Show resolved Hide resolved

arielj reviewed Oct 1, 2023

View reviewed changes

src/frontend/screens/Settings/sections/GamesSettings/index.tsx Show resolved Hide resolved

flavioislima added 4 commits October 1, 2023 21:01

fix: deadcode

256a75e

fix: crash on app settings

2703dcb

fix: fields appearing and order by OS

8596ac9

fix: fix and improve Tools Buttons

f05cf9b

chore: make animation more obvious

451d130

fix: tab order bug and native options

de7a616

arielj reviewed Oct 4, 2023

View reviewed changes

flavioislima added 2 commits October 4, 2023 12:07

feat: make modal static and tabs scrollable

cc880c7

chore: pr comments

362da07

flavioislima added 3 commits October 4, 2023 12:38

fix: windows tabs

8110e5f

fix: show more settings on windows

210f485

chore: hide game defaults on windows

a83d778

arielj approved these changes Oct 4, 2023

View reviewed changes

arielj requested changes Oct 4, 2023

View reviewed changes

flavioislima added 5 commits October 6, 2023 11:28

chore: hide settings button for browser games

66ee4e9

fix: fix native and sideload settings

95572da

fix: macOS and sideloaded fixes

974f0a0

Merge branch 'main' of github.com:Heroic-Games-Launcher/HeroicGamesLa…

2bace06

…uncher into ui/settings_tabs

chore: hide language options for sideloaded games

410b746

flavioislima requested a review from arielj October 6, 2023 12:39

arielj approved these changes Oct 7, 2023

View reviewed changes

arielj merged commit 44c02ef into main Oct 13, 2023
13 checks passed

arielj deleted the ui/settings_tabs branch October 13, 2023 17:14

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[UI/UX] Use Tabs on Game Settings #3105

[UI/UX] Use Tabs on Game Settings #3105

flavioislima commented Oct 1, 2023 •

edited

Loading

arielj commented Oct 1, 2023

arielj commented Oct 1, 2023

flavioislima commented Oct 2, 2023

flavioislima commented Oct 2, 2023

imLinguin commented Oct 2, 2023 •

edited

Loading

flavioislima commented Oct 3, 2023

arielj Oct 4, 2023

arielj Oct 4, 2023

arielj left a comment

arielj Oct 4, 2023

flavioislima commented Oct 4, 2023

arielj left a comment

arielj left a comment

arielj commented Oct 4, 2023

arielj commented Oct 4, 2023

arielj commented Oct 4, 2023

flavioislima commented Oct 6, 2023

flavioislima commented Oct 6, 2023

arielj left a comment

[UI/UX] Use Tabs on Game Settings #3105

[UI/UX] Use Tabs on Game Settings #3105

Conversation

flavioislima commented Oct 1, 2023 • edited Loading

arielj commented Oct 1, 2023

arielj commented Oct 1, 2023

flavioislima commented Oct 2, 2023

flavioislima commented Oct 2, 2023

imLinguin commented Oct 2, 2023 • edited Loading

flavioislima commented Oct 3, 2023

arielj Oct 4, 2023

Choose a reason for hiding this comment

arielj Oct 4, 2023

Choose a reason for hiding this comment

arielj left a comment

Choose a reason for hiding this comment

arielj Oct 4, 2023

Choose a reason for hiding this comment

flavioislima commented Oct 4, 2023

arielj left a comment

Choose a reason for hiding this comment

arielj left a comment

Choose a reason for hiding this comment

arielj commented Oct 4, 2023

arielj commented Oct 4, 2023

arielj commented Oct 4, 2023

flavioislima commented Oct 6, 2023

flavioislima commented Oct 6, 2023

arielj left a comment

Choose a reason for hiding this comment

flavioislima commented Oct 1, 2023 •

edited

Loading

imLinguin commented Oct 2, 2023 •

edited

Loading