Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions public/locales/bg/translation.json
Original file line number Diff line number Diff line change
@@ -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": "Достъпност",
Expand Down
1 change: 1 addition & 0 deletions public/locales/ca/translation.json
Original file line number Diff line number Diff line change
@@ -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",
Expand Down
1 change: 1 addition & 0 deletions public/locales/cs/translation.json
Original file line number Diff line number Diff line change
@@ -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",
Expand Down
1 change: 1 addition & 0 deletions public/locales/de/translation.json
Original file line number Diff line number Diff line change
@@ -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",
Expand Down
1 change: 1 addition & 0 deletions public/locales/el/translation.json
Original file line number Diff line number Diff line change
@@ -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",
Expand Down
1 change: 1 addition & 0 deletions public/locales/en/translation.json
Original file line number Diff line number Diff line change
@@ -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",
Expand Down
1 change: 1 addition & 0 deletions public/locales/es/translation.json
Original file line number Diff line number Diff line change
@@ -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",
Expand Down
1 change: 1 addition & 0 deletions public/locales/et/translation.json
Original file line number Diff line number Diff line change
@@ -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",
Expand Down
3 changes: 2 additions & 1 deletion public/locales/fa/translation.json
Original file line number Diff line number Diff line change
@@ -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",
Expand Down Expand Up @@ -162,7 +163,7 @@
"path": "انتخاب محل نصب"
},
"library": {
"gridView": "نمای شبکه\u200cای",
"gridView": "نمای شبکه ای",
"listView": "نمای لیستی",
"refresh": "تازه کردن",
"sortAscending": "Sort Ascending",
Expand Down
1 change: 1 addition & 0 deletions public/locales/fi/translation.json
Original file line number Diff line number Diff line change
@@ -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",
Expand Down
1 change: 1 addition & 0 deletions public/locales/fr/translation.json
Original file line number Diff line number Diff line change
@@ -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",
Expand Down
1 change: 1 addition & 0 deletions public/locales/gl/translation.json
Original file line number Diff line number Diff line change
@@ -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",
Expand Down
1 change: 1 addition & 0 deletions public/locales/hr/translation.json
Original file line number Diff line number Diff line change
@@ -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",
Expand Down
1 change: 1 addition & 0 deletions public/locales/hu/translation.json
Original file line number Diff line number Diff line change
@@ -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",
Expand Down
1 change: 1 addition & 0 deletions public/locales/id/translation.json
Original file line number Diff line number Diff line change
@@ -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",
Expand Down
1 change: 1 addition & 0 deletions public/locales/it/translation.json
Original file line number Diff line number Diff line change
@@ -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",
Expand Down
1 change: 1 addition & 0 deletions public/locales/ja/translation.json
Original file line number Diff line number Diff line change
@@ -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",
Expand Down
1 change: 1 addition & 0 deletions public/locales/ko/translation.json
Original file line number Diff line number Diff line change
@@ -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",
Expand Down
1 change: 1 addition & 0 deletions public/locales/ml/translation.json
Original file line number Diff line number Diff line change
@@ -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",
Expand Down
1 change: 1 addition & 0 deletions public/locales/nl/translation.json
Original file line number Diff line number Diff line change
@@ -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",
Expand Down
1 change: 1 addition & 0 deletions public/locales/pl/translation.json
Original file line number Diff line number Diff line change
@@ -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",
Expand Down
1 change: 1 addition & 0 deletions public/locales/pt/translation.json
Original file line number Diff line number Diff line change
@@ -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",
Expand Down
1 change: 1 addition & 0 deletions public/locales/pt_BR/translation.json
Original file line number Diff line number Diff line change
@@ -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",
Expand Down
1 change: 1 addition & 0 deletions public/locales/ru/translation.json
Original file line number Diff line number Diff line change
@@ -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": "Доступность",
Expand Down
1 change: 1 addition & 0 deletions public/locales/sv/translation.json
Original file line number Diff line number Diff line change
@@ -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",
Expand Down
1 change: 1 addition & 0 deletions public/locales/ta/translation.json
Original file line number Diff line number Diff line change
@@ -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",
Expand Down
1 change: 1 addition & 0 deletions public/locales/tr/translation.json
Original file line number Diff line number Diff line change
@@ -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",
Expand Down
1 change: 1 addition & 0 deletions public/locales/uk/translation.json
Original file line number Diff line number Diff line change
@@ -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",
Expand Down
1 change: 1 addition & 0 deletions public/locales/vi/translation.json
Original file line number Diff line number Diff line change
@@ -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",
Expand Down
1 change: 1 addition & 0 deletions public/locales/zh_Hans/translation.json
Original file line number Diff line number Diff line change
@@ -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": "辅助",
Expand Down
1 change: 1 addition & 0 deletions public/locales/zh_Hant/translation.json
Original file line number Diff line number Diff line change
@@ -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",
Expand Down
19 changes: 18 additions & 1 deletion src/screens/Accessibility/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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')
Expand All @@ -24,7 +25,9 @@ export default function Accessibility() {
contentFontFamily,
setContentFontFamily,
actionsFontFamily,
setActionsFontFamily
setActionsFontFamily,
allTilesInColor,
setAllTilesInColor
} = useContext(ContextProvider)

const [fonts, setFonts] = useState<string[]>(['Cabin', 'Rubik'])
Expand Down Expand Up @@ -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>
)
Expand Down
4 changes: 3 additions & 1 deletion src/screens/Library/components/GameCard/index.css
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}

Expand Down
11 changes: 8 additions & 3 deletions src/screens/Library/components/GameCard/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,8 @@ const GameCard = ({
handleGameStatus,
platform,
hiddenGames,
favouriteGames
favouriteGames,
allTilesInColor
} = useContext(ContextProvider)

const isWin = platform === 'win32'
Expand Down Expand Up @@ -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'
Expand Down
4 changes: 3 additions & 1 deletion src/state/ContextProvider.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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)
12 changes: 10 additions & 2 deletions src/state/GlobalState.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -76,6 +76,7 @@ interface StateProps {
zoomPercent: number
contentFontFamily: string
actionsFontFamily: string
allTilesInColor: boolean
}

export class GlobalState extends PureComponent<Props> {
Expand Down Expand Up @@ -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) => {
Expand Down Expand Up @@ -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 })
}
Expand Down Expand Up @@ -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}
Expand Down
2 changes: 2 additions & 0 deletions src/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -105,6 +105,8 @@ export interface ContextType {
login: (token: string) => Promise<string>
logout: () => void
}
allTilesInColor: boolean
setAllTilesInColor: (value: boolean) => void
}

export type LibraryTopSectionOptions =
Expand Down