Changeset 10802


Ignore:
Timestamp:
Jun 19, 2010, 4:36:00 PM (12 years ago)
Author:
charles
Message:

(trunk) #2758 "add compact mode to web gui" -- patch by fx and kim

Location:
trunk/web
Files:
5 edited

Legend:

Unmodified
Added
Removed
  • trunk/web/index.html

    r10788 r10802  
    463463                                                        </ul>
    464464                                                </li>
     465                                                <li class="separator"></li>
     466                                                <li id="compact_view">Compact View</li>
    465467                                        </ul>
    466468                                </li>
  • trunk/web/javascript/common.js

    r10787 r10802  
    359359
    360360Prefs._TurtleState        = 'turtle-state';
     361Prefs._CompactDisplayState= 'compact_display_state';
    361362
    362363Prefs._Defaults =
     
    368369        'sort_direction': 'ascending',
    369370        'sort_method': 'name',
    370         'turtle-state' : false
     371        'turtle-state' : false,
     372        'compact_display_state' : false
    371373};
    372374
  • trunk/web/javascript/torrent.js

    r10797 r10802  
    102102                element._name_container = e;
    103103               
    104                 // Create the 'progress details' <div>
     104                // Create the 'peer details' <div>
    105105                e = document.createElement( 'div' );
    106                 e.className = 'torrent_progress_details';
     106                e.className = 'torrent_peer_details';
    107107                top_e.appendChild( e );
    108                 element._progress_details_container = e;
     108                element._peer_details_container = e;
     109
     110                //Create a progress bar container
     111                top_a = document.createElement( 'div' );
     112                top_a.className = 'torrent_progress_bar_container';
     113                element._progress_bar_container = top_a;
    109114
    110115                // Create the 'in progress' bar
     
    112117                e.className = 'torrent_progress_bar incomplete';
    113118                e.style.width = '0%';
    114                 top_e.appendChild( e );
     119                top_a.appendChild( e );
    115120                element._progress_complete_container = e;
    116121                       
     
    119124                e.className = 'torrent_progress_bar incomplete';
    120125                e.style.display = 'none';
    121                 top_e.appendChild( e );
     126                top_a.appendChild( e );
    122127                element._progress_incomplete_container = e;
    123128               
     129                //Add the progress bar container to the torrent
     130                top_e.appendChild(top_a);
     131
    124132                // Add the pause/resume button - don't specify the
    125133                // image or alt text until the 'refresh()' function
     
    132140                element._pause_resume_button_image = image;
    133141                if (!iPhone) $(e).bind('click', function(e) { element._torrent.clickPauseResumeButton(e); });
    134                
    135                 // Create the 'peer details' <div>
     142
     143                // Create the 'progress details' <div>
    136144                e = document.createElement( 'div' );
    137                 e.className = 'torrent_peer_details';
     145                e.className = 'torrent_progress_details';
    138146                top_e.appendChild( e );
    139                 element._peer_details_container = e;
     147                element._progress_details_container = e;
    140148               
    141149                // Set the torrent click observer
     
    432440                var c;
    433441
     442                var compact_mode = this._controller[Prefs._CompactDisplayState];
    434443                if(( c = this.getErrorMessage( )))
    435444                        return c;
     
    444453
    445454                        case Torrent._StatusDownloading:
    446                                 // 'Downloading from 36 of 40 peers - DL: 60.2 KiB/s UL: 4.3 KiB/s'
    447                                 c = 'Downloading from ';
    448                                 c += this.peersSendingToUs();
    449                                 c += ' of ';
    450                                 c += this._peers_connected;
    451                                 c += ' peers - DL: ';
    452                                 c += Math.formatBytes(this._download_speed);
    453                                 c += '/s UL: ';
    454                                 c += Math.formatBytes(this._upload_speed);
    455                                 c += '/s';
     455                                if(compact_mode){
     456                                        c = 'DL: '
     457                                        c += Math.formatBytes(this._download_speed);
     458                                        c += '/s UL: ';
     459                                        c += Math.formatBytes(this._upload_speed);
     460                                        c += '/s';
     461                                } else {
     462                                        // 'Downloading from 36 of 40 peers - DL: 60.2 KiB/s UL: 4.3 KiB/s'
     463                                        c = 'Downloading from ';
     464                                        c += this.peersSendingToUs();
     465                                        c += ' of ';
     466                                        c += this._peers_connected;
     467                                        c += ' peers - DL: ';
     468                                        c += Math.formatBytes(this._download_speed);
     469                                        c += '/s UL: ';
     470                                        c += Math.formatBytes(this._upload_speed);
     471                                        c += '/s';
     472                                }
    456473                                break;
    457474
    458475                        case Torrent._StatusSeeding:
    459                                 // 'Seeding to 13 of 22 peers - UL: 36.2 KiB/s'
    460                                 c = 'Seeding to ';
    461                                 c += this.peersGettingFromUs();
    462                                 c += ' of ';
    463                                 c += this._peers_connected;
    464                                 c += ' peers - UL: ';
    465                                 c += Math.formatBytes(this._upload_speed);
    466                                 c += '/s';
     476                                if(compact_mode){
     477                                        c = 'UL: '
     478                                        c += Math.formatBytes(this._upload_speed);
     479                                        c += '/s';
     480                                } else {
     481                                        // 'Seeding to 13 of 22 peers - UL: 36.2 KiB/s'
     482                                        c = 'Seeding to ';
     483                                        c += this.peersGettingFromUs();
     484                                        c += ' of ';
     485                                        c += this._peers_connected;
     486                                        c += ' peers - UL: ';
     487                                        c += Math.formatBytes(this._upload_speed);
     488                                        c += '/s';
     489                                }
    467490                                break;
    468491
     
    483506                var root = this._element;
    484507                var MaxBarWidth = 100; // reduce this to make the progress bar shorter (%)
     508                var compact_mode = this._controller[Prefs._CompactDisplayState];
     509                var compact = '';
     510                if(compact_mode){
     511                        compact = ' compact';
     512                        root._peer_details_container.style.display = 'none';
     513                } else {
     514                        root._peer_details_container.style.display = 'block';
     515                }
     516               
     517                root._progress_details_container.className = 'torrent_progress_details'+compact
     518                root._progress_bar_container.className = 'torrent_progress_bar_container'+compact;
     519                root._name_container.className = 'torrent_name'+compact;
    485520               
    486521                setInnerHTML( root._name_container, this._name );
     
    505540
    506541                        root._progress_complete_container.style.width = metaPercentComplete + "%";
    507                         root._progress_complete_container.className = 'torrent_progress_bar in_progress meta ' + empty;
     542                        root._progress_complete_container.className = 'torrent_progress_bar in_progress meta ' + empty+compact;
    508543                        root._progress_incomplete_container.style.width = 100 - metaPercentComplete + "%"
    509                         root._progress_incomplete_container.className = 'torrent_progress_bar incomplete meta';
     544                        root._progress_incomplete_container.className = 'torrent_progress_bar incomplete compact meta'+compact;
    510545                        root._progress_incomplete_container.style.display = 'block';
    511546
     
    540575                        // Update the 'in progress' bar
    541576                        e = root._progress_complete_container;
    542                         c = 'torrent_progress_bar';
     577                        c = 'torrent_progress_bar'+compact;
    543578                        c += this.isActive() ? ' in_progress' : ' incomplete_stopped';
    544579                        if(css_completed_width === 0) { c += ' empty'; }
     
    612647               
    613648                // Update the progress details
     649                if(compact_mode)
     650                        progress_details = this.getPeerDetails();
    614651                setInnerHTML( root._progress_details_container, progress_details );
    615652               
     
    618655                if ( this.state() === Torrent._StatusPaused ) {
    619656                        e.alt = 'Resume';
    620                         e.className = "torrent_resume";
     657                        e.className = "torrent_resume"+compact;
    621658                } else {
    622659                        e.alt = 'Pause';
    623                         e.className = "torrent_pause";
     660                        e.className = "torrent_pause"+compact;
    624661                }
    625662               
  • trunk/web/javascript/transmission.js

    r10797 r10802  
    10501050                                        $('div#stats_container h2.dialog_heading').show();
    10511051                                        tr.showStatsDialog( );
     1052                                }
     1053                                else if ($element[0].id == 'compact_view') {
     1054                                        this[Prefs._CompactDisplayState] = !this[Prefs._CompactDisplayState];
     1055                                        if(this[Prefs._CompactDisplayState])
     1056                                                $element.selectMenuItem();
     1057                                        else
     1058                                                $element.deselectMenuItem();
     1059                                        this.setDisplayMode( this[Prefs._CompactDisplayState] );
     1060                                        // Redraw html here
    10521061                                }
    10531062                                break;
     
    10941103                                // The 'reverse sort' option state can be toggled independently of the other options
    10951104                                if ($element.is('#reverse_sort_order')) {
    1096                                         if(!$element.is('#reverse_sort_order.active')) break;
     1105                    if(!$element.is('#reverse_sort_order.active')) break;
    10971106                                        var dir;
    10981107                                        if ($element.menuItemIsSelected()) {
     
    16281637
    16291638                return removedAny;
     1639        },
     1640       
     1641        setDisplayMode: function( iscompact )
     1642        {
     1643                var torrents = this.getAllTorrents();
     1644
     1645                for( var i=0; torrents[i]; ++i )
     1646                {
     1647                    torrents[i].setListDisplayElements(this[Prefs._CompactDisplayState]);
     1648                }
    16301649        },
    16311650
  • trunk/web/stylesheets/common.css

    r10788 r10802  
    371371        -moz-user-select: none;
    372372        -webkit-user-select: none;
     373       
     374        overflow: hidden;
    373375}
    374376
     
    403405}
    404406
     407ul.torrent_list li.torrent div.torrent_name.compact {
     408        float: left;
     409        z-index: 1;
     410        position: absolute;
     411}
     412
    405413ul.torrent_list li.torrent.selected div.torrent_name {
    406414        color: #fff;
     
    410418ul.torrent_list li.torrent div.torrent_peer_details {
    411419        font-size: 1em;
     420}
     421
     422ul.torrent_list li.torrent div.torrent_progress_details.compact,
     423ul.torrent_list li.torrent div.torrent_peer_details.compact {
     424        padding-top: 3px;
     425        float: left;
     426       
     427}
     428ul.torrent_list li.torrent div.torrent_progress_details.compact {
     429        float: right;
     430}
     431
     432ul.torrent_list li.torrent div.torrent_progress_bar_container.compact {
     433        position: absolute;
     434        left: 5px;
     435        right: 35px;
     436        opacity:0.4;
    412437}
    413438
     
    424449}
    425450
    426 ul.torrent_list li.torrent div.torrent_progress_bar.complete {
     451ul.torrent_list li.torrent div.torrent_progress_bar.compact {
    427452        background-position: left -10px;
    428453        border: 1px solid #29AD35;
     
    438463        border: 1px solid #3F79EE;
    439464        border-right: none;
     465}
     466
     467ul.torrent_list li.torrent div.torrent_progress_bar.incomplete.compact {
     468        background: none;
     469        border: none;
    440470}
    441471
     
    489519        height: 14px;
    490520        width: 14px;
     521}
     522
     523li.torrent a div.compact {
     524        top: 0px;
    491525}
    492526
Note: See TracChangeset for help on using the changeset viewer.