mirror of
https://github.com/HabitRPG/habitica.git
synced 2025-12-17 14:47:53 +01:00
Update Party / Group Sidebar / Quest states (#12793)
* move groups/sidebar to groupSidebar.vue * lint files * extract group/party sidebar to rightSidebar.vue * wip stories with example data * update stories - wip sidebar re-styling * message party / group leader + move items to the menu * update paddings /place for quest section * invite to party / guild * update labels (* Party / Guild ) * guild-background to group-background * correct menu order + missing a label based on the group type * no quest - styles / layout applied * quest owner / not started - styles applied + extracted questActions from questDetailsModal.vue to a mixin * no challenge style * hover with underlines * quest-pending area layout / margins * "Collection Quest/Quest Owner Participating" Styling Done * group sidebar menu with icons / background * remove most participate button styles * fix quest-invite panel * move "Start Quest" + add "Leave Quest" * Not Participating + Boss + Rage Quests restyling * party quest changes - invitedToQuest + button styles + no-items style + view details * fix icons + rage value + colors * fix duplicate key * hide items label if 0 items found + hide pending damage if there is none + sidebar section margin + fix percent calculation 0 => 0% * combine quest abandon / cancel to one call + hide begin if quest has already started + close modal if quest was canceled * remove unused translate string * allow leaving an accepted but inactive quest + disable leave when user is quest leader * update "are you sure" questions - remove "doubleSureAbort" - add "sureLeaveInactive" * sidebar margins + menu icon color * refactored css rules * improve some styles * fix button spacing * fix dropmenu with icon hover * hide leave quest for leaders + fix quest buttons spacing * add pending items label * remove "X items found" label * first round of fixes * last v-once * Update Quest Dialogs (#13112) * new quest rewards panel + extract questPopover and itemWithLabel * WIP: questInfo still not applying the row-height.. * split up start-quest-modal into select and detail modal - also rename the current quest-details to be the group-quest-details modal * remove start-quest-modal from modal-scss * update package-lock * WIP before using the quest sidebar branch as a base * move quest detail actions to the "new" details dialog * quest details layout for owner / participant * fix quest rewards - open details modal from sidebar * apply quest-details dialog styles to the buyQuestModal one * fix quest reward icons / popover / texts * WIP back to quest selection * fix lint * merge selectQuestModal.vue with questDetailModal.vue + UI for the select quest * fix margins / layout / labels * fix quest detail + wip invitationListModal.vue / participantListModal.vue * fix questmodal user label centered * fix centered reward items + grouping items and adding a count-badge * sort quests by AZ or quantity * invitations modal * remove console.info * complete participantListModal.vue + extracted getClassName * missed a file for getClassName extraction * fix invitations * select the actual quest on details * fix margins on invite to party / start quest buttons * replace buyQuestModal close button and title * fix recursion due to the same name * missing import * sort quantity by highest first * fix "Can't find a Quest to start" styles * fix "your balance" padding * fix quest collections / drop items * fix member details in participants list * fix quest info * remove nullable because the build doesn't like it (on this file..) * add questCompleted to the stories + fix getDropName * replace quest-rewards in questCompleted.vue * fix questCompleted.vue style * delete obsolete components * add missing spritesheets to storebook * requested pr changes * refactored fetchMember * revert optional chaining * fix merge conflicts * fix rightSidebar hover colors - $scss var to css var * overflow auto instead of scroll * prevent wrapping of quest collections * rollback to multi line quest items * use min-width for the quest popover
This commit is contained in:
negue
GitHub
213
website/client/src/components/shops/quests/questRewards.vue
Normal file
213
website/client/src/components/shops/quests/questRewards.vue
Normal file
@@ -0,0 +1,213 @@
|
||||
<template>
|
||||
<div class="quest-rewards">
|
||||
<div
|
||||
class="header d-flex align-items-center"
|
||||
@click="toggle"
|
||||
>
|
||||
<span class="d-flex justify-content-center">
|
||||
<div
|
||||
v-once
|
||||
class="your-rewards d-flex align-items-center"
|
||||
>
|
||||
<span
|
||||
class="sparkles"
|
||||
v-html="icons.sparkles"
|
||||
></span>
|
||||
<span class="rewards-title">{{ $t('rewards') }}</span>
|
||||
<span
|
||||
class="sparkles mirror"
|
||||
v-html="icons.sparkles"
|
||||
></span>
|
||||
</div>
|
||||
</span>
|
||||
<SectionButton
|
||||
:visible="opened"
|
||||
@click="toggle"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
v-if="opened"
|
||||
class="content ml-3 mr-3"
|
||||
>
|
||||
<item-with-label
|
||||
v-for="drop in getDropsList(quest.drop.items, true)"
|
||||
:key="drop.key"
|
||||
:item="{}"
|
||||
label-class="purple"
|
||||
>
|
||||
<div slot="itemImage">
|
||||
<div :class="getDropIcon(drop)"></div>
|
||||
</div>
|
||||
<div slot="popoverContent">
|
||||
<quest-popover :item="drop" />
|
||||
</div>
|
||||
<div slot="label">
|
||||
{{ $t('ownerOnly') }}
|
||||
</div>
|
||||
</item-with-label>
|
||||
|
||||
<item-with-label
|
||||
:item="{}"
|
||||
label-class="yellow"
|
||||
>
|
||||
<div slot="itemImage">
|
||||
<div
|
||||
class="icon-48"
|
||||
v-html="icons.expIcon"
|
||||
></div>
|
||||
</div>
|
||||
<div slot="label">
|
||||
{{ $t('amountExp', { amount: quest.drop.exp }) }}
|
||||
</div>
|
||||
</item-with-label>
|
||||
|
||||
<item-with-label
|
||||
:item="{}"
|
||||
label-class="yellow"
|
||||
>
|
||||
<div slot="itemImage">
|
||||
<div
|
||||
class="icon-48"
|
||||
v-html="icons.goldIcon"
|
||||
></div>
|
||||
</div>
|
||||
<div slot="label">
|
||||
{{ $t('amountGold', { amount: quest.drop.gp }) }}
|
||||
</div>
|
||||
</item-with-label>
|
||||
|
||||
<item-with-label
|
||||
v-for="drop in getDropsList(quest.drop.items, false)"
|
||||
:key="drop.key"
|
||||
:item="{}"
|
||||
>
|
||||
<countBadge
|
||||
slot="badges"
|
||||
:show="drop.amount !== 1"
|
||||
:count="drop.amount"
|
||||
/>
|
||||
<div slot="itemImage">
|
||||
<div :class="getDropIcon(drop)"></div>
|
||||
</div>
|
||||
<div
|
||||
v-if="drop.klass"
|
||||
slot="popoverContent"
|
||||
>
|
||||
<equipmentAttributesPopover
|
||||
:item="drop"
|
||||
/>
|
||||
</div>
|
||||
<div slot="label">
|
||||
{{ $t('newItem') }}
|
||||
</div>
|
||||
</item-with-label>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import sparkles from '@/assets/svg/sparkles-left.svg';
|
||||
import expIcon from '@/assets/svg/experience.svg';
|
||||
import goldIcon from '@/assets/svg/gold.svg';
|
||||
import SectionButton from '../../sectionButton';
|
||||
import ItemWithLabel from '../itemWithLabel';
|
||||
import { QuestHelperMixin } from './quest-helper.mixin';
|
||||
import EquipmentAttributesPopover from '@/components/inventory/equipment/attributesPopover';
|
||||
import QuestPopover from './questPopover';
|
||||
import CountBadge from '../../ui/countBadge';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
CountBadge,
|
||||
QuestPopover,
|
||||
ItemWithLabel,
|
||||
SectionButton,
|
||||
EquipmentAttributesPopover,
|
||||
},
|
||||
mixins: [QuestHelperMixin],
|
||||
props: ['quest'],
|
||||
data () {
|
||||
return {
|
||||
opened: true,
|
||||
icons: Object.freeze({
|
||||
sparkles,
|
||||
expIcon,
|
||||
goldIcon,
|
||||
}),
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
droppedItem () {
|
||||
const item = this.quest.drop.items[0];
|
||||
|
||||
if (item) {
|
||||
return item;
|
||||
}
|
||||
|
||||
return null;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
toggle () {
|
||||
this.opened = !this.opened;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import '~@/assets/scss/colors.scss';
|
||||
|
||||
.quest-rewards {
|
||||
margin-left: -1rem;
|
||||
margin-right: -1rem;
|
||||
|
||||
background-color: $gray-700;
|
||||
}
|
||||
|
||||
.header {
|
||||
height: 3.5rem;
|
||||
position: relative;
|
||||
|
||||
::v-deep {
|
||||
.section-button {
|
||||
position: absolute;
|
||||
right: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.mirror {
|
||||
transform: scaleX(-1);
|
||||
}
|
||||
|
||||
.your-rewards {
|
||||
margin: 0 auto;
|
||||
width: fit-content;
|
||||
|
||||
.sparkles {
|
||||
width: 2rem;
|
||||
}
|
||||
|
||||
.rewards-title {
|
||||
font-weight: bold;
|
||||
margin: 1rem;
|
||||
color: $gray-50;
|
||||
align-self: baseline; // center would move it to the top?!
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user