Changeset 11157


Ignore:
Timestamp:
Aug 8, 2010, 8:06:46 PM (11 years ago)
Author:
charles
Message:

(trunk web) rewrite the dialogs to use jQuery.UI instead of a homerolled dialog. This partially to use more standardized components, and partially to get rid of as many browser/platform-specific hardcodings as possible to make the code more flexible. I'm flying blind wrt iPhone support, so for a little while this may be a two-steps-forward-one-step-back process. Feedback from users runnin the web client on their phones is encouraged...

Location:
trunk/web
Files:
3 added
4 deleted
10 edited

Legend:

Unmodified
Added
Removed
  • trunk/web/images/graphics/Makefile.am

    r10789 r11157  
    88  lock_icon.png \
    99  logo.png \
    10   transfer_arrows.png
     10  transfer_arrows.png \
     11  wait20.gif
  • trunk/web/index.html

    r10931 r11157  
    22<html>
    33        <head>
    4                 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    5                 <meta http-equiv="cache-control" content="Private" />
    6                 <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
    7                 <meta name="apple-mobile-web-app-capable" content="yes" />
     4                <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
     5                <meta http-equiv="Cache-Control" content="Private">
     6                <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
     7                <meta name="apple-mobile-web-app-capable" content="yes">
    88                <link href="./images/favicon.ico" rel="icon" />
    99                <link href="./images/favicon.png" rel="shortcut icon" />
    1010                <link rel="apple-touch-icon" href="./images/webclip-icon.png"/>
    11                 <script type="text/javascript" src="./javascript/jquery/jquery.min.js"></script>
     11                <link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="Stylesheet"/>
     12                <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
     13                <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
    1214                <link media="only screen and (max-device-width: 480px)" href="./stylesheets/iphone.css" type= "text/css" rel="stylesheet" />
    1315                <link media="screen and (min-device-width: 481px)" href="./stylesheets/common.css" type="text/css" rel="stylesheet" />
     
    2224                <script type="text/javascript" src="./javascript/menu.js"></script>
    2325                <script type="text/javascript" src="./javascript/jquery/jquery.form.min.js"></script>
    24                 <script type="text/javascript" src="./javascript/jquery/json.min.js"></script>
     26                <script type="text/javascript" src="./javascript/jquery/json2.min.js"></script>
    2527                <script type="text/javascript" src="./javascript/common.js"></script>
    2628                <script type="text/javascript" src="./javascript/transmission.remote.js"></script>
    2729                <script type="text/javascript" src="./javascript/transmission.js"></script>
    2830                <script type="text/javascript" src="./javascript/torrent.js"></script>
    29                 <script type="text/javascript" src="./javascript/dialog.js"></script>
    3031                <script type="text/javascript" src="./javascript/formatter.js"></script>
    3132                <title>Transmission Web Interface</title>
     
    205206
    206207                <div id="torrent_container">
    207                         <ul class="torrent_list" id="torrent_list"><li style="display: none;"></li></ul>
    208                 </div>
    209 
    210                 <div class="dialog_container" id="dialog_container" style="display:none;">
    211                         <div class="dialog_top_bar"></div>
    212                         <div class="dialog_window">
    213                                 <img src="images/graphics/logo.png" alt="Transmission Logo" />
    214                                 <h2 class="dialog_heading" id="dialog_heading"></h2>
    215                                 <div class="dialog_message" id="dialog_message"></div>
    216                                 <a href="#confirm" id="dialog_confirm_button">Confirm</a>
    217                                 <a href="#cancel" id="dialog_cancel_button">Cancel</a>
     208                <ul class="torrent_list" id="torrent_list"><li style="display: none;"></li></ul>
     209                </div>
     210
     211                <div id="dialog" style="display:none;">
     212                        <img src="images/graphics/logo.png" style="float:left; margin: 10px;"/>
     213                        <p id="dialog_body" style="text-align:left"></p>
     214                </div>
     215
     216                <div id="stats_dialog" style="display:none;">
     217                        <table>
     218
     219                        <tr><td colspan="4" class="dialog_section_title">Current Session</td></tr>
     220                        <tr><td rowspan="5" class="dialog_col_1"></td><td></td><td rowspan="5" class="dialog_col_3"></td><td></td></tr>
     221                        <tr><td>Uploaded:</td><td id="stats_session_uploaded"></td></tr>
     222                        <tr><td>Downloaded:</td><td id="stats_session_downloaded"></td></tr>
     223                        <tr><td>Ratio:</td><td id="stats_session_ratio"></td></tr>
     224                        <tr><td>Duration:</td><td id="stats_session_duration"></td></tr>
     225
     226                        <tr><td colspan="4" class="dialog_section_title">Total Session</td></tr>
     227                        <tr><td rowspan="6" class="dialog_col_1"></td><td></td><td rowspan="6" class="dialog_col_3"></td><td></td></tr>
     228                        <tr><td colspan="3" id="stats_total_count"></td></tr>
     229                        <tr><td>Uploaded:</td><td id="stats_total_uploaded"></td></tr>
     230                        <tr><td>Downloaded:</td><td id="stats_total_downloaded"></td></tr>
     231                        <tr><td>Ratio:</td><td id="stats_total_ratio"></td></tr>
     232                        <tr><td>Duration:</td><td id="stats_total_duration"></td></tr>
     233                        </table>
     234                </div>
     235
     236                <div id="prefs_dialog" style="display:none;">
     237                        <form action="">
     238                        <div id="prefs_tabs">
     239                                <ul>
     240                                        <li><a href="#prefs_tab_torrent">Torrents</a>
     241                                        <li><a href="#prefs_tab_speed">Speed</a>
     242                                        <li><a href="#prefs_tab_privacy">Privacy</a>
     243                                        <li><a href="#prefs_tab_network">Network</a>
     244                                </ul>
     245                                <div id="prefs_tab_torrent">
     246                                        <table>
     247
     248                                        <tr><td colspan="4" class="dialog_section_title">Adding</td></tr>
     249                                        <tr><td rowspan="4" class="dialog_col_1"></td><td></td><td rowspan="4" class="dialog_col_3"></td><td></td></tr>
     250                                        <tr><td>Save to Location:</td><td><input type="text" id="download-dir"/></td></tr>
     251                                        <tr><td colspan="3"><input type="checkbox" id="auto-start"/>Start when added</td></tr>
     252                                        <tr><td colspan="3"><input type="checkbox" id="rename-partial-files"/>Append ".part" to incomplete files' names</td></tr>
     253
     254                                        <tr><td colspan="4" class="dialog_section_title">Seeding Limits</td></tr>
     255                                        <tr><td rowspan="3" class="dialog_col_1"></td><td></td><td rowspan="3" class="dialog_col_3"></td><td></td></tr>
     256                                        <tr><td><input type="checkbox" id="seedRatioLimited"/>Stop seeding at ratio:</td><td><input type="text" id="seedRatioLimit"/></td></tr>
     257                                        <tr><td><input type="checkbox" id="idle-seeding-limit-enabled"/>Stop seeding if idle for N minutes:</td><td><input type="text" id="idle-seeding-limit"/></td></tr>
     258
     259                                        </table>
     260                                </div>
     261                                <div id="prefs_tab_speed">
     262                                        <table>
     263
     264                                        <tr><td colspan="4" class="dialog_section_title">Speed Limits</td></tr>
     265                                        <tr><td rowspan="3" class="dialog_col_1"></td><td></td><td rowspan="3" class="dialog_col_3"></td><td></td></tr>
     266                                        <tr><td><input type="checkbox" id="speed-limit-down-enabled"/>Limit download speed (KiB/s):</td><td><input type="text" id="speed-limit-down"></td></tr>
     267                                        <tr><td><input type="checkbox" id="speed-limit-up-enabled"/>Limit upload speed (KiB/s):</td><td><input type="text" id="speed-limit-up"></td></tr>
     268
     269                                        <tr><td colspan="4" class="dialog_section_title">Temporary Speed Limits <img src="images/graphics/turtle.png"></td></tr>
     270                                        <tr><td rowspan="6" class="dialog_col_1"></td><td></td><td rowspan="6" class="dialog_col_3"></td><td></td></tr>
     271                                        <tr><td colspan="4"><i>Override normal speed limits manually or at scheduled times</i></td></tr>
     272                                        <tr><td>Limit download speed (KiB/s):</td><td><input type="text" id="alt-speed-down"></td></tr>
     273                                        <tr><td>Limit upload speed (KiB/s):</td><td><input type="text" id="alt-speed-up"></td></tr>
     274                                        <tr><td><input type="checkbox" id="alt-speed-time-enabled"/>Scheduled times:</td>
     275                                                <td><select id="alt-speed-time-begin" size="1"></select> to <select id="alt-speed-time-end" size="1"></select></td></tr>
     276                                        <tr><td>On days:</td><td><select id="alt-speed-time-day" size="1">
     277                                                                        <option value="127">Everyday</option>
     278                                                                        <option value="62">Weekdays</option>
     279                                                                        <option value="65">Weekends</option>
     280                                                                        <option value="1">Sunday</option>
     281                                                                        <option value="2">Monday</option>
     282                                                                        <option value="4">Tuesday</option>
     283                                                                        <option value="8">Wednesday</option>
     284                                                                        <option value="16">Thursday</option>
     285                                                                        <option value="32">Friday</option>
     286                                                                        <option value="64">Saturday</option>
     287                                                                </select></td></tr>
     288                                        </table>
     289                                </div>
     290                                <div id="prefs_tab_privacy">
     291                                        <table>
     292                                        <tr><td colspan="4"><div class="dialog_section_title">Blocklist</div></td></tr>
     293                                        <tr><td rowspan="2" class="dialog_col_1"></td>
     294                                                <td><input type="checkbox" id="blocklist-enabled">Enable blocklist (<span id="blocklist-size">0</span> rules)</td>
     295                                                <td class="dialog_col_3"></td>
     296                                                <td><button type="button" id="blocklist-update">Update</button><img id="blocklist-update-spinner" src="images/graphics/wait20.gif"></td></tr>
     297                                        <tr><td colspan="4"><div class="dialog_section_title">Privacy</div></td></tr>
     298                                        <tr><td rowspan="4" class="dialog_col_1"></td><td>Encryption mode:</td><td rowspan="4" class="dialog_col_3"></td><td><select id="encryption">
     299                                                <option value="tolerated">Allow encryption</option>
     300                                                <option value="preferred">Prefer encryption</option>
     301                                                <option value="required">Require encryption</option>
     302                                                </select></td></tr>
     303                                        <tr><td colspan="3"><input type="checkbox" id="pex-enabled"/>Use PEX to find more peers</td></tr>
     304                                        <tr><td colspan="3"><input type="checkbox" id="dht-enabled"/>Use DHT to find more peers</td></tr>
     305                                        <tr><td colspan="3"><input type="checkbox" id="lpd-enabled"/>Use Local Peer Discovery to find more peers</td></tr>
     306                                        </table>
     307                                </div>
     308                                <div id="prefs_tab_network">
     309                                        <table>
     310
     311                                        <tr><td colspan="4" class="dialog_section_title">Incoming Peers</td></tr>
     312                                        <tr><td rowspan="5" class="dialog_col_1"></td><td></td><td rowspan="5" class="dialog_col_3"></td><td></td></tr>
     313                                        <tr><td>Port for incoming connections:</td><td><input type="text" id="peer-port"/></td></tr>
     314                                        <tr><td></td><td><button type="button" id="port-test">Test</button>    <span id="port-status-label">Status Unknown</span> <img id="port-status-spinner" src="images/graphics/wait20.gif"></td></tr>
     315                                        <tr><td colspan="3"><input type="checkbox" id="peer-port-random-on-start"/>Pick a random port every time Transmission is started</td></tr>
     316                                        <tr><td colspan="3"><input type="checkbox" id="port-forwarding-enabled"/>Use UPnP or NAT-PMP port forwarding from my router</td></tr>
     317
     318                                        <tr><td colspan="4" class="dialog_section_title">Limits</td></tr>
     319                                        <tr><td rowspan="3" class="dialog_col_1"></td><td></td><td rowspan="3" class="dialog_col_3"></td><td></td></tr>
     320                                        <tr><td>Maximum peers per torrent:</td><td><input type="text" id="peer-limit-per-torrent"/></td></tr>
     321                                        <tr><td>Maximum peers overall:</td><td><input type="text" id="peer-limit-global"/></td></tr>
     322                                               
     323                                        </table>
     324                                </div>
     325<!-- <label for="port" class="item">Incoming TCP Port:</label>
     326                                                                <input type="text" id="port" name="port"/>
     327                                                        </div>
     328                                                </div>
     329                                                <div class="preference web_gui">
     330                                                        <label class="category">Web Client:</label>
     331                                                        <div class="formdiv">
     332                                                                <label for="refresh_rate" class="item">Refresh Rate:</label>
     333                                                                <input type="text" name="refresh_rate" id="refresh_rate"/>
     334                                                                <label class="suffix">seconds</label>
     335                                                        </div>
     336                                                </div>
     337                                                <div style="clear: both; visibility: hidden;"></div>
     338                                        </div>
     339                                </div>
     340-->
    218341                        </div>
    219                 </div>
    220 
    221                 <div class="dialog_container" id="prefs_container" style="display:none;">
    222                         <div class="dialog_top_bar"></div>
    223                         <div class="dialog_window">
    224                                 <h2 class="dialog_heading">Preferences</h2>
    225                                 <div id="pref_error"></div>
    226                                 <form action="" id="prefs_form">
    227                                         <div id="prefs_tabs">
    228                                                 <ul>
    229                                                         <li id="prefs_tab_general_tab" class="prefs_tab_enabled">General</li>
    230                                                         <li id="prefs_tab_speed_tab" class="prefs_tab_disabled">Speed</li>
    231                                                 </ul>
    232                                                 <div id="prefs_tab_general" class="prefs_tab">
    233                                                         <div class="preference download_location">
    234                                                                 <label class="category">Add transfers:</label>
    235                                                                 <div class="formdiv">
    236                                                                         <label for="download_location" class="item">Download to:</label>
    237                                                                         <input type="text" name="download_location" id="download_location"/>
    238                                                                 </div>
    239                                                                 <div class="formdiv checkbox auto_start">
    240                                                                         <input type="checkbox" name="auto_start" id="auto_start"/>
    241                                                                         <label for="auto_start" class="item">Start transfers when added</label>
    242                                                                 </div>
    243                                                         </div>
    244                                                         <div class="preference port">
    245                                                                 <label class="category">Network:</label>
    246                                                                 <div class="formdiv">
    247                                                                         <label for="port" class="item">Incoming TCP Port:</label>
    248                                                                         <input type="text" id="port" name="port"/>
    249                                                                 </div>
    250                                                         </div>
    251                                                         <div class="preference encryption">
    252                                                                 <label class="category">Encryption:</label>
    253                                                                 <div class="formdiv checkbox">
    254                                                                         <input type="checkbox" name="encryption" id="encryption"/>
    255                                                                         <label for="encryption" class="item">Ignore unencrypted peers</label>
    256                                                                 </div>
    257                                                         </div>
    258                                                         <div class="preference web_gui">
    259                                                                 <label class="category">Web Client:</label>
    260                                                                 <div class="formdiv">
    261                                                                         <label for="refresh_rate" class="item">Refresh Rate:</label>
    262                                                                         <input type="text" name="refresh_rate" id="refresh_rate"/>
    263                                                                         <label class="suffix">seconds</label>
    264                                                                 </div>
    265                                                         </div>
    266                                                         <div style="clear: both; visibility: hidden;"></div>
    267                                                 </div>
    268                                                 <div id="prefs_tab_speed" class="prefs_tab" style="display: none;">
    269                                                         <div class="preference limit_total">
    270                                                                 <label class="category">Speed Limits:</label>
    271                                                                 <div class="formdiv checkbox">
    272                                                                         <input type="checkbox" name="limit_download" id="limit_download"/>
    273                                                                         <label for="limit_download" class="item">Download Rate:</label>
    274                                                                         <input type="text" name="download_rate" id="download_rate"/>
    275                                                                         <label class="suffix">kB/s</label>
    276                                                                 </div>
    277                                                                 <div class="formdiv checkbox">
    278                                                                         <input type="checkbox" name="limit_upload" id="limit_upload"/>
    279                                                                         <label for="limit_upload" class="item">Upload Rate:</label>
    280                                                                         <input type="text" name="upload_rate" id="upload_rate"/>
    281                                                                         <label class="suffix">kB/s</label>
    282                                                                 </div>
    283                                                         </div>
    284                                                         <div class="preference limit_turtle">
    285                                                                 <label class="category">Temporary Speed Limits: (Turtle)</label>
    286                                                                 <label>Override normal speed limits manually or at scheduled times</label>
    287                                                                 <div class="formdiv">
    288                                                                         <label for="turtle_download_rate" class="item">Download Rate:</label>
    289                                                                         <input type="text" name="turtle_download_rate" id="turtle_download_rate"/>
    290                                                                         <label class="suffix">kB/s</label>
    291                                                                 </div>
    292                                                                 <div class="formdiv">
    293                                                                         <label for="turtle_upload_rate" class="item">Upload Rate:</label>
    294                                                                         <input type="text" name="turtle_upload_rate" id="turtle_upload_rate"/>
    295                                                                         <label class="suffix">kB/s</label>
    296                                                                 </div>
    297                                                                 <div class="formdiv checkbox">
    298                                                                         <input type="checkbox" name="turtle_schedule" id="turtle_schedule"/>
    299                                                                         <label for="turtle_schedule" class="item">Scheduled times:</label>
    300                                                                         <select name="turtle_start_time" id="turtle_start_time" size="1">
    301                                                                         </select>
    302                                                                         <select name="turtle_end_time" id="turtle_end_time" size="1">
    303                                                                         </select>
    304                                                                 </div>
    305                                                                 <div class="formdiv">
    306                                                                         <label for="turtle_days" class="item">On days:</label>
    307                                                                         <select name="turtle_days" id="turtle_days" size="1">
    308                                                                                 <option value="127">Everyday</option>
    309                                                                                 <option value="62">Weekdays</option>
    310                                                                                 <option value="65">Weekends</option>
    311                                                                                 <option value="1">Sunday</option>
    312                                                                                 <option value="2">Monday</option>
    313                                                                                 <option value="4">Tuesday</option>
    314                                                                                 <option value="8">Wednesday</option>
    315                                                                                 <option value="16">Thursday</option>
    316                                                                                 <option value="32">Friday</option>
    317                                                                                 <option value="64">Saturday</option>
    318                                                                         </select>
    319                                                                 </div>
    320                                                         </div>
    321                                                         <div style="clear: both; visibility: hidden;"></div>
    322                                                 </div>
    323                                         </div>
    324                                         <span id="transmission_version"></span>
    325                                         <a href="#save" id="prefs_save_button">Save</a>
    326                                         <a href="#cancel" id="prefs_cancel_button">Cancel</a>
    327                                 </form>
    328                         </div>
    329                 </div>
    330 
    331                 <div class="dialog_container" id="stats_container" style="display:none;">
    332                         <div class="dialog_top_bar"></div>
    333                         <div class="dialog_window">
    334                                 <h2 class="dialog_heading">Statistics</h2>
    335                                 <div id="stats_error"></div>
    336                                 <div id="stats_info_container" class="stats_info_container">
    337                                         <div class="stats_group">
    338                                                 <label class="category">Current Session:</label>
    339                                                 <div class="stats_row">
    340                                                         <div class="item">Uploaded:</div>
    341                                                         <div id="stats_session_uploaded"></div>
    342                                                 </div>
    343                                                 <div class="stats_row">
    344                                                         <div class="item">Downloaded:</div>
    345                                                         <div id="stats_session_downloaded"></div>
    346                                                 </div>
    347                                                 <div class="stats_row">
    348                                                         <div class="item">Ratio:</div>
    349                                                         <div id="stats_session_ratio"></div>
    350                                                 </div>
    351                                                 <div class="stats_row">
    352                                                         <div class="item">Duration:</div>
    353                                                         <div id="stats_session_duration"></div>
    354                                                 </div>
    355                                         </div>
    356                                         <div class="stats_group">
    357                                                 <label class="category">Total:</label>
    358                                                 <div class="stats_row">
    359                                                         <div class="item2">Started </div>
    360                                                         <div id="stats_total_count"></div>
    361                                                 </div>
    362                                                 <div class="stats_row">
    363                                                         <div class="item">Uploaded:</div>
    364                                                         <div id="stats_total_uploaded"></div>
    365                                                 </div>
    366                                                 <div class="stats_row">
    367                                                         <div class="item">Downloaded:</div>
    368                                                         <div id="stats_total_downloaded"></div>
    369                                                 </div>
    370                                                 <div class="stats_row">
    371                                                         <div class="item">Ratio:</div>
    372                                                         <div id="stats_total_ratio"></div>
    373                                                 </div>
    374                                                 <div class="stats_row">
    375                                                         <div class="item">Duration:</div>
    376                                                         <div id="stats_total_duration"></div>
    377                                                 </div>
    378                                         </div>
    379                                 </div>
    380                                 <a href="#close" id="stats_close_button">Close</a>
    381                         </div>
     342                        </form>
    382343                </div>
    383344
  • trunk/web/javascript/Makefile.am

    r10805 r11157  
    33dist_data_DATA = \
    44  common.js \
    5   dialog.js \
    65  formatter.js \
    76  menu.js \
  • trunk/web/javascript/common.js

    r11081 r11157  
    88
    99var transmission;
    10 var dialog;
    1110var resizeTimer = null;
    1211// Test for a Webkit build that supports box-shadow: 521+ (release Safari 3 is
     
    3534
    3635$(document).ready( function() {
    37         // Initialise the dialog controller
    38         dialog = new Dialog();
    3936
    4037        // Initialise the main Transmission controller
    4138        transmission = new Transmission();
    42 
    43         // IE specific fixes here
    44         if ($.browser.msie) {
    45                 try {
    46                         document.execCommand("BackgroundImageCache", false, true);
    47                 } catch(err) {}
    48                 $('.dialog_container').css('height',$(window).height()+'px');
    49         }
    5039
    5140        if ($.browser.safari) {
     
    5746                // Opera messes up the menu if we use a border on .trans_menu
    5847                // div.outerbox so use ul instead
    59                 $('.trans_menu ul, div#jqContextMenu, div.dialog_container div.dialog_window').css('border', '1px solid #777');
     48                $('.trans_menu ul, div#jqContextMenu').css('border', '1px solid #777');
    6049                // and this kills the border we used to have
    6150                $('.trans_menu div.outerbox').css('border', 'none');
     
    6453                // test is good enough) but we delay our hide/unhide to wait for the
    6554                // scrolling - no point making other browsers wait.
    66                 $('div#upload_container div.dialog_window').css('top', '-205px');
    67                 $('div#prefs_container div.dialog_window').css('top', '-425px');
    68                 $('div#dialog_container div.dialog_window').css('top', '-425px');
    69                 $('div.dialog_container div.dialog_window').css('-webkit-transition', 'top 0.3s');
    70                 // -webkit-appearance makes some links into buttons, but needs
    71                 // different padding.
    72                 $('div.dialog_container div.dialog_window a').css('padding', '2px 10px 3px');
     55                $('div#upload_container').css('top', '-205px');
    7356        }
    7457        if (iPhone){
     
    194177}
    195178
     179function tellUser( primaryText, secondaryText )
     180{
     181        $("#dialog_body").html("<p><b>" + primaryText + "</b></p><p>" + secondaryText + "</p>" );
     182        $("#dialog" ).dialog( {
     183                title: primaryText,
     184                show: 'blind',
     185                hide: 'blind',
     186                buttons: { 'Close': function() { $(this).dialog('close'); } }
     187        });
     188}
     189
     190/**
     191 * @brief Show a confirmation dialog
     192 */
     193function askUser(dialog_heading, dialog_message, confirm_button_label,
     194                 callback_function, callback_data,
     195                 cancel_button_label)
     196{
     197        if( cancel_button_label == null )
     198                cancel_button_label = 'Cancel';
     199        $("#dialog_body").html("<p><b>" + dialog_heading + "</b></p><p>" + dialog_message + "</p>" );
     200        var myButtons = { };
     201        myButtons[cancel_button_label] = function() { $(this).dialog('close'); }
     202        myButtons[confirm_button_label] = function() {
     203                callback_function.call( null, callback_data );
     204                $(this).dialog('close');
     205        };
     206        $("#dialog" ).dialog( {
     207                title: dialog_heading,
     208                show: 'blind',
     209                hide: 'blind',
     210                buttons: myButtons
     211        });
     212}
     213
    196214/***
    197215****  Preferences
     
    228246Prefs._SortByTracker      = 'tracker';
    229247
    230 Prefs._TurtleState        = 'turtle-state';
    231248Prefs._CompactDisplayState= 'compact_display_state';
    232249
  • trunk/web/javascript/jquery/Makefile.am

    r9787 r11157  
    22
    33dist_data_DATA = \
    4   json.min.js \
     4  json2.min.js \
    55  jquery.contextmenu.min.js \
    6   jquery.min.js \
    76  jquery.form.min.js \
    87  jquery.transmenu.min.js
  • trunk/web/javascript/transmission.js

    r11081 r11157  
    2828                this._torrents               = { };
    2929                this._rows                   = [ ];
     30                this._prefs                  = { };
    3031
    3132                // Initialize the clutch preferences
     
    4647                $('#filter_seeding_link').parent().bind('click', function(e){ tr.showSeedingClicked(e); });
    4748                $('#filter_paused_link').parent().bind('click', function(e){ tr.showPausedClicked(e); });
    48                 $('#prefs_save_button').bind('click', function(e) { tr.savePrefsClicked(e); return false;});
    49                 $('#prefs_cancel_button').bind('click', function(e){ tr.cancelPrefsClicked(e); return false; });
    50                 $('#stats_close_button').bind('click', function(e){ tr.closeStatsClicked(e); return false; });
    5149                $('.inspector_tab').bind('click', function(e){ tr.inspectorTabClicked(e, this); });
    5250                $('.file_wanted_control').live('click', function(e){ tr.fileWantedClicked(e, this); });
     
    7573                }
    7674                this.initTurtleDropDowns();
     75                this.initPrefs();
    7776
    7877                this._torrent_list             = $('#torrent_list')[0];
     
    339338                // Build the list of times
    340339                out = "";
    341                 start = $('#turtle_start_time')[0];
    342                 end = $('#turtle_end_time')[0];
     340                start = $('#alt-speed-time-begin')[0];
     341                end = $('#alt-speed-time-end')[0];
    343342                for (i = 0; i < 24 * 4; i++) {
    344343                        hour = parseInt(i / 4);
     
    631630        cancelPrefsClicked: function(event) {
    632631                this.hidePrefsDialog( );
    633         },
    634 
    635         savePrefsClicked: function(event)
    636         {
    637                 // handle the clutch prefs locally
    638                 var tr = this;
    639                 var rate = parseInt( $('#prefs_form #refresh_rate')[0].value );
    640                 if( rate != tr[Prefs._RefreshRate] ) {
    641                         tr.setPref( Prefs._RefreshRate, rate );
    642                         tr.togglePeriodicRefresh( false );
    643                         tr.togglePeriodicRefresh( true );
    644                 }
    645 
    646                 var up_bytes        = parseInt( $('#prefs_form #upload_rate'  )[0].value );
    647                 var dn_bytes        = parseInt( $('#prefs_form #download_rate')[0].value );
    648                 var turtle_up_bytes = parseInt( $('#prefs_form #turtle_upload_rate'  )[0].value );
    649                 var turtle_dn_bytes = parseInt( $('#prefs_form #turtle_download_rate')[0].value );
    650 
    651                 // pass the new prefs upstream to the RPC server
    652                 var o = { };
    653                 o[RPC._StartAddedTorrent]    = $('#prefs_form #auto_start')[0].checked;
    654                 o[RPC._PeerPort]             = parseInt( $('#prefs_form #port')[0].value );
    655                 o[RPC._UpSpeedLimit]         = up_bytes;
    656                 o[RPC._DownSpeedLimit]       = dn_bytes;
    657                 o[RPC._DownloadDir]          = $('#prefs_form #download_location')[0].value;
    658                 o[RPC._UpSpeedLimited]       = $('#prefs_form #limit_upload'  )[0].checked;
    659                 o[RPC._DownSpeedLimited]     = $('#prefs_form #limit_download')[0].checked;
    660                 o[RPC._Encryption]           = $('#prefs_form #encryption')[0].checked
    661                                                    ? RPC._EncryptionRequired
    662                                                    : RPC._EncryptionPreferred;
    663                 o[RPC._TurtleDownSpeedLimit] = turtle_dn_bytes;
    664                 o[RPC._TurtleUpSpeedLimit]   = turtle_up_bytes;
    665                 o[RPC._TurtleTimeEnabled]    = $('#prefs_form #turtle_schedule')[0].checked;
    666                 o[RPC._TurtleTimeBegin]      = parseInt( $('#prefs_form #turtle_start_time').val() );
    667                 o[RPC._TurtleTimeEnd]        = parseInt( $('#prefs_form #turtle_end_time').val() );
    668                 o[RPC._TurtleTimeDay]        = parseInt( $('#prefs_form #turtle_days').val() );
    669 
    670                 tr.remote.savePrefs( o );
    671 
    672                 tr.hidePrefsDialog( );
    673         },
    674 
    675         closeStatsClicked: function(event) {
    676                 this.hideStatsDialog( );
    677632        },
    678633
     
    870825                if (state && this._periodic_session_refresh == null) {
    871826                        // sanity check
    872                         if( !this[Prefs._SessionRefreshRate] )
    873                              this[Prefs._SessionRefreshRate] = 5;
     827                        if( !this._prefs[Prefs._SessionRefreshRate] )
     828                             this._prefs[Prefs._SessionRefreshRate] = 10;
    874829                        remote = this.remote;
    875830                        this._periodic_session_refresh = setInterval(
    876                                 function(){ tr.loadDaemonPrefs(); }, this[Prefs._SessionRefreshRate] * 1000
     831                                function(){ tr.loadDaemonPrefs(); }, this._prefs[Prefs._SessionRefreshRate] * 1000
    877832                        );
    878833                } else {
     
    902857
    903858        toggleTurtleClicked: function() {
    904                 // Toggle the value
    905                 this[Prefs._TurtleState] = !this[Prefs._TurtleState];
    906                 // Store the result
    907                 var args = { };
    908                 args[RPC._TurtleState] = this[Prefs._TurtleState];
    909                 this.remote.savePrefs( args );
     859                var key = RPC._TurtleState;
     860                this.setPrefIfDifferent( key, !this._prefs[key] );
    910861        },
    911862
     
    922873                var w = $('#turtle_button');
    923874                var t;
    924                 if ( this[Prefs._TurtleState] ) {
     875                if ( this._prefs[RPC._TurtleState] ) {
    925876                        w.addClass('turtleEnabled');
    926877                        w.removeClass('turtleDisabled');
     
    943894
    944895        showPrefsDialog: function( ) {
    945                 $('body').addClass('prefs_showing');
    946                 $('#prefs_container').show();
    947                 this.hideiPhoneAddressbar();
    948                 if( Safari3 )
    949                         setTimeout("$('div#prefs_container div.dialog_window').css('top', '0px');",10);
    950                 this.updateButtonStates( );
    951                 this.togglePeriodicSessionRefresh(false);
    952         },
    953 
    954         hidePrefsDialog: function( )
    955         {
    956                 $('body.prefs_showing').removeClass('prefs_showing');
    957                 if (iPhone) {
    958                         this.hideiPhoneAddressbar();
    959                         $('#prefs_container').hide();
    960                 } else if (Safari3) {
    961                         $('div#prefs_container div.dialog_window').css('top', '-425px');
    962                         setTimeout("$('#prefs_container').hide();",500);
     896                var tr = this;
     897                $("#update_blocklist_button").button();
     898                $("#prefs_tabs").tabs();
     899                var args = { };
     900                if( iPhone ) { // tailor the dialog geometry for iPhone
     901                        $.extend( args, {
     902                                width: 320,
     903                                height: 360,
     904                                resizable: false,
     905                                draggable: false,
     906                                position: [ 0, 0 ]
     907                        } );
    963908                } else {
    964                         $('#prefs_container').hide();
    965                 }
    966                 this.updateButtonStates( );
    967                 this.togglePeriodicSessionRefresh(true);
     909                        $.extend( args, {
     910                                width: 450,
     911                                height: 400
     912                        } );
     913                }
     914                $.extend( args, {
     915                        title: 'Preferences',
     916                        show: 'blind',
     917                        hide: 'blind',
     918                        buttons: {
     919                                'Close': function() {
     920                                        $(this).dialog('close');
     921                                        tr.togglePeriodicSessionRefresh( true );
     922                                }
     923                        }
     924                } );
     925                $("#prefs_dialog" ).dialog( args );
     926                tr.togglePeriodicSessionRefresh( false );
     927        },
     928
     929        prefsKeys: [ 'alt-speed-down', 'alt-speed-enabled',
     930                     'alt-speed-time-begin', 'alt-speed-time-enabled',
     931                     'alt-speed-time-end', 'alt-speed-time-day',
     932                     'alt-speed-up', 'blocklist-enabled',
     933                     'blocklist-size', 'cache-size', 'config-dir',
     934                     'download-dir', 'dht-enabled', 'encryption',
     935                     'idle-seeding-limit', 'idle-seeding-limit-enabled',
     936                     'incomplete-dir', 'incomplete-dir-enabled',
     937                     'lpd-enabled',
     938                     'peer-limit-global', 'peer-limit-per-torrent',
     939                     'pex-enabled',
     940                     'peer-port', 'peer-port-random-on-start',
     941                     'port-forwarding-enabled', 'rename-partial-files',
     942                     'rpc-version', 'rpc-version-minimum',
     943                     'script-torrent-done-filename',
     944                     'script-torrent-done-enabled',
     945                     'seedRatioLimit', 'seedRatioLimited',
     946                     'speed-limit-down', 'speed-limit-down-enabled',
     947                     'speed-limit-up', 'speed-limit-up-enabled',
     948                     'start-added-torrents',
     949                     'trash-original-torrent-files',
     950                     'version' ],
     951
     952        setPrefIfDifferent: function( key, value ) {
     953                var tr = this;
     954                if( tr._prefs[key] != value ) {
     955                        var args = { };
     956                        args[key] = value;
     957                        tr.updatePrefs( args ); // tell our local copy about the change
     958                        tr.remote.savePrefs( args ); // tell our server about the change
     959                }
     960        },
     961
     962        initPrefs: function( )
     963        {
     964                var tr = this;
     965
     966                $.each( this.prefsKeys, function( index, key ) {
     967                        $(':input#'+key).change( function( e ) {
     968                                var control = e.target;
     969                                var value;
     970                                if( control.type == 'checkbox' )
     971                                        value = control.checked;
     972                                else {
     973                                        value = parseFloat( e.target.value );
     974                                        if( value == NaN ) value = parseInt( e.target.value );
     975                                        if( value == NaN ) value = e.target.value;
     976                                }
     977                                tr.setPrefIfDifferent( key, value );
     978
     979                                if( key == 'peer-port' ) {
     980                                        // changing the port invalidates the port status
     981                                        delete tr._prefs['port-is-open'];
     982                                        tr.updatePrefs( tr._prefs );
     983                                }
     984                        });
     985                });
     986
     987                $('#port-status-spinner').hide();
     988                $(':button#port-test').click(function(e) {
     989                        e.target.disabled = true;
     990                        $('#port-status-label' ).html( 'Testing...' );
     991                        var img = $('#port-status-spinner');
     992                        img.show();
     993                        var args = { };
     994                        tr.remote.portTest( function(data){
     995                                //console.log(data.arguments);
     996                                e.target.disabled = false;
     997                                img.hide();
     998                                tr.updatePrefs( data.arguments );
     999                        }, true );
     1000                });
     1001
     1002                $('#blocklist-update-spinner').hide();
     1003                $(':button#blocklist-update').click(function(e) {
     1004                        e.target.disabled = true;
     1005                        var img = $('#blocklist-update-spinner');
     1006                        img.show();
     1007                        var args = { };
     1008                        tr.remote.blocklistUpdate( function(data){
     1009                                console.log(data.arguments);
     1010                                e.target.disabled = false;
     1011                                img.hide();
     1012                                tr.updatePrefs( data.arguments );
     1013                        }, true );
     1014                });
    9681015        },
    9691016
     
    9731020        updatePrefs: function( prefs )
    9741021        {
     1022                var tr = this;
     1023                var updateTurtle = false;
     1024
    9751025                // remember them for later
    976                 this._prefs = prefs;
    977 
    978                 var up_limited        = prefs[RPC._UpSpeedLimited];
    979                 var dn_limited        = prefs[RPC._DownSpeedLimited];
    980                 var up_limit_k        = prefs[RPC._UpSpeedLimit];
    981                 var dn_limit_k        = prefs[RPC._DownSpeedLimit];
    982                 var turtle_up_limit_k = prefs[RPC._TurtleUpSpeedLimit];
    983                 var turtle_dn_limit_k = prefs[RPC._TurtleDownSpeedLimit];
    984 
    985                 $('div.download_location input')[0].value = prefs[RPC._DownloadDir];
    986                 $('div.port input')[0].value              = prefs[RPC._PeerPort];
    987                 $('div.auto_start input')[0].checked      = prefs[RPC._StartAddedTorrent];
    988                 $('input#limit_download')[0].checked      = dn_limited;
    989                 $('input#download_rate')[0].value         = dn_limit_k;
    990                 $('input#limit_upload')[0].checked        = up_limited;
    991                 $('input#upload_rate')[0].value           = up_limit_k;
    992                 $('input#refresh_rate')[0].value          = prefs[Prefs._RefreshRate];
    993                 $('div.encryption input')[0].checked      = prefs[RPC._Encryption] == RPC._EncryptionRequired;
    994                 $('input#turtle_download_rate')[0].value  = turtle_dn_limit_k;
    995                 $('input#turtle_upload_rate')[0].value    = turtle_up_limit_k;
    996                 $('input#turtle_schedule')[0].checked     = prefs[RPC._TurtleTimeEnabled];
    997                 $('select#turtle_start_time').val(          prefs[RPC._TurtleTimeBegin] );
    998                 $('select#turtle_end_time').val(            prefs[RPC._TurtleTimeEnd] );
    999                 $('select#turtle_days').val(                prefs[RPC._TurtleTimeDay] );
    1000                 $('#transmission_version').text(            prefs[RPC._DaemonVersion] );
    1001 
    1002                 if (!iPhone)
    1003                 {
    1004                         setInnerHTML( $('#limited_download_rate')[0], 'Limit (' + Transmission.fmt.speed(dn_limit_k) + ')' );
    1005                         var key = dn_limited ? '#limited_download_rate'
    1006                                                : '#unlimited_download_rate';
    1007                         $(key).deselectMenuSiblings().selectMenuItem();
    1008 
    1009                         setInnerHTML( $('#limited_upload_rate')[0], 'Limit (' + Transmission.fmt.speed(up_limit_k) + ')' );
    1010                         key = up_limited ? '#limited_upload_rate'
    1011                                          : '#unlimited_upload_rate';
    1012                         $(key).deselectMenuSiblings().selectMenuItem();
    1013                 }
    1014 
    1015                 this[Prefs._TurtleState] = prefs[RPC._TurtleState];
    1016                 this.updateTurtleButton();
     1026                $.extend(this._prefs, prefs);
     1027
     1028                // update the prefs dialog
     1029                var key;
     1030                for( key in prefs ) {
     1031                        $(':input#'+key).each(function(index,e) {
     1032                                if( e.type=='checkbox')
     1033                                        e.checked = prefs[key];
     1034                                else
     1035                                        e.value = prefs[key];
     1036                        });
     1037
     1038                        // extra pieces
     1039                        if( key === RPC._DownSpeedLimit )
     1040                                $('#limited_download_rate').html('Limit (' + Transmission.fmt.speed(this._prefs[RPC._DownSpeedLimit]) + ')' );
     1041                        else if( key === RPC._DownSpeedLimited )
     1042                                $(this._prefs[RPC._DownSpeedLimited] ? '#limited_download_rate' : '#unlimited_download_rate').deselectMenuSiblings().selectMenuItem();
     1043                        else if( key == RPC._UpSpeedLimit )
     1044                                $('#limited_upload_rate').html('Limit (' + Transmission.fmt.speed(this._prefs[RPC._UpSpeedLimit]) + ')' );
     1045                        else if( key === RPC._UpSpeedLimited )
     1046                                $(this._prefs[RPC._UpSpeedLimited] ? '#limited_upload_rate' : '#unlimited_upload_rate').deselectMenuSiblings().selectMenuItem();
     1047                        else if( key === RPC._TurtleState )
     1048                                updateTurtle = true;
     1049                        else if( key === RPC._TurtleUpSpeedLimit )
     1050                                updateTurtle = true;
     1051                        else if( key === RPC._TurtleDownSpeedLimit )
     1052                                updateTurtle = true;
     1053                        else if( key == 'blocklist-size' )
     1054                                $('#' + key).html( '' + prefs[key] );
     1055                        else if( key == 'port-is-open' )
     1056                                $('#port-status-label' ).html( 'Port is ' + (prefs[key] ? 'open' : 'closed') );
     1057                }
     1058
     1059                if( this._prefs['port-is-open'] == undefined )
     1060                        $('#port-status-label').html( '<i>Status unknown</i>' );
     1061
     1062                if( updateTurtle )
     1063                        this.updateTurtleButton();
    10171064        },
    10181065
    10191066        showStatsDialog: function( ) {
    1020                 this.loadDaemonStats();
    1021                 $('body').addClass('stats_showing');
    1022                 $('#stats_container').show();
    1023                 this.hideiPhoneAddressbar();
    1024                 if( Safari3 )
    1025                         setTimeout("$('div#stats_container div.dialog_window').css('top', '0px');",10);
    1026                 this.updateButtonStates( );
    1027                 this.togglePeriodicStatsRefresh(true);
    1028         },
    1029 
    1030         hideStatsDialog: function( ){
    1031                 $('body.stats_showing').removeClass('stats_showing');
    1032                 if (iPhone) {
    1033                         this.hideiPhoneAddressbar();
    1034                         $('#stats_container').hide();
    1035                 } else if (Safari3) {
    1036                         $('div#stats_container div.dialog_window').css('top', '-425px');
    1037                         setTimeout("$('#stats_container').hide();",500);
    1038                 } else {
    1039                         $('#stats_container').hide();
    1040                 }
    1041                 this.updateButtonStates( );
    1042                 this.togglePeriodicStatsRefresh(false);
     1067                var tr = this;
     1068                tr.loadDaemonStats();
     1069                tr.togglePeriodicStatsRefresh(true);
     1070                $("#stats_dialog" ).dialog( {
     1071                        title: 'Statistics',
     1072                        show: 'blind',
     1073                        hide: 'blind',
     1074                        width: 200,
     1075                        buttons: {
     1076                                'Close': function() {
     1077                                        tr.togglePeriodicStatsRefresh(false);
     1078                                        $(this).dialog('close');
     1079                                }
     1080                        }
     1081                });
    10431082        },
    10441083
     
    10581097                setInnerHTML( $('#stats_session_ratio')[0], Transmission.fmt.ratioString(Math.ratio(session["uploadedBytes"],session["downloadedBytes"])));
    10591098                setInnerHTML( $('#stats_session_duration')[0], Transmission.fmt.timeInterval(session["secondsActive"]) );
    1060                 setInnerHTML( $('#stats_total_count')[0], total["sessionCount"] + " times" );
     1099                setInnerHTML( $('#stats_total_count')[0], 'Started ' + total["sessionCount"] + " times" );
    10611100                setInnerHTML( $('#stats_total_uploaded')[0], Transmission.fmt.size(total["uploadedBytes"]) );
    10621101                setInnerHTML( $('#stats_total_downloaded')[0], Transmission.fmt.size(total["downloadedBytes"]) );
     
    11141153                        // Limit the download rate
    11151154                        case 'footer_download_rate_menu':
    1116                                 var args = { };
     1155                                //var args = { };
    11171156                                if ($element.is('#unlimited_download_rate')) {
    11181157                                        $element.deselectMenuSiblings().selectMenuItem();
    1119                                         args[RPC._DownSpeedLimited] = false;
     1158                                        tr.setPrefIfDifferent( RPC._DownSpeedLimited, false );
    11201159                                } else {
    11211160                                        var rate_str = ($element[0].innerHTML).replace(/[^0-9]/ig, '');
     
    11231162                                        setInnerHTML( $('#limited_download_rate')[0], 'Limit (' + Transmission.fmt.speed(rate_val) + ')' );
    11241163                                        $('#limited_download_rate').deselectMenuSiblings().selectMenuItem();
    1125                                         $('div.preference input#download_rate')[0].value = rate_str;
    1126                                         args[RPC._DownSpeedLimit] = rate_val;
    1127                                         args[RPC._DownSpeedLimited] = true;
    1128                                 }
    1129                                 $('div.preference input#limit_download')[0].checked = args[RPC._DownSpeedLimited];
    1130                                 tr.remote.savePrefs( args );
     1164                                        tr.setPrefIfDifferent( RPC._DownSpeedLimit, rate_val );
     1165                                        tr.setPrefIfDifferent( RPC._DownSpeedLimited, true );
     1166                                }
    11311167                                break;
    11321168
     
    11361172                                if ($element.is('#unlimited_upload_rate')) {
    11371173                                        $element.deselectMenuSiblings().selectMenuItem();
    1138                                         args[RPC._UpSpeedLimited] = false;
     1174                                        tr.setPrefIfDifferent( RPC._UpSpeedLimited, false );
    11391175                                } else {
    11401176                                        var rate_str = ($element[0].innerHTML).replace(/[^0-9]/ig, '');
     
    11421178                                        setInnerHTML( $('#limited_upload_rate')[0], 'Limit (' + Transmission.fmt.speed(rate_val) + ')' );
    11431179                                        $('#limited_upload_rate').deselectMenuSiblings().selectMenuItem();
    1144                                         $('div.preference input#upload_rate')[0].value = rate_str;
    1145                                         args[RPC._UpSpeedLimit] = rate_val;
    1146                                         args[RPC._UpSpeedLimited] = true;
    1147                                 }
    1148                                 $('div.preference input#limit_upload')[0].checked = args[RPC._UpSpeedLimited];
    1149                                 tr.remote.savePrefs( args );
     1180                                        tr.setPrefIfDifferent( RPC._UpSpeedLimit, rate_val );
     1181                                        tr.setPrefIfDifferent( RPC._UpSpeedLimited, true );
     1182                                }
    11501183                                break;
    11511184
     
    18251858                        var header = 'Remove ' + torrent.name() + '?';
    18261859                        var message = 'Once removed, continuing the transfer will require the torrent file. Are you sure you want to remove it?';
    1827                         dialog.confirm( header, message, 'Remove', 'transmission.removeTorrents', torrents );
     1860                        askUser( header, message, 'Remove', transmission.removeTorrents, torrents );
    18281861                }
    18291862                else
     
    18311864                        var header = 'Remove ' + torrents.length + ' transfers?';
    18321865                        var message = 'Once removed, continuing the transfers will require the torrent files. Are you sure you want to remove them?';
    1833                         dialog.confirm( header, message, 'Remove', 'transmission.removeTorrents', torrents );
    1834                 }
     1866                        askUser( header, message, 'Remove', transmission.removeTorrents, torrents );
     1867                }
     1868        },
     1869
     1870        removeTorrents: function( torrents ) {
     1871                console.log( "in removeTorrents" );
     1872                console.log( torrents );
     1873                var torrent_ids = jQuery.map(torrents, function(t) { return t.id(); } );
     1874                var tr = this;
     1875                //this.remote.removeTorrents( torrent_ids, function(){ tr.refreshTorrents() } );
    18351876        },
    18361877
     
    18421883                                header = 'Remove ' + torrent.name() + ' and delete data?',
    18431884                                message = 'All data downloaded for this torrent will be deleted. Are you sure you want to remove it?';
    1844                         dialog.confirm( header, message, 'Remove', 'transmission.removeTorrentsAndData', torrents );
     1885                        askUser( header, message, 'Remove', transmission.removeTorrentsAndData, torrents );
    18451886                }
    18461887                else
     
    18481889                        var header = 'Remove ' + torrents.length + ' transfers and delete data?',
    18491890                                message = 'All data downloaded for these torrents will be deleted. Are you sure you want to remove them?';
    1850                         dialog.confirm( header, message, 'Remove', 'transmission.removeTorrentsAndData', torrents );
    1851                 }
    1852         },
    1853 
    1854         removeTorrents: function( torrents ) {
    1855                 var torrent_ids = jQuery.map(torrents, function(t) { return t.id(); } );
    1856                 var tr = this;
    1857                 this.remote.removeTorrents( torrent_ids, function(){ tr.refreshTorrents() } );
     1891                        askUser( header, message, 'Remove', transmission.removeTorrentsAndData, torrents );
     1892                }
    18581893        },
    18591894
  • trunk/web/javascript/transmission.remote.js

    r10812 r11157  
    6868                if( !remote._error.length )
    6969                        remote._error = 'Server not responding';
    70 
    71                 dialog.confirm('Connection Failed',
    72                         'Could not connect to the server. You may need to reload the page to reconnect.',
    73                         'Details',
    74                         'alert(remote._error);',
    75                         null,
    76                         'Dismiss');
     70                tellUser( 'Connection failed',
     71                          'Could not connect to the server. You may need to reload the page to reconnect.' );
    7772                remote._controller.togglePeriodicRefresh(false);
    7873                remote._controller.togglePeriodicSessionRefresh(false);
     
    9489                        dataType: 'json',
    9590                        cache: false,
    96                         data: $.toJSON(data),
     91                        data: JSON.stringify(data),
    9792                        beforeSend: function(XHR){ remote.appendSessionId(XHR) },
    9893                        error: function(request, error_string, exception){ remote.ajaxError(request, error_string, exception, ajaxSettings) },
     
    115110                this.sendRequest( o, callback, async );
    116111        },
     112
     113        blocklistUpdate: function( callback, async ) {
     114                var tr = this._controller;
     115                var o = { method: 'blocklist-update' };
     116                this.sendRequest( o, callback, async );
     117        },
     118
     119        portTest: function( callback, async ) {
     120                var tr = this._controller;
     121                var o = { method: 'port-test' };
     122                this.sendRequest( o, callback, async );
     123        },
     124
    117125
    118126        getInitialDataFor: function(torrent_ids, callback) {
  • trunk/web/stylesheets/common.css

    r11081 r11157  
    977977 *--------------------------------------*/
    978978
    979 div.dialog_container {
    980         position: absolute;
    981         top: 0;
    982         left: 0px;
    983         margin: 0px;
    984         width: 100%;
    985         height: 100%;
    986         text-align: center;
    987         color: black;
    988         font-size: 1.1em;
    989 }
    990 
    991 div.dialog_container div.dialog_window {
    992         background-color: #eee;
    993         margin: 0 auto;
    994         filter: alpha(opacity=95);
    995         -moz-opacity: .95;
    996         opacity: .95;
    997         border-top: none;
    998         text-align: left;
    999         width: 420px;
    1000         z-index: 4;
    1001         overflow: hidden;
    1002         position: relative;
    1003         -webkit-box-shadow: 0 3px 6px rgba(0,0,0,0.7);
    1004         top: 80px;
    1005 }
    1006 @media screen and (-webkit-min-device-pixel-ratio:0) {
    1007         div.dialog_container div.dialog_window {
    1008                 top: 0;
    1009                 margin-top: 71px;
    1010                 z-index: 2
    1011         }
    1012 }
    1013 
    1014 div#prefs_container div.dialog_window {
    1015         width: 410px;
    1016         padding: 0 15px;
    1017 }
    1018 
    1019 div#stats_container div.dialog_window {
    1020         width: 255px;
    1021         padding: 0 15px;
    1022 }
    1023 
    1024 div.dialog_container div.dialog_window img {
    1025         margin: 20px 20px 0 20px;
    1026         float: left;
    1027 }
    1028 
    1029 div.dialog_container div.dialog_window h2.dialog_heading {
    1030         display: block;
    1031         float: left;
    1032         width: 305px;
    1033         font-size: 1.2em;
    1034         color: black;
    1035         margin-top: 20px;
    1036 }
    1037 
    1038 div.dialog_container div.dialog_window div.dialog_message {
    1039         float: left;
    1040         padding-left: 3px;
    1041         margin-left: -3px;
    1042         width: 305px;
    1043         overflow: hidden;
    1044 }
    1045 
    1046 div.dialog_container div.dialog_window a {
    1047         display: block;
    1048         float: right;
    1049         margin: 10px 20px 10px -8px;
    1050         padding: 5px;
    1051         background-color: #EEE;
    1052         border: 1px solid #787878;
    1053         width: 50px;
    1054         height: 15px;
    1055         text-align: center;
    1056         font-weight: bold;
    1057         text-decoration: none;
    1058         color: #323232;
    1059         -webkit-appearance: button;
    1060         font: -webkit-control;
    1061         cursor: default;
    1062 }
    1063 
    1064 div.dialog_container div.dialog_window a:hover,
    1065 div.dialog_container div.dialog_window a:active {
    1066         background: #C0C8D6 url('../images/graphics/filter_bar.png') bottom repeat-x;
    1067 }
    1068 
    1069 div#upload_container div.dialog_window div.dialog_message label {
     979div#upload_container label {
    1070980        margin-top: 15px;
    1071981        display: block;
    1072982}
    1073983
    1074 div#upload_container div.dialog_window div.dialog_message input {
     984div#upload_container input {
    1075985        width: 249px;
    1076986        margin: 3px 0 0 0;
     
    1078988}
    1079989
    1080 div#upload_container div.dialog_window div.dialog_message input[type=text] {
     990div#upload_container input[type=text] {
    1081991        width: 245px;
    1082992        padding: 2px;
    1083993}
    1084994
    1085 div#upload_container div.dialog_window div.dialog_message input[type=checkbox] {
     995div#upload_container input[type=checkbox] {
    1086996        margin: 15px 3px 0 0;
    1087997        display: inline;
     
    1089999}
    10901000
    1091 div#upload_container div.dialog_window div.dialog_message #auto_start_label {
     1001div#upload_container #auto_start_label {
    10921002        display: inline;
    1093 }
    1094 
    1095 div.dialog_container div.dialog_window form {
    1096         margin: 0;
    1097         padding: 0px;
    10981003}
    10991004
     
    11101015}
    11111016
    1112 div#prefs_container label {
    1113         display: block;
    1114         margin: 0 0 0 2px;
    1115 }
    1116 
    1117 div#prefs_container label.category {
    1118         clear: both;
    1119         font-size: 1.2em;
    1120 }
    1121 
    1122 div#prefs_container label.item {
    1123         font-size: 11px !important;
    1124         margin: 0 5px 0 20px;
    1125         float: left;
    1126 }
    1127 
    1128 div#prefs_container label.suffix {
    1129         margin: 0 5px 0 10px;
    1130         float: left;
    1131 }
    1132 
    1133 div#prefs_container div.formdiv.checkbox label.item {
    1134         margin: 0 5px 0 2px;
    1135 }
    1136 
    1137 div#prefs_container div.limit_total label.item {
    1138         width: 102px;
    1139 }
    1140 
    1141 div#prefs_container div.limit_turtle label.item {
    1142         width: 120px;
    1143 }
    1144 
    1145 div#prefs_container div.preference input[type=checkbox] {
    1146         float: left;
    1147         margin-left: 20px;
    1148         margin-top: 9px;
    1149 }
    1150 @-moz-document url-prefix() {
    1151         div#prefs_container div.preference input[type=checkbox] {
    1152                 margin-top: 8px;
    1153         }
    1154 }
    1155 
    1156 div#prefs_container div.preference input[type=text] {
    1157         width: 50px;
    1158         padding: 0px !important;
    1159         height: 18px;
    1160         margin-top: 2px;
    1161 }
    1162 
    1163 div#prefs_container div.preference input {
    1164         float: left;
    1165 }
    1166 
    1167 div#prefs_container div.download_location input {
    1168         width: 256px !important;
    1169 }
    1170 div#prefs_container div.download_location .checkbox input {
    1171         width: auto !important;
    1172 }
    1173 
    1174 div#prefs_container div.formdiv {
    1175         clear: both;
    1176         line-height: 30px;
    1177 }
    1178 
    1179 div#prefs_container a {
    1180         clear: left;
    1181         margin: 10px 5px 10px 7px;
    1182 }
    1183 
    1184 div#prefs_container h2.dialog_heading {
    1185         display: none;
    1186 }
    1187 
    1188 div#prefs_container div#prefs_tabs {
    1189         clear: both;
    1190 }
    1191 
    1192 div#prefs_container div#prefs_tabs ul {
    1193         margin: 0;
    1194         padding: 0 0 0 10px;
    1195 }
    1196 div#prefs_container div#prefs_tabs ul li {
    1197         display: block;
    1198         float: left;
    1199         font-size: 1.2em;
    1200         color: #323232;
    1201         text-align: center;
    1202         padding: 2px 20px;
    1203         border-left: 1px solid #787878;
    1204         border-right: 1px solid #787878;
    1205         border-top: 1px solid #787878;
    1206         margin-bottom: -1px;
    1207 }
    1208 .prefs_tab_disabled {
    1209         background: #C0C8D6 url('../images/graphics/filter_bar.png') bottom repeat-x;
    1210         border-bottom: 1px solid #787878;
    1211 }
    1212 .prefs_tab_enabled {
    1213         background: none;
    1214         border-bottom: 1px solid #efefef;
    1215 }
    1216 div#stats_container h2.dialog_heading {
    1217         display: none;
    1218 }
    1219 div#stats_container div#stats_error {
    1220         display: none;
    1221         width: 395px;
    1222         margin: 6px auto 6px auto;
    1223         padding: 3px 0 3px 0;
    1224         border: 2px solid #cc3333;
    1225         color: #cc3333;
    1226         font-size: 1.2em;
     1017#stats_dialog * {
     1018        text-align: left;
     1019}
     1020.dialog_section_title {
     1021        padding-top: 8px;
     1022        font-weight: bold;
     1023        text-align: left;
     1024}
     1025
     1026.dialog_col_1 {
     1027        width: 12px;
     1028}
     1029.dialog_col_3 {
     1030        width: 8px;
     1031}
     1032
     1033#prefs_dialog * {
     1034        text-align: left;
    12271035        vertical-align: middle;
    1228         text-align: center;
    1229         height: 20px;
    1230         line-height: 20px;
    1231         background-color: #FFEFEF;
    1232 }
    1233 .stats_info_container {
    1234         clear: both;
    1235         padding: 0px 7px 0px 7px;
    1236 }
    1237 .stats_group {
    1238         display: table;
    1239         margin: 5px 0px 0px 0px;
    1240         padding: 5px 0px 0px 0px;
    1241         width: 100%;
    1242 }
    1243 .stats_row {
    1244         display: table-row;
    1245 }
    1246 .stats_row > div {
    1247         padding-top: 4px;
    1248 }
    1249 div#stats_container label.category {
    1250         clear: both;
    1251         font-size: 1.2em;
    1252         margin: 5px 0px;
    1253 }
    1254 div#stats_container div.item {
    1255         font-size: 11px !important;
    1256         margin: 0 5px 0 20px;
    1257         float: left;
    1258         width: 100px;
    1259 }
    1260 div#stats_container div.item2 {
    1261         font-size: 11px !important;
    1262         margin: 0 5px 0 20px;
    1263         float: left;
    1264 }
    1265 div#stats_container a {
    1266         clear: left;
    1267         margin: 10px 5px 10px 7px;
    1268 }
    1269 
    1270 div.dialog_container div#prefs_tabs ul li.prefs_tab_disabled:hover,
    1271 div.dialog_container div#prefs_tabs ul li.prefs_tab_disabled:active {
    1272         background: none;
    1273 }
    1274 div#prefs_container div#prefs_tabs div.prefs_tab {
    1275         border-top: 1px solid #787878;
    1276         clear: both;
    1277         padding: 7px;
    1278 }
    1279 
    1280 div#prefs_container div#pref_error {
    1281         display: none;
    1282         width: 395px;
    1283         margin: 6px auto 6px auto;
    1284         padding: 3px 0 3px 0;
    1285         border: 2px solid #cc3333;
    1286         color: #cc3333;
    1287         font-size: 1.2em;
    1288         vertical-align: middle;
    1289         text-align: center;
    1290         height: 20px;
    1291         line-height: 20px;
    1292         background-color: #FFEFEF;
     1036}
     1037#prefs_tabs {
     1038        border: 0px;
    12931039}
    12941040
  • trunk/web/stylesheets/ie7.css

    r10812 r11157  
    5959        bottom: 0px !important;
    6060}
    61 .dialog_container{
    62         z-index: 4
    63 }
  • trunk/web/stylesheets/iphone.css

    r10812 r11157  
    2727}
    2828
    29 body div.dialog_container {
    30         min-height: 291px;
    31 }
     29.ui-dialog-titlebar {
     30        display: none;
     31}
     32.ui-dialog .ui-dialog-content {
     33        padding: 0px;
     34}
     35.ui-tabs .ui-tabs-panel {
     36        padding: 0px;
     37}
     38.dialog_col_1 {
     39        width: 0px;
     40}
     41.dialog_col_3 {
     42        width: 5px;
     43}
     44
    3245
    3346body div#torrent_inspector {
     
    3952}
    4053
    41 body.landscape div#dialog_container, body.landscape div#torrent_inspector {
     54body.landscape body.landscape div#torrent_inspector {
    4255        min-height: 143px;
    4356}
    4457
    4558body.inspector_showing #torrent_filter_bar, body.inspector_showing #torrent_container,
    46 body.dialog_showing #torrent_filter_bar, body.dialog_showing #torrent_container, body.dialog_showing #torrent_inspector, body.dialog_showing #prefs_container,
    47 body.prefs_showing #torrent_inspector, body.prefs_showing #torrent_filter_bar, body.prefs_showing #torrent_container,
    4859body.open_showing #torrent_filter_bar, body.open_showing #torrent_container {
    4960        display: none !important;
     
    372383}
    373384
    374 div.dialog_container {
    375         background: rgba(0,0,0,0.85);
    376         color: white;
    377         padding: 15px 10px;
    378 }
    379 
    380 div.dialog_container .dialog_window {
    381         height: auto;
    382         font-size: 13px;
    383         text-shadow: black 1px 1px 1px !important;
    384 }
    385 
    386 div#dialog_message.dialog_message {
    387         width: 280px;
    388         margin: 10px auto 25px;
    389         font-size: 13px;
    390         line-height: 14px;
    391         word-wrap: break-word;
    392         overflow: hidden;
    393         padding-bottom: 0;
    394 }
    395 
    396385#torrent_upload_file, label[for="torrent_upload_file"]{
    397386        display:none;
    398 }
    399 
    400 h2.dialog_heading {
    401         text-align: center;
    402         width: 300px;
    403         margin: 0 auto;
    404         font-size: 17px;
    405 }
    406 
    407 div.dialog_container a {
    408         color: white;
    409         padding: 7px 0;
    410         background: #222;
    411         text-decoration: none;
    412         border: 2px solid white;
    413         margin: 5px 5px 0;
    414         font-weight: bold;
    415         -webkit-border-radius: 16px;
    416         display: inline-block;
    417         width: 90px;
    418         font-size: 12px;
    419         text-align: center;
    420 }
    421 
    422 div.dialog_container a#dialog_cancel_button, div.dialog_container a#prefs_cancel_button {
    423         left: 55px;
    424 }
    425 
    426 div.dialog_container a#dialog_confirm_button, div.dialog_container a#prefs_save_button {
    427         right: 55px;
    428         color: black;
    429         text-shadow: none;
    430         background: #fff;
    431 }
    432 
    433 #dialog_container div.dialog_window img {
    434         margin: 5px auto 12px;
    435 }
    436 
    437 .landscape div.dialog_container a#dialog_cancel_button {
    438         left: 155px;
    439 }
    440 
    441 .landscape div.dialog_container a#dialog_confirm_button {
    442         right: 110px;
    443 }
    444 
    445 .landscape div.dialog_container img {
    446         float: left !important;
    447         margin: 0 0 0 50px;
    448 }
    449 
    450 .landscape h2#dialog_heading.dialog_heading {
    451         margin: 5px auto 0;
    452         margin-left: 150px;
    453         text-align: left;
    454 }
    455 
    456 .landscape div#dialog_message.dialog_message {
    457         width: 300px;
    458         margin: 10px 0 20px 150px;
    459         text-align: left;
    460 }
    461 
    462 /*--------------------------------------
    463  *
    464  * P R E F S   C O N T A I N E R
    465  *
    466  *--------------------------------------*/
    467 
    468 div#prefs_container {
    469         text-align: left;
    470 }
    471 
    472 div#prefs_container label.item {
    473         margin: 0 5px 0 15px;
    474         float: left;
    475 }
    476 
    477 form#prefs_form {
    478         height: 365px;
    479         padding: 0 5px;
    480 }
    481 
    482 div#prefs_container label.suffix {
    483         margin: 0 5px 0 10px;
    484         float: left;
    485 }
    486 
    487 div#prefs_container input {
    488         float: left;
    489 }
    490 
    491 div#prefs_container div.preference input[type=checkbox] {
    492         margin: 3px 7px 0 16px;
    493         width: 18px;
    494         height: 18px;
    495         clear: left;
    496 }
    497 
    498 div#prefs_container label {
    499         line-height: 25px;
    500         display: block;
    501 }
    502 
    503 div#prefs_container div.download_location label.item,
    504 div#prefs_container div.port label.item,
    505 div#prefs_container div.web_gui label.item {
    506         width: 127px;
    507         clear: left;
    508 }
    509 
    510 div#prefs_container div.auto_start label.item,
    511 div#prefs_container div.encryption label.item,
    512 div#prefs_container div.limit_total label.item {
    513         margin: 0 5px 0 0;
    514 }
    515 
    516 div#prefs_container div.limit_total label.item {
    517         width: 101px;
    518 }
    519 
    520 div#prefs_container div.preference input[type=text] {
    521         padding: 2px 2px 1px;
    522         text-shadow: none !important;
    523         font-size: 13px;
    524         width: 50px;
    525 }
    526 
    527 div#prefs_container div.download_location input {
    528         position: absolute;
    529         right: 20px;
    530         left: 160px;
    531         width: auto !important;
    532 }
    533 
    534 div#prefs_container label.category {
    535         clear: both;
    536         font-weight: bold;
    537 }
    538 
    539 div#prefs_container a {
    540         margin-top: 42px !important;
    541 }
    542 
    543 .landscape div.dialog_container a#prefs_cancel_button {
    544         left: 135px;
    545 }
    546 
    547 .landscape div.dialog_container a#prefs_save_button {
    548         right: 135px;
    549387}
    550388
     
    834672}
    835673
    836 body.prefs_showing div.torrent_footer a#preferences_link, body.dialog_showing div.torrent_footer a#preferences_link {
     674body.prefs_showing div.torrent_footer a#preferences_link, div.torrent_footer a#preferences_link {
    837675        display: none;
    838676}
Note: See TracChangeset for help on using the changeset viewer.