fix(user_status): separate user menu and dashboard status layout

- Remove href="#" from a button for HTML validation
- Use @nextcloud/vue NcButton instead of custom button in Dashboard

Signed-off-by: Grigorii K. Shartsev <me@shgk.me>

diff --git a/apps/user_status/src/UserStatus.vue b/apps/user_status/src/UserStatus.vue
index 8951bcb43c21266f5a2609260c5c6aec5b307b99..36ed0d9790f44397c91954bad4a0fa47f035e3a3 100644 (file)
--- a/apps/user_status/src/UserStatus.vue
+++ b/apps/user_status/src/UserStatus.vue
@@ -20,11 +20,11 @@
   -->
 
 <template>
-       <component :is="elementTag">
-               <div class="user-status-menu-item">
+       <component :is="inline ? 'div' : 'li'">
+               <!-- User Menu Entries -->
+               <div v-if="!inline" class="user-status-menu-item">
                        <!-- Username display -->
-                       <a v-if="!inline"
-                               class="user-status-menu-item__header"
+                       <a class="user-status-menu-item__header"
                                :href="profilePageLink"
                                @click.exact="loadProfilePage">
                                <div class="user-status-menu-item__header-content">
@@ -37,20 +37,25 @@
                                </div>
                        </a>
 
-                       <!-- Status modal toggle -->
-                       <toggle :is="inline ? 'button' : 'a'"
-                               :class="{'user-status-menu-item__toggle--inline': inline}"
-                               class="user-status-menu-item__toggle"
-                               href="#"
-                               @click.prevent.stop="openModal">
-                               <span aria-hidden="true" :class="statusIcon" class="user-status-menu-item__toggle-icon" />
+                       <!-- User Status = Status modal toggle -->
+                       <button class="user-status-menu-item__toggle" @click.stop="openModal">
+                               <span aria-hidden="true" :class="statusIcon" class="user-status-icon" />
                                {{ visibleMessage }}
-                       </toggle>
+                       </button>
                </div>
 
+               <!-- Dashboard Status -->
+               <NcButton v-else
+                       :icon="statusIcon"
+                       @click.stop="openModal">
+                       <template #icon>
+                               <span aria-hidden="true" :class="statusIcon" class="user-status-icon" />
+                       </template>
+                       {{ visibleMessage }}
+               </NcButton>
+
                <!-- Status management modal -->
-               <SetStatusModal v-if="isModalOpen"
-                       @close="closeModal" />
+               <SetStatusModal v-if="isModalOpen" @close="closeModal" />
        </component>
 </template>
 
@@ -59,6 +64,7 @@ import { generateUrl } from '@nextcloud/router'
 import { getCurrentUser } from '@nextcloud/auth'
 import { loadState } from '@nextcloud/initial-state'
 import { subscribe, unsubscribe } from '@nextcloud/event-bus'
+import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import debounce from 'debounce'
 
 import { sendHeartbeat } from './services/heartbeatService.js'
@@ -70,11 +76,17 @@ export default {
        name: 'UserStatus',
 
        components: {
+               NcButton,
                SetStatusModal: () => import(/* webpackChunkName: 'user-status-modal' */'./components/SetStatusModal.vue'),
        },
        mixins: [OnlineStatusMixin],
 
        props: {
+               /**
+                * Whether the component should be rendered as a Dashboard Status or a User Menu Entries
+                * true = Dashboard Status
+                * false = User Menu Entries
+                */
                inline: {
                        type: Boolean,
                        default: false,
@@ -94,13 +106,10 @@ export default {
                }
        },
        computed: {
-               elementTag() {
-                       return this.inline ? 'div' : 'li'
-               },
                /**
                 * The profile page link
                 *
-                * @return {string | null}
+                * @return {string | undefined}
                 */
                profilePageLink() {
                        if (this.profileEnabled) {
@@ -109,7 +118,7 @@ export default {
                        // Since an anchor element is used rather than a button,
                        // this hack removes href if the profile is disabled so that disabling pointer-events is not needed to prevent a click from opening a page
                        // and to allow the hover event for styling
-                       return null
+                       return undefined
                },
        },
 
@@ -272,45 +281,37 @@ export default {
        }
 
        &__toggle {
-               &-icon {
-                       width: 16px;
-                       height: 16px;
-                       margin-right: 10px;
-                       opacity: 1 !important;
-                       background-size: 16px;
-                       vertical-align: middle !important;
+               width: auto;
+               min-width: 44px;
+               height: 44px;
+               margin: 0;
+               border: 0;
+               border-radius: var(--border-radius-pill);
+               background-color: var(--color-main-background-blur);
+               font-size: inherit;
+               font-weight: normal;
+
+               -webkit-backdrop-filter: var(--background-blur);
+               backdrop-filter: var(--background-blur);
+
+               &:active,
+               &:hover,
+               &:focus {
+                       background-color: var(--color-background-hover);
                }
-
-               // In dashboard
-               &--inline {
-                       width: auto;
-                       min-width: 44px;
-                       height: 44px;
-                       margin: 0;
-                       border: 0;
-                       border-radius: var(--border-radius-pill);
-                       background-color: var(--color-main-background-blur);
-                       font-size: inherit;
-                       font-weight: normal;
-
-                       -webkit-backdrop-filter: var(--background-blur);
-                       backdrop-filter: var(--background-blur);
-
-                       &:active,
-                       &:hover,
-                       &:focus {
-                               background-color: var(--color-background-hover);
-                       }
-                       &:focus-visible {
-                               box-shadow: 0 0 0 4px var(--color-main-background) !important;
-                               outline: 2px solid var(--color-main-text) !important;
-                       }
+               &:focus-visible {
+                       box-shadow: 0 0 0 4px var(--color-main-background) !important;
+                       outline: 2px solid var(--color-main-text) !important;
                }
        }
 }
 
-li {
-       list-style-type: none;
+.user-status-icon {
+       width: 16px;
+       height: 16px;
+       margin-right: 10px;
+       opacity: 1 !important;
+       background-size: 16px;
+       vertical-align: middle !important;
 }
-
 </style>