Tabs can set on top, bottom or hidden. Fix "variable $tabgroups masks earlier" Errorlog.

git-svn-id: https://svn.fhem.de/fhem/trunk/fhem@4775 2b470e98-0d58-463d-a4d8-8e2adae1ed80

CHANGED

@@ -1,6 +1,7 @@
 # Add changes at the top of the list. Keep it in ASCII, and 80-char wide.
 # Do not insert empty lines here, update check depends on it.
 - SVN
+  - feature: DASHBOARD:  Tabs can set on top, bottom or hidden. 
   - bugfix:  SYSMON: another format for ifconfig output
   - feature: DASHBOARD: Use longpoll to update content.
 			 rowcentercolwidth can now be defined per column.

FHEM/95_Dashboard.pm

@@ -4,8 +4,7 @@
 #
 ########################################################################################
 # Released : 20.12.2013 @svenson08
-# Version  : 2.00
+# Version :
-# Revisions:
 # 1.00: Released to testers
 # 1.02: Don't show link on Groups with WebLinks. Hide GroupToogle Button (new Attribut dashboard_showtooglebuttons).
 #       Set the Columnheight (new Attribur dashboard_colheight).
@@ -31,15 +30,11 @@
 #		Provisionally the columns widths are dependent on the total width of the Dashboard.
 # 2.01: attibute dashboard_colwidth replace with dashboard_rowcentercolwidth. rowcentercolwidth can now be defined per 
 #			column. Delete Groups Attribut with Value 1. Dashboard can hide FHEMWEB Roomliste and Header => Fullscreenmode
+# 2.02: Tabs can set on top, bottom or hidden. Fix "variable $tabgroups masks earlier" Errorlog.
 #
 # Known Bugs/Todos:
-# x TODO: groups attribut with value 1 -> erase attribute?
-# x TODO: dashboard_colwidth -> <1.col, 2.col, 3.col ...> only <1.col>, first col = value, split rest on colcount.
-# TODO: Tab top, bottom, hidden
-# BUG: Longpoll dosen't work on Dashboard
 # BUG: wenn ich mehrere Tabs habe und zb. im Uten Tab eine Lampe schalte, springt er danach direkt in den ersten Tab. Finde ich etwas unglücklich.
 # TODO: Icon on Tabs
-# x NICETOHAVE: Ich würde mir jetzt noch wünschen, das ich den linken und oberen Bereich in einem Style ausblenden kann
 # Log 1, "[DASHBOARD simple debug] '".$g."' ";
 ########################################################################################
 #
@@ -84,7 +79,7 @@ my $fwjquery = "jquery.min.js";
 my $fwjqueryui = "jquery-ui.min.js";
 my $dashboardname = "Dashboard"; # Link Text
 my $dashboardhiddenroom = "DashboardRoom"; # Hiddenroom
