diff --git a/web/index.html b/web/index.html index d4eb3fa66..d89cb8e76 100755 --- a/web/index.html +++ b/web/index.html @@ -1,16 +1,14 @@ - - - - + + + + - - - + + Close - '; @@ -1860,24 +1824,16 @@ Transmission.prototype = var torrent = torrents[0]; var header = 'Remove ' + torrent.name() + '?'; var message = 'Once removed, continuing the transfer will require the torrent file. Are you sure you want to remove it?'; - askUser( header, message, 'Remove', transmission.removeTorrents, torrents ); + dialog.confirm( header, message, 'Remove', 'transmission.removeTorrents', torrents ); } else { var header = 'Remove ' + torrents.length + ' transfers?'; var message = 'Once removed, continuing the transfers will require the torrent files. Are you sure you want to remove them?'; - askUser( header, message, 'Remove', transmission.removeTorrents, torrents ); + dialog.confirm( header, message, 'Remove', 'transmission.removeTorrents', torrents ); } }, - removeTorrents: function( torrents ) { - console.log( "in removeTorrents" ); - console.log( torrents ); - var torrent_ids = jQuery.map(torrents, function(t) { return t.id(); } ); - var tr = this; - //this.remote.removeTorrents( torrent_ids, function(){ tr.refreshTorrents() } ); - }, - promptToRemoveTorrentsAndData:function( torrents ) { if( torrents.length == 1 ) @@ -1885,16 +1841,22 @@ Transmission.prototype = var torrent = torrents[0], header = 'Remove ' + torrent.name() + ' and delete data?', message = 'All data downloaded for this torrent will be deleted. Are you sure you want to remove it?'; - askUser( header, message, 'Remove', transmission.removeTorrentsAndData, torrents ); + dialog.confirm( header, message, 'Remove', 'transmission.removeTorrentsAndData', torrents ); } else { var header = 'Remove ' + torrents.length + ' transfers and delete data?', message = 'All data downloaded for these torrents will be deleted. Are you sure you want to remove them?'; - askUser( header, message, 'Remove', transmission.removeTorrentsAndData, torrents ); + dialog.confirm( header, message, 'Remove', 'transmission.removeTorrentsAndData', torrents ); } }, + removeTorrents: function( torrents ) { + var torrent_ids = jQuery.map(torrents, function(t) { return t.id(); } ); + var tr = this; + this.remote.removeTorrents( torrent_ids, function(){ tr.refreshTorrents() } ); + }, + removeTorrentsAndData: function( torrents ) { this.remote.removeTorrentsAndData( torrents ); }, diff --git a/web/javascript/transmission.remote.js b/web/javascript/transmission.remote.js index 341d56db9..7383b5625 100644 --- a/web/javascript/transmission.remote.js +++ b/web/javascript/transmission.remote.js @@ -67,8 +67,13 @@ TransmissionRemote.prototype = : ""; if( !remote._error.length ) remote._error = 'Server not responding'; - tellUser( 'Connection failed', - 'Could not connect to the server. You may need to reload the page to reconnect.' ); + + dialog.confirm('Connection Failed', + 'Could not connect to the server. You may need to reload the page to reconnect.', + 'Details', + 'alert(remote._error);', + null, + 'Dismiss'); remote._controller.togglePeriodicRefresh(false); remote._controller.togglePeriodicSessionRefresh(false); }, @@ -88,7 +93,7 @@ TransmissionRemote.prototype = contentType: 'json', dataType: 'json', cache: false, - data: JSON.stringify(data), + data: $.toJSON(data), beforeSend: function(XHR){ remote.appendSessionId(XHR) }, error: function(request, error_string, exception){ remote.ajaxError(request, error_string, exception, ajaxSettings) }, success: success, @@ -110,19 +115,6 @@ TransmissionRemote.prototype = this.sendRequest( o, callback, async ); }, - blocklistUpdate: function( callback, async ) { - var tr = this._controller; - var o = { method: 'blocklist-update' }; - this.sendRequest( o, callback, async ); - }, - - portTest: function( callback, async ) { - var tr = this._controller; - var o = { method: 'port-test' }; - this.sendRequest( o, callback, async ); - }, - - getInitialDataFor: function(torrent_ids, callback) { var o = { method: 'torrent-get', diff --git a/web/stylesheets/common.css b/web/stylesheets/common.css index d00e6792e..58d310411 100644 --- a/web/stylesheets/common.css +++ b/web/stylesheets/common.css @@ -309,15 +309,12 @@ div#torrent_filter_bar ul li.selected a { } div#torrent_filter_bar input#torrent_search { + float: right; height: 15px; width: 100px; border: solid 0 #fff; padding: 0 2px; margin: 4px 5px 0 0; - position:absolute; - right: 0px; - top: 0px; - border-radius: 10px; } /* Safari-look filter input for Firefox */ @-moz-document url-prefix() { @@ -581,7 +578,7 @@ div#torrent_inspector { top: 97px; bottom: 22px; right: 0px; - width: 480px; + width: 500px; background-color: #ddd; border-left: 1px solid #888; z-index: 2; @@ -674,7 +671,6 @@ table.peer_list { text-align: left; cursor: default; clear: both; - table-layout: fixed; } .peer_list .encryptedCol { @@ -708,8 +704,6 @@ table.peer_list { } .peer_list .clientCol { - white-space: nowrap; - overflow: hidden; text-overflow: ellipsis; } @@ -982,32 +976,127 @@ div.torrent_footer div#turtle_button { * *--------------------------------------*/ -div#upload_container label { +div.dialog_container { + position: absolute; + top: 0; + left: 0px; + margin: 0px; + width: 100%; + height: 100%; + text-align: center; + color: black; + font-size: 1.1em; +} + +div.dialog_container div.dialog_window { + background-color: #eee; + margin: 0 auto; + filter: alpha(opacity=95); + -moz-opacity: .95; + opacity: .95; + border-top: none; + text-align: left; + width: 420px; + z-index: 4; + overflow: hidden; + position: relative; + -webkit-box-shadow: 0 3px 6px rgba(0,0,0,0.7); + top: 80px; +} +@media screen and (-webkit-min-device-pixel-ratio:0) { + div.dialog_container div.dialog_window { + top: 0; + margin-top: 71px; + z-index: 2 + } +} + +div#prefs_container div.dialog_window { + width: 410px; + padding: 0 15px; +} + +div#stats_container div.dialog_window { + width: 255px; + padding: 0 15px; +} + +div.dialog_container div.dialog_window img { + margin: 20px 20px 0 20px; + float: left; +} + +div.dialog_container div.dialog_window h2.dialog_heading { + display: block; + float: left; + width: 305px; + font-size: 1.2em; + color: black; + margin-top: 20px; +} + +div.dialog_container div.dialog_window div.dialog_message { + float: left; + padding-left: 3px; + margin-left: -3px; + width: 305px; + overflow: hidden; +} + +div.dialog_container div.dialog_window a { + display: block; + float: right; + margin: 10px 20px 10px -8px; + padding: 5px; + background-color: #EEE; + border: 1px solid #787878; + width: 50px; + height: 15px; + text-align: center; + font-weight: bold; + text-decoration: none; + color: #323232; + -webkit-appearance: button; + font: -webkit-control; + cursor: default; +} + +div.dialog_container div.dialog_window a:hover, +div.dialog_container div.dialog_window a:active { + background: #C0C8D6 url('../images/graphics/filter_bar.png') bottom repeat-x; +} + +div#upload_container div.dialog_window div.dialog_message label { margin-top: 15px; display: block; } -div#upload_container input { +div#upload_container div.dialog_window div.dialog_message input { width: 249px; margin: 3px 0 0 0; display: block; } -div#upload_container input[type=text] { +div#upload_container div.dialog_window div.dialog_message input[type=text] { width: 245px; padding: 2px; } -div#upload_container input[type=checkbox] { +div#upload_container div.dialog_window div.dialog_message input[type=checkbox] { margin: 15px 3px 0 0; display: inline; width: auto; } -div#upload_container #auto_start_label { +div#upload_container div.dialog_window div.dialog_message #auto_start_label { display: inline; } +div.dialog_container div.dialog_window form { + margin: 0; + padding: 0px; +} + iframe#torrent_upload_frame { display: block; /* Don't change this : safari forms won't target hidden frames (they open a new window) */ position: absolute; @@ -1020,28 +1109,187 @@ iframe#torrent_upload_frame { margin: 0; } -#stats_dialog * { - text-align: left; -} -.dialog_section_title { - padding-top: 8px; - font-weight: bold; - text-align: left; +div#prefs_container label { + display: block; + margin: 0 0 0 2px; } -.dialog_col_1 { - width: 12px; -} -.dialog_col_3 { - width: 8px; +div#prefs_container label.category { + clear: both; + font-size: 1.2em; } -#prefs_dialog * { - text-align: left; +div#prefs_container label.item { + font-size: 11px !important; + margin: 0 5px 0 20px; + float: left; +} + +div#prefs_container label.suffix { + margin: 0 5px 0 10px; + float: left; +} + +div#prefs_container div.formdiv.checkbox label.item { + margin: 0 5px 0 2px; +} + +div#prefs_container div.limit_total label.item { + width: 102px; +} + +div#prefs_container div.limit_turtle label.item { + width: 120px; +} + +div#prefs_container div.preference input[type=checkbox] { + float: left; + margin-left: 20px; + margin-top: 9px; +} +@-moz-document url-prefix() { + div#prefs_container div.preference input[type=checkbox] { + margin-top: 8px; + } +} + +div#prefs_container div.preference input[type=text] { + width: 50px; + padding: 0px !important; + height: 18px; + margin-top: 2px; +} + +div#prefs_container div.preference input { + float: left; +} + +div#prefs_container div.download_location input { + width: 256px !important; +} +div#prefs_container div.download_location .checkbox input { + width: auto !important; +} + +div#prefs_container div.formdiv { + clear: both; + line-height: 30px; +} + +div#prefs_container a { + clear: left; + margin: 10px 5px 10px 7px; +} + +div#prefs_container h2.dialog_heading { + display: none; +} + +div#prefs_container div#prefs_tabs { + clear: both; +} + +div#prefs_container div#prefs_tabs ul { + margin: 0; + padding: 0 0 0 10px; +} +div#prefs_container div#prefs_tabs ul li { + display: block; + float: left; + font-size: 1.2em; + color: #323232; + text-align: center; + padding: 2px 20px; + border-left: 1px solid #787878; + border-right: 1px solid #787878; + border-top: 1px solid #787878; + margin-bottom: -1px; +} +.prefs_tab_disabled { + background: #C0C8D6 url('../images/graphics/filter_bar.png') bottom repeat-x; + border-bottom: 1px solid #787878; +} +.prefs_tab_enabled { + background: none; + border-bottom: 1px solid #efefef; +} +div#stats_container h2.dialog_heading { + display: none; +} +div#stats_container div#stats_error { + display: none; + width: 395px; + margin: 6px auto 6px auto; + padding: 3px 0 3px 0; + border: 2px solid #cc3333; + color: #cc3333; + font-size: 1.2em; vertical-align: middle; + text-align: center; + height: 20px; + line-height: 20px; + background-color: #FFEFEF; } -#prefs_tabs { - border: 0px; +.stats_info_container { + clear: both; + padding: 0px 7px 0px 7px; +} +.stats_group { + display: table; + margin: 5px 0px 0px 0px; + padding: 5px 0px 0px 0px; + width: 100%; +} +.stats_row { + display: table-row; +} +.stats_row > div { + padding-top: 4px; +} +div#stats_container label.category { + clear: both; + font-size: 1.2em; + margin: 5px 0px; +} +div#stats_container div.item { + font-size: 11px !important; + margin: 0 5px 0 20px; + float: left; + width: 100px; +} +div#stats_container div.item2 { + font-size: 11px !important; + margin: 0 5px 0 20px; + float: left; +} +div#stats_container a { + clear: left; + margin: 10px 5px 10px 7px; +} + +div.dialog_container div#prefs_tabs ul li.prefs_tab_disabled:hover, +div.dialog_container div#prefs_tabs ul li.prefs_tab_disabled:active { + background: none; +} +div#prefs_container div#prefs_tabs div.prefs_tab { + border-top: 1px solid #787878; + clear: both; + padding: 7px; +} + +div#prefs_container div#pref_error { + display: none; + width: 395px; + margin: 6px auto 6px auto; + padding: 3px 0 3px 0; + border: 2px solid #cc3333; + color: #cc3333; + font-size: 1.2em; + vertical-align: middle; + text-align: center; + height: 20px; + line-height: 20px; + background-color: #FFEFEF; } #transmission_version{ diff --git a/web/stylesheets/ie7.css b/web/stylesheets/ie7.css index 044061b86..58ed180d0 100644 --- a/web/stylesheets/ie7.css +++ b/web/stylesheets/ie7.css @@ -58,3 +58,6 @@ div.torrent_footer ul#settings_menu li#button:hover { top: auto !important; bottom: 0px !important; } +.dialog_container{ + z-index: 4 +} diff --git a/web/stylesheets/iphone.css b/web/stylesheets/iphone.css index 9132da9d2..4c24dea46 100644 --- a/web/stylesheets/iphone.css +++ b/web/stylesheets/iphone.css @@ -26,22 +26,9 @@ body div#torrent_container { min-height: 295px; } -.ui-dialog-titlebar { - display: none; +body div.dialog_container { + min-height: 291px; } -.ui-dialog .ui-dialog-content { - padding: 0px; -} -.ui-tabs .ui-tabs-panel { - padding: 0px; -} -.dialog_col_1 { - width: 0px; -} -.dialog_col_3 { - width: 5px; -} - body div#torrent_inspector { min-height: 323px; @@ -51,11 +38,13 @@ body.landscape div#torrent_container { min-height: 147px; } -body.landscape body.landscape div#torrent_inspector { +body.landscape div#dialog_container, body.landscape div#torrent_inspector { min-height: 143px; } body.inspector_showing #torrent_filter_bar, body.inspector_showing #torrent_container, +body.dialog_showing #torrent_filter_bar, body.dialog_showing #torrent_container, body.dialog_showing #torrent_inspector, body.dialog_showing #prefs_container, +body.prefs_showing #torrent_inspector, body.prefs_showing #torrent_filter_bar, body.prefs_showing #torrent_container, body.open_showing #torrent_filter_bar, body.open_showing #torrent_container { display: none !important; } @@ -208,7 +197,6 @@ div#torrent_filter_bar { width: 100%; z-index: 2; text-align: center; - overflow: hidden; } div#torrent_filter_bar ul { @@ -255,10 +243,6 @@ div#torrent_filter_bar ul li.selected a { background-position: right top; } -div#torrent_filter_bar ul li a.finished { - display: none; -} - div#torrent_filter_bar input#torrent_search { position: absolute; height: 20px; @@ -387,10 +371,183 @@ ul.torrent_list li.torrent div.torrent_progress_bar.incomplete { margin-right: -10px; } +div.dialog_container { + background: rgba(0,0,0,0.85); + color: white; + padding: 15px 10px; +} + +div.dialog_container .dialog_window { + height: auto; + font-size: 13px; + text-shadow: black 1px 1px 1px !important; +} + +div#dialog_message.dialog_message { + width: 280px; + margin: 10px auto 25px; + font-size: 13px; + line-height: 14px; + word-wrap: break-word; + overflow: hidden; + padding-bottom: 0; +} + #torrent_upload_file, label[for="torrent_upload_file"]{ display:none; } +h2.dialog_heading { + text-align: center; + width: 300px; + margin: 0 auto; + font-size: 17px; +} + +div.dialog_container a { + color: white; + padding: 7px 0; + background: #222; + text-decoration: none; + border: 2px solid white; + margin: 5px 5px 0; + font-weight: bold; + -webkit-border-radius: 16px; + display: inline-block; + width: 90px; + font-size: 12px; + text-align: center; +} + +div.dialog_container a#dialog_cancel_button, div.dialog_container a#prefs_cancel_button { + left: 55px; +} + +div.dialog_container a#dialog_confirm_button, div.dialog_container a#prefs_save_button { + right: 55px; + color: black; + text-shadow: none; + background: #fff; +} + +#dialog_container div.dialog_window img { + margin: 5px auto 12px; +} + +.landscape div.dialog_container a#dialog_cancel_button { + left: 155px; +} + +.landscape div.dialog_container a#dialog_confirm_button { + right: 110px; +} + +.landscape div.dialog_container img { + float: left !important; + margin: 0 0 0 50px; +} + +.landscape h2#dialog_heading.dialog_heading { + margin: 5px auto 0; + margin-left: 150px; + text-align: left; +} + +.landscape div#dialog_message.dialog_message { + width: 300px; + margin: 10px 0 20px 150px; + text-align: left; +} + +/*-------------------------------------- + * + * P R E F S C O N T A I N E R + * + *--------------------------------------*/ + +div#prefs_container { + text-align: left; +} + +div#prefs_container label.item { + margin: 0 5px 0 15px; + float: left; +} + +form#prefs_form { + height: 365px; + padding: 0 5px; +} + +div#prefs_container label.suffix { + margin: 0 5px 0 10px; + float: left; +} + +div#prefs_container input { + float: left; +} + +div#prefs_container div.preference input[type=checkbox] { + margin: 3px 7px 0 16px; + width: 18px; + height: 18px; + clear: left; +} + +div#prefs_container label { + line-height: 25px; + display: block; +} + +div#prefs_container div.download_location label.item, +div#prefs_container div.port label.item, +div#prefs_container div.web_gui label.item { + width: 127px; + clear: left; +} + +div#prefs_container div.auto_start label.item, +div#prefs_container div.encryption label.item, +div#prefs_container div.limit_total label.item { + margin: 0 5px 0 0; +} + +div#prefs_container div.limit_total label.item { + width: 101px; +} + +div#prefs_container div.preference input[type=text] { + padding: 2px 2px 1px; + text-shadow: none !important; + font-size: 13px; + width: 50px; +} + +div#prefs_container div.download_location input { + position: absolute; + right: 20px; + left: 160px; + width: auto !important; +} + +div#prefs_container label.category { + clear: both; + font-weight: bold; +} + +div#prefs_container a { + margin-top: 42px !important; +} + +.landscape div.dialog_container a#prefs_cancel_button { + left: 135px; +} + +.landscape div.dialog_container a#prefs_save_button { + right: 135px; +} + /*-------------------------------------- * * T O R R E N T I N S P E C T O R @@ -676,7 +833,7 @@ div.torrent_footer a#preferences_link { margin: 1px 0 0 6px; } -body.prefs_showing div.torrent_footer a#preferences_link, div.torrent_footer a#preferences_link { +body.prefs_showing div.torrent_footer a#preferences_link, body.dialog_showing div.torrent_footer a#preferences_link { display: none; }