mirror of
https://github.com/danbulant/Nertivia-Client
synced 2026-06-24 17:11:43 +00:00
changed the way how avatars show
This commit is contained in:
parent
67502d7ea2
commit
a6d7ef79d5
8 changed files with 33 additions and 13 deletions
|
|
@ -2,13 +2,13 @@
|
||||||
<div
|
<div
|
||||||
class="member"
|
class="member"
|
||||||
@click="openUserInformation()"
|
@click="openUserInformation()"
|
||||||
@mouseover="hover = true"
|
@mouseover="mouseOverEvent"
|
||||||
@mouseleave="hover = false"
|
@mouseleave="hover = false"
|
||||||
@contextmenu.prevent="rightClickEvent"
|
@contextmenu.prevent="rightClickEvent"
|
||||||
>
|
>
|
||||||
<Profile-picture
|
<Profile-picture
|
||||||
class="avatar"
|
class="avatar"
|
||||||
:url="`${userAvatar}${hover ? '' : '?type=png'}`"
|
:url="`${userAvatar}${hover || !isGif ? '' : '?type=webp'}`"
|
||||||
size="30px"
|
size="30px"
|
||||||
:unique-i-d="user.uniqueID"
|
:unique-i-d="user.uniqueID"
|
||||||
:status="presense"
|
:status="presense"
|
||||||
|
|
@ -32,7 +32,8 @@ export default {
|
||||||
props: ["user", "avatar", "type", "member"],
|
props: ["user", "avatar", "type", "member"],
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
hover: false
|
hover: false,
|
||||||
|
isGif: false,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
|
|
@ -87,6 +88,9 @@ export default {
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
mounted() {
|
||||||
|
this.isGif = this.userAvatar.endsWith(".gif");
|
||||||
|
},
|
||||||
methods: {
|
methods: {
|
||||||
openUserInformation() {
|
openUserInformation() {
|
||||||
this.$store.dispatch("setUserInformationPopout", this.user.uniqueID);
|
this.$store.dispatch("setUserInformationPopout", this.user.uniqueID);
|
||||||
|
|
@ -100,6 +104,11 @@ export default {
|
||||||
x,
|
x,
|
||||||
y
|
y
|
||||||
});
|
});
|
||||||
|
},
|
||||||
|
mouseOverEvent() {
|
||||||
|
if (this.isGif) {
|
||||||
|
this.hover = true;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -14,7 +14,7 @@
|
||||||
<div class="avatar">
|
<div class="avatar">
|
||||||
<profile-picture
|
<profile-picture
|
||||||
:admin="$props.admin"
|
:admin="$props.admin"
|
||||||
:url="`${userAvatar}${hover ? '' : '?type=png'}`"
|
:url="`${userAvatar}${hover ? '' : '?type=webp'}`"
|
||||||
size="50px"
|
size="50px"
|
||||||
:hover="true"
|
:hover="true"
|
||||||
@click.native="openUserInformation"
|
@click.native="openUserInformation"
|
||||||
|
|
|
||||||
|
|
@ -2,10 +2,12 @@
|
||||||
<div class="my-mini-information">
|
<div class="my-mini-information">
|
||||||
<ProfilePicture
|
<ProfilePicture
|
||||||
class="avatar"
|
class="avatar"
|
||||||
:url="`${avatar}${hover ? '' : '?type=png'}`"
|
:url="`${avatar}${hover ? '' : '?type=webp'}`"
|
||||||
:admin="user.admin"
|
:admin="user.admin"
|
||||||
size="35px"
|
size="35px"
|
||||||
:hover="true"
|
:hover="true"
|
||||||
|
@mouseenter.native="hover = true"
|
||||||
|
@mouseleave.native="hover = false"
|
||||||
@click.native="openUserInformation"
|
@click.native="openUserInformation"
|
||||||
/>
|
/>
|
||||||
<div class="information">
|
<div class="information">
|
||||||
|
|
|
||||||
|
|
@ -16,7 +16,7 @@
|
||||||
v-if="server && server.banner"
|
v-if="server && server.banner"
|
||||||
:style="{
|
:style="{
|
||||||
backgroundImage: `url(${bannerDomain}${server.banner}${
|
backgroundImage: `url(${bannerDomain}${server.banner}${
|
||||||
bannerHover ? '' : '?type=png'
|
bannerHover ? '' : '?type=webp'
|
||||||
})`
|
})`
|
||||||
}"
|
}"
|
||||||
/>
|
/>
|
||||||
|
|
|
||||||
|
|
@ -14,7 +14,7 @@
|
||||||
<profile-picture
|
<profile-picture
|
||||||
size="45px"
|
size="45px"
|
||||||
class="avatar"
|
class="avatar"
|
||||||
:url="`${avatarDomain}/${serverData.avatar}${hover ? '' : '?type=png'}`"
|
:url="`${avatarDomain}/${serverData.avatar}${hover ? '' : '?type=webp'}`"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -6,7 +6,7 @@
|
||||||
v-if="server.server.banner"
|
v-if="server.server.banner"
|
||||||
:style="{
|
:style="{
|
||||||
backgroundImage: `url(${bannerDomain + server.server.banner}${
|
backgroundImage: `url(${bannerDomain + server.server.banner}${
|
||||||
hover ? '' : '?type=png'
|
hover ? '' : '?type=webp'
|
||||||
})`
|
})`
|
||||||
}"
|
}"
|
||||||
/>
|
/>
|
||||||
|
|
|
||||||
|
|
@ -6,7 +6,7 @@
|
||||||
class="background-dark"
|
class="background-dark"
|
||||||
:style="{
|
:style="{
|
||||||
backgroundImage: `url(${bannerDomain +
|
backgroundImage: `url(${bannerDomain +
|
||||||
theme.screenshot}${'?type=png'})`
|
theme.screenshot}${'?type=webp'})`
|
||||||
}"
|
}"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -76,7 +76,7 @@ export default {
|
||||||
bannerImageClicked() {
|
bannerImageClicked() {
|
||||||
this.$store.dispatch(
|
this.$store.dispatch(
|
||||||
"setImagePreviewURL",
|
"setImagePreviewURL",
|
||||||
this.bannerDomain + this.theme.screenshot + "?type=png"
|
this.bannerDomain + this.theme.screenshot + "?type=webp"
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
unApplyButton() {
|
unApplyButton() {
|
||||||
|
|
|
||||||
|
|
@ -3,7 +3,7 @@
|
||||||
class="friend"
|
class="friend"
|
||||||
:class="{ selected: uniqueIDSelected, tree }"
|
:class="{ selected: uniqueIDSelected, tree }"
|
||||||
@click="openChat"
|
@click="openChat"
|
||||||
@mouseover="hover = true"
|
@mouseover="mouseOverEvent"
|
||||||
@mouseleave="hover = false"
|
@mouseleave="hover = false"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
|
|
@ -11,7 +11,7 @@
|
||||||
:style="
|
:style="
|
||||||
`border-color: ${
|
`border-color: ${
|
||||||
status.statusColor
|
status.statusColor
|
||||||
}; background-image: url(${userAvatar}${hover ? '' : '?type=png'})`
|
}; background-image: url(${userAvatar}${hover || !isGif ? '' : '?type=webp'})`
|
||||||
"
|
"
|
||||||
@click="openUserInformation"
|
@click="openUserInformation"
|
||||||
>
|
>
|
||||||
|
|
@ -53,9 +53,13 @@ export default {
|
||||||
],
|
],
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
hover: false
|
hover: false,
|
||||||
|
isGif: false
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
mounted() {
|
||||||
|
this.isGif = this.userAvatar.endsWith(".gif");
|
||||||
|
},
|
||||||
computed: {
|
computed: {
|
||||||
notifications() {
|
notifications() {
|
||||||
const channelID = this.$props.channelID;
|
const channelID = this.$props.channelID;
|
||||||
|
|
@ -97,6 +101,11 @@ export default {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
mouseOverEvent() {
|
||||||
|
if (this.isGif) {
|
||||||
|
this.hover = true;
|
||||||
|
}
|
||||||
|
},
|
||||||
async closeChannel() {
|
async closeChannel() {
|
||||||
this.channelID;
|
this.channelID;
|
||||||
await channelService.delete(this.channelID);
|
await channelService.delete(this.channelID);
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue