enhance: アイコンデコレーションを複数設定できるように

This commit is contained in:
syuilo 2023-12-13 16:56:19 +09:00
parent daea5a39ad
commit 5472f4b934
17 changed files with 115 additions and 62 deletions

View file

@ -19,6 +19,7 @@
- Feat: メールアドレスの認証にverifymail.ioを使えるように (cherry-pick from https://github.com/TeamNijimiss/misskey/commit/971ba07a44550f68d2ba31c62066db2d43a0caed) - Feat: メールアドレスの認証にverifymail.ioを使えるように (cherry-pick from https://github.com/TeamNijimiss/misskey/commit/971ba07a44550f68d2ba31c62066db2d43a0caed)
- Feat: モデレーターがユーザーのアイコンもしくはバナー画像を未設定状態にできる機能を追加 (cherry-pick from https://github.com/TeamNijimiss/misskey/commit/e0eb5a752f6e5616d6312bb7c9790302f9dbff83) - Feat: モデレーターがユーザーのアイコンもしくはバナー画像を未設定状態にできる機能を追加 (cherry-pick from https://github.com/TeamNijimiss/misskey/commit/e0eb5a752f6e5616d6312bb7c9790302f9dbff83)
- Feat: TL上からートが見えなくなるワードミュートであるハードミュートを追加 - Feat: TL上からートが見えなくなるワードミュートであるハードミュートを追加
- Enhance: アイコンデコレーションを複数設定できるように
- Fix: MFM `$[unixtime ]` に不正な値を入力した際に発生する各種エラーを修正 - Fix: MFM `$[unixtime ]` に不正な値を入力した際に発生する各種エラーを修正
### Client ### Client

5
locales/index.d.ts vendored
View file

@ -264,6 +264,7 @@ export interface Locale {
"removeAreYouSure": string; "removeAreYouSure": string;
"deleteAreYouSure": string; "deleteAreYouSure": string;
"resetAreYouSure": string; "resetAreYouSure": string;
"areYouSure": string;
"saved": string; "saved": string;
"messaging": string; "messaging": string;
"upload": string; "upload": string;
@ -1160,6 +1161,7 @@ export interface Locale {
"avatarDecorations": string; "avatarDecorations": string;
"attach": string; "attach": string;
"detach": string; "detach": string;
"detachAll": string;
"angle": string; "angle": string;
"flip": string; "flip": string;
"showAvatarDecorations": string; "showAvatarDecorations": string;
@ -1173,6 +1175,7 @@ export interface Locale {
"doReaction": string; "doReaction": string;
"code": string; "code": string;
"reloadRequiredToApplySettings": string; "reloadRequiredToApplySettings": string;
"remainingN": string;
"_announcement": { "_announcement": {
"forExistingUsers": string; "forExistingUsers": string;
"forExistingUsersDescription": string; "forExistingUsersDescription": string;
@ -1701,6 +1704,7 @@ export interface Locale {
"canHideAds": string; "canHideAds": string;
"canSearchNotes": string; "canSearchNotes": string;
"canUseTranslator": string; "canUseTranslator": string;
"avatarDecorationLimit": string;
}; };
"_condition": { "_condition": {
"isLocal": string; "isLocal": string;
@ -2181,6 +2185,7 @@ export interface Locale {
"changeAvatar": string; "changeAvatar": string;
"changeBanner": string; "changeBanner": string;
"verifiedLinkDescription": string; "verifiedLinkDescription": string;
"avatarDecorationMax": string;
}; };
"_exportOrImport": { "_exportOrImport": {
"allNotes": string; "allNotes": string;

View file

@ -261,6 +261,7 @@ removed: "削除しました"
removeAreYouSure: "「{x}」を削除しますか?" removeAreYouSure: "「{x}」を削除しますか?"
deleteAreYouSure: "「{x}」を削除しますか?" deleteAreYouSure: "「{x}」を削除しますか?"
resetAreYouSure: "リセットしますか?" resetAreYouSure: "リセットしますか?"
areYouSure: "よろしいですか?"
saved: "保存しました" saved: "保存しました"
messaging: "チャット" messaging: "チャット"
upload: "アップロード" upload: "アップロード"
@ -1157,6 +1158,7 @@ tosAndPrivacyPolicy: "利用規約・プライバシーポリシー"
avatarDecorations: "アイコンデコレーション" avatarDecorations: "アイコンデコレーション"
attach: "付ける" attach: "付ける"
detach: "外す" detach: "外す"
detachAll: "全て外す"
angle: "角度" angle: "角度"
flip: "反転" flip: "反転"
showAvatarDecorations: "アイコンのデコレーションを表示" showAvatarDecorations: "アイコンのデコレーションを表示"
@ -1170,6 +1172,7 @@ cwNotationRequired: "「内容を隠す」がオンの場合は注釈の記述
doReaction: "リアクションする" doReaction: "リアクションする"
code: "コード" code: "コード"
reloadRequiredToApplySettings: "設定の反映にはリロードが必要です。" reloadRequiredToApplySettings: "設定の反映にはリロードが必要です。"
remainingN: "残り: {n}"
_announcement: _announcement:
forExistingUsers: "既存ユーザーのみ" forExistingUsers: "既存ユーザーのみ"
@ -1610,6 +1613,7 @@ _role:
canHideAds: "広告の非表示" canHideAds: "広告の非表示"
canSearchNotes: "ノート検索の利用" canSearchNotes: "ノート検索の利用"
canUseTranslator: "翻訳機能の利用" canUseTranslator: "翻訳機能の利用"
avatarDecorationLimit: "アイコンデコレーションの最大取付個数"
_condition: _condition:
isLocal: "ローカルユーザー" isLocal: "ローカルユーザー"
isRemote: "リモートユーザー" isRemote: "リモートユーザー"
@ -2084,6 +2088,7 @@ _profile:
changeAvatar: "アイコン画像を変更" changeAvatar: "アイコン画像を変更"
changeBanner: "バナー画像を変更" changeBanner: "バナー画像を変更"
verifiedLinkDescription: "内容にURLを設定すると、リンク先のWebサイトに自分のプロフィールへのリンクが含まれている場合に所有者確認済みアイコンを表示させることができます。" verifiedLinkDescription: "内容にURLを設定すると、リンク先のWebサイトに自分のプロフィールへのリンクが含まれている場合に所有者確認済みアイコンを表示させることができます。"
avatarDecorationMax: "最大{max}つまでデコレーションを付けられます。"
_exportOrImport: _exportOrImport:
allNotes: "全てのノート" allNotes: "全てのノート"

View file

@ -47,6 +47,7 @@ export type RolePolicies = {
userListLimit: number; userListLimit: number;
userEachUserListsLimit: number; userEachUserListsLimit: number;
rateLimitFactor: number; rateLimitFactor: number;
avatarDecorationLimit: number;
}; };
export const DEFAULT_POLICIES: RolePolicies = { export const DEFAULT_POLICIES: RolePolicies = {
@ -73,6 +74,7 @@ export const DEFAULT_POLICIES: RolePolicies = {
userListLimit: 10, userListLimit: 10,
userEachUserListsLimit: 50, userEachUserListsLimit: 50,
rateLimitFactor: 1, rateLimitFactor: 1,
avatarDecorationLimit: 1,
}; };
@Injectable() @Injectable()
@ -326,6 +328,7 @@ export class RoleService implements OnApplicationShutdown {
userListLimit: calc('userListLimit', vs => Math.max(...vs)), userListLimit: calc('userListLimit', vs => Math.max(...vs)),
userEachUserListsLimit: calc('userEachUserListsLimit', vs => Math.max(...vs)), userEachUserListsLimit: calc('userEachUserListsLimit', vs => Math.max(...vs)),
rateLimitFactor: calc('rateLimitFactor', vs => Math.max(...vs)), rateLimitFactor: calc('rateLimitFactor', vs => Math.max(...vs)),
avatarDecorationLimit: calc('avatarDecorationLimit', vs => Math.max(...vs)),
}; };
} }

View file

@ -145,6 +145,7 @@ export const packedRoleSchema = {
userEachUserListsLimit: rolePolicyValue, userEachUserListsLimit: rolePolicyValue,
canManageAvatarDecorations: rolePolicyValue, canManageAvatarDecorations: rolePolicyValue,
canUseTranslator: rolePolicyValue, canUseTranslator: rolePolicyValue,
avatarDecorationLimit: rolePolicyValue,
}, },
}, },
usersCount: { usersCount: {

View file

@ -672,6 +672,10 @@ export const packedMeDetailedOnlySchema = {
type: 'number', type: 'number',
nullable: false, optional: false, nullable: false, optional: false,
}, },
avatarDecorationLimit: {
type: 'number',
nullable: false, optional: false,
},
}, },
}, },
//#region secrets //#region secrets

