Transmission/transmission
1
0
Fork 0
mirror of https://github.com/transmission/transmission.git synced 2025-12-20 18:38:42 +00:00
Code Issues Packages Projects Releases Wiki Activity

(trunk web) modify the statusbar's speed display a bit.

Browse Source
This commit is contained in:
Jordan Lee
2011-10-26 04:14:39 +00:00
parent 74cb70503b
commit 773cd75d0e
6 changed files with 54 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
web/index.html
View File

@@ -50,8 +50,14 @@
<input type="search" id="torrent_search" placeholder="Filter" /> <input type="search" id="torrent_search" placeholder="Filter" />
<div id='filter-button'></div> <div id='filter-button'></div>
<div id='speed-info'> <div id='speed-info'>
<span id="speed-dn-label">0 B/s</span> <div id='speed-dn-container'>
<span id="speed-up-label">0 B/s</span> <div id='speed-dn-icon'></div>
<div id='speed-dn-label'></div>
</div>
<div id='speed-up-container'>
<div id='speed-up-icon'></div>
<div id='speed-up-label'></div>
</div>
</div> </div>
</div> </div>

14
web/javascript/transmission.js
View File

@@ -1045,8 +1045,8 @@ Transmission.prototype =
updateStatusbar: function() updateStatusbar: function()
{ {
var i, row, text, var u=0, d=0,
u=0, d=0, i, row, text,
fmt = Transmission.fmt, fmt = Transmission.fmt,
torrents = this.getAllTorrents(); torrents = this.getAllTorrents();
@@ -1058,11 +1058,11 @@ Transmission.prototype =
d += row.getDownloadSpeed(); d += row.getDownloadSpeed();
} }
text = u ? '&uarr; ' + fmt.speedBps(u) : ''; $('#speed-up-container').toggleClass('active', u>0 );
setInnerHTML($('#statusbar #speed-up-label')[0], text); $('#speed-up-label').text( fmt.speedBps( u ) );
text = d ? '&darr; ' + fmt.speedBps(d) : ''; $('#speed-dn-container').toggleClass('active', d>0 );
setInnerHTML($('#statusbar #speed-dn-label')[0], text); $('#speed-dn-label').text( fmt.speedBps( d ) );
}, },
setEnabled: function(key, flag) setEnabled: function(key, flag)
@@ -1130,7 +1130,7 @@ Transmission.prototype =
$('#torrent_inspector').toggle(visible); $('#torrent_inspector').toggle(visible);
$('#toolbar-inspector').toggleClass('selected',visible); $('#toolbar-inspector').toggleClass('selected',visible);
this.hideMobileAddressbar(); this.hideMobileAddressbar();
if (!isMobileDevice) { if (isMobileDevice) {
$('body').toggleClass('inspector_showing',visible); $('body').toggleClass('inspector_showing',visible);
} else { } else {
var w = visible ? $('#torrent_inspector').outerWidth() + 1 + 'px' : '0px'; var w = visible ? $('#torrent_inspector').outerWidth() + 1 + 'px' : '0px';

9
web/style/transmission/common.css
View File

@@ -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 { -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-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 { -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; } 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 { 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 { 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 { 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:hover { cursor: pointer; }
#statusbar #filter-button .filter-selection { text-decoration: underline; } #statusbar #filter-button .filter-selection { text-decoration: underline; }

33
web/style/transmission/common.scss
View File

@@ -195,7 +195,7 @@ div#toolbar
@include rightRoundedBox(5px); @include rightRoundedBox(5px);
$image-url: 'images/toolbar-info.png'; $image-url: 'images/toolbar-info.png';
@include imageOnVerticalGradient($image-url, $nonselected-gradient-color-top, $nonselected-gradient-color-bottom); @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); @include imageOnVerticalGradient($image-url, $selected-gradient-color-top, $selected-gradient-color-bottom);
} }
float: right; float: right;
@@ -221,10 +221,39 @@ div#toolbar
overflow: hidden; overflow: hidden;
position: relative; position: relative;
#speed-info { #speed-info
{
margin-top: 5px; margin-top: 5px;
margin-left: 45%; margin-left: 45%;
text-align: left; 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 { #filter-button {

BIN
web/style/transmission/images/arrow-down.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 193 B

BIN
web/style/transmission/images/arrow-up.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 194 B