mirror
/
transmission
mirror of https://github.com/transmission/transmission
1
0
Fork 0
Code Issues Releases Wiki Activity

(trunk web) #3862 "on iPhone web ui, some buttons are too small to tap" -- fix file priority buttons.

This commit is contained in:
Jordan Lee 2011-10-21 02:58:19 +00:00
parent 86cb95820d
commit b677c18b03
9 changed files with 245 additions and 108 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

110
web/javascript/file-row.js
View File

@ -19,7 +19,9 @@ function FileRow(torrent, i)
},
elements = {
priority_control: null,
priority_low_button: null,
priority_normal_button: null,
priority_high_button: null,
progress: null,
root: null
},
@ -51,24 +53,15 @@ function FileRow(torrent, i)
refreshWantedHTML = function()
{
var e = elements.root,
c = [ e.classNameConst ];
if (!fields.isWanted) { c.push('skip'); }
if (isDone()) { c.push('complete'); }
e.className = c.join(' ');
var e = $(elements.root);
e.toggleClass('skip', !fields.isWanted);
e.toggleClass('complete', isDone());
},
refreshPriorityHTML = function()
{
var e = elements.priority_control,
c = [ e.classNameConst ];
switch(fields.priority) {
case -1 : c.push('low'); break;
case 1 : c.push('high'); break;
default : c.push('normal'); break;
}
e.className = c.join(' ');
$(elements.priority_high_button ).toggleClass('selected', fields.priority === 1 );
$(elements.priority_normal_button).toggleClass('selected', fields.priority === 0 );
$(elements.priority_low_button ).toggleClass('selected', fields.priority === -1 );
},
refreshProgressHTML = function()
{
@ -99,60 +92,57 @@ function FileRow(torrent, i)
},
createRow = function(torrent, i) {
var file = torrent.getFile(i),
name, root, wanted_div, pri_div, file_div, prog_div;
var file = torrent.getFile(i), e, name, root, box;
root = document.createElement('li');
root.id = 't' + fields.torrent.getId() + 'f' + fields.index;
root.classNameConst = 'inspector_torrent_file_list_entry ' + ((i%2)?'odd':'even');
root.className = root.classNameConst;
root.className = 'inspector_torrent_file_list_entry ' + ((i%2)?'odd':'even');
elements.root = root;
wanted_div = document.createElement('div');
wanted_div.className = "file_wanted_control";
$(wanted_div).click(function(){ fireWantedChanged(!fields.isWanted); });
e = document.createElement('div');
e.className = "file_wanted_control";
$(e).click(function(){ fireWantedChanged(!fields.isWanted); });
root.appendChild(e);
pri_div = document.createElement('div');
pri_div.classNameConst = "file_priority_control";
pri_div.className = pri_div.classNameConst;
$(pri_div).bind('click',function(ev){
var prio,
x = ev.pageX,
e = ev.target;
while (e) {
x -= e.offsetLeft;
e = e.offsetParent;
}
// ugh.
if (isMobileDevice) {
if (x < 8) prio = -1;
else if (x < 27) prio = 0;
else prio = 1;
} else {
if (x < 12) prio = -1;
else if (x < 23) prio = 0;
else prio = 1;
}
firePriorityChanged(prio);
});
e = document.createElement('div');
e.className = 'file-priority-radiobox';
box = e;
e = document.createElement('div');
e.className = 'low';
e.title = 'Low Priority';
$(e).click(function(){ firePriorityChanged(-1); });
elements.priority_low_button = e;
box.appendChild(e);
e = document.createElement('div');
e.className = 'normal';
e.title = 'Normal Priority';
$(e).click(function(){ firePriorityChanged(0); });
elements.priority_normal_button = e;
box.appendChild(e);
e = document.createElement('div');
e.title = 'High Priority';
e.className = 'high';
$(e).click(function(){ firePriorityChanged(1); });
elements.priority_high_button = e;
box.appendChild(e);
root.appendChild(box);
name = file.name || 'Unknown';
name = name.substring(name.lastIndexOf('/')+1);
name = name.replace(/([\/_\.])/g, "$1&#8203;");
file_div = document.createElement('div');
file_div.className = "inspector_torrent_file_list_entry_name";
file_div.innerHTML = name;
e = document.createElement('div');
e.className = "inspector_torrent_file_list_entry_name";
e.innerHTML = name;
root.appendChild(e);
prog_div = document.createElement('div');
prog_div.className = "inspector_torrent_file_list_entry_progress";
root.appendChild(wanted_div);
root.appendChild(pri_div);
root.appendChild(file_div);
root.appendChild(prog_div);
elements.root = root;
elements.priority_control = pri_div;
elements.progress = prog_div;
e = document.createElement('div');
e.className = "inspector_torrent_file_list_entry_progress";
root.appendChild(e);
elements.progress = e;
refresh();
return root;

120
web/style/transmission/common.css
View File

@ -923,38 +923,110 @@ li.inspector_torrent_file_list_entry.complete>.file_wanted_control {
cursor: default;
}
div.file_priority_control {
div.file-priority-radiobox {
display: inline;
float: right;
margin: 4px 0 0 0;
width: 35px;
height: 19px;
background-image: url('images/buttons/file_priority_buttons.png');
background-repeat: no-repeat;
background-color: transparent;
margin: 4px;
margin-top: 2px;
}
div.file-priority-radiobox > * {
font-size: 20px;
cursor: pointer;
display: inline-block;
width: 30px;
height: 12px;
border-style: solid;
border-color: #aaa;
border-width: 1px;
padding: 3px;
}
div.file_priority_control.normal {
background-position: left top;
div.file-priority-radiobox > div.low {
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-bottomleft: 5px;
border-right-width: 0px;
background: #D7D7D7;
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(#EDEDED), to(#D7D7D7)); /* Saf4+, Chrome */
background-image: url(images/file-priority-low.png), -webkit-linear-gradient(top, #EDEDED, #D7D7D7); /* Chrome 10+, Saf5.1+ */
background-image: url(images/file-priority-low.png), -moz-linear-gradient(top, #EDEDED, #D7D7D7); /* FF3.6+ */
background-image: url(images/file-priority-low.png), -ms-linear-gradient(top, #EDEDED, #D7D7D7); /* IE10 */
background-image: url(images/file-priority-low.png), -o-linear-gradient(top, #EDEDED, #D7D7D7); /* Opera 11.10+ */
background-image: url(images/file-priority-low.png), linear-gradient(top, #EDEDED, #D7D7D7); /* W3C */
background-position: center;
background-repeat: no-repeat;
}
div.file_priority_control.normal:hover {
background-position: right top;
div.file-priority-radiobox > div.low.selected {
background: #93e8ff;
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_control.high {
background-position: left -19px;
div.file-priority-radiobox > div.normal {
background: #D7D7D7;
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(#EDEDED), to(#D7D7D7)); /* Saf4+, Chrome */
background-image: url(images/file-priority-normal.png), -webkit-linear-gradient(top, #EDEDED, #D7D7D7); /* Chrome 10+, Saf5.1+ */
background-image: url(images/file-priority-normal.png), -moz-linear-gradient(top, #EDEDED, #D7D7D7); /* FF3.6+ */
background-image: url(images/file-priority-normal.png), -ms-linear-gradient(top, #EDEDED, #D7D7D7); /* IE10 */
background-image: url(images/file-priority-normal.png), -o-linear-gradient(top, #EDEDED, #D7D7D7); /* Opera 11.10+ */
background-image: url(images/file-priority-normal.png), linear-gradient(top, #EDEDED, #D7D7D7); /* W3C */
background-position: center;
background-repeat: no-repeat;
}
div.file_priority_control.high:hover {
background-position: right -19px;
div.file-priority-radiobox > div.normal.selected {
background: #93e8ff;
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_control.low {
background-position: left -38px;
div.file-priority-radiobox > div.high {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
-moz-border-radius-topright: 5px;
-moz-border-radius-bottomright: 5px;
border-left-width: 0px;
background: #D7D7D7;
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(#EDEDED), to(#D7D7D7)); /* Saf4+, Chrome */
background-image: url(images/file-priority-high.png), -webkit-linear-gradient(top, #EDEDED, #D7D7D7); /* Chrome 10+, Saf5.1+ */
background-image: url(images/file-priority-high.png), -moz-linear-gradient(top, #EDEDED, #D7D7D7); /* FF3.6+ */
background-image: url(images/file-priority-high.png), -ms-linear-gradient(top, #EDEDED, #D7D7D7); /* IE10 */
background-image: url(images/file-priority-high.png), -o-linear-gradient(top, #EDEDED, #D7D7D7); /* Opera 11.10+ */
background-image: url(images/file-priority-high.png), linear-gradient(top, #EDEDED, #D7D7D7); /* W3C */
background-position: center;
background-repeat: no-repeat;
}
div.file_priority_control.low:hover {
background-position: right -38px;
}
ul.single_file li.inspector_torrent_file_list_entry>.file_priority_control,
li.inspector_torrent_file_list_entry.complete div.file_priority_control {
background-position: left -57px;
cursor: default;
div.file-priority-radiobox > div.high.selected {
background: #93e8ff;
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;
}

3
web/style/transmission/images/Makefile.am
View File

@ -4,6 +4,9 @@ datadir = ${datarootdir}/${PACKAGE_NAME}/${subdir}
dist_data_DATA = \
blue-turtle.png \
chrome.png \
file-priority-high.png \
file-priority-low.png \
file-priority-normal.png \
filter_bar.png \
filter_icon.png \
iphone_chrome.png \

1
web/style/transmission/images/buttons/Makefile.am
View File

@ -2,7 +2,6 @@ datadir = ${datarootdir}/${PACKAGE_NAME}/${subdir}
dist_data_DATA = \
cancel.png \
file_priority_buttons.png \
file_wanted_buttons.png \
info_activity.png \
info_files.png \

BIN
web/style/transmission/images/buttons/file_priority_buttons.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 3.7 KiB

BIN
web/style/transmission/images/file-priority-high.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 340 B

BIN
web/style/transmission/images/file-priority-low.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 335 B

BIN
web/style/transmission/images/file-priority-normal.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 185 B

119
web/style/transmission/mobile.css
View File

@ -792,37 +792,110 @@ li.inspector_torrent_file_list_entry.complete>.file_wanted_control {
cursor: default;
}
div.file_priority_control {
div.file-priority-radiobox {
display: inline;
float: right;
margin: 4px 0 0 0;
width: 35px;
height: 19px;
background-image: url('images/buttons/file_priority_buttons.png');
background-repeat: no-repeat;
background-color: transparent;
margin: 4px;
margin-top: 2px;
}
div.file-priority-radiobox > * {
font-size: 20px;
cursor: pointer;
display: inline-block;
width: 30px;
height: 12px;
border-style: solid;
border-color: #aaa;
border-width: 1px;
padding: 3px;
}
div.file_priority_control.normal {
background-position: left top;
div.file-priority-radiobox > div.low {
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-bottomleft: 5px;
border-right-width: 0px;
background: #D7D7D7;
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(#EDEDED), to(#D7D7D7)); /* Saf4+, Chrome */
background-image: url(images/file-priority-low.png), -webkit-linear-gradient(top, #EDEDED, #D7D7D7); /* Chrome 10+, Saf5.1+ */
background-image: url(images/file-priority-low.png), -moz-linear-gradient(top, #EDEDED, #D7D7D7); /* FF3.6+ */
background-image: url(images/file-priority-low.png), -ms-linear-gradient(top, #EDEDED, #D7D7D7); /* IE10 */
background-image: url(images/file-priority-low.png), -o-linear-gradient(top, #EDEDED, #D7D7D7); /* Opera 11.10+ */
background-image: url(images/file-priority-low.png), linear-gradient(top, #EDEDED, #D7D7D7); /* W3C */
background-position: center;
background-repeat: no-repeat;
}
div.file_priority_control.normal:hover {
background-position: right top;
div.file-priority-radiobox > div.low.selected {
background: #93e8ff;
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_control.high {
background-position: left -19px;
div.file-priority-radiobox > div.normal {
background: #D7D7D7;
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(#EDEDED), to(#D7D7D7)); /* Saf4+, Chrome */
background-image: url(images/file-priority-normal.png), -webkit-linear-gradient(top, #EDEDED, #D7D7D7); /* Chrome 10+, Saf5.1+ */
background-image: url(images/file-priority-normal.png), -moz-linear-gradient(top, #EDEDED, #D7D7D7); /* FF3.6+ */
background-image: url(images/file-priority-normal.png), -ms-linear-gradient(top, #EDEDED, #D7D7D7); /* IE10 */
background-image: url(images/file-priority-normal.png), -o-linear-gradient(top, #EDEDED, #D7D7D7); /* Opera 11.10+ */
background-image: url(images/file-priority-normal.png), linear-gradient(top, #EDEDED, #D7D7D7); /* W3C */
background-position: center;
background-repeat: no-repeat;
}
div.file_priority_control.high:hover {
background-position: right -19px;
div.file-priority-radiobox > div.normal.selected {
background: #93e8ff;
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_control.low {
background-position: left -38px;
div.file-priority-radiobox > div.high {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
-moz-border-radius-topright: 5px;
-moz-border-radius-bottomright: 5px;
border-left-width: 0px;
background: #D7D7D7;
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(#EDEDED), to(#D7D7D7)); /* Saf4+, Chrome */
background-image: url(images/file-priority-high.png), -webkit-linear-gradient(top, #EDEDED, #D7D7D7); /* Chrome 10+, Saf5.1+ */
background-image: url(images/file-priority-high.png), -moz-linear-gradient(top, #EDEDED, #D7D7D7); /* FF3.6+ */
background-image: url(images/file-priority-high.png), -ms-linear-gradient(top, #EDEDED, #D7D7D7); /* IE10 */
background-image: url(images/file-priority-high.png), -o-linear-gradient(top, #EDEDED, #D7D7D7); /* Opera 11.10+ */
background-image: url(images/file-priority-high.png), linear-gradient(top, #EDEDED, #D7D7D7); /* W3C */
background-position: center;
background-repeat: no-repeat;
}
div.file_priority_control.low:hover {
background-position: right -38px;
}
ul.single_file li.inspector_torrent_file_list_entry>.file_priority_control, li.inspector_torrent_file_list_entry.complete div.file_priority_control {
background-position: left -57px;
cursor: default;
div.file-priority-radiobox > div.high.selected {
background: #93e8ff;
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;
}