fix(systemtags): fix elementColor computation

Signed-off-by: skjnldsv <skjnldsv@protonmail.com>

3 files changed, 13 insertions, 10 deletions

diff --git a/apps/systemtags/src/components/SystemTagPicker.vue b/apps/systemtags/src/components/SystemTagPicker.vue
index ada4e31643d..652ea262409 100644
--- a/apps/systemtags/src/components/SystemTagPicker.vue
+++ b/apps/systemtags/src/components/SystemTagPicker.vue
@@ -5,6 +5,7 @@
 
 <template>
 	<NcDialog data-cy-systemtags-picker
+		:can-close="status !== Status.LOADING"
 		:name="t('systemtags', 'Manage tags')"
 		:open="opened"
 		:class="'systemtags-picker--' + status"
@@ -125,9 +126,10 @@ import type { Tag, TagWithId } from '../types'
 
 import { defineComponent } from 'vue'
 import { emit } from '@nextcloud/event-bus'
+import { getLanguage, n, t } from '@nextcloud/l10n'
 import { sanitize } from 'dompurify'
 import { showError, showInfo } from '@nextcloud/dialogs'
-import { getLanguage, n, t } from '@nextcloud/l10n'
+import debounce from 'debounce'
 import escapeHTML from 'escape-html'
 
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
@@ -151,6 +153,7 @@ import { getNodeSystemTags, setNodeSystemTags } from '../utils'
 import { elementColor, invertTextColor, isDarkModeEnabled } from '../utils/colorUtils'
 import logger from '../services/logger'
 
+const debounceUpdateTag = debounce(updateTag, 500)
 const mainBackgroundColor = getComputedStyle(document.body)
 	.getPropertyValue('--color-main-background')
 	.replace('#', '') || (isDarkModeEnabled() ? '000000' : 'ffffff')
@@ -389,9 +392,9 @@ export default defineComponent({
 			return tag.displayName
 		},
 
-		onColorChange(tag: TagWithId, color: string) {
+		onColorChange(tag: TagWithId, color: `#${string}`) {
 			tag.color = color.replace('#', '')
-			updateTag(tag)
+			debounceUpdateTag(tag)
 		},
 
 		isChecked(tag: TagWithId): boolean {
diff --git a/apps/systemtags/src/files_actions/inlineSystemTagsAction.spec.ts b/apps/systemtags/src/files_actions/inlineSystemTagsAction.spec.ts
index 354837b91f6..e4df7f40e42 100644
--- a/apps/systemtags/src/files_actions/inlineSystemTagsAction.spec.ts
+++ b/apps/systemtags/src/files_actions/inlineSystemTagsAction.spec.ts
@@ -95,7 +95,7 @@ describe('Inline system tags action render tests', () => {
 		const result = await action.renderInline!(file, view)
 		expect(result).toBeInstanceOf(HTMLElement)
 		expect(result!.outerHTML).toMatchInlineSnapshot(
-			'"<ul class="files-list__system-tags" aria-label="Assigned collaborative tags" data-systemtags-fileid="1"><li class="files-list__system-tag">Confidential</li></ul>"',
+			'"<ul class="files-list__system-tags" aria-label="Assigned collaborative tags" data-systemtags-fileid="1"><li class="files-list__system-tag" data-systemtag-name="Confidential">Confidential</li></ul>"',
 		)
 	})
 
@@ -116,7 +116,7 @@ describe('Inline system tags action render tests', () => {
 		const result = await action.renderInline!(file, view)
 		expect(result).toBeInstanceOf(HTMLElement)
 		expect(result!.outerHTML).toMatchInlineSnapshot(
-			'"<ul class="files-list__system-tags" aria-label="Assigned collaborative tags" data-systemtags-fileid="1"><li class="files-list__system-tag">Important</li><li class="files-list__system-tag">Confidential</li></ul>"',
+			'"<ul class="files-list__system-tags" aria-label="Assigned collaborative tags" data-systemtags-fileid="1"><li class="files-list__system-tag" data-systemtag-name="Important">Important</li><li class="files-list__system-tag" data-systemtag-name="Confidential">Confidential</li></ul>"',
 		)
 	})
 
@@ -142,7 +142,7 @@ describe('Inline system tags action render tests', () => {
 		const result = await action.renderInline!(file, view)
 		expect(result).toBeInstanceOf(HTMLElement)
 		expect(result!.outerHTML).toMatchInlineSnapshot(
-			'"<ul class="files-list__system-tags" aria-label="Assigned collaborative tags" data-systemtags-fileid="1"><li class="files-list__system-tag">Important</li><li class="files-list__system-tag files-list__system-tag--more" title="Confidential, Secret, Classified" aria-hidden="true" role="presentation">+3</li><li class="files-list__system-tag hidden-visually">Confidential</li><li class="files-list__system-tag hidden-visually">Secret</li><li class="files-list__system-tag hidden-visually">Classified</li></ul>"',
+			'"<ul class="files-list__system-tags" aria-label="Assigned collaborative tags" data-systemtags-fileid="1"><li class="files-list__system-tag" data-systemtag-name="Important">Important</li><li class="files-list__system-tag files-list__system-tag--more" data-systemtag-name="+3" title="Confidential, Secret, Classified" aria-hidden="true" role="presentation">+3</li><li class="files-list__system-tag hidden-visually" data-systemtag-name="Confidential">Confidential</li><li class="files-list__system-tag hidden-visually" data-systemtag-name="Secret">Secret</li><li class="files-list__system-tag hidden-visually" data-systemtag-name="Classified">Classified</li></ul>"',
 		)
 	})
 
@@ -169,7 +169,7 @@ describe('Inline system tags action render tests', () => {
 		document.body.appendChild(result)
 		expect(result).toBeInstanceOf(HTMLElement)
 		expect(document.body.innerHTML).toMatchInlineSnapshot(
-			'"<ul class="files-list__system-tags" aria-label="Assigned collaborative tags" data-systemtags-fileid="1"><li class="files-list__system-tag">Important</li><li class="files-list__system-tag files-list__system-tag--more" title="Confidential, Secret, Classified" aria-hidden="true" role="presentation">+3</li><li class="files-list__system-tag hidden-visually">Confidential</li><li class="files-list__system-tag hidden-visually">Secret</li><li class="files-list__system-tag hidden-visually">Classified</li></ul>"',
+			'"<ul class="files-list__system-tags" aria-label="Assigned collaborative tags" data-systemtags-fileid="1"><li class="files-list__system-tag" data-systemtag-name="Important">Important</li><li class="files-list__system-tag files-list__system-tag--more" data-systemtag-name="+3" title="Confidential, Secret, Classified" aria-hidden="true" role="presentation">+3</li><li class="files-list__system-tag hidden-visually" data-systemtag-name="Confidential">Confidential</li><li class="files-list__system-tag hidden-visually" data-systemtag-name="Secret">Secret</li><li class="files-list__system-tag hidden-visually" data-systemtag-name="Classified">Classified</li></ul>"',
 		)
 
 		// Subscribe to the event
@@ -188,7 +188,7 @@ describe('Inline system tags action render tests', () => {
 		await eventPromise
 
 		expect(document.body.innerHTML).toMatchInlineSnapshot(
-			'"<ul class="files-list__system-tags" aria-label="Assigned collaborative tags" data-systemtags-fileid="1"><li class="files-list__system-tag">Public</li></ul>"',
+			'"<ul class="files-list__system-tags" aria-label="Assigned collaborative tags" data-systemtags-fileid="1"><li class="files-list__system-tag" data-systemtag-name="Public">Public</li></ul>"',
 		)
 	})
 })
diff --git a/apps/systemtags/src/utils/colorUtils.ts b/apps/systemtags/src/utils/colorUtils.ts
index 9bc0ca8c19d..24d981054d4 100644
--- a/apps/systemtags/src/utils/colorUtils.ts
+++ b/apps/systemtags/src/utils/colorUtils.ts
@@ -67,12 +67,12 @@ export function elementColor(
 
 	let iteration = 0
 	let result = color
-	const epsilon = 1.0 / 255.0
+	const epsilon = (brightBackground ? -100 : 100) / 255
 	while (contrast < minContrast && iteration++ < 100) {
 		const hsl = hexToHSL(result)
 		const l = Math.max(
 			0,
-			Math.min(255, hsl.l + (brightBackground ? -epsilon : epsilon)),
+			Math.min(255, hsl.l + epsilon),
 		)
 		result = hslToHex({ h: hsl.h, s: hsl.s, l })
 		contrast = colorContrast(result, blurredBackground)