From 55f6f6386f169409477fd31a72f89de6f7192b86 Mon Sep 17 00:00:00 2001
From: RaNaN <Mast3rRaNaN@hotmail.de>
Date: Fri, 6 Aug 2010 12:01:56 +0200
Subject: Gregy's settings page + TheBrayns new icons

---
 module/web/media/default/css/default.css          | 120 ++++++++++++++++------
 module/web/media/default/img/control_add.png      | Bin 0 -> 446 bytes
 module/web/media/default/img/control_add_blue.png | Bin 0 -> 845 bytes
 module/web/templates/default/base.html            |   6 +-
 module/web/templates/default/settings.html        | 101 +++++++++++-------
 5 files changed, 155 insertions(+), 72 deletions(-)
 create mode 100644 module/web/media/default/img/control_add.png
 create mode 100644 module/web/media/default/img/control_add_blue.png

(limited to 'module/web')

diff --git a/module/web/media/default/css/default.css b/module/web/media/default/css/default.css
index 692202bb2..346c1eb23 100644
--- a/module/web/media/default/css/default.css
+++ b/module/web/media/default/css/default.css
@@ -1010,11 +1010,15 @@ a.backlink {
 a.play {
 	background:transparent url(/media/default/img/control_play.png) 0px 1px no-repeat;
 }
-a.time {
+.time {
 	background:transparent url(/media/default/img/status_None.png) 0px 1px no-repeat;
+        padding: 2px 0px 2px 18px;
+        margin: 0px 3px;
 }
-a.reconnect {
+.reconnect {
 	background:transparent url(/media/default/img/reconnect.png) 0px 1px no-repeat;
+        padding: 2px 0px 2px 18px;
+        margin: 0px 3px;
 }
 a.play:hover {
 	background:transparent url(/media/default/img/control_play_blue.png) 0px 1px no-repeat;
@@ -1038,6 +1042,12 @@ a.stop {
 a.stop:hover {
 	background:transparent url(/media/default/img/control_stop_blue.png) 0px 1px no-repeat;
 }
+a.add {
+	background:transparent url(/media/default/img/control_add.png) 0px 1px no-repeat;
+}
+a.add:hover {
+	background:transparent url(/media/default/img/control_add_blue.png) 0px 1px no-repeat;
+}
 a.cog {
 	background:transparent url(/media/default/img/cog.png) 0px 1px no-repeat;
 }
@@ -1531,66 +1541,108 @@ div.codearea pre span.Preprc {
 	font-weight: normal;
 }
 
-#horizontalForm fieldset
-{
-	display: block;
-	margin: 0 0 3em 0;
-	padding: 0 1em 1em 1em;
-}
 
-#horizontalForm fieldset.radio
+.clearer
 {
-	margin: 1em 0 2em 0;
+	clear: both;
+	height: 1px;
 }
 
-#horizontalForm fieldset.radio input
+.left
 {
-	clear: both;
 	float: left;
-	width: auto;
 }
 
-#horizontalForm fieldset.radio label
+.right
 {
-	font-weight: normal;
+	float: right;
 }
 
-#horizontalForm input
+
+.setfield
 {
-	display: block;
-	width: 15em;
+    display: table-cell;
 }
 
-#horizontalForm input.submit
+#tabsback
 {
-	clear: both;
+    background-color: #525252;
+    margin: 0px;
+    padding: 6px 4px 1px 4px;
+
+    border-top-right-radius: 30px;
+    border-top-left-radius: 3px;
+    -moz-border-radius-topright: 30px;
+    -moz-border-radius-topleft: 3px;
+}
+ul#tabs
+{
+    list-style-type: none;
+    margin:0px;
+    padding: 0px 40px 0px 0px;
+}
+ul#tabs li
+{
+    display: inline;
+    margin-left: 8px;
 }
+ul#tabs li a
+{
+    color: #42454a;
+    background-color: #eaeaea;
+    border: 1px solid #c9c3ba;
+    border-bottom: none;
+    padding: 2px 4px 2px 4px;
+    margin: 0px;
+    text-decoration: none;
 
-#horizontalForm label
+    outline: 0;
+    border-radius: 4px;
+    -moz-border-radius: 4px;
+}
+
+ul#tabs li a.selected, ul#tabs li a:hover
 {
-	float: left;
-	display: block;
-	margin: 1em 1em 0 0;
-	font-weight: bold;
+    color: #000;
+    background-color: white;
+    padding: 2px 4px 6px 4px;
+
+    border-bottom-right-radius: 0px;
+    border-bottom-left-radius: 0px;
+    -moz-border-radius-bottomright: 0px;
+    -moz-border-radius-bottomleft: 0px;
 }
 
-#horizontalForm select
+ul#tabs li a:hover
 {
-	display: block;
+    background-color: #f1f4ee;
 }
 
-.clearer
+ul#tabs li a.selected
 {
-	clear: both;
-	height: 1px;
+    font-weight: bold;
 }
 
-.left
+div.tabContent
 {
-	float: left;
+    border: 2px solid #525252;
+    margin: 0px 0px 0px 0px;
+    padding: 0px;
+
+}
+div.tabContent.hide
+{
+    display: none;
 }
 
-.right
+.settable
 {
-	float: right;
+    margin: 20px;
+    border: none;
 }
+.settable td
+{
+    border: none;
+    margin: 0px;
+    padding: 5px;
+}
\ No newline at end of file
diff --git a/module/web/media/default/img/control_add.png b/module/web/media/default/img/control_add.png
new file mode 100644
index 000000000..d39886893
Binary files /dev/null and b/module/web/media/default/img/control_add.png differ
diff --git a/module/web/media/default/img/control_add_blue.png b/module/web/media/default/img/control_add_blue.png
new file mode 100644
index 000000000..d11b7f41d
Binary files /dev/null and b/module/web/media/default/img/control_add_blue.png differ
diff --git a/module/web/templates/default/base.html b/module/web/templates/default/base.html
index 112875cc0..fd18aee84 100644
--- a/module/web/templates/default/base.html
+++ b/module/web/templates/default/base.html
@@ -263,14 +263,14 @@ function AddBox()
 	<li id="action_play"><a href="#"  class="action play" accesskey="o" rel="nofollow">{% trans "Play" %}</a></li>
     <li id="action_cancel"><a href="#"  class="action cancel" accesskey="o" rel="nofollow">{% trans "Cancel" %}</a></li>
     <li id="action_stop"><a href="#"  class="action stop" accesskey="o" rel="nofollow">{% trans "Stop" %}</a></li>
-    <li id="action_add"><a href="javascript:AddBox();"  class="action stop" accesskey="o" rel="nofollow" >{% trans "Add" %}</a></li>
+    <li id="action_add"><a href="javascript:AddBox();"  class="action add" accesskey="o" rel="nofollow" >{% trans "Add" %}</a></li>
 </ul>
 {% endif %}
 
 {% if perms.pyload.can_see_dl %}
 <ul id="page-actions">
-    <li><a class="time">{% trans "Download:" %}<a id="time" style=" background-color: {% if status.download %}#8ffc25{% else %} #fc6e26{% endif %}; padding-left: 0cm; padding-right: 0.1cm; "> {% if status.download %}{% trans "on" %}{% else %}{% trans "off" %}{% endif %}</a></a></li>
-    <li><a class="reconnect">{% trans "Reconnect:" %}<a id="reconnect" style=" background-color: {% if status.reconnect %}#8ffc25{% else %} #fc6e26{% endif %}; padding-left: 0cm; padding-right: 0.1cm; "> {% if status.reconnect %}{% trans "on" %}{% else %}{% trans "off" %}{% endif %}</a></a></li>
+    <li><span class="time">{% trans "Download:" %}</span><a id="time" style=" background-color: {% if status.download %}#8ffc25{% else %} #fc6e26{% endif %}; padding-left: 0cm; padding-right: 0.1cm; "> {% if status.download %}{% trans "on" %}{% else %}{% trans "off" %}{% endif %}</a></li>
+    <li><span class="reconnect">{% trans "Reconnect:" %}</span><a id="reconnect" style=" background-color: {% if status.reconnect %}#8ffc25{% else %} #fc6e26{% endif %}; padding-left: 0cm; padding-right: 0.1cm; "> {% if status.reconnect %}{% trans "on" %}{% else %}{% trans "off" %}{% endif %}</a></li>
     <li><a class="action backlink">{% trans "Speed:" %} <b id="speed">{{ status.speed }}</b> kb/s</a></li>
     <li><a class="action cog">{% trans "Active:" %} <b id="aktiv">{{ status.activ }}</b> / <b id="aktiv_from">{{ status.queue }}</b></a></li>
     <li><a href=""  class="action revisions" accesskey="o" rel="nofollow">{% trans "Reload page" %}</a></li>
diff --git a/module/web/templates/default/settings.html b/module/web/templates/default/settings.html
index 48ae85170..02ded19a4 100644
--- a/module/web/templates/default/settings.html
+++ b/module/web/templates/default/settings.html
@@ -5,6 +5,30 @@
 {% block title %}{% trans "Config" %} - {{block.super}} {% endblock %}
 {% block subtitle %}{% trans "Config" %}{% endblock %}
 
+{% block head %}
+<script type="text/javascript">
+    window.addEvent('domready', function()
+    {
+	$$('#tabs a').addEvent('click', function(e)
+        {
+            $$('#tabs a').removeProperty('class');
+            e.target.set('class', 'selected');
+
+            $$('div.tabContent').set('class', 'tabContent hide');
+            $(e.target.get('href').substring(1)).set('class', 'tabContent');
+            return false;
+        });
+
+        $$('#tabs a')[0].set('class', 'selected');
+        $$('div.tabContent').set('class', 'tabContent hide');
+        $$('div.tabContent')[0].set('class', 'tabContent');
+    });
+
+    
+</script>
+
+{% endblock %}
+
 {% block menu %}
 <li>
     <a href="/" title=""><img src="{{ MEDIA_URL }}img/head-menu-home.png" alt="" /> {% trans "Home" %}</a>
@@ -31,47 +55,54 @@
 {% for message in errors %}
 <b>{{message}}</b><br>
 {% endfor %}
-
-<form id="horizontalForm" action="" method="POST">
+{% if conf|length > 0 %}
+<div class="setfield">
+    <div id="tabsback">
+        <ul id="tabs">
+            {% for skey, section in conf.iteritems  %}
+                <li><a href="#{{skey}}">{{section.desc}}</a></li>
+            {% endfor %}
+        </ul>
+    </div>
+    <form id="horizontalForm" action="" method="POST">
 
     {% for skey, section in conf.iteritems  %}
-
-    <h2>{{section.desc}}</h2>
-		
-    {% for okey, option in section.items %}
-
-	{% ifnotequal okey "desc" %}
-	
-    <label for="{{skey}}|{{okey}}" style="color:#424242;">
-        {{option.desc}}
-        {% 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>
+        <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 %}
+                                        </select>
+                                    {% else %}
+                                        <input id="{{skey}}|{{okey}}" name="{{skey}}|{{okey}}" type="text" value="{{option.value}}"/>
+                                    {% endif %}
+                                {% endifequal %}
+                            </td>
+                        </tr>
+                    {% endifnotequal %}
                 {% endfor %}
-        </select>
-        {% else %}
-        <input id="{{skey}}|{{okey}}" name="{{skey}}|{{okey}}" type="text" value="{{option.value}}"/>
-        {% endif %}
-        {% endifequal %}
-    </label>
-	
-	{% endifnotequal %}	
-	
-    {% endfor %}
-	<br /><br /><br /><br />
+            </table>
+        </div>
     {% endfor %}
+
     {% if conf %}
     <input class="submit" type="submit" value="{% trans "Submit" %}" />
-    <div class="clearer"></div>
     {% endif %}
-</form>
-
+    </form>
+</div>
+{% endif %}
 
 {% endblock %}
-- 
cgit v1.2.3