View file

@ -125,7 +125,7 @@ export const meta = {
const muteWords = { type: 'array', items: { oneOf: [ const muteWords = { type: 'array', items: { oneOf: [
{ type: 'array', items: { type: 'string' } }, { type: 'array', items: { type: 'string' } },
{ type: 'string' } { type: 'string' },
] } } as const; ] } } as const;
export const paramDef = { export const paramDef = {
@ -137,7 +137,7 @@ export const paramDef = {
birthday: { ...birthdaySchema, nullable: true }, birthday: { ...birthdaySchema, nullable: true },
lang: { type: 'string', enum: [null, ...Object.keys(langmap)] as string[], nullable: true }, lang: { type: 'string', enum: [null, ...Object.keys(langmap)] as string[], nullable: true },
avatarId: { type: 'string', format: 'misskey:id', nullable: true }, avatarId: { type: 'string', format: 'misskey:id', nullable: true },
avatarDecorations: { type: 'array', maxItems: 1, items: { avatarDecorations: { type: 'array', maxItems: 16, items: {
type: 'object', type: 'object',
properties: { properties: {
id: { type: 'string', format: 'misskey:id' }, id: { type: 'string', format: 'misskey:id' },
@ -251,7 +251,7 @@ export default class extends Endpoint<typeof meta, typeof paramDef> { // eslint-
function validateMuteWordRegex(mutedWords: (string[] | string)[]) { function validateMuteWordRegex(mutedWords: (string[] | string)[]) {
for (const mutedWord of mutedWords) { for (const mutedWord of mutedWords) {
if (typeof mutedWord !== "string") continue; if (typeof mutedWord !== 'string') continue;
const regexp = mutedWord.match(/^\/(.+)\/(.*)$/); const regexp = mutedWord.match(/^\/(.+)\/(.*)$/);
if (!regexp) throw new ApiError(meta.errors.invalidRegexp); if (!regexp) throw new ApiError(meta.errors.invalidRegexp);
@ -329,12 +329,14 @@ export default class extends Endpoint<typeof meta, typeof paramDef> { // eslint-
if (ps.avatarDecorations) { if (ps.avatarDecorations) {
const decorations = await this.avatarDecorationService.getAll(true); const decorations = await this.avatarDecorationService.getAll(true);
const myRoles = await this.roleService.getUserRoles(user.id); const [myRoles, myPolicies] = await Promise.all([this.roleService.getUserRoles(user.id), this.roleService.getUserPolicies(user.id)]);
const allRoles = await this.roleService.getRoles(); const allRoles = await this.roleService.getRoles();
const decorationIds = decorations const decorationIds = decorations
.filter(d => d.roleIdsThatCanBeUsedThisDecoration.filter(roleId => allRoles.some(r => r.id === roleId)).length === 0 || myRoles.some(r => d.roleIdsThatCanBeUsedThisDecoration.includes(r.id))) .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); .map(d => d.id);
if (ps.avatarDecorations.length > myPolicies.avatarDecorationLimit) throw new ApiError(meta.errors.restrictedByRole);
updates.avatarDecorations = ps.avatarDecorations.filter(d => decorationIds.includes(d.id)).map(d => ({ updates.avatarDecorations = ps.avatarDecorations.filter(d => decorationIds.includes(d.id)).map(d => ({
id: d.id, id: d.id,
angle: d.angle ?? 0, angle: d.angle ?? 0,

View file

@ -284,7 +284,7 @@ export async function openAccountMenu(opts: {
text: i18n.ts.profile, text: i18n.ts.profile,
to: `/@${ $i.username }`, to: `/@${ $i.username }`,
avatar: $i, avatar: $i,
}, null, ...(opts.includeCurrentAccount ? [createItem($i)] : []), ...accountItemPromises, { }, { type: 'divider' }, ...(opts.includeCurrentAccount ? [createItem($i)] : []), ...accountItemPromises, {
type: 'parent' as const, type: 'parent' as const,
icon: 'ti ti-plus', icon: 'ti ti-plus',
text: i18n.ts.addAccount, text: i18n.ts.addAccount,

View file

@ -39,6 +39,7 @@ import { i18n } from '@/i18n.js';
import { defaultStore } from '@/store.js'; import { defaultStore } from '@/store.js';
import { claimAchievement } from '@/scripts/achievements.js'; import { claimAchievement } from '@/scripts/achievements.js';
import copyToClipboard from '@/scripts/copy-to-clipboard.js'; import copyToClipboard from '@/scripts/copy-to-clipboard.js';
import { MenuItem } from '@/types/menu.js';
const props = withDefaults(defineProps<{ const props = withDefaults(defineProps<{
folder: Misskey.entities.DriveFolder; folder: Misskey.entities.DriveFolder;
@ -250,7 +251,7 @@ function setAsUploadFolder() {
} }
function onContextmenu(ev: MouseEvent) { function onContextmenu(ev: MouseEvent) {
let menu; let menu: MenuItem[];
menu = [{ menu = [{
text: i18n.ts.openInWindow, text: i18n.ts.openInWindow,
icon: 'ti ti-app-window', icon: 'ti ti-app-window',
@ -260,18 +261,18 @@ function onContextmenu(ev: MouseEvent) {
}, { }, {
}, 'closed'); }, 'closed');
}, },
}, null, { }, { type: 'divider' }, {
text: i18n.ts.rename, text: i18n.ts.rename,
icon: 'ti ti-forms', icon: 'ti ti-forms',
action: rename, action: rename,
}, null, { }, { type: 'divider' }, {
text: i18n.ts.delete, text: i18n.ts.delete,
icon: 'ti ti-trash', icon: 'ti ti-trash',
danger: true, danger: true,
action: deleteFolder, action: deleteFolder,
}]; }];
if (defaultStore.state.devMode) { if (defaultStore.state.devMode) {
menu = menu.concat([null, { menu = menu.concat([{ type: 'divider' }, {
icon: 'ti ti-id', icon: 'ti ti-id',
text: i18n.ts.copyFolderId, text: i18n.ts.copyFolderId,
action: () => { action: () => {

View file

@ -56,7 +56,7 @@ SPDX-License-Identifier: AGPL-3.0-only
import { onBeforeUnmount, onMounted, provide, shallowRef, ref } from 'vue'; import { onBeforeUnmount, onMounted, provide, shallowRef, ref } from 'vue';
import contains from '@/scripts/contains.js'; import contains from '@/scripts/contains.js';
import * as os from '@/os.js'; import * as os from '@/os.js';
import { MenuItem } from '@/types/menu'; import { MenuItem } from '@/types/menu.js';
import { i18n } from '@/i18n.js'; import { i18n } from '@/i18n.js';
import { defaultStore } from '@/store.js'; import { defaultStore } from '@/store.js';

View file

@ -57,7 +57,7 @@ function onContextmenu(ev) {
action: () => { action: () => {
router.push(props.to, 'forcePage'); router.push(props.to, 'forcePage');
}, },
}, null, { }, { type: 'divider' }, {
icon: 'ti ti-external-link', icon: 'ti ti-external-link',
text: i18n.ts.openInNewTab, text: i18n.ts.openInNewTab,
action: () => { action: () => {

View file

@ -23,16 +23,18 @@ SPDX-License-Identifier: AGPL-3.0-only
</div> </div>
</div> </div>
</div> </div>
<img <template v-if="showDecoration">
v-if="showDecoration && (decoration || user.avatarDecorations.length > 0)" <img
:class="[$style.decoration]" v-for="decoration in decorations ?? user.avatarDecorations"
:src="decoration?.url ?? user.avatarDecorations[0].url" :class="[$style.decoration]"
:style="{ :src="decoration.url"
rotate: getDecorationAngle(), :style="{
scale: getDecorationScale(), rotate: getDecorationAngle(decoration),
}" scale: getDecorationScale(decoration),
alt="" }"
> alt=""
>
</template>
</component> </component>
</template> </template>
@ -57,19 +59,14 @@ const props = withDefaults(defineProps<{
link?: boolean; link?: boolean;
preview?: boolean; preview?: boolean;
indicator?: boolean; indicator?: boolean;
decoration?: { decorations?: Misskey.entities.UserDetailed['avatarDecorations'][number][];
url: string;
angle?: number;
flipH?: boolean;
flipV?: boolean;
};
forceShowDecoration?: boolean; forceShowDecoration?: boolean;
}>(), { }>(), {
target: null, target: null,
link: false, link: false,
preview: false, preview: false,
indicator: false, indicator: false,
decoration: undefined, decorations: undefined,
forceShowDecoration: false, forceShowDecoration: false,
}); });
@ -92,27 +89,13 @@ function onClick(ev: MouseEvent): void {
emit('click', ev); emit('click', ev);
} }
function getDecorationAngle() { function getDecorationAngle(decoration: Misskey.entities.UserDetailed['avatarDecorations'][number]) {
let angle; const angle = decoration.angle ?? 0;
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`; return angle === 0 ? undefined : `${angle * 360}deg`;
} }
function getDecorationScale() { function getDecorationScale(decoration: Misskey.entities.UserDetailed['avatarDecorations'][number]) {
let scaleX; const scaleX = decoration.flipH ? -1 : 1;
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`; return scaleX === 1 ? undefined : `${scaleX} 1`;
} }

View file

@ -81,6 +81,7 @@ export const ROLE_POLICIES = [
'userListLimit', 'userListLimit',
'userEachUserListsLimit', 'userEachUserListsLimit',
'rateLimitFactor', 'rateLimitFactor',
'avatarDecorationLimit',
] as const; ] as const;
// なんか動かない // なんか動かない

View file

@ -531,6 +531,26 @@ SPDX-License-Identifier: AGPL-3.0-only
</MkRange> </MkRange>
</div> </div>
</MkFolder> </MkFolder>
<MkFolder v-if="matchQuery([i18n.ts._role._options.avatarDecorationLimit, 'avatarDecorationLimit'])">
<template #label>{{ i18n.ts._role._options.avatarDecorationLimit }}</template>
<template #suffix>
<span v-if="role.policies.avatarDecorationLimit.useDefault" :class="$style.useDefaultLabel">{{ i18n.ts._role.useBaseValue }}</span>
<span v-else>{{ role.policies.avatarDecorationLimit.value }}</span>
<span :class="$style.priorityIndicator"><i :class="getPriorityIcon(role.policies.avatarDecorationLimit)"></i></span>
</template>
<div class="_gaps">
<MkSwitch v-model="role.policies.avatarDecorationLimit.useDefault" :readonly="readonly">
<template #label>{{ i18n.ts._role.useBaseValue }}</template>
</MkSwitch>
<MkInput v-model="role.policies.avatarDecorationLimit.value" type="number" :min="0">
<template #label>{{ i18n.ts._role._options.avatarDecorationLimit }}</template>
</MkInput>
<MkRange v-model="role.policies.avatarDecorationLimit.priority" :min="0" :max="2" :step="1" easing :textConverter="(v) => v === 0 ? i18n.ts._role._priority.low : v === 1 ? i18n.ts._role._priority.middle : v === 2 ? i18n.ts._role._priority.high : ''">
<template #label>{{ i18n.ts._role.priority }}</template>
</MkRange>
</div>
</MkFolder>
</div> </div>
</FormSlot> </FormSlot>
</div> </div>
@ -549,7 +569,7 @@ import MkSwitch from '@/components/MkSwitch.vue';
import MkRange from '@/components/MkRange.vue'; import MkRange from '@/components/MkRange.vue';
import FormSlot from '@/components/form/slot.vue'; import FormSlot from '@/components/form/slot.vue';
import { i18n } from '@/i18n.js'; import { i18n } from '@/i18n.js';
import { ROLE_POLICIES } from '@/const'; import { ROLE_POLICIES } from '@/const.js';
import { instance } from '@/instance.js'; import { instance } from '@/instance.js';
import { deepClone } from '@/scripts/clone.js'; import { deepClone } from '@/scripts/clone.js';

View file

@ -192,6 +192,13 @@ SPDX-License-Identifier: AGPL-3.0-only
</MkSwitch> </MkSwitch>
</MkFolder> </MkFolder>
<MkFolder v-if="matchQuery([i18n.ts._role._options.avatarDecorationLimit, 'avatarDecorationLimit'])">
<template #label>{{ i18n.ts._role._options.avatarDecorationLimit }}</template>
<template #suffix>{{ policies.avatarDecorationLimit }}</template>
<MkInput v-model="policies.avatarDecorationLimit" type="number" :min="0">
</MkInput>
</MkFolder>
<MkButton primary rounded @click="updateBaseRole">{{ i18n.ts.save }}</MkButton> <MkButton primary rounded @click="updateBaseRole">{{ i18n.ts.save }}</MkButton>
</div> </div>
</MkFolder> </MkFolder>

View file

@ -17,7 +17,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkSpacer :marginMin="20" :marginMax="28"> <MkSpacer :marginMin="20" :marginMax="28">
<div style="text-align: center;"> <div style="text-align: center;">
<div :class="$style.name">{{ decoration.name }}</div> <div :class="$style.name">{{ decoration.name }}</div>
<MkAvatar style="width: 64px; height: 64px; margin-bottom: 20px;" :user="$i" :decoration="{ url: decoration.url, angle, flipH }" forceShowDecoration/> <MkAvatar style="width: 64px; height: 64px; margin-bottom: 20px;" :user="$i" :decorations="[...$i.avatarDecorations, { url: decoration.url, angle, flipH }]" forceShowDecoration/>
</div> </div>
<div class="_gaps_s"> <div class="_gaps_s">
<MkRange v-model="angle" continuousUpdate :min="-0.5" :max="0.5" :step="0.025" :textConverter="(v) => `${Math.floor(v * 360)}°`"> <MkRange v-model="angle" continuousUpdate :min="-0.5" :max="0.5" :step="0.025" :textConverter="(v) => `${Math.floor(v * 360)}°`">
@ -54,6 +54,7 @@ const props = defineProps<{
decoration: { decoration: {
id: string; id: string;
url: string; url: string;
name: string;
} }
}>(); }>();
@ -77,18 +78,18 @@ async function attach() {
flipH: flipH.value, flipH: flipH.value,
}; };
await os.apiWithDialog('i/update', { await os.apiWithDialog('i/update', {
avatarDecorations: [decoration], avatarDecorations: [...$i.avatarDecorations, decoration],
}); });
$i.avatarDecorations = [decoration]; $i.avatarDecorations = [...$i.avatarDecorations, decoration];
dialog.value.close(); dialog.value.close();
} }
async function detach() { async function detach() {
await os.apiWithDialog('i/update', { await os.apiWithDialog('i/update', {
avatarDecorations: [], avatarDecorations: $i.avatarDecorations.filter(x => x.id !== props.decoration.id),
}); });
$i.avatarDecorations = []; $i.avatarDecorations = $i.avatarDecorations.filter(x => x.id !== props.decoration.id);
dialog.value.close(); dialog.value.close();
} }

View file

@ -87,16 +87,22 @@ SPDX-License-Identifier: AGPL-3.0-only
<template #icon><i class="ti ti-sparkles"></i></template> <template #icon><i class="ti ti-sparkles"></i></template>
<template #label>{{ i18n.ts.avatarDecorations }}</template> <template #label>{{ i18n.ts.avatarDecorations }}</template>
<div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); grid-gap: 12px;"> <div class="_gaps">
<div <MkInfo>{{ i18n.t('_profile.avatarDecorationMax', { max: $i?.policies.avatarDecorationLimit }) }} ({{ i18n.t('remainingN', { n: $i?.policies.avatarDecorationLimit - $i.avatarDecorations.length }) }})</MkInfo>
v-for="avatarDecoration in avatarDecorations"
:key="avatarDecoration.id" <MkButton v-if="$i.avatarDecorations.length > 0" danger @click="detachAllDecorations">{{ i18n.ts.detachAll }}</MkButton>
:class="[$style.avatarDecoration, { [$style.avatarDecorationActive]: $i.avatarDecorations.some(x => x.id === avatarDecoration.id) }]"
@click="openDecoration(avatarDecoration)" <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); grid-gap: 12px;">
> <div
<div :class="$style.avatarDecorationName"><MkCondensedLine :minScale="0.5">{{ avatarDecoration.name }}</MkCondensedLine></div> v-for="avatarDecoration in avatarDecorations"
<MkAvatar style="width: 60px; height: 60px;" :user="$i" :decoration="{ url: avatarDecoration.url }" forceShowDecoration/> :key="avatarDecoration.id"
<i v-if="avatarDecoration.roleIdsThatCanBeUsedThisDecoration.length > 0 && !$i.roles.some(r => avatarDecoration.roleIdsThatCanBeUsedThisDecoration.includes(r.id))" :class="$style.avatarDecorationLock" class="ti ti-lock"></i> :class="[$style.avatarDecoration, { [$style.avatarDecorationActive]: $i.avatarDecorations.some(x => x.id === avatarDecoration.id) }]"
@click="openDecoration(avatarDecoration)"
>
<div :class="$style.avatarDecorationName"><MkCondensedLine :minScale="0.5">{{ avatarDecoration.name }}</MkCondensedLine></div>
<MkAvatar style="width: 60px; height: 60px;" :user="$i" :decorations="[{ url: avatarDecoration.url }]" forceShowDecoration/>
<i v-if="avatarDecoration.roleIdsThatCanBeUsedThisDecoration.length > 0 && !$i.roles.some(r => avatarDecoration.roleIdsThatCanBeUsedThisDecoration.includes(r.id))" :class="$style.avatarDecorationLock" class="ti ti-lock"></i>
</div>
</div> </div>
</div> </div>
</MkFolder> </MkFolder>
@ -273,6 +279,19 @@ function openDecoration(avatarDecoration) {
}, {}, 'closed'); }, {}, 'closed');
} }
function detachAllDecorations() {
os.confirm({
type: 'warning',
text: i18n.ts.areYouSure,
}).then(async ({ canceled }) => {
if (canceled) return;
await os.apiWithDialog('i/update', {
avatarDecorations: [],
});
$i.avatarDecorations = [];
});
}
const headerActions = computed(() => []); const headerActions = computed(() => []);
const headerTabs = computed(() => []); const headerTabs = computed(() => []);