-my $dashboardversion = "2.01";
+my $dashboardversion = "2.02";
 # -------------------------------------------------------------------------------------------
 
 sub Dashboard_Initialize ($) {
@@ -101,7 +96,6 @@ sub Dashboard_Initialize ($) {
 						 "dashboard_rowtopheight ".
 						 "dashboard_rowbottomheight ".
 						 "dashboard_row:top,center,bottom,top-center,center-bottom,top-center-bottom ".						 
-						 "dashboard_showbuttonbar:top,bottom,hidden ".
 						 "dashboard_showhelper:0,1 ".
 						 "dashboard_showtooglebuttons:0,1 ".						 
 						 
@@ -128,12 +122,15 @@ sub Dashboard_Initialize ($) {
 						 #new attribute vers. 2.01
 						 "dashboard_rowcentercolwidth ".
 						 "dashboard_showfullsize:0,1 ".
+						 #new attribute vers. 2.02
+						 "dashboard_showtabs:tabs-and-buttonbar-at-the-top,tabs-at-the-top-buttonbar-hidden,tabs-and-buttonbar-on-the-bottom,tabs-on-the-bottom-buttonbar-hidden,tabs-and-buttonbar-hidden ".
 						 
 						 #obsolete - erase in future releases
 						 "dashboard_groups ". # obsolet -> erase in future releases
 						 "dashboard_colheight ". # obsolet -> erase in future releases
 						 "dashboard_sorting ". # obsolet -> erase in future releases
 						 "dashboard_colwidth ". # obsolet -> erase in future releases
+						 "dashboard_showbuttonbar:dont-use-this-attribute ". # obsolet -> erase in future releases
 						 
 						 $readingFnAttributes;					  
 
@@ -141,29 +138,15 @@ sub Dashboard_Initialize ($) {
   $data{FWEXT}{Dashboardx}{LINK} = "?room=".$dashboardhiddenroom;
   $data{FWEXT}{Dashboardx}{NAME} = $dashboardname;	
 	
-  #$hash->{FW_detailFn}  = "Dashboard_detailFn";
-  #$hash->{FW_summaryFn}  = "Dashboard_detailFn";
-	
   return undef;
 }
 
-#sub Dashboard_detailFn()
-#{
-#  my ($FW_wname, $d, $room, $pageHash) = @_; # pageHash is set for summaryFn.
-#  return NewDashboardAsHtml($d);
-#}
-#sub NewDashboardAsHtml($)
-#{
-# my $ret = ""; 
-# $ret .= "<table class=\"roomoverview dashboard\" id=\"dashboard\">\n";
-# $ret .= "</table>\n";  
-#}
-
 sub DashboardAsHtml($)
 {
  my ($d) = @_;
  
  my $ret = "";
+ my $showbuttonbar = "hidden";
  my $debugfield = "hidden";
  
  my $h = $defs{$d};
@@ -173,17 +156,15 @@ sub DashboardAsHtml($)
  ######################### Read Dashboard Attributes and set Default-Values ####################################
  my $disable = AttrVal($defs{$d}{NAME}, "disable", 0);
  my $colcount = AttrVal($defs{$d}{NAME}, "dashboard_colcount", 1);
- #my $colwidth = AttrVal($defs{$d}{NAME}, "dashboard_colwidth", 320); #current
+ my $colwidth = AttrVal($defs{$d}{NAME}, "dashboard_rowcentercolwidth", 100);
- my $colwidth = AttrVal($defs{$d}{NAME}, "dashboard_rowcentercolwidth", 100); #future
  my $colheight = AttrVal($defs{$d}{NAME}, "dashboard_rowcenterheight", 400); 
  my $rowtopheight = AttrVal($defs{$d}{NAME}, "dashboard_rowtopheight", 250);
  my $rowbottomheight = AttrVal($defs{$d}{NAME}, "dashboard_rowbottomheight", 250); 
  my $showhelper = AttrVal($defs{$d}{NAME}, "dashboard_showhelper", 1);
- my $showbuttonbar = AttrVal($defs{$d}{NAME}, "dashboard_showbuttonbar", "top");
+ my $showtabs = AttrVal($defs{$d}{NAME}, "dashboard_showtabs", "tabs-and-buttonbar-at-the-top"); 
  my $showtooglebuttons = AttrVal($defs{$d}{NAME}, "dashboard_showtooglebuttons", 1); 
  my $showfullsize  = AttrVal($defs{$d}{NAME}, "dashboard_showfullsize", 0); 
  
- 
  my $row = AttrVal($defs{$d}{NAME}, "dashboard_row", "center");
  my $debug = AttrVal($defs{$d}{NAME}, "dashboard_debug", "0");
  my $lockstate = AttrVal($defs{$d}{NAME}, "dashboard_lockstate", "unlock");
@@ -229,12 +210,14 @@ sub DashboardAsHtml($)
  }
  
  if ($debug == 1) { $debugfield = "edit" }; 
+ if ($showtabs eq "tabs-and-buttonbar-at-the-top") { $showbuttonbar = "top"; }
+ if ($showtabs eq "tabs-and-buttonbar-on-the-bottom") { $showbuttonbar = "bottom"; }
  if ($showbuttonbar eq "hidden") { $lockstate = "lock" };
+ 
  if ($activetab > $tabcount) { $activetab = $tabcount; }
 
- $colwidth =~ tr/,/:/; #future release
+ $colwidth =~ tr/,/:/;
- #if (not ($colwidth =~ /^\d+$/)) { $colwidth = 320 }; #current
+ #if ($colwidth =~/[a-zA-Z]+$/) { Log 1, "[DASHBOARD simple debug] Nicht nur zahlen ".$colwidth; } #future release
- #if ( ($colwidth =~ /[a-zA-Z]/)) { $colwidth = 150 }; #current
 
  if (not ($colheight =~ /^\d+$/)) { $colheight = 400 };  
  if (not ($rowtopheight =~ /^\d+$/)) { $rowtopheight = 50 };
@@ -254,12 +237,16 @@ sub DashboardAsHtml($)
  $ret .= "<input type=\"$debugfield\" size=\"100%\" id=\"dashboard_attr\" value=\"$name,$dbwidth,$showhelper,$lockstate,$showbuttonbar,$colheight,$showtooglebuttons,$colcount,$rowtopheight,$rowbottomheight,$tabcount,$activetab,$colwidth,$showfullsize\">\n";
  $ret .= "<input type=\"$debugfield\" size=\"100%\" id=\"dashboard_jsdebug\" value=\"\">\n";
  $ret .= "</div></td></tr>\n"; 
- 
  $ret .= "<tr><td><div id=\"tabs\" class=\"dashboard_tabs\">\n";  
+ 
  ########################### Dashboard Tab-Liste ##############################################
- $ret .= "	<ul id=\"dashboard_tabnav\" class=\"dashboard_tabnav\">\n";		
+ my $tabshow = "hidden";	
- if ($showbuttonbar eq "top") { $ret .= BuildButtonBar($d,$showbuttonbar); }
+ if ($showtabs eq "tabs-and-buttonbar-at-the-top" || $showtabs eq "tabs-at-the-top-buttonbar-hidden") { $tabshow = "top";}
- for (my $i=0;$i<$tabcount;$i++){ $ret .= "    <li class=\"dashboard_tab\"><a href=\"#dashboard_tab".$i."\">".trim($tabnames[$i])."</a></li>"; } 
+ if ($showtabs eq "tabs-and-buttonbar-on-the-bottom" || $showtabs eq "tabs-on-the-bottom-buttonbar-hidden") { $tabshow = "bottom";}
+	
+ $ret .= "	<ul id=\"dashboard_tabnav\" class=\"dashboard_tabnav dashboard_tabnav_".$tabshow."\">\n";	 
+ if ($showtabs ne "tabs-at-the-top-buttonbar-hidden" &&  $showtabs ne "tabs-on-the-bottom-buttonbar-hidden" && $showtabs ne "tabs-and-buttonbar-hidden") { $ret .= BuildButtonBar($d,$showtabs); }
+ for (my $i=0;$i<$tabcount;$i++){ $ret .= "    <li class=\"dashboard_tab dashboard_tab_".$tabshow."\"><a href=\"#dashboard_tab".$i."\">".trim($tabnames[$i])."</a></li>"; } 
  $ret .= "	</ul>\n"; 
  ##############################################################################################
  
@@ -283,7 +270,6 @@ sub DashboardAsHtml($)
 	 $ret .= " 	</ul>\n";
 	 $ret .= "	</div>\n"; 
  }
- if ($showbuttonbar eq "bottom") { $ret .= BuildButtonBar($d,$showbuttonbar); }
  $ret .= "</div></td></tr>\n";
  $ret .= "</table>\n";
  
@@ -334,12 +320,19 @@ sub BuildDashboardBottomRow($$$$){
 
 sub BuildButtonBar($$){
  my ($d,$pos) = @_;
- my $ret;
+ my $ret = "";
- $ret .= "<div class=\"dashboard_buttonbar dashboard_buttonbar_".$pos."\">\n";
+ my $cssclass = "hidden";
- $ret .= "	<div class=\"dashboard_button\"> <span class=\"dashboard_button_icon dashboard_button_iconset\"></span> <a id=\"dashboard_button_set\" href=\"javascript:dashboard_setposition()\" title=\"Set the Position\">Set</a> </div>\n";
+ 
- $ret .= "	<div class=\"dashboard_button\"> <a id=\"dashboard_button_lock\" href=\"javascript:dashboard_tooglelock()\" title=\"Lock Dashboard\">Lock</a> </div>\n";
+ if ($pos eq "tabs-and-buttonbar-at-the-top") { $cssclass = "top"; }
- $ret .= "	<div class=\"dashboard_button\"> <span class=\"dashboard_button_icon dashboard_button_icondetail\"></span> <a id=\"dashboard_button_detail\" href=\"/fhem?detail=$d\" title=\"Dashboard Details\">Detail</a> </div>\n";		
+ if ($pos eq "tabs-and-buttonbar-on-the-bottom") { $cssclass = "bottom"; }
- $ret .= "</div>\n";
+ 
+ if ($pos ne "hidden") {
+	 $ret .= "<div class=\"dashboard_buttonbar dashboard_buttonbar_".$cssclass."\">\n";
+	 $ret .= "	<div class=\"dashboard_button\"> <span class=\"dashboard_button_icon dashboard_button_iconset\"></span> <a id=\"dashboard_button_set\" href=\"javascript:dashboard_setposition()\" title=\"Set the Position\">Set</a> </div>\n";
+	 $ret .= "	<div class=\"dashboard_button\"> <a id=\"dashboard_button_lock\" href=\"javascript:dashboard_tooglelock()\" title=\"Lock Dashboard\">Lock</a> </div>\n";
+	 $ret .= "	<div class=\"dashboard_button\"> <span class=\"dashboard_button_icon dashboard_button_icondetail\"></span> <a id=\"dashboard_button_detail\" href=\"/fhem?detail=$d\" title=\"Dashboard Details\">Detail</a> </div>\n";		
+	 $ret .= "</div>\n";
+ }
  return $ret;
 }
 
@@ -505,22 +498,16 @@ sub CheckDashboardAttributUssage($) { # replaces old disused attributes and thei
  # ---------------- Delete empty Groups entries ---------------------------------------------------------- 
  my $tabgroups = AttrVal($defs{$d}{NAME}, "dashboard_tab1groups", "999");
  if ($tabgroups eq "1"  ) { FW_fC("deleteattr ".$d." dashboard_tab1groups"); }
- my $tabgroups = AttrVal($defs{$d}{NAME}, "dashboard_tab2groups", "999");
+ $tabgroups = AttrVal($defs{$d}{NAME}, "dashboard_tab2groups", "999");
  if ($tabgroups eq "1"  ) { FW_fC("deleteattr ".$d." dashboard_tab2groups"); } 
- my $tabgroups = AttrVal($defs{$d}{NAME}, "dashboard_tab3groups", "999");
+ $tabgroups = AttrVal($defs{$d}{NAME}, "dashboard_tab3groups", "999");
  if ($tabgroups eq "1"  ) { FW_fC("deleteattr ".$d." dashboard_tab3groups"); }  
- my $tabgroups = AttrVal($defs{$d}{NAME}, "dashboard_tab4groups", "999");
+ $tabgroups = AttrVal($defs{$d}{NAME}, "dashboard_tab4groups", "999");
  if ($tabgroups eq "1"  ) { FW_fC("deleteattr ".$d." dashboard_tab4groups"); }   
- my $tabgroups = AttrVal($defs{$d}{NAME}, "dashboard_tab5groups", "999");
+ $tabgroups = AttrVal($defs{$d}{NAME}, "dashboard_tab5groups", "999");
  if ($tabgroups eq "1"  ) { FW_fC("deleteattr ".$d." dashboard_tab5groups"); }   
  # -------------------------------------------------------------------------------------------------
   
- # -------------- Replace older dashboard_showbuttonbar value (outdated 01.2014) ------------------------------
- my $showbuttonbarvalue = AttrVal($defs{$d}{NAME}, "dashboard_showbuttonbar", "top");
- if ($showbuttonbarvalue eq "0") { FW_fC("attr ".$d." dashboard_showbuttonbar hidden"); }
- if ($showbuttonbarvalue eq "1") { FW_fC("attr ".$d." dashboard_showbuttonbar top"); }
- # ------------------------------------------------------------------------------------------------------------------------
- 
  # ---- detached / transferred from the old attribute to the tab extension (outdated 02.2014) ------
  my $colwidth = AttrVal($defs{$d}{NAME}, "dashboard_colwidth", "");
  if ($colwidth ne "") {
@@ -540,7 +527,6 @@ sub CheckDashboardAttributUssage($) { # replaces old disused attributes and thei
 	{ FW_fC("deleteattr ".$d." dashboard_groups"); }
 	$detailnote = $detailnote." [dashboard_groups -> dashboard_tab1groups]";
  } 
- 
  my $sorting = AttrVal($defs{$d}{NAME}, "dashboard_sorting", "");
  if ($sorting ne "") { #convert old sorting in new 
 	my @sortings = split(":", $sorting);
@@ -575,8 +561,16 @@ sub CheckDashboardAttributUssage($) { # replaces old disused attributes and thei
  }
  # ------------------------------------------------------------------------------------------------------------------------ 
  
+ # ---- detached / transferred from the old attribute to the tab extension (outdated 02.2014) ------ 
+ my $buttonbar = AttrVal($defs{$d}{NAME}, "dashboard_showbuttonbar", ""); 
+ if ($buttonbar ne "") { 
+	FW_fC("deleteattr ".$d." dashboard_showbuttonbar"); 
+	$detailnote = $detailnote." [dashboard_showbuttonbar]";
+ }
+ # ------------------------------------------------------------------------------------------------------------------------ 
+
  # Get out any change to the Logfile 
- if ($showbuttonbarvalue eq "0" || $showbuttonbarvalue eq "1" || $groups ne "" || $sorting ne "") {   
+ if ($buttonbar ne "" || $groups ne "" || $sorting ne "") {   
   Log3 $hash, 3, "[".$hash->{NAME}. " V".$dashboardversion."]"." Using an outdated no longer used Attribute or Value. This has been corrected. Don't forget to save config. ".$detailnote; 
  }
 }
@@ -847,10 +841,10 @@ sub Dashboard_attr($$$) {
 		Hide FHEMWEB Roomliste (complete left side) and Page Header if Value is 1.<br>
 		Default: 0
     </li><br>		
- <a name="dashboard_showbuttonbar"></a>	
+ <a name="dashboard_showtabs"></a>	
-    <li>dashboard_showbuttonbar<br>
+    <li>dashboard_showtabs<br>
-        Displayed a buttonbar panel. Can set on Top or on Bottom of the Dashboard If the bar is hidden dashboard_lockstate the "lock" is used.<br>
+		Displays the Tabs on top or bottom, or hides them. This also applies to the Buttonbar. If the Buttonbar is hidden dashboard_lockstate the "lock" is used.<br>
-		Default: top
+		Default: tabs-and-buttonbar-at-the-top
     </li><br>
  <a name="dashboard_showhelper"></a>		
     <li>dashboard_showhelper<br>
@@ -1048,7 +1042,7 @@ sub Dashboard_attr($$$) {
   <a name="dashboard_lockstate"></a>		
     <li>dashboard_lockstate<br>
 		Bei Dashboard Einstellung "unlock" kann dieses bearbeitet werden. Bei der Einstellung "lock" können keine Änderung vorgenommen werden. <br>
-		Wenn die Leiste ausgeblendet ist (dashboard_showbuttonbar) ist das Dashboard gespert. Die Bearbeitung ist daher nur mit sichtbarer Buttonbar möglich ist.<br>
+		Wenn die Leiste ausgeblendet ist (dashboard_showtabs) ist das Dashboard gespert. Die Bearbeitung ist daher nur mit sichtbarer Buttonbar möglich ist.<br>
 		Standard: unlock
     </li><br>	
   <a name="dashboard_colcount"></a>	
@@ -1063,10 +1057,10 @@ sub Dashboard_attr($$$) {
 		Blendet die FHEMWEB Raumliste (kompleter linker Bereich der Seite) und den oberen Bereich von FHEMWEB aus wenn der Wert auf 1 gesetzt ist.<br>
 		Default: 0
     </li><br>		
- <a name="dashboard_showbuttonbar"></a>	
+ <a name="dashboard_showtabs"></a>	
-    <li>dashboard_showbuttonbar<br>
+    <li>dashboard_showtabs<br>
-		Eine Buttonbar kann über oder unter dem Dashboard angezeigt werden. Wenn die Leiste ausgeblendet wird ist das Dashboard gespert.<br>
+		Zeigt die Tabs des Dashboards oben oder unten an, oder blendet diese aus. Dies gilt auch für die Schalterleiste. Wenn die Schalterleiste ausgeblendet wird ist das Dashboard gespert.<br>
-		Standard: top
+		Standard: tabs-and-buttonbar-at-the-top
     </li><br>	
  <a name="dashboard_showhelper"></a>		
     <li>dashboard_showhelper<br>

www/pgm2/dashboard.js

@@ -9,6 +9,8 @@
 // 2.00: First Changes vor Dashboard Tabs. Change method store Positiondata. optimization restore Positiondata. Clear poor routines.
 //			  Change max/min Values for Groupresize.	Top- and Bottom-Row always 100%
 // 2.01: Add Longpoll function. Dashboard can hide FHEMWEB Roomliste and Header.
+// 2.02: Tabs can set on top, bottom or hidden
+//
 // Known Bugs/Todo's
 // See 95_Dashboard.pm
 //########################################################################################
@@ -55,8 +57,7 @@ function restoreOrder() {
  var params = (document.getElementById("dashboard_attr").value).split(","); //get current Configuration
  var ActiveTab = $("#tabs .ui-tabs-panel:visible");
  var ActiveTabId = ActiveTab.attr("id").substring(14,13);
- //var colwidth = ((100/params[7])-(0.5/params[7]))+"%"; //current
+ var aColWidth = GetColWidth(params[7],params[12]);
- var aColWidth = GetColWidth(params[7],params[12]); //future
 
  //--------------------------------------------- Set Row and Column Settings --------------------------------------------------------------------------------------------
  $("#dashboard").width(params[1]);
@@ -65,8 +66,7 @@ function restoreOrder() {
  if (ActiveTab.has("#dashboard_rowbottom_tab"+ActiveTabId).length){ $("#dashboard_rowbottom_tab"+ActiveTabId).height(params[9]); } 
 
  for (var i = 0, n = params[7]; i <= n; i++) {  
-	//if (ActiveTab.has("#dashboard_tab"+ActiveTabId+"column"+i).length) { $("#dashboard_tab"+ActiveTabId+"column"+i).width(colwidth); } //current
+	if (ActiveTab.has("#dashboard_tab"+ActiveTabId+"column"+i).length) { $("#dashboard_tab"+ActiveTabId+"column"+i).width(aColWidth[i]+"%"); }
-	if (ActiveTab.has("#dashboard_tab"+ActiveTabId+"column"+i).length) { $("#dashboard_tab"+ActiveTabId+"column"+i).width(aColWidth[i]+"%"); } //future
  }	
  if (params[2] == 1) { $(".ui-row").addClass("dashboard_columnhelper"); } else { $(".ui-row").removeClass("dashboard_columnhelper"); }//set showhelper
  //--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
@@ -240,7 +240,7 @@ $(document).ready( function () {
         stop: function() { saveOrder(); }
     }); 
 	
-	if (params[4] == 0){ //set if buttonbar not show
+	if (params[4] == "hidden") {	
 		dashboard_modifyWidget();
 		dashboard_setlock();		
 	} 
@@ -314,6 +314,8 @@ $(document).ready( function () {
 			restoreOrder(); 
 		}   
 	});	
+	if ($("#dashboard_tabnav").hasClass("dashboard_tabnav_bottom")) { $(".dashboard_tabnav").appendTo(".dashboard_tabs"); } //set Tabs on the Bottom	
+	$(".dashboard_tab_hidden").css("display", "none"); //hide Tabs
 	//-------------------------------------------------------------------------------------------------------------------------------------		
 });
 

www/pgm2/dashboard_darkstyle.css

@@ -42,9 +42,13 @@
 .dashboard_tabnav:after { content: ""; display: table; border-collapse: collapse; clear: both; }
 .dashboard_tabpanel { border: 1px solid #cccccc; background-color: #333333; border: 1px solid #dddddd;
 					border-radius: 8px 8px 8px 8px; box-shadow: 5px 5px 5px #000000; }
-.dashboard_tab { border: 1px solid #cccccc;	border-bottom-width: 0;	border-top-left-radius: 8px;
+.dashboard_tab_top { border: 1px solid #cccccc;	border-bottom-width: 0;	border-top-left-radius: 8px;
 				border-top-right-radius: 8px; margin: 0 .5em -1px 0; float: left; padding: .5em 1em; }
-.dashboard_tab.ui-tabs-active { background-color: #333333; font-weight: bold; }
+.dashboard_tab_top.ui-tabs-active { background-color: #333333; font-weight: bold; }
+.dashboard_tab_bottom { border: 1px solid #cccccc;	border-top-width: 0;	border-bottom-left-radius: 8px;
+				border-bottom-right-radius: 8px; margin: 0 .5em -1px 0; float: left; padding: .5em 1em; }
+.dashboard_tab_bottom.ui-tabs-active { background-color: #333333; font-weight: bold; }
+
 .dashboard_tabcontent { width: 100%; padding: 0; margin: 0; }
 
 .dashboard_row { width: 100%; height: inherit; }

www/pgm2/dashboard_ios7.css

@@ -41,8 +41,10 @@
 .dashboard_tabnav:before,
 .dashboard_tabnav:after { content: ""; display: table; border-collapse: collapse; clear: both; }
 .dashboard_tabpanel { border: 1px solid #cccccc; background-color: #cbcbcb;  }
-.dashboard_tab { border: 1px solid #cccccc;	border-bottom-width: 0;	margin: 0 .5em -1px 0; float: left; padding: .5em 1em; }
+.dashboard_tab_top { border: 1px solid #cccccc;	border-bottom-width: 0;	margin: 0 .5em -1px 0; float: left; padding: .5em 1em; }
-.dashboard_tab.ui-tabs-active { background-color: #cbcbcb; font-weight: bold; }
+.dashboard_tab_top.ui-tabs-active { background-color: #cbcbcb; font-weight: bold; }
+.dashboard_tab_bottom { border: 1px solid #cccccc;	border-top-width: 0;	margin: 0 .5em -1px 0; float: left; padding: .5em 1em; }
+.dashboard_tab_bottom.ui-tabs-active { background-color: #cbcbcb; font-weight: bold; }
 .dashboard_tabcontent { width: 100%; padding: 0; margin: 0; }
 
 .dashboard_row { width: 100%; height: inherit; }

www/pgm2/dashboard_style.css

@@ -42,9 +42,12 @@
 .dashboard_tabnav:after { content: ""; display: table; border-collapse: collapse; clear: both; }
 .dashboard_tabpanel { border: 1px solid #cccccc; background-color: #F0F0D8; border: 1px solid #dddddd;
 					border-radius: 8px 8px 8px 8px; }
-.dashboard_tab { border: 1px solid #cccccc;	border-bottom-width: 0;	border-top-left-radius: 8px;
+.dashboard_tab_top { border: 1px solid #cccccc;	border-bottom-width: 0;	border-top-left-radius: 8px;
 				border-top-right-radius: 8px; margin: 0 .5em -1px 0; float: left; padding: .5em 1em; }
-.dashboard_tab.ui-tabs-active { background-color: #F0F0D8; font-weight: bold; }
+.dashboard_tab_top.ui-tabs-active { background-color: #F0F0D8; font-weight: bold; }				
+.dashboard_tab_bottom { border: 1px solid #cccccc;	border-top-width: 0;	border-bottom-left-radius: 8px;
+				border-bottom-right-radius: 8px; margin: 0 .5em -1px 0; float: left; padding: .5em 1em; }				
+.dashboard_tab_bottom.ui-tabs-active { background-color: #F0F0D8; font-weight: bold; }	
 .dashboard_tabcontent { width: 100%; padding: 0; margin: 0; }
 
 .dashboard_row { width: 100%; height: inherit; }