mirror of
https://github.com/nextcloud/server.git
synced 2026-02-20 00:12:30 -05:00
fix: Remove profile from UserStatus component
Signed-off-by: Christopher Ng <chrng8@gmail.com>
This commit is contained in:
Christopher Ng
parent
d899e676de
commit
4c8256c15b
1 changed files with 25 additions and 131 deletions
|
|
@ -21,28 +21,13 @@
|
|||
|
||||
<template>
|
||||
<component :is="inline ? 'div' : 'li'">
|
||||
<!-- User Menu Entries -->
|
||||
<div v-if="!inline" class="user-status-menu-item">
|
||||
<!-- Username display -->
|
||||
<a class="user-status-menu-item__header"
|
||||
:href="profilePageLink"
|
||||
@click.exact="loadProfilePage">
|
||||
<div class="user-status-menu-item__header-content">
|
||||
<div class="user-status-menu-item__header-content-displayname">{{ displayName }}</div>
|
||||
<div v-if="!loadingProfilePage" class="user-status-menu-item__header-content-placeholder" />
|
||||
<div v-else class="icon-loading-small" />
|
||||
</div>
|
||||
<div v-if="profileEnabled">
|
||||
{{ t('user_status', 'View profile') }}
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- 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 }}
|
||||
</button>
|
||||
</div>
|
||||
<!-- User Status = Status modal toggle -->
|
||||
<button v-if="!inline"
|
||||
class="user-status-menu-item"
|
||||
@click.stop="openModal">
|
||||
<span aria-hidden="true" :class="statusIcon" class="user-status-icon" />
|
||||
{{ visibleMessage }}
|
||||
</button>
|
||||
|
||||
<!-- Dashboard Status -->
|
||||
<NcButton v-else
|
||||
|
|
@ -60,9 +45,6 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
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'
|
||||
|
|
@ -70,8 +52,6 @@ import debounce from 'debounce'
|
|||
import { sendHeartbeat } from './services/heartbeatService.js'
|
||||
import OnlineStatusMixin from './mixins/OnlineStatusMixin.js'
|
||||
|
||||
const { profileEnabled } = loadState('user_status', 'profileEnabled', false)
|
||||
|
||||
export default {
|
||||
name: 'UserStatus',
|
||||
|
||||
|
|
@ -95,41 +75,19 @@ export default {
|
|||
|
||||
data() {
|
||||
return {
|
||||
displayName: getCurrentUser().displayName,
|
||||
heartbeatInterval: null,
|
||||
isAway: false,
|
||||
isModalOpen: false,
|
||||
loadingProfilePage: false,
|
||||
mouseMoveListener: null,
|
||||
profileEnabled,
|
||||
setAwayTimeout: null,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
/**
|
||||
* The profile page link
|
||||
*
|
||||
* @return {string | undefined}
|
||||
*/
|
||||
profilePageLink() {
|
||||
if (this.profileEnabled) {
|
||||
return generateUrl('/u/{userId}', { userId: getCurrentUser().uid })
|
||||
}
|
||||
// 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 undefined
|
||||
},
|
||||
},
|
||||
|
||||
/**
|
||||
* Loads the current user's status from initial state
|
||||
* and stores it in Vuex
|
||||
*/
|
||||
mounted() {
|
||||
subscribe('settings:display-name:updated', this.handleDisplayNameUpdate)
|
||||
subscribe('settings:profile-enabled:updated', this.handleProfileEnabledUpdate)
|
||||
|
||||
this.$store.dispatch('loadStatusFromInitialState')
|
||||
|
||||
if (OC.config.session_keepalive) {
|
||||
|
|
@ -166,28 +124,12 @@ export default {
|
|||
* Some housekeeping before destroying the component
|
||||
*/
|
||||
beforeDestroy() {
|
||||
unsubscribe('settings:display-name:updated', this.handleDisplayNameUpdate)
|
||||
unsubscribe('settings:profile-enabled:updated', this.handleProfileEnabledUpdate)
|
||||
window.removeEventListener('mouseMove', this.mouseMoveListener)
|
||||
clearInterval(this.heartbeatInterval)
|
||||
unsubscribe('user_status:status.updated', this.handleUserStatusUpdated)
|
||||
},
|
||||
|
||||
methods: {
|
||||
handleDisplayNameUpdate(displayName) {
|
||||
this.displayName = displayName
|
||||
},
|
||||
|
||||
handleProfileEnabledUpdate(profileEnabled) {
|
||||
this.profileEnabled = profileEnabled
|
||||
},
|
||||
|
||||
loadProfilePage() {
|
||||
if (this.profileEnabled) {
|
||||
this.loadingProfilePage = true
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Opens the modal to set a custom status
|
||||
*/
|
||||
|
|
@ -234,75 +176,27 @@ export default {
|
|||
|
||||
<style lang="scss" scoped>
|
||||
.user-status-menu-item {
|
||||
&__header {
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
width: auto !important;
|
||||
height: 44px * 1.5 !important;
|
||||
padding: 10px 12px 5px 12px !important;
|
||||
align-items: flex-start !important;
|
||||
color: var(--color-main-text) !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;
|
||||
|
||||
&:not([href]) {
|
||||
height: var(--header-menu-item-height) !important;
|
||||
color: var(--color-text-maxcontrast) !important;
|
||||
cursor: default !important;
|
||||
-webkit-backdrop-filter: var(--background-blur);
|
||||
backdrop-filter: var(--background-blur);
|
||||
|
||||
& * {
|
||||
cursor: default !important;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
}
|
||||
|
||||
&-content {
|
||||
display: inline-flex !important;
|
||||
font-weight: bold !important;
|
||||
gap: 0 10px !important;
|
||||
width: auto;
|
||||
|
||||
&-displayname {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
&-placeholder {
|
||||
width: 16px !important;
|
||||
height: 24px !important;
|
||||
margin-right: 10px !important;
|
||||
visibility: hidden !important;
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
color: var(--color-text-maxcontrast) !important;
|
||||
}
|
||||
&:active,
|
||||
&:hover,
|
||||
&:focus-visible {
|
||||
background-color: var(--color-background-hover);
|
||||
}
|
||||
|
||||
&__toggle {
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue