From a3a7b868ba8e66a3b16d00914eeef6f6e268bd81 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Xavier=20Juli=C3=A1n?= <xavier.julian@kaleidos.net>
Date: Thu, 22 Sep 2016 16:18:20 +0200
Subject: [PATCH] Add timeout to hide epics table options

---
 .../epics-table/epics-table.controller.coffee        | 12 ++++++++++--
 .../epics/dashboard/epics-table/epics-table.jade     |  9 +++++++--
 .../epics/dashboard/epics-table/epics-table.scss     |  6 ++++++
 3 files changed, 23 insertions(+), 4 deletions(-)

diff --git a/app/modules/epics/dashboard/epics-table/epics-table.controller.coffee b/app/modules/epics/dashboard/epics-table/epics-table.controller.coffee
index 45e41d45..4934b4d9 100644
--- a/app/modules/epics/dashboard/epics-table/epics-table.controller.coffee
+++ b/app/modules/epics/dashboard/epics-table/epics-table.controller.coffee
@@ -23,10 +23,11 @@ taiga = @.taiga
 class EpicsTableController
     @.$inject = [
         "$tgConfirm",
-        "tgEpicsService"
+        "tgEpicsService",
+        "$timeout"
     ]
 
-    constructor: (@confirm, @epicsService) ->
+    constructor: (@confirm, @epicsService, @timeout) ->
         @.displayOptions = false
         @.displayVotes = true
         @.column = {
@@ -49,4 +50,11 @@ class EpicsTableController
             .then null, () => # on error
                 @confirm.notify("error")
 
+    hoverEpicTableOption: () ->
+        if @.timer
+            @timeout.cancel(@.timer)
+
+    hideEpicTableOption: () ->
+        return @.timer = @timeout (=> @.displayOptions = false), 400
+
 angular.module("taigaEpics").controller("EpicsTableCtrl", EpicsTableController)
diff --git a/app/modules/epics/dashboard/epics-table/epics-table.jade b/app/modules/epics/dashboard/epics-table/epics-table.jade
index 7ab6a81b..fe99fcbd 100644
--- a/app/modules/epics/dashboard/epics-table/epics-table.jade
+++ b/app/modules/epics/dashboard/epics-table/epics-table.jade
@@ -40,11 +40,16 @@ mixin epicSwitch(name, model)
             translate="EPICS.TABLE.PROGRESS"
             ng-if="vm.column.progress"
         )
-        .epics-table-options-wrapper(ng-mouseleave="vm.displayOptions = false")
+        .epics-table-options-wrapper(
+            ng-mouseleave="vm.hideEpicTableOption()"
+        )
             button.epics-table-option-button.e2e-epics-column-button(ng-click="vm.displayOptions = true")
                 span(translate="EPICS.TABLE.VIEW_OPTIONS")
                 tg-svg(svg-icon="icon-arrow-down")
-            form.epics-table-dropdown.e2e-epics-column-dropdown(ng-show="vm.displayOptions")
+            form.epics-table-dropdown.e2e-epics-column-dropdown(
+                ng-show="vm.displayOptions"
+                ng-mouseenter="vm.keepEpicTableOption()"
+            )
                 .fieldset
                     label.epics-table-options-vote(
                         translate="EPICS.TABLE.VOTES"
diff --git a/app/modules/epics/dashboard/epics-table/epics-table.scss b/app/modules/epics/dashboard/epics-table/epics-table.scss
index 2651dde4..8814fbc0 100644
--- a/app/modules/epics/dashboard/epics-table/epics-table.scss
+++ b/app/modules/epics/dashboard/epics-table/epics-table.scss
@@ -44,6 +44,12 @@
     top: 1.3rem;
     width: 250px;
     z-index: 99;
+    &.ng-hide-remove {
+        animation: dropdownFade .2s;
+    }
+    &.ng-hide-add {
+        animation: dropdownFade .2s reverse;
+    }
     .fieldset {
         @include font-size(small);
         border-bottom: 1px solid $whitish;