forked from AkkomaGang/akkoma-fe
compact user panel
This commit is contained in:
parent
f304fed1e9
commit
862a5a86e7
|
@ -26,6 +26,11 @@
|
||||||
{{ $t('settings.compact_nav_panel') }}
|
{{ $t('settings.compact_nav_panel') }}
|
||||||
</BooleanSetting>
|
</BooleanSetting>
|
||||||
</li>
|
</li>
|
||||||
|
<li>
|
||||||
|
<BooleanSetting path="compactUserPanel">
|
||||||
|
{{ $t('settings.compact_user_panel') }}
|
||||||
|
</BooleanSetting>
|
||||||
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<div class="setting-item">
|
<div class="setting-item">
|
||||||
|
|
|
@ -6,6 +6,9 @@ import { mapState } from 'vuex'
|
||||||
const UserPanel = {
|
const UserPanel = {
|
||||||
computed: {
|
computed: {
|
||||||
signedIn () { return this.user },
|
signedIn () { return this.user },
|
||||||
|
compactUserPanel () {
|
||||||
|
return this.$store.getters.mergedConfig.compactUserPanel || false
|
||||||
|
},
|
||||||
...mapState({ user: state => state.users.currentUser })
|
...mapState({ user: state => state.users.currentUser })
|
||||||
},
|
},
|
||||||
components: {
|
components: {
|
||||||
|
|
|
@ -1,5 +1,8 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="user-panel">
|
<div
|
||||||
|
class="user-panel"
|
||||||
|
:class="{ compact: compactUserPanel }"
|
||||||
|
>
|
||||||
<div
|
<div
|
||||||
v-if="signedIn"
|
v-if="signedIn"
|
||||||
key="user-panel"
|
key="user-panel"
|
||||||
|
@ -25,4 +28,22 @@
|
||||||
.user-panel .signed-in {
|
.user-panel .signed-in {
|
||||||
overflow: visible;
|
overflow: visible;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.user-panel.compact {
|
||||||
|
.background-image {
|
||||||
|
mask: unset; -webkit-mask: unset;
|
||||||
|
background-position: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-info .Avatar { width: 24px; height: 24px; }
|
||||||
|
|
||||||
|
.user-summary { margin-left: 1em; font-weight: bold; }
|
||||||
|
|
||||||
|
.user-info .container { padding-top: 6px; padding-bottom: 0; }
|
||||||
|
|
||||||
|
.bottom-line { display: none; }
|
||||||
|
|
||||||
|
.form-group .visibility-notice { margin: 0; }
|
||||||
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -338,6 +338,7 @@
|
||||||
"hide_isp": "Hide instance-specific panel",
|
"hide_isp": "Hide instance-specific panel",
|
||||||
"show_third_column": "Move Notifications to a seperate column",
|
"show_third_column": "Move Notifications to a seperate column",
|
||||||
"compact_nav_panel": "Compact navigation panel",
|
"compact_nav_panel": "Compact navigation panel",
|
||||||
|
"compact_user_panel": "Compact user panel",
|
||||||
"hide_wallpaper": "Hide instance wallpaper",
|
"hide_wallpaper": "Hide instance wallpaper",
|
||||||
"preload_images": "Preload images",
|
"preload_images": "Preload images",
|
||||||
"use_one_click_nsfw": "Open NSFW attachments with just one click",
|
"use_one_click_nsfw": "Open NSFW attachments with just one click",
|
||||||
|
|
|
@ -20,6 +20,7 @@ export const defaultState = {
|
||||||
customTheme: undefined,
|
customTheme: undefined,
|
||||||
showThirdColumn: false,
|
showThirdColumn: false,
|
||||||
compactNavPanel: false,
|
compactNavPanel: false,
|
||||||
|
compactUserPanel: false,
|
||||||
customThemeSource: undefined,
|
customThemeSource: undefined,
|
||||||
hideISP: false,
|
hideISP: false,
|
||||||
hideInstanceWallpaper: false,
|
hideInstanceWallpaper: false,
|
||||||
|
|
Loading…
Reference in a new issue