mirror of
https://github.com/nextcloud/server.git
synced 2026-03-27 04:43:20 -04:00
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>
This commit is contained in:
Grigorii K. Shartsev
parent
122e799ff5
commit
c834d98d34
1 changed files with 55 additions and 54 deletions
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in a new issue