From b7380817c6098af8ec24e82a6431945970e50777 Mon Sep 17 00:00:00 2001 From: Conner <65339198+connercsbn@users.noreply.github.com> Date: Wed, 18 May 2022 07:16:18 -0700 Subject: [PATCH] [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 --- public/locales/bg/translation.json | 1 + public/locales/ca/translation.json | 1 + public/locales/cs/translation.json | 1 + public/locales/de/translation.json | 1 + public/locales/el/translation.json | 1 + public/locales/en/translation.json | 1 + public/locales/es/translation.json | 1 + public/locales/et/translation.json | 1 + public/locales/fa/translation.json | 3 ++- public/locales/fi/translation.json | 1 + public/locales/fr/translation.json | 1 + public/locales/gl/translation.json | 1 + public/locales/hr/translation.json | 1 + public/locales/hu/translation.json | 1 + public/locales/id/translation.json | 1 + public/locales/it/translation.json | 1 + public/locales/ja/translation.json | 1 + public/locales/ko/translation.json | 1 + public/locales/ml/translation.json | 1 + public/locales/nl/translation.json | 1 + public/locales/pl/translation.json | 1 + public/locales/pt/translation.json | 1 + public/locales/pt_BR/translation.json | 1 + public/locales/ru/translation.json | 1 + public/locales/sv/translation.json | 1 + public/locales/ta/translation.json | 1 + public/locales/tr/translation.json | 1 + public/locales/uk/translation.json | 1 + public/locales/vi/translation.json | 1 + public/locales/zh_Hans/translation.json | 1 + public/locales/zh_Hant/translation.json | 1 + src/screens/Accessibility/index.tsx | 19 ++++++++++++++++++- .../Library/components/GameCard/index.css | 4 +++- .../Library/components/GameCard/index.tsx | 11 ++++++++--- src/state/ContextProvider.tsx | 4 +++- src/state/GlobalState.tsx | 12 ++++++++++-- src/types.ts | 2 ++ 37 files changed, 76 insertions(+), 9 deletions(-) diff --git a/public/locales/bg/translation.json b/public/locales/bg/translation.json index 61bc140d96..1b22387b28 100644 --- 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 index 1fc82fada7..84cab6e878 100644 --- 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 index f6c7ba1571..1d3f7ecc24 100644 --- 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 index 5e068bb70f..a769841ec2 100644 --- 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 index fdbf548430..696e534030 100644 --- 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 index dba9390c85..b84c9fd314 100644 --- 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 index 8837da3d37..2fa54731e4 100644 --- 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 index 0e7a9e1fee..39f4cb4558 100644 --- 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 index 02f067ac9e..3a023d82e4 100644 --- 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 index 33e14dad93..26a71535a8 100644 --- 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 index cf27a50ef9..4323f04f92 100644 --- 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 index 2172acf4ed..c8eab10133 100644 --- 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 index acc7426b33..9ce3a4a8f3 100644 --- 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 index 8f9d28d04d..8ca66d3f53 100644 --- 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 index 3616c9e2c3..5559173613 100644 --- 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 index 1d287264fe..b1a5ebc384 100644 --- 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 index 209dc078d3..86d8464a0a 100644 --- 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 index f07be9ca36..6b6e4d2811 100644 --- 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 index 081c41e415..a523c7f1da 100644 --- 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 index 7ff54cf17d..03f0ab4ed3 100644 --- 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 index 795cfc41e9..1a02c0b2f7 100644 --- 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 index 10479dc48b..d6e01c7929 100644 --- 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 index 7f8798a991..84b2a0b8f2 100644 --- 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 index 6889c360bd..308cf65ff4 100644 --- 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 index 4fa6577e12..132e4fe02a 100644 --- 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 index b8e920594e..dedfac9ce0 100644 --- 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 index c1cc10ec84..1bfc4ce6c4 100644 --- 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 index c896474018..875c41280c 100644 --- 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 index 80f1ce81cf..96f91ca11b 100644 --- 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 index 9f9a2e2ea1..d3bb5085e2 100644 --- 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 index bd4cb7babc..d42978bf00 100644 --- 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 index d8adfda420..a7b9a92355 100644 --- 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(['Cabin', 'Rubik']) @@ -162,6 +165,20 @@ export default function Accessibility() { + + + ) diff --git a/src/screens/Library/components/GameCard/index.css b/src/screens/Library/components/GameCard/index.css index 226e216345..eec97a2eab 100644 --- 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 index 3275b2418a..859db59da3 100644 --- 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 index fe66d9f687..77cd444347 100644 --- 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 index 1bef2ebb76..6c867b0a94 100644 --- 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 { @@ -134,7 +135,8 @@ export class GlobalState extends PureComponent { 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 { 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 { 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 index 574ac4b1e4..043e0905d3 100644 --- a/src/types.ts +++ b/src/types.ts @@ -105,6 +105,8 @@ export interface ContextType { login: (token: string) => Promise logout: () => void } + allTilesInColor: boolean + setAllTilesInColor: (value: boolean) => void } export type LibraryTopSectionOptions =