Adding effects for immediately after click. Addresses #788

sandialabs · Nov 9, 2017 · a904ced · a904ced
1 parent c303e38
commit a904ced
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 3 deletions.
diff --git a/web-server/plugins/slycat-parameter-image/css/ui.css b/web-server/plugins/slycat-parameter-image/css/ui.css
@@ -776,6 +776,12 @@ rights in this software.
   text-overflow: ellipsis;
   overflow: hidden;
 }
+.slycat-category-filter .category-button.fresh:hover
+{
+  border-color: #cfcfcf;
+  background-color: #e7e7e7;
+  color: #8f8f8f;
+}
 .auto-width .slycat-category-filter .category-button {
   padding-right: 30px;
   overflow: visible;
@@ -788,7 +794,9 @@ rights in this software.
   border-bottom-width: 1px;
   border-radius: 0 0 3px 3px;
 }
-.slycat-category-filter .category-button.active {
+.slycat-category-filter .category-button.active,
+ .slycat-category-filter .category-button.active.fresh:hover
+{
   background-color: #abf;
   border-color: #97A3FE;
   color: #333;
@@ -804,6 +812,7 @@ rights in this software.
 .slycat-category-filter .category-button.active:hover {
   background-color: #cccccc;
   border-color: #cccccc;
+  color: #8f8f8f;
 }
 .slycat-category-select {
   /*max-width: 70px;*/

diff --git a/web-server/plugins/slycat-parameter-image/js/category-select.js b/web-server/plugins/slycat-parameter-image/js/category-select.js
@@ -22,6 +22,7 @@ require(["slycat-server-root", "knockout", "knockout-mapping", "lodash"], functi
       };
 
       this.toggle = function(category) {
+        category.fresh(true);
         if(category.selected())
         {
           category.selected(false);
@@ -32,6 +33,10 @@ require(["slycat-server-root", "knockout", "knockout-mapping", "lodash"], functi
         }
       };
 
+      this.mouseOut = function(category) {
+        category.fresh(false);
+      }
+
       self.style = ko.pureComputed(function()
       {
         var result = {};

diff --git a/web-server/plugins/slycat-parameter-image/js/filter-manager.js b/web-server/plugins/slycat-parameter-image/js/filter-manager.js
@@ -251,7 +251,7 @@ define("slycat-parameter-image-filter-manager", ["slycat-server-root", "slycat-d
                   type: "GET",
                   url : server_root + "models/" + vm.model_id() + "/arraysets/data-table/metadata?unique=0/" + targetFilter.index() + "/...",
                   success : function(result) {
-                     _(result.unique[0].values[0]).sort().each(function(c) { targetFilter.categories.push({value: ko.observable(c), selected: ko.observable(true)}); }).value(); // selected by default
+                     _(result.unique[0].values[0]).sort().each(function(c) { targetFilter.categories.push({value: ko.observable(c), selected: ko.observable(true), fresh: ko.observable(false)}); }).value(); // selected by default
                     // Bookmark once all unique values are set
                     self.bookmarker.updateState( {"allFilters" : mapping.toJS(vm.allFilters())} );
                   },

diff --git a/web-server/plugins/slycat-parameter-image/slycat-category-select.html b/web-server/plugins/slycat-parameter-image/slycat-category-select.html
@@ -1,6 +1,6 @@
 <div class="slycat-category-filter" data-bind="style:style">
   <div data-bind="foreach: categories" class="slycat-category-select" role="group" style="position: relative">
-    <div class="category-button" data-bind="text: value, css: { active: selected }, click: $parent.toggle">
+    <div class="category-button" data-bind="text: value, css: { active: selected, fresh: fresh }, click: $parent.toggle, event: { mouseout: $parent.mouseOut }">
     </div>
   </div>
 </div>