mirror of
https://github.com/HabitRPG/habitica.git
synced 2025-12-14 21:27:23 +01:00
ade6d9689f
* initial quests.vue - refactorings - add group to quests * shows quests by quest-group * buyQuestModal with rewards sidebar * store / actions to load seasonal/time-travelers shop data * buyModal buyPressed instead of buyAction - seasonal shop categories now with specialClass property - seasonal shop * time travelers vue - show hourglass in shopItem / buyDialog - fix banners * cleanup * show amount of already owned quests * show html notes in popovers / dialog * extract purchase-api to common.ops.purchaseWithSpell to call the same in the store / update the UI on purchases * add time-travelers sprites * fix lint * add last mystery set images * remove unused Page * remove equipment from newClient.json
131 lines
3.1 KiB
Vue
131 lines
3.1 KiB
Vue
<template lang="pug">
|
|
#app-header.row(:class='{sticky: user.preferences.stickyHeader}', v-if='showHeader')
|
|
create-party-modal
|
|
members-modal(v-if="user.party._id", :group='user.party', :hide-badge="true")
|
|
member-details(:member="user", @click="$router.push({name: 'avatar'})")
|
|
.view-party(v-if="user.party && user.party._id")
|
|
// TODO button should open the party members modal
|
|
button.btn.btn-primary(@click='openPartyModal()') {{ $t('viewParty') }}
|
|
.party-members.d-flex(v-if="partyMembers && partyMembers.length > 1")
|
|
member-details(
|
|
v-for="(member, $index) in partyMembers",
|
|
:key="member._id",
|
|
v-if="member._id !== user._id && $index < 10",
|
|
:member="member",
|
|
condensed=true,
|
|
@onHover="expandMember(member._id)",
|
|
:expanded="member._id === expandedMember",
|
|
)
|
|
.no-party.d-flex.justify-content-center.text-center(v-else)
|
|
.align-self-center(v-once)
|
|
h3 {{ $t('battleWithFriends') }}
|
|
span.small-text(v-html="$t('inviteFriendsParty')")
|
|
br
|
|
// TODO link to party creation or party page if partying solo
|
|
router-link.btn.btn-primary(:active-class="''", :to="{name: 'party'}") {{ $t('startAParty') }}
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
@import '~client/assets/scss/colors.scss';
|
|
|
|
#app-header {
|
|
padding-left: 14px;
|
|
margin-top: 56px;
|
|
background: $purple-50;
|
|
height: 204px;
|
|
color: $header-color;
|
|
flex-wrap: nowrap;
|
|
position: relative;
|
|
}
|
|
|
|
.sticky {
|
|
position: fixed !important;
|
|
width: 100%;
|
|
z-index: 1;
|
|
}
|
|
|
|
.no-party, .party-members {
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.party-members {
|
|
}
|
|
|
|
.view-party {
|
|
position: absolute;
|
|
z-index: 10;
|
|
right: 0;
|
|
padding-right: 40px;
|
|
height: 100%;
|
|
background-image: linear-gradient(to right, rgba($purple-50, 0), $purple-50);
|
|
|
|
.btn {
|
|
margin-top: 75%;
|
|
}
|
|
}
|
|
|
|
.no-party {
|
|
.small-text {
|
|
color: $header-color;
|
|
flex-wrap: nowrap;
|
|
}
|
|
|
|
h3 {
|
|
color: $white;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.btn {
|
|
margin-top: 16px;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
import { mapGetters, mapActions } from 'client/libs/store';
|
|
import MemberDetails from './memberDetails';
|
|
import createPartyModal from './groups/createPartyModal';
|
|
import membersModal from './groups/membersModal';
|
|
|
|
export default {
|
|
components: {
|
|
MemberDetails,
|
|
createPartyModal,
|
|
membersModal,
|
|
},
|
|
data () {
|
|
return {
|
|
expandedMember: null,
|
|
};
|
|
},
|
|
computed: {
|
|
...mapGetters({
|
|
user: 'user:data',
|
|
partyMembers: 'party:members',
|
|
}),
|
|
showHeader () {
|
|
if (this.$store.state.hideHeader) return false;
|
|
return true;
|
|
},
|
|
},
|
|
methods: {
|
|
...mapActions({
|
|
getPartyMembers: 'party:getMembers',
|
|
}),
|
|
expandMember (memberId) {
|
|
if (this.expandedMember === memberId) {
|
|
this.expandedMember = null;
|
|
} else {
|
|
this.expandedMember = memberId;
|
|
}
|
|
},
|
|
openPartyModal () {
|
|
this.$root.$emit('show::modal', 'create-party-modal');
|
|
},
|
|
},
|
|
created () {
|
|
if (this.user.party && this.user.party._id) this.getPartyMembers();
|
|
},
|
|
};
|
|
</script>
|