krikkert/habitica
1
0
Fork 0
mirror of https://github.com/HabitRPG/habitica.git synced 2025-12-18 15:17:25 +01:00
Code Issues Packages Projects Releases Wiki Activity

Separated out modal components (#10545)

Browse Source 
* Seprated out modal components

* Removed extra css

* Fixed import case
This commit is contained in:
Keith Holliday
2018-07-30 14:38:29 +08:00
committed by GitHub
parent 2fc233e70f
commit 7325bc0871
4 changed files with 363 additions and 330 deletions
Download Patch File Download Diff File Expand all files Collapse all files

84
website/client/components/inventory/stable/hatchingModal.vue Normal file
View File

@@ -0,0 +1,84 @@
<template lang="pug">
b-modal#hatching-modal(@change="resetHatchablePet($event)")
div.content(v-if="hatchablePet")
div.potionEggGroup
div.potionEggBackground
div(:class="'Pet_HatchingPotion_'+hatchablePet.potionKey")
div.potionEggBackground
div(:class="'Pet_Egg_'+hatchablePet.eggKey")
h4.title {{ hatchablePet.name }}
div.text(v-html="$t('hatchDialogText', { potionName: hatchablePet.potionName, eggName: hatchablePet.eggName, petName: hatchablePet.name })")
span.svg-icon.icon-10(v-html="icons.close", slot="modal-header", @click="closeHatchPetDialog()")
div(slot="modal-footer")
button.btn.btn-primary(@click="hatchPet(hatchablePet)") {{ $t('hatch') }}
button.btn.btn-secondary.btn-flat(@click="closeHatchPetDialog()") {{ $t('cancel') }}
</template>
<style lang="scss">
@import '~client/assets/scss/modal.scss';
#hatching-modal {
@include centeredModal();
.modal-dialog {
width: 310px;
}
.content {
text-align: center;
margin: 9px;
}
.title {
margin-top: 24px;
font-size: 20px;
font-weight: bold;
line-height: 1.2;
text-align: center;
color: #4e4a57;
}
.text {
height: 60px;
font-size: 14px;
line-height: 1.43;
text-align: center;
color: #686274;
}
span.svg-icon.icon-10 {
position: absolute;
right: 10px;
top: 10px;
}
.modal-footer {
justify-content: center;
}
}
</style>
<script>
import svgClose from 'assets/svg/close.svg';
import petMixin from 'client/mixins/petMixin';
export default {
props: ['hatchablePet'],
mixins: [petMixin],
data () {
return {
icons: Object.freeze({
close: svgClose,
}),
};
},
methods: {
resetHatchablePet ($event) {
if (!$event) {
this.hatchablePet = null;
}
},
},
};
</script>

163
website/client/components/inventory/stable/index.vue
View File

