fix(user_status): Migrate to NcUserStatusIcon

Signed-off-by: Christopher Ng <chrng8@gmail.com>

apps/user_status/src/UserStatus.vue

@@ -25,16 +25,19 @@
 		<button v-if="!inline"
 			class="user-status-menu-item"
 			@click.stop="openModal">
-			<span aria-hidden="true" :class="statusIcon" class="user-status-icon" />
+			<NcUserStatusIcon class="user-status-icon"
+				:status="statusType"
+				aria-hidden="true" />
 			{{ visibleMessage }}
 		</button>
 
 		<!-- Dashboard Status -->
 		<NcButton v-else
-			:icon="statusIcon"
 			@click.stop="openModal">
 			<template #icon>
-				<span aria-hidden="true" :class="statusIcon" class="user-status-icon" />
+				<NcUserStatusIcon class="user-status-icon"
+					:status="statusType"
+					aria-hidden="true" />
 			</template>
 			{{ visibleMessage }}
 		</NcButton>
@@ -47,6 +50,7 @@
 <script>
 import { subscribe, unsubscribe } from '@nextcloud/event-bus'
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
+import NcUserStatusIcon from '@nextcloud/vue/dist/Components/NcUserStatusIcon.js'
 import debounce from 'debounce'
 
 import { sendHeartbeat } from './services/heartbeatService.js'
@@ -57,6 +61,7 @@ export default {
 
 	components: {
 		NcButton,
+		NcUserStatusIcon,
 		SetStatusModal: () => import(/* webpackChunkName: 'user-status-modal' */'./components/SetStatusModal.vue'),
 	},
 	mixins: [OnlineStatusMixin],

apps/user_status/src/components/OnlineStatusSelect.vue

@@ -29,25 +29,28 @@
 			@change="onChange">
 		<label :for="id" class="user-status-online-select__label">
 			{{ label }}
-			<span :class="icon" aria-hidden="true" role="img" />
+			<NcUserStatusIcon :status="type"
+				aria-hidden="true" />
 			<em class="user-status-online-select__subline">{{ subline }}</em>
 		</label>
 	</div>
 </template>
 
 <script>
+import NcUserStatusIcon from '@nextcloud/vue/dist/Components/NcUserStatusIcon.js'
+
 export default {
 	name: 'OnlineStatusSelect',
 
+	components: {
+		NcUserStatusIcon,
+	},
+
 	props: {
 		checked: {
 			type: Boolean,
 			default: false,
 		},
-		icon: {
-			type: String,
-			required: true,
-		},
 		type: {
 			type: String,
 			required: true,
@@ -101,8 +104,8 @@ $label-padding: 8px;
 
 		span {
 			position: absolute;
-			top: calc(50% - math.div($icon-size, 2));
-			left: $label-padding;
+			top: calc(50% - 10px);
+			left: 10px;
 			display: block;
 			width: $icon-size;
 			height: $icon-size;
@@ -123,5 +126,4 @@ $label-padding: 8px;
 		color: var(--color-text-lighter);
 	}
 }
-
 </style>

apps/user_status/src/mixins/OnlineStatusMixin.js

@@ -68,31 +68,6 @@ export default {
 
 			return this.$t('user_status', 'Set status')
 		},
-
-		/**
-		 * The status indicator icon
-		 *
-		 * @return {string | null}
-		 */
-		statusIcon() {
-			switch (this.statusType) {
-			case 'online':
-				return 'icon-user-status-online'
-
-			case 'away':
-			case 'busy':
-				return 'icon-user-status-away'
-
-			case 'dnd':
-				return 'icon-user-status-dnd'
-
-			case 'invisible':
-			case 'offline':
-				return 'icon-user-status-invisible'
-			}
-
-			return ''
-		},
 	},
 
 	methods: {

apps/user_status/src/services/statusOptionsService.js

@@ -32,22 +32,17 @@ const getAllStatusOptions = () => {
 	return [{
 		type: 'online',
 		label: t('user_status', 'Online'),
-		icon: 'icon-user-status-online',
 	}, {
 		type: 'away',
 		label: t('user_status', 'Away'),
-		icon: 'icon-user-status-away',
 	}, {
 		type: 'dnd',
 		label: t('user_status', 'Do not disturb'),
 		subline: t('user_status', 'Mute all notifications'),
-		icon: 'icon-user-status-dnd',
-
 	}, {
 		type: 'invisible',
 		label: t('user_status', 'Invisible'),
 		subline: t('user_status', 'Appear offline'),
-		icon: 'icon-user-status-invisible',
 	}]
 }
 

core/src/views/UserMenu.vue

@@ -241,8 +241,7 @@ export default {
 						background-color: var(--color-primary-element);
 						color: var(--color-primary-element-text);
 
-						img,
-						svg {
+						img {
 							filter: var(--primary-invert-if-dark);
 						}
 					}
@@ -261,8 +260,7 @@ export default {
 						margin-right: 10px;
 					}
 
-					img,
-					svg {
+					img {
 						filter: var(--background-invert-if-dark);
 					}
 				}