Tasks v2 Part 2 (#9236)

* start updating colors for tasks controls

* finish updating controls colors

* change hoevr behavior

* change transition duration

* update color with transition

* refactor menu wip

* wip

* upgrade vue deps

* fix warnings

* fix menu

* misc fixes

* more fixes

* fix badge

* fix margins in menu

* wip tooltips

* tooltips

* fix checklist colors

* add badges

* fix quick add input

* add transition to task controls too

* add batch add

* fix task filtering

* finish tasks badges

* fix menu

* upgrade deps

* fix shop items using all the same image

* fix animation

* disable client tests until we remove phantomjs

* revert changes to tasks colors

* fix opacity in task modal inputs

* remove client unit tests from travis

* wip task dropdown

* fix z-index for task footer/header

* fixes and add files

* fixes

* bigger clickable area

* more space to open task dropdown

* droddown position

* fix menu position

* make sure other dropdowns get closed correctly

* fixes

* start to fix z-index

* draggable = false for task dropdown

* fix for dropdown position

* implement move to top / bottom

* fix push to bottom

* typo

* fix drag and drop

* use standard code

* wider click area for dropdown

* unify badge look

* fix padding

* misc fixes

* more fixes

* make dropdown scrollable

* misc fixes

* fix padding for notes

* use existing code instead of new props

website/client/components/ui/customMenuDropdown.vue

@@ -0,0 +1,75 @@
+<!-- 
+A simplified dropdown component that doesn't rely on buttons as toggles  like bootstrap-vue
+-->
+
+<template lang="pug">
+.habitica-menu-dropdown.item-with-icon.dropdown(@click="toggleDropdown()", :class="{open: isDropdownOpen}")
+  .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;
+
+    /deep/ .dropdown-separated {
+      border-bottom: 1px solid $gray-500;
+    }
+  }
+
+  &.open {
+    .dropdown-menu {
+      display: block;
+      margin-top: 16px;
+    }
+  }
+}
+</style>
+
+<script>
+export default {
+  props: ['right'],
+  data () {
+    return {
+      isDropdownOpen: false,
+    };
+  },
+  mounted () {
+    document.documentElement.addEventListener('click', this._clickOutListener);
+  },
+  destroyed () {
+    document.removeEventListener('click', this._clickOutListener);
+  },
+  methods: {
+    _clickOutListener (e) {
+      if (!this.$el.contains(e.target) && this.isDropdownOpen) {
+        this.toggleDropdown();
+      }
+    },
+    toggleDropdown () {
+      this.isDropdownOpen = !this.isDropdownOpen;
+    },
+  },
+};
+</script>