From: Thierry Parmentelat <thierry.parmentelat@sophia.inria.fr>
Date: Wed, 18 Feb 2009 09:25:35 +0000 (+0000)
Subject: iteration on toggles, ready to spread
X-Git-Tag: PLEWWW-4.3-1~37
X-Git-Url: http://git.onelab.eu/?a=commitdiff_plain;h=9d895ccda841805e7635b3b162c075ae29154959;p=plewww.git

iteration on toggles, ready to spread
---

diff --git a/planetlab/css/plc_toggles.css b/planetlab/css/plc_toggles.css
index 7ee452b..4988ee3 100644
--- a/planetlab/css/plc_toggles.css
+++ b/planetlab/css/plc_toggles.css
@@ -2,17 +2,23 @@
  $Id$
  */
 
-h1.plc-toggle-switch, h2.plc-toggle-switch {
-    text-align:center;
+.plc-toggle-trigger {
+    padding-left: 15px;
+/*    text-align:center; */
 }
 
+/* containers */
+div.plc-toggle-container {
+    border:2px solid #ccc;
+}
+
+/* the buttons */
 img.plc-toggle-visible, img.plc-toggle-hidden {
-    height: 14px;
-    padding-right: 20px;
+    height: 16px;
+    padding-right: 15px;
 }
 
+/* what goes on and off */
 div.plc-toggle-area {
-    border-color:#a84444 !important;
-    border:1px solid #ccc;
 }
 
diff --git a/planetlab/icons/toggle-hidden.png b/planetlab/icons/toggle-hidden.png
index c5cc718..023f22a 100755
Binary files a/planetlab/icons/toggle-hidden.png and b/planetlab/icons/toggle-hidden.png differ
diff --git a/planetlab/icons/toggle-visible.png b/planetlab/icons/toggle-visible.png
index 1332dca..baf6c28 100755
Binary files a/planetlab/icons/toggle-visible.png and b/planetlab/icons/toggle-visible.png differ
diff --git a/planetlab/includes/plc_toggles.php b/planetlab/includes/plc_toggles.php
index 74e9a48..cf247be 100644
--- a/planetlab/includes/plc_toggles.php
+++ b/planetlab/includes/plc_toggles.php
@@ -12,19 +12,19 @@ drupal_set_html_head('
 // This is for creating an area that users can hide and show
 // It is logically made of 3 parts:
 // (*) area is what gets hidden and shown
-// (*) switch is the area that can be clicked for toggling
+// (*) trigger is the area that can be clicked for toggling
 // (*) image contains a visual indication of the current status
 // 
 // constructor needs 
 // (*) id:	an 'id', used for naming the three parts
-// (*) switch:	the html text for the switch
+// (*) trigger:	the html text for the trigger
 // (*) options:	a hash that can define
-//	- switch-tagname : to be used instead of <span> for wrapping the switch
-//	- switch-bubble : might not work if switch-tagname is redefined
+//	- trigger-tagname : to be used instead of <span> for wrapping the trigger
+//	- trigger-bubble : might not work if trigger-tagname is redefined
 //	- init-hidden : start hidden rather than visible
 // 
 // methods are as follows
-// (*) switch_html ():	return the html code for the switch
+// (*) trigger_html ():	return the html code for the trigger
 // (*) image_html ():	returns the html code for the image
 // (*) area_start ():	because we have too many places where php 'prints' code instead 
 // (*) area_end():	  of returning it, we do not expect the code for the area to be passed
@@ -34,14 +34,36 @@ class PlcToggle {
   // mandatory
   var $id;
 
-  function PlcToggle ($id,$switch,$options=NULL) {
+  function PlcToggle ($id,$trigger,$options=NULL) {
     $this->id = $id;
-    $this->switch=$switch;
+    $this->trigger=$trigger;
     if ( ! $options ) $options = array();
+    if (array_key_exists ('start-visible',$options)) {
+      $options['start-hidden'] = ! $options['start-visible'];
+      unset ($options['start-visible']);
+    }
     $this->options = $options;
   }
 
-  function id_name ($zonename) { return "toggle-$zonename-$this->id"; }
+  // the simple, usual way to use it :
+  // a container that contains the switch and the area in sequence
+  function start ()		{ print $this->start_html(); }
+  function start_html () {
+    $html = "";
+    $html .= $this->container_start();
+    $html .= $this->trigger_html();
+    $html .= $this->area_start_html();
+    return $html;
+  }
+
+  function end ()		{ print $this->end_html(); }
+  function end_html () {
+    $html = "";
+    $html .= $this->area_end_html();
+    $html .= $this->container_end();
+    return $html;
+  }
+
 
   // create two images that get shown/hidden - could not find a better way to do it
   function image_html () {
@@ -55,21 +77,21 @@ class PlcToggle {
     return $html;
   }
 
-  // don't define switch as it's a php keyword 
-  function switch_html () {
-    $switch_id=$this->id_name('switch');
+  function trigger ()		{ print $this->trigger_html(); }
+  function trigger_html () {
+    $trigger_id=$this->id_name('trigger');
     $tagname='span';
-    if (array_key_exists ('switch-tagname',$this->options)) $tagname=$this->options['switch-tagname'];
-    if (array_key_exists ('switch-bubble',$this->options)) $bubble=$this->options['switch-bubble'];
+    if (array_key_exists ('trigger-tagname',$this->options)) $tagname=$this->options['trigger-tagname'];
+    if (array_key_exists ('trigger-bubble',$this->options)) $bubble=$this->options['trigger-bubble'];
     
     $html="<$tagname";
-    $html .= " id=$switch_id";
-    $html .= " class=plc-toggle-switch";
+    $html .= " id=$trigger_id";
+    $html .= " class=plc-toggle-trigger";
     if ($bubble) $html .= " title='$bubble'";
     $html .= " onclick=\"plc_toggle('$this->id')\"";
     $html .= ">";
     $html .= $this->image_html();
-    $html .= $this->switch;
+    $html .= $this->trigger;
     $html .= "</$tagname>";
     return $html;
   }
@@ -91,6 +113,22 @@ class PlcToggle {
     return "</div>";
   }
 
+  /* if desired, you can embed the whole (trigger+area) in another div for visual effects */
+  function container_start ()		{ print $this->container_start_html(); }
+  function container_start_html ()	{ 
+    $html="<div class='plc-toggle-container'";
+    $id=$this->id_name('container');
+    $html .= " id='$id'";
+    $html .= ">";
+    return $html;
+  }
+
+  function container_end ()		{ print $this->container_end_html(); }
+  function container_end_html ()	{ return "</div>"; }
+
+  // build id names
+  function id_name ($zonename) { return "toggle-$zonename-$this->id"; }
+
 }
 
 ?>    
diff --git a/planetlab/nodes/node.php b/planetlab/nodes/node.php
index 24ea554..7129187 100644
--- a/planetlab/nodes/node.php
+++ b/planetlab/nodes/node.php
@@ -218,7 +218,8 @@ $form=new PlcForm (l_actions(), array('node_id'=>$node_id));
 $form->start();
 
 //////////////////////////////////////////////////////////// Tags
-// get tags
+// tags section
+$show_tags = (plc_is_admin());
 if ( $local_peer ) {
   
   $tags=$api->GetNodeTags (array('node_id'=>$node_id));
@@ -226,11 +227,10 @@ if ( $local_peer ) {
   $tagnames = array_map ("get_tagname",$tags);
   $nodegroups_hash=plc_nodegroup_global_hash($api,$tagnames);
   
-  $toggle = new PlcToggle ('tags',"Tags",array('switch-tagname'=>'h2',
-					       'switch-bubble'=>'Inspect and set tags on that node',
-					       'start-hidden'=>true));
-  print $toggle->switch_html();
-  $toggle->area_start();
+  $toggle = new PlcToggle ('tags',"Tags",array('trigger-tagname'=>'h2',
+					       'trigger-bubble'=>'Inspect and set tags on that node',
+					       'start-visible'=>$show_tags));
+  $toggle->start();
 
   $headers=array("Name"=>"string",
 		 "Value"=>"string",
@@ -280,18 +280,15 @@ if ( $local_peer ) {
   }
   
   $table->end();
-  $toggle->area_end();
- }
+  $toggle->end();
+}
 
 //////////////////////////////////////////////////////////// interfaces
 if ( $local_peer ) {
-
-  $toggle=new PlcToggle ('interfaces',"Interfaces",array('switch-tagname'=>'h2',
-							 'switch-bubble'=>'Inspect and tune interfaces on that node',
+  $toggle=new PlcToggle ('interfaces',"Interfaces",array('trigger-tagname'=>'h2',
+							 'trigger-bubble'=>'Inspect and tune interfaces on that node',
 							 'start-hidden'=>true));
-
-  print $toggle->switch_html();
-  $toggle->area_start();
+  $toggle->start();
   // display interfaces
   if( ! $interfaces ) {
     echo '<p>';
@@ -354,44 +351,44 @@ if ( $local_peer ) {
     }
     $table->end();
   }
-  $toggle->area_end();
+  $toggle->end();
  }
 
 //////////////////////////////////////////////////////////// slices
 // display slices
 
-$toggle=new PlcToggle ('slices',"Slices",array('switch-tagname'=>'h2',
-					       'switch-bubble'=>'Review slices running on that node',
-					       'start-hidden'=>true));
-print $toggle->switch_html();
-
-$toggle->area_start();
-if ( ! $slices  ) {
-  plc_warning ("This node is not associated to any slice");
- } else {
-  $headers=array();
-  $headers['Peer']="string";
-  $headers['Name']="string";
-  $headers['Slivers']="string";
-  $reasonable_page=10;
-  $table_options = array('notes_area'=>false,"search_width"=>10,'pagesize'=>$reasonable_page);
-  if (count ($slices) <= $reasonable_page) {
-    $table_options['search_area']=false;
-    $table_options['pagesize_area']=false;
-  }
-  $table=new PlcTable("node_slices",$headers,1,$table_options);
-  $table->start();
+{
+  $toggle=new PlcToggle ('slices',"Slices",array('trigger-tagname'=>'h2',
+						 'trigger-bubble'=>'Review slices running on that node',
+						 'start-hidden'=>true));
+  $toggle->start();
+  if ( ! $slices  ) {
+    plc_warning ("This node is not associated to any slice");
+  } else {
+    $headers=array();
+    $headers['Peer']="string";
+    $headers['Name']="string";
+    $headers['Slivers']="string";
+    $reasonable_page=10;
+    $table_options = array('notes_area'=>false,"search_width"=>10,'pagesize'=>$reasonable_page);
+    if (count ($slices) <= $reasonable_page) {
+      $table_options['search_area']=false;
+      $table_options['pagesize_area']=false;
+    }
+    $table=new PlcTable("node_slices",$headers,1,$table_options);
+    $table->start();
 
-  foreach ($slices as $slice) {
-    $table->row_start();
-    $table->cell ($peers->shortname($peer_id));
-    $table->cell (l_slice_t ($slice['slice_id'],$slice['name']));
-    $table->cell (l_sliver_t ($node_id,$slice['slice_id'],'view'));
-    $table->row_end();
+    foreach ($slices as $slice) {
+      $table->row_start();
+      $table->cell ($peers->shortname($peer_id));
+      $table->cell (l_slice_t ($slice['slice_id'],$slice['name']));
+      $table->cell (l_sliver_t ($node_id,$slice['slice_id'],'view'));
+      $table->row_end();
+    }
+    $table->end();
   }
-  $table->end();
- }
-$toggle->area_end();
+  $toggle->end();
+}
 
 $form->end();