[Noalyss-commit] [noalyss] 23/46: Output_Html_Tab : cosmetic

[Dany De Bontridder]

sparkyx pushed a commit to branch master
in repository noalyss.

commit 4e5029c4b7d8cad33ac69f30a920477f52bd010c
Author: Dany De Bontridder <address@hidden>
AuthorDate: Sat Mar 21 11:41:14 2020 +0100

    Output_Html_Tab : cosmetic
---
 html/style-classic.css                |  9 ++++-
 html/style-classic7.css               | 71 ++++++++++++++++++++++++++---------
 html/style-light.css                  | 19 +++++++++-
 include/lib/html_tab.class.php        | 22 ++++++++++-
 include/lib/output_html_tab.class.php | 37 +++++++++++++++---
 5 files changed, 131 insertions(+), 27 deletions(-)

diff --git a/html/style-classic.css b/html/style-classic.css
index c24061e..e830a15 100644
--- a/html/style-classic.css
+++ b/html/style-classic.css
@@ -2419,4 +2419,11 @@ span.warning {
      color:white;
      display:block;
      background-color: lightblue;
- }
\ No newline at end of file
+ }
+span.tab_row {
+    font-style: italic;
+    font-size:90%;
+}
+span.title_tab_row {
+   
+}
\ No newline at end of file
diff --git a/html/style-classic7.css b/html/style-classic7.css
index 0842dec..5b32333 100644
--- a/html/style-classic7.css
+++ b/html/style-classic7.css
@@ -55,7 +55,6 @@ input:focus {
     font-style: italic;
     
 }
-
 a.mtitle span.notice {
     text-decoration: underline;
 }
