(trunk web) changes to clutch's file priority UI:

1. use form checkboxes for the 'file wanted' toggle
2. remove unused file_wanted_buttons.png
3. narrow the priority buttons a little
4. narrow the priority buttons' gradient range by about 2/3 so that the colors don't look harsh when there is row after row of priority buttons

diff --git a/web/index.html b/web/index.html
index f79fbb333f10a24a0efb25d8984e1fff3a7d62be..e743e385ffb174c3694bf3acba5eba582be61022 100755 (executable)
--- a/web/index.html
+++ b/web/index.html
@@ -300,11 +300,6 @@
                        </div><!-- id="inspector_tab_trackers_container" -->
 
                        <div style="display:none;" class="inspector-page" id="inspector-page-files">
-                               <div class="inspector_group">
-                                       <div id="select_all_button_container">
-                                               <div id="files_deselect_all" class="select_all_button">Deselect All</div>
-                                               <div id="files_select_all" class="select_all_button">Select All</div>
-                                       </div>
                                        <ul id="inspector_file_list">
                                        </ul>
                                </div>

diff --git a/web/javascript/file-row.js b/web/javascript/file-row.js
index e034285d7bf406ddae9097914647a875791560eb..03ea07d70b9e814e3b70db6b86a9093b4b548134 100644 (file)
--- a/web/javascript/file-row.js
+++ b/web/javascript/file-row.js
@@ -56,6 +56,7 @@ function FileRow(torrent, i)
                var e = $(elements.root);
                e.toggleClass('skip', !fields.isWanted);
                e.toggleClass('complete', isDone());
