First pass at some tableless tabs - I need CSS help! :-) MDL-7782

diff --git a/lib/weblib.php b/lib/weblib.php
index 2fe3cfd01cb85dbb95985071c0e4bf948557c363..00c59e2baf3ab2b7fe6c7de25d16ad98ceb0b2d4 100644 (file)
--- a/lib/weblib.php
+++ b/lib/weblib.php
@@ -5405,62 +5405,6 @@ class tabobject {
         $this->title = $title ? $title : $text;
         $this->linkedwhenselected = $linkedwhenselected;
     }
-
-
-    /// a method to look after the messy business of setting up a tab cell
-    /// with all the appropriate classes and things
-    function createtab ($selected=false, $inactive=false, $activetwo=false, $last=false) {
-        $str  = '';
-        $astr = '';
-        $cstr = '';
-
-    /// The text and anchor for this tab
-        if ($inactive || $activetwo || ($selected && !$this->linkedwhenselected)) {
-            $astr .= $this->text;
-        } else {
-            $astr .= '<a href="'.$this->link.'" title="'.$this->title.'">'.$this->text.'</a>';
-        }
-
-    /// There's an IE bug with background images in <a> tags
-    /// so we put a div around so that we can add a background image
-        $astr = '<div class="tablink">'.$astr.'</div>';
-
-    /// Set the class for inactive cells
-        if ($inactive) {
-            $cstr .= ' inactive';
-
-        /// Set the class for active cells in the second row
-            if ($activetwo) {
-                $cstr .= ' activetwo';
-            }
-
-    /// Set the class for the selected cell
-        } else if ($selected) {
-            $cstr .= ' selected';
-
-    /// Set the standard class for a cell
-        } else {
-            $cstr .= ' active';
-        }
-
-
-    /// Are we on the last tab in this row?
-        if ($last) {
-            $astr = '<div class="last">'.$astr.'</div>';
-        }
-
-    /// Lets set up the tab cell
-        $str .= '<td';
-        if (!empty($cstr)) {
-            $str .= ' class="'.ltrim($cstr).'"';
-        }
-        $str .= '>';
-        $str .= $astr;
-        $str .= '</td>';
-
-        return $str;
-    }
-
 }
 
 
@@ -5507,42 +5451,86 @@ function print_tabs($tabrows, $selected=NULL, $inactive=NULL, $activetwo=NULL, $
         $activetwo = array();
     }
 
-/// A table to encapsulate the tabs
-    $str = '<table class="tabs" cellspacing="0">';
-    $str .= '<tr><td class="left side"></td><td>';
+/// Convert the tab rows into a tree that's easier to process
+    if (!$tree = convert_tabrows_to_tree($tabrows, $selected, $inactive, $activetwo)) {
+        return false;
+    }
 
