Matteo Pagliazzi
8f5a0cfe79
* add achievements to user * add placeholder strings * add to achievements to common script * add onboarding achievements category * add notifications * more notifications * award achievements * wip notification panel * add achievements icons and copy * do not count onboarding tasks for the created task achievement * add notes * sprites, fixes and completion status and reward * add onboarding panel * add toggle * fix toggle size * fix tests * fix typo * add notification * start adding modal * fix remove button positionin, timeout, progress bar * modal + fixes * disable broken social links from level up modal * change toggle icon color on hover * add border bottom to onboarding guide panel * add collapse animation * expanded onboarding on first open * onboarding: flip toggle colors * onboarding: show progress bar all the time * onboarding: fix panel closing on click * onboarding modal: add close icon and fix padding * wip: add migration for existing users * fix titles in guide * fix achievements copy * do not award completed task achievement when direction is down * start implementing new achievements * start migrating client * remove social links from achievements modals * prevent skipping tutorial + fix achievement notification * sync fixes * start redesign achievement modal * misc fixes to achievements, polish generic achievement modal and hatched pet modal * add special badge for onboarding * fix badge condition * modals fixes * hatched pet modal: add close icon * fix badge typo * fix justin button * new scrolling behavior for dropdowns * fix strings capitalization * add common tests * add api unit tests * add date check * achievements modal polishing * typos * add toggle for achievements categories * typo * fix test * fix edit avatar modal cannot be closed * finish migration and correct launch date * fix migration * migration fixes * fix tests
110 lines
2.2 KiB
Vue
110 lines
2.2 KiB
Vue
<!--
|
|
A simplified dropdown component that doesn't rely on buttons as toggles like bootstrap-vue
|
|
-->
|
|
|
|
<template>
|
|
<div
|
|
class="habitica-menu-dropdown dropdown"
|
|
role="button"
|
|
tabindex="0"
|
|
:class="{open: isOpen}"
|
|
:aria-pressed="isPressed"
|
|
@click="toggleDropdown()"
|
|
@keypress.enter.space.stop.prevent="toggleDropdown()"
|
|
>
|
|
<div class="habitica-menu-dropdown-toggle">
|
|
<slot name="dropdown-toggle"></slot>
|
|
</div>
|
|
<div
|
|
class="dropdown-menu"
|
|
:class="{'dropdown-menu-right': right}"
|
|
>
|
|
<slot name="dropdown-content"></slot>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="scss">
|
|
@import '~@/assets/scss/colors.scss';
|
|
.habitica-menu-dropdown {
|
|
&:hover,
|
|
&:focus { // NB focus styles match the hover styles for .svg-icon
|
|
outline: none;
|
|
}
|
|
|
|
&.open {
|
|
.habitica-menu-dropdown-toggle .svg-icon {
|
|
color: $white !important;
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
<style lang='scss' scoped>
|
|
@import '~@/assets/scss/colors.scss';
|
|
|
|
.dropdown {
|
|
&:hover {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.dropdown-menu {
|
|
cursor: auto;
|
|
box-shadow: 0 2px 2px 0 rgba($black, 0.16), 0 1px 4px 0 rgba($black, 0.12);
|
|
left: inherit;
|
|
right: 0px !important;
|
|
|
|
::v-deep .dropdown-separated {
|
|
border-bottom: 1px solid $gray-500;
|
|
}
|
|
}
|
|
|
|
&.open {
|
|
.dropdown-menu {
|
|
display: block;
|
|
margin-top: 8px;
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
right: Boolean,
|
|
openStatus: Number,
|
|
},
|
|
data () {
|
|
return {
|
|
isDropdownOpen: false,
|
|
};
|
|
},
|
|
computed: {
|
|
isOpen () {
|
|
// Open status is a number so we can tell if the value was passed
|
|
if (this.openStatus !== undefined) return this.openStatus === 1;
|
|
return this.isDropdownOpen;
|
|
},
|
|
isPressed () {
|
|
return this.isOpen ? 'true' : 'false';
|
|
},
|
|
},
|
|
mounted () {
|
|
document.documentElement.addEventListener('click', this._clickOutListener);
|
|
},
|
|
destroyed () {
|
|
document.removeEventListener('click', this._clickOutListener);
|
|
},
|
|
methods: {
|
|
_clickOutListener (e) {
|
|
if (!this.$el.contains(e.target) && this.isOpen) {
|
|
this.toggleDropdown();
|
|
}
|
|
},
|
|
toggleDropdown () {
|
|
this.isDropdownOpen = !this.isOpen;
|
|
this.$emit('toggled', this.isDropdownOpen);
|
|
},
|
|
},
|
|
};
|
|
</script>
|