Shout: Add expandable destination info block

diff --git a/shout/templates/extensions/list.inc b/shout/templates/extensions/list.inc
index aa403a2..0915a53 100644 (file)
--- a/shout/templates/extensions/list.inc
+++ b/shout/templates/extensions/list.inc
@@ -20,10 +20,6 @@
             <td class="uheader">E-Mail Address</td>
         </tr>
         <?php
-            $expandAttrs = array('onclick' => 'javascript:alert(this.getNode().parent);',
-                'id' => 'myid');
-            $expandButton = Horde::img('tree/plusonly.png', _("Expand"), $expandAttrs,
-                                       $registry->getImageDir('horde'));
             foreach ($extensions as $extension => $info) {
 
                 $url = Horde::applicationUrl("extensions.php");
@@ -35,13 +31,19 @@
                 $editurl = Horde_Util::addParameter($url, 'action', 'edit');
                 $deleteurl = Horde_Util::addParameter($url, 'action', 'delete');
         ?>
-        <tr class="item">
+        <tr class="item" style="vertical-align: top">
             <td style="width: 20%">
                 <?php echo Horde::link($editurl); echo $extension; ?></a>
             </td>
             <td style="width: 35%;">
-                <?php echo $expandButton; ?>
-                <?php echo Horde::link($editurl); echo $info['name']; ?></a>
+                <?php
+                $attrs = array('onclick' => 'javascript:destinations("' . $extension . '");',
+                               'id' => 'destX' . $extension . 'toggle');
+                echo Horde::img('tree/plusonly.png', _("Destinations"), $attrs,
+                                $registry->getImageDir('horde'));
+                echo Horde::link($editurl);
+                    echo $info['name']; ?>
+                </a>
                 <span id="destX<?php echo $extension; ?>summary">
                 <?php
                 foreach ($info['devices'] as $device) {
@@ -53,7 +55,8 @@
                 ?>
                 </span>
 
-                <form>
+                <form method="post"
+                      action="<?php echo Horde::applicationUrl('extensions.php'); ?>">
                 <div class="extensionDestinations" id="destX<?php echo $extension; ?>">
                     <input type="hidden" name="extension" value="<?php echo $extension; ?>">
                     <?php
@@ -76,3 +79,40 @@
         ?>
     </table>
 </div>
+
+<script type="text/javascript">
+<!--
+
+<?php
+foreach ($extensions as $extension => $info)
+{
+    echo "contract('${extension}');\n";
+}
+?>
+
+function destinations(exten)
+{    
+    // Use the summary icons span as our state key
+    if ($("destX" + exten + "summary").style.display == 'none') {
+        // Icons hidden, we are expanded
+        contract(exten);
+    } else {
+        expand(exten);
+    }
+}
+
+function expand(exten)
+{
+    $('destX'+exten+'summary').hide();
+    $('destX'+exten).show();
+    $("destX" + exten + "toggle").src = '<?php echo $registry->getImageDir('horde') . '/tree/minusonly.png'; ?>';
+}
+
+function contract(exten)
+{
+    $('destX'+exten+'summary').show();
+    $('destX'+exten).hide();
+    $("destX" + exten + "toggle").src = '<?php echo $registry->getImageDir('horde') . '/tree/plusonly.png'; ?>';
+}
+// -->
+</script>

diff --git a/shout/themes/screen.css b/shout/themes/screen.css
index 39548fd..082ac57 100644 (file)
--- a/shout/themes/screen.css
+++ b/shout/themes/screen.css
@@ -34,6 +34,12 @@ table {
     padding: 5px;
   }
 
+.extensionDestinations
+{
+    /*display: none;*/
+    position: relative;
+    left: 24px;
+}
 
 #extensionDetail {
     left: 200px;
@@ -50,7 +56,7 @@ table {
 }
 
 #extensionDetail .darkHint{
-     background: #797
+     background: #797;
      color: #fff;
 }