(trunk web) experiment with making the filterbar more phone-friendly
This commit is contained in:
parent
438143f3ed
commit
e2c24f28c4
|
@ -47,6 +47,21 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="statusbar">
|
<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>
|
||||||
|
—
|
||||||
|
<span id="filter-count"> </span>
|
||||||
|
</div>
|
||||||
|
|
||||||
<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'>
|
||||||
|
|
|
@ -65,6 +65,9 @@ Transmission.prototype =
|
||||||
|
|
||||||
$('#toolbar-inspector').click($.proxy(this.toggleInspector,this));
|
$('#toolbar-inspector').click($.proxy(this.toggleInspector,this));
|
||||||
|
|
||||||
|
$('#filter-mode').change($.proxy(this.onFilterModeClicked,this));
|
||||||
|
$('#filter-tracker').change($.proxy(this.onFilterTrackerClicked,this));
|
||||||
|
|
||||||
if (!isMobileDevice) {
|
if (!isMobileDevice) {
|
||||||
$(document).bind('keydown', $.proxy(this.keyDown,this) );
|
$(document).bind('keydown', $.proxy(this.keyDown,this) );
|
||||||
$(document).bind('keyup', $.proxy(this.keyUp, this) );
|
$(document).bind('keyup', $.proxy(this.keyUp, this) );
|
||||||
|
@ -97,8 +100,6 @@ Transmission.prototype =
|
||||||
this.refreshTorrents();
|
this.refreshTorrents();
|
||||||
this.togglePeriodicSessionRefresh(true);
|
this.togglePeriodicSessionRefresh(true);
|
||||||
|
|
||||||
this.filterSetup();
|
|
||||||
|
|
||||||
this.updateButtonsSoon();
|
this.updateButtonsSoon();
|
||||||
},
|
},
|
||||||
|
|
||||||
|
@ -1059,8 +1060,6 @@ Transmission.prototype =
|
||||||
fmt = Transmission.fmt,
|
fmt = Transmission.fmt,
|
||||||
torrents = this.getAllTorrents();
|
torrents = this.getAllTorrents();
|
||||||
|
|
||||||
this.refreshFilterButton();
|
|
||||||
|
|
||||||
// up/down speed
|
// up/down speed
|
||||||
for (i=0; row=torrents[i]; ++i) {
|
for (i=0; row=torrents[i]; ++i) {
|
||||||
u += row.getUploadSpeed();
|
u += row.getUploadSpeed();
|
||||||
|
@ -1072,6 +1071,9 @@ Transmission.prototype =
|
||||||
|
|
||||||
$('#speed-dn-container').toggleClass('active', d>0 );
|
$('#speed-dn-container').toggleClass('active', d>0 );
|
||||||
$('#speed-dn-label').text( fmt.speedBps( d ) );
|
$('#speed-dn-label').text( fmt.speedBps( d ) );
|
||||||
|
|
||||||
|
// visible torrents
|
||||||
|
$('#filter-count').text( fmt.plural(this._rows.length, 'Transfer') );
|
||||||
},
|
},
|
||||||
|
|
||||||
setEnabled: function(key, flag)
|
setEnabled: function(key, flag)
|
||||||
|
@ -1079,6 +1081,36 @@ Transmission.prototype =
|
||||||
$(key).toggleClass('disabled', !flag);
|
$(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()
|
updateButtonsSoon: function()
|
||||||
{
|
{
|
||||||
if (!this.buttonRefreshTimer)
|
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> — ';
|
|
||||||
|
|
||||||
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()
|
refilterSoon: function()
|
||||||
{
|
{
|
||||||
if (!this.refilterTimer) {
|
if (!this.refilterTimer) {
|
||||||
|
@ -1257,6 +1226,8 @@ Transmission.prototype =
|
||||||
list = this.elements.torrent_list,
|
list = this.elements.torrent_list,
|
||||||
old_sel_count = $(list).children('.selected').length;
|
old_sel_count = $(list).children('.selected').length;
|
||||||
|
|
||||||
|
this.updateFilterSelect();
|
||||||
|
|
||||||
clearTimeout(this.refilterTimer);
|
clearTimeout(this.refilterTimer);
|
||||||
delete this.refilterTimer;
|
delete this.refilterTimer;
|
||||||
|
|
||||||
|
@ -1361,7 +1332,6 @@ Transmission.prototype =
|
||||||
|
|
||||||
// sync gui
|
// sync gui
|
||||||
this.updateStatusbar();
|
this.updateStatusbar();
|
||||||
this.refreshFilterButton();
|
|
||||||
if (old_sel_count !== $(list).children('.selected').length)
|
if (old_sel_count !== $(list).children('.selected').length)
|
||||||
this.selectionChanged();
|
this.selectionChanged();
|
||||||
},
|
},
|
||||||
|
@ -1375,103 +1345,15 @@ Transmission.prototype =
|
||||||
this.refilter(true);
|
this.refilter(true);
|
||||||
},
|
},
|
||||||
|
|
||||||
refreshFilterPopup: function()
|
onFilterModeClicked: function(ev)
|
||||||
{
|
{
|
||||||
var i, j, o, s, state, states, counts,
|
this.setFilterMode($('#filter-mode').val());
|
||||||
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);
|
|
||||||
},
|
},
|
||||||
|
|
||||||
getStateString: function(mode)
|
onFilterTrackerClicked: function(ev)
|
||||||
{
|
{
|
||||||
switch (mode)
|
var tracker = $('#filter-tracker').val();
|
||||||
{
|
this.setFilterTracker(tracker==='all' ? null : tracker);
|
||||||
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';
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
|
|
||||||
setFilterTracker: function(domain)
|
setFilterTracker: function(domain)
|
||||||
|
|
|
@ -326,16 +326,9 @@ div#toolbar {
|
||||||
display: none; }
|
display: none; }
|
||||||
#statusbar #speed-info #speed-dn-container.active {
|
#statusbar #speed-info #speed-dn-container.active {
|
||||||
display: inline; }
|
display: inline; }
|
||||||
#statusbar #filter-button {
|
#statusbar #filter-select {
|
||||||
float: left;
|
float: left;
|
||||||
text-shadow: 0 1px 0 #ccc;
|
margin-left: 5px; }
|
||||||
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; }
|
|
||||||
#statusbar input#torrent_search {
|
#statusbar input#torrent_search {
|
||||||
float: right;
|
float: right;
|
||||||
height: 15px;
|
height: 15px;
|
||||||
|
|
|
@ -233,14 +233,9 @@ $statusbar-gradient-bottom: #bbb;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
#filter-button {
|
#filter-select {
|
||||||
float: left;
|
float: left;
|
||||||
text-shadow: 0 1px 0 #ccc;
|
margin-left: 5px;
|
||||||
margin: 5px 8px;
|
|
||||||
-moz-user-select: none;
|
|
||||||
-webkit-user-select: none;
|
|
||||||
&:hover { cursor: pointer };
|
|
||||||
#filter-button .filter-selection { text-decoration: underline; }
|
|
||||||
}
|
}
|
||||||
|
|
||||||
input#torrent_search {
|
input#torrent_search {
|
||||||
|
|
|
@ -349,16 +349,9 @@ div#toolbar {
|
||||||
display: none; }
|
display: none; }
|
||||||
#statusbar #speed-info #speed-dn-container.active {
|
#statusbar #speed-info #speed-dn-container.active {
|
||||||
display: inline; }
|
display: inline; }
|
||||||
#statusbar #filter-button {
|
#statusbar #filter-select {
|
||||||
float: left;
|
float: left;
|
||||||
text-shadow: 0 1px 0 #ccc;
|
margin-left: 5px; }
|
||||||
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; }
|
|
||||||
#statusbar input#torrent_search {
|
#statusbar input#torrent_search {
|
||||||
display: none; }
|
display: none; }
|
||||||
|
|
||||||
|
|
|
@ -226,15 +226,10 @@ $statusbar-gradient-bottom: #bbb;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
#filter-button {
|
#filter-select {
|
||||||
float: left;
|
float: left;
|
||||||
text-shadow: 0 1px 0 #ccc;
|
margin-left: 5px;
|
||||||
margin: 5px 8px;
|
}
|
||||||
-moz-user-select: none;
|
|
||||||
-webkit-user-select: none;
|
|
||||||
&:hover { cursor: pointer };
|
|
||||||
#filter-button .filter-selection { text-decoration: underline; }
|
|
||||||
}
|
|
||||||
|
|
||||||
input#torrent_search {
|
input#torrent_search {
|
||||||
display: none;
|
display: none;
|
||||||
|
|
Loading…
Reference in New Issue