changed the way how avatars show

This commit is contained in:
unknown 2020-01-11 15:20:45 +00:00
parent 67502d7ea2
commit a6d7ef79d5
8 changed files with 33 additions and 13 deletions

View file

@ -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;
}
} }
} }
}; };

View file

@ -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"

View file

@ -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">

View file

@ -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'
})` })`
}" }"
/> />

View file

@ -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>

View file

@ -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'
})` })`
}" }"
/> />

View file

@ -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() {

View file

@ -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);