Add keyboard hotkeys for web interface

diff --git a/web/index.html b/web/index.html
index e3f131e70a7e7b0f66970c09b14c1551be7e3f5e..d99f35164b020af2e33ecc4936c880e4f2982d0e 100755 (executable)
--- a/web/index.html
+++ b/web/index.html
@@ -281,6 +281,83 @@
                        </div>
                </div>
 
+               <div class="ui-helper-hidden" id="hotkeys-dialog">
+                       <table>
+                               <thead>
+                               <tr>
+                                       <th>Key</th>
+                                       <th>Action</th>
+                               </tr>
+                               </thead>
+                               <tbody>
+                               <tr>
+                                       <td>/</td>
+                                       <td>Show hotkeys dialog</td>
+                               </tr>
+                               <tr>
+                                       <td>,</td>
+                                       <td>Open preferences</td>
+                               </tr>
+                               <tr>
+                                       <td>Enter</td>
+                                       <td>Confirm dialog</td>
+                               </tr>
+                               <tr>
+                                       <td>ESC</td>
+                                       <td>Close/cancel dialog</td>
+                               </tr>
+                               <tr>
+                                       <td>a</td>
+                                       <td>Select all torrents</td>
+                               </tr>
+                               <tr>
+                                       <td>SHIFT + a</td>
+                                       <td>Deselect all torrents</td>
+                               </tr>
+                               <tr>
+                                       <td>c</td>
+                                       <td>Toggle compact view</td>
+                               </tr>
+                               <tr>
+                                       <td>d</td>
+                                       <td>Delete selected torrents</td>
+                               </tr>
+                               <tr>
+                                       <td>Backspace</td>
+                                       <td>Delete selected torrents</td>
+                               </tr>
+                               <tr>
+                                       <td>DEL</td>
+                                       <td>Delete selected torrents</td>
+                               </tr>
+                               <tr>
+                                       <td>m</td>
+                                       <td>Move torrent/Set location</td>
+                               </tr>
+                               <tr>
+                                       <td>o</td>
+                                       <td>Add/open a torrent</td>
+                               </tr>
+                               <tr>
+                                       <td>u</td>
+                                       <td>Add/open a torrent</td>
+                               </tr>
+                               <tr>
+                                       <td>p</td>
+                                       <td>Pause selected torrents</td>
+                               </tr>
+                               <tr>
+                                       <td>r</td>
+                                       <td>Resume selected torrents</td>
+                               </tr>
+                               <tr>
+                                       <td>t</td>
+                                       <td>Toggle turtle mode</td>
+                               </tr>
+                               </tbody>
+                       </table>
+               </div>
+
                <div class="dialog_container ui-helper-hidden" id="upload_container">
                        <div class="dialog_top_bar"></div>
                        <div class="dialog_window">
@@ -348,6 +425,7 @@
                                <li id="tipjar">Transmission Tip Jar</li>
                                <li>---</li>
                                <li id="statistics">Statistics</li>
+                               <li id="hotkeys">Hotkeys</li>
                                <!--
                                <li id="toggle_notifications">Notifcations</li>
                                -->

