(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
This commit is contained in:
Jordan Lee 2011-10-26 15:50:31 +00:00
parent cd13f370f7
commit a2145b188b
7 changed files with 33 additions and 68 deletions

View File

@ -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>

View File

@ -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');

View File

@ -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];

View File

@ -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; }

View File

@ -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);

View File

@ -1,5 +1,4 @@
datadir = ${datarootdir}/${PACKAGE_NAME}/${subdir}
dist_data_DATA = \
file_wanted_buttons.png \
torrent_buttons.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.5 KiB