Merge pull request #64288 from nextcloud/backport/64184/stable35

[stable35] fix: update shared resource calendar icon for different theme

Author: susnux

apps/profile/lib/Controller/ProfileApiController.php

@@ -125,7 +125,8 @@ private function getSharedCalendarEvents(string $userId) {
 				'label' => $event['objects'][0]['SUMMARY'][0],
 				'text' => $this->formatter->formatTimeSpan($start, \DateTime::createFromImmutable($now)),
 				'href' => $href,
-				'img' => $this->urlGenerator->getAbsoluteURL($this->appManager->getAppIcon('calendar')),
+				'img' => $this->urlGenerator->getAbsoluteURL($this->appManager->getAppIcon('calendar', true)),
+				'themedIcon' => true,
 			];
 		}
 		return $result;

apps/profile/lib/ResponseDefinitions.php

@@ -14,7 +14,8 @@
  *   label: string,
  *   text: string,
  *   href: string,
- *   img: string
+ *   img: string,
+ *   themedIcon?: bool,
  * }
  */
 class ResponseDefinitions {

apps/profile/openapi.json

@@ -64,6 +64,9 @@
                     },
                     "img": {
                         "type": "string"
+                    },
+                    "themedIcon": {
+                        "type": "boolean"
                     }
                 }
             }

apps/profile/src/components/SharedResourcesSection.vue

@@ -35,6 +35,7 @@ const title = computed(() => t('profile', 'You & {user}', { user: props.displayN
 				<template #icon>
 					<img
 						class="shared-resources__icon"
+						:class="{ 'shared-resources__icon--themed': resource.themedIcon }"
 						:src="resource.img"
 						alt=""
 						decoding="async"
@@ -74,6 +75,10 @@ const title = computed(() => t('profile', 'You & {user}', { user: props.displayN
 		height: 32px;
 		object-fit: contain;
 		border-radius: var(--border-radius);
+
+		&--themed {
+			filter: var(--background-invert-if-dark);
+		}
 	}
 }
 

apps/profile/src/services/sharedResources.ts

@@ -13,6 +13,8 @@ export interface SharedResource {
 	text: string
 	href: string
 	img: string
+	/** Monochrome app icon that should follow the text color via CSS filter. */
+	themedIcon?: boolean
 }
 
 interface OcsResponse<T> {

openapi.json

@@ -3700,6 +3700,9 @@
                     },
                     "img": {
                         "type": "string"
+                    },
+                    "themedIcon": {
+                        "type": "boolean"
                     }
                 }
             },