Tasks: fixes and new edit task design (#9442)

* add missing tooltips

* makes sure due date is update correctly, fixes #9436

* do not collapse checklist when casting spells, fixes #9345

* start to fix spells drawer

* fix drawer requiring two clicks to open

website/client/components/header/notificationsDropdown.vue

@@ -1,7 +1,7 @@
 <template lang="pug">
 menu-dropdown.item-notifications(:right="true")
   div(slot="dropdown-toggle")
-    div
+    div(v-b-tooltip.hover.bottom="$t('notifications')")
       message-count(v-if='notificationsCount > 0', :count="notificationsCount", :top="true")
       .svg-icon.notifications(v-html="icons.notifications")
   div(slot="dropdown-content")
@@ -58,7 +58,6 @@ menu-dropdown.item-notifications(:right="true")
 import axios from 'axios';
 import isEmpty from 'lodash/isEmpty';
 import map from 'lodash/map';
-// import bTooltip from 'bootstrap-vue/lib/directives/tooltip';
 
 import { mapState } from 'client/libs/store';
 import * as Analytics from 'client/libs/analytics';

website/client/components/memberDetails.vue

@@ -20,17 +20,17 @@
           .is-buffed(v-if="isBuffed")
             .svg-icon(v-html="icons.buff")
         span.small-text.character-level {{ characterLevel }}
-    .progress-container(b-tooltip.hover.bottom="$t('health')")
+    .progress-container(v-b-tooltip.hover.bottom="$t('health')")
       .svg-icon(v-html="icons.health")
       .progress
         .progress-bar.bg-health(:style="{width: `${percent(member.stats.hp, MAX_HEALTH)}%`}")
       span.small-text {{member.stats.hp | statFloor}} / {{MAX_HEALTH}}
-    .progress-container(b-tooltip.hover.bottom="$t('experience')")
+    .progress-container(v-b-tooltip.hover.bottom="$t('experience')")
       .svg-icon(v-html="icons.experience")
       .progress
         .progress-bar.bg-experience(:style="{width: `${percent(member.stats.exp, toNextLevel)}%`}")
       span.small-text {{member.stats.exp | statFloor}} / {{toNextLevel}}
-    .progress-container(v-if="hasClass", b-tooltip.hover.bottom="$t('mana')")
+    .progress-container(v-if="hasClass", v-b-tooltip.hover.bottom="$t('mana')")
       .svg-icon(v-html="icons.mana")
       .progress
         .progress-bar.bg-mana(:style="{width: `${percent(member.stats.mp, maxMP)}%`}")
@@ -186,7 +186,6 @@ import Profile from './userMenu/profile';
 import { toNextLevel } from '../../common/script/statHelpers';
 import statsComputed from '../../common/script/libs/statsComputed';
 import percent from '../../common/script/libs/percent';
-// import bTooltip from 'bootstrap-vue/lib/directives/tooltip';
 
 import buffIcon from 'assets/svg/buff.svg';
 import healthIcon from 'assets/svg/health.svg';

website/client/components/tasks/spells.vue

@@ -9,11 +9,14 @@ div(v-if='user.stats.lvl > 10')
       .col-4.mana
         .img(:class='`shop_${spell.key} shop-sprite item-img`')
 
-  drawer(:title="$t('skillsTitle')",
+  drawer(
+    :title="$t('skillsTitle')",
     v-if='user.stats.class && !user.preferences.disableClasses',
-    v-mousePosition="30", @mouseMoved="mouseMoved($event)",
+    v-mousePosition="30", 
+    @mouseMoved="mouseMoved($event)",
     :openStatus='openStatus',
-    v-on:toggled='drawerToggled')
+    @toggled='drawerToggled'
+  )
     div(slot="drawer-slider")
       .container.spell-container
         .row

website/client/components/tasks/task.vue

@@ -56,10 +56,15 @@
               .svg-icon(v-html="icons.checklist")
               span {{ checklistProgress }}
           label.custom-control.custom-checkbox.checklist-item(
-            v-if='!castingSpell && !task.collapseChecklist',
+            v-if='!task.collapseChecklist',
             v-for="item in task.checklist", :class="{'checklist-item-done': item.completed}",
           )
-            input.custom-control-input(type="checkbox", :checked="item.completed", @change="toggleChecklistItem(item)")
+            input.custom-control-input(
+              type="checkbox",
+              :checked="item.completed",
+              @change="toggleChecklistItem(item)",
+              :disabled="castingSpell",
+            )
             span.custom-control-indicator
             span.custom-control-description(v-markdown='item.text')
         .icons.small-text.d-flex.align-items-center
@@ -593,7 +598,8 @@ export default {
       return moment().diff(this.task.date, 'days') >= 0;
     },
     dueIn () {
-      const dueIn = moment().to(this.task.date);
+      // this.task && is necessary to make sure the computed property updates correctly
+      const dueIn = moment().to(this.task && this.task.date);
       return this.$t('dueIn', {dueIn});
     },
     hasTags () {

website/client/components/ui/drawer.vue

@@ -179,7 +179,7 @@ export default {
       standardPage.style.paddingBottom = `${drawerHeight + minPaddingBottom}px`;
     },
     toggle () {
-      this.open = !this.open;
+      this.open = !this.isOpen;
       this.$emit('toggled', this.open);
     },
   },