merge: Feat: Implement "Show Below Avatar" for Avatar Decorations (!645)

View MR for information: https://activitypub.software/TransFem-org/Sharkey/-/merge_requests/645

Approved-by: dakkar <dakkar@thenautilus.net>
Approved-by: Marie <github@yuugi.dev>

locales/en-US.yml

@@ -1279,6 +1279,7 @@ detach: "Remove"
 detachAll: "Remove All"
 angle: "Angle"
 flip: "Flip"
+showBelowAvatar: "Show Below Avatar"
 showAvatarDecorations: "Show avatar decorations"
 releaseToRefresh: "Release to refresh"
 refreshing: "Refreshing..."

locales/index.d.ts

@@ -5133,6 +5133,10 @@ export interface Locale extends ILocale {
      * 反転
      */
     "flip": string;
+    /**
+     * アイコンの後ろに表示
+     */
+    "showBelowAvatar": string;
     /**
      * アイコンのデコレーションを表示
      */

locales/ja-JP.yml

@@ -1279,6 +1279,7 @@ detach: "外す"
 detachAll: "全て外す"
 angle: "角度"
 flip: "反転"
+showBelowAvatar: "アイコンの後ろに表示"
 showAvatarDecorations: "アイコンのデコレーションを表示"
 releaseToRefresh: "離してリロード"
 refreshing: "リロード中"

packages/backend/src/core/entities/UserEntityService.ts

@@ -525,6 +525,7 @@ export class UserEntityService implements OnModuleInit {
 				flipH: ud.flipH || undefined,
 				offsetX: ud.offsetX || undefined,
 				offsetY: ud.offsetY || undefined,
+				showBelow: ud.showBelow || undefined,
 				url: decorations.find(d => d.id === ud.id)!.url,
 			}))) : [],
 			isBot: user.isBot,

packages/backend/src/models/User.ts

@@ -170,6 +170,7 @@ export class MiUser {
 		flipH?: boolean;
 		offsetX?: number;
 		offsetY?: number;
+		showBelow?: boolean;
 	}[];
 
 	@Index()

packages/backend/src/models/json-schema/user.ts

@@ -104,6 +104,10 @@ export const packedUserLiteSchema = {
 						type: 'number',
 						nullable: false, optional: true,
 					},
+					showBelow: {
+						type: 'boolean',
+						nullable: false, optional: true,
+					},
 				},
 			},
 		},

packages/backend/src/server/api/endpoints/i/update.ts

@@ -159,6 +159,7 @@ export const paramDef = {
 				flipH: { type: 'boolean', nullable: true },
 				offsetX: { type: 'number', nullable: true, maximum: 0.25, minimum: -0.25 },
 				offsetY: { type: 'number', nullable: true, maximum: 0.25, minimum: -0.25 },
+				showBelow: { type: 'boolean', nullable: true },
 			},
 			required: ['id'],
 		} },
@@ -417,6 +418,7 @@ export default class extends Endpoint<typeof meta, typeof paramDef> { // eslint-
 					flipH: d.flipH ?? false,
 					offsetX: d.offsetX ?? 0,
 					offsetY: d.offsetY ?? 0,
+					showBelow: d.showBelow ?? false,
 				}));
 			}
 

packages/frontend/src/components/global/MkAvatar.vue

@@ -32,6 +32,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 				rotate: getDecorationAngle(decoration),
 				scale: getDecorationScale(decoration),
 				translate: getDecorationOffset(decoration),
+				zIndex: getDecorationZIndex(decoration),
 			}"
 			alt=""
 		>
