Fix hover state on task assignment (no tests) (#1488)

Fixe hover state on task assignment

- deferred rendering of card, assignment, tooltips
- correct hover behavior

Author: joshsmith

app/components/task-card/user/selected-item.js

@@ -1,5 +1,9 @@
 import Component from '@ember/component';
+import TooltipForDropdownMixin from 'code-corps-ember/mixins/tooltip-for-dropdown';
 
-export default Component.extend({
-  classNames: ['select-inline', 'select-inline__selected-item']
+export default Component.extend(TooltipForDropdownMixin, {
+  classNames: ['select-inline', 'select-inline__selected-item'],
+
+  dropdownOpen: false,
+  tooltipShown: false
 });

app/components/task-card/user/unselected-item.js

@@ -1,5 +1,9 @@
 import Component from '@ember/component';
+import TooltipForDropdownMixin from 'code-corps-ember/mixins/tooltip-for-dropdown';
 
-export default Component.extend({
-  classNames: ['select-inline', 'select-inline__unselected-item']
+export default Component.extend(TooltipForDropdownMixin, {
+  classNames: ['select-inline', 'select-inline__unselected-item'],
+
+  dropdownOpen: false,
+  tooltipShown: false
 });

app/mixins/tooltip-for-dropdown.js

@@ -0,0 +1,25 @@
+import Mixin from '@ember/object/mixin';
+import { get, observer, set } from '@ember/object';
+
+export default Mixin.create({
+  dropdownOpen: false,
+  tooltipShown: false,
+
+  mouseEnter() {
+    let dropdownOpen = get(this, 'dropdownOpen');
+    if (dropdownOpen) {
+      return;
+    } else {
+      set(this, 'tooltipShown', true);
+    }
+  },
+
+  mouseLeave() {
+    set(this, 'tooltipShown', false);
+  },
+
+  dropdownOpened: observer('dropdownOpen', function() {
+    let tooltipShown = get(this, 'dropdownOpen') ? false : null;
+    set(this, 'tooltipShown', tooltipShown);
+  })
+});

app/templates/components/task-card/user/selected-item.hbs

@@ -1,9 +1,10 @@
 {{#if select.selected}}
-  <img class="select-inline__selected-item__icon" src={{select.selected.photoThumbUrl}} />
+  <img data-test-selected-icon class="select-inline__selected-item__icon" src={{select.selected.photoThumbUrl}} />
   {{#tooltip-on-component
     class='tooltip'
     effect='none'
     enableLazyRendering=true
+    isShown=tooltipShown
     keepInWindow=true
     side='bottom'
   }}

app/templates/components/task-card/user/unselected-item.hbs

@@ -1,5 +1,5 @@
 {{#if task.userTask.isLoading}}
-  <span class="select-inline__loading-item__icon"></span>
+  <span data-test-loading-icon class="select-inline__loading-item__icon"></span>
   <span class="select-inline__loading-item__text"></span>
 {{else}}
   <span data-test-unselected-icon class="select-inline__unselected-item__icon">
@@ -9,6 +9,8 @@
     class='tooltip'
     effect='none'
     enableLazyRendering=true
+    event='none'
+    isShown=tooltipShown
     keepInWindow=true
     side='bottom'
   }}