Update the user status dashboard widget and fix the icon color

Signed-off-by: Joas Schilling <coding@schilljs.com>

apps/user_status/css/user-status-menu.css

@@ -80,6 +80,10 @@
   background-image: url("../img/app.svg");
 }
 
+.icon-user-status-dark {
+  background-image: url("../img/app-dark.svg");
+}
+
 .icon-user-status-online {
   background-image: url("../img/user-status-online.svg");
 }

apps/user_status/css/user-status-menu.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../core/css/variables.scss","user-status-menu.scss","../../../core/css/functions.scss"],"names":[],"mappings":";AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAsBA;AAAA;AAAA;AA4BA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AD1BA;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;EACA","file":"user-status-menu.css"}
+{"version":3,"sourceRoot":"","sources":["../../../core/css/variables.scss","user-status-menu.scss","../../../core/css/functions.scss"],"names":[],"mappings":";AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAsBA;AAAA;AAAA;AA4BA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AD1BA;EACC;;;AAGD;EACC;;;AAID;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;EACA","file":"user-status-menu.css"}

apps/user_status/css/user-status-menu.scss

@@ -26,6 +26,11 @@
 	background-image: url("../img/app.svg");
 }
 
+.icon-user-status-dark {
+	background-image: url("../img/app-dark.svg");
+
+}
+
 .icon-user-status-online {
 	background-image: url('../img/user-status-online.svg');
 }

apps/user_status/img/app-dark.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" enable-background="new 0 0 24 24" version="1.1" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><rect width="24" height="24" fill="none"/><path d="m10.615 2.1094c-4.8491 0.68106-8.6152 4.8615-8.6152 9.8906 0 5.5 4.5 10 10 10 5.0292 0 9.2096-3.7661 9.8906-8.6152-1.4654 1.601-3.5625 2.6152-5.8906 2.6152-4.4 0-8-3.6-8-8 0-2.3281 1.0143-4.4252 2.6152-5.8906z" fill="#000000"/></svg>

apps/user_status/lib/Dashboard/UserStatusWidget.php

@@ -109,7 +109,7 @@ class UserStatusWidget implements IAPIWidget, IIconWidget, IOptionWidget {
 	 * @inheritDoc
 	 */
 	public function getIconClass(): string {
-		return 'icon-user-status';
+		return 'icon-user-status-dark';
 	}
 
 	/**
@@ -117,7 +117,7 @@ class UserStatusWidget implements IAPIWidget, IIconWidget, IOptionWidget {
 	 */
 	public function getIconUrl(): string {
 		return $this->urlGenerator->getAbsoluteURL(
-			$this->urlGenerator->imagePath(Application::APP_ID, 'app.svg')
+			$this->urlGenerator->imagePath(Application::APP_ID, 'app-dark.svg')
 		);
 	}
 

apps/user_status/src/views/Dashboard.vue

@@ -20,11 +20,12 @@
   -->
 
 <template>
-	<DashboardWidget id="user-status_panel"
+	<NcDashboardWidget id="user-status_panel"
 		:items="items"
-		:loading="loading">
+		:loading="loading"
+		:empty-content-message="t('user_status', 'No recent status changes')">
 		<template #default="{ item }">
-			<DashboardWidgetItem :main-text="item.mainText"
+			<NcDashboardWidgetItem :main-text="item.mainText"
 				:sub-text="item.subText">
 				<template #avatar>
 					<NcAvatar class="item-avatar"
@@ -34,33 +35,27 @@
 						:show-user-status="false"
 						:show-user-status-compact="false" />
 				</template>
-			</DashboardWidgetItem>
+			</NcDashboardWidgetItem>
 		</template>
-		<template #empty-content>
-			<NcEmptyContent id="user_status-widget-empty-content">
-				<template #icon>
-					<div class="icon-user-status" />
-				</template>
-				{{ t('user_status', 'No recent status changes') }}
-			</NcEmptyContent>
+		<template #emptyContentIcon>
+			<div class="icon-user-status-dark" />
 		</template>
-	</DashboardWidget>
+	</NcDashboardWidget>
 </template>
 
 <script>
-import { DashboardWidget, DashboardWidgetItem } from '@nextcloud/vue-dashboard'
 import { loadState } from '@nextcloud/initial-state'
 import NcAvatar from '@nextcloud/vue/dist/Components/NcAvatar'
-import NcEmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent'
+import NcDashboardWidget from '@nextcloud/vue/dist/Components/NcDashboardWidget'
+import NcDashboardWidgetItem from '@nextcloud/vue/dist/Components/NcDashboardWidgetItem'
 import moment from '@nextcloud/moment'
 
 export default {
 	name: 'Dashboard',
 	components: {
 		NcAvatar,
-		DashboardWidget,
-		DashboardWidgetItem,
-		NcEmptyContent,
+		NcDashboardWidget,
+		NcDashboardWidgetItem,
 	},
 	data() {
 		return {
@@ -117,14 +112,10 @@ export default {
 </script>
 
 <style lang="scss">
-#user_status-widget-empty-content {
-	text-align: center;
-	margin-top: 5vh;
-	.icon-user-status {
-		width: 64px;
-		height: 64px;
-		background-size: 64px;
-		filter: var(--background-invert-if-dark);
-	}
+.icon-user-status-dark {
+	width: 64px;
+	height: 64px;
+	background-size: 64px;
+	filter: var(--background-invert-if-dark);
 }
 </style>

apps/user_status/tests/Unit/Dashboard/UserStatusWidgetTest.php

@@ -95,7 +95,7 @@ class UserStatusWidgetTest extends TestCase {
 	}
 
 	public function testGetIconClass(): void {
-		$this->assertEquals('icon-user-status', $this->widget->getIconClass());
+		$this->assertEquals('icon-user-status-dark', $this->widget->getIconClass());
 	}
 
 	public function testGetUrl(): void {

dist/core-common.js.LICENSE.txt

@@ -356,6 +356,10 @@
 
 /*! For license information please see NcColorPicker.js.LICENSE.txt */
 
+/*! For license information please see NcDashboardWidget.js.LICENSE.txt */
+
+/*! For license information please see NcDashboardWidgetItem.js.LICENSE.txt */
+
 /*! For license information please see NcDatetimePicker.js.LICENSE.txt */
 
 /*! For license information please see NcHighlight.js.LICENSE.txt */
@@ -676,28 +680,6 @@
  *
  */
 
-/**
- * @copyright Copyright (c) 2020 Greta Doci <gretadoci@gmail.com>
- *
- * @author 2020 Greta Doci <gretadoci@gmail.com>
- *
- * @license GNU AGPL version 3 or any later version
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU Affero General Public License as
- * published by the Free Software Foundation, either version 3 of the
- * License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU Affero General Public License for more details.
- *
- * You should have received a copy of the GNU Affero General Public License
- * along with this program. If not, see <http://www.gnu.org/licenses/>.
- *
- */
-
 /**
  * @copyright Copyright (c) 2020 John Molakvoæ <skjnldsv@protonmail.com>
  *