Merge branch 'misskey-dev:develop' into feat/client-dev-mode
This commit is contained in:
@@ -94,7 +94,3 @@ definePageMetadata({
|
||||
icon: 'ti ti-plug',
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
|
@@ -1,11 +1,11 @@
|
||||
<template>
|
||||
<div class="_gaps_m">
|
||||
<div class="llvierxe" :style="{ backgroundImage: $i.bannerUrl ? `url(${ $i.bannerUrl })` : null }">
|
||||
<div class="avatar">
|
||||
<MkAvatar class="avatar" :user="$i" @click="changeAvatar"/>
|
||||
<MkButton primary rounded class="avatarEdit" @click="changeAvatar">{{ i18n.ts._profile.changeAvatar }}</MkButton>
|
||||
<div :class="$style.avatarAndBanner" :style="{ backgroundImage: $i.bannerUrl ? `url(${ $i.bannerUrl })` : null }">
|
||||
<div :class="$style.avatarContainer">
|
||||
<MkAvatar :class="$style.avatar" :user="$i" @click="changeAvatar"/>
|
||||
<MkButton primary rounded :class="$style.avatarEdit" @click="changeAvatar">{{ i18n.ts._profile.changeAvatar }}</MkButton>
|
||||
</div>
|
||||
<MkButton primary rounded class="bannerEdit" @click="changeBanner">{{ i18n.ts._profile.changeBanner }}</MkButton>
|
||||
<MkButton primary rounded :class="$style.bannerEdit" @click="changeBanner">{{ i18n.ts._profile.changeBanner }}</MkButton>
|
||||
</div>
|
||||
|
||||
<MkInput v-model="profile.name" :max="30" manual-save>
|
||||
@@ -248,36 +248,39 @@ definePageMetadata({
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.llvierxe {
|
||||
<style lang="scss" module>
|
||||
.avatarAndBanner {
|
||||
position: relative;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
border: solid 1px var(--divider);
|
||||
border-radius: 10px;
|
||||
overflow: clip;
|
||||
|
||||
> .avatar {
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
padding: 16px;
|
||||
|
||||
> .avatar {
|
||||
display: inline-block;
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
margin: 0 auto 16px auto;
|
||||
}
|
||||
}
|
||||
|
||||
> .bannerEdit {
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
right: 16px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style lang="scss" module>
|
||||
|
||||
.avatarContainer {
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
display: inline-block;
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
margin: 0 auto 16px auto;
|
||||
}
|
||||
|
||||
.avatarEdit {
|
||||
|
||||
}
|
||||
|
||||
.bannerEdit {
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
right: 16px;
|
||||
}
|
||||
|
||||
.metadataRoot {
|
||||
container-type: inline-size;
|
||||
}
|
||||
|
@@ -3,15 +3,15 @@
|
||||
<FromSlot>
|
||||
<template #label>{{ i18n.ts.reactionSettingDescription }}</template>
|
||||
<div v-panel style="border-radius: 6px;">
|
||||
<Sortable v-model="reactions" class="zoaiodol" :item-key="item => item" :animation="150" :delay="100" :delay-on-touch-only="true">
|
||||
<Sortable v-model="reactions" :class="$style.reactions" :item-key="item => item" :animation="150" :delay="100" :delay-on-touch-only="true">
|
||||
<template #item="{element}">
|
||||
<button class="_button item" @click="remove(element, $event)">
|
||||
<button class="_button" :class="$style.reactionsItem" @click="remove(element, $event)">
|
||||
<MkCustomEmoji v-if="element[0] === ':'" :name="element" :normal="true"/>
|
||||
<MkEmoji v-else :emoji="element" :normal="true"/>
|
||||
</button>
|
||||
</template>
|
||||
<template #footer>
|
||||
<button class="_button add" @click="chooseEmoji"><i class="ti ti-plus"></i></button>
|
||||
<button class="_button" :class="$style.reactionsAdd" @click="chooseEmoji"><i class="ti ti-plus"></i></button>
|
||||
</template>
|
||||
</Sortable>
|
||||
</div>
|
||||
@@ -135,20 +135,20 @@ definePageMetadata({
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.zoaiodol {
|
||||
<style lang="scss" module>
|
||||
.reactions {
|
||||
padding: 12px;
|
||||
font-size: 1.1em;
|
||||
}
|
||||
|
||||
> .item {
|
||||
display: inline-block;
|
||||
padding: 8px;
|
||||
cursor: move;
|
||||
}
|
||||
.reactionsItem {
|
||||
display: inline-block;
|
||||
padding: 8px;
|
||||
cursor: move;
|
||||
}
|
||||
|
||||
> .add {
|
||||
display: inline-block;
|
||||
padding: 8px;
|
||||
}
|
||||
.reactionsAdd {
|
||||
display: inline-block;
|
||||
padding: 8px;
|
||||
}
|
||||
</style>
|
||||
|
Reference in New Issue
Block a user