-    $rowcount = count($tabrows);
-/// Cycle through the tab rows
-    foreach ($tabrows as $row) {
+/// Print out the current tree of tabs (this function is recursive)
+   
+    $output = convert_tree_to_html($tree);
 
-        $rowcount--;
+    $output = "\n\n".'<div class="tabtree">'.$output.'</div><div class="clearer"> </div>'."\n\n";
 
-        $str .= '<table class="tabrow r'.$rowcount.'" cellspacing="0">';
-        $str .= '<tr>';
+/// We're done!
 
-        $numberoftabs = count($row);
-        $currenttab   = 0;
-        $cstr         = '';
-        $astr         = '';
+    if ($return) {
+        return $output;
+    }
+    echo $output;
+}
 
 
-    /// Cycle through the tabs
-        foreach ($row as $tab) {
-            $currenttab++;
+function convert_tree_to_html($tree, $row=0) {
+
+    $str = "\n".'<ul class="tabrow'.$row.'">'."\n";
+
+    foreach ($tree as $tab) {
+        $str .= '<li>';
+
+        if ($tab->active || $tab->selected) { 
+            $linkclass = ' class="selected"';
+        } else {
+            $linkclass = '';
+        }
 
-            $str .= $tab->createtab( ($selected == $tab->id), (in_array($tab->id, $inactive)), (in_array($tab->id, $activetwo)), ($currenttab == $numberoftabs) );
+        if ($tab->inactive || $tab->active || ($tab->selected && !$tab->linkedwhenselected)) {
+            $astr = '<a href="#" title="'.$tab->title.'"'.$linkclass.'>'.$tab->text.'</a>';
+        } else {
+            $astr = '<a href="'.$tab->link.'" title="'.$tab->title.'"'.$linkclass.'>'.$tab->text.'</a>';
         }
 
-        $str .= '</tr>';
-        $str .= '</table>';
+        $str .= '<div class="tablink">'.$astr.'</div>';
+
+        if (!empty($tab->subtree)) { 
+            $str .= convert_tree_to_html($tab->subtree, $row+1);
+        }
+
+        $str .= '</li>'."\n";
     }
-    $str .= '</td><td class="right side"></td></tr>';
-    $str .= '</table>';
+    $str .= '</ul>'."\n";
 
-    if ($return) {
-        return $str;
+    return $str;
+}
+
+
+function convert_tabrows_to_tree($tabrows, $selected, $inactive, $activetwo) {
+
+/// Work backwards through the rows (bottom to top) collecting the tree as we go.
+
+    $tabrows = array_reverse($tabrows);
+
+    $subtree = array();
+
+    foreach ($tabrows as $row) {
+        $tree = array();
+
+        foreach ($row as $tab) {
+            $tab->inactive = in_array($tab->id, $inactive);
+            $tab->active = in_array($tab->id, $activetwo);
+            $tab->selected = $tab->id == $selected;
+
+            if ($tab->active || $tab->selected) {
+                if ($subtree) {
+                    $tab->subtree = $subtree;
+                }
+            }
+            $tree[] = $tab;
+        }
+        $subtree = $tree;
     }
-    echo $str;
+
+    return $tree;
 }
 
 

diff --git a/theme/standard/styles_layout.css b/theme/standard/styles_layout.css
index 2a665e58a9acde3e12f8dd61cdeb45c0ceb0f970..67343b07ec9b78603322c90823fd1c9dff1c07ee 100644 (file)
--- a/theme/standard/styles_layout.css
+++ b/theme/standard/styles_layout.css
@@ -275,7 +275,7 @@ img.emoticon {
 }
 
 form.popupform {
-    display: inline;
+  display: inline;
 }
 
 .arrow_button {
@@ -292,33 +292,33 @@ form.popupform {
   vertical-align: top;
 }
 
-img.icon {      
+img.icon {
   vertical-align:middle;   
   margin-right:4px;
-  width:16px;   
-  height:16px;      
+  width:16px;
+  height:16px;
   border:0px;   
 }   
-    
-img.iconsmall {     
+
+img.iconsmall {
   vertical-align:middle;   
   margin-right:1px;
   width:11px;   
-  height:11px;      
+  height:11px;
   border:0px;   
 }
 
-img.iconhelp {     
+img.iconhelp {
   vertical-align:middle;   
   margin-right:4px;
   width:17px;   
-  height:17px;      
+  height:17px;
   border:0px;   
 }
 
-img.iconkbhelp {     
+img.iconkbhelp {
   width:49px;   
-  height:17px;      
+  height:17px;
   border:0px;   
 }
 
@@ -1010,19 +1010,19 @@ a.skip-block, .skip-block {
 }
 
 #calendar .maincalendar {
-    height: 100%;
+  height: 100%;
 }
 
 #calendar .maincalendar .heightcontainer {
-    height: 100%;
-    position: relative;
+  height: 100%;
+  position: relative;
 }
 
 #calendar .maincalendar .bottom {
-    width: 100%;
-    position: absolute;
-    bottom: 0;
-    text-align: center;
+  width: 100%;
+  position: absolute;
+  bottom: 0;
+  text-align: center;
 }
 
 #calendar .sidecalendar {
@@ -1672,7 +1672,7 @@ body#grade-index .grades .weighted {
  ***/
 
 .message-discussion-noframes #userinfo .userpicture {
-       float:left;
+  float:left;
 }
 
 .message-discussion-noframes #userinfo .name h1 {
@@ -1706,7 +1706,7 @@ body#grade-index .grades .weighted {
 }
 
 .message-discussion-noframes #send h1 {
-       margin:0px;
+  margin:0px;
 }
 
 .message-discussion-noframes #messages {
@@ -1896,51 +1896,77 @@ body#message-messages {
  *** Tabs
  ***/
 
-.tabs {
-  width: auto;
-  margin-bottom: 15px;
-  border-collapse: collapse;
+.tabtree {
 }
 
-.tabs td {
-  padding: 0px;
+.tabrow0 {
+  position:relative;
+  float:left;
+  width:100%;
+  padding:0 0 1.75em 1em;
+  margin:0;
+  list-style:none;
+  line-height:1em;
 }
 
-.tabs .side {
-  width: 50%;
-  border-style: solid;
-  border-width: 0px 0px 1px 0px;
+.tabrow0 li {
+  float:left;
+  margin:0;
+  padding:0;
 }
 
-.tabrow {
-  border-collapse:collapse;
-  width:100%;
-  margin: 1px 0px 0px 0px;
+.tabrow0 a {
+  display:block;
+  color:#006;
+  text-decoration:none;
+  /* font-weight:bold; */
+  background:#ddd;
+  margin:0;
+  padding:0.25em 1em;
+  border-left:1px solid #fff;
+  border-top:1px solid #fff;
+  border-right:1px solid #aaa;
 }
 
-.tabrow td {
-  padding:0 0 0px 14px;
-  border-style: solid;
-  border-width: 0px 0px 1px 0px;
+.tabrow0 a:hover,
+.tabrow0 a:active,
+.tabrow0 a.selected:link,
+.tabrow0 a.selected:visited {
+  background:#bbb;
 }
 
-.tabrow th {
-  display:none;
+.tabrow0 a.selected:link,
+.tabrow0 a.selected:visited {
+  position:relative;
+  z-index:102;
 }
-.tabrow td .tablink {
-  display:block;
-  padding:10px 14px 4px 0px;
-  text-align:center;
-  white-space:nowrap;
-  text-decoration:none;
+
+/*subnav*/
+.tabrow0 ul {
+  position:absolute;
+  left:0;
+  top:1.5em;
+  float:left;
+  background:#bbb;
+  width:100%;
+  margin:0;
+  padding:0.25em 0.25em 0.25em 1em;
+  list-style:none;
+  border-top:1px solid #fff;
 }
-.tabrow .last {
+
+.tabrow0 ul li {
+  float:left;
   display:block;
-  padding:0px 1px 0px 0px;
+  margin-top:1px;
 }
 
-.tabrow td.selected {
-  border-width: 0px;
+.tabrow0 ul a {
+  background:#bbb;
+  display:inline;
+  margin:0;
+  padding:0 1em;
+  border:0
 }
 
 
@@ -2552,7 +2578,7 @@ body#mod-quiz-report table#attempts .picture {
 body#mod-quiz-report .controls {
   text-align: center;
 }
-body#question-preview .quemodname, body#question-preview .controls {     
+body#question-preview .quemodname, body#question-preview .controls {   
   text-align: center;   
 }
 
@@ -2724,4 +2750,4 @@ wikiadminactions {
 .workshopuploadform,
 .workshopkey {
   text-align:center;  
-}
\ No newline at end of file
+}