From 773cd75d0e78b12d02838027db89948ef507f19c Mon Sep 17 00:00:00 2001 From: Jordan Lee Date: Wed, 26 Oct 2011 04:14:39 +0000 Subject: [PATCH] (trunk web) modify the statusbar's speed display a bit. --- web/index.html | 10 ++++-- web/javascript/transmission.js | 14 ++++---- web/style/transmission/common.css | 9 ++++- web/style/transmission/common.scss | 33 +++++++++++++++++-- web/style/transmission/images/arrow-down.png | Bin 0 -> 193 bytes web/style/transmission/images/arrow-up.png | Bin 0 -> 194 bytes 6 files changed, 54 insertions(+), 12 deletions(-) create mode 100644 web/style/transmission/images/arrow-down.png create mode 100644 web/style/transmission/images/arrow-up.png diff --git a/web/index.html b/web/index.html index ac02a4593..f79fbb333 100755 --- a/web/index.html +++ b/web/index.html @@ -50,8 +50,14 @@
- 0 B/s - 0 B/s +
+
+
+
+
+
+
+
diff --git a/web/javascript/transmission.js b/web/javascript/transmission.js index 409deddce..129db0a89 100644 --- a/web/javascript/transmission.js +++ b/web/javascript/transmission.js @@ -1045,8 +1045,8 @@ Transmission.prototype = updateStatusbar: function() { - var i, row, text, - u=0, d=0, + var u=0, d=0, + i, row, text, fmt = Transmission.fmt, torrents = this.getAllTorrents(); @@ -1058,11 +1058,11 @@ Transmission.prototype = d += row.getDownloadSpeed(); } - text = u ? '↑ ' + fmt.speedBps(u) : ''; - setInnerHTML($('#statusbar #speed-up-label')[0], text); + $('#speed-up-container').toggleClass('active', u>0 ); + $('#speed-up-label').text( fmt.speedBps( u ) ); - text = d ? '↓ ' + fmt.speedBps(d) : ''; - setInnerHTML($('#statusbar #speed-dn-label')[0], text); + $('#speed-dn-container').toggleClass('active', d>0 ); + $('#speed-dn-label').text( fmt.speedBps( d ) ); }, setEnabled: function(key, flag) @@ -1130,7 +1130,7 @@ Transmission.prototype = $('#torrent_inspector').toggle(visible); $('#toolbar-inspector').toggleClass('selected',visible); this.hideMobileAddressbar(); - if (!isMobileDevice) { + if (isMobileDevice) { $('body').toggleClass('inspector_showing',visible); } else { var w = visible ? $('#torrent_inspector').outerWidth() + 1 + 'px' : '0px'; diff --git a/web/style/transmission/common.css b/web/style/transmission/common.css index 58f7b4a9f..853e458a4 100644 --- a/web/style/transmission/common.css +++ b/web/style/transmission/common.css @@ -36,7 +36,7 @@ div#toolbar > div#toolbar-pause:active { background-color: #7dc9f2; background-i div#toolbar > div#toolbar-select { -moz-border-radius-topleft: 5px; -moz-border-radius-bottomleft: 5px; border-top-left-radius: 5px; border-bottom-left-radius: 5px; -moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; background-color: #dddddd; background-image: url("images/toolbar-pointer.png"); /* fallback */ background-image: url("images/toolbar-pointer.png"), -webkit-gradient(linear, left top, left bottom, from(white), to(#bbbbbb)); /* Saf4+, Chrome */ background-image: url("images/toolbar-pointer.png"), -webkit-linear-gradient(top, white, #bbbbbb); /* Chrome 10+, Saf5.1+ */ background-image: url("images/toolbar-pointer.png"), -moz-linear-gradient(top, white, #bbbbbb); /* FF3.6+ */ background-image: url("images/toolbar-pointer.png"), -ms-linear-gradient(top, white, #bbbbbb); /* IE10 */ background-image: url("images/toolbar-pointer.png"), -o-linear-gradient(top, white, #bbbbbb); /* Opera 11.10+ */ background-image: url("images/toolbar-pointer.png"), linear-gradient(top, white, #bbbbbb); /* W3C */ background-position: center; background-repeat: no-repeat; margin-left: 20px; } div#toolbar > div#toolbar-select:active { background-color: #7dc9f2; background-image: url("images/toolbar-pointer.png"); /* fallback */ background-image: url("images/toolbar-pointer.png"), -webkit-gradient(linear, left top, left bottom, from(#68abe6), to(#93e8ff)); /* Saf4+, Chrome */ background-image: url("images/toolbar-pointer.png"), -webkit-linear-gradient(top, #68abe6, #93e8ff); /* Chrome 10+, Saf5.1+ */ background-image: url("images/toolbar-pointer.png"), -moz-linear-gradient(top, #68abe6, #93e8ff); /* FF3.6+ */ background-image: url("images/toolbar-pointer.png"), -ms-linear-gradient(top, #68abe6, #93e8ff); /* IE10 */ background-image: url("images/toolbar-pointer.png"), -o-linear-gradient(top, #68abe6, #93e8ff); /* Opera 11.10+ */ background-image: url("images/toolbar-pointer.png"), linear-gradient(top, #68abe6, #93e8ff); /* W3C */ background-position: center; background-repeat: no-repeat; } div#toolbar > div#toolbar-inspector { -moz-border-radius-topleft: 5px; -moz-border-radius-bottomleft: 5px; border-top-left-radius: 5px; border-bottom-left-radius: 5px; -moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; background-color: #dddddd; background-image: url("images/toolbar-info.png"); /* fallback */ background-image: url("images/toolbar-info.png"), -webkit-gradient(linear, left top, left bottom, from(white), to(#bbbbbb)); /* Saf4+, Chrome */ background-image: url("images/toolbar-info.png"), -webkit-linear-gradient(top, white, #bbbbbb); /* Chrome 10+, Saf5.1+ */ background-image: url("images/toolbar-info.png"), -moz-linear-gradient(top, white, #bbbbbb); /* FF3.6+ */ background-image: url("images/toolbar-info.png"), -ms-linear-gradient(top, white, #bbbbbb); /* IE10 */ background-image: url("images/toolbar-info.png"), -o-linear-gradient(top, white, #bbbbbb); /* Opera 11.10+ */ background-image: url("images/toolbar-info.png"), linear-gradient(top, white, #bbbbbb); /* W3C */ background-position: center; background-repeat: no-repeat; float: right; margin-right: 8px; } -div#toolbar > div#toolbar-inspector:active, div#toolbar > div#toolbar-inspector.selected { background-color: #7dc9f2; background-image: url("images/toolbar-info.png"); /* fallback */ background-image: url("images/toolbar-info.png"), -webkit-gradient(linear, left top, left bottom, from(#68abe6), to(#93e8ff)); /* Saf4+, Chrome */ background-image: url("images/toolbar-info.png"), -webkit-linear-gradient(top, #68abe6, #93e8ff); /* Chrome 10+, Saf5.1+ */ background-image: url("images/toolbar-info.png"), -moz-linear-gradient(top, #68abe6, #93e8ff); /* FF3.6+ */ background-image: url("images/toolbar-info.png"), -ms-linear-gradient(top, #68abe6, #93e8ff); /* IE10 */ background-image: url("images/toolbar-info.png"), -o-linear-gradient(top, #68abe6, #93e8ff); /* Opera 11.10+ */ background-image: url("images/toolbar-info.png"), linear-gradient(top, #68abe6, #93e8ff); /* W3C */ background-position: center; background-repeat: no-repeat; } +div#toolbar > div#toolbar-inspector:active { background-color: #7dc9f2; background-image: url("images/toolbar-info.png"); /* fallback */ background-image: url("images/toolbar-info.png"), -webkit-gradient(linear, left top, left bottom, from(#68abe6), to(#93e8ff)); /* Saf4+, Chrome */ background-image: url("images/toolbar-info.png"), -webkit-linear-gradient(top, #68abe6, #93e8ff); /* Chrome 10+, Saf5.1+ */ background-image: url("images/toolbar-info.png"), -moz-linear-gradient(top, #68abe6, #93e8ff); /* FF3.6+ */ background-image: url("images/toolbar-info.png"), -ms-linear-gradient(top, #68abe6, #93e8ff); /* IE10 */ background-image: url("images/toolbar-info.png"), -o-linear-gradient(top, #68abe6, #93e8ff); /* Opera 11.10+ */ background-image: url("images/toolbar-info.png"), linear-gradient(top, #68abe6, #93e8ff); /* W3C */ background-position: center; background-repeat: no-repeat; } div#toolbar > *.disabled { opacity: 0.25; } /*** @@ -46,6 +46,13 @@ div#toolbar > *.disabled { opacity: 0.25; } ***/ #statusbar { height: 24px; width: 100%; border-bottom: 1px solid #AAA; overflow: hidden; position: relative; } #statusbar #speed-info { margin-top: 5px; margin-left: 45%; text-align: left; } +#statusbar #speed-info * { display: inline-block; } +#statusbar #speed-info #speed-up-icon { margin-left: 8px; width: 8px; height: 8px; background: url("images/arrow-up.png") bottom no-repeat; } +#statusbar #speed-info #speed-dn-icon { width: 8px; height: 8px; background: url("images/arrow-down.png") bottom no-repeat; } +#statusbar #speed-info #speed-up-container { display: none; } +#statusbar #speed-info #speed-up-container.active { display: inline; } +#statusbar #speed-info #speed-dn-container { display: none; } +#statusbar #speed-info #speed-dn-container.active { display: inline; } #statusbar #filter-button { float: left; text-shadow: 0 1px 0 #ccc; margin: 5px 8px; -moz-user-select: none; -webkit-user-select: none; } #statusbar #filter-button:hover { cursor: pointer; } #statusbar #filter-button .filter-selection { text-decoration: underline; } diff --git a/web/style/transmission/common.scss b/web/style/transmission/common.scss index 6fa42e83d..9634010a0 100644 --- a/web/style/transmission/common.scss +++ b/web/style/transmission/common.scss @@ -195,7 +195,7 @@ div#toolbar @include rightRoundedBox(5px); $image-url: 'images/toolbar-info.png'; @include imageOnVerticalGradient($image-url, $nonselected-gradient-color-top, $nonselected-gradient-color-bottom); - &:active, &.selected { + &:active { @include imageOnVerticalGradient($image-url, $selected-gradient-color-top, $selected-gradient-color-bottom); } float: right; @@ -221,10 +221,39 @@ div#toolbar overflow: hidden; position: relative; - #speed-info { + #speed-info + { margin-top: 5px; margin-left: 45%; text-align: left; + + * { + display: inline-block; + } + + #speed-up-icon { + margin-left: 8px; + width: 8px; + height: 8px; + background: url('images/arrow-up.png') bottom no-repeat; + } + + #speed-dn-icon { + width: 8px; + height: 8px; + background: url('images/arrow-down.png') bottom no-repeat; + } + + #speed-up-container { + display: none; + &.active { display: inline; } + } + + #speed-dn-container { + display: none; + &.active { display: inline; } + } + } #filter-button { diff --git a/web/style/transmission/images/arrow-down.png b/web/style/transmission/images/arrow-down.png new file mode 100644 index 0000000000000000000000000000000000000000..b6c7078a042c6e3f4b48bc505e3c21718bdd655b GIT binary patch literal 193 zcmeAS@N?(olHy`uVBq!ia0vp^93afX3?$7I7w-U4x&b~Ru0Yz<)KphjR~rnJz(7Gk zL0nv1R8*9gmzR-|5y;@?<^~E%IW~Ya@RS7k1vBt5+}O&Hyv^g3zW%p4?}~up=AJH& zAr*152LgE+1VkJzo=(fDa}jW2W>qm1WC=XDtc{ClkIc660L^IU!nK#$#Sg^_e`9{+ aSX0HuIj@zu5dKp~!zAirP+eSMEp$=hyhW#D62_~O74 zptyyni(^PdoazBbUIqb?hKKia%wkvy16){zoteW0T_!wCtq}cE@ZsZ3mK4U-TQBU| h&9h(a_YsBz%%w7HzXVF&a01O>@O1TaS?83{1OUq=FhKwS literal 0 HcmV?d00001