mirror of
https://github.com/HabitRPG/habitica.git
synced 2025-12-17 22:57:21 +01:00
33b249d078
* Added initial bailey api
* wip
* implement new panel header
* Fixed lint
* add ability to mark notification as seen
* add notification count, remove top badge from user and add ability to mark multiple notifications as seen
* add support dismissall and mark all as read
* do not dismiss actionable notif
* mark as seen when menu is opened instead of closed
* implement ordering, list of actionable notifications
* add groups messages and fix badges count
* add notifications for received cards
* send card received notification to target not sender
* rename notificaion field
* fix integration tests
* mark cards notifications as read and update tests
* add mystery items notifications
* add unallocated stats points notifications
* fix linting
* simplify code
* refactoring and fixes
* fix dropdown opening
* start splitting notifications into their own component
* add notifications for inbox messages
* fix unit tests
* fix default buttons styles
* add initial bailey support
* add title and tests to new stuff notification
* add notification if a group task needs more work
* add tests and fixes for marking a task as needing more work
* make sure user._v is updated
* remove console.log
* notification: hover status and margins
* start styling notifications, add separate files and basic functionalities
* fix tests
* start adding mystery items notification
* wip card notification
* fix cards text
* initial implementation inbox messages
* initial implementation group messages
* disable inbox notifications until mobile is ready
* wip group chat messages
* finish mystery and card notifications
* add bailey notification and fix a lot of stuff
* start adding guilds and parties invitations
* misc invitation fixes
* fix lint issues
* remove old code and add key to notifications
* fix tests
* remove unused code
* add link for public guilds invite
* starts to implement needs work notification design and feature
* fixes to needs work, add group task approved notification
* finish needs work feature
* lots of fixes
* implement quest notification
* bailey fixes and static page
* routing fixes
* fixes # this.$store.dispatch(guilds:join, {groupId: group.id, type: party});
* read notifications on click
* chat notifications
* fix tests for chat notifications
* fix chat notification test
* fix tests
* fix tests (again)
* try awaiting
* remove only
* more sleep
* add bailey tests
* fix icons alignment
* fix issue with multiple points notifications
* remove merge code
* fix rejecting guild invitation
* make remove area bigger
* fix error with notifications and add migration
* fix migration
* fix typos
* add cleanup migration too
* notifications empty state, new counter color, fix marking messages as seen in guilds
* fixes
* add image and install correct packages
* fix mongoose version
* update bailey
* typo
* make sure chat is marked as read after other requests
89 lines
1.9 KiB
Vue
89 lines
1.9 KiB
Vue
<!--
|
|
A simplified dropdown component that doesn't rely on buttons as toggles like bootstrap-vue
|
|
-->
|
|
|
|
<template lang="pug">
|
|
.habitica-menu-dropdown.dropdown(@click="toggleDropdown()", :class="{open: isOpen}")
|
|
.habitica-menu-dropdown-toggle
|
|
slot(name="dropdown-toggle")
|
|
.dropdown-menu(:class="{'dropdown-menu-right': right}")
|
|
slot(name="dropdown-content")
|
|
</template>
|
|
|
|
<style lang="scss">
|
|
@import '~client/assets/scss/colors.scss';
|
|
|
|
.habitica-menu-dropdown.open {
|
|
.habitica-menu-dropdown-toggle .svg-icon {
|
|
color: $white !important;
|
|
}
|
|
}
|
|
</style>
|
|
<style lang='scss' scoped>
|
|
@import '~client/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);
|
|
max-height: calc(100vh - 100px);
|
|
overflow: auto;
|
|
left: inherit;
|
|
right: 0px !important;
|
|
|
|
/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 ? true : false;
|
|
return this.isDropdownOpen;
|
|
},
|
|
},
|
|
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>
|