diff options
| -rw-r--r-- | module/web/static/css/default/style.css | 55 | ||||
| -rw-r--r-- | module/web/static/img/default/downloading-icon-green.png | bin | 0 -> 1029 bytes | |||
| -rw-r--r-- | module/web/static/img/default/downloading-icon-red.png | bin | 0 -> 1016 bytes | |||
| -rw-r--r-- | module/web/static/img/default/gear-icon-white.png | bin | 0 -> 769 bytes | |||
| -rw-r--r-- | module/web/static/img/default/icon_clock_small_white.png | bin | 1540 -> 0 bytes | |||
| -rw-r--r-- | module/web/static/img/default/icon_speed_small_white.png | bin | 1654 -> 0 bytes | |||
| -rw-r--r-- | module/web/static/img/default/queue-icon-white.png | bin | 0 -> 647 bytes | |||
| -rw-r--r-- | module/web/static/img/default/reconnecting-icon-green.png | bin | 0 -> 945 bytes | |||
| -rw-r--r-- | module/web/static/img/default/reconnecting-icon-red.png | bin | 0 -> 914 bytes | |||
| -rw-r--r-- | module/web/static/img/default/speed-icon-white.png | bin | 0 -> 904 bytes | |||
| -rw-r--r-- | module/web/static/img/default/user-icon-white.png | bin | 0 -> 474 bytes | |||
| -rw-r--r-- | module/web/templates/default/base.html | 54 |
12 files changed, 92 insertions, 17 deletions
diff --git a/module/web/static/css/default/style.css b/module/web/static/css/default/style.css index 232733b95..862b2d2c7 100644 --- a/module/web/static/css/default/style.css +++ b/module/web/static/css/default/style.css @@ -117,18 +117,10 @@ header img.logo { .header_block {
float: right;
- margin: 12px 12px 0;
+ margin: 8px 8px 0;
font-family: SansationRegular, sans-serif;
color: #ffffff;
}
-.icon_info {
- padding-bottom: 5px;
-}
-
-.icon_info img {
- margin-bottom: -4px;
- padding-right: 5px;
-}
#notification_div {
position: absolute;
@@ -148,6 +140,48 @@ header img.logo { font-family: sans-serif
}
+#speedmeter, #downloads{
+ height: 26px;
+ margin: 0 2px 4px 2px;
+}
+.header-icon, #check_reconnecting, #check_downloading{
+ padding: 0;
+ margin: 0 4px 3px 0;
+ float: left;
+ width: 26px;
+ height: 26px;
+}
+.header_text {
+ vertical-align: middle;
+}
+#downloads_icon {
+ background: url("../../img/default/queue-icon-white.png");
+}
+#speedmeter_icon {
+ background: url("../../img/default/speed-icon-white.png");
+}
+#button_settings {
+ background: url("../../img/default/gear-icon-white.png");
+}
+#button_user {
+ background: url("../../img/default/user-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");
+}
+
+
/*
Footer
*/
@@ -209,4 +243,5 @@ footer h2 { line-height: 16px;
margin: 0;
padding-bottom: 6px;
-}
\ 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 Binary files differnew file mode 100644 index 000000000..3c65e5c71 --- /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 Binary files differnew file mode 100644 index 000000000..d332ebb57 --- /dev/null +++ b/module/web/static/img/default/downloading-icon-red.png diff --git a/module/web/static/img/default/gear-icon-white.png b/module/web/static/img/default/gear-icon-white.png Binary files differnew file mode 100644 index 000000000..3a41217b2 --- /dev/null +++ b/module/web/static/img/default/gear-icon-white.png diff --git a/module/web/static/img/default/icon_clock_small_white.png b/module/web/static/img/default/icon_clock_small_white.png Binary files differdeleted file mode 100644 index 9e6c9bdd0..000000000 --- a/module/web/static/img/default/icon_clock_small_white.png +++ /dev/null diff --git a/module/web/static/img/default/icon_speed_small_white.png b/module/web/static/img/default/icon_speed_small_white.png Binary files differdeleted file mode 100644 index ac86514ca..000000000 --- a/module/web/static/img/default/icon_speed_small_white.png +++ /dev/null diff --git a/module/web/static/img/default/queue-icon-white.png b/module/web/static/img/default/queue-icon-white.png Binary files differnew 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 Binary files differnew file mode 100644 index 000000000..209a80348 --- /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 Binary files differnew file mode 100644 index 000000000..04f7ce018 --- /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 Binary files differnew file mode 100644 index 000000000..dc0fd6866 --- /dev/null +++ b/module/web/static/img/default/speed-icon-white.png diff --git a/module/web/static/img/default/user-icon-white.png b/module/web/static/img/default/user-icon-white.png Binary files differnew file mode 100644 index 000000000..e062d7c87 --- /dev/null +++ b/module/web/static/img/default/user-icon-white.png diff --git a/module/web/templates/default/base.html b/module/web/templates/default/base.html index 772d46a00..993a788bb 100644 --- a/module/web/templates/default/base.html +++ b/module/web/templates/default/base.html @@ -15,6 +15,32 @@ <script type="text/javascript" src="static/js/libs/underscore-min.js"></script>
<script type="text/javascript" src="static/js/libs/backbone-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 %}
@@ -32,14 +58,28 @@ </div>
<div id="speedgraph"></div>
- <div class="header_block">
- <div class="icon_info">
- <img src="static/img/default/icon_speed_small_white.png" height="20px"/><span>500 kb/s</span>
- </div>
- <div class="icon_info">
- <img src="static/img/default/icon_clock_small_white.png" height="20px"/><span>5 / 125</span>
- </div>
+
+ <div class="header_block">
+ <div>
+ <div id="check_reconnecting" class="pyload-icon-reconnecting-deactivated" title="{{ _('Reconnect') }}"></div>
+ <div id="check_downloading" class="pyload-icon-downloading-deactivated" title="{{ _('Download') }}"></div>
+ </div>
+ <div>
+ <div id="button_settings" class="header-icon" title="{{ _('Settings') }}"></div>
+ <div id="button_user" class="header-icon" title="{{ _('Logout') }}"></div>
+ </div>
</div>
+
+ <div class="header_block">
+ <div id="speedmeter" title="{{ _('Speed') }}">
+ <div id="speedmeter_icon" class="header-icon"></div>
+ <span id="speedmeter_value" class="header_text">250KiB/s</span>
+ </div>
+ <div id="downloads" title="{{ _('Queue') }}">
+ <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>
|
