From bf50396c164df74d6ba0f846dd2d9e3dfeb76c8c Mon Sep 17 00:00:00 2001
From: Gregy <gregy@gregy.cz>
Date: Fri, 6 Aug 2010 15:43:07 +0200
Subject: Design for multiple setting categories.

---
 module/web/media/default/css/default.css   |  59 ++++++++++++++--
 module/web/pyload/views.py                 |   2 +-
 module/web/templates/default/settings.html | 104 +++++++++++++++++++----------
 3 files changed, 120 insertions(+), 45 deletions(-)

diff --git a/module/web/media/default/css/default.css b/module/web/media/default/css/default.css
index 346c1eb23..1c0040b12 100644
--- a/module/web/media/default/css/default.css
+++ b/module/web/media/default/css/default.css
@@ -1564,10 +1564,55 @@ div.codearea pre span.Preprc {
     display: table-cell;
 }
 
+#toptabsback
+{
+    background-color: #eaeaea;
+    margin: 0px;
+    padding: 11px 4px 4px 4px;
+    display: table-cell;
+    border-top-right-radius: 30px;
+    border-top-left-radius: 3px;
+    -moz-border-radius-topright: 30px;
+    -moz-border-radius-topleft: 3px;
+}
+#toptabs li a
+{
+   padding: 5px 16px 4px 15px;
+   border: none;
+   font-weight: bold;
+
+   border-radius: 0px;
+   -moz-border-radius: 0px;
+
+    border-top-right-radius: 5px;
+    border-top-left-radius: 5px;
+   -moz-border-radius-topright: 5px;
+   -moz-border-radius-topleft: 5px;
+}
+
+
+#toptabs li a.selected
+{
+   background-color: #525252;
+   padding-bottom: 5px;
+
+}
+
+#tabs span
+{
+    display: none;
+}
+
+#tabs span.selected
+{
+    display: inline;
+}
+
 #tabsback
 {
     background-color: #525252;
     margin: 0px;
+    margin-top: 2px;
     padding: 6px 4px 1px 4px;
 
     border-top-right-radius: 30px;
@@ -1575,18 +1620,18 @@ div.codearea pre span.Preprc {
     -moz-border-radius-topright: 30px;
     -moz-border-radius-topleft: 3px;
 }
-ul#tabs
+ul.tabs
 {
     list-style-type: none;
     margin:0px;
     padding: 0px 40px 0px 0px;
 }
-ul#tabs li
+ul.tabs li
 {
     display: inline;
     margin-left: 8px;
 }
-ul#tabs li a
+ul.tabs li a
 {
     color: #42454a;
     background-color: #eaeaea;
@@ -1601,7 +1646,7 @@ ul#tabs li a
     -moz-border-radius: 4px;
 }
 
-ul#tabs li a.selected, ul#tabs li a:hover
+ul.tabs li a.selected, ul.tabs li a:hover
 {
     color: #000;
     background-color: white;
@@ -1613,12 +1658,12 @@ ul#tabs li a.selected, ul#tabs li a:hover
     -moz-border-radius-bottomleft: 0px;
 }
 
-ul#tabs li a:hover
+ul.tabs li a:hover
 {
     background-color: #f1f4ee;
 }
 
-ul#tabs li a.selected
+ul.tabs li a.selected
 {
     font-weight: bold;
 }
@@ -1630,7 +1675,7 @@ div.tabContent
     padding: 0px;
 
 }
-div.tabContent.hide
+.hide
 {
     display: none;
 }
diff --git a/module/web/pyload/views.py b/module/web/pyload/views.py
index 0c04962fa..c47004a85 100644
--- a/module/web/pyload/views.py
+++ b/module/web/pyload/views.py
@@ -254,4 +254,4 @@ def config(request):
             if ";" in option["type"]:
                 option["list"] = option["type"].split(";")
     
-    return render_to_response(join(settings.TEMPLATE, 'settings.html'), RequestContext(request, {'conf': conf, 'plugin': plugin, 'messages': []}, [status_proc]))
+    return render_to_response(join(settings.TEMPLATE, 'settings.html'), RequestContext(request, {'conf': {'Plugin':plugin, 'General':conf}, 'messages': []}, [status_proc]))
diff --git a/module/web/templates/default/settings.html b/module/web/templates/default/settings.html
index 02ded19a4..542be0974 100644
--- a/module/web/templates/default/settings.html
+++ b/module/web/templates/default/settings.html
@@ -9,6 +9,19 @@
 <script type="text/javascript">
     window.addEvent('domready', function()
     {
+        $$('#toptabs a').addEvent('click', function(e)
+        {
+            $$('#toptabs a').removeProperty('class');
+            e.target.set('class', 'selected');
+
+            $$('#tabs span').removeProperty('class');
+            $('g_'+e.target.get('href').substring(1)).set('class', 'selected');
+
+            var firstsel = $$('#tabs span.selected a')[0];
+            firstsel.fireEvent('click', {target: firstsel});
+            return false;
+        });
+
 	$$('#tabs a').addEvent('click', function(e)
         {
             $$('#tabs a').removeProperty('class');
@@ -19,9 +32,11 @@
             return false;
         });
 
-        $$('#tabs a')[0].set('class', 'selected');
-        $$('div.tabContent').set('class', 'tabContent hide');
-        $$('div.tabContent')[0].set('class', 'tabContent');
+        $$('#toptabs a')[0].set('class', 'selected');
+        $$('#tabs span')[0].set('class', 'selected')
+
+        var firstsel = $$('#tabs span.selected a')[0];
+        firstsel.fireEvent('click', {target: firstsel});
     });
 
     
