From a58dcf7cdfb40b377573917e38cdda72af37cea6 Mon Sep 17 00:00:00 2001
From: Franco Fichtner <franco@opnsense.org>
Date: Tue, 21 Nov 2017 08:50:54 +0000
Subject: [PATCH] ui: the neverending tab story #1922

---
 .../OPNsense/Diagnostics/systemhealth.volt    | 27 +++++--------------
 .../mvc/app/views/OPNsense/Proxy/index.volt   |  8 +++---
 .../opnsense/assets/stylesheets/main.scss     |  8 ++++--
 .../www/themes/opnsense/build/css/main.css    |  9 ++++---
 4 files changed, 23 insertions(+), 29 deletions(-)

diff --git a/src/opnsense/mvc/app/views/OPNsense/Diagnostics/systemhealth.volt b/src/opnsense/mvc/app/views/OPNsense/Diagnostics/systemhealth.volt
index 352088f49..b252bdac0 100644
--- a/src/opnsense/mvc/app/views/OPNsense/Diagnostics/systemhealth.volt
+++ b/src/opnsense/mvc/app/views/OPNsense/Diagnostics/systemhealth.volt
@@ -196,7 +196,7 @@
                     rrd_name = subitem + '-' + category;
 
                     // create dropdown menu
-                    tabs+='<a data-toggle="dropdown" href="#" class="dropdown-toggle pull-right visible-lg-inline-block visible-md-inline-block visible-xs-inline-block visible-sm-inline-block" role="button" style="border-left: 1px dashed lightgray;">';
+                    tabs+='<a data-toggle="dropdown" href="#" class="dropdown-toggle pull-right visible-lg-inline-block visible-md-inline-block visible-xs-inline-block visible-sm-inline-block" role="button">';
                     tabs+='<b><span class="caret"></span></b>';
                     tabs+='</a>';
                     tabs+='<a data-toggle="tab" onclick="$(\'#'+rrd_name+'\').click();" class="visible-lg-inline-block visible-md-inline-block visible-xs-inline-block visible-sm-inline-block" style="border-right:0px;"><b>'+category[0].toUpperCase() + category.slice(1)+'</b></a>';
@@ -208,12 +208,12 @@
                         subitem=data["data"][category][count];
                         rrd_name = subitem + '-' + category;
 
-                        if (subitem==active_subitem) {
-                            tabs += '<li class="active"><a data-toggle="tab" class="rrd-item" onclick="getdata(\''+rrd_name+'\',0,0,120,0);" id="'+rrd_name+'"><i class="fa fa-check-square"></i> ' + subitem[0].toUpperCase() + subitem.slice(1) + '</a></li>';
+                        if (subitem==active_subitem && category==active_category) {
+                            tabs += '<li class="active"><a data-toggle="tab" class="rrd-item" onclick="getdata(\''+rrd_name+'\',0,0,120,0);" id="'+rrd_name+'">' + subitem[0].toUpperCase() + subitem.slice(1) + '</a></li>';
                             rrd=rrd_name;
                             getdata(rrd_name,0,0,120,false,0); // load initial data
                         } else {
-                            tabs += '<li><a data-toggle="tab" class="rrd-item"  onclick="getdata(\''+rrd_name+'\',0,0,120,0);" id="'+rrd_name+'"><i class="fa fa-check-square"></i> ' + subitem[0].toUpperCase() + subitem.slice(1) + '</a></li>';
+                            tabs += '<li><a data-toggle="tab" class="rrd-item"  onclick="getdata(\''+rrd_name+'\',0,0,120,0);" id="'+rrd_name+'">' + subitem[0].toUpperCase() + subitem.slice(1) + '</a></li>';
                         }
                     }
                     tabs+='</ul>';
@@ -228,7 +228,7 @@
                         var rrd_item_name = $(this).attr('id').split('-')[0].toLowerCase();
                         $.map(data, function(value, key){
                             if (key.toLowerCase() == rrd_item_name) {
-                                rrd_item.html('<i class="fa fa-check-square"></i> ' + value['descr']);
+                                rrd_item.html(value['descr']);
                             }
 
                         });
