Update the user status dashboard widget and fix the icon colortags/v26.0.0beta1
@@ -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"); | |||
} |
@@ -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"} |
@@ -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'); | |||
} |
@@ -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> |
@@ -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') | |||
); | |||
} | |||
@@ -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> |
@@ -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 { |
@@ -362,6 +362,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 */ | |||
@@ -686,28 +690,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> | |||
* |