[UX] Accessibility option to always show titles in library without ha…

…ving to hover (#3702) * Add accessibility option to show titles in the library without having to hover. * Fix typescript issue * Update translations
Heroic-Games-Launcher · Apr 25, 2024 · 925a0bd · 925a0bd
1 parent e584791
commit 925a0bd
Show file tree

Hide file tree

Showing 9 changed files with 43 additions and 12 deletions.
diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json
@@ -6,6 +6,7 @@
         "disable_dialog_backdrop_close": "Disable closing dialogs by clicking outside",
         "fonts": "Fonts",
         "title": "Accessibility",
+        "titles_always_visible": "Always show titles in library",
         "zoom": "Zoom"
     },
     "add_game": "Add Game",

diff --git a/src/common/types/electron_store.ts b/src/common/types/electron_store.ts
@@ -34,6 +34,7 @@ export interface StoreStructure {
     contentFontFamily: string
     actionsFontFamily: string
     allTilesInColor: boolean
+    titlesAlwaysVisible: boolean
     disableDialogBackdropClose: boolean
     language: string
     'general-logs': {

diff --git a/src/frontend/screens/Accessibility/index.tsx b/src/frontend/screens/Accessibility/index.tsx
@@ -25,6 +25,8 @@ export default React.memo(function Accessibility() {
     setZoomPercent,
     allTilesInColor,
     setAllTilesInColor,
+    titlesAlwaysVisible,
+    setTitlesAlwaysVisible,
     setPrimaryFontFamily,
     setSecondaryFontFamily,
     disableDialogBackdropClose,
@@ -207,6 +209,22 @@ export default React.memo(function Accessibility() {
           </label>
         </span>
 
+        <span className="setting">
+          <label className={classNames('toggleWrapper', { isRTL: isRTL })}>
+            <ToggleSwitch
+              htmlId="setTitlesAlwaysVisible"
+              value={titlesAlwaysVisible}
+              handleChange={() => {
+                setTitlesAlwaysVisible(!titlesAlwaysVisible)
+              }}
+              title={t(
+                'accessibility.titles_always_visible',
+                'Always show titles in library'
+              )}
+            />
+          </label>
+        </span>
+
         <span className="setting">
           <label className={classNames('toggleWrapper', { isRTL: isRTL })}>
             <ToggleSwitch

diff --git a/src/frontend/screens/Library/components/GameCard/index.css b/src/frontend/screens/Library/components/GameCard/index.css
@@ -106,7 +106,8 @@
   transform: translateY(100%);
 }
 
-.gameCard:hover .gameTitle {
+.gameCard:hover .gameTitle,
+.titlesAlwaysVisible .gameTitle {
   display: block;
   transform: translateY(0);
 }
@@ -301,8 +302,8 @@
 
 .gameCard:hover .gameImg:not(.installed),
 .gameCard:hover .gameLogo:not(.installed),
-.gameImg.allTilesInColor,
-.gameLogo.allTilesInColor {
+.allTilesInColor .gameImg,
+.allTilesInColor .gameLogo {
   filter: grayscale(0);
 }
 

diff --git a/src/frontend/screens/Library/components/GameCard/index.tsx b/src/frontend/screens/Library/components/GameCard/index.tsx
@@ -90,7 +90,6 @@ const GameCard = ({
   const {
     hiddenGames,
     favouriteGames,
-    allTilesInColor,
     showDialogModal,
     setIsSettingsModalOpen,
     activeController
@@ -367,12 +366,8 @@ const GameCard = ({
   const notAvailableClass = notAvailable ? 'notAvailable' : ''
   const gamepadClass = activeController ? 'gamepad' : ''
   const justPlayedClass = justPlayed ? 'justPlayed' : ''
-  const imgClasses = `gameImg ${isInstalled ? 'installed' : ''} ${
-    allTilesInColor ? 'allTilesInColor' : ''
-  }`
-  const logoClasses = `gameLogo ${isInstalled ? 'installed' : ''} ${
-    allTilesInColor && 'allTilesInColor'
-  }`
+  const imgClasses = `gameImg ${isInstalled ? 'installed' : ''}`
+  const logoClasses = `gameLogo ${isInstalled ? 'installed' : ''}`
 
   const wrapperClasses = `${
     grid ? 'gameCard' : 'gameListItem'

diff --git a/src/frontend/screens/Library/components/GamesList/index.tsx b/src/frontend/screens/Library/components/GamesList/index.tsx
@@ -49,7 +49,8 @@ const GamesList = ({
   isRecent = false,
   isFavourite = false
 }: Props): JSX.Element => {
-  const { gameUpdates } = useContext(ContextProvider)
+  const { gameUpdates, allTilesInColor, titlesAlwaysVisible } =
+    useContext(ContextProvider)
   const { t } = useTranslation()
   const listRef = useRef<HTMLDivElement | null>(null)
   const { activeController } = useContext(ContextProvider)
@@ -118,7 +119,9 @@ const GamesList = ({
       className={cx({
         gameList: layout === 'grid',
         gameListLayout: layout === 'list',
-        firstLane: isFirstLane
+        firstLane: isFirstLane,
+        allTilesInColor,
+        titlesAlwaysVisible
       })}
       ref={listRef}
     >

diff --git a/src/frontend/state/ContextProvider.tsx b/src/frontend/state/ContextProvider.tsx
@@ -70,6 +70,8 @@ const initialContext: ContextType = {
   setZoomPercent: () => null,
   allTilesInColor: false,
   setAllTilesInColor: () => null,
+  titlesAlwaysVisible: false,
+  setTitlesAlwaysVisible: () => null,
   sidebarCollapsed: false,
   setSideBarCollapsed: () => null,
   activeController: '',

diff --git a/src/frontend/state/GlobalState.tsx b/src/frontend/state/GlobalState.tsx
@@ -85,6 +85,7 @@ interface StateProps {
   primaryFontFamily: string
   secondaryFontFamily: string
   allTilesInColor: boolean
+  titlesAlwaysVisible: boolean
   sidebarCollapsed: boolean
   activeController: string
   connectivity: { status: ConnectivityStatus; retryIn: number }
@@ -190,6 +191,7 @@ class GlobalState extends PureComponent<Props> {
         '--default-primary-font-family'
       ),
     allTilesInColor: configStore.get('allTilesInColor', false),
+    titlesAlwaysVisible: configStore.get('titlesAlwaysVisible', false),
     activeController: '',
     connectivity: { status: 'offline', retryIn: 0 },
     showInstallModal: {
@@ -267,6 +269,11 @@ class GlobalState extends PureComponent<Props> {
     this.setState({ allTilesInColor: value })
   }
 
+  setTitlesAlwaysVisible = (value: boolean) => {
+    configStore.set('titlesAlwaysVisible', value)
+    this.setState({ titlesAlwaysVisible: value })
+  }
+
   setDisableDialogBackdropClose = (value: boolean) => {
     configStore.set('disableDialogBackdropClose', value)
     this.setState({ disableDialogBackdropClose: value })
@@ -1021,6 +1028,7 @@ class GlobalState extends PureComponent<Props> {
           setTheme: this.setTheme,
           setZoomPercent: this.setZoomPercent,
           setAllTilesInColor: this.setAllTilesInColor,
+          setTitlesAlwaysVisible: this.setTitlesAlwaysVisible,
           setSideBarCollapsed: this.setSideBarCollapsed,
           setPrimaryFontFamily: this.setPrimaryFontFamily,
           setSecondaryFontFamily: this.setSecondaryFontFamily,

diff --git a/src/frontend/types.ts b/src/frontend/types.ts
@@ -85,6 +85,8 @@ export interface ContextType {
   installingEpicGame: boolean
   allTilesInColor: boolean
   setAllTilesInColor: (value: boolean) => void
+  titlesAlwaysVisible: boolean
+  setTitlesAlwaysVisible: (value: boolean) => void
   setSideBarCollapsed: (value: boolean) => void
   sidebarCollapsed: boolean
   activeController: string