@@ -579,9 +579,7 @@
 
 </script>
 
-
-
-<div class="content-box tab-content">
+<div class="tab-content">
     <div id="tab_1" class="tab-pane fade in">
         <div class="panel panel-primary">
             <div class="panel-heading panel-heading-sm">
@@ -597,7 +595,6 @@
                         <div class="col-md-12"></div>
                         <div class="col-md-4">
                             <b>{{ lang._('Zoom level') }}:</b>
-
                             <form onChange="UpdateOptions()">
                                 <div class="btn-group btn-group-xs" data-toggle="buttons" id="zoom">
                                     <!-- The zoom buttons are generated based upon the current dataset -->
@@ -606,7 +603,6 @@
                         </div>
                         <div class="col-md-2">
                             <b>{{ lang._('Inverse') }}:</b>
-
                             <form onChange="UpdateOptions()">
                                 <div class="btn-group btn-group-xs" data-toggle="buttons">
                                     <label class="btn btn-default active">
@@ -621,7 +617,6 @@
                         </div>
                         <div class="col-md-4">
                             <b>{{ lang._('Resolution') }}:</b>
-
                             <form onChange="UpdateOptions()">
                                 <div class="btn-group btn-group-xs" data-toggle="buttons">
                                     <label class="btn btn-default active">
@@ -641,7 +636,6 @@
                         </div>
                         <div class="col-md-2">
                             <b>{{ lang._('Show Tables') }}:</b>
-
                             <form onChange="UpdateOptions()">
                                 <div class="btn-group btn-group-xs" data-toggle="buttons">
                                     <label class="btn btn-default active">
@@ -657,11 +651,8 @@
                     </div>
                 </div>
             </div>
-
         </div>
 
-        <!--<div id="stepsize"></div>-->
-
         <!-- place holder for the chart itself -->
         <div class="panel panel-default">
             <div class="panel-heading">
@@ -707,8 +698,6 @@
                 </div>
             </div>
         </div>
-
-
     </div>
 
     <div id="chart_details_table" class="col-md-12" style="display: none;">
@@ -716,7 +705,6 @@
             <div class="panel-heading">
                 <h3 class="panel-title">
                   {{ lang._('Current View - Details') }}
-
                 </h3>
             </div>
             <div class="panel-body">
@@ -743,7 +731,6 @@
 
                 <div class="table-responsive">
                     <table class="table table-condensed table-hover table-striped">
-
                         <thead>
                         <tr id="table_view_heading" class="active">
                             <!-- Dynamic data -->
@@ -755,8 +742,6 @@
                     </table>
                 </div>
             </div>
-
         </div>
     </div>
-
 </div>
diff --git a/src/opnsense/mvc/app/views/OPNsense/Proxy/index.volt b/src/opnsense/mvc/app/views/OPNsense/Proxy/index.volt
index 568df8c8d..ee6890fd3 100644
--- a/src/opnsense/mvc/app/views/OPNsense/Proxy/index.volt
+++ b/src/opnsense/mvc/app/views/OPNsense/Proxy/index.volt
@@ -208,13 +208,15 @@ POSSIBILITY OF SUCH DAMAGE.
             {% endfor %}
 
         <li role="presentation" class="dropdown {% if mainForm['activetab']|default("") == active_subtab %}active{% endif %}">
-            <a data-toggle="dropdown" href="#" class="dropdown-toggle pull-right visible-lg-inline-block visible-md-inline-block visible-xs-inline-block visible-sm-inline-block" role="button" style="border-left: 1px dashed lightgray;">
+            <a data-toggle="dropdown" href="#" class="dropdown-toggle pull-right visible-lg-inline-block visible-md-inline-block visible-xs-inline-block visible-sm-inline-block" role="button">
                 <b><span class="caret"></span></b>
             </a>