@@ -2329,13 +2328,13 @@ span.warning {
  * Tabs like row
  ****************************************************************************/
  ul.tab_row {
-     padding-top: 15px;
+     padding-top: 25px;
      display:block;
-     width:96%;
-     padding-left:2%;
-     padding-right:2%;
+     width:100%;
+     padding-left:0%;
+     padding-right:0%;
      list-style: none;
-     margin-left:2px;
+     margin-left:0px;
  }
  ul.tab_row  a  {
      display:block;
@@ -2343,7 +2342,7 @@ span.warning {
  }
  li.tab_row_selected {
      display:block;
-     width:90%;
+     width:96%;
      background: #C2E3FC; /* Old browsers */
      background: -moz-linear-gradient(top, #C2E3FC 0%, #6393c1 100%); /* 
FF3.6+ */
      background: -webkit-gradient(linear, left top, left bottom, 
color-stop(0%,#C2E3FC), color-stop(100%,#6393c1)); /* Chrome,Safari4+ */
@@ -2353,7 +2352,7 @@ span.warning {
      background: linear-gradient(to bottom, #C2E3FC 0%,#6393c1 100%); /* W3C */
      filter: progid:DXImageTransform.Microsoft.gradient( 
startColorstr='#C2E3FC', endColorstr='#6393c1',GradientType=0 ); /* IE6-9 */
      color:whitesmoke;
-     margin-left: 2px;
+     /*! margin-left: 2px; */
      border-top-left-radius: 10px;
      border-top-right-radius: 10px;
      border:1px #879ed4 solid;
@@ -2362,15 +2361,17 @@ span.warning {
       margin-top:13px;
 
 
+     padding-left: 2%;
+     padding-right: 2%;
  }
  li.tab_row {
      display:block;
-     width:90%;
+     width:auto;
      background-color: inherit;
      color:inherit;/*! margin-left: 0px; */
-     /*! padding: 5px; */
-     /*! border-top-left-radius: 10px; */
-     /*! border-top-right-radius: 10px; */
+     padding: 5px; 
+     border-top-left-radius: 10px;
+     border-top-right-radius: 10px; 
      border:1px #879ed4 solid;
      background: whitesmoke;
      margin-top:13px;
@@ -2391,9 +2392,8 @@ span.warning {
      li.tab_row {
          display:block;
          background-color: inherit;
-
-
-         padding: 15px 7px 0px 10px; 
+         padding: 20px 15px 15px 20px;
+         margin: 20px 15px 15px 15px;
          border-top-left-radius: 10px;
          border-top-right-radius: 10px; 
          border:1px #879ed4 solid;
@@ -2403,13 +2403,15 @@ span.warning {
          display:block;
          background-color: lightblue;
          color:wheat;margin-left: 2px;
-         padding: 15px 7px 0px 10px;
+          padding: 20px 15px 15px 20px;
+         margin: 20px 15px 15px 15px;
          border-top-left-radius: 5px;
          border-top-right-radius: 5px;
          border:1px #879ed4 solid;
      }
      li.tab_row_selected {
-         padding: 12px 15px 15px 15px;
+         padding: 20px 15px 15px 20px;
+         margin:20px 15px 15px 15px;
      }
  }
  ul.tab_row a {
@@ -2420,10 +2422,43 @@ span.warning {
      width: 100%;
      height: 100%;
      cursor :pointer;
+     text-align: center;
+     
+     
+     
  }
  ul.tab_row a:hover {
      text-decoration: none;
      color:white;
      display:block;
      background-color: lightblue;
- }
\ No newline at end of file
+     /*! text-align: center; */
+ }
+ div.tab_row {
+     background-color: aliceblue;
+     border-color: #879ed4;
+     border-width: 1px;
+     border-style: solid;
+ }
+span.tab_row {
+    font-style: italic;
+    font-size:90%;
+}
+span.title_tab_row {
+    font-size:105%;
+    font-weight: bold;
+    background-color: darkblue;
+    color:white;
+    padding : 3px;
+}
+span.tab_row {
+    font-style: italic;
+    font-size:90%;
+}
+span.title_tab_row {
+    font-size:105%;
+    font-weight: bold;
+    background-color: darkblue;
+    color:white;
+    padding : 3px;
+}
\ No newline at end of file
diff --git a/html/style-light.css b/html/style-light.css
index df96649..95b7585 100644
--- a/html/style-light.css
+++ b/html/style-light.css
@@ -2292,6 +2292,7 @@ span.warning {
      border:1px #879ed4 solid;
      background: whitesmoke;
      margin-top:13px;
+      padding:5px;
 
  }
  li.tab_row:hover {
@@ -2311,7 +2312,7 @@ span.warning {
          background-color: inherit;
 
 
-         padding: 15px 7px 0px 10px;
+         padding: 15px 7px 15px 10px;
          border-top-left-radius: 10px;
          border-top-right-radius: 10px;
          border:1px #879ed4 solid;
@@ -2338,10 +2339,24 @@ span.warning {
      width: 100%;
      height: 100%;
      cursor :pointer;
+     padding: 3px;
  }
  ul.tab_row a:hover {
      text-decoration: none;
      color:white;
      display:block;
      background-color: lightblue;
- }
\ No newline at end of file
+ }
+
+span.tab_row {
+    font-style: italic;
+    font-size:90%;
+}
+span.title_tab_row {
+    font-size:105%;
+    font-weight: bold;
+    background-color: darkblue;
+    color:white;
+    padding : 3px;
+    
+}
\ No newline at end of file
diff --git a/include/lib/html_tab.class.php b/include/lib/html_tab.class.php
index ee3304a..55b51c0 100644
--- a/include/lib/html_tab.class.php
+++ b/include/lib/html_tab.class.php
@@ -35,7 +35,7 @@ class Html_Tab
     private $content ; //!< static content of the tab
     private $mode ; //!< possible values are static if the content is static, 
ajax for calling an ajax, link for a html link, default static
     private $link; //!<  the javascript or an html link, depending of the $mode
-    
+    private $comment; //!< comment to add when we use the row
     /**
      *@example html_tab.test.php
      */
@@ -44,7 +44,27 @@ class Html_Tab
         $this->id=$p_id;
         $this->title=$p_title;
         $this->mode='static';
+        $this->comment="";
+    }
+
+    /**
+     * @return string
+     */
+    public function get_comment()
+    {
+        return $this->comment;
+        return $this;
     }
+
+    /**
+     * @param string $comment
+     */
+    public function set_comment($comment)
+    {
+        $this->comment = $comment;
+        return $this;
+    }
+
     public function get_id()
     {
         return $this->id;
diff --git a/include/lib/output_html_tab.class.php 
b/include/lib/output_html_tab.class.php
index cf54c58..c8af50d 100644
--- a/include/lib/output_html_tab.class.php
+++ b/include/lib/output_html_tab.class.php
@@ -155,10 +155,10 @@ class Output_Html_Tab
                 }
             } elseif ($this->get_mode()=="row") {
                 if ( $this->a_tabs[$i]->get_id() != $p_not_hidden) {
-                    $r .= sprintf("Effect.BlindUp('div%s',{duration : 
1.0});",$this->a_tabs[$i]->get_id() );
+                    $r .= sprintf("Effect.BlindUp('div%s',{duration : 
0.7});",$this->a_tabs[$i]->get_id() );
                     $r .= 
sprintf("$('tab%s').className='%s';",$this->a_tabs[$i]->get_id(),$this->class_tab
 );
                 } else {
-                    $r .= sprintf("Effect.SlideDown('div%s',{duration : 
1.0});",$p_not_hidden );
+                    $r .= sprintf("Effect.SlideDown('div%s',{duration : 
0.7});",$p_not_hidden );
                     $r .= sprintf("$('tab%s').className='%s';",$p_not_hidden 
,$this->class_tab_selected);
 
                 }
@@ -166,6 +166,18 @@ class Output_Html_Tab
         }
         return $r;
     }
+
+    /**
+     * When printing row , a comment is written if not empty
+     * @param $p_index
+     */
+    protected function print_comment($p_index) {
+        printf ('<span class="%s"> %s </span>',
+            $this->get_class_tab(),
+            $this->a_tabs[$p_index]->get_comment()
+        );
+
+    }
     /**
      * print the html + javascript code of the tabs and the div
      *
@@ -188,7 +200,10 @@ class Output_Html_Tab
                     printf ('<a id="%s" href="%s">',
                             $this->a_tabs[$i]->get_id(),
                             $this->a_tabs[$i]->get_link());
-                    echo $this->a_tabs[$i]->get_title();
+                    printf ('<span class="title_%s"> %s </span>',
+                        $this->get_class_tab(),
+                        $this->a_tabs[$i]->get_title()
+                        );
                     echo '</a>';
 
                     break;
@@ -196,6 +211,11 @@ class Output_Html_Tab
                     printf('<a id="%s" onclick="%s">', 
                             $this->a_tabs[$i]->get_id(),
                             $this->a_tabs[$i]->get_link());
+                    printf ('<span class="title_%s"> %s </span>',
+                        $this->get_class_tab(),
+                        $this->a_tabs[$i]->get_title()
+                        );
+
                     echo $this->a_tabs[$i]->get_title();
                     echo '</a>';
                     break;
@@ -203,13 +223,20 @@ class Output_Html_Tab
                     // show one , hide other
                     $script=$this->build_js($this->a_tabs[$i]->get_id());
                     printf('<a onclick="%s">', $script);
-                    echo $this->a_tabs[$i]->get_title();
+                    printf ('<span class="title_%s"> %s </span>',
+                        $this->get_class_tab(),
+                        $this->a_tabs[$i]->get_title()
+                        );
+
                     echo '</a>';
                     
                     break;
                 default:
                     break;
             }
+            if ( $this->get_mode()=="row") {
+                $this->print_comment($i);
+            }
             echo '</li>';
             if ( $this->get_mode()=="row") {
                 $this->print_div($i);
@@ -226,7 +253,7 @@ class Output_Html_Tab
     }
     private function print_div($p_index)
     {
-        printf('<div id="div%s" 
style="display:none;clear:both">',$this->a_tabs[$p_index]->get_id());
+        printf('<div id="div%s" style="display:none;clear:both" 
class="tab_row">',$this->a_tabs[$p_index]->get_id());
         echo $this->a_tabs[$p_index]->get_content();
         echo '</div>';