Changeset 13087

Timestamp:

Nov 13, 2011, 6:04:29 PM (10 years ago)

Author:

jordan

Message:

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

Location:

trunk/web

Files:

• index.html (modified) (1 diff)
• javascript/transmission.js (modified) (9 diffs)
• style/transmission/common.css (modified) (1 diff)
• style/transmission/common.scss (modified) (1 diff)
• style/transmission/mobile.css (modified) (1 diff)
• style/transmission/mobile.scss (modified) (1 diff)

trunk/web/index.html

@@ -48 +48 @@
 
                 <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>

trunk/web/javascript/transmission.js

@@ -65 +65 @@
 
                 $('#toolbar-inspector').click($.proxy(this.toggleInspector,this));
+
+                $('#filter-mode').change($.proxy(this.onFilterModeClicked,this));
+                $('#filter-tracker').change($.proxy(this.onFilterTrackerClicked,this));
 
                 if (!isMobileDevice) {
@@ -97 +100 @@
                 this.refreshTorrents();
                 this.togglePeriodicSessionRefresh(true);
-
-                this.filterSetup();
 
                 this.updateButtonsSoon();
@@ -1060 +1061 @@
                     torrents = this.getAllTorrents();
 
-                this.refreshFilterButton();
-
                 // up/down speed
                 for (i=0; row=torrents[i]; ++i) {
@@ -1073 +1072 @@
                 $('#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') );
         },
 
@@ -1078 +1080 @@
         {
                 $(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);
+                }
         },
 
@@ -1154 +1186 @@
         ****/
 
-        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()
         {
@@ -1257 +1226 @@
                     list = this.elements.torrent_list,
                     old_sel_count = $(list).children('.selected').length;
+
+                this.updateFilterSelect();
 
                 clearTimeout(this.refilterTimer);
@@ -1362 +1333 @@
                 // sync gui
                 this.updateStatusbar();
-                this.refreshFilterButton();
                 if (old_sel_count !== $(list).children('.selected').length)
                         this.selectionChanged();
@@ -1376 +1346 @@
         },
 
-        refreshFilterPopup: function()
-        {
-                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);
-        },
-
-        getStateString: function(mode)
-        {
-                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';
-                }
+        onFilterModeClicked: function(ev)
+        {
+                this.setFilterMode($('#filter-mode').val());
+        },
+
+        onFilterTrackerClicked: function(ev)
+        {
+                var tracker = $('#filter-tracker').val();
+                this.setFilterTracker(tracker==='all' ? null : tracker);
         },
 

trunk/web/style/transmission/common.css

@@ -327 +327 @@
       #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;

trunk/web/style/transmission/common.scss

@@ -234 +234 @@
         }
 
-        #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;
         }
 

trunk/web/style/transmission/mobile.css

@@ -350 +350 @@
       #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; }

trunk/web/style/transmission/mobile.scss

@@ -227 +227 @@
         }
 
-        #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 {