From: Brandon King <kingb@caltech.edu>
Date: Tue, 16 Jun 2009 00:34:05 +0000 (+0000)
Subject: Switched away from accordion setup to collapsible panels:
X-Git-Url: http://woldlab.caltech.edu/gitweb/?p=htsworkflow.git;a=commitdiff_plain;h=c6161cfa6b9e647fb651e27fc38e5e45351065de

Switched away from accordion setup to collapsible panels:
 * Panels use state now.
---

diff --git a/templates/app.html b/templates/app.html
index 7dad3a0..4d0e416 100644
--- a/templates/app.html
+++ b/templates/app.html
@@ -16,6 +16,7 @@
     <script type="text/javascript" src="/static/js/menu.js"></script>
     <script type="text/javascript" src="/static/js/htsw.js"></script>
     <!--{{ media }}-->
+    <!--
     {% if select %}
         <script type="text/javascript">
         $(document).ready(function(){
@@ -23,6 +24,7 @@
         });
         </script>
     {% endif %}
+    -->
     <!--
         Barcode Magic Media should probably go last if you want
         the barcode magic input to be selected upon page load.
@@ -33,32 +35,56 @@
     <div id="header">
         <h1>HTSWorkflow - Sample Tracker</h1>
     </div>
-    <div id="freezer_menu">
-        <div>
-            <a href="{% url samplebc.samples.views.freezer_index %}">Index</a><br />
-            <a href="{% url samplebc.samples.views.freezer_add %}">Add</a><br />
-        </div>
-    </div>
-    <div id="container_menu">
-        <div>
-            <a href="{% url samplebc.samples.views.container_index %}">Index</a><br />
-            <a href="{% url samplebc.samples.views.container_add %}">Add</a><br />
-        </div>
-    </div>
-    <div id="sample_menu">
-        <div>
-            <a href="{% url samplebc.samples.views.sample_index %}">Index</a><br />
-            <a href="{% url samplebc.samples.views.sample_homeless %}">Homeless</a><br />
-            <a href="{% url samplebc.samples.views.sample_add %}">Add</a><br />
-        </div>
-    </div>
-    <div id="settings_menu">
-        <div>
-            {% if user.is_staff %}<a href="/admin/">Admin</a><br />{% endif %}
-            <a href="{% url samplebc.samples.views.user_profile %}">Profile</a><br />
-            <a href="{% url django.contrib.auth.views.password_change %}">Change_PW</a><br />
-        </div>
-    </div>
+    <ul id="freezer_menu" class="x-hidden">
+            <li>
+                <img src="/static/images/s.gif" class="icon-show-all" />
+                <a href="{% url samplebc.samples.views.freezer_index %}">Index</a><br />
+            </li>
+            <li>
+                <img src="/static/images/s.gif" class="icon-show-all" />
+                <a href="{% url samplebc.samples.views.freezer_add %}">Add</a><br />
+            </li>
+    </ul>
+    <ul id="container_menu" class="x-hidden">
+        <li>
+            <img src="/static/images/s.gif" class="icon-show-all" />
+            <a href="{% url samplebc.samples.views.container_index %}">Index</a>
+        </li>
+        <li>
+            <img src="/static/images/s.gif" class="icon-show-all" />
+            <a href="{% url samplebc.samples.views.container_add %}">Add</a>
+        </li>
+    </ul>
+    <ul id="sample_menu" class="x-hidden">
+        <li>
+            <img src="/static/images/s.gif" class="icon-show-all" />
+            <a href="{% url samplebc.samples.views.sample_index %}">Index</a>
+        </li>
+        <li>
+            <img src="/static/images/s.gif" class="icon-show-all" />
+            <a href="{% url samplebc.samples.views.sample_homeless %}">Homeless</a>
+        </li>
+        <li>
+            <img src="/static/images/s.gif" class="icon-show-all" />
+            <a href="{% url samplebc.samples.views.sample_add %}">Add</a>
+        </li>
+    </ul>
+    <ul id="settings_menu" class="x-hidden">
+        {% if user.is_staff %}
+        <li>
+            <img src="/static/images/s.gif" class="icon-show-all" />
+            <a href="/admin/">Admin</a>
+        </li>
+        {% endif %}
+        <li>
+            <img src="/static/images/s.gif" class="icon-show-all" />
+            <a href="{% url samplebc.samples.views.user_profile %}">Profile</a>
+        </li>
+        <li>
+            <img src="/static/images/s.gif" class="icon-show-all" />
+            <a href="{% url django.contrib.auth.views.password_change %}">Change_PW</a>
+        </li>
+    </ul>
     <div id="bcmagic_div">
     {% if user.is_authenticated %}
     Logged in as <b>{{ user.username }}</b>.<br />