@@ -113,6 +114,10 @@ function getDecorationOffset(decoration: Omit<Misskey.entities.UserDetailed['ava
 	return offsetX === 0 && offsetY === 0 ? undefined : `${offsetX * 100}% ${offsetY * 100}%`;
 }
 
+function getDecorationZIndex(decoration: Omit<Misskey.entities.UserDetailed['avatarDecorations'][number], 'id'>) {
+	return decoration.showBelow ? '-1' : undefined;
+}
+
 const color = ref<string | undefined>();
 
 watch(() => props.user.avatarBlurhash, () => {
@@ -159,6 +164,7 @@ watch(() => props.user.avatarBlurhash, () => {
 	flex-shrink: 0;
 	border-radius: 100%; // sharkey: controlled by square avatars setting!
 	line-height: 16px;
+	z-index: 0; // sharkey: starts stacking context to help with showing decorations behind the avatar
 }
 
 .inner {

packages/frontend/src/pages/settings/avatar-decoration.decoration.vue

@@ -9,7 +9,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 	@click="emit('click')"
 >
 	<div :class="$style.name"><MkCondensedLine :minScale="0.5">{{ decoration.name }}</MkCondensedLine></div>
-	<MkAvatar style="width: 60px; height: 60px;" :user="$i" :decorations="[{ url: decoration.url, angle, flipH, offsetX, offsetY }]" forceShowDecoration/>
+	<MkAvatar style="width: 60px; height: 60px;" :user="$i" :decorations="[{ url: decoration.url, angle, flipH, offsetX, offsetY, showBelow }]" forceShowDecoration/>
 	<i v-if="decoration.roleIdsThatCanBeUsedThisDecoration.length > 0 && !$i.roles.some(r => decoration.roleIdsThatCanBeUsedThisDecoration.includes(r.id))" :class="$style.lock" class="ti ti-lock"></i>
 </div>
 </template>
@@ -32,6 +32,7 @@ const props = defineProps<{
 	flipH?: boolean;
 	offsetX?: number;
 	offsetY?: number;
+	showBelow?: boolean;
 }>();
 
 const emit = defineEmits<{

packages/frontend/src/pages/settings/avatar-decoration.dialog.vue

@@ -29,6 +29,9 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<MkRange v-model="offsetY" continuousUpdate :min="-0.25" :max="0.25" :step="0.025" :textConverter="(v) => `${Math.floor(v * 100)}%`">
 					<template #label>Y {{ i18n.ts.position }}</template>
 				</MkRange>
+				<MkSwitch v-model="showBelow">
+					<template #label>{{ i18n.ts.showBelowAvatar }}</template>
+				</MkSwitch>
 				<MkSwitch v-model="flipH">
 					<template #label>{{ i18n.ts.flip }}</template>
 				</MkSwitch>
@@ -71,12 +74,14 @@ const emit = defineEmits<{
 		flipH: boolean;
 		offsetX: number;
 		offsetY: number;
+		showBelow: boolean;
 	}): void;
 	(ev: 'update', payload: {
 		angle: number;
 		flipH: boolean;
 		offsetX: number;
 		offsetY: number;
+		showBelow: boolean;
 	}): void;
 	(ev: 'detach'): void;
 }>();
@@ -87,6 +92,7 @@ const angle = ref((props.usingIndex != null ? $i.avatarDecorations[props.usingIn
 const flipH = ref((props.usingIndex != null ? $i.avatarDecorations[props.usingIndex].flipH : null) ?? false);
 const offsetX = ref((props.usingIndex != null ? $i.avatarDecorations[props.usingIndex].offsetX : null) ?? 0);
 const offsetY = ref((props.usingIndex != null ? $i.avatarDecorations[props.usingIndex].offsetY : null) ?? 0);
+const showBelow = ref((props.usingIndex != null ? $i.avatarDecorations[props.usingIndex].showBelow : null) ?? false);
 
 const decorationsForPreview = computed(() => {
 	const decoration = {
@@ -96,6 +102,7 @@ const decorationsForPreview = computed(() => {
 		flipH: flipH.value,
 		offsetX: offsetX.value,
 		offsetY: offsetY.value,
+		showBelow: showBelow.value,
 	};
 	const decorations = [...$i.avatarDecorations];
 	if (props.usingIndex != null) {
@@ -116,6 +123,7 @@ async function update() {
 		flipH: flipH.value,
 		offsetX: offsetX.value,
 		offsetY: offsetY.value,
+		showBelow: showBelow.value,
 	});
 	dialog.value.close();
 }
@@ -126,6 +134,7 @@ async function attach() {
 		flipH: flipH.value,
 		offsetX: offsetX.value,
 		offsetY: offsetY.value,
+		showBelow: showBelow.value,
 	});
 	dialog.value.close();
 }

packages/frontend/src/pages/settings/avatar-decoration.vue

@@ -21,6 +21,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 					:flipH="avatarDecoration.flipH"
 					:offsetX="avatarDecoration.offsetX"
 					:offsetY="avatarDecoration.offsetY"
+					:showBelow="avatarDecoration.showBelow"
 					:active="true"
 					@click="openDecoration(avatarDecoration, i)"
 				/>
@@ -78,6 +79,7 @@ function openDecoration(avatarDecoration, index?: number) {
 				flipH: payload.flipH,
 				offsetX: payload.offsetX,
 				offsetY: payload.offsetY,
+				showBelow: payload.showBelow,
 			};
 			const update = [...$i.avatarDecorations, decoration];
 			await os.apiWithDialog('i/update', {
@@ -92,6 +94,7 @@ function openDecoration(avatarDecoration, index?: number) {
 				flipH: payload.flipH,
 				offsetX: payload.offsetX,
 				offsetY: payload.offsetY,
+				showBelow: payload.showBelow,
 			};
 			const update = [...$i.avatarDecorations];
 			update[index] = decoration;

packages/misskey-js/src/autogen/types.ts

@@ -3814,6 +3814,7 @@ export type components = {
           url: string;
           offsetX?: number;
           offsetY?: number;
+          showBelow?: boolean;
         }[];
       /** @default false */
       isAdmin?: boolean;
@@ -20227,6 +20228,7 @@ export type operations = {
               flipH?: boolean | null;
               offsetX?: number | null;
               offsetY?: number | null;
+              showBelow?: boolean | null;
             })[];
           /** Format: misskey:id */
           bannerId?: string | null;