@@ -55,52 +70,67 @@
 {% for message in errors %}
 <b>{{message}}</b><br>
 {% endfor %}
-{% if conf|length > 0 %}
+
 <div class="setfield">
+    
+        <ul id="toptabs" class="tabs">
+            {% for configname, config in conf.iteritems  %}
+                {% if config|length > 0 %}
+                    <li><a href="#{{configname}}">{{configname}}</a></li>
+                {% endif %}
+            {% endfor %}
+        </ul>
+    
+    
+
     <div id="tabsback">
-        <ul id="tabs">
-            {% for skey, section in conf.iteritems  %}
-                <li><a href="#{{skey}}">{{section.desc}}</a></li>
+        <ul id="tabs" class="tabs">
+            {% for configname, config in conf.iteritems  %}
+                <span id="g_{{configname}}">
+                    {% for skey, section in config.iteritems  %}
+                        <li><a href="#{{configname}}{{skey}}">{{section.desc}}</a></li>
+                    {% endfor %}
+                </span>
             {% endfor %}
         </ul>
     </div>
     <form id="horizontalForm" action="" method="POST">
+    {% for configname, config in conf.iteritems  %}
+        {% for skey, section in config.iteritems  %}
 
-    {% for skey, section in conf.iteritems  %}
-        <div class="tabContent" id="{{skey}}">
-            <table class="settable">
-                {% for okey, option in section.items %}
-                    {% ifnotequal okey "desc" %}
-                        <tr>
-                            <td><label for="{{skey}}|{{okey}}" style="color:#424242;">{{option.desc}}:</label></td>
-                            <td>
-                                {% ifequal option.type "bool" %}
-                                    <select id="{{skey}}|{{okey}}" name="{{skey}}|{{okey}}">
-                                        <option {% if option.value %} selected="selected" {% endif %}value="True">{% trans "on" %}</option>
-                                        <option {% if not option.value %} selected="selected" {% endif %}value="False">{% trans "off" %}</option>
-                                    </select>
-                                {% else %}
-                                    {% if option.type|contains:";" %}
-                                        <select id="{{skey}}|{{okey}}" name="{{skey}}|{{okey}}">
-                                            {% for entry in option.list %}
-                                                <option {% ifequal option.value entry %} selected="selected" {% endifequal %}>{{entry}}</option>
-                                            {% endfor %}
+            <div class="tabContent" id="{{configname}}{{skey}}">
+                <table class="settable">
+                    {% for okey, option in section.items %}
+                        {% ifnotequal okey "desc" %}
+                            <tr>
+                                <td><label for="{{configname}}|{{skey}}|{{okey}}" style="color:#424242;">{{option.desc}}:</label></td>
+                                <td>
+                                    {% ifequal option.type "bool" %}
+                                        <select id="{{skey}}|{{okey}}" name="{{configname}}|{{skey}}|{{okey}}">
+                                            <option {% if option.value %} selected="selected" {% endif %}value="True">{% trans "on" %}</option>
+                                            <option {% if not option.value %} selected="selected" {% endif %}value="False">{% trans "off" %}</option>
                                         </select>
                                     {% else %}
-                                        <input id="{{skey}}|{{okey}}" name="{{skey}}|{{okey}}" type="text" value="{{option.value}}"/>
-                                    {% endif %}
-                                {% endifequal %}
-                            </td>
-                        </tr>
-                    {% endifnotequal %}
-                {% endfor %}
-            </table>
-        </div>
+                                        {% if option.type|contains:";" %}
+                                            <select id="{{skey}}|{{okey}}" name="{{configname}}|{{skey}}|{{okey}}">
+                                                {% for entry in option.list %}
+                                                    <option {% ifequal option.value entry %} selected="selected" {% endifequal %}>{{entry}}</option>
+                                                {% endfor %}
+                                            </select>
+                                        {% else %}
+                                            <input id="{{skey}}|{{okey}}" name="{{configname}}|{{skey}}|{{okey}}" type="text" value="{{option.value}}"/>
+                                        {% endif %}
+                                    {% endifequal %}
+                                </td>
+                            </tr>
+                        {% endifnotequal %}
+                    {% endfor %}
+                </table>
+            </div>
+        {% endfor %}
     {% endfor %}
-
     {% if conf %}
     <input class="submit" type="submit" value="{% trans "Submit" %}" />
-    {% endif %}
     </form>
 </div>
 {% endif %}
-- 
cgit v1.2.3