@@ -1,5 +1,4 @@
<template lang="pug">
// @TODO: breakdown to componentes and use some SOLID
.row.stable(v-mousePosition="30", @mouseMoved="mouseMoved($event)")
.standard-sidebar.d-none.d-sm-block
div
@@ -11,10 +10,8 @@
)
h4.popover-content-title(v-once) {{ $t('mattBoch') }}
.popover-content-text(v-once) {{ $t('mattBochText1') }}
.form-group
input.form-control.input-search(type="text", v-model="searchText", :placeholder="$t('search')")
.form
h2(v-once) {{ $t('filter') }}
h3(v-once) {{ $t('pets') }}
@@ -71,11 +68,9 @@
|
span.badge.badge-pill.badge-default {{countOwnedAnimals(petGroups[0], 'pet')}}
div(
v-for="(petGroup, index) in petGroups",
div(v-for="(petGroup, index) in petGroups",
v-if="viewOptions[petGroup.key].selected",
:key="petGroup.key"
)
:key="petGroup.key")
h4(v-if="viewOptions[petGroup.key].animalCount !== 0") {{ petGroup.label }}
.pet-row.d-flex(
@@ -121,11 +116,9 @@
|
span.badge.badge-pill.badge-default {{countOwnedAnimals(mountGroups[0], 'mount')}}
div(
v-for="mountGroup in mountGroups",
div(v-for="mountGroup in mountGroups",
v-if="viewOptions[mountGroup.key].selected",
:key="mountGroup.key"
)
:key="mountGroup.key")
h4(v-if="viewOptions[mountGroup.key].animalCount != 0") {{ mountGroup.label }}
.pet-row.d-flex(v-for="(group, key, index) in mounts(mountGroup, hideMissing, selectedSortBy, searchTextThrottled)"
@@ -152,10 +145,8 @@
.btn.btn-flat.btn-show-more(@click="setShowMore(mountGroup.key)", v-if='mountGroup.key !== "specialMounts"')
| {{ $_openedItemRows_isToggled(mountGroup.key) ? $t('showLess') : $t('showMore') }}
drawer(
:title="$t('quickInventory')",
:errorMessage="(!hasDrawerTabItems(selectedDrawerTab)) ? ((selectedDrawerTab === 0) ? $t('noFoodAvailable') : $t('noSaddlesAvailable')) : null"
)
drawer(:title="$t('quickInventory')",
:errorMessage="(!hasDrawerTabItems(selectedDrawerTab)) ? ((selectedDrawerTab === 0) ? $t('noFoodAvailable') : $t('noSaddlesAvailable')) : null")
div(slot="drawer-header")
.drawer-tab-container
.drawer-tab.text-right
@@ -195,51 +186,20 @@
@itemDragStart="onDragStart($event, context.item)",
@itemClick="onFoodClicked($event, context.item)"
)
b-modal#welcome-modal(
:ok-only="true",
:ok-title="$t('gotIt')",
:visible="!hideDialog",
:hide-header="true",
@hide="hideFlag()"
)
div.content
div.npc_matt
h1.page-header(v-once) {{ $t('welcomeStable') }}
div.content-text(v-once) {{ $t('welcomeStableText') }}
b-modal#hatching-modal(
@change="resetHatchablePet($event)"
)
div.content(v-if="hatchablePet")
div.potionEggGroup
div.potionEggBackground
div(:class="'Pet_HatchingPotion_'+hatchablePet.potionKey")
div.potionEggBackground
div(:class="'Pet_Egg_'+hatchablePet.eggKey")
h4.title {{ hatchablePet.name }}
div.text(v-html="$t('hatchDialogText', { potionName: hatchablePet.potionName, eggName: hatchablePet.eggName, petName: hatchablePet.name })")
span.svg-icon.icon-10(v-html="icons.close", slot="modal-header", @click="closeHatchPetDialog()")
div(slot="modal-footer")
button.btn.btn-primary(@click="hatchPet(hatchablePet)") {{ $t('hatch') }}
button.btn.btn-secondary.btn-flat(@click="closeHatchPetDialog()") {{ $t('cancel') }}
hatchedPetDialog(
:hideText="true",
)
hatchedPetDialog(:hideText="true")
div.foodInfo(ref="dragginFoodInfo")
div(v-if="currentDraggingFood != null")
div.food-icon(:class="'Pet_Food_'+currentDraggingFood.key")
div.popover
div.popover-content {{ $t('dragThisFood', {foodName: currentDraggingFood.text() }) }}
div.foodInfo.mouse(ref="clickFoodInfo", v-if="foodClickMode")
div(v-if="currentDraggingFood != null")
div.food-icon(:class="'Pet_Food_'+currentDraggingFood.key")
div.popover
div.popover-content {{ $t('clickOnPetToFeed', {foodName: currentDraggingFood.text() }) }}
mount-raised-modal
welcome-modal
hatching-modal(:hatchablePet.sync='hatchablePet')
</template>
<style lang='scss' scoped>
@@ -328,79 +288,6 @@
height: 114px;
}
#welcome-modal {
@include centeredModal();
.npc_matt {
margin: 0 auto 21px auto;
}
.content {
text-align: center;
// the modal already has 15px padding
margin-left: 33px;
margin-right: 33px;
margin-top: 25px;
}
.content-text {
font-family: 'Roboto', sans-serif;
font-size: 14px;
font-weight: normal;
line-height: 1.43;
width: 400px;
}
.modal-footer {
justify-content: center;
}
}
#hatching-modal {
@include centeredModal();
.modal-dialog {
width: 310px;
}
.content {
text-align: center;
margin: 9px;
}
.title {
margin-top: 24px;
font-family: Roboto;
font-size: 20px;
font-weight: bold;
font-stretch: condensed;
line-height: 1.2;
text-align: center;
color: #4e4a57;
}
.text {
height: 60px;
font-family: Roboto;
font-size: 14px;
line-height: 1.43;
text-align: center;
color: #686274;
}
span.svg-icon.icon-10 {
position: absolute;
right: 10px;
top: 10px;
}
.modal-footer {
justify-content: center;
}
}
.modal-backdrop.fade.show {
background-color: $purple-50;
opacity: 0.9;
@@ -492,6 +379,8 @@
import FoodItem from './foodItem';
import HatchedPetDialog from './hatchedPetDialog';
import MountRaisedModal from './mountRaisedModal';
import WelcomeModal from './welcomeModal';
import HatchingModal from './hatchingModal';
import Drawer from 'client/components/ui/drawer';
import toggleSwitch from 'client/components/ui/toggleSwitch';
import StarBadge from 'client/components/ui/starBadge';
@@ -505,10 +394,10 @@
import createAnimal from 'client/libs/createAnimal';
import svgInformation from 'assets/svg/information.svg';
import svgClose from 'assets/svg/close.svg';
import notifications from 'client/mixins/notifications';
import openedItemRowsMixin from 'client/mixins/openedItemRows';
import petMixin from 'client/mixins/petMixin';
// TODO Normalize special pets and mounts
// import Store from 'client/store';
@@ -518,7 +407,7 @@
let lastMouseMoveEvent = {};
export default {
mixins: [notifications, openedItemRowsMixin],
mixins: [notifications, openedItemRowsMixin, petMixin],
components: {
PetItem,
Item,
@@ -532,12 +421,17 @@
DrawerSlider,
HatchedPetDialog,
MountRaisedModal,
WelcomeModal,
HatchingModal,
},
directives: {
resize: ResizeDirective,
drag: DragDropDirective,
mousePosition: MouseMoveDirective,
},
mounted () {
this.$root.$emit('bv::show::modal', 'hatching-modal');
},
data () {
return {
viewOptions: {},
@@ -554,7 +448,6 @@
],
icons: Object.freeze({
information: svgInformation,
close: svgClose,
}),
highlightPet: '',
@@ -578,7 +471,6 @@
currentPet: 'user.data.items.currentPet',
currentMount: 'user.data.items.currentMount',
userItems: 'user.data.items',
hideDialog: 'user.data.flags.tutorial.common.mounts',
user: 'user.data',
}),
petGroups () {
@@ -871,12 +763,6 @@
selectMount (item) {
this.$store.dispatch('common:equip', {key: item.key, type: 'mount'});
},
hatchPet (pet) {
this.closeHatchPetDialog();
this.$store.dispatch('common:hatch', {egg: pet.eggKey, hatchingPotion: pet.potionKey});
this.text(this.$t('hatchedPet', {egg: pet.eggName, potion: pet.potionName}));
},
onDragStart (ev, food) {
this.currentDraggingFood = food;
@@ -952,14 +838,6 @@
});
}
},
closeHatchPetDialog () {
this.$root.$emit('bv::hide::modal', 'hatching-modal');
},
resetHatchablePet ($event) {
if (!$event) {
this.hatchablePet = null;
}
},
onFoodClicked ($event, food) {
if (this.currentDraggingFood === null || this.currentDraggingFood !== food) {
this.currentDraggingFood = food;
@@ -981,11 +859,6 @@
lastMouseMoveEvent = $event;
}
},
hideFlag () {
this.$store.dispatch('user:set', {
'flags.tutorial.common.mounts': true,
});
},
},
};
</script>

