oscar-surf/misskey
oscar-surf/misskey
0
0
Fork 0
Code Issues Activity

enhance(frontend): tweak avatar decoration setting ui

Browse source
This commit is contained in:
syuilo 2023-12-16 17:37:50 +09:00
parent c167f20643
commit 776eea736a
7 changed files with 68 additions and 43 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -5,12 +5,17 @@ SPDX-License-Identifier: AGPL-3.0-only
<template>
<div class="_gaps_m">
<div :class="$style.avatarAndBanner" :style="{ backgroundImage: $i.bannerUrl ? `url(${ $i.bannerUrl })` : null }">
<div class="_panel">
<div :class="$style.banner" :style="{ backgroundImage: $i.bannerUrl ? `url(${ $i.bannerUrl })` : null }">
<MkButton primary rounded :class="$style.bannerEdit" @click="changeBanner">{{ i18n.ts._profile.changeBanner }}</MkButton>
</div>
<div :class="$style.avatarContainer">
<MkAvatar :class="$style.avatar" :user="$i" forceShowDecoration @click="changeAvatar"/>
<MkButton primary rounded @click="changeAvatar">{{ i18n.ts._profile.changeAvatar }}</MkButton>
<div class="_buttonsCenter">
<MkButton primary rounded @click="changeAvatar">{{ i18n.ts._profile.changeAvatar }}</MkButton>
<MkButton primary rounded link to="/settings/avatar-decoration">{{ i18n.ts.decorate }} <i class="ti ti-sparkles"></i></MkButton>
</div>
</div>
<MkButton primary rounded :class="$style.bannerEdit" @click="changeBanner">{{ i18n.ts._profile.changeBanner }}</MkButton>
</div>
<MkInput v-model="profile.name" :max="30" manualSave :mfmAutocomplete="['emoji']">
@ -83,13 +88,6 @@ SPDX-License-Identifier: AGPL-3.0-only
<template #caption>{{ i18n.ts._profile.metadataDescription }}</template>
</FormSlot>
<MkFolder>
<template #icon><i class="ti ti-sparkles"></i></template>
<template #label>{{ i18n.ts.avatarDecorations }}</template>
<XAvatarDecoration/>
</MkFolder>
<MkFolder>
<template #label>{{ i18n.ts.advancedSettings }}</template>
@ -264,19 +262,19 @@ definePageMetadata({
</script>
<style lang="scss" module>
.avatarAndBanner {
.banner {
position: relative;
height: 130px;
background-size: cover;
background-position: center;
border: solid 1px var(--divider);
border-radius: 10px;
border-bottom: solid 1px var(--divider);
overflow: clip;
}
.avatarContainer {
display: inline-block;
margin-top: -50px;
padding-bottom: 16px;
text-align: center;
padding: 16px;
}
.avatar {