forked from misskey-dev/misskey
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
enhance(frontend): 同じ種類のデコレーションを複数付けられるように
- Loading branch information
1 parent
fefe665
commit 222be32
Showing
5 changed files
with
240 additions
and
96 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
67 changes: 67 additions & 0 deletions
67
packages/frontend/src/pages/settings/profile.avatar-decoration.decoration.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,67 @@ | ||
| <!-- | ||
| SPDX-FileCopyrightText: syuilo and other misskey contributors | ||
| SPDX-License-Identifier: AGPL-3.0-only | ||
| --> | ||
|
|
||
| <template> | ||
| <div | ||
| :class="[$style.root, { [$style.active]: active }]" | ||
| @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 }]" 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> | ||
|
|
||
| <script lang="ts" setup> | ||
| import { } from 'vue'; | ||
| import { $i } from '@/account.js'; | ||
| const props = defineProps<{ | ||
| active?: boolean; | ||
| decoration: { | ||
| id: string; | ||
| url: string; | ||
| name: string; | ||
| roleIdsThatCanBeUsedThisDecoration: string[]; | ||
| }; | ||
| angle?: number; | ||
| flipH?: boolean; | ||
| }>(); | ||
| const emit = defineEmits<{ | ||
| (ev: 'click'): void; | ||
| }>(); | ||
| </script> | ||
|
|
||
| <style lang="scss" module> | ||
| .root { | ||
| cursor: pointer; | ||
| padding: 16px 16px 28px 16px; | ||
| border: solid 2px var(--divider); | ||
| border-radius: 8px; | ||
| text-align: center; | ||
| font-size: 90%; | ||
| overflow: clip; | ||
| contain: content; | ||
| } | ||
| .active { | ||
| background-color: var(--accentedBg); | ||
| border-color: var(--accent); | ||
| } | ||
| .name { | ||
| position: relative; | ||
| z-index: 10; | ||
| font-weight: bold; | ||
| margin-bottom: 20px; | ||
| } | ||
| .lock { | ||
| position: absolute; | ||
| bottom: 12px; | ||
| right: 12px; | ||
| } | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
125 changes: 125 additions & 0 deletions
125
packages/frontend/src/pages/settings/profile.avatar-decoration.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,125 @@ | ||
| <!-- | ||
| SPDX-FileCopyrightText: syuilo and other misskey contributors | ||
| SPDX-License-Identifier: AGPL-3.0-only | ||
| --> | ||
|
|
||
| <template> | ||
| <div v-if="!loading" class="_gaps"> | ||
| <MkInfo>{{ i18n.t('_profile.avatarDecorationMax', { max: $i?.policies.avatarDecorationLimit }) }} ({{ i18n.t('remainingN', { n: $i?.policies.avatarDecorationLimit - $i.avatarDecorations.length }) }})</MkInfo> | ||
|
|
||
| <div v-if="$i.avatarDecorations.length > 0" v-panel :class="$style.current" class="_gaps_s"> | ||
| <div>{{ i18n.ts.inUse }}</div> | ||
|
|
||
| <div :class="$style.decorations"> | ||
| <XDecoration | ||
| v-for="(avatarDecoration, i) in $i.avatarDecorations" | ||
| :decoration="avatarDecorations.find(d => d.id === avatarDecoration.id)" | ||
| :angle="avatarDecoration.angle" | ||
| :flipH="avatarDecoration.flipH" | ||
| :active="true" | ||
| @click="openDecoration(avatarDecoration, i)" | ||
| /> | ||
| </div> | ||
|
|
||
| <MkButton danger @click="detachAllDecorations">{{ i18n.ts.detachAll }}</MkButton> | ||
| </div> | ||
|
|
||
| <div :class="$style.decorations"> | ||
| <XDecoration | ||
| v-for="avatarDecoration in avatarDecorations" | ||
| :key="avatarDecoration.id" | ||
| :decoration="avatarDecoration" | ||
| @click="openDecoration(avatarDecoration)" | ||
| /> | ||
| </div> | ||
| </div> | ||
| <div v-else> | ||
| <MkLoading/> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script lang="ts" setup> | ||
| import { ref, defineAsyncComponent } from 'vue'; | ||
| import * as Misskey from 'misskey-js'; | ||
| import XDecoration from './profile.avatar-decoration.decoration.vue'; | ||
| import MkButton from '@/components/MkButton.vue'; | ||
| import * as os from '@/os.js'; | ||
| import { i18n } from '@/i18n.js'; | ||
| import { $i } from '@/account.js'; | ||
| import MkInfo from '@/components/MkInfo.vue'; | ||
|
|
||
| const loading = ref(true); | ||
| const avatarDecorations = ref<Misskey.entities.GetAvatarDecorationsResponse>([]); | ||
|
|
||
| os.api('get-avatar-decorations').then(_avatarDecorations => { | ||
| avatarDecorations.value = _avatarDecorations; | ||
| loading.value = false; | ||
| }); | ||
|
|
||
| function openDecoration(avatarDecoration, index?: number) { | ||
| os.popup(defineAsyncComponent(() => import('./profile.avatar-decoration.dialog.vue')), { | ||
| decoration: avatarDecoration, | ||
| usingIndex: index, | ||
| }, { | ||
| 'attach': async (payload) => { | ||
| const decoration = { | ||
| id: avatarDecoration.id, | ||
| angle: payload.angle, | ||
| flipH: payload.flipH, | ||
| }; | ||
| const update = [...$i.avatarDecorations, decoration]; | ||
| await os.apiWithDialog('i/update', { | ||
| avatarDecorations: update, | ||
| }); | ||
| $i.avatarDecorations = update; | ||
| }, | ||
| 'update': async (payload) => { | ||
| const decoration = { | ||
| id: avatarDecoration.id, | ||
| angle: payload.angle, | ||
| flipH: payload.flipH, | ||
| }; | ||
| const update = [...$i.avatarDecorations]; | ||
| update[index] = decoration; | ||
| await os.apiWithDialog('i/update', { | ||
| avatarDecorations: update, | ||
| }); | ||
| $i.avatarDecorations = update; | ||
| }, | ||
| 'detach': async () => { | ||
| const update = [...$i.avatarDecorations]; | ||
| update.splice(index, 1); | ||
| await os.apiWithDialog('i/update', { | ||
| avatarDecorations: update, | ||
| }); | ||
| $i.avatarDecorations = update; | ||
| }, | ||
| }, '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 = []; | ||
| }); | ||
| } | ||
| </script> | ||
|
|
||
| <style lang="scss" module> | ||
| .current { | ||
| padding: 16px; | ||
| border-radius: var(--radius); | ||
| } | ||
|
|
||
| .decorations { | ||
| display: grid; | ||
| grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); | ||
| grid-gap: 12px; | ||
| } | ||
| </style> |
Oops, something went wrong.