fix(user_status): Migrate to NcUserStatusIcon

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

diff --git a/apps/user_status/src/UserStatus.vue b/apps/user_status/src/UserStatus.vue
index 2ec5e05acd4287750791bfad0fc0184ab0cb6d42..d632d58a33cc4320d88dbb4cdde2b668f60d1715 100644 (file)
--- a/apps/user_status/src/UserStatus.vue
+++ b/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],

diff --git a/apps/user_status/src/components/OnlineStatusSelect.vue b/apps/user_status/src/components/OnlineStatusSelect.vue
index 934adf18d5e57902f8a0a79602d686f7573b21ed..156e2110cf4a83b8455abaee552b8d2d24cee6aa 100644 (file)
--- a/apps/user_status/src/components/OnlineStatusSelect.vue
+++ b/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>

diff --git a/apps/user_status/src/mixins/OnlineStatusMixin.js b/apps/user_status/src/mixins/OnlineStatusMixin.js
index e9746669f0983ff5f6f249b224cce7b8f38e2fff..eb0bd329b534dc6849028bc8c60a4259f37c3293 100644 (file)
--- a/apps/user_status/src/mixins/OnlineStatusMixin.js
+++ b/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: {

diff --git a/apps/user_status/src/services/statusOptionsService.js b/apps/user_status/src/services/statusOptionsService.js
index 7bd50bf7afffca0f9a07ce0d4968cfd304a96d61..52838e268d20c74fa98012be34f522743035e4e3 100644 (file)
--- a/apps/user_status/src/services/statusOptionsService.js
+++ b/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',
        }]
 }
 

diff --git a/core/src/views/UserMenu.vue b/core/src/views/UserMenu.vue
index 0c5084842a17c6b8091cd4775ff87dfb9b6664af..0aaf087e6d485811ee0c050e933109bcf304c3da 100644 (file)
--- a/core/src/views/UserMenu.vue
+++ b/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);
                                        }
                                }