-            <a data-toggle="tab" href="#subtab_{{tab['subtabs'][0][0]}}" class="visible-lg-inline-block visible-md-inline-block visible-xs-inline-block visible-sm-inline-block" style="border-right:0px;"><b>{{tab[1]}}</b></a>
+            <a data-toggle="tab" onclick="$('#subtab_item_{{tab['subtabs'][0][0]}}').click();" class="visible-lg-inline-block visible-md-inline-block visible-xs-inline-block visible-sm-inline-block" style="border-right:0px;"><b>{{tab[1]}}</b></a>
             <ul class="dropdown-menu" role="menu">
                 {% for subtab in tab['subtabs']|default({})%}
-                <li class="{% if mainForm['activetab']|default("") == subtab[0] %}active{% endif %}"><a data-toggle="tab" href="#subtab_{{subtab[0]}}"><i class="fa fa-check-square"></i> {{subtab[1]}}</a></li>
+                <li class="{% if mainForm['activetab']|default("") == subtab[0] %}active{% endif %}">
+                    <a data-toggle="tab" id="subtab_item_{{subtab[0]}}" href="#subtab_{{subtab[0]}}">{{subtab[1]}}</a>
+                </li>
                 {% endfor %}
             </ul>
         </li>
diff --git a/src/opnsense/www/themes/opnsense/assets/stylesheets/main.scss b/src/opnsense/www/themes/opnsense/assets/stylesheets/main.scss
index f3e82e6e8..2945e09da 100644
--- a/src/opnsense/www/themes/opnsense/assets/stylesheets/main.scss
+++ b/src/opnsense/www/themes/opnsense/assets/stylesheets/main.scss
@@ -362,6 +362,11 @@ body{
   border-bottom: none;
 }
 
+.dropdown-menu > li > a,
+.dropdown-header {
+  padding: 3px 10px;
+}
+
 .nav-tabs {
   margin-right: 1px;
   border-bottom: 1px solid darken(map-get($colors, bordergrey), 30%);
@@ -399,7 +404,6 @@ body{
   border-right: 1px solid darken(map-get($colors, bordergrey), 30%);
   border-top: 1px solid darken(map-get($colors, bordergrey), 30%);
   border-left: 1px solid darken(map-get($colors, bordergrey), 30%);
-  border-bottom: 1px solid darken(#FBFBFB, 5%);
 }
 
 .nav-tabs > li > a.visible-lg-inline-block:not(.pull-right) {
@@ -410,7 +414,7 @@ body{
 
 .nav-tabs > li > a.visible-lg-inline-block.pull-right {
   border-left: 0px !important;
-  padding-left: 0px !important;
+  padding-left: 5px !important;
   padding-right: 10px !important;
 }
 
diff --git a/src/opnsense/www/themes/opnsense/build/css/main.css b/src/opnsense/www/themes/opnsense/build/css/main.css
index 60c1d6302..24f507b66 100644
--- a/src/opnsense/www/themes/opnsense/build/css/main.css
+++ b/src/opnsense/www/themes/opnsense/build/css/main.css
@@ -5649,6 +5649,10 @@ body {
 .collapse .list-group-item:last-child {
   border-bottom: none; }
 
+.dropdown-menu > li > a,
+.dropdown-header {
+  padding: 3px 10px; }
+
 .nav-tabs {
   margin-right: 1px;
   border-bottom: 1px solid #999999; }
@@ -5680,8 +5684,7 @@ body {
 .nav-tabs > li.active > a:focus {
   border-right: 1px solid #999999;
   border-top: 1px solid #999999;
-  border-left: 1px solid #999999;
-  border-bottom: 1px solid #eeeeee; }
+  border-left: 1px solid #999999; }
 
 .nav-tabs > li > a.visible-lg-inline-block:not(.pull-right) {
   border-top-right-radius: 0px !important;
@@ -5690,7 +5693,7 @@ body {
 
 .nav-tabs > li > a.visible-lg-inline-block.pull-right {
   border-left: 0px !important;
-  padding-left: 0px !important;
+  padding-left: 5px !important;
   padding-right: 10px !important; }
 
 .nav-tabs.nav-justified {