diff --git a/web/javascript/transmission.js b/web/javascript/transmission.js
index 6502182a593d7b1fb314aa3ddd26bda8f5a1b54b..bf0ea998a73c266e3260cd5e437de1228158c29e 100644 (file)
--- a/web/javascript/transmission.js
+++ b/web/javascript/transmission.js
@@ -455,11 +455,111 @@ Transmission.prototype = {
     keyDown: function (ev) {
         var handled = false;
         var rows = this._rows;
-        var up = ev.keyCode === 38; // up key pressed
-        var dn = ev.keyCode === 40; // down key pressed
-        var shift = ev.keyCode === 16; // shift key pressed
+        var up_key = ev.keyCode === 38; // up key pressed
+        var dn_key = ev.keyCode === 40; // down key pressed
+        var a_key = ev.keyCode === 65; // a key pressed
+        var c_key = ev.keyCode === 67; // c key pressed
+        var d_key = ev.keyCode === 68; // d key pressed
+        var m_key = ev.keyCode === 77; // m key pressed
+        var o_key = ev.keyCode === 79; // o key pressed
+        var p_key = ev.keyCode === 80; // p key pressed
+        var r_key = ev.keyCode === 82; // r key pressed
+        var t_key = ev.keyCode === 84; // t key pressed
+        var u_key = ev.keyCode === 85; // u key pressed
+        var shift_key = ev.keyCode === 16; // shift key pressed
+        var slash_key = ev.keyCode === 191; // slash (/) key pressed
+        var backspace_key = ev.keyCode === 8; // backspace key pressed
+        var del_key = ev.keyCode === 46; // delete key pressed
+        var enter_key = ev.keyCode === 13; // enter key pressed
+        var esc_key = ev.keyCode === 27; // esc key pressed
+        var comma_key = ev.keyCode === 188; // comma key pressed
+
+        if ($('.dialog_heading:visible').length == 0) {
+            if (comma_key) {
+                this.togglePrefsDialogClicked();
+                handled = true;
+            }
+
+            if (a_key) {
+                if (ev.shiftKey) {
+                    this.deselectAll();
+                } else {
+                    this.selectAll();
+                }
+                handled = true;
+            }
+
+            if (c_key) {
+                this.toggleCompactClicked();
+                handled = true;
+            }
+
+            if ((backspace_key || del_key || d_key) && rows.length) {
+                this.removeSelectedTorrents();
+                handled = true;
+            }
+
+            if (m_key) {
+                this.moveSelectedTorrents()
+                handled = true;
+            }
+
+            if (o_key || u_key) {
+                $('body').addClass('open_showing');
+                this.uploadTorrentFile();
+                this.updateButtonStates();
+                handled = true;
+            }
+
+            if (p_key) {
+                this.stopSelectedTorrents();
+                handled = true;
+            }
+
+            if (r_key) {
+                this.startSelectedTorrents();
+                handled = true;
+            }
+
+            if (t_key) {
+                this.toggleTurtleClicked();
+                handled = true;
+            }
+        }
+
+        if (enter_key) {
+            // check if remove dialog
+            if ($('.dialog_heading:visible').text().match("Remove") != null) {
+                $("#dialog_confirm_button").click();
+                handled = true;
+            }
+
+            // check if upload torrent dialog
+            if ($('.dialog_heading:visible').text() == "Upload Torrent Files") {
+                this.confirmUploadClicked();
+                handled = true;
+            }
+
+            // check if location dialog
+            if ($('.dialog_heading:visible').text() == "Set Location") {
+                this.confirmMoveClicked();
+                handled = true;
+            }
+        }
+
+        if (slash_key) {
+            this.showHotkeysDialog();
+            handled = true;
+        }
+
+        if (esc_key) {
+            this.hideMoveDialog();
+            this.hideUploadDialog();
+            dialog.hideDialog();
+            handled = true;
+        }
 
-        if ((up || dn) && rows.length) {
+        if ((up_key || dn_key) && rows.length) {
             var last = this.indexOfLastTorrent(),
                 i = last,
                 anchor = this._shift_index,
@@ -467,9 +567,9 @@ Transmission.prototype = {
                 min = 0,
                 max = rows.length - 1;
 
-            if (dn && (i + 1 <= max)) {
+            if (dn_key && (i + 1 <= max)) {
                 ++i;
-            } else if (up && (i - 1 >= min)) {
+            } else if (up_key && (i - 1 >= min)) {
                 --i;
             };
 
@@ -493,7 +593,7 @@ Transmission.prototype = {
             this._last_torrent_clicked = r.getTorrentId();
             this.scrollToRow(r);
             handled = true;
-        } else if (shift) {
+        } else if (shift_key) {
             this._shift_index = this.indexOfLastTorrent();
         }
 
@@ -722,6 +822,10 @@ Transmission.prototype = {
                 this.showStatsDialog();
                 break;
 
+            case 'hotkeys':
+                this.showHotkeysDialog();
+                break;
+
             case 'about-button':
                 o = 'Transmission ' + this.serverVersion;
                 $('#about-dialog #about-title').html(o);
@@ -1764,5 +1868,18 @@ Transmission.prototype = {
     onStatsDialogClosed: function () {
         this.hideMobileAddressbar();
         this.togglePeriodicStatsRefresh(false);
+    },
+
+    /***
+     ****
+     ****  Hotkeys
+     ****
+     ***/
+    showHotkeysDialog: function () {
+        $('#hotkeys-dialog').dialog({
+            title: 'Hotkeys',
+            show: 'fade',
+            hide: 'fade'
+        });
     }
 };

diff --git a/web/style/transmission/common.css b/web/style/transmission/common.css
index 1f6d8d82d70de4acf3b343d3f1ccd164740f7db1..1fc2d97bd4168583f701f975bda5b53778ac459d 100644 (file)
--- a/web/style/transmission/common.css
+++ b/web/style/transmission/common.css
@@ -38,6 +38,17 @@ body {
   font-size: 1.3em;
   font-weight: bold; }
 
+/***
+****
+****  HOTKEYS DIALOG
+****
+***/
+#hotkeys-dialog table {
+  width: 100%;
+  border-collapse: collapse; }
+  #hotkeys-dialog table th, #hotkeys-dialog table td {
+    border: 1px solid #AAA; }
+
 /***
 ****
 ****  TOOLBAR
@@ -50,12 +61,12 @@ div#toolbar {
   padding: 2px;
   border-bottom: 1px solid #AAA;
   background-color: #cccccc;
-  background-image: -webkit-gradient(linear, left top, left bottom, from(#dddddd), to(#bbbbbb));
-  background-image: -webkit-linear-gradient(top, #dddddd, #bbbbbb);
-  background-image: -moz-linear-gradient(top, #dddddd, #bbbbbb);
-  background-image: -ms-linear-gradient(top, #dddddd, #bbbbbb);
-  background-image: -o-linear-gradient(top, #dddddd, #bbbbbb);
-  background-image: linear-gradient(top, #dddddd, #bbbbbb); }
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#ddd), to(#bbb));
+  background-image: -webkit-linear-gradient(top, #ddd, #bbb);
+  background-image: -moz-linear-gradient(top, #ddd, #bbb);
+  background-image: -ms-linear-gradient(top, #ddd, #bbb);
+  background-image: -o-linear-gradient(top, #ddd, #bbb);
+  background-image: linear-gradient(top, #ddd, #bbb); }
   div#toolbar > * {
     cursor: pointer;
     -moz-user-select: none;
@@ -109,12 +120,12 @@ div#toolbar {
   overflow: hidden;
   position: relative;
   background-color: #cccccc;
-  background-image: -webkit-gradient(linear, left top, left bottom, from(#dddddd), to(#bbbbbb));
-  background-image: -webkit-linear-gradient(top, #dddddd, #bbbbbb);
-  background-image: -moz-linear-gradient(top, #dddddd, #bbbbbb);
-  background-image: -ms-linear-gradient(top, #dddddd, #bbbbbb);
-  background-image: -o-linear-gradient(top, #dddddd, #bbbbbb);
-  background-image: linear-gradient(top, #dddddd, #bbbbbb); }
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#ddd), to(#bbb));
+  background-image: -webkit-linear-gradient(top, #ddd, #bbb);
+  background-image: -moz-linear-gradient(top, #ddd, #bbb);
+  background-image: -ms-linear-gradient(top, #ddd, #bbb);
+  background-image: -o-linear-gradient(top, #ddd, #bbb);
+  background-image: linear-gradient(top, #ddd, #bbb); }
   #statusbar #filter {
     float: left;
     margin-left: 5px; }
@@ -396,15 +407,15 @@ div#torrent_inspector {
         background-color: #dddddd;
         background-image: url("images/inspector-info.png");
         /* fallback */
-        background-image: url("images/inspector-info.png"), -webkit-gradient(linear, left top, left bottom, from(white), to(#bbbbbb));
+        background-image: url("images/inspector-info.png"), -webkit-gradient(linear, left top, left bottom, from(white), to(#BBB));
         /* Saf4+, Chrome */
-        background-image: url("images/inspector-info.png"), -webkit-linear-gradient(top, white, #bbbbbb);
+        background-image: url("images/inspector-info.png"), -webkit-linear-gradient(top, white, #BBB);
         /* Chrome 10+, Saf5.1+ */
-        background-image: url("images/inspector-info.png"), -moz-linear-gradient(top, white, #bbbbbb);
+        background-image: url("images/inspector-info.png"), -moz-linear-gradient(top, white, #BBB);
         /* FF3.6+ */
-        background-image: url("images/inspector-info.png"), -ms-linear-gradient(top, white, #bbbbbb);
+        background-image: url("images/inspector-info.png"), -ms-linear-gradient(top, white, #BBB);
         /* IE10 */
-        background-image: url("images/inspector-info.png"), -o-linear-gradient(top, white, #bbbbbb);
+        background-image: url("images/inspector-info.png"), -o-linear-gradient(top, white, #BBB);
         /* Opera 11.10+ */
         background-position: center;
         background-repeat: no-repeat;
@@ -429,15 +440,15 @@ div#torrent_inspector {
         background-color: #dddddd;
         background-image: url("images/inspector-peers.png");
         /* fallback */
-        background-image: url("images/inspector-peers.png"), -webkit-gradient(linear, left top, left bottom, from(white), to(#bbbbbb));
+        background-image: url("images/inspector-peers.png"), -webkit-gradient(linear, left top, left bottom, from(white), to(#BBB));
         /* Saf4+, Chrome */
-        background-image: url("images/inspector-peers.png"), -webkit-linear-gradient(top, white, #bbbbbb);
+        background-image: url("images/inspector-peers.png"), -webkit-linear-gradient(top, white, #BBB);
         /* Chrome 10+, Saf5.1+ */
-        background-image: url("images/inspector-peers.png"), -moz-linear-gradient(top, white, #bbbbbb);
+        background-image: url("images/inspector-peers.png"), -moz-linear-gradient(top, white, #BBB);
         /* FF3.6+ */
-        background-image: url("images/inspector-peers.png"), -ms-linear-gradient(top, white, #bbbbbb);
+        background-image: url("images/inspector-peers.png"), -ms-linear-gradient(top, white, #BBB);
         /* IE10 */
-        background-image: url("images/inspector-peers.png"), -o-linear-gradient(top, white, #bbbbbb);
+        background-image: url("images/inspector-peers.png"), -o-linear-gradient(top, white, #BBB);
         /* Opera 11.10+ */
         background-position: center;
         background-repeat: no-repeat; }
@@ -461,15 +472,15 @@ div#torrent_inspector {
         background-color: #dddddd;
         background-image: url("images/inspector-trackers.png");
         /* fallback */
-        background-image: url("images/inspector-trackers.png"), -webkit-gradient(linear, left top, left bottom, from(white), to(#bbbbbb));
+        background-image: url("images/inspector-trackers.png"), -webkit-gradient(linear, left top, left bottom, from(white), to(#BBB));
         /* Saf4+, Chrome */
-        background-image: url("images/inspector-trackers.png"), -webkit-linear-gradient(top, white, #bbbbbb);
+        background-image: url("images/inspector-trackers.png"), -webkit-linear-gradient(top, white, #BBB);
         /* Chrome 10+, Saf5.1+ */
-        background-image: url("images/inspector-trackers.png"), -moz-linear-gradient(top, white, #bbbbbb);
+        background-image: url("images/inspector-trackers.png"), -moz-linear-gradient(top, white, #BBB);
         /* FF3.6+ */
-        background-image: url("images/inspector-trackers.png"), -ms-linear-gradient(top, white, #bbbbbb);
+        background-image: url("images/inspector-trackers.png"), -ms-linear-gradient(top, white, #BBB);
         /* IE10 */
-        background-image: url("images/inspector-trackers.png"), -o-linear-gradient(top, white, #bbbbbb);
+        background-image: url("images/inspector-trackers.png"), -o-linear-gradient(top, white, #BBB);
         /* Opera 11.10+ */
         background-position: center;
         background-repeat: no-repeat; }
@@ -497,15 +508,15 @@ div#torrent_inspector {
         background-color: #dddddd;
         background-image: url("images/inspector-files.png");
         /* fallback */
-        background-image: url("images/inspector-files.png"), -webkit-gradient(linear, left top, left bottom, from(white), to(#bbbbbb));
+        background-image: url("images/inspector-files.png"), -webkit-gradient(linear, left top, left bottom, from(white), to(#BBB));
         /* Saf4+, Chrome */
-        background-image: url("images/inspector-files.png"), -webkit-linear-gradient(top, white, #bbbbbb);
+        background-image: url("images/inspector-files.png"), -webkit-linear-gradient(top, white, #BBB);
         /* Chrome 10+, Saf5.1+ */
-        background-image: url("images/inspector-files.png"), -moz-linear-gradient(top, white, #bbbbbb);
+        background-image: url("images/inspector-files.png"), -moz-linear-gradient(top, white, #BBB);
         /* FF3.6+ */
-        background-image: url("images/inspector-files.png"), -ms-linear-gradient(top, white, #bbbbbb);
+        background-image: url("images/inspector-files.png"), -ms-linear-gradient(top, white, #BBB);
         /* IE10 */
-        background-image: url("images/inspector-files.png"), -o-linear-gradient(top, white, #bbbbbb);
+        background-image: url("images/inspector-files.png"), -o-linear-gradient(top, white, #BBB);
         /* Opera 11.10+ */
         background-position: center;
         background-repeat: no-repeat; }
@@ -673,18 +684,18 @@ div.file-priority-radiobox {
     -moz-border-radius-bottomleft: 5px;
     border-top-left-radius: 5px;
     border-bottom-left-radius: 5px;
-    background-color: #dcdcdc;
+    background-color: #dddddd;
     background-image: url("images/file-priority-low.png");
     /* fallback */
-    background-image: url("images/file-priority-low.png"), -webkit-gradient(linear, left top, left bottom, from(#f1f1f1), to(#c8c8c8));
+    background-image: url("images/file-priority-low.png"), -webkit-gradient(linear, left top, left bottom, from(#f1f1f1), to(#c9c9c9));
     /* Saf4+, Chrome */
-    background-image: url("images/file-priority-low.png"), -webkit-linear-gradient(top, #f1f1f1, #c8c8c8);
+    background-image: url("images/file-priority-low.png"), -webkit-linear-gradient(top, #f1f1f1, #c9c9c9);
     /* Chrome 10+, Saf5.1+ */
-    background-image: url("images/file-priority-low.png"), -moz-linear-gradient(top, #f1f1f1, #c8c8c8);
+    background-image: url("images/file-priority-low.png"), -moz-linear-gradient(top, #f1f1f1, #c9c9c9);
     /* FF3.6+ */
-    background-image: url("images/file-priority-low.png"), -ms-linear-gradient(top, #f1f1f1, #c8c8c8);
+    background-image: url("images/file-priority-low.png"), -ms-linear-gradient(top, #f1f1f1, #c9c9c9);
     /* IE10 */
-    background-image: url("images/file-priority-low.png"), -o-linear-gradient(top, #f1f1f1, #c8c8c8);
+    background-image: url("images/file-priority-low.png"), -o-linear-gradient(top, #f1f1f1, #c9c9c9);
     /* Opera 11.10+ */
     background-position: center;
     background-repeat: no-repeat;
@@ -706,18 +717,18 @@ div.file-priority-radiobox {
       background-position: center;
       background-repeat: no-repeat; }
   div.file-priority-radiobox > div.normal {
-    background-color: #dcdcdc;
+    background-color: #dddddd;
     background-image: url("images/file-priority-normal.png");
     /* fallback */
-    background-image: url("images/file-priority-normal.png"), -webkit-gradient(linear, left top, left bottom, from(#f1f1f1), to(#c8c8c8));
+    background-image: url("images/file-priority-normal.png"), -webkit-gradient(linear, left top, left bottom, from(#f1f1f1), to(#c9c9c9));
     /* Saf4+, Chrome */
-    background-image: url("images/file-priority-normal.png"), -webkit-linear-gradient(top, #f1f1f1, #c8c8c8);
+    background-image: url("images/file-priority-normal.png"), -webkit-linear-gradient(top, #f1f1f1, #c9c9c9);
     /* Chrome 10+, Saf5.1+ */
-    background-image: url("images/file-priority-normal.png"), -moz-linear-gradient(top, #f1f1f1, #c8c8c8);
+    background-image: url("images/file-priority-normal.png"), -moz-linear-gradient(top, #f1f1f1, #c9c9c9);
     /* FF3.6+ */
-    background-image: url("images/file-priority-normal.png"), -ms-linear-gradient(top, #f1f1f1, #c8c8c8);
+    background-image: url("images/file-priority-normal.png"), -ms-linear-gradient(top, #f1f1f1, #c9c9c9);
     /* IE10 */
-    background-image: url("images/file-priority-normal.png"), -o-linear-gradient(top, #f1f1f1, #c8c8c8);
+    background-image: url("images/file-priority-normal.png"), -o-linear-gradient(top, #f1f1f1, #c9c9c9);
     /* Opera 11.10+ */
     background-position: center;
     background-repeat: no-repeat; }
@@ -742,18 +753,18 @@ div.file-priority-radiobox {
     -moz-border-radius-bottomright: 5px;
     border-top-right-radius: 5px;
     border-bottom-right-radius: 5px;
-    background-color: #dcdcdc;
+    background-color: #dddddd;
     background-image: url("images/file-priority-high.png");
     /* fallback */
-    background-image: url("images/file-priority-high.png"), -webkit-gradient(linear, left top, left bottom, from(#f1f1f1), to(#c8c8c8));
+    background-image: url("images/file-priority-high.png"), -webkit-gradient(linear, left top, left bottom, from(#f1f1f1), to(#c9c9c9));
     /* Saf4+, Chrome */
-    background-image: url("images/file-priority-high.png"), -webkit-linear-gradient(top, #f1f1f1, #c8c8c8);
+    background-image: url("images/file-priority-high.png"), -webkit-linear-gradient(top, #f1f1f1, #c9c9c9);
     /* Chrome 10+, Saf5.1+ */
-    background-image: url("images/file-priority-high.png"), -moz-linear-gradient(top, #f1f1f1, #c8c8c8);
+    background-image: url("images/file-priority-high.png"), -moz-linear-gradient(top, #f1f1f1, #c9c9c9);
     /* FF3.6+ */
-    background-image: url("images/file-priority-high.png"), -ms-linear-gradient(top, #f1f1f1, #c8c8c8);
+    background-image: url("images/file-priority-high.png"), -ms-linear-gradient(top, #f1f1f1, #c9c9c9);
     /* IE10 */
-    background-image: url("images/file-priority-high.png"), -o-linear-gradient(top, #f1f1f1, #c8c8c8);
+    background-image: url("images/file-priority-high.png"), -o-linear-gradient(top, #f1f1f1, #c9c9c9);
     /* Opera 11.10+ */
     background-position: center;
     background-repeat: no-repeat;
@@ -788,12 +799,12 @@ div.torrent_footer {
   width: 100%;
   z-index: 3;
   background-color: #cccccc;
-  background-image: -webkit-gradient(linear, left top, left bottom, from(#dddddd), to(#bbbbbb));
-  background-image: -webkit-linear-gradient(top, #dddddd, #bbbbbb);
-  background-image: -moz-linear-gradient(top, #dddddd, #bbbbbb);
-  background-image: -ms-linear-gradient(top, #dddddd, #bbbbbb);
-  background-image: -o-linear-gradient(top, #dddddd, #bbbbbb);
-  background-image: linear-gradient(top, #dddddd, #bbbbbb); }
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#ddd), to(#bbb));
+  background-image: -webkit-linear-gradient(top, #ddd, #bbb);
+  background-image: -moz-linear-gradient(top, #ddd, #bbb);
+  background-image: -ms-linear-gradient(top, #ddd, #bbb);
+  background-image: -o-linear-gradient(top, #ddd, #bbb);
+  background-image: linear-gradient(top, #ddd, #bbb); }
   div.torrent_footer > div {
     float: left;
     margin: 2px 4px;
@@ -810,15 +821,15 @@ div.torrent_footer {
     background-color: #dddddd;
     background-image: url("images/settings.png");
     /* fallback */
-    background-image: url("images/settings.png"), -webkit-gradient(linear, left top, left bottom, from(white), to(#bbbbbb));
+    background-image: url("images/settings.png"), -webkit-gradient(linear, left top, left bottom, from(white), to(#BBB));
     /* Saf4+, Chrome */
-    background-image: url("images/settings.png"), -webkit-linear-gradient(top, white, #bbbbbb);
+    background-image: url("images/settings.png"), -webkit-linear-gradient(top, white, #BBB);
     /* Chrome 10+, Saf5.1+ */
-    background-image: url("images/settings.png"), -moz-linear-gradient(top, white, #bbbbbb);
+    background-image: url("images/settings.png"), -moz-linear-gradient(top, white, #BBB);
     /* FF3.6+ */
-    background-image: url("images/settings.png"), -ms-linear-gradient(top, white, #bbbbbb);
+    background-image: url("images/settings.png"), -ms-linear-gradient(top, white, #BBB);
     /* IE10 */
-    background-image: url("images/settings.png"), -o-linear-gradient(top, white, #bbbbbb);
+    background-image: url("images/settings.png"), -o-linear-gradient(top, white, #BBB);
     /* Opera 11.10+ */
     background-position: center;
     background-repeat: no-repeat; }
@@ -844,15 +855,15 @@ div.torrent_footer {
     background-color: #dddddd;
     background-image: url("images/wrench.png");
     /* fallback */
-    background-image: url("images/wrench.png"), -webkit-gradient(linear, left top, left bottom, from(white), to(#bbbbbb));
+    background-image: url("images/wrench.png"), -webkit-gradient(linear, left top, left bottom, from(white), to(#BBB));
     /* Saf4+, Chrome */
-    background-image: url("images/wrench.png"), -webkit-linear-gradient(top, white, #bbbbbb);
+    background-image: url("images/wrench.png"), -webkit-linear-gradient(top, white, #BBB);
     /* Chrome 10+, Saf5.1+ */
-    background-image: url("images/wrench.png"), -moz-linear-gradient(top, white, #bbbbbb);
+    background-image: url("images/wrench.png"), -moz-linear-gradient(top, white, #BBB);
     /* FF3.6+ */
-    background-image: url("images/wrench.png"), -ms-linear-gradient(top, white, #bbbbbb);
+    background-image: url("images/wrench.png"), -ms-linear-gradient(top, white, #BBB);
     /* IE10 */
-    background-image: url("images/wrench.png"), -o-linear-gradient(top, white, #bbbbbb);
+    background-image: url("images/wrench.png"), -o-linear-gradient(top, white, #BBB);
     /* Opera 11.10+ */
     background-position: center;
     background-repeat: no-repeat; }
@@ -878,15 +889,15 @@ div.torrent_footer {
     background-color: #dddddd;
     background-image: url("images/turtle.png");
     /* fallback */
-    background-image: url("images/turtle.png"), -webkit-gradient(linear, left top, left bottom, from(white), to(#bbbbbb));
+    background-image: url("images/turtle.png"), -webkit-gradient(linear, left top, left bottom, from(white), to(#BBB));
     /* Saf4+, Chrome */
-    background-image: url("images/turtle.png"), -webkit-linear-gradient(top, white, #bbbbbb);
+    background-image: url("images/turtle.png"), -webkit-linear-gradient(top, white, #BBB);
     /* Chrome 10+, Saf5.1+ */
-    background-image: url("images/turtle.png"), -moz-linear-gradient(top, white, #bbbbbb);
+    background-image: url("images/turtle.png"), -moz-linear-gradient(top, white, #BBB);
     /* FF3.6+ */
-    background-image: url("images/turtle.png"), -ms-linear-gradient(top, white, #bbbbbb);
+    background-image: url("images/turtle.png"), -ms-linear-gradient(top, white, #BBB);
     /* IE10 */
-    background-image: url("images/turtle.png"), -o-linear-gradient(top, white, #bbbbbb);
+    background-image: url("images/turtle.png"), -o-linear-gradient(top, white, #BBB);
     /* Opera 11.10+ */
     background-position: center;
     background-repeat: no-repeat; }
@@ -928,15 +939,15 @@ div.torrent_footer {
     background-color: #dddddd;
     background-image: url("images/compact.png");
     /* fallback */
-    background-image: url("images/compact.png"), -webkit-gradient(linear, left top, left bottom, from(white), to(#bbbbbb));
+    background-image: url("images/compact.png"), -webkit-gradient(linear, left top, left bottom, from(white), to(#BBB));
     /* Saf4+, Chrome */
-    background-image: url("images/compact.png"), -webkit-linear-gradient(top, white, #bbbbbb);
+    background-image: url("images/compact.png"), -webkit-linear-gradient(top, white, #BBB);
     /* Chrome 10+, Saf5.1+ */
-    background-image: url("images/compact.png"), -moz-linear-gradient(top, white, #bbbbbb);
+    background-image: url("images/compact.png"), -moz-linear-gradient(top, white, #BBB);
     /* FF3.6+ */
-    background-image: url("images/compact.png"), -ms-linear-gradient(top, white, #bbbbbb);
+    background-image: url("images/compact.png"), -ms-linear-gradient(top, white, #BBB);
     /* IE10 */
-    background-image: url("images/compact.png"), -o-linear-gradient(top, white, #bbbbbb);
+    background-image: url("images/compact.png"), -o-linear-gradient(top, white, #BBB);
     /* Opera 11.10+ */
     background-position: center;
     background-repeat: no-repeat; }
@@ -956,6 +967,11 @@ div.torrent_footer {
       /* Opera 11.10+ */
       background-position: center;
       background-repeat: no-repeat; }
+  div.torrent_footer #freespace-info {
+    float: right;
+    text-align: right;
+    border: 0px;
+    width: 100px; }
 
 /****
 *****
@@ -986,7 +1002,7 @@ div.dialog_container div.dialog_window {
   -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.7);
   top: 80px; }
 
-@media screen and (-webkit-min-device-pixel-ratio:0) {
+@media screen and (-webkit-min-device-pixel-ratio: 0) {
   div.dialog_container div.dialog_window {
     top: 0;
     margin-top: 71px; } }
@@ -1031,7 +1047,7 @@ div.dialog_container div.dialog_window a {
 
 div.dialog_container div.dialog_window a:hover,
 div.dialog_container div.dialog_window a:active {
-  background: #c0c8d6 url("images/filter_bar.png") bottom repeat-x; }
+  background: #C0C8D6 url("images/filter_bar.png") bottom repeat-x; }
 
 div#upload_container div.dialog_window div.dialog_message label {
   margin-top: 15px;

diff --git a/web/style/transmission/common.scss b/web/style/transmission/common.scss
index 11094b1f1905e26aa35fb095ca8f8c1dfb05a960..e0f2baf996596e43fb05841aaa1889f019e76533 100644 (file)
--- a/web/style/transmission/common.scss
+++ b/web/style/transmission/common.scss
@@ -1,10 +1,10 @@
 @mixin verticalGradient($topColor, $bottomColor) {
        background-color: mix($topColor, $bottomColor);
-       background-image: -webkit-gradient(linear, left top, left bottom, from($topColor), to($bottomColor)); 
-       background-image: -webkit-linear-gradient(top, $topColor, $bottomColor); 
-       background-image:    -moz-linear-gradient(top, $topColor, $bottomColor); 
-       background-image:     -ms-linear-gradient(top, $topColor, $bottomColor); 
-       background-image:      -o-linear-gradient(top, $topColor, $bottomColor); 
+       background-image: -webkit-gradient(linear, left top, left bottom, from($topColor), to($bottomColor));
+       background-image: -webkit-linear-gradient(top, $topColor, $bottomColor);
+       background-image:    -moz-linear-gradient(top, $topColor, $bottomColor);
+       background-image:     -ms-linear-gradient(top, $topColor, $bottomColor);
+       background-image:      -o-linear-gradient(top, $topColor, $bottomColor);
        background-image:         linear-gradient(top, $topColor, $bottomColor);
 }
 
@@ -113,6 +113,24 @@ body {
        }
 }
 
+/***
+****
+****  HOTKEYS DIALOG
+****
+***/
+
+#hotkeys-dialog {
+       table {
+               width: 100%;
+               border-collapse: collapse;
+
+               th, td {
+                       border: 1px solid #AAA;
+               }
+       }
+}
+
+
 /***
 ****
 ****  TOOLBAR
@@ -305,10 +323,10 @@ ul.torrent_list
                                height: 14px;
                                width: 14px;
                        }
-       
+
                        div.torrent_pause { background-position: left top; }
                        div.torrent_resume { background-position: center top; }
-       
+
                        &:active {
                                div.torrent_pause { background-position: left bottom; }
                                div.torrent_resume { background-position: center bottom; }
@@ -641,7 +659,7 @@ div#torrent_inspector
 
        div.inspector_torrent_file_list_entry_name {
                font-size: 1.2em;
-               color: black; 
+               color: black;
                display: inline;
                margin-left: 0px;
        }