generated from it-at-m/oss-repository-en-template
-
Notifications
You must be signed in to change notification settings - Fork 7
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Browse files
Browse the repository at this point in the history
* #716: add set increase contrast logic in app * #716: add custom button for high contrast * #716: increase opacity of submit form button when state hover or focus * #716: increase opacity of submit form button when state hover or focus * #716: MR feedback * #716 update package-lock.json jsons
- Loading branch information
1 parent
fbf5537
commit 73acd17
Showing
17 changed files
with
424 additions
and
311 deletions.
There are no files selected for viewing
5 changes: 0 additions & 5 deletions
5
digiwf-apps/packages/apps/digiwf-forms-example/package-lock.json
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
429 changes: 160 additions & 269 deletions
429
digiwf-apps/packages/apps/digiwf-tasklist/package-lock.json
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
46 changes: 46 additions & 0 deletions
46
digiwf-apps/packages/apps/digiwf-tasklist/src/components/UI/ContrastModeSelection.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,46 @@ | ||
| <script lang="ts"> | ||
| 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(); | ||
| const changeMode = () => { | ||
| const isEnabled = isHighContrastModeEnabled(); | ||
| if (isEnabled) { | ||
| theme.deactivateContrastMode(); | ||
| } else { | ||
| theme.activateContrastMode(); | ||
| } | ||
| setHighContrastModeEnabled(!isEnabled); | ||
| }; | ||
| return { | ||
| onClick: changeMode, | ||
| isHighContrastModeEnabled | ||
| }; | ||
| } | ||
| }); | ||
| </script> | ||
|
|
||
| <template> | ||
| <v-switch | ||
| :aria-label="isHighContrastModeEnabled() ? 'Hohen Kontrast deaktivieren' : 'Hohen Kontrast aktivieren'" | ||
| :value="isHighContrastModeEnabled()" | ||
| label="Hohen Kontrast" | ||
| @click.stop="onClick" | ||
| > | ||
| <template v-slot:label> | ||
| <high-contrast-icon /> Hoher Kontrast | ||
| </template> | ||
| </v-switch> | ||
| </template> | ||
|
|
||
| <style scoped> | ||
| </style> |
24 changes: 24 additions & 0 deletions
24
digiwf-apps/packages/apps/digiwf-tasklist/src/components/UI/icons/HighContrastIcon.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> |
34 changes: 34 additions & 0 deletions
34
digiwf-apps/packages/apps/digiwf-tasklist/src/components/common/DwfButton.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
54 changes: 43 additions & 11 deletions
54
digiwf-apps/packages/apps/digiwf-tasklist/src/plugins/vuetify.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,22 +1,54 @@ | ||
| import '@mdi/font/css/materialdesignicons.css'; | ||
| import Vue 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"; | ||
|
|
||
| Vue.use(Vuetify); | ||
|
|
||
| export const lightTheme: Partial<VuetifyThemeVariant> = { | ||
| primary: '#ff7c02', | ||
| secondary: '#333333', | ||
| accent: '#7BA4D9', | ||
| success: '#69BE28', | ||
| error: '#FF0000', | ||
| }; | ||
|
|
||
| export const highContrastTheme: Partial<VuetifyThemeVariant> = { | ||
| ...lightTheme, | ||
| }; | ||
|
|
||
| // 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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
28 changes: 28 additions & 0 deletions
28
digiwf-apps/packages/apps/digiwf-tasklist/src/store/modules/accessibility.spec.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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(); | ||
| }); | ||
| }); | ||
| }); |
Oops, something went wrong.