diff --git a/src/localization/en.json b/src/localization/en.json index 1387c677..afab5d5b 100644 --- a/src/localization/en.json +++ b/src/localization/en.json @@ -848,6 +848,7 @@ "show_notification_icon_dot": "Show Tray Notification Dot", "striped_data_table_mode": "Striped Table Mode", "toggle_pointer_on_hover": "Force pointer on hover", + "accessible_status_indicators": "Accessible Status Indicators", "table_density": "Table Density", "table_density_standard": "Standard", "table_density_comfortable": "Comfortable", diff --git a/src/stores/settings/appearance.js b/src/stores/settings/appearance.js index 2deb4957..6abb1724 100644 --- a/src/stores/settings/appearance.js +++ b/src/stores/settings/appearance.js @@ -116,6 +116,7 @@ export const useAppearanceSettingsStore = defineStore( const isDataTableStriped = ref(false); const showPointerOnHover = ref(false); + const accessibleStatusIndicators = ref(false); const showNewDashboardButton = ref(true); const tableLimitsDialog = ref({ visible: false, @@ -176,6 +177,7 @@ export const useAppearanceSettingsStore = defineStore( navIsCollapsedConfig, dataTableStripedConfig, showPointerOnHoverConfig, + accessibleStatusIndicatorsConfig, showNewDashboardButtonConfig, appFontFamilyConfig, customFontFamilyConfig, @@ -246,6 +248,7 @@ export const useAppearanceSettingsStore = defineStore( configRepository.getBool('VRCX_navIsCollapsed', false), configRepository.getBool('VRCX_dataTableStriped', false), configRepository.getBool('VRCX_showPointerOnHover', false), + configRepository.getBool('VRCX_accessibleStatusIndicators', false), configRepository.getBool('VRCX_showNewDashboardButton', true), configRepository.getString( 'VRCX_fontFamily', @@ -362,9 +365,11 @@ export const useAppearanceSettingsStore = defineStore( isNavCollapsed.value = navIsCollapsedConfig; isDataTableStriped.value = dataTableStripedConfig; showPointerOnHover.value = showPointerOnHoverConfig; + accessibleStatusIndicators.value = accessibleStatusIndicatorsConfig; showNewDashboardButton.value = showNewDashboardButtonConfig; applyPointerHoverClass(); + applyAccessibleStatusClass(); await configRepository.remove('VRCX_navWidth'); @@ -936,6 +941,30 @@ export const useAppearanceSettingsStore = defineStore( applyPointerHoverClass(); } + /** + * + */ + function applyAccessibleStatusClass() { + const classList = document.documentElement.classList; + classList.remove('accessible-status-indicators'); + + if (accessibleStatusIndicators.value) { + classList.add('accessible-status-indicators'); + } + } + + /** + * + */ + function toggleAccessibleStatusIndicators() { + accessibleStatusIndicators.value = !accessibleStatusIndicators.value; + configRepository.setBool( + 'VRCX_accessibleStatusIndicators', + accessibleStatusIndicators.value + ); + applyAccessibleStatusClass(); + } + /** * */ @@ -1181,6 +1210,7 @@ export const useAppearanceSettingsStore = defineStore( isNavCollapsed, isDataTableStriped, showPointerOnHover, + accessibleStatusIndicators, showNewDashboardButton, tableLimitsDialog, TABLE_MAX_SIZE_MIN, @@ -1216,6 +1246,7 @@ export const useAppearanceSettingsStore = defineStore( setRandomUserColours, toggleStripedDataTable, togglePointerOnHover, + toggleAccessibleStatusIndicators, setShowNewDashboardButton, setTableDensity, setTrustColor, diff --git a/src/styles/status-icon.css b/src/styles/status-icon.css index 7364fb26..01c7de31 100644 --- a/src/styles/status-icon.css +++ b/src/styles/status-icon.css @@ -23,16 +23,25 @@ .status-icon.joinme::after { background: var(--status-joinme); - mask-image: url(/images/masks/joinme.svg); } .status-icon.askme::after { background: var(--status-askme); - mask-image: url(/images/masks/askme.svg); } .status-icon.busy::after { background: var(--status-busy); +} + +.accessible-status-indicators .status-icon.joinme::after { + mask-image: url(/images/masks/joinme.svg); +} + +.accessible-status-indicators .status-icon.askme::after { + mask-image: url(/images/masks/askme.svg); +} + +.accessible-status-indicators .status-icon.busy::after { mask-image: url(/images/masks/busy.svg); } @@ -96,16 +105,25 @@ i.x-user-status.online { i.x-user-status.joinme { background: var(--status-joinme); - mask-image: url(/images/masks/joinme.svg); } i.x-user-status.askme { background: var(--status-askme); - mask-image: url(/images/masks/askme.svg); } i.x-user-status.busy { background: var(--status-busy); +} + +.accessible-status-indicators i.x-user-status.joinme { + mask-image: url(/images/masks/joinme.svg); +} + +.accessible-status-indicators i.x-user-status.askme { + mask-image: url(/images/masks/askme.svg); +} + +.accessible-status-indicators i.x-user-status.busy { mask-image: url(/images/masks/busy.svg); } diff --git a/src/views/Settings/components/Tabs/InterfaceTab.vue b/src/views/Settings/components/Tabs/InterfaceTab.vue index 58f32593..a39295ee 100644 --- a/src/views/Settings/components/Tabs/InterfaceTab.vue +++ b/src/views/Settings/components/Tabs/InterfaceTab.vue @@ -132,6 +132,10 @@ + + + + @@ -385,6 +389,7 @@ tablePageSizes, isDataTableStriped, showPointerOnHover, + accessibleStatusIndicators, showNewDashboardButton } = storeToRefs(appearanceSettingsStore); @@ -408,6 +413,7 @@ setTablePageSizes, toggleStripedDataTable, togglePointerOnHover, + toggleAccessibleStatusIndicators, setShowNewDashboardButton, setAppFontFamily, setCustomFontFamily,