Christopher Ng
3 years ago
parent
e47d56ac36
commit
c77998209f
File diff suppressed because one or more lines are too long
@ -1 +1 @@ |
||||
{"version":3,"sourceRoot":"","sources":["header.scss","variables.scss"],"names":[],"mappings":"AAiBA,mBAEC,yBACA,sBACA,qBACA,6PACC,aAGD,+QACC,YACA,kBACA,2BACA,WACA,WACA,kBACA,2CACA,SACA,UAGD,gLACC,WAIA,kPACC,WAGD,+HACC,SAOH,+DAGC,oBACA,kBACA,MACA,WACA,aACA,OC2Ce,KD1Cf,sBACA,8BAID,WACC,cACA,kBACA,kBACA,wBACA,sBACA,UACA,mBACA,aACA,eACA,gBACA,WAEA,mCACC,UAaD,gCACC,8CACA,sDACA,yCACA,sBACA,aACA,kBACA,gBAfD,gBACA,oCAgBC,UACA,SACA,SACA,gBAEA,kDACC,aAID,sCACC,gCACA,iDACA,YACA,YACA,SACA,QACA,kBACA,oBACA,WAGD,uEAEC,iCAzCF,gBACA,oCA6CC,iDACC,YACA,aACA,sBACA,QAEC,sDACC,kBACA,oBACA,mBACA,OAlDuB,KAmDvB,6BACA,kBACA,sBACA,mBACA,kBACA,WACA,wHAEC,+CAED,0HAEC,4CAED,oEACC,gDACA,aAED,2DACC,qBACA,iBACA,6BACA,mBACA,gBACA,uBACA,gBAED,0EACC,kBACA,0BAED,oHAEC,WACA,kBACA,YACA,WACA,wCAML,cACC,oBACA,yFACA,4BACA,wBACA,2BACA,WACA,kBACA,UACA,QACA,WAEA,gFAGD,kCACC,aACA,mBACA,cAGD,sFAEC,oBACA,mBAGD,0CACC,SACA,mBACA,YAGD,4CACC,yBACA,cAKA,qDAEC,YACA,kBACA,6EACC,aACA,uBACA,mBACA,MClIY,KDmIZ,YACA,eACA,YACA,UACA,aAEA,yFACC,UAGD,yGACC,aASL,0CACC,YAKD,gBACC,gCACA,eACA,iBACA,SACA,UACA,kBACA,gBACA,uBAEA,cAGD,kBACC,gCACA,kBACA,gBACA,eACA,iBACA,gBACA,uBAID,UACC,qBACA,YACA,eACA,cAGA,kBACC,UACA,kBAEA,yEAGC,gCAEA,4OAEC,kBACA,2CACA,YAED,0GACC,2CAED,kIACC,UAKF,6BACC,eACA,YACA,WAEA,iCACC,UACA,eAGD,gEACC,aAIF,qCACC,YACA,WACA,eAGA,oDACC,UAKF,wCACC,YACA,SACA,QACA,kBACA,oBACA,WACA,YACA,cACA,WACA,WACA,kBACA,2CAIF,2BACC,WAKF,cACC,kBACA,gBACA,aACA,WACA,SACA,YACA,aAEA,2BACC,IC/Qc,KDuRf,gDACC,mBACA,eAED,gJAEC,qBACA,YACA","file":"header.css"} |
||||
{"version":3,"sourceRoot":"","sources":["header.scss","variables.scss"],"names":[],"mappings":"AAiBA,mBAEC,yBACA,sBACA,qBACA,6PACC,aAGD,+QACC,YACA,kBACA,2BACA,WACA,WACA,kBACA,2CACA,SACA,UAGD,gLACC,WAIA,kPACC,WAGD,+HACC,SAOH,+DAGC,oBACA,kBACA,MACA,WACA,aACA,OC2Ce,KD1Cf,sBACA,8BAID,WACC,cACA,kBACA,kBACA,wBACA,sBACA,UACA,mBACA,aACA,eACA,gBACA,WAEA,mCACC,UAaD,gCACC,8CACA,sDACA,yCACA,sBACA,aACA,kBACA,gBAfD,gBACA,oCAgBC,UACA,SACA,SACA,gBAEA,kDACC,aAID,sCACC,gCACA,iDACA,YACA,YACA,SACA,QACA,kBACA,oBACA,WAGD,uEAEC,iCAzCF,gBACA,oCA4CA,cACC,oBACA,yFACA,4BACA,wBACA,2BACA,WACA,kBACA,UACA,QACA,WAEA,gFAGD,kCACC,aACA,mBACA,cAGD,sFAEC,oBACA,mBAGD,0CACC,SACA,mBACA,YAGD,4CACC,yBACA,cAKA,qDAEC,YACA,kBACA,6EACC,aACA,uBACA,mBACA,MC3EY,KD4EZ,YACA,eACA,YACA,UACA,aAEA,yFACC,UAGD,yGACC,aASL,0CACC,YAKD,gBACC,gCACA,eACA,iBACA,SACA,UACA,kBACA,gBACA,uBAEA,cAGD,kBACC,gCACA,kBACA,gBACA,eACA,iBACA,gBACA,uBAID,cACC,kBACA,gBACA,aACA,WACA,SACA,YACA,aAEA,2BACC,ICxIc,KD+If,gDACC,mBACA,eAED,gJAEC,qBACA,YACA","file":"header.css"} |
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -0,0 +1,106 @@ |
||||
<!-- |
||||
- @copyright 2023 Christopher Ng <chrng8@gmail.com> |
||||
- |
||||
- @author Christopher Ng <chrng8@gmail.com> |
||||
- |
||||
- @license AGPL-3.0-or-later |
||||
- |
||||
- This program is free software: you can redistribute it and/or modify |
||||
- it under the terms of the GNU Affero General Public License as |
||||
- published by the Free Software Foundation, either version 3 of the |
||||
- License, or (at your option) any later version. |
||||
- |
||||
- This program is distributed in the hope that it will be useful, |
||||
- but WITHOUT ANY WARRANTY; without even the implied warranty of |
||||
- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the |
||||
- GNU Affero General Public License for more details. |
||||
- |
||||
- You should have received a copy of the GNU Affero General Public License |
||||
- along with this program. If not, see <http://www.gnu.org/licenses/>. |
||||
- |
||||
--> |
||||
|
||||
<template> |
||||
<li :id="id" |
||||
class="menu-entry"> |
||||
<a v-if="href" |
||||
:href="href" |
||||
:class="{ active }" |
||||
@click.exact="handleClick"> |
||||
<NcLoadingIcon v-if="loading" |
||||
class="menu-entry__loading-icon" |
||||
:size="18" /> |
||||
<img v-else :src="cachedIcon" alt="" /> |
||||
{{ name }} |
||||
</a> |
||||
<button v-else> |
||||
<img :src="cachedIcon" alt="" /> |
||||
{{ name }} |
||||
</button> |
||||
</li> |
||||
</template> |
||||
|
||||
<script> |
||||
import { loadState } from '@nextcloud/initial-state' |
||||
|
||||
import NcLoadingIcon from '@nextcloud/vue/dist/Components/NcLoadingIcon.js' |
||||
|
||||
const versionHash = loadState('core', 'versionHash', '') |
||||
|
||||
export default { |
||||
name: 'UserMenuEntry', |
||||
|
||||
components: { |
||||
NcLoadingIcon, |
||||
}, |
||||
|
||||
props: { |
||||
id: { |
||||
type: String, |
||||
required: true, |
||||
}, |
||||
name: { |
||||
type: String, |
||||
required: true, |
||||
}, |
||||
href: { |
||||
type: String, |
||||
required: true, |
||||
}, |
||||
active: { |
||||
type: Boolean, |
||||
required: true, |
||||
}, |
||||
icon: { |
||||
type: String, |
||||
required: true, |
||||
}, |
||||
}, |
||||
|
||||
data() { |
||||
return { |
||||
loading: false, |
||||
} |
||||
}, |
||||
|
||||
computed: { |
||||
cachedIcon() { |
||||
return `${this.icon}?v=${versionHash}` |
||||
}, |
||||
}, |
||||
|
||||
methods: { |
||||
handleClick() { |
||||
this.loading = true |
||||
}, |
||||
}, |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.menu-entry { |
||||
&__loading-icon { |
||||
margin-right: 8px; |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,184 @@ |
||||
<!-- |
||||
- @copyright 2023 Christopher Ng <chrng8@gmail.com> |
||||
- |
||||
- @author Christopher Ng <chrng8@gmail.com> |
||||
- |
||||
- @license AGPL-3.0-or-later |
||||
- |
||||
- This program is free software: you can redistribute it and/or modify |
||||
- it under the terms of the GNU Affero General Public License as |
||||
- published by the Free Software Foundation, either version 3 of the |
||||
- License, or (at your option) any later version. |
||||
- |
||||
- This program is distributed in the hope that it will be useful, |
||||
- but WITHOUT ANY WARRANTY; without even the implied warranty of |
||||
- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the |
||||
- GNU Affero General Public License for more details. |
||||
- |
||||
- You should have received a copy of the GNU Affero General Public License |
||||
- along with this program. If not, see <http://www.gnu.org/licenses/>. |
||||
- |
||||
--> |
||||
|
||||
<template> |
||||
<NcHeaderMenu id="user-menu" |
||||
class="user-menu" |
||||
:aria-label="t('core', 'Open settings menu')"> |
||||
<template #trigger> |
||||
<NcAvatar class="user-menu__avatar" |
||||
:disable-menu="true" |
||||
:disable-tooltip="true" |
||||
:user="userId" /> |
||||
</template> |
||||
<nav class="user-menu__nav" |
||||
:aria-label="t('core', 'Settings menu')"> |
||||
<ul> |
||||
<UserMenuEntry v-for="entry in settingsNavEntries" |
||||
v-bind="entry" |
||||
:key="entry.id" /> |
||||
</ul> |
||||
</nav> |
||||
</NcHeaderMenu> |
||||
</template> |
||||
|
||||
<script> |
||||
import { emit } from '@nextcloud/event-bus' |
||||
import { getCurrentUser } from '@nextcloud/auth' |
||||
import { loadState } from '@nextcloud/initial-state' |
||||
|
||||
import NcAvatar from '@nextcloud/vue/dist/Components/NcAvatar.js' |
||||
import NcHeaderMenu from '@nextcloud/vue/dist/Components/NcHeaderMenu.js' |
||||
|
||||
import UserMenuEntry from '../components/UserMenu/UserMenuEntry.vue' |
||||
|
||||
const settingsNavEntries = loadState('core', 'settingsNavEntries', []) |
||||
|
||||
export default { |
||||
name: 'UserMenu', |
||||
|
||||
components: { |
||||
NcAvatar, |
||||
NcHeaderMenu, |
||||
UserMenuEntry, |
||||
}, |
||||
|
||||
data() { |
||||
return { |
||||
settingsNavEntries, |
||||
userId: getCurrentUser()?.uid, |
||||
} |
||||
}, |
||||
|
||||
mounted() { |
||||
emit('core:user-menu:mounted') |
||||
}, |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.user-menu { |
||||
margin-right: 12px; |
||||
|
||||
&:deep { |
||||
.header-menu { |
||||
&__trigger { |
||||
opacity: 1 !important; |
||||
&:focus-visible { |
||||
.user-menu__avatar { |
||||
border: 2px solid var(--color-primary-text); |
||||
} |
||||
} |
||||
} |
||||
|
||||
&__carret { |
||||
display: none !important; |
||||
} |
||||
|
||||
&__content { |
||||
width: fit-content !important; |
||||
} |
||||
} |
||||
} |
||||
|
||||
&__avatar { |
||||
&:active, |
||||
&:focus, |
||||
&:hover { |
||||
border: 2px solid var(--color-primary-text); |
||||
} |
||||
} |
||||
|
||||
&__nav { |
||||
display: flex; |
||||
width: 100%; |
||||
|
||||
ul { |
||||
display: flex; |
||||
flex-direction: column; |
||||
gap: 2px; |
||||
|
||||
&:deep { |
||||
li { |
||||
a, |
||||
button { |
||||
border-radius: 6px; |
||||
display: inline-flex; |
||||
align-items: center; |
||||
height: var(--header-menu-item-height); |
||||
color: var(--color-main-text); |
||||
padding: 10px 8px; |
||||
box-sizing: border-box; |
||||
white-space: nowrap; |
||||
position: relative; |
||||
width: 100%; |
||||
|
||||
&:hover { |
||||
background-color: var(--color-background-hover); |
||||
} |
||||
|
||||
&:focus-visible { |
||||
background-color: var(--color-background-hover) !important; |
||||
box-shadow: inset 0 0 0 2px var(--color-primary) !important; |
||||
outline: none !important; |
||||
} |
||||
|
||||
&:active, |
||||
&.active { |
||||
background-color: var(--color-primary-light); |
||||
} |
||||
|
||||
span { |
||||
padding-bottom: 0; |
||||
color: var(--color-main-text); |
||||
white-space: nowrap; |
||||
overflow: hidden; |
||||
text-overflow: ellipsis; |
||||
max-width: 110px; |
||||
} |
||||
|
||||
img { |
||||
width: 16px; |
||||
height: 16px; |
||||
margin-right: 10px; |
||||
} |
||||
|
||||
img, |
||||
svg { |
||||
opacity: .7; |
||||
filter: var(--background-invert-if-dark); |
||||
} |
||||
} |
||||
|
||||
// Override global button styles |
||||
button { |
||||
background-color: transparent; |
||||
border: none; |
||||
font-weight: normal; |
||||
margin: 0; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Loading…
Reference in new issue