fixup! fixup! feat(systemtags): add color support

Signed-off-by: skjnldsv <[email protected]>
nextcloud · Nov 15, 2024 · 887004b · 887004b
1 parent adf3ddf
commit 887004b
Show file tree

Hide file tree

Showing 8 changed files with 279 additions and 83 deletions.
diff --git a/apps/dav/lib/SystemTag/SystemTagNode.php b/apps/dav/lib/SystemTag/SystemTagNode.php
@@ -86,12 +86,13 @@ public function setName($name) {
 	 * @param string $name new tag name
 	 * @param bool $userVisible user visible
 	 * @param bool $userAssignable user assignable
+	 * @param string $color color
 	 *
 	 * @throws NotFound whenever the given tag id does not exist
 	 * @throws Forbidden whenever there is no permission to update said tag
 	 * @throws Conflict whenever a tag already exists with the given attributes
 	 */
-	public function update($name, $userVisible, $userAssignable): void {
+	public function update($name, $userVisible, $userAssignable, $color): void {
 		try {
 			if (!$this->tagManager->canUserSeeTag($this->tag, $this->user)) {
 				throw new NotFound('Tag with id ' . $this->tag->getId() . ' does not exist');
@@ -110,7 +111,7 @@ public function update($name, $userVisible, $userAssignable): void {
 				}
 			}
 
-			$this->tagManager->updateTag($this->tag->getId(), $name, $userVisible, $userAssignable);
+			$this->tagManager->updateTag($this->tag->getId(), $name, $userVisible, $userAssignable, $color);
 		} catch (TagNotFoundException $e) {
 			throw new NotFound('Tag with id ' . $this->tag->getId() . ' does not exist');
 		} catch (TagAlreadyExistsException $e) {

diff --git a/apps/dav/lib/SystemTag/SystemTagPlugin.php b/apps/dav/lib/SystemTag/SystemTagPlugin.php
@@ -411,6 +411,7 @@ public function handleUpdateProperties($path, PropPatch $propPatch) {
 			self::GROUPS_PROPERTYNAME,
 			self::NUM_FILES_PROPERTYNAME,
 			self::REFERENCE_FILEID_PROPERTYNAME,
+			self::COLOR_PROPERTYNAME,
 		], function ($props) use ($node) {
 			if (!($node instanceof SystemTagNode)) {
 				return false;
@@ -420,6 +421,7 @@ public function handleUpdateProperties($path, PropPatch $propPatch) {
 			$name = $tag->getName();
 			$userVisible = $tag->isUserVisible();
 			$userAssignable = $tag->isUserAssignable();
+			$color = $tag->getColor();
 
 			$updateTag = false;
 
@@ -440,6 +442,11 @@ public function handleUpdateProperties($path, PropPatch $propPatch) {
 				$updateTag = true;
 			}
 
+			if (isset($props[self::COLOR_PROPERTYNAME])) {
+				$color = $props[self::COLOR_PROPERTYNAME];
+				$updateTag = true;
+			}
+
 			if (isset($props[self::GROUPS_PROPERTYNAME])) {
 				if (!$this->groupManager->isAdmin($this->userSession->getUser()->getUID())) {
 					// property only available for admins
@@ -457,7 +464,7 @@ public function handleUpdateProperties($path, PropPatch $propPatch) {
 			}
 
 			if ($updateTag) {
-				$node->update($name, $userVisible, $userAssignable);
+				$node->update($name, $userVisible, $userAssignable, $color);
 			}
 
 			return true;

diff --git a/apps/systemtags/src/components/SystemTagPicker.vue b/apps/systemtags/src/components/SystemTagPicker.vue
@@ -52,8 +52,9 @@
 						:value="`#${tag.color || primaryColor}`"
 						class="systemtags-picker__tag-color"
 						@update:value="onColorChange(tag, $event)">
-						<NcButton :aria-label="t('systemtags', 'Change tag color')" type="primary">
+						<NcButton :aria-label="t('systemtags', 'Change tag color')" type="tertiary">
 							<template #icon>
+								<CircleIcon :size="24" />
 								<PencilIcon />
 							</template>
 						</NcButton>
@@ -136,18 +137,22 @@ import NcLoadingIcon from '@nextcloud/vue/dist/Components/NcLoadingIcon.js'
 import NcNoteCard from '@nextcloud/vue/dist/Components/NcNoteCard.js'
 import NcTextField from '@nextcloud/vue/dist/Components/NcTextField.js'
 import CheckIcon from 'vue-material-design-icons/CheckCircle.vue'
+import CircleIcon from 'vue-material-design-icons/Circle.vue'
 import PencilIcon from 'vue-material-design-icons/Pencil.vue'
 import PlusIcon from 'vue-material-design-icons/Plus.vue'
 import TagIcon from 'vue-material-design-icons/Tag.vue'
 
-import { createTag, fetchTag, fetchTags, getTagObjects, setTagObjects } from '../services/api'
+import { createTag, fetchTag, fetchTags, getTagObjects, setTagObjects, updateTag, updateTagColor } from '../services/api'
 import { getNodeSystemTags, setNodeSystemTags } from '../utils'
-import { invertTextColor } from '../utils/colorUtils'
+import { elementColor, invertTextColor, isDarkModeEnabled } from '../utils/colorUtils'
 import logger from '../services/logger'
 
-const primaryColor = getComputedStyle(document.documentElement)
+const primaryColor = getComputedStyle(document.body)
 	.getPropertyValue('--color-primary-element')
 	.replace('#', '') || '0069c3'
+const mainBackgroundColor = getComputedStyle(document.body)
+	.getPropertyValue('--color-main-background')
+	.replace('#', '') || (isDarkModeEnabled() ? '000000' : 'ffffff')
 
 type TagListCount = {
 	string: number
@@ -165,6 +170,7 @@ export default defineComponent({
 
 	components: {
 		CheckIcon,
+		CircleIcon,
 		NcButton,
 		NcCheckboxRadioSwitch,
 		// eslint-disable-next-line vue/no-unused-components
@@ -383,6 +389,7 @@ export default defineComponent({
 
 		onColorChange(tag: TagWithId, color: string) {
 			tag.color = color.replace('#', '')
+			updateTag(tag)
 		},
 
 		isChecked(tag: TagWithId): boolean {
@@ -522,17 +529,15 @@ export default defineComponent({
 		},
 
 		tagListStyle(tag: TagWithId): Record<string, string> {
+			const primaryElement = elementColor(`#${tag.color || primaryColor}`, `#${mainBackgroundColor}`)
+			const textColor = invertTextColor(primaryElement) ? '#000000' : '#ffffff'
 			return {
-				'--color-primary': `#${tag.color || primaryColor}`,
-				'--color-primary-text': this.primaryElementTextColor(tag.color || primaryColor),
-				'--color-primary-element': `#${tag.color || primaryColor}`,
-				'--color-primary-element-text': this.primaryElementTextColor(tag.color || primaryColor),
+				'--color-primary': primaryElement,
+				'--color-primary-text': textColor,
+				'--color-primary-element': primaryElement,
+				'--color-primary-element-text': textColor,
 			}
 		},
-
-		primaryElementTextColor(color: string): string {
-			return invertTextColor(color) ? '#000000' : '#ffffff'
-		},
 	},
 })
 </script>
@@ -580,23 +585,24 @@ export default defineComponent({
 		}
 	}
 
-	.systemtags-picker__tag-color {
+	.systemtags-picker__tag-color button {
 		margin-inline-start: calc(var(--default-grid-baseline) * 2);
 		color: var(--color-primary-element);
-		width: var(--default-clickable-area);
-		height: var(--default-clickable-area);
-		display: flex;
 
-		button {
-			border-radius: 50%;
-			span {
-				display: none;
-			}
+		span.pencil-icon {
+			display: none;
+			color: var(--color-main-text);
+		}
 
-			&:focus span,
-			&:hover span {
+		&:focus,
+		&:hover,
+		&[aria-expanded='true'] {
+			.pencil-icon {
 				display: block;
 			}
+			.circle-icon {
+				display: none;
+			}
 		}
 	}
 

diff --git a/apps/systemtags/src/services/api.ts b/apps/systemtags/src/services/api.ts
@@ -99,12 +99,13 @@ export const createTag = async (tag: Tag | ServerTag): Promise<number> => {
 export const updateTag = async (tag: TagWithId): Promise<void> => {
 	const path = '/systemtags/' + tag.id
 	const data = `<?xml version="1.0"?>
-	<d:propertyupdate xmlns:d="DAV:" xmlns:oc="http://owncloud.org/ns">
+	<d:propertyupdate xmlns:d="DAV:" xmlns:oc="http://owncloud.org/ns" xmlns:nc="http://nextcloud.org/ns">
 		<d:set>
 			<d:prop>
 				<oc:display-name>${tag.displayName}</oc:display-name>
 				<oc:user-visible>${tag.userVisible}</oc:user-visible>
 				<oc:user-assignable>${tag.userAssignable}</oc:user-assignable>
+				<nc:color>${tag.color}</nc:color>
 			</d:prop>
 		</d:set>
 	</d:propertyupdate>`