Changeset 22891 for lang/perl/Moxy

Timestamp:

11/07/08 08:24:11 (2 months ago)

Author:

tokuhirom

Message:

change control panel design

Location:

lang/perl/Moxy/trunk

Files:

• assets/plugins/ControlPanel/panelcontainer.tt (modified) (1 diff)
• assets/plugins/ShowHTTPHeaders/panel.tt (modified) (1 diff)
• lib/Moxy/Plugin/ControlPanel.pm (modified) (1 diff)

lang/perl/Moxy/trunk/assets/plugins/ControlPanel/panelcontainer.tt

@@ +1 @@
+<style>
+    #moxy_tab_group {
+        list-style: none;
+        margin: 1px 0 -1px 0;
+        padding: 0;
+    }
+
+    #moxy_tab_group li {
+        display: block;
+        float: left;
+        display: block;
+        height: 14px;
+        position: relative;
+        border-bottom: 1px solid #bbb8a9;
+        white-space: nowrap;
+        font-size: x-small;
+        cursor: pointer;
+    }
+    #moxy_tab_group .tab {
+        float: left;
+        list-style-type: none;
+        margin-right: 4px;
+        padding-left: 10px;
+        padding-right: 10px;
+        padding-top: 2px;
+        display: inline;
+    }
+    #moxy_tab_group .tab_open { background-color: gray; color: white; }
+    #moxy_tab_group .tab_close { background-color: #E0E0E0; }
+    .moxy_pane {
+        border: 2px solid gray;
+        height: 357px;
+        overflow: auto;
+        width: 600px;
+    }
+</style>
+<script>
+    var moxy_current_tab = 1;
+    function moxy_switch_tab(i) {
+        var current_pane = document.getElementById('moxypane' + moxy_current_tab);
+        current_pane.style.display = 'none';
+        var current_tab = document.getElementById('moxytab' + moxy_current_tab);
+        current_tab.className = 'tab tab_close';
+
+        var new_pane = document.getElementById('moxypane' + i);
+        new_pane.style.display = 'block';
+        var new_tab = document.getElementById('moxytab' + i);
+        new_tab.className = 'tab tab_open';
+
+        moxy_current_tab = i;
+    }
+</script>
 <div id="moxy-control-panel" style="margin-left: 10px;float: left; width: 500px;">
+    <ul id="moxy_tab_group">
     [% FOR part IN parts %]
-        <div>[% part %]</div>
+        <li id="moxytab[% loop.count %]" onclick="moxy_switch_tab([% loop.count %])" class="tab tab_[% IF loop.count == 1 %]open[% ELSE %]close[% END %]">[% part.title %]</li>
+    [% END %]
+    </ul>
+    <div style="clear: both"></div>
+
+    [% FOR part IN parts %]
+        <div class="moxy_pane" id="moxypane[% loop.count %]" [% IF loop.count != 1 %]style="display: none"[% END %]>[% part.body %]</div>
     [% END %]
 </div>

lang/perl/Moxy/trunk/assets/plugins/ShowHTTPHeaders/panel.tt

@@ -1 @@
-<a href="#" onclick="var x=document.getElementById('moxy_show_http_headers');x.style.display = (x.style.display=='none' ? '' : 'none');return false;">show http headers</a>
-<div id="moxy_show_http_headers" style="display:none">
+<div id="moxy_show_http_headers">
     <div>
         <h2 id="moxy_request">Request</h2>

lang/perl/Moxy/trunk/lib/Moxy/Plugin/ControlPanel.pm

@@ -12 +12 @@
     $context->log("debug" => "generate ControlPanel");
 
+    my @parts = do {
+        my @r;
+        for my $hook (@{$context->class_component_hooks->{'control_panel'}}) {
+            my ($plugin, $method) = ($hook->{plugin}, $hook->{method});
+            push @r, { title => sub { (my $x = ref $plugin) =~ s/.+:://; $x }->(), body => $plugin->$method($context, $args) };
+        }
+        @r;
+    };
+
     my $output = $self->render_template(
         $context,
         'panelcontainer.tt' => {
-            parts => $context->run_hook('control_panel' => $args), 
+            parts => \@parts, 
         }
     );