Add hover state to views dropdown in web ui

lavalamp · May 26, 2015 · edc6c02 · edc6c02
1 parent 3975f6e
commit edc6c02
Show file tree

Hide file tree

Showing 8 changed files with 1,523 additions and 1,478 deletions.
diff --git a/pkg/ui/datafile.go b/pkg/ui/datafile.go
diff --git a/third_party/ui/bower_components/angular-material/angular-material.js b/third_party/ui/bower_components/angular-material/angular-material.js
@@ -7709,7 +7709,10 @@ function SelectProvider($$interimElementProvider) {
       var focusedNode = centeredNode || optionNodes[0];
       if (focusedNode) {
         opts.focusedNode = focusedNode;
-        focusedNode.focus();
+        // This is commented out to fix an issue where the first option remains in focus
+        // even after you mouseover to a different option.
+        // It is fixed in the compiled source and is here for reference.
+        // focusedNode.focus();
       }
 
       if (isScrollable) {

diff --git a/third_party/ui/bower_components/angular-material/angular-material.min.js b/third_party/ui/bower_components/angular-material/angular-material.min.js
diff --git a/third_party/ui/bower_components/angular-material/modules/closure/select/select.js b/third_party/ui/bower_components/angular-material/modules/closure/select/select.js
@@ -543,7 +543,7 @@ function SelectProvider($$interimElementProvider) {
         contentEl: element.find('md-content'),
         backdrop: opts.hasBackdrop && angular.element('<md-backdrop class="md-select-backdrop">')
       });
-    
+
       var optionNodes = [];
 
       configureAria();
@@ -757,7 +757,10 @@ function SelectProvider($$interimElementProvider) {
       var focusedNode = centeredNode || optionNodes[0];
       if (focusedNode) {
         opts.focusedNode = focusedNode;
-        focusedNode.focus();
+        // This is commented out to fix an issue where the first option remains in focus
+        // even after you mouseover to a different option.
+        // It is fixed in the compiled source and is here for reference.
+        // focusedNode.focus();
       }
 
       if (isScrollable) {

diff --git a/www/app/assets/css/app.css b/www/app/assets/css/app.css
@@ -407,6 +407,17 @@ md-toolbar h1 {
   vertical-align: middle;
   padding: 2px;
 }
+md-select-menu.md-default-theme md-option:focus:not([selected]) {
+  background: #eeeeee;
+}
+md-select-menu md-option {
+  transition: box-shadow 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), background-color 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), -webkit-transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
+  transition: box-shadow 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), background-color 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
+}
+md-select-menu md-option:not([disabled]):hover,
+md-select-menu md-option:not([disabled]):focus {
+  background-color: rgba(158, 158, 158, 0.2);
+}
 .dashboard .body-wrapper {
   padding: 25px;
 }