Merge pull request #60490 from nextcloud/backport/60347/stable33

[stable33] fix(workflowengine): use proper contrast colors for operations

Author: sorbaugh

apps/workflowengine/src/components/Operation.spec.ts

@@ -3,7 +3,10 @@
   - SPDX-License-Identifier: AGPL-3.0-or-later
 -->
 <template>
-	<div class="actions__item" :class="{ colored: colored }" :style="{ backgroundColor: colored ? operation.color : 'transparent' }">
+	<div
+		ref="operationElement"
+		class="actions__item"
+		:class="{ colored: colored }">
 		<div class="icon" :class="operation.iconClass" :style="{ backgroundImage: operation.iconClass ? '' : `url(${operation.icon})` }" />
 		<div class="actions__item__description">
 			<h3>{{ operation.name }}</h3>
@@ -18,30 +21,69 @@
 	</div>
 </template>
 
-<script>
+<script setup lang="ts">
+/* eslint vue/multi-word-component-names: "warn" */
+
+import { t } from '@nextcloud/l10n'
+import Color from 'color'
+import { computed, nextTick, ref, watch } from 'vue'
 import NcButton from '@nextcloud/vue/components/NcButton'
 
-export default {
-	/* eslint vue/multi-word-component-names: "warn" */
-	name: 'Operation',
-	components: {
-		NcButton,
-	},
-
-	props: {
-		operation: {
-			type: Object,
-			required: true,
-		},
-
-		colored: {
-			type: Boolean,
-			default: true,
-		},
-	},
-}
+const props = defineProps<{
+	operation: Record<string, string>
+	colored?: boolean
+}>()
+
+const operationElement = ref<HTMLDivElement>()
+const color = ref('var(--color-main-text)')
+const backgroundColor = computed(() => props.colored ? (props.operation.color || 'var(--color-primary-element)') : 'transparent')
+
+watch(backgroundColor, async () => {
+	if (backgroundColor.value === 'transparent') {
+		color.value = 'var(--color-main-text)'
+		return
+	} else if (backgroundColor.value === 'var(--color-primary-element)') {
+		color.value = 'var(--color-primary-element-text)'
+		return
+	}
+
+	let bgColor = backgroundColor.value
+	if (!bgColor.startsWith('#')) {
+		await nextTick()
+		bgColor = window.getComputedStyle(operationElement.value!).backgroundColor
+	}
+	try {
+		const contrast = Color(bgColor).contrast(Color('#ffffff'))
+		color.value = contrast > 4.5 ? '#ffffff' : '#000000'
+	} catch {
+		color.value = 'var(--color-main-text)'
+	}
+}, { immediate: true })
+
+/**
+ * Filter to apply to the icon to make it accessible on the given background color.
+ */
+const iconFilter = computed(() => {
+	if (color.value === '#000000') {
+		return 'invert(100%)'
+	}
+	return 'none'
+})
 </script>
 
 <style scoped lang="scss">
 @use "./../styles/operation.scss" as *;
+
+.actions__item {
+	color: v-bind('color');
+	background-color: v-bind('backgroundColor');
+
+	h3 {
+		color: v-bind('color');
+	}
+
+	.icon {
+		filter: v-bind('iconFilter');
+	}
+}
 </style>

apps/workflowengine/src/components/Operation.vue

@@ -30,7 +30,7 @@
 		</div>
 		<div class="flow-icon icon-confirm" />
 		<div class="action">
-			<Operation :operation="operation" :colored="false">
+			<Operation :operation="operation">
 				<component
 					:is="operation.element"
 					v-if="operation.element"

apps/workflowengine/src/components/Rule.vue

@@ -28,13 +28,14 @@
 					v-for="operation in mainOperations"
 					:key="operation.id"
 					:operation="operation"
+					colored
 					@click.native="createNewRule(operation)" />
 				<a
 					v-if="showAppStoreHint"
 					key="add"
 					:href="appstoreUrl"
 					class="actions__item colored more">
-					<div class="icon icon-add" />
+					<NcIconSvgWrapper class="actions__itemMore__icon" :path="mdiPlus" :size="50" />
 					<div class="actions__item__description">
 						<h3>{{ t('workflowengine', 'More flows') }}</h3>
 						<small>{{ t('workflowengine', 'Browse the App Store') }}</small>
@@ -69,6 +70,7 @@
 </template>
 
 <script>
+import { mdiPlus } from '@mdi/js'
 import { loadState } from '@nextcloud/initial-state'
 import { generateUrl } from '@nextcloud/router'
 import { mapGetters, mapState } from 'vuex'
@@ -100,6 +102,10 @@ export default {
 		Rule,
 	},
 
+	setup() {
+		return { mdiPlus }
+	},
+
 	data() {
 		return {
 			showMoreOperations: false,
@@ -186,6 +192,10 @@ export default {
 		margin-bottom: 10px;
 	}
 
+	.actions__itemMore__icon {
+		margin-block: 10px;
+	}
+
 	.slide-enter-active {
 		-moz-transition-duration: 0.3s;
 		-webkit-transition-duration: 0.3s;

apps/workflowengine/src/components/Workflow.vue

@@ -54,13 +54,6 @@ small {
 	flex-grow: 1;
 }
 
-.colored:not(.more) {
-	background-color: var(--color-primary-element);
-	h3, small {
-		color: var(--color-primary-element-text)
-	}
-}
-
 .actions__item:not(.colored) {
 	flex-direction: row;
 

apps/workflowengine/src/styles/operation.scss

@@ -2,6 +2,7 @@ SPDX-License-Identifier: MIT
 SPDX-License-Identifier: ISC
 SPDX-License-Identifier: GPL-3.0-or-later
 SPDX-License-Identifier: BSD-3-Clause
+SPDX-License-Identifier: Apache-2.0
 SPDX-License-Identifier: AGPL-3.0-or-later
 SPDX-License-Identifier: (MPL-2.0 OR Apache-2.0)
 SPDX-FileCopyrightText: webfansplz
@@ -35,6 +36,7 @@ SPDX-FileCopyrightText: Eduardo San Martin Morote
 SPDX-FileCopyrightText: Dr.-Ing. Mario Heiderich, Cure53 <mario@cure53.de> (https://cure53.de/)
 SPDX-FileCopyrightText: David Clark
 SPDX-FileCopyrightText: Christoph Wurst
+SPDX-FileCopyrightText: Austin Andrews
 SPDX-FileCopyrightText: Anthony Fu <https://github.com/antfu>
 SPDX-FileCopyrightText: Anthony Fu <anthonyfu117@hotmail.com>
 SPDX-FileCopyrightText: @nextcloud/dialogs developers
@@ -50,6 +52,9 @@ This file is generated from multiple sources. Included packages:
 - @floating-ui/utils
 	- version: 0.2.11
 	- license: MIT
+- @mdi/js
+	- version: 7.4.47
+	- license: Apache-2.0
 - @nextcloud/auth
 	- version: 2.6.0
 	- license: GPL-3.0-or-later