feat: rework user picker (#568)

This commit is contained in:
patak 2022-12-27 21:07:19 +01:00 committed by GitHub
parent 8bd93722e2
commit b1109c2ceb
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
12 changed files with 60 additions and 57 deletions

View file

@ -0,0 +1,11 @@
<template>
<VDropdown :distance="0" placement="top-start">
<button btn-action-icon :aria-label="$t('action.switch_account')">
<div :class="{ 'hidden lg:block': currentUser }" i-ri:more-2-line />
<AccountAvatar v-if="currentUser" lg:hidden :account="currentUser.account" w-9 h-9 />
</button>
<template #popper="{ hide }">
<UserSwitcher @click="hide" />
</template>
</VDropdown>
</template>

View file

@ -14,18 +14,23 @@ const switchUser = (user: UserLogin) => {
</script> </script>
<template> <template>
<div flex="~ col" pb8 px4 gap-6 w-20 h-full justify-end> <div flex justify-start items-end px-2 gap-5>
<div flex="~ wrap-reverse" gap-5>
<template v-for="user of all" :key="user.id"> <template v-for="user of all" :key="user.id">
<button <button
flex rounded flex rounded
cursor-pointer cursor-pointer
aria-label="Switch user" aria-label="Switch user"
:class="user.account.id === currentUser?.account.id ? '' : 'grayscale'" :class="user.account.id === currentUser?.account.id ? '' : 'op25 grayscale'"
hover:filter-none hover="filter-none op100"
@click="switchUser(user)" @click="switchUser(user)"
> >
<AccountAvatar w-12 h-12 :account="user.account" :hover-card="false" /> <AccountAvatar w-13 h-13 :account="user.account" />
</button> </button>
</template> </template>
</div> </div>
<div flex items-center justify-center w-13 h-13>
<UserDropdown />
</div>
</div>
</template> </template>

View file

@ -4,7 +4,7 @@ export interface FeatureFlags {
experimentalVirtualScroll: boolean experimentalVirtualScroll: boolean
experimentalAvatarOnAvatar: boolean experimentalAvatarOnAvatar: boolean
experimentalGitHubCards: boolean experimentalGitHubCards: boolean
experimentalUserSwitcherSidebar: boolean experimentalUserPicker: boolean
} }
export type FeatureFlagsMap = Record<string, FeatureFlags> export type FeatureFlagsMap = Record<string, FeatureFlags>
@ -13,7 +13,7 @@ export function getDefaultFeatureFlags(): FeatureFlags {
experimentalVirtualScroll: false, experimentalVirtualScroll: false,
experimentalAvatarOnAvatar: true, experimentalAvatarOnAvatar: true,
experimentalGitHubCards: true, experimentalGitHubCards: true,
experimentalUserSwitcherSidebar: true, experimentalUserPicker: true,
} }
} }
@ -36,5 +36,5 @@ export function toggleFeatureFlag(key: keyof FeatureFlags) {
featureFlags[key] = true featureFlags[key] = true
} }
const userSwitcherSidebar = eagerComputed(() => useFeatureFlags().experimentalUserSwitcherSidebar) const userPicker = eagerComputed(() => useFeatureFlags().experimentalUserPicker)
export const showUserSwitcherSidebar = computed(() => useUsers().value.length > 1 && userSwitcherSidebar.value) export const showUserPicker = computed(() => useUsers().value.length > 1 && userPicker.value)

View file

@ -6,10 +6,7 @@ const wideLayout = computed(() => route.meta.wideLayout ?? false)
<template> <template>
<div h-full :class="{ zen: isZenMode }"> <div h-full :class="{ zen: isZenMode }">
<div v-if="isHydrated.value && showUserSwitcherSidebar" fixed h-full hidden lg:block bg-code border-r-1 border-base> <main flex w-full mxa lg:max-w-80rem>
<UserPicker />
</div>
<main flex w-full mxa lg:max-w-80rem :class="isHydrated.value && showUserSwitcherSidebar ? 'user-switcher-sidebar' : ''">
<aside class="hidden sm:flex w-1/8 md:w-1/6 justify-end lg:w-1/4 zen-hide" relative> <aside class="hidden sm:flex w-1/8 md:w-1/6 justify-end lg:w-1/4 zen-hide" relative>
<div sticky top-0 w-20 lg:w-100 h-screen flex="~ col"> <div sticky top-0 w-20 lg:w-100 h-screen flex="~ col">
<slot name="left"> <slot name="left">
@ -21,7 +18,10 @@ const wideLayout = computed(() => route.meta.wideLayout ?? false)
</div> </div>
<div v-if="isMastoInitialised" flex flex-col> <div v-if="isMastoInitialised" flex flex-col>
<UserSignInEntry v-if="!currentUser" sm:hidden /> <UserSignInEntry v-if="!currentUser" sm:hidden />
<div v-if="currentUser" p6 pb8 w-full flex="~" items-center justify-between> <div v-if="currentUser" p6 pb8 w-full>
<div hidden lg-block>
<UserPicker v-if="showUserPicker" />
<div v-else flex="~" items-center justify-between>
<NuxtLink <NuxtLink
hidden lg:block hidden lg:block
rounded-full text-start w-full rounded-full text-start w-full
@ -30,15 +30,10 @@ const wideLayout = computed(() => route.meta.wideLayout ?? false)
> >
<AccountInfo :account="currentUser.account" md:break-words /> <AccountInfo :account="currentUser.account" md:break-words />
</NuxtLink> </NuxtLink>
<VDropdown :distance="0" placement="bottom-end"> <UserDropdown />
<button btn-action-icon :aria-label="$t('action.switch_account')"> </div>
<div hidden lg:block i-ri:more-2-line /> </div>
<AccountAvatar lg:hidden :account="currentUser.account" w-9 h-9 /> <UserDropdown lg:hidden />
</button>
<template #popper="{ hide }">
<UserSwitcher @click="hide" />
</template>
</VDropdown>
</div> </div>
</div> </div>
</div> </div>
@ -68,11 +63,3 @@ const wideLayout = computed(() => route.meta.wideLayout ?? false)
<ModalContainer /> <ModalContainer />
</div> </div>
</template> </template>
<style scoped>
@media (max-width: 1500px) and (min-width: 1024px) {
.user-switcher-sidebar {
padding-left: min(5rem, calc((1500px - 100vw) / 2));
}
}
</style>

