mirror
/
transmission
mirror of https://github.com/transmission/transmission
1
0
Fork 0
Code Issues Releases Wiki Activity

(trunk web) experiment with making the filterbar more phone-friendly

This commit is contained in:
Jordan Lee 2011-11-13 18:04:29 +00:00
parent 438143f3ed
commit e2c24f28c4
6 changed files with 68 additions and 195 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
web/index.html
View File

@ -47,6 +47,21 @@
</div>
<div id="statusbar">
<div id='filter-select'>
Show
<select id="filter-mode">
<option value="all">All</option>
<option value="active">Active</option>
<option value="downloading">Downloading</option>
<option value="seeding">Seeding</option>
<option value="paused">Paused</option>
<option value="finished">Finished</option>
</select>
<select id="filter-tracker"></select>
&mdash;
<span id="filter-count">&nbsp;</span>
</div>
<input type="search" id="torrent_search" placeholder="Filter" />
<div id='filter-button'></div>
<div id='speed-info'>

204
web/javascript/transmission.js
View File

@ -65,6 +65,9 @@ Transmission.prototype =
$('#toolbar-inspector').click($.proxy(this.toggleInspector,this));
$('#filter-mode').change($.proxy(this.onFilterModeClicked,this));
$('#filter-tracker').change($.proxy(this.onFilterTrackerClicked,this));
if (!isMobileDevice) {
$(document).bind('keydown', $.proxy(this.keyDown,this) );
$(document).bind('keyup', $.proxy(this.keyUp, this) );
@ -97,8 +100,6 @@ Transmission.prototype =
this.refreshTorrents();
this.togglePeriodicSessionRefresh(true);
this.filterSetup();
this.updateButtonsSoon();
},
@ -1059,8 +1060,6 @@ Transmission.prototype =
fmt = Transmission.fmt,
torrents = this.getAllTorrents();
this.refreshFilterButton();
// up/down speed
for (i=0; row=torrents[i]; ++i) {
u += row.getUploadSpeed();
@ -1072,6 +1071,9 @@ Transmission.prototype =
$('#speed-dn-container').toggleClass('active', d>0 );
$('#speed-dn-label').text( fmt.speedBps( d ) );
// visible torrents
$('#filter-count').text( fmt.plural(this._rows.length, 'Transfer') );
},
setEnabled: function(key, flag)
@ -1079,6 +1081,36 @@ Transmission.prototype =
$(key).toggleClass('disabled', !flag);
},
updateFilterSelect: function()
{
var i, names, name, str, o,
e = $('#filter-tracker'),
trackers = this.getTrackers();
// build a sorted list of names
names = [];
for (name in trackers)
names.push (name);
names.sort();
// build the new html
if (!this.filterTracker)
str = '<option value="all" selected="selected">All</option>';
else
str = '<option value="all">All</option>';
for (i=0; name=names[i]; ++i) {
o = trackers[name];
str += '<option value="' + o.domain + '"';
if (trackers[name].domain === this.filterTracker) str += ' selected="selected"';
str += '>' + name + '</option>';
}
if (!this.filterTrackersStr || (this.filterTrackersStr !== str)) {
this.filterTrackersStr = str;
$('#filter-tracker').html(str);
}
},
updateButtonsSoon: function()
{
if (!this.buttonRefreshTimer)
@ -1153,69 +1185,6 @@ Transmission.prototype =
*****
****/
filterSetup: function()
{
var tr = this,
popup = $('#filter-popup');
popup.dialog({
autoOpen: false,
position: isMobileDevice ? 'center' : [40,40],
show: 'blind',
hide: 'blind',
title: 'Show',
width: 315
});
$('#filter-button').click(function() {
if (popup.is(":visible"))
popup.dialog('close');
else {
tr.refreshFilterPopup();
popup.dialog('open');
}
});
this.refreshFilterButton();
},
refreshFilterButton: function()
{
var o, tmp, text, torrent_count,
state = this[Prefs._FilterMode],
state_all = state === Prefs._FilterAll,
state_string = this.getStateString(state),
tracker = this.filterTracker,
tracker_all = !tracker,
tracker_string = tracker ? this.getReadableDomain(tracker) : '',
visible_count = this._rows.length;
// count the total number of torrents
torrent_count = 0;
o = this._torrents;
for (tmp in o)
if (o.hasOwnProperty(tmp))
++torrent_count;
text = 'Show <span class="filter-selection">';
if (state_all && tracker_all)
text += 'All';
else if (state_all)
text += tracker_string;
else if (tracker_all)
text += state_string;
else
text += state_string + '</span> at <span class="filter-selection">' + tracker_string;
text += '</span> &mdash; ';
if (torrent_count !== visible_count)
text += visible_count.toStringWithCommas() + ' of ' + torrent_count.toStringWithCommas();
else if (torrent_count === 1)
text += '1 Transfer';
else
text += torrent_count.toStringWithCommas() + ' Transfers';
$('#filter-button').html(text);
},
refilterSoon: function()
{
if (!this.refilterTimer) {
@ -1257,6 +1226,8 @@ Transmission.prototype =
list = this.elements.torrent_list,
old_sel_count = $(list).children('.selected').length;
this.updateFilterSelect();
clearTimeout(this.refilterTimer);
delete this.refilterTimer;
@ -1361,7 +1332,6 @@ Transmission.prototype =
// sync gui
this.updateStatusbar();
this.refreshFilterButton();
if (old_sel_count !== $(list).children('.selected').length)
this.selectionChanged();
},
@ -1375,103 +1345,15 @@ Transmission.prototype =
this.refilter(true);
},
refreshFilterPopup: function()
onFilterModeClicked: function(ev)
{
var i, j, o, s, state, states, counts,
sel_state, fragment, div,
tor, torrents, name, names,
trackers = this.getTrackers(),
tr = this;
/***
**** States
***/
states = [ Prefs._FilterAll,
Prefs._FilterActive,
Prefs._FilterDownloading,
Prefs._FilterSeeding,
Prefs._FilterPaused,
Prefs._FilterFinished ];
counts = {};
for (i=0; state=states[i]; ++i)
counts[state] = 0;
torrents = this.getAllTorrents();
for (i=0; tor=torrents[i]; ++i)
for (j=0; state=states[j]; ++j)
if (tor.testState(state))
counts[state]++;
sel_state = tr[Prefs._FilterMode];
fragment = document.createDocumentFragment();
for (i=0; s=states[i]; ++i)
{
div = document.createElement('div');
div.id = 'show-state-' + s;
div.className = 'row' + (s === sel_state ? ' selected':'');
div.innerHTML = '<span class="filter-img"></span>'
+ '<span class="filter-name">' + tr.getStateString(s) + '</span>'
+ '<span class="count">' + counts[s].toStringWithCommas() + '</span>';
$(div).click({'state':s}, function(ev) {
tr.setFilterMode(ev.data.state);
$('#filter-popup').dialog('close');
});
fragment.appendChild(div);
}
$('#filter-by-state .row').remove();
$('#filter-by-state')[0].appendChild(fragment);
/***
**** Trackers
***/
names = [];
for (name in trackers)
names.push (name);
names.sort();
fragment = document.createDocumentFragment();
div = document.createElement('div');
div.id = 'show-tracker-all';
div.className = 'row' + (tr.filterTracker ? '' : ' selected');
div.innerHTML = '<span class="filter-img"></span>'
+ '<span class="filter-name">All</span>'
+ '<span class="count">' + torrents.length.toStringWithCommas() + '</span>';
$(div).click(function() {
tr.setFilterTracker(null);
$('#filter-popup').dialog('close');
});
fragment.appendChild(div);
for (i=0; name=names[i]; ++i) {
o = trackers[name];
div = document.createElement('div');
div.id = 'show-tracker-' + name;
div.className = 'row' + (o.domain === tr.filterTracker ? ' selected':'');
div.innerHTML = '<span class="filter-name">'+ name + '</span>'
+ '<span class="count">'+ o.count.toStringWithCommas() + '</span>';
$(div).click({domain:o.domain}, function(ev) {
tr.setFilterTracker(ev.data.domain);
$('#filter-popup').dialog('close');
});
fragment.appendChild(div);
}
$('#filter-by-tracker .row').remove();
$('#filter-by-tracker')[0].appendChild(fragment);
this.setFilterMode($('#filter-mode').val());
},
getStateString: function(mode)
onFilterTrackerClicked: function(ev)
{
switch (mode)
{
case Prefs._FilterActive: return 'Active';
case Prefs._FilterSeeding: return 'Seeding';
case Prefs._FilterDownloading: return 'Downloading';
case Prefs._FilterPaused: return 'Paused';
case Prefs._FilterFinished: return 'Finished';
default: return 'All';
}
var tracker = $('#filter-tracker').val();
this.setFilterTracker(tracker==='all' ? null : tracker);
},
setFilterTracker: function(domain)

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

@ -326,16 +326,9 @@ div#toolbar {
display: none; }
#statusbar #speed-info #speed-dn-container.active {
display: inline; }
#statusbar #filter-button {
#statusbar #filter-select {
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-button .filter-selection {
text-decoration: underline; }
margin-left: 5px; }
#statusbar input#torrent_search {
float: right;
height: 15px;

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

