feat: rework avatar on avatar (#676)

This commit is contained in:
patak 2023-01-01 20:15:51 +01:00 committed by GitHub
parent 9d6801ba46
commit 016da2e8c0
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
12 changed files with 11 additions and 30 deletions

View file

@ -70,9 +70,7 @@ const filter = $computed(() => filterResult?.filter)
const filterPhrase = $computed(() => filter?.phrase || (filter as any)?.title) const filterPhrase = $computed(() => filter?.phrase || (filter as any)?.title)
const isFiltered = $computed(() => filterPhrase && (props.context ? filter?.context.includes(props.context) : false)) const isFiltered = $computed(() => filterPhrase && (props.context ? filter?.context.includes(props.context) : false))
const avatarOnAvatar = $(computedEager(() => useFeatureFlags().experimentalAvatarOnAvatar))
const collapseRebloggedBy = $computed(() => rebloggedBy?.id === status.account.id) const collapseRebloggedBy = $computed(() => rebloggedBy?.id === status.account.id)
const showRebloggedByAvatarOnAvatar = $computed(() => rebloggedBy && avatarOnAvatar && rebloggedBy.id !== status.account.id)
// Collapse ReplyingTo badge if it is a self-reply (thread) // Collapse ReplyingTo badge if it is a self-reply (thread)
const collapseReplyingTo = $computed(() => (!rebloggedBy || collapseRebloggedBy) && status.inReplyToAccountId === status.account.id) const collapseReplyingTo = $computed(() => (!rebloggedBy || collapseRebloggedBy) && status.inReplyToAccountId === status.account.id)
@ -90,7 +88,7 @@ const isDM = $computed(() => status.visibility === 'direct')
v-if="filter?.filterAction !== 'hide'" v-if="filter?.filterAction !== 'hide'"
:id="`status-${status.id}`" :id="`status-${status.id}`"
ref="el" ref="el"
relative flex flex-col gap-1 px-4 pt-1 relative flex flex-col gap-1 pl-3 pr-4 pt-1
class="pb-1.5" class="pb-1.5"
transition-100 transition-100
:class="{ 'hover:bg-active': hover, 'border-t border-base': newer && !directReply }" :class="{ 'hover:bg-active': hover, 'border-t border-base': newer && !directReply }"
@ -102,25 +100,25 @@ const isDM = $computed(() => status.visibility === 'direct')
> >
<div flex justify-between> <div flex justify-between>
<slot name="meta"> <slot name="meta">
<div v-if="rebloggedBy && !collapseRebloggedBy" text-secondary text-sm ws-nowrap flex="~" gap-1 items-center py1 bg-base> <div v-if="rebloggedBy && !collapseRebloggedBy" relative text-secondary ws-nowrap flex="~" items-center pt1 pb0.5 px-1px bg-base>
<div i-ri:repeat-fill me-1 text-primary /> <div i-ri:repeat-fill me-46px text-primary w-16px h-16px />
<AccountInlineInfo font-bold :account="rebloggedBy" :avatar="!avatarOnAvatar" /> <div absolute top-1 ms-24px w-32px h-32px rounded-full>
<AccountAvatar :account="rebloggedBy" />
</div>
<AccountInlineInfo font-bold :account="rebloggedBy" :avatar="false" text-sm />
</div> </div>
<div v-else /> <div v-else />
</slot> </slot>
<StatusReplyingTo v-if="!directReply && !collapseReplyingTo" :status="status" :simplified="simplifyReplyingTo" :class="faded ? 'text-secondary-light' : ''" py1 /> <StatusReplyingTo v-if="!directReply && !collapseReplyingTo" :status="status" :simplified="simplifyReplyingTo" :class="faded ? 'text-secondary-light' : ''" pt1 />
</div> </div>
<div flex gap-3 :class="{ 'text-secondary': faded }"> <div flex gap-3 :class="{ 'text-secondary': faded }">
<div relative> <div z-2>
<div v-if="showRebloggedByAvatarOnAvatar" absolute top--3px inset-is--0.8 z--1 w-25px h-25px rounded-full> <div v-if="collapseRebloggedBy" absolute inset-is--0.8 w-5.5 h-5.5 rounded-full bg-base>
<AccountAvatar :account="rebloggedBy" />
</div>
<div v-else-if="collapseRebloggedBy" absolute inset-is--0.8 w-5.5 h-5.5 rounded-full bg-base>
<div i-ri:repeat-fill me-1 text-primary text-sm /> <div i-ri:repeat-fill me-1 text-primary text-sm />
</div> </div>
<AccountHoverWrapper :account="status.account"> <AccountHoverWrapper :account="status.account">
<NuxtLink :to="getAccountRoute(status.account)" rounded-full> <NuxtLink :to="getAccountRoute(status.account)" rounded-full>
<AccountBigAvatar :account="status.account" :class="showRebloggedByAvatarOnAvatar ? 'mt-11px ' : 'mt-3px'" /> <AccountBigAvatar :account="status.account" />
</NuxtLink> </NuxtLink>
</AccountHoverWrapper> </AccountHoverWrapper>
<div v-if="connectReply" w-full h-full flex justify-center> <div v-if="connectReply" w-full h-full flex justify-center>

View file

@ -2,7 +2,6 @@ import { STORAGE_KEY_FEATURE_FLAGS } from '~/constants'
export interface FeatureFlags { export interface FeatureFlags {
experimentalVirtualScroll: boolean experimentalVirtualScroll: boolean
experimentalAvatarOnAvatar: boolean
experimentalGitHubCards: boolean experimentalGitHubCards: boolean
experimentalUserPicker: boolean experimentalUserPicker: boolean
} }
@ -11,7 +10,6 @@ export type FeatureFlagsMap = Record<string, FeatureFlags>
export function getDefaultFeatureFlags(): FeatureFlags { export function getDefaultFeatureFlags(): FeatureFlags {
return { return {
experimentalVirtualScroll: false, experimentalVirtualScroll: false,
experimentalAvatarOnAvatar: true,
experimentalGitHubCards: true, experimentalGitHubCards: true,
experimentalUserPicker: true, experimentalUserPicker: true,
} }

View file

@ -217,7 +217,6 @@
"label": "بشأن Elk" "label": "بشأن Elk"
}, },
"feature_flags": { "feature_flags": {
"avatar_on_avatar": "الصورة الرمزية على الصورة الرمزية",
"github_cards": "GitHub بطاقات", "github_cards": "GitHub بطاقات",
"title": "الميزات التجريبية", "title": "الميزات التجريبية",
"user_picker": "الشريط الجانبي لمبدل المستخدم", "user_picker": "الشريط الجانبي لمبدل المستخدم",

View file

@ -146,7 +146,6 @@
}, },
"settings": { "settings": {
"feature_flags": { "feature_flags": {
"avatar_on_avatar": "Avatar on Avatar",
"github_cards": "GitHub Cards", "github_cards": "GitHub Cards",
"user_picker": "User Picker", "user_picker": "User Picker",
"virtual_scroll": "Virtual Scrolling" "virtual_scroll": "Virtual Scrolling"

View file

@ -149,7 +149,6 @@
}, },
"settings": { "settings": {
"feature_flags": { "feature_flags": {
"avatar_on_avatar": "Avatar auf Avatar",
"github_cards": "GitHub Cards", "github_cards": "GitHub Cards",
"user_picker": "User Picker", "user_picker": "User Picker",
"virtual_scroll": "Virtuelles Scrollen" "virtual_scroll": "Virtuelles Scrollen"

View file

@ -217,7 +217,6 @@
"label": "About" "label": "About"
}, },
"feature_flags": { "feature_flags": {
"avatar_on_avatar": "Avatar on Avatar",
"github_cards": "GitHub Cards", "github_cards": "GitHub Cards",
"title": "Experimental Features", "title": "Experimental Features",
"user_picker": "User Picker", "user_picker": "User Picker",

View file

@ -217,7 +217,6 @@
"label": "About" "label": "About"
}, },
"feature_flags": { "feature_flags": {
"avatar_on_avatar": "Avatar on Avatar",
"github_cards": "GitHub Cards", "github_cards": "GitHub Cards",
"title": "Experimental Features", "title": "Experimental Features",
"user_picker": "User Picker", "user_picker": "User Picker",

View file

@ -209,7 +209,6 @@
"label": "Acerca de" "label": "Acerca de"
}, },
"feature_flags": { "feature_flags": {
"avatar_on_avatar": "Avatar en Avatar",
"github_cards": "Tarjetas GitHub", "github_cards": "Tarjetas GitHub",
"title": "Características experimentales", "title": "Características experimentales",
"user_picker": "Selector de usuarios", "user_picker": "Selector de usuarios",

View file

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

View file

@ -217,7 +217,6 @@
"label": "关于" "label": "关于"
}, },
"feature_flags": { "feature_flags": {
"avatar_on_avatar": "头像堆叠",
"github_cards": "GitHub 卡片", "github_cards": "GitHub 卡片",
"title": "实验功能", "title": "实验功能",
"user_picker": "用户选择器", "user_picker": "用户选择器",

View file

@ -217,7 +217,6 @@
"label": "關於" "label": "關於"
}, },
"feature_flags": { "feature_flags": {
"avatar_on_avatar": "頭像堆疊",
"github_cards": "GitHub 卡片", "github_cards": "GitHub 卡片",
"title": "實驗功能", "title": "實驗功能",
"user_picker": "用戶選擇器", "user_picker": "用戶選擇器",

View file

@ -15,12 +15,6 @@
> >
{{ $t('settings.feature_flags.virtual_scroll') }} {{ $t('settings.feature_flags.virtual_scroll') }}
</SettingsToggleItem> </SettingsToggleItem>
<SettingsToggleItem
:checked="currentUserFeatureFlags.experimentalAvatarOnAvatar"
@click="toggleFeatureFlag('experimentalAvatarOnAvatar')"
>
{{ $t('settings.feature_flags.avatar_on_avatar') }}
</SettingsToggleItem>
<SettingsToggleItem <SettingsToggleItem
:checked="currentUserFeatureFlags.experimentalGitHubCards" :checked="currentUserFeatureFlags.experimentalGitHubCards"
@click="toggleFeatureFlag('experimentalGitHubCards')" @click="toggleFeatureFlag('experimentalGitHubCards')"