#716: add set increase contrast logic in app

digiwf-apps/packages/apps/digiwf-tasklist/components.d.ts

@@ -23,6 +23,7 @@ declare module '@vue/runtime-core' {
     BaseForm: typeof import('./src/components/form/BaseForm.vue')['default']
     BaseLdapInput: typeof import('./src/components/form/BaseLdapInput.vue')['default']
     BaseMarkdownOutput: typeof import('./src/components/form/BaseMarkdownOutput.vue')['default']
+    ContrastModeSelection: typeof import('./src/components/UI/ContrastModeSelection.vue')['default']
     CsvOutput: typeof import('./src/components/form/CsvOutput.vue')['default']
     FileOutput: typeof import('./src/components/form/FileOutput.vue')['default']
     GroupTaskItem: typeof import('./src/components/task/GroupTaskItem.vue')['default']

digiwf-apps/packages/apps/digiwf-tasklist/src/App.vue

@@ -26,9 +26,31 @@
       <v-spacer/>
       {{ username }}
 
-      <v-icon class="white--text">
-        mdi-account-circle
-      </v-icon>
+      <v-menu offset-y>
+        <template v-slot:activator="{ on, attrs }">
+          <v-btn
+            aria-label="Avatar Icon Button"
+            text
+            fab
+            v-bind="attrs"
+            v-on="on"
+          >
+            <v-icon
+              aria-label="Avatar Icon"
+              class="white--text" >
+              mdi-account-circle
+            </v-icon>
+          </v-btn>
+        </template>
+        <v-list>
+          <v-list-item>
+            <v-list-item-title>
+              <contrast-mode-selection/>
+            </v-list-item-title>
+          </v-list-item>
+        </v-list>
+      </v-menu>
+
 
     </v-app-bar>
 
@@ -169,9 +191,10 @@ import {InfoTO, ServiceInstanceTO, UserTO,} from "@muenchen/digiwf-engine-api-in
 import AppMenuList from "./components/UI/appMenu/AppMenuList.vue";
 import {apiGatewayUrl} from "./utils/envVariables";
 import {queryClient} from "./middleware/queryClient";
+import ContrastModeSelection from "./components/UI/ContrastModeSelection.vue";
 
 @Component({
-  components: {AppMenuList}
+  components: {ContrastModeSelection, AppMenuList}
 })
 export default class App extends Vue {
   drawer = true;

digiwf-apps/packages/apps/digiwf-tasklist/src/components/UI/ContrastModeSelection.vue

@@ -0,0 +1,39 @@
+<script lang="ts">
+import {defineComponent} from "vue";
+import {useTheme} from "../../plugins/vuetify";
+import {useAccessibility} from "../../store/modules/accessibility";
+
+export default defineComponent({
+  setup: () => {
+    const theme = useTheme();
+    const {isHighContrastModeEnabled, setHighContrastModeEnabled} = useAccessibility();
+
+    const changeMode = () => {
+      const isEnabled = isHighContrastModeEnabled();
+      if (isEnabled) {
+        theme.deactivateContrastMode();
+      } else {
+        theme.activateContrastMode();
+      }
+      setHighContrastModeEnabled(!isEnabled);
+    };
+
+    return {
+      onClick: changeMode,
+      isHighContrastModeEnabled
+    };
+  }
+});
+</script>
+
+<template>
+  <button
+    :aria-label="isHighContrastModeEnabled() ? 'Hohen Kontrast deaktivieren' : 'Hohen Kontrast aktivieren'"
+    @click.stop="onClick" >
+    {{ isHighContrastModeEnabled() ? "Hohen Kontrast deaktivieren" : "Hohen Kontrast aktivieren" }}
+  </button>
+</template>
+
+<style scoped>
+
+</style>

digiwf-apps/packages/apps/digiwf-tasklist/src/plugins/vuetify.ts

@@ -1,22 +1,72 @@
 import '@mdi/font/css/materialdesignicons.css';
-import Vue from 'vue';
+import Vue, {getCurrentInstance} from 'vue';
 import Vuetify from 'vuetify';
+import {VuetifyThemeVariant} from "vuetify/types/services/theme";
+import store from '../store';
 
 Vue.use(Vuetify);
 
+export const lightTheme: Partial<VuetifyThemeVariant> = {
+  primary: '#ff7c02',
+  secondary: '#333333',
+  accent: '#7BA4D9',
+  success: '#69BE28',
+  error: '#FF0000',
+
+};
+
+export const highContrastTheme: Partial<VuetifyThemeVariant> = {
+  primary: {
+    base: "#000000",
+    lighten5: "#FFF3E0",
+    lighten4: "#FFE0B2",
+    lighten3: "#FFCC80",
+    lighten2: "#FFB74D",
+    lighten1: "#FFA726",
+    darken1: "#FB8C00",
+    darken2: "#F57C00",
+    darken3: "#EF6C00",
+    darken4: "#E65100"
+  },
+  secondary: '#ff0000',
+  accent: '#acff1c',
+  success: '#008dff',
+  error: '#d24eff',
+  anchor: "#ffea4b"
+
+};
+
+// https://medium.com/@jogarcia/vuetify-multiple-themes-c580f41ece65
 const theme = {
   themes: {
-    light: {
-      primary: '#ff7c02',
-      secondary: '#333333',
-      accent: '#7BA4D9',
-      success: '#69BE28',
-      error: '#FF0000',
-    },
+    light: store.getters["accessibility/isHighContrastModeEnabled"] ? highContrastTheme : lightTheme,
   },
   options: {customProperties: true}, // enable css vars
 };
 
-export default new Vuetify({
+const vuetify = new Vuetify({
   theme: theme
 });
+
+export const useVuetify = () => {
+  const instance = getCurrentInstance();
+  if (!instance) {
+    throw new Error("useVuetify should be called in setup().");
+  }
+  return instance.proxy.$vuetify;
+};
+
+export const useTheme = () => {
+  const vuetify = useVuetify();
+  return {
+    currentTheme: vuetify.theme.currentTheme,
+    activateContrastMode: () => {
+      vuetify.theme.themes.light = highContrastTheme as any;
+    },
+    deactivateContrastMode: () => {
+      vuetify.theme.themes.light = lightTheme as any;
+    },
+  };
+};
+
+export default vuetify;

digiwf-apps/packages/apps/digiwf-tasklist/src/store/index.ts

@@ -5,6 +5,7 @@ import user, {UserState} from './modules/user';
 import menu, {MenuState} from "../store/modules/menu";
 import info, {InfoState} from "../store/modules/info";
 import {filters, FilterState} from "./modules/filters";
+import {accessibility} from "./modules/accessibility";
 
 Vue.use(Vuex);
 
@@ -19,14 +20,15 @@ export interface RootState {
 
 const vuexLocal = new VuexPersistence<RootState>({
   storage: window.localStorage,
-  modules: ["filters"]
+  modules: ["filters", "accessibility"]
 });
 export const Vuexstore = new Vuex.Store<RootState>({
   modules: {
     user,
     menu,
     info,
-    filters
+    filters,
+    accessibility
   },
   strict: debug,
   plugins: [vuexLocal.plugin]

digiwf-apps/packages/apps/digiwf-tasklist/src/store/modules/accessibility.spec.ts

@@ -0,0 +1,28 @@
+import {accessibility, AccessibilityState} from "./accessibility";
+
+describe("accessibility", () => {
+  describe("getters:isHighContrastModeEnabled", () => {
+    it("should return current value if high contrast mode is set to false", () => {
+      const state: AccessibilityState = {
+        highContrastModeEnabled: false,
+      };
+      const result = accessibility.getters.isHighContrastModeEnabled(state);
+      expect(result).toBeFalsy();
+
+    });
+    it("should return current value if high contrast mode is set to true", () => {
+      const state: AccessibilityState = {
+        highContrastModeEnabled: true,
+      };
+      const result = accessibility.getters.isHighContrastModeEnabled(state);
+      expect(result).toBeTruthy();
+    });
+    it("should return default value false if no value is set", () => {
+      const state: AccessibilityState = {
+        highContrastModeEnabled: undefined,
+      } as any; // so that we can set value to undefined
+      const result = accessibility.getters.isHighContrastModeEnabled(state);
+      expect(result).toBeFalsy();
+    });
+  });
+});

digiwf-apps/packages/apps/digiwf-tasklist/src/store/modules/accessibility.ts

@@ -0,0 +1,31 @@
+import {useStore} from "../../hooks/store";
+
+export interface AccessibilityState {
+  highContrastModeEnabled: boolean;
+}
+
+const defaultAccessibilityState: AccessibilityState = {
+  highContrastModeEnabled: false,
+};
+
+export const accessibility = {
+  namespaced: true,
+  state:defaultAccessibilityState,
+  getters: {
+    isHighContrastModeEnabled: (state: AccessibilityState): boolean => {
+      return state.highContrastModeEnabled !== undefined
+        ? state.highContrastModeEnabled
+        : state.highContrastModeEnabled;
+    }
+  },
+  mutations: {
+    setHighContrastModeEnabled: (state: AccessibilityState, enabled: boolean) => state.highContrastModeEnabled = enabled,
+  }
+};
+export const useAccessibility = () => {
+  const store = useStore();
+  return {
+    isHighContrastModeEnabled: () => store.getters["accessibility/isHighContrastModeEnabled"],
+    setHighContrastModeEnabled: (enabled: boolean) => store.commit("accessibility/setHighContrastModeEnabled", enabled),
+  };
+};

digiwf-apps/packages/apps/digiwf-tasklist/src/store/modules/filters.ts

@@ -2,7 +2,7 @@ import {usePageId} from "../../middleware/pageId";
 import {useStore} from "../../hooks/store";
 import {ref, Ref, watch} from "vue";
 
-export type FilterState = { general: {[key: string]:  PageFiltersState } }
+export type FilterState = { general: { [key: string]: PageFiltersState } }
 
 export interface PageFiltersState {
   readonly sortDirection: string;