mirror of
https://github.com/danbulant/Nertivia-Client
synced 2026-06-18 05:51:11 +00:00
redesigned mini profile information
This commit is contained in:
supertiger1234
parent
2b1797562f
commit
f254ee08ad
4 changed files with 104 additions and 167 deletions
|
|
@ -90,6 +90,9 @@ export default {
|
|||
-webkit-transform: translateZ(0) scale(1, 1);
|
||||
transform: translateZ(0);
|
||||
}
|
||||
.hoverable {
|
||||
cursor: pointer;
|
||||
}
|
||||
.hoverable:hover {
|
||||
filter: brightness(80%);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,54 +1,32 @@
|
|||
<template>
|
||||
<div
|
||||
class="my-mini-information"
|
||||
|
||||
@mouseover="hover = true" @mouseleave="hover = false"
|
||||
|
||||
>
|
||||
<div class="profile-pic-outer">
|
||||
<profile-picture
|
||||
:url="`${avatar}${hover ? '' : '?type=png'}`"
|
||||
:admin="user.admin"
|
||||
size="35px"
|
||||
:hover="true"
|
||||
@click.native="openUserInformation"
|
||||
<div class="my-mini-information">
|
||||
<ProfilePicture
|
||||
class="avatar"
|
||||
:url="`${avatar}${hover ? '' : '?type=png'}`"
|
||||
:admin="user.admin"
|
||||
size="40px"
|
||||
:hover="true"
|
||||
@click.native="openUserInformation"
|
||||
/>
|
||||
<div class="information">
|
||||
<div class="username">{{user.username}}</div>
|
||||
<div class="tag">@{{user.tag}}</div>
|
||||
</div>
|
||||
<div
|
||||
class="status-button"
|
||||
@click="status.isPoppedOut = !status.isPoppedOut"
|
||||
>
|
||||
<statusList
|
||||
v-if="status.isPoppedOut"
|
||||
v-click-outside="closeMenus"
|
||||
class="status-popout"
|
||||
/>
|
||||
<img
|
||||
class="status"
|
||||
:src="getStatus"
|
||||
/>
|
||||
</div>
|
||||
<div class="information">
|
||||
<div class="name">
|
||||
{{ user.username }}
|
||||
</div>
|
||||
<div class="tag">
|
||||
@{{ user.tag }}
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="status"
|
||||
@click="status.isPoppedOut = !status.isPoppedOut"
|
||||
>
|
||||
<img
|
||||
class="current-status"
|
||||
:src="getStatus"
|
||||
>
|
||||
<i class="material-icons expand-status-icon">expand_less</i>
|
||||
<transition name="show-status-list">
|
||||
<statusList
|
||||
v-if="status.isPoppedOut"
|
||||
v-click-outside="closeMenus"
|
||||
class="status-popout"
|
||||
/>
|
||||
</transition>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-if="!user.survey_completed || user.survey_completed === false"
|
||||
class="setting-icon survay-button"
|
||||
@click="openSurvey"
|
||||
>
|
||||
<div class="survay-inner">
|
||||
<i class="material-icons">error</i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -101,7 +79,7 @@ export default {
|
|||
this.$store.dispatch('setUserInformationPopout', this.user.uniqueID)
|
||||
},
|
||||
closeMenus(event) {
|
||||
if (event.target.closest('.status')) return;
|
||||
if (event.target.closest('.status-button')) return;
|
||||
this.status.isPoppedOut = false;
|
||||
},
|
||||
openSurvey() {
|
||||
|
|
@ -124,134 +102,62 @@ export default {
|
|||
|
||||
|
||||
|
||||
<style scoped>
|
||||
.profile-pic-outer{
|
||||
z-index:9999;
|
||||
display: flex;
|
||||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.survay-button {
|
||||
padding: 10px;
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
}
|
||||
.survay-inner {
|
||||
display: inline-block;
|
||||
box-shadow: 0px 0px 20px 3px cyan;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.survay-button .material-icons {
|
||||
display: block;
|
||||
margin-left: -3px !important;
|
||||
margin-top: -3px !important;
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
font-size: 30px;
|
||||
color: cyan;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.show-status-list-enter-active,
|
||||
.show-status-list-leave-active {
|
||||
transition: 0.2s;
|
||||
}
|
||||
.show-status-list-enter,
|
||||
.show-status-list-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
|
||||
.fade-enter-active,
|
||||
.fade-leave-active {
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
|
||||
opacity: 0;
|
||||
}
|
||||
<style scoped lang="scss">
|
||||
|
||||
.my-mini-information {
|
||||
position: relative;
|
||||
background: rgba(0, 0, 0, 0.3);;
|
||||
height: 50px;
|
||||
display: flex;
|
||||
position: relative;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
flex-shrink: 0;
|
||||
align-items: center;
|
||||
height: 60px;
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
margin-left: 10px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
|
||||
.information {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
color: white;
|
||||
margin-top: -4px;
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.setting-icon {
|
||||
color: white;
|
||||
margin: auto;
|
||||
margin-right: 15px;
|
||||
padding: 5px;
|
||||
border-radius: 50%;
|
||||
user-select: none;
|
||||
transition: 0.3s;
|
||||
cursor: pointer;
|
||||
}
|
||||
.setting-icon:hover {
|
||||
background: rgba(0, 0, 0, 0.294);
|
||||
}
|
||||
.setting-icon .material-icons {
|
||||
display: block;
|
||||
margin: auto;
|
||||
}
|
||||
.status {
|
||||
display: inline-block;
|
||||
padding-top: 1px;
|
||||
padding-left: 5px;
|
||||
margin-left: 10px;
|
||||
margin-top: -10px;
|
||||
transition: 0.3s;
|
||||
user-select: none;
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.status:hover {
|
||||
background: rgba(26, 25, 25, 0.349);
|
||||
}
|
||||
|
||||
.expand-status-icon {
|
||||
opacity: 0;
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
.status:hover .expand-status-icon {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.status .current-status {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background-size: 100%;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
.name {
|
||||
margin-top: 10px;
|
||||
text-overflow: ellipsis;
|
||||
width: 100%;
|
||||
font-size: 14px;
|
||||
margin-left: 5px;
|
||||
overflow: hidden;
|
||||
flex: 1;
|
||||
.username, .tag {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.tag {
|
||||
font-size: 13px;
|
||||
color: rgb(187, 187, 187);
|
||||
}
|
||||
}
|
||||
|
||||
.tag {
|
||||
color: rgb(199, 199, 199);
|
||||
font-size: 11px;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
margin-top: 1px;
|
||||
|
||||
.status-button {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 60px;
|
||||
width: 60px;
|
||||
transition: 0.2s;
|
||||
margin-left: 3px;
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
.status {
|
||||
height: 25px;
|
||||
width: 25px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
&:hover {
|
||||
background: rgba(44, 44, 44, 0.596);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -33,6 +33,12 @@
|
|||
@click="switchTab(3)"
|
||||
@mouseenter="localToolTipEvent('Changelog', $event)"
|
||||
>list_alt</div>
|
||||
<div
|
||||
v-if="!user.survey_completed"
|
||||
class="item material-icons"
|
||||
@click="openSurvey"
|
||||
@mouseenter="localToolTipEvent('Click Me', $event)"
|
||||
>error</div>
|
||||
</div>
|
||||
<div class="seperater" />
|
||||
<div class="server-items" v-if="currentTab === 2">
|
||||
|
|
@ -174,9 +180,18 @@ export default {
|
|||
show: true,
|
||||
type: "ADD_FRIEND",
|
||||
})
|
||||
},
|
||||
openSurvey() {
|
||||
this.$store.dispatch("setPopoutVisibility", {
|
||||
name: "surveyPopout",
|
||||
visibility: true
|
||||
});
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
user() {
|
||||
return this.$store.getters.user;
|
||||
},
|
||||
currentTab() {
|
||||
return this.$store.getters.currentTab;
|
||||
},
|
||||
|
|
@ -249,7 +264,7 @@ export default {
|
|||
flex-shrink: 0;
|
||||
height: 100%;
|
||||
width: 60px;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.container {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
<template>
|
||||
<transition name="show-status-list" appear="true">
|
||||
<div class="status-popout">
|
||||
<div
|
||||
class="status-list"
|
||||
|
|
@ -46,6 +47,7 @@
|
|||
></span><span class="text">Offline</span>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -65,10 +67,20 @@ export default {
|
|||
|
||||
<style scoped>
|
||||
|
||||
.show-status-list-enter-active,
|
||||
.show-status-list-leave-active {
|
||||
transition: 0.2s;
|
||||
}
|
||||
.show-status-list-enter,
|
||||
.show-status-list-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
|
||||
.status-popout{
|
||||
position: absolute;
|
||||
bottom: 55px;
|
||||
left: 30px;
|
||||
bottom: 60px;
|
||||
right: 0px;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
backdrop-filter: blur(5px);
|
||||
width: 180px;
|
||||
|
|
@ -76,11 +88,12 @@ export default {
|
|||
}
|
||||
.status-list {
|
||||
padding: 10px;
|
||||
transition: 0.3s;
|
||||
transition: 0.2s;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
align-content: center;
|
||||
flex-shrink: 0;
|
||||
color: white;
|
||||
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue