added speed & downloads label and some icons

8 files changed, 82 insertions, 5 deletions

diff --git a/module/web/static/css/default/style.css b/module/web/static/css/default/style.css
index 2757501e2..3fb1a5406 100644
--- a/module/web/static/css/default/style.css
+++ b/module/web/static/css/default/style.css
@@ -189,4 +189,45 @@ footer h2 {
     line-height: 16px;

     margin: 0;

     padding-bottom: 6px;

+}

+

+.header_block input {

+	width: 26px;

+	height: 26px;

+}

+#speedmeter, #downloads{

+	height: 26px;

+	margin: 0 2px 4px 2px;

+}

+.header-icon, #check_reconnecting, #check_downloading {

+	padding: 0;

+	margin: 0 3px 0 0;

+	float: left;

+	width: 26px;

+	height: 26px;

+}

+.header_text {

+	vertical-align:middle;

+	color: #FFFFFF;

+}

+#downloads_icon {

+    background: url("../../img/default/queue-icon-white.png");

+}

+#speedmeter_icon{

+    background: url("../../img/default/speed-icon-white.png");

+}

+

+

+.pyload-icon-reconnecting-activated {

+    background: url("../../img/default/reconnecting-icon-green.png");

+}

+.pyload-icon-reconnecting-deactivated {

+    background: url("../../img/default/reconnecting-icon-red.png");

+}

+

+.pyload-icon-downloading-activated {

+    background: url("../../img/default/downloading-icon-green.png");

+}

+.pyload-icon-downloading-deactivated {

+    background: url("../../img/default/downloading-icon-red.png");

 }
\ No newline at end of file
diff --git a/module/web/static/img/default/downloading-icon-green.png b/module/web/static/img/default/downloading-icon-green.png
new file mode 100644
index 000000000..84e47dc3b
--- /dev/null
+++ b/module/web/static/img/default/downloading-icon-green.png
diff --git a/module/web/static/img/default/downloading-icon-red.png b/module/web/static/img/default/downloading-icon-red.png
new file mode 100644
index 000000000..ec66e56ef
--- /dev/null
+++ b/module/web/static/img/default/downloading-icon-red.png
diff --git a/module/web/static/img/default/queue-icon-white.png b/module/web/static/img/default/queue-icon-white.png
new file mode 100644
index 000000000..2dd520607
--- /dev/null
+++ b/module/web/static/img/default/queue-icon-white.png
diff --git a/module/web/static/img/default/reconnecting-icon-green.png b/module/web/static/img/default/reconnecting-icon-green.png
new file mode 100644
index 000000000..93e3732f0
--- /dev/null
+++ b/module/web/static/img/default/reconnecting-icon-green.png
diff --git a/module/web/static/img/default/reconnecting-icon-red.png b/module/web/static/img/default/reconnecting-icon-red.png
new file mode 100644
index 000000000..e97a10270
--- /dev/null
+++ b/module/web/static/img/default/reconnecting-icon-red.png
diff --git a/module/web/static/img/default/speed-icon-white.png b/module/web/static/img/default/speed-icon-white.png
new file mode 100644
index 000000000..dc0fd6866
--- /dev/null
+++ b/module/web/static/img/default/speed-icon-white.png
diff --git a/module/web/templates/default/base.html b/module/web/templates/default/base.html
index dc715bcbd..67d4f5b1c 100644
--- a/module/web/templates/default/base.html
+++ b/module/web/templates/default/base.html
@@ -13,6 +13,32 @@
     <script type="text/javascript" src="static/js/libs/jquery.flot.min.js"></script>

     <script type="text/javascript" src="static/js/libs/jquery-ui-1.8.22.custom.min.js"></script>

 

+	<script>

+	

+	// id has to look like: #check_name

+	// value is true, false or toggle

+	// iconclass has to be pyload-icon-name-activated and pyload-icon-name-deactivated

+	function setCheckedButton(id, value) {

+		var splitted = id.split("_")

+		if (value == "true") {

+			$( id ).setAttribute("class",'pyload-icon-' + splitted[1] + "-activated");

+			$( id ).checked = true;

+		} else if (value == "false") {

+			$( id ).setAttribute("class",'pyload-icon-' + splitted[1] + "-deactivated");

+			$( id ).checked = false;

+		} else { //toggle

+			if ($( id ).checked == true) {

+				$( id ).setAttribute("class",'pyload-icon-' + splitted[1] + "-deactivated");

+				$( id ).checked = false;

+			} else {

+				$( id ).setAttribute("class",'pyload-icon-' + splitted[1] + "-activated");

+				$( id ).checked = true;

+			}

+		}

+	}

+	

+	</script>

+	

     <title>{% block title %}pyLoad {{ _("Webinterface") }}{% endblock %}</title>

 

     {% block head %}

@@ -25,12 +51,22 @@
             <img class="logo" alt="" src="static/img/default/logo.png" width="120px" height="120px">

             <span class="title">pyLoad</span>

 			<div id="speedgraph"></div>

-            <div class="header_block">

-                <div id="speedmeter"></div>

-                <div id="downloads"></div>

-                <div id="reconnecting_div"><input type="checkbox" id="reconnecting_check" class="header_button" /><label for="reconnecting_check">{{ _("Reconnect") }}</label></div>

-                <div id="downloading_div"><input type="checkbox" id="downloading_check" class="header_button" /><label for="downloading_check">{{ _("Download") }}</label></div>

+			

+			<div class="header_block">

+                <div id="check_reconnecting" class="pyload-icon-reconnecting-deactivated"></div>

+                <div id="check_downloading" class="pyload-icon-downloading-deactivated"></div>

             </div>

+			

+            <div class="header_block">

+                <div id="speedmeter">

+					<div id="speedmeter_icon" class="header-icon"></div>

+					<span id="speedmeter_value" class="header_text">250KiB/s</span>

+				</div>

+                <div id="downloads">

+					<div id="downloads_icon" class="header-icon"></div>

+					<span id="downloads_value" class="header_text">3/126/212</span>

+				</div>

+			</div>

         </div>

     </header>

     <div id="push"></div>