feat: rework avatar on avatar (#676)

zio/stable
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 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 showRebloggedByAvatarOnAvatar = $computed(() => rebloggedBy && avatarOnAvatar && rebloggedBy.id !== status.account.id)
// Collapse ReplyingTo badge if it is a self-reply (thread)
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'"
:id="`status-${status.id}`"
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"
transition-100
: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>
<slot name="meta">
<div v-if="rebloggedBy && !collapseRebloggedBy" text-secondary text-sm ws-nowrap flex="~" gap-1 items-center py1 bg-base>
<div i-ri:repeat-fill me-1 text-primary />
<AccountInlineInfo font-bold :account="rebloggedBy" :avatar="!avatarOnAvatar" />
<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-46px text-primary w-16px h-16px />
<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 v-else />
</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 flex gap-3 :class="{ 'text-secondary': faded }">
<div relative>
<div v-if="showRebloggedByAvatarOnAvatar" absolute top--3px inset-is--0.8 z--1 w-25px h-25px rounded-full>
<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 z-2>
<div v-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>
<AccountHoverWrapper :account="status.account">
<NuxtLink :to="getAccountRoute(status.account)" rounded-full>
<AccountBigAvatar :account="status.account" :class="showRebloggedByAvatarOnAvatar ? 'mt-11px ' : 'mt-3px'" />
<AccountBigAvatar :account="status.account" />
</NuxtLink>
</AccountHoverWrapper>
<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 {
experimentalVirtualScroll: boolean
experimentalAvatarOnAvatar: boolean
experimentalGitHubCards: boolean
experimentalUserPicker: boolean
}
@ -11,7 +10,6 @@ export type FeatureFlagsMap = Record<string, FeatureFlags>
export function getDefaultFeatureFlags(): FeatureFlags {
return {
experimentalVirtualScroll: false,
experimentalAvatarOnAvatar: true,
experimentalGitHubCards: true,
experimentalUserPicker: true,
}

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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