#716: add custom button for high contrast

it-at-m · Oct 20, 2023 · b24c28a · b24c28a
1 parent 3516f0e
commit b24c28a
Show file tree

Hide file tree

Showing 6 changed files with 54 additions and 41 deletions.
diff --git a/digiwf-apps/packages/apps/digiwf-tasklist/components.d.ts b/digiwf-apps/packages/apps/digiwf-tasklist/components.d.ts
@@ -25,6 +25,7 @@ declare module '@vue/runtime-core' {
     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']
+    DwfButton: typeof import('./src/components/common/DwfButton.vue')['default']
     FileOutput: typeof import('./src/components/form/FileOutput.vue')['default']
     GroupTaskItem: typeof import('./src/components/task/GroupTaskItem.vue')['default']
     ImageOutput: typeof import('./src/components/form/ImageOutput.vue')['default']
@@ -66,6 +67,7 @@ declare module '@vue/runtime-core' {
     VFadeTransition: typeof import('vuetify/lib')['VFadeTransition']
     VFlex: typeof import('vuetify/lib')['VFlex']
     VForm: typeof import('vuetify/lib')['VForm']
+    VHover: typeof import('vuetify/lib')['VHover']
     VIcon: typeof import('vuetify/lib')['VIcon']
     VImg: typeof import('vuetify/lib')['VImg']
     VLayout: typeof import('vuetify/lib')['VLayout']

diff --git a/digiwf-apps/packages/apps/digiwf-tasklist/src/components/common/DwfButton.vue b/digiwf-apps/packages/apps/digiwf-tasklist/src/components/common/DwfButton.vue
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import {useAccessibility} from "../../store/modules/accessibility";
+
+defineProps({
+  // eslint-disable-next-line vue/prop-name-casing
+  "aria-label": {
+    type: String,
+    required: true
+  }
+});
+defineEmits(["click"]);
+
+const isHighContrastModeEnabled = useAccessibility().isHighContrastModeEnabled;
+
+</script>
+
+<template>
+  <v-btn
+    :aria-label="$props['aria-label']"
+    :class="(isHighContrastModeEnabled()) ? 'high-contrast' : ''"
+    text
+    color="primary"
+    large
+    @click="$emit('click')"
+  >
+    <slot></slot>
+  </v-btn>
+</template>
+
+<style scoped>
+.high-contrast:focus, .high-contrast:hover {
+  border: 1px solid;
+}
+</style>
diff --git a/digiwf-apps/packages/apps/digiwf-tasklist/src/components/task/TaskList.vue b/digiwf-apps/packages/apps/digiwf-tasklist/src/components/task/TaskList.vue
@@ -23,11 +23,8 @@
         <sort-by-select/>
       </v-flex>
       <div class="d-flex align-center">
-        <v-btn
+        <dwf-button
           aria-label="Aufgaben aktualisieren"
-          text
-          color="primary"
-          large
           @click="$emit('loadTasks')"
         >
           <div style="min-width: 30px">
@@ -41,7 +38,8 @@
             <v-icon v-else> mdi-refresh</v-icon>
           </div>
           Aktualisieren
-        </v-btn>
+
+        </dwf-button>
       </div>
     </v-flex>
     <v-flex v-if="errorMessage">
@@ -97,9 +95,10 @@ import SearchField from "../common/SearchField.vue";
 import {HumanTask} from "../../middleware/tasks/tasksModels";
 import {PropType} from "vue";
 import SortBySelect from "../common/SortBySelect.vue";
+import DwfButton from "../common/DwfButton.vue";
 
 export default {
-  components: {SortBySelect, SearchField, AppToast},
+  components: {DwfButton, SortBySelect, SearchField, AppToast},
   props: {
     filter: {
       type: String,

diff --git a/digiwf-apps/packages/apps/digiwf-tasklist/src/plugins/vuetify.ts b/digiwf-apps/packages/apps/digiwf-tasklist/src/plugins/vuetify.ts
@@ -1,8 +1,8 @@
-import '@mdi/font/css/materialdesignicons.css';
-import Vue, {getCurrentInstance} from 'vue';
-import Vuetify from 'vuetify';
+import "@mdi/font/css/materialdesignicons.css";
+import Vue, {getCurrentInstance} from "vue";
+import Vuetify from "vuetify";
 import {VuetifyThemeVariant} from "vuetify/types/services/theme";
-import store from '../store';
+import store from "../store";
 
 Vue.use(Vuetify);
 
@@ -12,28 +12,10 @@ export const lightTheme: Partial<VuetifyThemeVariant> = {
   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"
-
+  ...lightTheme,
 };
 
 // https://medium.com/@jogarcia/vuetify-multiple-themes-c580f41ece65

diff --git a/digiwf-apps/packages/apps/digiwf-tasklist/src/views/ProcessDefinitions.vue b/digiwf-apps/packages/apps/digiwf-tasklist/src/views/ProcessDefinitions.vue
@@ -11,12 +11,8 @@
           :on-filter-change="onFilterChanged"
         />
         <div class="d-flex align-center">
-          <v-btn
+          <dwf-button
             aria-label="Vorgänge aktualisieren"
-            text
-            style="padding-left: 13px;"
-            large
-            color="primary"
             @click="refetch"
           >
             <div style="min-width: 30px">
@@ -34,7 +30,7 @@
               </v-icon>
             </div>
             Aktualisieren
-          </v-btn>
+          </dwf-button>
         </div>
       </v-flex>
       <v-flex v-if="errorMessage">
@@ -80,9 +76,11 @@ import {useGetPaginationData} from "../middleware/paginationData";
 import SearchField from "../components/common/SearchField.vue";
 import {useGetProcessDefinitions} from "../middleware/processDefinitions/processDefinitionMiddleware";
 import AppPaginationFooter from "../components/UI/AppPaginationFooter.vue";
+import DwfButton from "../components/common/DwfButton.vue";
 
 export default defineComponent({
   components: {
+    DwfButton,
     AppPaginationFooter,
     SearchField, ProcessDefinitionItem, AppToast, AppViewLayout
   },

diff --git a/digiwf-apps/packages/apps/digiwf-tasklist/src/views/ProcessInstances.vue b/digiwf-apps/packages/apps/digiwf-tasklist/src/views/ProcessInstances.vue
@@ -10,12 +10,8 @@
           :on-filter-change="onFilterChanged"
         />
         <div class="d-flex align-center">
-          <v-btn
+          <dwf-button
             aria-label="Vorgänge aktualisieren"
-            style="padding-left: 13px;"
-            large
-            text
-            color="primary"
             @click="refetch"
           >
             <div style="min-width: 30px">
@@ -33,7 +29,7 @@
               </v-icon>
             </div>
             Aktualisieren
-          </v-btn>
+          </dwf-button>
         </div>
       </v-flex>
       <v-flex v-if="errorMessage">
@@ -98,9 +94,11 @@ import {useGetPaginationData} from "../middleware/paginationData";
 import {useGetProcessInstances} from "../middleware/processInstances/processInstancesMiddleware";
 import AppPaginationFooter from "../components/UI/AppPaginationFooter.vue";
 import SearchField from "../components/common/SearchField.vue";
+import DwfButton from "../components/common/DwfButton.vue";
 
 export default defineComponent({
     components: {
+      DwfButton,
       SearchField,
       AppPaginationFooter, ProcessInstanceItem, AppToast, AppViewLayout
     },