63
website/client/components/inventory/stable/welcomeModal.vue Normal file
View File

@@ -0,0 +1,63 @@
<template lang="pug">
b-modal#welcome-modal(:ok-only="true",
:ok-title="$t('gotIt')",
:visible="!hideDialog",
:hide-header="true",
@hide="hideFlag()")
div.content
div.npc_matt
h1.page-header(v-once) {{ $t('welcomeStable') }}
div.content-text(v-once) {{ $t('welcomeStableText') }}
</template>
<style lang="scss" scoped>
@import '~client/assets/scss/modal.scss';
#welcome-modal {
@include centeredModal();
.npc_matt {
margin: 0 auto 21px auto;
}
.content {
text-align: center;
// the modal already has 15px padding
margin-left: 33px;
margin-right: 33px;
margin-top: 25px;
}
.content-text {
font-size: 14px;
font-weight: normal;
line-height: 1.43;
width: 400px;
}
.modal-footer {
justify-content: center;
}
}
</style>
<script>
import { mapState } from 'client/libs/store';
export default {
computed: {
...mapState({
hideDialog: 'user.data.flags.tutorial.common.mounts',
}),
},
methods: {
hideFlag () {
this.$store.dispatch('user:set', {
'flags.tutorial.common.mounts': true,
});
},
},
};
</script>

13
website/client/mixins/petMixin.js Normal file
View File

@@ -0,0 +1,13 @@
export default {
methods: {
closeHatchPetDialog () {
this.$root.$emit('bv::hide::modal', 'hatching-modal');
},
hatchPet (pet) {
this.closeHatchPetDialog();
this.$store.dispatch('common:hatch', {egg: pet.eggKey, hatchingPotion: pet.potionKey});
this.text(this.$t('hatchedPet', {egg: pet.eggName, potion: pet.potionName}));
},
},
};