[UI] Add accessibility option to show all game tiles in color (#1311)

* add accessibility option to show all game tiles in color * rename i18n variable * fix useTranslate line * run yarn i18n * remove \u200c * run yarn i18n * grab translation files from main branch * run yarn i18n * remove \u200c
Heroic-Games-Launcher · May 18, 2022 · b738081 · b738081
1 parent 0d6e7c3
commit b738081
Show file tree

Hide file tree

Showing 37 changed files with 76 additions and 9 deletions.
diff --git a/public/locales/bg/translation.json b/public/locales/bg/translation.json
@@ -1,6 +1,7 @@
 {
     "accessibility": {
         "actions_font_family": "Семейство на шрифта за действията (по подразбиране: „Rubik“)",
+        "all_tiles_in_color": "Show all game tiles in color",
         "content_font_family": "Семейство на шрифта за съдържанието (по подразбиране: „Cabin“)",
         "fonts": "Fonts",
         "title": "Достъпност",

diff --git a/public/locales/ca/translation.json b/public/locales/ca/translation.json
@@ -1,6 +1,7 @@
 {
     "accessibility": {
         "actions_font_family": "Actions Font Family (Default: \"Rubik\")",
+        "all_tiles_in_color": "Show all game tiles in color",
         "content_font_family": "Content Font Family (Default: \"Cabin\")",
         "fonts": "Fonts",
         "title": "Accessibility",

diff --git a/public/locales/cs/translation.json b/public/locales/cs/translation.json
@@ -1,6 +1,7 @@
 {
     "accessibility": {
         "actions_font_family": "Písmo pro Akce (Výchozí: \"Rubik\")",
+        "all_tiles_in_color": "Show all game tiles in color",
         "content_font_family": "Písmo pro Obsah (Výchozí: \"Cabin\")",
         "fonts": "Fonts",
         "title": "Přístupnost",

diff --git a/public/locales/de/translation.json b/public/locales/de/translation.json
@@ -1,6 +1,7 @@
 {
     "accessibility": {
         "actions_font_family": "Actions Font Family (Default: \"Rubik\")",
+        "all_tiles_in_color": "Show all game tiles in color",
         "content_font_family": "Content Font Family (Default: \"Cabin\")",
         "fonts": "Fonts",
         "title": "Accessibility",

diff --git a/public/locales/el/translation.json b/public/locales/el/translation.json
@@ -1,6 +1,7 @@
 {
     "accessibility": {
         "actions_font_family": "Actions Font Family (Default: \"Rubik\")",
+        "all_tiles_in_color": "Show all game tiles in color",
         "content_font_family": "Content Font Family (Default: \"Cabin\")",
         "fonts": "Fonts",
         "title": "Accessibility",

diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json
@@ -1,6 +1,7 @@
 {
     "accessibility": {
         "actions_font_family": "Actions Font Family (Default: \"Rubik\")",
+        "all_tiles_in_color": "Show all game tiles in color",
         "content_font_family": "Content Font Family (Default: \"Cabin\")",
         "fonts": "Fonts",
         "title": "Accessibility",

diff --git a/public/locales/es/translation.json b/public/locales/es/translation.json
@@ -1,6 +1,7 @@
 {
     "accessibility": {
         "actions_font_family": "Actions Font Family (Default: \"Rubik\")",
+        "all_tiles_in_color": "Show all game tiles in color",
         "content_font_family": "Content Font Family (Default: \"Cabin\")",
         "fonts": "Fonts",
         "title": "Accessibility",

diff --git a/public/locales/et/translation.json b/public/locales/et/translation.json
@@ -1,6 +1,7 @@
 {
     "accessibility": {
         "actions_font_family": "Actions Font Family (Default: \"Rubik\")",
+        "all_tiles_in_color": "Show all game tiles in color",
         "content_font_family": "Content Font Family (Default: \"Cabin\")",
         "fonts": "Fonts",
         "title": "Accessibility",

diff --git a/public/locales/fa/translation.json b/public/locales/fa/translation.json
@@ -1,6 +1,7 @@
 {
     "accessibility": {
         "actions_font_family": "Actions Font Family (Default: \"Rubik\")",
+        "all_tiles_in_color": "Show all game tiles in color",
         "content_font_family": "Content Font Family (Default: \"Cabin\")",
         "fonts": "Fonts",
         "title": "Accessibility",
@@ -162,7 +163,7 @@
         "path": "انتخاب محل نصب"
     },
     "library": {
-        "gridView": "نمای شبکه\u200cای",
+        "gridView": "نمای شبکه ای",
         "listView": "نمای لیستی",
         "refresh": "تازه کردن",
         "sortAscending": "Sort Ascending",

diff --git a/public/locales/fi/translation.json b/public/locales/fi/translation.json
@@ -1,6 +1,7 @@
 {
     "accessibility": {
         "actions_font_family": "Actions Font Family (Default: \"Rubik\")",
+        "all_tiles_in_color": "Show all game tiles in color",
         "content_font_family": "Content Font Family (Default: \"Cabin\")",
         "fonts": "Fonts",
         "title": "Accessibility",

diff --git a/public/locales/fr/translation.json b/public/locales/fr/translation.json
@@ -1,6 +1,7 @@
 {
     "accessibility": {
         "actions_font_family": "Actions Font Family (Default: \"Rubik\")",
+        "all_tiles_in_color": "Show all game tiles in color",
         "content_font_family": "Content Font Family (Default: \"Cabin\")",
         "fonts": "Fonts",
         "title": "Accessibility",

diff --git a/public/locales/gl/translation.json b/public/locales/gl/translation.json
@@ -1,6 +1,7 @@
 {
     "accessibility": {
         "actions_font_family": "Actions Font Family (Default: \"Rubik\")",
+        "all_tiles_in_color": "Show all game tiles in color",
         "content_font_family": "Content Font Family (Default: \"Cabin\")",
         "fonts": "Fonts",
         "title": "Accessibility",

diff --git a/public/locales/hr/translation.json b/public/locales/hr/translation.json
@@ -1,6 +1,7 @@
 {
     "accessibility": {
         "actions_font_family": "Actions Font Family (Default: \"Rubik\")",
+        "all_tiles_in_color": "Show all game tiles in color",
         "content_font_family": "Content Font Family (Default: \"Cabin\")",
         "fonts": "Fonts",
         "title": "Accessibility",

diff --git a/public/locales/hu/translation.json b/public/locales/hu/translation.json
@@ -1,6 +1,7 @@
 {
     "accessibility": {
         "actions_font_family": "Actions Font Family (Default: \"Rubik\")",
+        "all_tiles_in_color": "Show all game tiles in color",
         "content_font_family": "Content Font Family (Default: \"Cabin\")",
         "fonts": "Fonts",
         "title": "Accessibility",

diff --git a/public/locales/id/translation.json b/public/locales/id/translation.json
@@ -1,6 +1,7 @@
 {
     "accessibility": {
         "actions_font_family": "Actions Font Family (Default: \"Rubik\")",
+        "all_tiles_in_color": "Show all game tiles in color",
         "content_font_family": "Content Font Family (Default: \"Cabin\")",
         "fonts": "Fonts",
         "title": "Aksesibilitas",

diff --git a/public/locales/it/translation.json b/public/locales/it/translation.json
@@ -1,6 +1,7 @@
 {
     "accessibility": {
         "actions_font_family": "Actions Font Family (Default: \"Rubik\")",
+        "all_tiles_in_color": "Show all game tiles in color",
         "content_font_family": "Content Font Family (Default: \"Cabin\")",
         "fonts": "Fonts",
         "title": "Accessibility",

diff --git a/public/locales/ja/translation.json b/public/locales/ja/translation.json
@@ -1,6 +1,7 @@
 {
     "accessibility": {
         "actions_font_family": "Actions Font Family (Default: \"Rubik\")",
+        "all_tiles_in_color": "Show all game tiles in color",
         "content_font_family": "Content Font Family (Default: \"Cabin\")",
         "fonts": "Fonts",
         "title": "Accessibility",

diff --git a/public/locales/ko/translation.json b/public/locales/ko/translation.json
@@ -1,6 +1,7 @@
 {
     "accessibility": {
         "actions_font_family": "Actions Font Family (Default: \"Rubik\")",
+        "all_tiles_in_color": "Show all game tiles in color",
         "content_font_family": "Content Font Family (Default: \"Cabin\")",
         "fonts": "Fonts",
         "title": "Accessibility",

diff --git a/public/locales/ml/translation.json b/public/locales/ml/translation.json
@@ -1,6 +1,7 @@
 {
     "accessibility": {
         "actions_font_family": "Actions Font Family (Default: \"Rubik\")",
+        "all_tiles_in_color": "Show all game tiles in color",
         "content_font_family": "Content Font Family (Default: \"Cabin\")",
         "fonts": "Fonts",
         "title": "Accessibility",

diff --git a/public/locales/nl/translation.json b/public/locales/nl/translation.json
@@ -1,6 +1,7 @@
 {
     "accessibility": {
         "actions_font_family": "Actions Font Family (Default: \"Rubik\")",
+        "all_tiles_in_color": "Show all game tiles in color",
         "content_font_family": "Content Font Family (Default: \"Cabin\")",
         "fonts": "Fonts",
         "title": "Accessibility",

diff --git a/public/locales/pl/translation.json b/public/locales/pl/translation.json
@@ -1,6 +1,7 @@
 {
     "accessibility": {
         "actions_font_family": "Actions Font Family (Default: \"Rubik\")",
+        "all_tiles_in_color": "Show all game tiles in color",
         "content_font_family": "Content Font Family (Default: \"Cabin\")",
         "fonts": "Fonts",
         "title": "Accessibility",

diff --git a/public/locales/pt/translation.json b/public/locales/pt/translation.json
@@ -1,6 +1,7 @@
 {
     "accessibility": {
         "actions_font_family": "Actions Font Family (Default: \"Rubik\")",
+        "all_tiles_in_color": "Show all game tiles in color",
         "content_font_family": "Content Font Family (Default: \"Cabin\")",
         "fonts": "Fonts",
         "title": "Accessibility",

diff --git a/public/locales/pt_BR/translation.json b/public/locales/pt_BR/translation.json
@@ -1,6 +1,7 @@
 {
     "accessibility": {
         "actions_font_family": "Fonte para ações (Padrão: \"Rubik\")",
+        "all_tiles_in_color": "Show all game tiles in color",
         "content_font_family": "Fonte para conteúdo (Padrão: \"Cabin\")",
         "fonts": "Fonts",
         "title": "Accessibilidade",

diff --git a/public/locales/ru/translation.json b/public/locales/ru/translation.json
@@ -1,6 +1,7 @@
 {
     "accessibility": {
         "actions_font_family": "Семейство шрифтов для действий (По умолчанию: \"Rubik\")",
+        "all_tiles_in_color": "Show all game tiles in color",
         "content_font_family": "Семейство шрифтов для содержания (По умолчанию: \"Cabin\")",
         "fonts": "Fonts",
         "title": "Доступность",

diff --git a/public/locales/sv/translation.json b/public/locales/sv/translation.json
@@ -1,6 +1,7 @@
 {
     "accessibility": {
         "actions_font_family": "Actions Font Family (Default: \"Rubik\")",
+        "all_tiles_in_color": "Show all game tiles in color",
         "content_font_family": "Content Font Family (Default: \"Cabin\")",
         "fonts": "Fonts",
         "title": "Accessibility",

diff --git a/public/locales/ta/translation.json b/public/locales/ta/translation.json
@@ -1,6 +1,7 @@
 {
     "accessibility": {
         "actions_font_family": "Actions Font Family (Default: \"Rubik\")",
+        "all_tiles_in_color": "Show all game tiles in color",
         "content_font_family": "Content Font Family (Default: \"Cabin\")",
         "fonts": "Fonts",
         "title": "Accessibility",

diff --git a/public/locales/tr/translation.json b/public/locales/tr/translation.json
@@ -1,6 +1,7 @@
 {
     "accessibility": {
         "actions_font_family": "Eylemler Yazı Tipi Ailesi (Öntanımlı: \"Rubik\")",
+        "all_tiles_in_color": "Show all game tiles in color",
         "content_font_family": "İçerik Yazı Tipi Ailesi (Öntanımlı: \"Cabin\")",
         "fonts": "Fonts",
         "title": "Erişilebilirlik",

diff --git a/public/locales/uk/translation.json b/public/locales/uk/translation.json
@@ -1,6 +1,7 @@
 {
     "accessibility": {
         "actions_font_family": "Actions Font Family (Default: \"Rubik\")",
+        "all_tiles_in_color": "Show all game tiles in color",
         "content_font_family": "Content Font Family (Default: \"Cabin\")",
         "fonts": "Fonts",
         "title": "Accessibility",

diff --git a/public/locales/vi/translation.json b/public/locales/vi/translation.json
@@ -1,6 +1,7 @@
 {
     "accessibility": {
         "actions_font_family": "Actions Font Family (Default: \"Rubik\")",
+        "all_tiles_in_color": "Show all game tiles in color",
         "content_font_family": "Content Font Family (Default: \"Cabin\")",
         "fonts": "Fonts",
         "title": "Accessibility",

diff --git a/public/locales/zh_Hans/translation.json b/public/locales/zh_Hans/translation.json
@@ -1,6 +1,7 @@
 {
     "accessibility": {
         "actions_font_family": "操作字族 (默认: \"Rubik\")",
+        "all_tiles_in_color": "Show all game tiles in color",
         "content_font_family": "内容字族 (默认: \"Cabin\")",
         "fonts": "Fonts",
         "title": "辅助",

diff --git a/public/locales/zh_Hant/translation.json b/public/locales/zh_Hant/translation.json
@@ -1,6 +1,7 @@
 {
     "accessibility": {
         "actions_font_family": "Actions Font Family (Default: \"Rubik\")",
+        "all_tiles_in_color": "Show all game tiles in color",
         "content_font_family": "Content Font Family (Default: \"Cabin\")",
         "fonts": "Fonts",
         "title": "Accessibility",

diff --git a/src/screens/Accessibility/index.tsx b/src/screens/Accessibility/index.tsx
@@ -10,6 +10,7 @@ import { useTranslation } from 'react-i18next'
 import ContextProvider from 'src/state/ContextProvider'
 import classNames from 'classnames'
 import { ThemeSelector } from 'src/components/UI/ThemeSelector'
+import ToggleSwitch from 'src/components/UI/ToggleSwitch'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faSyncAlt } from '@fortawesome/free-solid-svg-icons'
 const { ipcRenderer } = window.require('electron')
@@ -24,7 +25,9 @@ export default function Accessibility() {
     contentFontFamily,
     setContentFontFamily,
     actionsFontFamily,
-    setActionsFontFamily
+    setActionsFontFamily,
+    allTilesInColor,
+    setAllTilesInColor
   } = useContext(ContextProvider)
 
   const [fonts, setFonts] = useState<string[]>(['Cabin', 'Rubik'])
@@ -162,6 +165,20 @@ export default function Accessibility() {
         </span>
 
         <ThemeSelector />
+        <span className="setting">
+          <label className={classNames('toggleWrapper', { isRTL: isRTL })}>
+            <ToggleSwitch
+              value={allTilesInColor}
+              handleChange={() => {
+                setAllTilesInColor(!allTilesInColor)
+              }}
+              title={t(
+                'accessibility.all_tiles_in_color',
+                'Show all game tiles in color'
+              )}
+            />
+          </label>
+        </span>
       </div>
     </div>
   )

diff --git a/src/screens/Library/components/GameCard/index.css b/src/screens/Library/components/GameCard/index.css
@@ -230,7 +230,9 @@
 }
 
 .gameCard:hover .gameImg:not(.installed),
-.gameCard:hover .gameLogo:not(.installed) {
+.gameCard:hover .gameLogo:not(.installed),
+.gameImg.allTilesInColor,
+.gameLogo.allTilesInColor {
   filter: grayscale(0);
 }
 

diff --git a/src/screens/Library/components/GameCard/index.tsx b/src/screens/Library/components/GameCard/index.tsx
@@ -66,7 +66,8 @@ const GameCard = ({
     handleGameStatus,
     platform,
     hiddenGames,
-    favouriteGames
+    favouriteGames,
+    allTilesInColor
   } = useContext(ContextProvider)
 
   const isWin = platform === 'win32'
@@ -281,8 +282,12 @@ const GameCard = ({
 
   const instClass = isInstalled ? 'installed' : ''
   const hiddenClass = isHiddenGame ? 'hidden' : ''
-  const imgClasses = `gameImg ${isInstalled ? 'installed' : ''}`
-  const logoClasses = `gameLogo ${isInstalled ? 'installed' : ''}`
+  const imgClasses = `gameImg ${isInstalled ? 'installed' : ''} ${
+    allTilesInColor && 'allTilesInColor'
+  }`
+  const logoClasses = `gameLogo ${isInstalled ? 'installed' : ''} ${
+    allTilesInColor && 'allTilesInColor'
+  }`
 
   const wrapperClasses = `${
     grid ? 'gameCard' : 'gameListItem'

diff --git a/src/state/ContextProvider.tsx b/src/state/ContextProvider.tsx
@@ -59,7 +59,9 @@ const initialContext: ContextType = {
   contentFontFamily: "'Cabin', sans-serif",
   setContentFontFamily: () => null,
   actionsFontFamily: "'Rubik', sans-serif",
-  setActionsFontFamily: () => null
+  setActionsFontFamily: () => null,
+  allTilesInColor: false,
+  setAllTilesInColor: () => null
 }
 
 export default React.createContext(initialContext)
diff --git a/src/state/GlobalState.tsx b/src/state/GlobalState.tsx
@@ -76,6 +76,7 @@ interface StateProps {
   zoomPercent: number
   contentFontFamily: string
   actionsFontFamily: string
+  allTilesInColor: boolean
 }
 
 export class GlobalState extends PureComponent<Props> {
@@ -134,7 +135,8 @@ export class GlobalState extends PureComponent<Props> {
     contentFontFamily:
       (configStore.get('contentFontFamily') as string) || "'Cabin', sans-serif",
     actionsFontFamily:
-      (configStore.get('actionsFontFamily') as string) || "'Rubik', sans-serif"
+      (configStore.get('actionsFontFamily') as string) || "'Rubik', sans-serif",
+    allTilesInColor: (configStore.get('allTilesInColor') as boolean) || false
   }
 
   setTheme = (newThemeName: string) => {
@@ -165,6 +167,11 @@ export class GlobalState extends PureComponent<Props> {
     this.setState({ actionsFontFamily: newFontFamily })
   }
 
+  setAllTilesInColor = (value: boolean) => {
+    configStore.set('allTilesInColor', value)
+    this.setState({ allTilesInColor: value })
+  }
+
   setShowHidden = (value: boolean) => {
     this.setState({ showHidden: value })
   }
@@ -595,7 +602,8 @@ export class GlobalState extends PureComponent<Props> {
           setTheme: this.setTheme,
           setZoomPercent: this.setZoomPercent,
           setContentFontFamily: this.setContentFontFamily,
-          setActionsFontFamily: this.setActionsFontFamily
+          setActionsFontFamily: this.setActionsFontFamily,
+          setAllTilesInColor: this.setAllTilesInColor
         }}
       >
         {this.props.children}

diff --git a/src/types.ts b/src/types.ts
@@ -105,6 +105,8 @@ export interface ContextType {
     login: (token: string) => Promise<string>
     logout: () => void
   }
+  allTilesInColor: boolean
+  setAllTilesInColor: (value: boolean) => void
 }
 
 export type LibraryTopSectionOptions =