diff options
author | Christopher Ng <chrng8@gmail.com> | 2024-01-11 18:56:06 -0800 |
---|---|---|
committer | Christopher Ng <chrng8@gmail.com> | 2024-01-23 16:36:10 -0800 |
commit | f06047518960c76c99b404b7c91836b27d1286b9 (patch) | |
tree | fc5acb549d8482490b576eb6f54683c66f2a1355 /apps/user_status | |
parent | 693eb6926e0e9294d9c808af6043efc585fd00d1 (diff) | |
download | nextcloud-server-f06047518960c76c99b404b7c91836b27d1286b9.tar.gz nextcloud-server-f06047518960c76c99b404b7c91836b27d1286b9.zip |
fix(user_status): Migrate to NcUserStatusIcon
Signed-off-by: Christopher Ng <chrng8@gmail.com>
Diffstat (limited to 'apps/user_status')
-rw-r--r-- | apps/user_status/src/UserStatus.vue | 11 | ||||
-rw-r--r-- | apps/user_status/src/components/OnlineStatusSelect.vue | 18 | ||||
-rw-r--r-- | apps/user_status/src/mixins/OnlineStatusMixin.js | 25 | ||||
-rw-r--r-- | apps/user_status/src/services/statusOptionsService.js | 5 |
4 files changed, 18 insertions, 41 deletions
diff --git a/apps/user_status/src/UserStatus.vue b/apps/user_status/src/UserStatus.vue index 2ec5e05acd4..d632d58a33c 100644 --- 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 934adf18d5e..156e2110cf4 100644 --- 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 e9746669f09..eb0bd329b53 100644 --- 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 7bd50bf7aff..52838e268d2 100644 --- 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', }] } |