From 28aa99b2737fd3d66f8c438477c96aa94b0059ed Mon Sep 17 00:00:00 2001 From: CenTdemeern1 Date: Wed, 2 Oct 2024 23:49:30 +0200 Subject: [PATCH 1/5] Implement "Show Below Avatar" for Avatar Decorations --- locales/en-US.yml | 1 + .../src/core/entities/UserEntityService.ts | 1 + packages/backend/src/models/User.ts | 1 + .../backend/src/models/json-schema/user.ts | 4 +++ .../src/server/api/endpoints/i/update.ts | 2 ++ .../src/components/global/MkAvatar.vue | 32 +++++++++++-------- .../settings/avatar-decoration.decoration.vue | 3 +- .../settings/avatar-decoration.dialog.vue | 9 ++++++ .../src/pages/settings/avatar-decoration.vue | 3 ++ 9 files changed, 42 insertions(+), 14 deletions(-) diff --git a/locales/en-US.yml b/locales/en-US.yml index 6d24bb5b41..2d3c5c53b6 100644 --- a/locales/en-US.yml +++ b/locales/en-US.yml @@ -1277,6 +1277,7 @@ detach: "Remove" detachAll: "Remove All" angle: "Angle" flip: "Flip" +showBelowAvatar: "Show Below Avatar" showAvatarDecorations: "Show avatar decorations" releaseToRefresh: "Release to refresh" refreshing: "Refreshing..." diff --git a/packages/backend/src/core/entities/UserEntityService.ts b/packages/backend/src/core/entities/UserEntityService.ts index 2b1c4d5c63..40830f86b4 100644 --- a/packages/backend/src/core/entities/UserEntityService.ts +++ b/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, diff --git a/packages/backend/src/models/User.ts b/packages/backend/src/models/User.ts index b0910133c9..cbebd0102d 100644 --- a/packages/backend/src/models/User.ts +++ b/packages/backend/src/models/User.ts @@ -170,6 +170,7 @@ export class MiUser { flipH?: boolean; offsetX?: number; offsetY?: number; + showBelow?: boolean; }[]; @Index() diff --git a/packages/backend/src/models/json-schema/user.ts b/packages/backend/src/models/json-schema/user.ts index 33a3efd453..249b9bba38 100644 --- a/packages/backend/src/models/json-schema/user.ts +++ b/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, + }, }, }, }, diff --git a/packages/backend/src/server/api/endpoints/i/update.ts b/packages/backend/src/server/api/endpoints/i/update.ts index 6cc22e7994..f9b8061249 100644 --- a/packages/backend/src/server/api/endpoints/i/update.ts +++ b/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 { // eslint- flipH: d.flipH ?? false, offsetX: d.offsetX ?? 0, offsetY: d.offsetY ?? 0, + showBelow: d.showBelow ?? false, })); } diff --git a/packages/frontend/src/components/global/MkAvatar.vue b/packages/frontend/src/components/global/MkAvatar.vue index de62fe12a9..ce6985d907 100644 --- a/packages/frontend/src/components/global/MkAvatar.vue +++ b/packages/frontend/src/components/global/MkAvatar.vue @@ -7,6 +7,20 @@ SPDX-License-Identifier: AGPL-3.0-only +
@@ -23,19 +37,6 @@ SPDX-License-Identifier: AGPL-3.0-only
- @@ -113,6 +114,11 @@ function getDecorationOffset(decoration: Omit) { + const zIndex = decoration.showBelow ? 0 : 1; + return zIndex === 1 ? undefined : `${zIndex}`; +} + const color = ref(); watch(() => props.user.avatarBlurhash, () => { diff --git a/packages/frontend/src/pages/settings/avatar-decoration.decoration.vue b/packages/frontend/src/pages/settings/avatar-decoration.decoration.vue index 0767fa7864..9f7852a71d 100644 --- a/packages/frontend/src/pages/settings/avatar-decoration.decoration.vue +++ b/packages/frontend/src/pages/settings/avatar-decoration.decoration.vue @@ -9,7 +9,7 @@ SPDX-License-Identifier: AGPL-3.0-only @click="emit('click')" >
{{ decoration.name }}
- + @@ -32,6 +32,7 @@ const props = defineProps<{ flipH?: boolean; offsetX?: number; offsetY?: number; + showBelow?: boolean; }>(); const emit = defineEmits<{ diff --git a/packages/frontend/src/pages/settings/avatar-decoration.dialog.vue b/packages/frontend/src/pages/settings/avatar-decoration.dialog.vue index ce1d4e48d8..400b365ca6 100644 --- a/packages/frontend/src/pages/settings/avatar-decoration.dialog.vue +++ b/packages/frontend/src/pages/settings/avatar-decoration.dialog.vue @@ -29,6 +29,9 @@ SPDX-License-Identifier: AGPL-3.0-only + + + @@ -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(); } diff --git a/packages/frontend/src/pages/settings/avatar-decoration.vue b/packages/frontend/src/pages/settings/avatar-decoration.vue index 77229d3349..5324a6b7f7 100644 --- a/packages/frontend/src/pages/settings/avatar-decoration.vue +++ b/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; From e43c58a9555b6a241455a11f7671d0e72c37bdfd Mon Sep 17 00:00:00 2001 From: CenTdemeern1 Date: Thu, 3 Oct 2024 16:55:24 +0200 Subject: [PATCH 2/5] Simplify the getDecorationZIndex function --- packages/frontend/src/components/global/MkAvatar.vue | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/frontend/src/components/global/MkAvatar.vue b/packages/frontend/src/components/global/MkAvatar.vue index ce6985d907..e9df7083e3 100644 --- a/packages/frontend/src/components/global/MkAvatar.vue +++ b/packages/frontend/src/components/global/MkAvatar.vue @@ -115,8 +115,7 @@ function getDecorationOffset(decoration: Omit) { - const zIndex = decoration.showBelow ? 0 : 1; - return zIndex === 1 ? undefined : `${zIndex}`; + return decoration.showBelow ? '0' : undefined; } const color = ref(); From cb264dae75d94151e9b2a95aca48dde1e45a9fbb Mon Sep 17 00:00:00 2001 From: CenTdemeern1 Date: Thu, 3 Oct 2024 19:12:10 +0200 Subject: [PATCH 3/5] Use negative z-index to position decorations behind the avatar Co-authored-by: dakkar --- .../src/components/global/MkAvatar.vue | 31 ++++++++++--------- 1 file changed, 16 insertions(+), 15 deletions(-) diff --git a/packages/frontend/src/components/global/MkAvatar.vue b/packages/frontend/src/components/global/MkAvatar.vue index e9df7083e3..4a01d3f32d 100644 --- a/packages/frontend/src/components/global/MkAvatar.vue +++ b/packages/frontend/src/components/global/MkAvatar.vue @@ -7,20 +7,6 @@ SPDX-License-Identifier: AGPL-3.0-only -
@@ -37,6 +23,20 @@ SPDX-License-Identifier: AGPL-3.0-only
+ @@ -115,7 +115,7 @@ function getDecorationOffset(decoration: Omit) { - return decoration.showBelow ? '0' : undefined; + return decoration.showBelow ? '-1' : undefined; } const color = ref(); @@ -164,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 { From 25e90f9c071fc6de07fb50f4adce96f7de1f354f Mon Sep 17 00:00:00 2001 From: CenTdemeern1 Date: Thu, 3 Oct 2024 19:29:38 +0200 Subject: [PATCH 4/5] Add JP localization for Show Below Avatar --- locales/index.d.ts | 4 ++++ locales/ja-JP.yml | 1 + 2 files changed, 5 insertions(+) diff --git a/locales/index.d.ts b/locales/index.d.ts index 177a3c8160..a543b37ecf 100644 --- a/locales/index.d.ts +++ b/locales/index.d.ts @@ -5125,6 +5125,10 @@ export interface Locale extends ILocale { * 反転 */ "flip": string; + /** + * アイコンの後ろに表示 + */ + "showBelowAvatar": string; /** * アイコンのデコレーションを表示 */ diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml index b4d47a449c..a3ff0045ee 100644 --- a/locales/ja-JP.yml +++ b/locales/ja-JP.yml @@ -1277,6 +1277,7 @@ detach: "外す" detachAll: "全て外す" angle: "角度" flip: "反転" +showBelowAvatar: "アイコンの後ろに表示" showAvatarDecorations: "アイコンのデコレーションを表示" releaseToRefresh: "離してリロード" refreshing: "リロード中" From 9b130b3390a86bec035c407c7b674f395902b0cd Mon Sep 17 00:00:00 2001 From: CenTdemeern1 Date: Thu, 3 Oct 2024 22:27:14 +0200 Subject: [PATCH 5/5] Update automatically generated API type definitions --- packages/misskey-js/src/autogen/apiClientJSDoc.ts | 2 +- packages/misskey-js/src/autogen/types.ts | 6 ++++-- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/packages/misskey-js/src/autogen/apiClientJSDoc.ts b/packages/misskey-js/src/autogen/apiClientJSDoc.ts index c13485621b..c3524bcda5 100644 --- a/packages/misskey-js/src/autogen/apiClientJSDoc.ts +++ b/packages/misskey-js/src/autogen/apiClientJSDoc.ts @@ -4258,7 +4258,7 @@ declare module '../api.js' { ): Promise>; /** - * Get Sharkey GH Sponsors + * Get Sharkey Sponsors * * **Credential required**: *No* */ diff --git a/packages/misskey-js/src/autogen/types.ts b/packages/misskey-js/src/autogen/types.ts index 562c498190..ecf6ba2290 100644 --- a/packages/misskey-js/src/autogen/types.ts +++ b/packages/misskey-js/src/autogen/types.ts @@ -3673,7 +3673,7 @@ export type paths = { '/sponsors': { /** * sponsors - * @description Get Sharkey GH Sponsors + * @description Get Sharkey Sponsors * * **Credential required**: *No* */ @@ -3814,6 +3814,7 @@ export type components = { url: string; offsetX?: number; offsetY?: number; + showBelow?: boolean; }[]; /** @default false */ isAdmin?: boolean; @@ -20224,6 +20225,7 @@ export type operations = { flipH?: boolean | null; offsetX?: number | null; offsetY?: number | null; + showBelow?: boolean | null; })[]; /** Format: misskey:id */ bannerId?: string | null; @@ -27988,7 +27990,7 @@ export type operations = { }; /** * sponsors - * @description Get Sharkey GH Sponsors + * @description Get Sharkey Sponsors * * **Credential required**: *No* */