Changeset 13087


Ignore:
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:
6 edited

Legend:

Unmodified
Added
Removed
  • trunk/web/index.html

    r13074 r13087  
    4848
    4949                <div id="statusbar">
     50                        <div id='filter-select'>
     51                                Show
     52                                <select id="filter-mode">
     53                                        <option value="all">All</option>
     54                                        <option value="active">Active</option>
     55                                        <option value="downloading">Downloading</option>
     56                                        <option value="seeding">Seeding</option>
     57                                        <option value="paused">Paused</option>
     58                                        <option value="finished">Finished</option>
     59                                </select>
     60                                <select id="filter-tracker"></select>
     61                                &mdash;
     62                                <span id="filter-count">&nbsp;</span>
     63                        </div>
     64
    5065                        <input type="search" id="torrent_search" placeholder="Filter" />
    5166                        <div id='filter-button'></div>
  • trunk/web/javascript/transmission.js

    r13064 r13087  
    6565
    6666                $('#toolbar-inspector').click($.proxy(this.toggleInspector,this));
     67
     68                $('#filter-mode').change($.proxy(this.onFilterModeClicked,this));
     69                $('#filter-tracker').change($.proxy(this.onFilterTrackerClicked,this));
    6770
    6871                if (!isMobileDevice) {
     
    97100                this.refreshTorrents();
    98101                this.togglePeriodicSessionRefresh(true);
    99 
    100                 this.filterSetup();
    101102
    102103                this.updateButtonsSoon();
     
    10601061                    torrents = this.getAllTorrents();
    10611062
    1062                 this.refreshFilterButton();
    1063 
    10641063                // up/down speed
    10651064                for (i=0; row=torrents[i]; ++i) {
     
    10731072                $('#speed-dn-container').toggleClass('active', d>0 );
    10741073                $('#speed-dn-label').text( fmt.speedBps( d ) );
     1074
     1075                // visible torrents
     1076                $('#filter-count').text( fmt.plural(this._rows.length, 'Transfer') );
    10751077        },
    10761078
     
    10781080        {
    10791081                $(key).toggleClass('disabled', !flag);
     1082        },
     1083
     1084        updateFilterSelect: function()
     1085        {
     1086                var i, names, name, str, o,
     1087                    e = $('#filter-tracker'),
     1088                    trackers = this.getTrackers();
     1089
     1090                // build a sorted list of names
     1091                names = [];
     1092                for (name in trackers)
     1093                        names.push (name);
     1094                names.sort();
     1095
     1096                // build the new html
     1097                if (!this.filterTracker)
     1098                        str = '<option value="all" selected="selected">All</option>';
     1099                else
     1100                        str = '<option value="all">All</option>';
     1101                for (i=0; name=names[i]; ++i) {
     1102                        o = trackers[name];
     1103                        str += '<option value="' + o.domain + '"';
     1104                        if (trackers[name].domain === this.filterTracker) str += ' selected="selected"';
     1105                        str += '>' + name + '</option>';
     1106                }
     1107
     1108                if (!this.filterTrackersStr || (this.filterTrackersStr !== str)) {
     1109                        this.filterTrackersStr = str;
     1110                        $('#filter-tracker').html(str);
     1111                }
    10801112        },
    10811113
     
    11541186        ****/
    11551187
    1156         filterSetup: function()
    1157         {
    1158                 var tr = this,
    1159                     popup = $('#filter-popup');
    1160 
    1161                 popup.dialog({
    1162                         autoOpen: false,
    1163                         position: isMobileDevice ? 'center' : [40,40],
    1164                         show: 'blind',
    1165                         hide: 'blind',
    1166                         title: 'Show',
    1167                         width: 315
    1168                 });
    1169 
    1170                 $('#filter-button').click(function() {
    1171                         if (popup.is(":visible"))
    1172                                 popup.dialog('close');
    1173                         else {
    1174                                 tr.refreshFilterPopup();
    1175                                 popup.dialog('open');
    1176                         }
    1177                 });
    1178                 this.refreshFilterButton();
    1179         },
    1180 
    1181         refreshFilterButton: function()
    1182         {
    1183                 var o, tmp, text, torrent_count,
    1184                     state = this[Prefs._FilterMode],
    1185                     state_all = state === Prefs._FilterAll,
    1186                     state_string = this.getStateString(state),
    1187                     tracker = this.filterTracker,
    1188                     tracker_all = !tracker,
    1189                     tracker_string = tracker ? this.getReadableDomain(tracker) : '',
    1190                     visible_count = this._rows.length;
    1191 
    1192                 // count the total number of torrents
    1193                 torrent_count = 0;
    1194                 o = this._torrents;
    1195                 for (tmp in o)
    1196                         if (o.hasOwnProperty(tmp))
    1197                                 ++torrent_count;
    1198 
    1199                 text = 'Show <span class="filter-selection">';
    1200                 if (state_all && tracker_all)
    1201                         text += 'All';
    1202                 else if (state_all)
    1203                         text += tracker_string;
    1204                 else if (tracker_all)
    1205                         text += state_string;
    1206                 else
    1207                         text += state_string + '</span> at <span class="filter-selection">' + tracker_string;
    1208                 text += '</span> &mdash; ';
    1209 
    1210                 if (torrent_count !== visible_count)
    1211                         text += visible_count.toStringWithCommas() + ' of ' + torrent_count.toStringWithCommas();
    1212                 else if (torrent_count === 1)
    1213                         text += '1 Transfer';
    1214                 else
    1215                         text += torrent_count.toStringWithCommas() + ' Transfers';
    1216                 $('#filter-button').html(text);
    1217         },
    1218 
    12191188        refilterSoon: function()
    12201189        {
     
    12571226                    list = this.elements.torrent_list,
    12581227                    old_sel_count = $(list).children('.selected').length;
     1228
     1229                this.updateFilterSelect();
    12591230
    12601231                clearTimeout(this.refilterTimer);
     
    13621333                // sync gui
    13631334                this.updateStatusbar();
    1364                 this.refreshFilterButton();
    13651335                if (old_sel_count !== $(list).children('.selected').length)
    13661336                        this.selectionChanged();
     
    13761346        },
    13771347
    1378         refreshFilterPopup: function()
    1379         {
    1380                 var i, j, o, s, state, states, counts,
    1381                     sel_state, fragment, div,
    1382                     tor, torrents, name, names,
    1383                     trackers = this.getTrackers(),
    1384                     tr = this;
    1385 
    1386                 /***
    1387                 ****  States
    1388                 ***/
    1389 
    1390                 states = [ Prefs._FilterAll,
    1391                            Prefs._FilterActive,
    1392                            Prefs._FilterDownloading,
    1393                            Prefs._FilterSeeding,
    1394                            Prefs._FilterPaused,
    1395                            Prefs._FilterFinished ];
    1396 
    1397                 counts = {};
    1398                 for (i=0; state=states[i]; ++i)
    1399                         counts[state] = 0;
    1400 
    1401                 torrents = this.getAllTorrents();
    1402                 for (i=0; tor=torrents[i]; ++i)
    1403                         for (j=0; state=states[j]; ++j)
    1404                                 if (tor.testState(state))
    1405                                         counts[state]++;
    1406 
    1407                 sel_state = tr[Prefs._FilterMode];
    1408                 fragment = document.createDocumentFragment();
    1409                 for (i=0; s=states[i]; ++i)
    1410                 {
    1411                         div = document.createElement('div');
    1412                         div.id = 'show-state-' + s;
    1413                         div.className = 'row' + (s === sel_state ? ' selected':'');
    1414                         div.innerHTML = '<span class="filter-img"></span>'
    1415                                       + '<span class="filter-name">' + tr.getStateString(s) + '</span>'
    1416                                       + '<span class="count">' + counts[s].toStringWithCommas() + '</span>';
    1417                         $(div).click({'state':s}, function(ev) {
    1418                                 tr.setFilterMode(ev.data.state);
    1419                                 $('#filter-popup').dialog('close');
    1420                         });
    1421                         fragment.appendChild(div);
    1422                 }
    1423                 $('#filter-by-state .row').remove();
    1424                 $('#filter-by-state')[0].appendChild(fragment);
    1425 
    1426                 /***
    1427                 ****  Trackers
    1428                 ***/
    1429 
    1430                 names = [];
    1431                 for (name in trackers)
    1432                         names.push (name);
    1433                 names.sort();
    1434 
    1435                 fragment = document.createDocumentFragment();
    1436                 div = document.createElement('div');
    1437                 div.id = 'show-tracker-all';
    1438                 div.className = 'row' + (tr.filterTracker ? '' : ' selected');
    1439                 div.innerHTML = '<span class="filter-img"></span>'
    1440                               + '<span class="filter-name">All</span>'
    1441                               + '<span class="count">' + torrents.length.toStringWithCommas() + '</span>';
    1442                 $(div).click(function() {
    1443                         tr.setFilterTracker(null);
    1444                         $('#filter-popup').dialog('close');
    1445                 });
    1446                 fragment.appendChild(div);
    1447                 for (i=0; name=names[i]; ++i) {
    1448                         o = trackers[name];
    1449                         div = document.createElement('div');
    1450                         div.id = 'show-tracker-' + name;
    1451                         div.className = 'row' + (o.domain === tr.filterTracker  ? ' selected':'');
    1452                         div.innerHTML = '<span class="filter-name">'+ name + '</span>'
    1453                                       + '<span class="count">'+ o.count.toStringWithCommas() + '</span>';
    1454                         $(div).click({domain:o.domain}, function(ev) {
    1455                                 tr.setFilterTracker(ev.data.domain);
    1456                                 $('#filter-popup').dialog('close');
    1457                         });
    1458                         fragment.appendChild(div);
    1459                 }
    1460                 $('#filter-by-tracker .row').remove();
    1461                 $('#filter-by-tracker')[0].appendChild(fragment);
    1462         },
    1463 
    1464         getStateString: function(mode)
    1465         {
    1466                 switch (mode)
    1467                 {
    1468                         case Prefs._FilterActive:      return 'Active';
    1469                         case Prefs._FilterSeeding:     return 'Seeding';
    1470                         case Prefs._FilterDownloading: return 'Downloading';
    1471                         case Prefs._FilterPaused:      return 'Paused';
    1472                         case Prefs._FilterFinished:    return 'Finished';
    1473                         default:                       return 'All';
    1474                 }
     1348        onFilterModeClicked: function(ev)
     1349        {
     1350                this.setFilterMode($('#filter-mode').val());
     1351        },
     1352
     1353        onFilterTrackerClicked: function(ev)
     1354        {
     1355                var tracker = $('#filter-tracker').val();
     1356                this.setFilterTracker(tracker==='all' ? null : tracker);
    14751357        },
    14761358
  • trunk/web/style/transmission/common.css

    r13083 r13087  
    327327      #statusbar #speed-info #speed-dn-container.active {
    328328        display: inline; }
    329   #statusbar #filter-button {
     329  #statusbar #filter-select {
    330330    float: left;
    331     text-shadow: 0 1px 0 #ccc;
    332     margin: 5px 8px;
    333     -moz-user-select: none;
    334     -webkit-user-select: none; }
    335     #statusbar #filter-button:hover {
    336       cursor: pointer; }
    337     #statusbar #filter-button #filter-button .filter-selection {
    338       text-decoration: underline; }
     331    margin-left: 5px; }
    339332  #statusbar input#torrent_search {
    340333    float: right;
  • trunk/web/style/transmission/common.scss

    r13083 r13087  
    234234        }
    235235
    236         #filter-button {
     236        #filter-select {
    237237                float: left;
    238                 text-shadow: 0 1px 0 #ccc;
    239                 margin: 5px 8px;
    240                 -moz-user-select: none;
    241                 -webkit-user-select: none;
    242                 &:hover { cursor: pointer };
    243                 #filter-button .filter-selection { text-decoration: underline; }
     238                margin-left: 5px;
    244239        }
    245240
  • trunk/web/style/transmission/mobile.css

    r13083 r13087  
    350350      #statusbar #speed-info #speed-dn-container.active {
    351351        display: inline; }
    352   #statusbar #filter-button {
     352  #statusbar #filter-select {
    353353    float: left;
    354     text-shadow: 0 1px 0 #ccc;
    355     margin: 5px 8px;
    356     -moz-user-select: none;
    357     -webkit-user-select: none; }
    358     #statusbar #filter-button:hover {
    359       cursor: pointer; }
    360     #statusbar #filter-button #filter-button .filter-selection {
    361       text-decoration: underline; }
     354    margin-left: 5px; }
    362355  #statusbar input#torrent_search {
    363356    display: none; }
  • trunk/web/style/transmission/mobile.scss

    r13083 r13087  
    227227        }
    228228
    229         #filter-button {
    230                 float: left;
    231                 text-shadow: 0 1px 0 #ccc;
    232                 margin: 5px 8px;
    233                 -moz-user-select: none;
    234                 -webkit-user-select: none;
    235                 &:hover { cursor: pointer };
    236                 #filter-button .filter-selection { text-decoration: underline; }
    237         }
     229        #filter-select {
     230                float: left;
     231                margin-left: 5px;
     232        }
    238233
    239234        input#torrent_search {
Note: See TracChangeset for help on using the changeset viewer.