@ -233,14 +233,9 @@ $statusbar-gradient-bottom: #bbb;
}
}
#filter-button {
#filter-select {
float: left;
text-shadow: 0 1px 0 #ccc;
margin: 5px 8px;
-moz-user-select: none;
-webkit-user-select: none;
&:hover { cursor: pointer };
#filter-button .filter-selection { text-decoration: underline; }
margin-left: 5px;
}
input#torrent_search {

11
web/style/transmission/mobile.css
View File

@ -349,16 +349,9 @@ div#toolbar {
display: none; }
#statusbar #speed-info #speed-dn-container.active {
display: inline; }
#statusbar #filter-button {
#statusbar #filter-select {
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-button .filter-selection {
text-decoration: underline; }
margin-left: 5px; }
#statusbar input#torrent_search {
display: none; }

13
web/style/transmission/mobile.scss
View File

@ -226,15 +226,10 @@ $statusbar-gradient-bottom: #bbb;
}
}
#filter-button {
float: left;
text-shadow: 0 1px 0 #ccc;
margin: 5px 8px;
-moz-user-select: none;
-webkit-user-select: none;
&:hover { cursor: pointer };
#filter-button .filter-selection { text-decoration: underline; }
}
#filter-select {
float: left;
margin-left: 5px;
}
input#torrent_search {
display: none;