diff options
author | Joas Schilling <213943+nickvergessen@users.noreply.github.com> | 2022-08-08 23:06:57 +0300 |
---|---|---|
committer | GitHub <noreply@github.com> | 2022-08-08 23:06:57 +0300 |
commit | 79652a7e15aff36744a8c359770d04f52a68601a (patch) | |
tree | b3b80194d7c76f182a01a04de16f23459a9c8660 /apps | |
parent | 00a01a1f5bc680184fec1db5df40770d8e0f7592 (diff) | |
parent | f47f9c6785618c8020c3e8f4ebb53f5b3a1076ae (diff) |
Merge pull request #33480 from nextcloud/bugfix/noid/fix-workflow-engine-a11y
Fix workflow engine a11y and spacing of icons
Diffstat (limited to 'apps')
-rw-r--r-- | apps/theming/css/default.css | 1 | ||||
-rw-r--r-- | apps/theming/lib/Themes/DarkTheme.php | 1 | ||||
-rw-r--r-- | apps/theming/lib/Themes/DefaultTheme.php | 1 | ||||
-rw-r--r-- | apps/workflowengine/src/components/Checks/FileMimeType.vue | 22 | ||||
-rw-r--r-- | apps/workflowengine/src/components/Checks/RequestURL.vue | 8 | ||||
-rw-r--r-- | apps/workflowengine/src/components/Event.vue | 7 | ||||
-rw-r--r-- | apps/workflowengine/src/styles/operation.scss | 4 |
7 files changed, 35 insertions, 9 deletions
diff --git a/apps/theming/css/default.css b/apps/theming/css/default.css index 262af7a3b83..fb541b7aca9 100644 --- a/apps/theming/css/default.css +++ b/apps/theming/css/default.css @@ -58,4 +58,5 @@ --breakpoint-mobile: 1024px; --primary-invert-if-bright: no; --background-invert-if-dark: no; + --background-invert-if-bright: invert(100%); } diff --git a/apps/theming/lib/Themes/DarkTheme.php b/apps/theming/lib/Themes/DarkTheme.php index bcf4bf695d4..dd894635751 100644 --- a/apps/theming/lib/Themes/DarkTheme.php +++ b/apps/theming/lib/Themes/DarkTheme.php @@ -91,6 +91,7 @@ class DarkTheme extends DefaultTheme implements ITheme { '--color-border-dark' => $this->util->lighten($colorMainBackground, 14), '--background-invert-if-dark' => 'invert(100%)', + '--background-invert-if-bright' => 'no', ]); } } diff --git a/apps/theming/lib/Themes/DefaultTheme.php b/apps/theming/lib/Themes/DefaultTheme.php index c822b3052ce..2908d365a4a 100644 --- a/apps/theming/lib/Themes/DefaultTheme.php +++ b/apps/theming/lib/Themes/DefaultTheme.php @@ -188,6 +188,7 @@ class DefaultTheme implements ITheme { // other theme with media queries '--primary-invert-if-bright' => $this->util->invertTextColor($this->primaryColor) ? 'invert(100%)' : 'no', '--background-invert-if-dark' => 'no', + '--background-invert-if-bright' => 'invert(100%)', ]; // Register image variables only if custom-defined diff --git a/apps/workflowengine/src/components/Checks/FileMimeType.vue b/apps/workflowengine/src/components/Checks/FileMimeType.vue index 1b227fb549a..7c4ea4d145e 100644 --- a/apps/workflowengine/src/components/Checks/FileMimeType.vue +++ b/apps/workflowengine/src/components/Checks/FileMimeType.vue @@ -32,12 +32,18 @@ @input="setValue"> <template slot="singleLabel" slot-scope="props"> <span v-if="props.option.icon" class="option__icon" :class="props.option.icon" /> - <img v-else :src="props.option.iconUrl"> + <img v-else + class="option__icon-img" + :src="props.option.iconUrl" + alt=""> <span class="option__title option__title_single">{{ props.option.label }}</span> </template> <template slot="option" slot-scope="props"> <span v-if="props.option.icon" class="option__icon" :class="props.option.icon" /> - <img v-else :src="props.option.iconUrl"> + <img v-else + class="option__icon-img" + :src="props.option.iconUrl" + alt=""> <span class="option__title">{{ props.option.label }}</span> </template> </Multiselect> @@ -137,7 +143,7 @@ export default { }, } </script> -<style scoped> +<style scoped lang="scss"> .multiselect, input[type='text'] { width: 100%; } @@ -148,4 +154,14 @@ export default { overflow: hidden; text-overflow: ellipsis; } + + .option__icon { + display: inline-block; + min-width: 30px; + background-position: left; + } + + .option__icon-img { + margin-right: 14px; + } </style> diff --git a/apps/workflowengine/src/components/Checks/RequestURL.vue b/apps/workflowengine/src/components/Checks/RequestURL.vue index c9b241eddfa..85283a2a14f 100644 --- a/apps/workflowengine/src/components/Checks/RequestURL.vue +++ b/apps/workflowengine/src/components/Checks/RequestURL.vue @@ -136,8 +136,14 @@ export default { }, } </script> -<style scoped> +<style scoped lang="scss"> .multiselect, input[type='text'] { width: 100%; } + + .option__icon { + display: inline-block; + min-width: 30px; + background-position: left; + } </style> diff --git a/apps/workflowengine/src/components/Event.vue b/apps/workflowengine/src/components/Event.vue index 5f4b8dd87b0..6eb3872e8f8 100644 --- a/apps/workflowengine/src/components/Event.vue +++ b/apps/workflowengine/src/components/Event.vue @@ -1,7 +1,7 @@ <template> <div class="event"> <div v-if="operation.isComplex && operation.fixedEntity !== ''" class="isComplex"> - <img class="option__icon" :src="entity.icon"> + <img class="option__icon" :src="entity.icon" alt=""> <span class="option__title option__title_single">{{ operation.triggerHint }}</span> </div> <Multiselect v-else @@ -14,12 +14,12 @@ @input="updateEvent"> <template slot="selection" slot-scope="{ values, isOpen }"> <div v-if="values.length && !isOpen" class="eventlist"> - <img class="option__icon" :src="values[0].entity.icon"> + <img class="option__icon" :src="values[0].entity.icon" alt=""> <span v-for="(value, index) in values" :key="value.id" class="text option__title option__title_single">{{ value.displayName }} <span v-if="index+1 < values.length">, </span></span> </div> </template> <template slot="option" slot-scope="props"> - <img class="option__icon" :src="props.option.entity.icon"> + <img class="option__icon" :src="props.option.entity.icon" alt=""> <span class="option__title">{{ props.option.displayName }}</span> </template> </Multiselect> @@ -131,6 +131,7 @@ export default { .option__icon { width: 16px; height: 16px; + filter: var(--background-invert-if-dark); } .eventlist img, diff --git a/apps/workflowengine/src/styles/operation.scss b/apps/workflowengine/src/styles/operation.scss index d936c64e2de..860258f2851 100644 --- a/apps/workflowengine/src/styles/operation.scss +++ b/apps/workflowengine/src/styles/operation.scss @@ -68,11 +68,11 @@ small { margin: 0; margin-right: 10px; &:not(.icon-invert) { - filter: invert(1); + filter: var(--background-invert-if-bright); } } } .colored .icon-invert { - filter: invert(1); + filter: var(--background-invert-if-bright); } |