diff --git a/www/images/s.gif b/www/images/s.gif
new file mode 100644
index 0000000..1d11fa9
Binary files /dev/null and b/www/images/s.gif differ
diff --git a/www/js/htsw.js b/www/js/htsw.js
index bb1b8cd..9f21254 100644
--- a/www/js/htsw.js
+++ b/www/js/htsw.js
@@ -1,6 +1,82 @@
+Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
+
+Ext.override(Ext.Panel,{
+  getState: function() {
+    return { collapsed: this.collapsed };
+    }
+});
 
 $(document).ready(function(){
-    var menuAccordionPanel = new Ext.Panel({
+    
+    var panel_freezers = new Ext.Panel({
+        frame: true,
+        title: 'Freezers',
+        collapsible: true,
+        titleCollapse: true,
+        collapsed: true,
+        stateful: true,
+        stateId: 'freezer_panel_state',
+        contentEl: 'freezer_menu',
+        stateEvents: ['collapse', 'expand']
+    });
+    
+    var panel_containers = new Ext.Panel({
+        frame: true,
+        title: 'Containers',
+        collapsible: true,
+        titleCollapse: true,
+        collapsed: true,
+        stateful: true,
+        stateId: 'container_panel_state',
+        contentEl: 'container_menu',
+        stateEvents: ['collapse', 'expand']
+    });
+    
+    var panel_samples = new Ext.Panel({
+        frame: true,
+        title: 'Samples',
+        collapsible: true,
+        titleCollapse: true,
+        collapsed: true,
+        stateful: true,
+        stateId: 'sample_panel_state',
+        contentEl: 'sample_menu',
+        stateEvents: ['collapse', 'expand']
+    });
+    
+    var panel_settings = new Ext.Panel({
+        frame: true,
+        title: 'Settings',
+        collapsible: true,
+        titleCollapse: true,
+        collapsed: true,
+        stateful: true,
+        stateId: 'settings_panel_state',
+        contentEl: 'settings_menu',
+        stateEvents: ['collapse', 'expand']
+    });
+    
+    var panel_bcmagic = new Ext.Panel({
+        //title: 'BC Magic',
+        contentEl: 'bcmagic_div',
+        height: 160
+    });
+    
+    var menuPanel = new Ext.Panel({
+       id: 'menu_panel',
+       region: 'west',
+       collapsible: true,
+       margins: '2 0 0 0',
+       cmargins: '2 2 0 2',
+       //collapseMode: 'mini',
+       width: 200,
+       minWidth: 150,
+       border: false,
+       //baseCls: 'x-plain',
+       items: [panel_freezers, panel_containers, panel_samples, panel_settings, panel_bcmagic]
+    });
+    
+    /*var menuAccordionPanel = new Ext.Panel({
         id: 'menu_accordion',
         flex: 1,
         layout: 'accordion',
@@ -25,7 +101,7 @@ $(document).ready(function(){
             id: 'settings_menu_panel',
             contentEl: 'settings_menu'
         }]
-    });
+    });*/
     
     var mainBorderPanel = new Ext.Viewport({
        layout: 'border',
@@ -50,7 +126,7 @@ $(document).ready(function(){
                     margins: '2 0 0 0'
             }],
             height: 60 
-       },{
+       },menuPanel,/*{
             title: 'Menu',
             region: 'west',
             margins: '2 0 0 0',
@@ -68,11 +144,11 @@ $(document).ready(function(){
                 {
                     xtype: 'box',
                     applyTo: 'bcmagic_div',
-                    height: 200
+                    height: 160
                 }]
             
             //unstyled: true
-       },{
+       },*/{
             title: 'Body',
             region: 'center',
             xtype: 'container',