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

diff --git a/web/index.html b/web/index.html
index 0eccef808ca585e46bf9ab5e3109fa27088472e7..117ca8682ae980345c3798c7fbc4eb4a77a06568 100755 (executable)
--- a/web/index.html
+++ b/web/index.html
@@ -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'>

diff --git a/web/javascript/transmission.js b/web/javascript/transmission.js
index 43b3930a9fe689a25341810d61556b1b7778c808..a5d0345e7468b9eba61fe52c56817b5877409d56 100644 (file)
--- a/web/javascript/transmission.js
+++ b/web/javascript/transmission.js
@@ -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)

diff --git a/web/style/transmission/common.css b/web/style/transmission/common.css
index cc94edf3319e0e06c75aaf37299687751f0a0cd0..c7e333f834f9a7656ee905480e4de17b7d84bdb7 100644 (file)
--- a/web/style/transmission/common.css
+++ b/web/style/transmission/common.css
@@ -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;

diff --git a/web/style/transmission/common.scss b/web/style/transmission/common.scss
index 1ae099219ab9d467c98dec473490d8fe3be58bfc..62c400ecf8526f7dd8386d7eebb6fb219a7ca1da 100644 (file)
--- a/web/style/transmission/common.scss
+++ b/web/style/transmission/common.scss
@@ -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 {

diff --git a/web/style/transmission/mobile.css b/web/style/transmission/mobile.css
index 66c34bba004aaf6f7a71f4654ecfb24bd418d600..8fac0d7a7b38bedc4db94b3ca9adfe27dd9463b3 100644 (file)
--- a/web/style/transmission/mobile.css
+++ b/web/style/transmission/mobile.css
@@ -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; }
 

diff --git a/web/style/transmission/mobile.scss b/web/style/transmission/mobile.scss
index fb2f9eef0fb45857e511f3d7327dff5fa8bbad9c..a7a73542b9b879d5659f627a40b24224747d6b6f 100644 (file)
--- a/web/style/transmission/mobile.scss
+++ b/web/style/transmission/mobile.scss
@@ -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;