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,