Merge pull request #46448 from nextcloud/bugfix/noid/fix-missing-dashboard-widget-icon

fix(dashboard): Unify widget icon colors and document it's behaviour

5 files changed, 27 insertions, 14 deletions

diff --git a/apps/dashboard/lib/Controller/DashboardController.php b/apps/dashboard/lib/Controller/DashboardController.php
index 9c1ab7813f2..ebd6fdd5ae7 100644
--- a/apps/dashboard/lib/Controller/DashboardController.php
+++ b/apps/dashboard/lib/Controller/DashboardController.php
@@ -15,6 +15,7 @@ use OCP\AppFramework\Http\Attribute\FrontpageRoute;
 use OCP\AppFramework\Http\Attribute\OpenAPI;
 use OCP\AppFramework\Http\TemplateResponse;
 use OCP\AppFramework\Services\IInitialState;
+use OCP\Dashboard\IIconWidget;
 use OCP\Dashboard\IManager;
 use OCP\Dashboard\IWidget;
 use OCP\EventDispatcher\IEventDispatcher;
@@ -54,6 +55,7 @@ class DashboardController extends Controller {
 				'id' => $widget->getId(),
 				'title' => $widget->getTitle(),
 				'iconClass' => $widget->getIconClass(),
+				'iconUrl' => $widget instanceof IIconWidget ? $widget->getIconUrl() : '',
 				'url' => $widget->getUrl()
 			];
 		}, $this->dashboardManager->getWidgets());
diff --git a/apps/dashboard/src/DashboardApp.vue b/apps/dashboard/src/DashboardApp.vue
index 828b8e9d4f3..aa7f1c04360 100644
--- a/apps/dashboard/src/DashboardApp.vue
+++ b/apps/dashboard/src/DashboardApp.vue
@@ -24,7 +24,12 @@
 					class="panel">
 					<div class="panel--header">
 						<h2>
-							<span :aria-labelledby="`panel-${panels[panelId].id}--header--icon--description`"
+							<img v-if="apiWidgets[panels[panelId].id].icon_url"
+								:alt="apiWidgets[panels[panelId].id].title + ' icon'"
+								:src="apiWidgets[panels[panelId].id].icon_url"
+								aria-hidden="true">
+							<span v-else
+								:aria-labelledby="`panel-${panels[panelId].id}--header--icon--description`"
 								aria-hidden="true"
 								:class="apiWidgets[panels[panelId].id].icon_class"
 								role="img" />
@@ -97,7 +102,11 @@
 							:checked="isActive(panel)"
 							@input="updateCheckbox(panel, $event.target.checked)">
 						<label :for="'panel-checkbox-' + panel.id" :class="{ draggable: isActive(panel) }">
-							<span :class="panel.iconClass" aria-hidden="true" />
+							<img v-if="panel.iconUrl"
+								:alt="panel.title + ' icon'"
+								:src="panel.iconUrl"
+								aria-hidden="true">
+							<span v-else :class="panel.iconClass" aria-hidden="true" />
 							{{ panel.title }}
 						</label>
 					</li>
@@ -554,6 +563,8 @@ export default {
 			overflow: hidden;
 			text-overflow: ellipsis;
 			cursor: grab;
+
+			img,
 			span {
 				background-size: 32px;
 				width: 32px;
@@ -564,6 +575,10 @@ export default {
 				margin-top: -6px;
 				margin-left: 6px;
 			}
+
+			img {
+				filter: var(--background-invert-if-dark);
+			}
 		}
 	}
 
@@ -651,6 +666,7 @@ export default {
 			text-overflow: ellipsis;
 			white-space: nowrap;
 
+			img,
 			span {
 				position: absolute;
 				top: 16px;
@@ -659,6 +675,10 @@ export default {
 				background-size: 24px;
 			}
 
+			img {
+				filter: var(--background-invert-if-dark);
+			}
+
 			&:hover {
 				border-color: var(--color-primary-element);
 			}
diff --git a/apps/user_status/css/user-status-menu.css b/apps/user_status/css/user-status-menu.css
index afddf8703dc..5bdbdf01cb4 100644
--- a/apps/user_status/css/user-status-menu.css
+++ b/apps/user_status/css/user-status-menu.css
@@ -1,10 +1,4 @@
 /*!
  * SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors
  * SPDX-License-Identifier: AGPL-3.0-or-later
- *//*!
- * SPDX-FileCopyrightText: 2018 Nextcloud GmbH and Nextcloud contributors
- * SPDX-License-Identifier: AGPL-3.0-or-later
- *//*!
- * SPDX-FileCopyrightText: 2018 Nextcloud GmbH and Nextcloud contributors
- * SPDX-License-Identifier: AGPL-3.0-or-later
- */.icon-user-status{background-image:url("../img/app.svg")}.icon-user-status-dark{background-image:url("../img/app-dark.svg")}/*# sourceMappingURL=user-status-menu.css.map */
+ */.icon-user-status{background-image:url("../img/app.svg")}.icon-user-status-dark{background-image:url("../img/app-dark.svg");filter:var(--background-invert-if-dark)}/*# sourceMappingURL=user-status-menu.css.map */
diff --git a/apps/user_status/css/user-status-menu.css.map b/apps/user_status/css/user-status-menu.css.map
index 2efe2cfe64e..d8e862f7108 100644
--- a/apps/user_status/css/user-status-menu.css.map
+++ b/apps/user_status/css/user-status-menu.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["user-status-menu.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAOA,kBACC,uCAGD,uBACC","file":"user-status-menu.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["user-status-menu.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA,GAIA,kBACC,uCAGD,uBACC,4CACA","file":"user-status-menu.css"}
\ No newline at end of file
diff --git a/apps/user_status/css/user-status-menu.scss b/apps/user_status/css/user-status-menu.scss
index a18128cc06d..10d761e5dff 100644
--- a/apps/user_status/css/user-status-menu.scss
+++ b/apps/user_status/css/user-status-menu.scss
@@ -2,14 +2,11 @@
  * SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
-@use 'variables';
-@import 'functions';
-
 .icon-user-status {
 	background-image: url("../img/app.svg");
 }
 
 .icon-user-status-dark {
 	background-image: url("../img/app-dark.svg");
-
+	filter: var(--background-invert-if-dark);
 }