Changeset 6542


Ignore:
Timestamp:
Aug 15, 2008, 10:27:56 PM (13 years ago)
Author:
livings124
Message:

1.3x: backport web ui changes

Location:
branches/1.3x/web
Files:
6 edited

Legend:

Unmodified
Added
Removed
  • branches/1.3x/web/index.html

    r6452 r6542  
    99                <link href="./images/favicon.ico" rel="SHORTCUT ICON" />
    1010                <script type="text/javascript" src="./javascript/jquery/jquery.min.js"></script>
    11                 <link media="only screen and (max-device-width: 480px)" href="./stylesheets/iphone.css" type= "text/css" rel="stylesheet">
    12                 <link media="screen and (min-device-width: 481px)" href="./stylesheets/common.css" type="text/css" rel="stylesheet">
     11                <link media="only screen and (max-device-width: 480px)" href="./stylesheets/iphone.css" type= "text/css" rel="stylesheet" />
     12                <link media="screen and (min-device-width: 481px)" href="./stylesheets/common.css" type="text/css" rel="stylesheet" />
    1313                <script type="text/javascript" src="./javascript/jquery/jquery.transmenu.min.js"></script>
    1414                <script type="text/javascript" src="./javascript/jquery/jquery.contextmenu.min.js"></script>
     
    4848                <div id="torrent_filter_bar">
    4949                        <ul>   
    50                                  <li><a href='#all' id='filter_all_link' class='active'>All</a></li>
    51                                  <li><a href='#downloading' id='filter_downloading_link'>Downloading</a></li>
    52                                  <li><a href='#seeding' id='filter_seeding_link'>Seeding</a></li>
    53                                  <li><a href='#paused' id='filter_paused_link'>Paused</a></li>
    54                         </ul>
    55                         <input type='text' id='torrent_search' class='blur' />         
     50                                 <li><a href="#all" id="filter_all_link" class="active">All</a></li>
     51                                 <li><a href="#downloading" id="filter_downloading_link">Downloading</a></li>
     52                                 <li><a href="#seeding" id="filter_seeding_link">Seeding</a></li>
     53                                 <li><a href="#paused" id="filter_paused_link">Paused</a></li>
     54                        </ul>
     55                        <input type="search" id="torrent_search" placeholder="Filter" results="0" />           
    5656                </div>
    5757                <div id="torrent_inspector" style="display:none;">
     
    6363                       
    6464                        <div class="torrent_inspector_header">
    65                                 <h1 id="torrent_inspector_name">No Torrent Selected</h1>
     65                                <h1 id="torrent_inspector_name">No Selection</h1>
    6666                                <span id="torrent_inspector_size">0 B</span>
    6767                        </div>
    6868                       
    6969                        <div class="torrent_inspector_section" id="inspector_tab_info_container">
    70                                 <h2>Torrent Information</h2>
     70                                <h2>Transfer Information</h2>
    7171                                <label>Tracker:</label>
    7272                                <div id="torrent_inspector_tracker">N/A</div>
     
    126126               
    127127               
    128                 <div class='dialog_container' id="dialog_container" style="display:none;">
     128                <div class="dialog_container" id="dialog_container" style="display:none;">
    129129                        <div class="dialog_top_bar"></div>
    130130                        <div class="dialog_window">
    131                                 <img src='images/graphics/logo.png' alt="Transmission Logo" />
     131                                <img src="images/graphics/logo.png" alt="Transmission Logo" />
    132132                                <h2 class="dialog_heading" id="dialog_heading"></h2>
    133133                                <div class="dialog_message" id="dialog_message"></div>
     
    137137                </div>
    138138               
    139                 <div class='dialog_container' id="prefs_container" style="display:none;">
     139                <div class="dialog_container" id="prefs_container" style="display:none;">
    140140                        <div class="dialog_top_bar"></div>
    141141                        <div class="dialog_window">
    142142                                <h2 class="dialog_heading">Preferences</h2>
    143143                                <div id="pref_error"></div>
    144                                 <form id="prefs_form" action="remote/index.php?action=savePrefs">
     144                                <form id="prefs_form">
    145145                                        <div class="preference download_location">
    146                                                 <label class='category'>Add transfers:</label>
    147                                                 <label class='item'>Download to:</label>
    148                                                 <input type='text' name='download_location' id='download_location'/>
     146                                                <label class="category">Add transfers:</label>
     147                                                <label class="item">Download to:</label>
     148                                                <input type="text" name="download_location" id="download_location"/>
    149149                                        </div>
    150150                                        <div class="preference port">
    151                                                 <label class='category'>Network:</label>
    152                                                 <label class='item'>Incoming TCP Port:</label>
    153                                                 <input type='text' id='port' name='port'/>
     151                                                <label class="category">Network:</label>
     152                                                <label class="item">Incoming TCP Port:</label>
     153                                                <input type="text" id="port" name="port"/>
    154154                                        </div>
    155155                                        <div class="preference auto_start">
    156                                                 <label class='category'>Transfers:</label>
    157                                                 <input type='checkbox' name='auto_start' id='auto_start'/>
    158                                                 <label class='item'>Start transfers when added</label>
     156                                                <label class="category">Transfers:</label>
     157                                                <input type="checkbox" name="auto_start" id="auto_start"/>
     158                                                <label class="item">Start transfers when added</label>
    159159                                        </div>
    160160                                        <div class="preference encryption">
    161                                                 <label class='category'>Encryption:</label>
    162                                                 <input type='checkbox' name='encryption' id='encryption'/>
    163                                                 <label class='item'>Ignore unencrypted peers</label>
     161                                                <label class="category">Encryption:</label>
     162                                                <input type="checkbox" name="encryption" id="encryption"/>
     163                                                <label class="item">Ignore unencrypted peers</label>
    164164                                        </div>
    165165                                        <div class="preference limit_total">
    166                                                 <label class='category'>Limit total bandwidth:</label>
    167                                                 <input type='checkbox' name='limit_download' id='limit_download'/>
    168                                                 <label class='item'>Download Rate:</label>
    169                                                 <input type='text' name='download_rate' id='download_rate'/>
    170                                                 <label class='suffix'>KB/s</label>
    171                                                 <input type='checkbox' name='limit_upload' id='limit_upload'/>
    172                                                 <label class='item'>Upload Rate:</label>
    173                                                 <input type='text' name='upload_rate' id='upload_rate'/>
    174                                                 <label class='suffix'>KB/s</label>
     166                                                <label class="category">Limit total bandwidth:</label>
     167                                                <input type="checkbox" name="limit_download" id="limit_download"/>
     168                                                <label class="item">Download Rate:</label>
     169                                                <input type="text" name="download_rate" id="download_rate"/>
     170                                                <label class="suffix">KB/s</label>
     171                                                <input type="checkbox" name="limit_upload" id="limit_upload"/>
     172                                                <label class="item">Upload Rate:</label>
     173                                                <input type="text" name="upload_rate" id="upload_rate"/>
     174                                                <label class="suffix">KB/s</label>
    175175                                        </div>
    176176                                        <div class="preference web_gui">
    177                                                 <label class='category'>Web Client:</label>
    178                                                 <label class='item'>Refresh Rate:</label>
    179                                                 <input type='text' name='refresh_rate' id='refresh_rate'/>
    180                                                 <label class='suffix'>seconds</label>
     177                                                <label class="category">Web Client:</label>
     178                                                <label class="item">Refresh Rate:</label>
     179                                                <input type="text" name="refresh_rate" id="refresh_rate"/>
     180                                                <label class="suffix">seconds</label>
    181181                                        </div>
    182182                                        <a href="#save" id="prefs_save_button">Save</a>
     
    186186                </div>
    187187               
    188                 <div class='dialog_container' id="upload_container" style="display:none;">
     188                <div class="dialog_container" id="upload_container" style="display:none;">
    189189                        <div class="dialog_top_bar"></div>
    190190                        <div class="dialog_window">
    191                                 <img src='images/graphics/logo.png' alt="Transmission Logo" />
    192                                 <h2 class="dialog_heading">Torrent Upload</h2>
    193                                 <form action='#' method='post' id='torrent_upload_form'
    194                                         enctype='multipart/form-data' target='torrent_upload_frame'
     191                                <img src="images/graphics/logo.png" alt="Transmission Logo" />
     192                                <h2 class="dialog_heading">Upload Torrent Files</h2>
     193                                <form action="#" method="post" id="torrent_upload_form"
     194                                        enctype="multipart/form-data" target="torrent_upload_frame"
    195195                                        <div class="dialog_message">
    196                                                 Please select a .torrent file to upload:
    197                                                         <input type='file' name='torrent_file' id='torrent_upload_file'/>
     196                                                Please select a torrent file to upload:
     197                                                        <input type="file" name="torrent_file" id="torrent_upload_file"/>
    198198                                        </div>
    199199                                        <a href="#upload" id="upload_confirm_button">Upload</a>
     
    205205                        <div id="disk_space_container"></div>   
    206206                        <ul id="settings_menu">
    207                                 <li id='button'>&nbsp;
    208                                         <ul id='footer_super_menu'>
    209                                                 <li id='preferences'>Preferences</li>
    210                                                 <li class='separator'></li>
     207                                <li id="button">&nbsp;
     208                                        <ul id="footer_super_menu">
     209                                                <li id="preferences">Preferences</li>
     210                                                <li class="separator"></li>
    211211                                                <li>Total Download Rate
    212                                                         <ul id='footer_download_rate_menu'>
    213                                                                 <li id='unlimited_download_rate'>Unlimited</li>
    214                                                                 <li id='limited_download_rate'>Limit (10 KB/s)</li>
    215                                                                 <li class='separator'></li>
     212                                                        <ul id="footer_download_rate_menu">
     213                                                                <li id="unlimited_download_rate">Unlimited</li>
     214                                                                <li id="limited_download_rate">Limit (10 KB/s)</li>
     215                                                                <li class="separator"></li>
    216216                                                                <li>5 KB/s</li>
    217217                                                                <li>10 KB/s</li>
     
    230230                                                </li>
    231231                                                <li>Total Upload Rate
    232                                                         <ul id='footer_upload_rate_menu'>
    233                                                                 <li id='unlimited_upload_rate'>Unlimited</li>
    234                                                                 <li id='limited_upload_rate'>Limit (10 KB/s)</li>
    235                                                                 <li class='separator'></li>
     232                                                        <ul id="footer_upload_rate_menu">
     233                                                                <li id="unlimited_upload_rate">Unlimited</li>
     234                                                                <li id="limited_upload_rate">Limit (10 KB/s)</li>
     235                                                                <li class="separator"></li>
    236236                                                                <li>5 KB/s</li>
    237237                                                                <li>10 KB/s</li>
     
    249249                                                        </ul>
    250250                                                </li>
    251                                                 <li class='separator'></li>
     251                                                <li class="separator"></li>
    252252                                                <li>Sort Transfers By
    253                                                         <ul id='footer_sort_menu'>
    254                                                                 <li id='sort_by_activity'>Activity</li>
    255                                                                 <li id='sort_by_age'>Age</li>
    256                                                                 <li id='sort_by_name'>Name</li>
    257                                                                 <li id='sort_by_percent_completed'>Progress</li>
    258                                                                 <li id='sort_by_queue_order'>Queue Order</li>
    259                                                                 <li id='sort_by_state'>State</li>
    260                                                                 <li id='sort_by_tracker'>Tracker</li>
    261                                                                 <li class='separator'></li>
    262                                                                 <li id='reverse_sort_order'>Reverse Sort Order</li>
     253                                                        <ul id="footer_sort_menu">
     254                                                                <li id="sort_by_activity">Activity</li>
     255                                                                <li id="sort_by_age">Age</li>
     256                                                                <li id="sort_by_name">Name</li>
     257                                                                <li id="sort_by_percent_completed">Progress</li>
     258                                                                <li id="sort_by_queue_order">Queue Order</li>
     259                                                                <li id="sort_by_state">State</li>
     260                                                                <li id="sort_by_tracker">Tracker</li>
     261                                                                <li class="separator"></li>
     262                                                                <li id="reverse_sort_order">Reverse Sort Order</li>
    263263                                                        </ul>
    264264                                                </li>
     
    268268                </div>
    269269
    270                 <div id='unsupported_browser' style="display:none;">
    271                         <div class="dialog_window">
    272                                 <img class='logo' src='images/graphics/logo.png' alt="Transmission Logo" />
     270                <div id="unsupported_browser" style="display:none;">
     271                        <div class="dialog_window">
     272                                <img class="logo" src="images/graphics/logo.png" alt="Transmission Logo" />
    273273                                <h2>Sorry, your browser is not supported.</h2>
    274274                                <p>We currently support the following browsers:</p>
     
    285285                                <li id="context_remove">Remove From List...</li>
    286286                                <li id="context_toggle_inspector">Show Inspector</li>
    287                                 <li class='separator'></li>
    288                                 <li id='separator'></li>
     287                                <li class="separator"></li>
     288                                <li id="separator"></li>
    289289                                <li id="context_select_all" class="context_select_all">Select All</li>
    290290                                <li id="context_deselect_all" class="context_deselect_all">Deselect All</li>
     
    293293               
    294294                <iframe name="torrent_upload_frame" id="torrent_upload_frame" src="about:blank" />
    295 </body>
     295        </body>
    296296</html>
  • branches/1.3x/web/javascript/common.js

    r6418 r6542  
    4848                $('#torrent_inspector').css('height', '100%');
    4949               
    50                 // Set Filter input to type search (nicely styled input field)
    51                 $('#torrent_search')[0].type = 'search';
    52                 $('#torrent_search')[0].placeholder = 'Filter';
     50                // Move search field's margin down for the styled input
    5351                $('#torrent_search').css('margin-top', 3);             
    5452        }
  • branches/1.3x/web/javascript/torrent.js

    r6401 r6542  
    302302                // Add the progress bar
    303303                var notDone = this._leftUntilDone > 0;
     304
     305                // Fix for situation
     306                // when a verifying/downloading torrent gets state seeding
     307                if( this.state == Torrent._StatusSeeding )
     308                        notDone = false ;
     309               
    304310                if( notDone )
    305311                {
     
    335341                        e.addClass( class_name );
    336342                        e.css( 'width', css_completed_width + '%' );
     343                        if(css_completed_width == 0) { e.addClass( 'empty' ); }
    337344                       
    338345                        // Update the 'incomplete' bar
  • branches/1.3x/web/javascript/transmission.js

    r6452 r6542  
    167167                var tr = this;
    168168                var search_box = $('#torrent_search');
    169                 search_box[0].value = 'filter';
    170                 search_box.bind('keyup', {transmission: this}, function(event) {
     169                search_box.bind('keyup click', {transmission: this}, function(event) {
    171170                        tr.setSearch(this.value);
    172                 }).bind('blur', {transmission: this}, function(event) {
    173                         if (this.value == '') {
    174                                 $(this).addClass('blur');
    175                                 this.value = 'filter';
    176                                 tr.setSearch(null);
    177                         }
    178                 }).bind('focus', {}, function(event) {
    179                         if ($(this).is('.blur')) {
    180                                 this.value = '';
    181                                 $(this).removeClass('blur');
    182                         }
    183171                });
     172                if (!$.browser.safari)
     173                {
     174                        $(this).addClass('blur');
     175                        search_box[0].value = 'Filter';
     176                        search_box.bind('blur', {transmission: this}, function(event) {
     177                                if (this.value == '') {
     178                                        $(this).addClass('blur');
     179                                        this.value = 'Filter';
     180                                        tr.setSearch(null);
     181                                }
     182                        }).bind('focus', {}, function(event) {
     183                                if ($(this).is('.blur')) {
     184                                        this.value = '';
     185                                        $(this).removeClass('blur');
     186                                }
     187                        });
     188                }
    184189        },
    185190
     
    572577                        transmission.toggleFilter();
    573578        },
    574         setFilter: function( mode ) {
     579        setFilter: function( mode )
     580        {
     581                // update the radiobuttons
     582                var c;
     583                switch( mode ) {
     584                        case Prefs._FilterAll:         c = '#filter_all_link'; break;
     585                        case Prefs._FilterSeeding:     c = '#filter_seeding_link'; break;
     586                        case Prefs._FilterDownloading: c = '#filter_downloading_link'; break;
     587                        case Prefs._FilterPaused:      c = '#filter_paused_link'; break;
     588                }
     589                $(c).parent().siblings().removeClass('selected');
     590                $(c).parent().addClass('selected');
     591
     592                // do the filtering
    575593                this.setPref( Prefs._FilterMode, mode );
    576594                this.refilter( );
    577595        },
    578         setFilterFromButton: function( element, mode ) {
    579                 $(element).siblings().removeClass('selected');
    580                 $(element).addClass('selected');
    581                 this.setFilter( mode );
    582         },
    583596        showAllClicked: function( event ) {     
    584                 transmission.setFilterFromButton( this, Prefs._FilterAll );
     597                transmission.setFilter( Prefs._FilterAll );
    585598        },
    586599        showDownloadingClicked: function( event ) {
    587                 transmission.setFilterFromButton( this, Prefs._FilterDownloading );
     600                transmission.setFilter( Prefs._FilterDownloading );
    588601        },
    589602        showSeedingClicked: function(event) {   
    590                 transmission.setFilterFromButton( this, Prefs._FilterSeeding );
     603                transmission.setFilter( Prefs._FilterSeeding );
    591604        },
    592605        showPausedClicked: function(event) {
    593                 transmission.setFilterFromButton( this, Prefs._FilterPaused );
     606                transmission.setFilter( Prefs._FilterPaused );
    594607        },
    595608
     
    832845
    833846                switch( torrents.length ) {
    834                         case 0: name = 'No Torrent Selected'; break;
     847                        case 0: name = 'No Selection'; break;
    835848                        case 1: name = torrents[0].name(); break;
    836                         default: name = torrents.length+' Torrents Selected'; break;
     849                        default: name = torrents.length+' Transfers Selected'; break;
    837850                }
    838851
     
    901914                $(ti+'creator_date')[0].innerHTML    = date_created;
    902915                $(ti+'progress')[0].innerHTML        = Math.ratio( sizeDone*100, sizeWhenDone ) + '%';
     916                $(ti+'comment')[0].innerHTML      = comment ;
     917                $(ti+'creator')[0].innerHTML      = creator ;
     918                $(ti+'error')[0].innerHTML                = error ;
    903919        },
    904920   
     
    967983        },
    968984       
    969         hideFilter: function() {
     985        hideFilter: function()
     986        {
    970987                var container_top = parseInt($('#torrent_container').css('top')) - $('#torrent_filter_bar').height() - 1;
    971988                $('#torrent_container').css('top', container_top + 'px');
    972989                $('#torrent_filter_bar').hide();
    973990                this.setPref( Prefs._ShowFilter, false );
     991                this.setFilter( Prefs._FilterAll );
    974992        },
    975993
  • branches/1.3x/web/stylesheets/common.css

    r6318 r6542  
    438438        background-position: left -30px;
    439439        border: 1px solid #939393;
     440}
     441
     442ul.torrent_list li.torrent div.torrent_progress_bar.empty {
     443        border-color: #c8cacd;
    440444}
    441445
     
    668672        height: 420px;
    669673        padding: 0 15px;
     674        line-height: 14pt;
    670675}
    671676
Note: See TracChangeset for help on using the changeset viewer.