#716: MR feedback

it-at-m · Oct 26, 2023 · a043a85 · a043a85
1 parent a9c033d
commit a043a85
Show file tree

Hide file tree

Showing 5 changed files with 198 additions and 14 deletions.
diff --git a/digiwf-apps/packages/apps/digiwf-tasklist/components.d.ts b/digiwf-apps/packages/apps/digiwf-tasklist/components.d.ts
@@ -28,6 +28,7 @@ declare module '@vue/runtime-core' {
     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']
+    HighContrastIcon: typeof import('./src/components/UI/icons/HighContrastIcon.vue')['default']
     ImageOutput: typeof import('./src/components/form/ImageOutput.vue')['default']
     LoadingFab: typeof import('./src/components/UI/LoadingFab.vue')['default']
     PdfOutput: typeof import('./src/components/form/PdfOutput.vue')['default']
@@ -67,7 +68,6 @@ 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']
@@ -79,7 +79,6 @@ declare module '@vue/runtime-core' {
     VListItemTitle: typeof import('vuetify/lib')['VListItemTitle']
     VMain: typeof import('vuetify/lib')['VMain']
     VMenu: typeof import('vuetify/lib')['VMenu']
-    VMessages: typeof import('vuetify/lib')['VMessages']
     VMultiUserInput: typeof import('./src/components/schema/VMultiUserInput.vue')['default']
     VNavigationDrawer: typeof import('vuetify/lib')['VNavigationDrawer']
     VProgressCircular: typeof import('vuetify/lib')['VProgressCircular']
@@ -91,6 +90,7 @@ declare module '@vue/runtime-core' {
     VStepper: typeof import('vuetify/lib')['VStepper']
     VStepperHeader: typeof import('vuetify/lib')['VStepperHeader']
     VStepperStep: typeof import('vuetify/lib')['VStepperStep']
+    VSwitch: typeof import('vuetify/lib')['VSwitch']
     VTextField: typeof import('vuetify/lib')['VTextField']
     VToolbarTitle: typeof import('vuetify/lib')['VToolbarTitle']
     VTooltip: typeof import('vuetify/lib')['VTooltip']

diff --git a/digiwf-apps/packages/apps/digiwf-tasklist/package-lock.json b/digiwf-apps/packages/apps/digiwf-tasklist/package-lock.json
diff --git a/digiwf-apps/packages/apps/digiwf-tasklist/package.json b/digiwf-apps/packages/apps/digiwf-tasklist/package.json
@@ -8,6 +8,8 @@
     "test": "jest src --coverage"
   },
   "dependencies": {
+    "@jamescoyle/vue-icon": "^0.1.2",
+    "@mdi/js": "^7.3.67",
     "@muenchen/digiwf-date-input": "^1.1.0",
     "@muenchen/digiwf-engine-api-internal": "^1.1.0",
     "@muenchen/digiwf-form-renderer": "^1.1.0",

diff --git a/digiwf-apps/packages/apps/digiwf-tasklist/src/components/UI/ContrastModeSelection.vue b/digiwf-apps/packages/apps/digiwf-tasklist/src/components/UI/ContrastModeSelection.vue
@@ -2,8 +2,10 @@
 import {defineComponent} from "vue";
 import {useTheme} from "../../plugins/vuetify";
 import {useAccessibility} from "../../store/modules/accessibility";
+import HighContrastIcon from "./icons/HighContrastIcon.vue";
 
 export default defineComponent({
+  components: {HighContrastIcon},
   setup: () => {
     const theme = useTheme();
     const {isHighContrastModeEnabled, setHighContrastModeEnabled} = useAccessibility();
@@ -27,11 +29,16 @@ export default defineComponent({
 </script>
 
 <template>
-  <button
+  <v-switch
     :aria-label="isHighContrastModeEnabled() ? 'Hohen Kontrast deaktivieren' : 'Hohen Kontrast aktivieren'"
-    @click.stop="onClick" >
-    {{ isHighContrastModeEnabled() ? "Hohen Kontrast deaktivieren" : "Hohen Kontrast aktivieren" }}
-  </button>
+    :value="isHighContrastModeEnabled()"
+    label="Hohen Kontrast"
+    @click.stop="onClick"
+  >
+    <template v-slot:label>
+      <high-contrast-icon /> Hoher Kontrast
+    </template>
+  </v-switch>
 </template>
 
 <style scoped>

diff --git a/digiwf-apps/packages/apps/digiwf-tasklist/src/components/UI/icons/HighContrastIcon.vue b/digiwf-apps/packages/apps/digiwf-tasklist/src/components/UI/icons/HighContrastIcon.vue
@@ -0,0 +1,24 @@
+<template>
+  <svg-icon
+    type="mdi"
+    :path="path"/>
+</template>
+
+
+<script>
+import SvgIcon from "@jamescoyle/vue-icon";
+import {mdiContrastBox } from "@mdi/js";
+
+export default {
+  name: "HighContrastIcon",
+  components: {
+    SvgIcon
+  },
+
+  data() {
+    return {
+      path: mdiContrastBox ,
+    };
+  }
+};
+</script>