[nifi] branch main updated: NIFI-8062: make tabs functional with keyboard

[markap14]

This is an automated email from the ASF dual-hosted git repository.

markap14 pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/nifi.git


The following commit(s) were added to refs/heads/main by this push:
     new 5c79553  NIFI-8062: make tabs functional with keyboard
5c79553 is described below

commit 5c79553af6dc5e20830a12a4dc6c56b07692c1fa
Author: Shane Ardell <shane.m.ard...@gmail.com>
AuthorDate: Fri Oct 9 14:12:05 2020 -0400

    NIFI-8062: make tabs functional with keyboard
---
 .../main/webapp/js/jquery/tabbs/jquery.tabbs.css   | 24 ++++++++++++++++------
 .../main/webapp/js/jquery/tabbs/jquery.tabbs.js    |  2 +-
 2 files changed, 19 insertions(+), 7 deletions(-)

diff --git 
a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/tabbs/jquery.tabbs.css
 
b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/tabbs/jquery.tabbs.css
index 9e5ac33..3d18e71 100644
--- 
a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/tabbs/jquery.tabbs.css
+++ 
b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/tabbs/jquery.tabbs.css
@@ -22,25 +22,37 @@ ul.tab-pane {
     display: block;
 }
 
-.tab {
+.tab,
+.tab button {
     float: left;
-    background-color: #eaeef0;
-    margin-right: 2px;
     text-align: center;
     cursor: pointer;
     line-height: 32px;
     font-weight: 500;
     height: 31px;
     min-width: 88px;
-    padding: 0 10px;
-    border: 1px solid #CCDADB;
     text-transform: uppercase;
     color: #004849;
+}
+
+.tab {
+    margin-right: 2px;
+    background-color: #eaeef0;
+    border: 1px solid #CCDADB;
     border-bottom: 0px;
 }
 
-.tab:hover {
+.tab button {
+    background-color: transparent;
+    border: 1px solid transparent;
+    padding: 0 20px;
+    width: auto;
+}
+
+.tab:not(.selected-tab) button:hover,
+.tab:not(.selected-tab) button:focus {
     border: 1px solid #004849;
+    border-bottom: 0;
 }
 
 .selected-tab {
diff --git 
a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/tabbs/jquery.tabbs.js
 
b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/tabbs/jquery.tabbs.js
index a684bab..b31e3a2 100644
--- 
a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/tabbs/jquery.tabbs.js
+++ 
b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/tabbs/jquery.tabbs.js
@@ -65,7 +65,7 @@
                 $('#' + 
tabDefinition.tabContentId).addClass(tabContentStyle).hide();
 
                 // prep the tab itself
-                var tab = 
$('<li></li>').text(tabDefinition.name).addClass(options.tabStyle).click(function
 () {
+                var tab = 
$('<li></li>').addClass(options.tabStyle).append('<button>' + 
tabDefinition.name + '</button>').click(function () {
                     // hide all tab content
                     $('.' + tabContentStyle).hide();