enhance: アイコンデコレーションを複数設定できるように
This commit is contained in:
parent
daea5a39ad
commit
5472f4b934
|
@ -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
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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: "全てのノート"
|
||||||
|
|
|
@ -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)),
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -145,6 +145,7 @@ export const packedRoleSchema = {
|
||||||
userEachUserListsLimit: rolePolicyValue,
|
userEachUserListsLimit: rolePolicyValue,
|
||||||
canManageAvatarDecorations: rolePolicyValue,
|
canManageAvatarDecorations: rolePolicyValue,
|
||||||
canUseTranslator: rolePolicyValue,
|
canUseTranslator: rolePolicyValue,
|
||||||
|
avatarDecorationLimit: rolePolicyValue,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
usersCount: {
|
usersCount: {
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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,
|
||||||
|
|
|
@ -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,
|
||||||
|
|
|
@ -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: () => {
|
||||||
|
|
|
@ -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';
|
||||||
|
|
||||||
|
|
|
@ -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: () => {
|
||||||
|
|
|
@ -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`;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -81,6 +81,7 @@ export const ROLE_POLICIES = [
|
||||||
'userListLimit',
|
'userListLimit',
|
||||||
'userEachUserListsLimit',
|
'userEachUserListsLimit',
|
||||||
'rateLimitFactor',
|
'rateLimitFactor',
|
||||||
|
'avatarDecorationLimit',
|
||||||
] as const;
|
] as const;
|
||||||
|
|
||||||
// なんか動かない
|
// なんか動かない
|
||||||
|
|
|
@ -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';
|
||||||
|
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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();
|
||||||
}
|
}
|
||||||
|
|
|
@ -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(() => []);
|
||||||
|
|
Loading…
Reference in New Issue