zio
/
elk
2
0
Fork 0
Code Packages Releases 2 Activity

feat: rework user picker (#568)

zio/stable
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
components/user/UserDropdown.vue 100644
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>

31
components/user/UserPicker.vue
View File

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

8
composables/featureFlags.ts
View File

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

47
layouts/default.vue
View File

@ -6,10 +6,7 @@ const wideLayout = computed(() => route.meta.wideLayout ?? false)
<template>
<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>
<UserPicker />
</div>
<main flex w-full mxa lg:max-w-80rem :class="isHydrated.value && showUserSwitcherSidebar ? 'user-switcher-sidebar' : ''">
<main flex w-full mxa lg:max-w-80rem>
<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">
<slot name="left">
@ -21,24 +18,22 @@ const wideLayout = computed(() => route.meta.wideLayout ?? false)
</div>
<div v-if="isMastoInitialised" flex flex-col>
<UserSignInEntry v-if="!currentUser" sm:hidden />
<div v-if="currentUser" p6 pb8 w-full flex="~" items-center justify-between>
<NuxtLink
hidden lg:block
rounded-full text-start w-full
hover:bg-active cursor-pointer transition-100
:to="getAccountRoute(currentUser.account)"
>
<AccountInfo :account="currentUser.account" md:break-words />
</NuxtLink>
<VDropdown :distance="0" placement="bottom-end">
<button btn-action-icon :aria-label="$t('action.switch_account')">
<div hidden lg:block i-ri:more-2-line />
<AccountAvatar lg:hidden :account="currentUser.account" w-9 h-9 />
</button>
<template #popper="{ hide }">
<UserSwitcher @click="hide" />
</template>
</VDropdown>
<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
hidden lg:block
rounded-full text-start w-full
hover:bg-active cursor-pointer transition-100
:to="getAccountRoute(currentUser.account)"
>
<AccountInfo :account="currentUser.account" md:break-words />
</NuxtLink>
<UserDropdown />
</div>
</div>
<UserDropdown lg:hidden />
</div>
</div>
</div>
@ -68,11 +63,3 @@ const wideLayout = computed(() => route.meta.wideLayout ?? false)
<ModalContainer />
</div>
</template>
<style scoped>
@media (max-width: 1500px) and (min-width: 1024px) {
.user-switcher-sidebar {
padding-left: min(5rem, calc((1500px - 100vw) / 2));
}
}
</style>

2
locales/ar-EG.json
View File

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

2
locales/cs-CZ.json
View File

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

2
locales/de-DE.json
View File

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

2
locales/en-US.json
View File

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

2
locales/es-ES.json
View File

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

2
locales/fr-FR.json
View File

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

2
locales/ja-JP.json
View File

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

6
pages/settings/preferences/index.vue
View File

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