PeterCxy/misskey
1
0
Fork 0
forked from mirrors/misskey
Code Pull requests Wiki Activity

enhance: improve avatar decoration

Browse source
This commit is contained in:
syuilo 2023-10-22 13:02:24 +09:00
parent 69795e74bf
commit 4eaa02d25f
13 changed files with 230 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
locales/index.d.ts vendored
View file

@ -1147,6 +1147,10 @@ export interface Locale {
"privacyPolicyUrl": string;
"tosAndPrivacyPolicy": string;
"avatarDecorations": string;
"attach": string;
"detach": string;
"angle": string;
"flip": string;
"_announcement": {
"forExistingUsers": string;
"forExistingUsersDescription": string;

4
locales/ja-JP.yml
View file

@ -1144,6 +1144,10 @@ privacyPolicy: "プライバシーポリシー"
privacyPolicyUrl: "プライバシーポリシーURL"
tosAndPrivacyPolicy: "利用規約・プライバシーポリシー"
avatarDecorations: "アイコンデコレーション"
attach: "付ける"
detach: "外す"
angle: "角度"
flip: "反転"
_announcement:
forExistingUsers: "既存ユーザーのみ"

18
packages/backend/migration/1697941908548-avatar-decoration2.js Normal file
View file

@ -0,0 +1,18 @@
/*
* SPDX-FileCopyrightText: syuilo and other misskey contributors
* SPDX-License-Identifier: AGPL-3.0-only
*/
export class AvatarDecoration21697941908548 {
name = 'AvatarDecoration21697941908548'
async up(queryRunner) {
await queryRunner.query(`ALTER TABLE "user" DROP COLUMN "avatarDecorations"`);
await queryRunner.query(`ALTER TABLE "user" ADD "avatarDecorations" jsonb NOT NULL DEFAULT '[]'`);
}
async down(queryRunner) {
await queryRunner.query(`ALTER TABLE "user" DROP COLUMN "avatarDecorations"`);
await queryRunner.query(`ALTER TABLE "user" ADD "avatarDecorations" character varying(512) array NOT NULL DEFAULT '{}'`);
}
}

8
packages/backend/src/core/entities/UserEntityService.ts
View file

@ -338,9 +338,11 @@ export class UserEntityService implements OnModuleInit {
host: user.host,
avatarUrl: user.avatarUrl ?? this.getIdenticonUrl(user),
avatarBlurhash: user.avatarBlurhash,
avatarDecorations: user.avatarDecorations.length > 0 ? this.avatarDecorationService.getAll().then(decorations => decorations.filter(decoration => user.avatarDecorations.includes(decoration.id)).map(decoration => ({
id: decoration.id,
url: decoration.url,
avatarDecorations: user.avatarDecorations.length > 0 ? this.avatarDecorationService.getAll().then(decorations => user.avatarDecorations.filter(ud => decorations.some(d => d.id === ud.id)).map(ud => ({
id: ud.id,
angle: ud.angle || undefined,
flipH: ud.flipH || undefined,
url: decorations.find(d => d.id === ud.id)!.url,
}))) : [],
isBot: user.isBot,
isCat: user.isCat,

10
packages/backend/src/models/User.ts
View file

@ -138,10 +138,14 @@ export class MiUser {
})
public bannerBlurhash: string | null;
@Column('varchar', {
length: 512, array: true, default: '{}',
@Column('jsonb', {
default: [],
})
public avatarDecorations: string[];
public avatarDecorations: {
id: string;
angle: number;
flipH: boolean;
}[];
@Index()
@Column('varchar', {

8
packages/backend/src/models/json-schema/user.ts
View file

@ -54,6 +54,14 @@ export const packedUserLiteSchema = {
format: 'url',
nullable: false, optional: false,
},
angle: {
type: 'number',
nullable: false, optional: true,
},
flipH: {
type: 'boolean',
nullable: false, optional: true,
},
},
},
},

14
packages/backend/src/server/api/endpoints/i/update.ts
View file

@ -133,7 +133,13 @@ export const paramDef = {
lang: { type: 'string', enum: [null, ...Object.keys(langmap)] as string[], nullable: true },
avatarId: { type: 'string', format: 'misskey:id', nullable: true },
avatarDecorations: { type: 'array', maxItems: 1, items: {
type: 'string',
type: 'object',
properties: {
id: { type: 'string', format: 'misskey:id' },
angle: { type: 'number', nullable: true, maximum: 0.5, minimum: -0.5 },
flipH: { type: 'boolean', nullable: true },
},
required: ['id'],
} },
bannerId: { type: 'string', format: 'misskey:id', nullable: true },
fields: {
@ -309,7 +315,11 @@ export default class extends Endpoint<typeof meta, typeof paramDef> { // eslint-
.filter(d => d.roleIdsThatCanBeUsedThisDecoration.filter(roleId => allRoles.some(r => r.id === roleId)).length === 0 || myRoles.some(r => d.roleIdsThatCanBeUsedThisDecoration.includes(r.id)))
.map(d => d.id);
updates.avatarDecorations = ps.avatarDecorations.filter(id => decorationIds.includes(id));
updates.avatarDecorations = ps.avatarDecorations.filter(d => decorationIds.includes(d.id)).map(d => ({
id: d.id,
angle: d.angle ?? 0,
flipH: d.flipH ?? false,
}));
}
if (ps.pinnedPageId) {

5
packages/frontend/src/components/MkRange.vue
View file

@ -34,6 +34,7 @@ const props = withDefaults(defineProps<{
textConverter?: (value: number) => string,
showTicks?: boolean;
easing?: boolean;
continuousUpdate?: boolean;
}>(), {
step: 1,
textConverter: (v) => v.toString(),
@ -123,6 +124,10 @@ const onMousedown = (ev: MouseEvent | TouchEvent) => {
const pointerX = ev.touches && ev.touches.length > 0 ? ev.touches[0].clientX : ev.clientX;
const pointerPositionOnContainer = pointerX - (containerRect.left + (thumbWidth / 2));
rawValue.value = Math.min(1, Math.max(0, pointerPositionOnContainer / (containerEl.value!.offsetWidth - thumbWidth)));
if (props.continuousUpdate) {
emit('update:modelValue', finalValue.value);
}
};
let beforeValue = finalValue.value;

43
packages/frontend/src/components/global/MkAvatar.vue
View file

@ -23,7 +23,16 @@ SPDX-License-Identifier: AGPL-3.0-only
</div>
</div>
</div>
<img v-if="decoration || user.avatarDecorations.length > 0" :class="[$style.decoration]" :src="decoration ?? user.avatarDecorations[0].url" alt="">
<img
v-if="decoration || user.avatarDecorations.length > 0"
:class="[$style.decoration]"
:src="decoration?.url ?? user.avatarDecorations[0].url"
:style="{
rotate: getDecorationAngle(),
scale: getDecorationScale(),
}"
alt=""
>
</component>
</template>
@ -48,12 +57,18 @@ const props = withDefaults(defineProps<{
link?: boolean;
preview?: boolean;
indicator?: boolean;
decoration?: string;
decoration?: {
url: string;
angle?: number;
flipH?: boolean;
flipV?: boolean;
};
}>(), {
target: null,
link: false,
preview: false,
indicator: false,
decoration: undefined,
});
const emit = defineEmits<{
@ -73,6 +88,30 @@ function onClick(ev: MouseEvent): void {
emit('click', ev);
}
function getDecorationAngle() {
let angle;
if (props.decoration) {
angle = props.decoration.angle ?? 0;
} else if (props.user.avatarDecorations.length > 0) {
angle = props.user.avatarDecorations[0].angle ?? 0;
} else {
angle = 0;
}
return angle === 0 ? undefined : `${angle * 360}deg`;
}
function getDecorationScale() {
let scaleX;
if (props.decoration) {
scaleX = props.decoration.flipH ? -1 : 1;
} else if (props.user.avatarDecorations.length > 0) {
scaleX = props.user.avatarDecorations[0].flipH ? -1 : 1;
} else {
scaleX = 1;
}
return scaleX === 1 ? undefined : `${scaleX} 1`;
}
let color = $ref<string | undefined>();
watch(() => props.user.avatarBlurhash, () => {

114
packages/frontend/src/pages/settings/profile.avatar-decoration-dialog.vue Normal file
View file

@ -0,0 +1,114 @@
<!--
SPDX-FileCopyrightText: syuilo and other misskey contributors
SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
<MkModalWindow
ref="dialog"
:width="400"
:height="450"
@close="cancel"
@closed="emit('closed')"
>
<template #header>{{ i18n.ts.avatarDecorations }}</template>
<div>
<MkSpacer :marginMin="20" :marginMax="28">
<div style="text-align: center;">
<div :class="$style.name">{{ decoration.name }}</div>
<MkAvatar style="width: 64px; height: 64px; margin-bottom: 20px;" :user="$i" :decoration="{ url: decoration.url, angle, flipH }"/>
</div>
<div class="_gaps_s">
<MkRange v-model="angle" continuousUpdate :min="-0.5" :max="0.5" :step="0.025" :textConverter="(v) => `${Math.floor(v * 360)}°`">
<template #label>{{ i18n.ts.angle }}</template>
</MkRange>
<MkSwitch v-model="flipH">
<template #label>{{ i18n.ts.flip }}</template>
</MkSwitch>
</div>
</MkSpacer>
<div :class="$style.footer" class="_buttonsCenter">
<MkButton v-if="using" primary rounded @click="attach"><i class="ti ti-check"></i> {{ i18n.ts.update }}</MkButton>
<MkButton v-if="using" rounded @click="detach"><i class="ti ti-x"></i> {{ i18n.ts.detach }}</MkButton>
<MkButton v-else primary rounded @click="attach"><i class="ti ti-check"></i> {{ i18n.ts.attach }}</MkButton>
</div>
</div>
</MkModalWindow>
</template>
<script lang="ts" setup>
import { shallowRef, ref, computed } from 'vue';
import MkButton from '@/components/MkButton.vue';
import MkModalWindow from '@/components/MkModalWindow.vue';
import MkSwitch from '@/components/MkSwitch.vue';
import { i18n } from '@/i18n.js';
import * as os from '@/os.js';
import MkFolder from '@/components/MkFolder.vue';
import MkInfo from '@/components/MkInfo.vue';
import MkRange from '@/components/MkRange.vue';
import { $i } from '@/account.js';
const props = defineProps<{
decoration: {
id: string;
url: string;
}
}>();
const emit = defineEmits<{
(ev: 'closed'): void;
}>();
const dialog = shallowRef<InstanceType<typeof MkModalWindow>>();
const using = computed(() => $i.avatarDecorations.some(x => x.id === props.decoration.id));
const angle = ref(using.value ? $i.avatarDecorations.find(x => x.id === props.decoration.id).angle ?? 0 : 0);
const flipH = ref(using.value ? $i.avatarDecorations.find(x => x.id === props.decoration.id).flipH ?? false : false);
function cancel() {
dialog.value.close();
}
async function attach() {
const decoration = {
id: props.decoration.id,
angle: angle.value,
flipH: flipH.value,
};
await os.apiWithDialog('i/update', {
avatarDecorations: [decoration],
});
$i.avatarDecorations = [decoration];
dialog.value.close();
}
async function detach() {
await os.apiWithDialog('i/update', {
avatarDecorations: [],
});
$i.avatarDecorations = [];
dialog.value.close();
}
</script>
<style lang="scss" module>
.name {
position: relative;
z-index: 10;
font-weight: bold;
margin-bottom: 28px;
}
.footer {
position: sticky;
bottom: 0;
left: 0;
padding: 12px;
border-top: solid 0.5px var(--divider);
-webkit-backdrop-filter: var(--blur, blur(15px));
backdrop-filter: var(--blur, blur(15px));
}
</style>

20
packages/frontend/src/pages/settings/profile.vue
View file

@ -92,10 +92,10 @@ SPDX-License-Identifier: AGPL-3.0-only
v-for="avatarDecoration in avatarDecorations"
:key="avatarDecoration.id"
:class="[$style.avatarDecoration, { [$style.avatarDecorationActive]: $i.avatarDecorations.some(x => x.id === avatarDecoration.id) }]"
@click="toggleDecoration(avatarDecoration)"
@click="openDecoration(avatarDecoration)"
>
<div :class="$style.avatarDecorationName"><MkCondensedLine :minScale="2 / 3">{{ avatarDecoration.name }}</MkCondensedLine></div>
<MkAvatar style="width: 64px; height: 64px;" :user="$i" :decoration="avatarDecoration.url"/>
<MkAvatar style="width: 64px; height: 64px;" :user="$i" :decoration="{ url: avatarDecoration.url }"/>
</div>
</div>
</MkFolder>
@ -266,18 +266,10 @@ function changeBanner(ev) {
});
}
function toggleDecoration(avatarDecoration) {
if ($i.avatarDecorations.some(x => x.id === avatarDecoration.id)) {
os.apiWithDialog('i/update', {
avatarDecorations: [],
});
$i.avatarDecorations = [];
} else {
os.apiWithDialog('i/update', {
avatarDecorations: [avatarDecoration.id],
});
$i.avatarDecorations.push(avatarDecoration);
}
function openDecoration(avatarDecoration) {
os.popup(defineAsyncComponent(() => import('./profile.avatar-decoration-dialog.vue')), {
decoration: avatarDecoration,
}, {}, 'closed');
}
const headerActions = $computed(() => []);

6
packages/misskey-js/etc/misskey-js.api.md
View file

@ -2996,6 +2996,8 @@ type UserLite = {
avatarDecorations: {
id: ID;
url: string;
angle?: number;
flipH?: boolean;
}[];
emojis: {
name: string;
@ -3021,8 +3023,8 @@ type UserSorting = '+follower' | '-follower' | '+createdAt' | '-createdAt' | '+u
// src/api.types.ts:16:32 - (ae-forgotten-export) The symbol "TODO" needs to be exported by the entry point index.d.ts
// src/api.types.ts:18:25 - (ae-forgotten-export) The symbol "NoParams" needs to be exported by the entry point index.d.ts
// src/api.types.ts:633:18 - (ae-forgotten-export) The symbol "ShowUserReq" needs to be exported by the entry point index.d.ts
// src/entities.ts:113:2 - (ae-forgotten-export) The symbol "notificationTypes_2" needs to be exported by the entry point index.d.ts
// src/entities.ts:609:2 - (ae-forgotten-export) The symbol "ModerationLogPayloads" needs to be exported by the entry point index.d.ts
// src/entities.ts:115:2 - (ae-forgotten-export) The symbol "notificationTypes_2" needs to be exported by the entry point index.d.ts
// src/entities.ts:611:2 - (ae-forgotten-export) The symbol "ModerationLogPayloads" needs to be exported by the entry point index.d.ts
// src/streaming.types.ts:33:4 - (ae-forgotten-export) The symbol "FIXME" needs to be exported by the entry point index.d.ts
// (No @packageDocumentation comment for this package)

2
packages/misskey-js/src/entities.ts
View file

@ -19,6 +19,8 @@ export type UserLite = {
avatarDecorations: {
id: ID;
url: string;
angle?: number;
flipH?: boolean;
}[];
emojis: {
name: string;