View file

@ -189,7 +189,7 @@
"feature_flags": { "feature_flags": {
"avatar_on_avatar": "الصورة الرمزية على الصورة الرمزية", "avatar_on_avatar": "الصورة الرمزية على الصورة الرمزية",
"github_cards": "GitHub بطاقات", "github_cards": "GitHub بطاقات",
"user_switcher_sidebar": "الشريط الجانبي لمبدل المستخدم", "user_picker": "الشريط الجانبي لمبدل المستخدم",
"virtual_scroll": "التمرير الافتراضي" "virtual_scroll": "التمرير الافتراضي"
} }
}, },

View file

@ -145,7 +145,7 @@
"feature_flags": { "feature_flags": {
"avatar_on_avatar": "Avatar on Avatar", "avatar_on_avatar": "Avatar on Avatar",
"github_cards": "GitHub Cards", "github_cards": "GitHub Cards",
"user_switcher_sidebar": "User Switcher Sidebar", "user_picker": "User Picker",
"virtual_scroll": "Virtual Scrolling" "virtual_scroll": "Virtual Scrolling"
} }
}, },

View file

@ -150,7 +150,7 @@
"feature_flags": { "feature_flags": {
"avatar_on_avatar": "Avatar auf Avatar", "avatar_on_avatar": "Avatar auf Avatar",
"github_cards": "GitHub Cards", "github_cards": "GitHub Cards",
"user_switcher_sidebar": "User Switcher Sidebar", "user_picker": "User Picker",
"virtual_scroll": "Virtuelles Scrollen" "virtual_scroll": "Virtuelles Scrollen"
} }
}, },

View file

@ -218,7 +218,7 @@
"avatar_on_avatar": "Avatar on Avatar", "avatar_on_avatar": "Avatar on Avatar",
"github_cards": "GitHub Cards", "github_cards": "GitHub Cards",
"title": "Experimental Features", "title": "Experimental Features",
"user_switcher_sidebar": "User Switcher Sidebar", "user_picker": "User Picker",
"virtual_scroll": "Virtual Scrolling" "virtual_scroll": "Virtual Scrolling"
}, },
"interface": { "interface": {

View file

@ -206,7 +206,7 @@
"feature_flags": { "feature_flags": {
"avatar_on_avatar": "Avatar en Avatar", "avatar_on_avatar": "Avatar en Avatar",
"github_cards": "GitHub Cards", "github_cards": "GitHub Cards",
"user_switcher_sidebar": "User Switcher Sidebar", "user_picker": "User Picker",
"virtual_scroll": "Virtual Scrolling" "virtual_scroll": "Virtual Scrolling"
} }
}, },

View file

@ -206,7 +206,7 @@
"feature_flags": { "feature_flags": {
"avatar_on_avatar": "Avatar sur avatar", "avatar_on_avatar": "Avatar sur avatar",
"github_cards": "GitHub Cards", "github_cards": "GitHub Cards",
"user_switcher_sidebar": "User Switcher Sidebar", "user_picker": "User Picker",
"virtual_scroll": "Défilement virtuel" "virtual_scroll": "Défilement virtuel"
} }
}, },

View file

@ -69,7 +69,7 @@
"settings": { "settings": {
"feature_flags": { "feature_flags": {
"github_cards": "GitHub Cards", "github_cards": "GitHub Cards",
"user_switcher_sidebar": "User Switcher Sidebar", "user_picker": "User Picker",
"virtual_scroll": "仮想スクロール" "virtual_scroll": "仮想スクロール"
} }
}, },

View file

@ -32,10 +32,10 @@ const { lg } = breakpoints
{{ $t('settings.feature_flags.github_cards') }} {{ $t('settings.feature_flags.github_cards') }}
</SettingsToggle> </SettingsToggle>
<SettingsToggle <SettingsToggle
:checked="currentUserFeatureFlags.experimentalUserSwitcherSidebar" :checked="currentUserFeatureFlags.experimentalUserPicker"
@click="toggleFeatureFlag('experimentalUserSwitcherSidebar')" @click="toggleFeatureFlag('experimentalUserPicker')"
> >
{{ $t('settings.feature_flags.user_switcher_sidebar') }} {{ $t('settings.feature_flags.user_picker') }}
</SettingsToggle> </SettingsToggle>
</MainContent> </MainContent>
</template> </template>