+               $(e[0].checkbox).prop('checked', fields.isWanted);
        },
        refreshPriorityHTML = function()
        {
@@ -99,9 +100,12 @@ function FileRow(torrent, i)
                root.className = 'inspector_torrent_file_list_entry ' + ((i%2)?'odd':'even');
                elements.root = root;
 
-               e = document.createElement('div');
+               e = document.createElement('input');
+               e.type = 'checkbox';
                e.className = "file_wanted_control";
-               $(e).click(function(){ fireWantedChanged(!fields.isWanted); });
+               e.title = 'Download file';
+               $(e).change(function(ev){ fireWantedChanged( $(ev.currentTarget).prop('checked')); });
+               root.checkbox = e;
                root.appendChild(e);
 
                e = document.createElement('div');

diff --git a/web/javascript/inspector.js b/web/javascript/inspector.js
index 05d3a5bfcacf4462e65ac1e41225518f00c99326..7d8a779d1af9af120b22b082165555678cd80b18 100644 (file)
--- a/web/javascript/inspector.js
+++ b/web/javascript/inspector.js
@@ -208,19 +208,6 @@ function Inspector(controller) {
     *****  FILES PAGE
     ****/
 
-    filesSelectAllClicked = function() { filesAllClicked(true); },
-    filesDeselectAllClicked = function() { filesAllClicked(false); },
-    filesAllClicked = function(s) {
-        var i, row, rows=[], t=data.file_torrent;
-        if (!t)
-            return;
-        for (i=0; row=data.file_rows[i]; ++i)
-            if (row.isEditable() && (t.getFile(i).wanted !== s))
-                rows.push(row);
-        if (rows.length > 0)
-            changeFileCommand(rows, s?'files-wanted':'files-unwanted');
-    },
-
     changeFileCommand = function(rows, command) {
         var torrentId = data.file_torrent.getId();
         var rowIndices = $.map(rows.slice(0),function (row) {return row.getIndex();});
@@ -461,8 +448,6 @@ function Inspector(controller) {
         data.controller = controller;
 
         $('.inspector-tab').click(onTabClicked);
-        $('#files_select_all').click(filesSelectAllClicked);
-        $('#files_deselect_all').click(filesDeselectAllClicked);
 
         data.elements.info_page      = $('#inspector-page-info')[0];
         data.elements.files_page     = $('#inspector-page-files')[0];

diff --git a/web/style/transmission/common.css b/web/style/transmission/common.css
index 06c049ee4f796982c30692d33ee71c9d8e626ee8..2313225e99e4b0a43e8336a13415b2cfd75dbdfe 100644 (file)
--- a/web/style/transmission/common.css
+++ b/web/style/transmission/common.css
@@ -183,15 +183,13 @@ div#torrent_inspector li.inspector_tracker_entry { padding: 3px 0 3px 2px; displ
 div#torrent_inspector li.inspector_tracker_entry.odd { background-color: #EEEEEE; }
 div#torrent_inspector div.tracker_host { font-size: 1.2em; font-weight: bold; color: #222; }
 div#torrent_inspector #inspector_file_list { padding: 0 0 0 0; margin: 0 0 0 0; text-align: left; cursor: default; overflow: hidden; }
-div#torrent_inspector #inspector-page-files .select_all_button { background-color: #dddddd; background-image: -webkit-gradient(linear, left top, left bottom, from(white), to(#bbbbbb)); background-image: -webkit-linear-gradient(top, white, #bbbbbb); background-image: -moz-linear-gradient(top, white, #bbbbbb); background-image: -ms-linear-gradient(top, white, #bbbbbb); background-image: -o-linear-gradient(top, white, #bbbbbb); background-image: linear-gradient(top, white, #bbbbbb); cursor: pointer; -moz-user-select: none; -webkit-user-select: none; display: inline-block; border-style: solid; border-color: #aaa; border-width: 1px; padding: 3px; border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-bottomleft: 5px; -moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 5px; float: left; margin: 5px; padding: 2px 5px; }
-div#torrent_inspector #inspector_file_list { width: 100%; margin: 0  0 0 0; padding-bottom: 10px; text-align: left; display: block; cursor: default; list-style-type: none; list-style: none; list-style-image: none; clear: both; }
+div#torrent_inspector #inspector_file_list { border-top: 1px solid #888; width: 100%; margin: 6px 0 0 0; padding-top: 6px; padding-bottom: 10px; text-align: left; display: block; cursor: default; list-style-type: none; list-style: none; list-style-image: none; clear: both; }
 div#torrent_inspector li.inspector_torrent_file_list_entry { padding: 3px 0 3px 2px; display: block; }
 div#torrent_inspector li.inspector_torrent_file_list_entry.skip { color: #666; }
 div#torrent_inspector li.inspector_torrent_file_list_entry.even { background-color: #EEEEEE; }
-div#torrent_inspector div.inspector_torrent_file_list_entry_name { font-size: 1.2em; font-weight: bold; color: #222; margin-left: 20px; }
-div#torrent_inspector li.inspector_torrent_file_list_entry.skip > .inspector_torrent_file_list_entry_name { color: #666; }
-div#torrent_inspector div.inspector_torrent_file_list_entry_progress { font-size: 1em; color: #666; margin-left: 20px; }
-div#torrent_inspector div.file_wanted_control { background-position: left -19px; float: left; position: absolute; cursor: pointer; margin: 3px 0 0 0; width: 19px; height: 19px; background-image: url("images/buttons/file_wanted_buttons.png"); background-repeat: no-repeat; background-color: transparent; }
+div#torrent_inspector div.inspector_torrent_file_list_entry_name { font-size: 1.2em; color: black; display: inline; margin-left: 0px; }
+div#torrent_inspector li.inspector_torrent_file_list_entry.skip > .inspector_torrent_file_list_entry_name { color: #999; }
+div#torrent_inspector div.inspector_torrent_file_list_entry_progress { color: #999; margin-left: 20px; }
 div#torrent_inspector li.inspector_torrent_file_list_entry.skip > .file_wanted_control { background-position: left top; }
 div#torrent_inspector li.inspector_torrent_file_list_entry.complete > .file_wanted_control { background-position: left -19px; }
 div#torrent_inspector ul.single_file li.inspector_torrent_file_list_entry > .file_wanted_control, div#torrent_inspector li.inspector_torrent_file_list_entry.complete > .file_wanted_control { background-position: left -38px; cursor: default; }
@@ -216,13 +214,13 @@ tr.inspector_peer_entry.odd { background-color: #EEEEEE; }
 ****  File Priority Buttons
 ***/
 div.file-priority-radiobox { display: inline; float: right; margin: 4px; margin-top: 2px; }
-div.file-priority-radiobox > * { cursor: pointer; -moz-user-select: none; -webkit-user-select: none; display: inline-block; border-style: solid; border-color: #aaa; border-width: 1px; padding: 3px; width: 30px; height: 12px; }
-div.file-priority-radiobox > div.low { -moz-border-radius-topleft: 5px; -moz-border-radius-bottomleft: 5px; border-top-left-radius: 5px; border-bottom-left-radius: 5px; 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(white), to(#bbbbbb)); /* Saf4+, Chrome */ background-image: url("images/file-priority-low.png"), -webkit-linear-gradient(top, white, #bbbbbb); /* Chrome 10+, Saf5.1+ */ background-image: url("images/file-priority-low.png"), -moz-linear-gradient(top, white, #bbbbbb); /* FF3.6+ */ background-image: url("images/file-priority-low.png"), -ms-linear-gradient(top, white, #bbbbbb); /* IE10 */ background-image: url("images/file-priority-low.png"), -o-linear-gradient(top, white, #bbbbbb); /* Opera 11.10+ */ background-image: url("images/file-priority-low.png"), linear-gradient(top, white, #bbbbbb); /* W3C */ background-position: center; background-repeat: no-repeat; border-right-width: 0px; }
-div.file-priority-radiobox > div.low:active, div.file-priority-radiobox > div.low:hover, div.file-priority-radiobox > div.low.selected { background-color: #7dc9f2; 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(#68abe6), to(#93e8ff)); /* Saf4+, Chrome */ background-image: url("images/file-priority-low.png"), -webkit-linear-gradient(top, #68abe6, #93e8ff); /* Chrome 10+, Saf5.1+ */ background-image: url("images/file-priority-low.png"), -moz-linear-gradient(top, #68abe6, #93e8ff); /* FF3.6+ */ background-image: url("images/file-priority-low.png"), -ms-linear-gradient(top, #68abe6, #93e8ff); /* IE10 */ background-image: url("images/file-priority-low.png"), -o-linear-gradient(top, #68abe6, #93e8ff); /* Opera 11.10+ */ background-image: url("images/file-priority-low.png"), linear-gradient(top, #68abe6, #93e8ff); /* W3C */ background-position: center; background-repeat: no-repeat; }
-div.file-priority-radiobox > div.normal { 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(white), to(#bbbbbb)); /* Saf4+, Chrome */ background-image: url("images/file-priority-normal.png"), -webkit-linear-gradient(top, white, #bbbbbb); /* Chrome 10+, Saf5.1+ */ background-image: url("images/file-priority-normal.png"), -moz-linear-gradient(top, white, #bbbbbb); /* FF3.6+ */ background-image: url("images/file-priority-normal.png"), -ms-linear-gradient(top, white, #bbbbbb); /* IE10 */ background-image: url("images/file-priority-normal.png"), -o-linear-gradient(top, white, #bbbbbb); /* Opera 11.10+ */ background-image: url("images/file-priority-normal.png"), linear-gradient(top, white, #bbbbbb); /* W3C */ background-position: center; background-repeat: no-repeat; }
-div.file-priority-radiobox > div.normal:active, div.file-priority-radiobox > div.normal:hover, div.file-priority-radiobox > div.normal.selected { background-color: #7dc9f2; 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(#68abe6), to(#93e8ff)); /* Saf4+, Chrome */ background-image: url("images/file-priority-normal.png"), -webkit-linear-gradient(top, #68abe6, #93e8ff); /* Chrome 10+, Saf5.1+ */ background-image: url("images/file-priority-normal.png"), -moz-linear-gradient(top, #68abe6, #93e8ff); /* FF3.6+ */ background-image: url("images/file-priority-normal.png"), -ms-linear-gradient(top, #68abe6, #93e8ff); /* IE10 */ background-image: url("images/file-priority-normal.png"), -o-linear-gradient(top, #68abe6, #93e8ff); /* Opera 11.10+ */ background-image: url("images/file-priority-normal.png"), linear-gradient(top, #68abe6, #93e8ff); /* W3C */ background-position: center; background-repeat: no-repeat; }
-div.file-priority-radiobox > div.high { -moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; 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(white), to(#bbbbbb)); /* Saf4+, Chrome */ background-image: url("images/file-priority-high.png"), -webkit-linear-gradient(top, white, #bbbbbb); /* Chrome 10+, Saf5.1+ */ background-image: url("images/file-priority-high.png"), -moz-linear-gradient(top, white, #bbbbbb); /* FF3.6+ */ background-image: url("images/file-priority-high.png"), -ms-linear-gradient(top, white, #bbbbbb); /* IE10 */ background-image: url("images/file-priority-high.png"), -o-linear-gradient(top, white, #bbbbbb); /* Opera 11.10+ */ background-image: url("images/file-priority-high.png"), linear-gradient(top, white, #bbbbbb); /* W3C */ background-position: center; background-repeat: no-repeat; border-left-width: 0px; }
-div.file-priority-radiobox > div.high:active, div.file-priority-radiobox > div.high:hover, div.file-priority-radiobox > div.high.selected { background-color: #7dc9f2; 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(#68abe6), to(#93e8ff)); /* Saf4+, Chrome */ background-image: url("images/file-priority-high.png"), -webkit-linear-gradient(top, #68abe6, #93e8ff); /* Chrome 10+, Saf5.1+ */ background-image: url("images/file-priority-high.png"), -moz-linear-gradient(top, #68abe6, #93e8ff); /* FF3.6+ */ background-image: url("images/file-priority-high.png"), -ms-linear-gradient(top, #68abe6, #93e8ff); /* IE10 */ background-image: url("images/file-priority-high.png"), -o-linear-gradient(top, #68abe6, #93e8ff); /* Opera 11.10+ */ background-image: url("images/file-priority-high.png"), linear-gradient(top, #68abe6, #93e8ff); /* W3C */ background-position: center; background-repeat: no-repeat; }
+div.file-priority-radiobox > * { cursor: pointer; -moz-user-select: none; -webkit-user-select: none; display: inline-block; border-style: solid; border-color: #aaa; border-width: 1px; padding: 3px; width: 20px; height: 12px; }
+div.file-priority-radiobox > div.low { -moz-border-radius-topleft: 5px; -moz-border-radius-bottomleft: 5px; border-top-left-radius: 5px; border-bottom-left-radius: 5px; background-color: #dcdcdc; 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(#e3e3e3), to(#d6d6d6)); /* Saf4+, Chrome */ background-image: url("images/file-priority-low.png"), -webkit-linear-gradient(top, #e3e3e3, #d6d6d6); /* Chrome 10+, Saf5.1+ */ background-image: url("images/file-priority-low.png"), -moz-linear-gradient(top, #e3e3e3, #d6d6d6); /* FF3.6+ */ background-image: url("images/file-priority-low.png"), -ms-linear-gradient(top, #e3e3e3, #d6d6d6); /* IE10 */ background-image: url("images/file-priority-low.png"), -o-linear-gradient(top, #e3e3e3, #d6d6d6); /* Opera 11.10+ */ background-image: url("images/file-priority-low.png"), linear-gradient(top, #e3e3e3, #d6d6d6); /* W3C */ background-position: center; background-repeat: no-repeat; border-right-width: 0px; }
+div.file-priority-radiobox > div.low:active, div.file-priority-radiobox > div.low:hover, div.file-priority-radiobox > div.low.selected { background-color: #7dc9f2; 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(#79c3f0), to(#81cff5)); /* Saf4+, Chrome */ background-image: url("images/file-priority-low.png"), -webkit-linear-gradient(top, #79c3f0, #81cff5); /* Chrome 10+, Saf5.1+ */ background-image: url("images/file-priority-low.png"), -moz-linear-gradient(top, #79c3f0, #81cff5); /* FF3.6+ */ background-image: url("images/file-priority-low.png"), -ms-linear-gradient(top, #79c3f0, #81cff5); /* IE10 */ background-image: url("images/file-priority-low.png"), -o-linear-gradient(top, #79c3f0, #81cff5); /* Opera 11.10+ */ background-image: url("images/file-priority-low.png"), linear-gradient(top, #79c3f0, #81cff5); /* W3C */ background-position: center; background-repeat: no-repeat; }
+div.file-priority-radiobox > div.normal { background-color: #dcdcdc; 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(#e3e3e3), to(#d6d6d6)); /* Saf4+, Chrome */ background-image: url("images/file-priority-normal.png"), -webkit-linear-gradient(top, #e3e3e3, #d6d6d6); /* Chrome 10+, Saf5.1+ */ background-image: url("images/file-priority-normal.png"), -moz-linear-gradient(top, #e3e3e3, #d6d6d6); /* FF3.6+ */ background-image: url("images/file-priority-normal.png"), -ms-linear-gradient(top, #e3e3e3, #d6d6d6); /* IE10 */ background-image: url("images/file-priority-normal.png"), -o-linear-gradient(top, #e3e3e3, #d6d6d6); /* Opera 11.10+ */ background-image: url("images/file-priority-normal.png"), linear-gradient(top, #e3e3e3, #d6d6d6); /* W3C */ background-position: center; background-repeat: no-repeat; }
+div.file-priority-radiobox > div.normal:active, div.file-priority-radiobox > div.normal:hover, div.file-priority-radiobox > div.normal.selected { background-color: #7dc9f2; 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(#79c3f0), to(#81cff5)); /* Saf4+, Chrome */ background-image: url("images/file-priority-normal.png"), -webkit-linear-gradient(top, #79c3f0, #81cff5); /* Chrome 10+, Saf5.1+ */ background-image: url("images/file-priority-normal.png"), -moz-linear-gradient(top, #79c3f0, #81cff5); /* FF3.6+ */ background-image: url("images/file-priority-normal.png"), -ms-linear-gradient(top, #79c3f0, #81cff5); /* IE10 */ background-image: url("images/file-priority-normal.png"), -o-linear-gradient(top, #79c3f0, #81cff5); /* Opera 11.10+ */ background-image: url("images/file-priority-normal.png"), linear-gradient(top, #79c3f0, #81cff5); /* W3C */ background-position: center; background-repeat: no-repeat; }
+div.file-priority-radiobox > div.high { -moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; background-color: #dcdcdc; 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(#e3e3e3), to(#d6d6d6)); /* Saf4+, Chrome */ background-image: url("images/file-priority-high.png"), -webkit-linear-gradient(top, #e3e3e3, #d6d6d6); /* Chrome 10+, Saf5.1+ */ background-image: url("images/file-priority-high.png"), -moz-linear-gradient(top, #e3e3e3, #d6d6d6); /* FF3.6+ */ background-image: url("images/file-priority-high.png"), -ms-linear-gradient(top, #e3e3e3, #d6d6d6); /* IE10 */ background-image: url("images/file-priority-high.png"), -o-linear-gradient(top, #e3e3e3, #d6d6d6); /* Opera 11.10+ */ background-image: url("images/file-priority-high.png"), linear-gradient(top, #e3e3e3, #d6d6d6); /* W3C */ background-position: center; background-repeat: no-repeat; border-left-width: 0px; }
+div.file-priority-radiobox > div.high:active, div.file-priority-radiobox > div.high:hover, div.file-priority-radiobox > div.high.selected { background-color: #7dc9f2; 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(#79c3f0), to(#81cff5)); /* Saf4+, Chrome */ background-image: url("images/file-priority-high.png"), -webkit-linear-gradient(top, #79c3f0, #81cff5); /* Chrome 10+, Saf5.1+ */ background-image: url("images/file-priority-high.png"), -moz-linear-gradient(top, #79c3f0, #81cff5); /* FF3.6+ */ background-image: url("images/file-priority-high.png"), -ms-linear-gradient(top, #79c3f0, #81cff5); /* IE10 */ background-image: url("images/file-priority-high.png"), -o-linear-gradient(top, #79c3f0, #81cff5); /* Opera 11.10+ */ background-image: url("images/file-priority-high.png"), linear-gradient(top, #79c3f0, #81cff5); /* W3C */ background-position: center; background-repeat: no-repeat; }
 
 /****
 *****
@@ -249,6 +247,7 @@ div.dialog_container { position: absolute; top: 0; left: 0px; margin: 0px; width
 div.dialog_container div.dialog_window { background-color: #eee; margin: 0 auto; opacity: .95; border-top: none; text-align: left; width: 420px; z-index: 10; 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; } }
+
 div.dialog_container .dialog_logo { width: 64px; height: 64px; margin: 20px 20px 0 20px; float: left; background: transparent url("images/logo.png") top left no-repeat; }
 
 div.dialog_container div.dialog_window h2.dialog_heading { display: block; float: left; width: 305px; font-size: 1.2em; color: black; margin-top: 20px; }

diff --git a/web/style/transmission/common.scss b/web/style/transmission/common.scss
index 783ecf7979214a5b85e4fc08bf7c7aa4d13de6e5..c658d22e568700f7366e3a0273ca498bbe3b50e4 100644 (file)
--- a/web/style/transmission/common.scss
+++ b/web/style/transmission/common.scss
@@ -760,17 +760,11 @@ div#torrent_inspector
                cursor: default;
                overflow: hidden;
        }
-       #inspector-page-files .select_all_button {
-               @include verticalGradient($nonselected-gradient-color-top, $nonselected-gradient-color-bottom);
-               @include roundedButton(5px);
-               float: left;
-               margin: 5px;
-               padding: 2px 5px;
-       }
-
        #inspector_file_list {
+               border-top: 1px solid #888;
                width: 100%;
-               margin: 0  0 0 0;
+               margin: 6px 0 0 0;
+               padding-top: 6px;
                padding-bottom: 10px;
                text-align: left;
                display: block;
@@ -789,30 +783,17 @@ div#torrent_inspector
 
        div.inspector_torrent_file_list_entry_name {
                font-size: 1.2em;
-               font-weight: bold;
-               color: #222;
-               margin-left: 20px;
+               color: black; 
+               display: inline;
+               margin-left: 0px;
        }
        li.inspector_torrent_file_list_entry.skip>.inspector_torrent_file_list_entry_name {
-               color: #666;
+               color: #999;
        }
        div.inspector_torrent_file_list_entry_progress {
-               font-size: 1em;
-               color: #666;
+               color: #999;
                margin-left: 20px;
        }
-       div.file_wanted_control {
-               background-position: left -19px;
-               float: left;
-               position: absolute;
-               cursor: pointer;
-               margin: 3px 0 0 0;
-               width: 19px;
-               height: 19px;
-               background-image: url('images/buttons/file_wanted_buttons.png');
-               background-repeat: no-repeat;
-               background-color: transparent;
-       }
 
        li.inspector_torrent_file_list_entry.skip>.file_wanted_control {
                background-position: left top;
@@ -915,14 +896,16 @@ div.file-priority-radiobox
 
        > * {
                @include button;
-               width: 30px;
+               width: 20px;
                height: 12px;
        }
 
-       $idle-color-top: $nonselected-gradient-color-top;
-       $idle-color-bottom: $nonselected-gradient-color-bottom;
-       $active-color-top: $selected-gradient-color-top;
-       $active-color-bottom: $selected-gradient-color-bottom;
+       // We have row after row of these buttons, so the flashy colors used in the inspector tabs look harsh here.
+       // Keep the same basic color theme, but look less harsh, by cutting the gradient's color range.
+       $idle-color-top:      mix( $nonselected-gradient-color-top, $nonselected-gradient-color-bottom, 60% );
+       $idle-color-bottom:   mix( $nonselected-gradient-color-top, $nonselected-gradient-color-bottom, 40% );
+       $active-color-top:    mix( $selected-gradient-color-top,    $selected-gradient-color-bottom,    60% );
+       $active-color-bottom: mix( $selected-gradient-color-top,    $selected-gradient-color-bottom,    40% );
 
        > div.low {
                @include leftRoundedBox($border-radius);

diff --git a/web/style/transmission/images/buttons/Makefile.am b/web/style/transmission/images/buttons/Makefile.am
index 82cc11eebe326ff22108f2d3444cef6b490c40c2..807ff838ba06c6366d29856b24a4a27423ab42b3 100644 (file)
--- a/web/style/transmission/images/buttons/Makefile.am
+++ b/web/style/transmission/images/buttons/Makefile.am
@@ -1,5 +1,4 @@
 datadir = ${datarootdir}/${PACKAGE_NAME}/${subdir}
 
 dist_data_DATA = \
-  file_wanted_buttons.png \
   torrent_buttons.png

diff --git a/web/style/transmission/images/buttons/file_wanted_buttons.png b/web/style/transmission/images/buttons/file_wanted_buttons.png
deleted file mode 100644 (file)
index ac56f18..0000000
Binary files a/web/style/transmission/images/buttons/file_wanted_buttons.png and /dev/null differ