mirror/transmission
1
0
Fork 0
mirror of https://github.com/transmission/transmission synced 2025-03-19 02:05:32 +00:00
Code Issues Releases Wiki Activity

(trunk) #2758 "add compact mode to web gui" -- patch by fx and kim

Browse source
This commit is contained in:
Charles Kerr 2010-06-19 16:36:00 +00:00
parent f223bda8d0
commit 25b966fe24
5 changed files with 129 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
web/index.html
View file

@ -462,6 +462,8 @@
<li id="reverse_sort_order">Reverse Sort Order</li>
</ul>
</li>
<li class="separator"></li>
<li id="compact_view">Compact View</li>
</ul>
</li>
</ul>

4
web/javascript/common.js
View file

@ -358,6 +358,7 @@ Prefs._SortByState = 'state';
Prefs._SortByTracker = 'tracker';
Prefs._TurtleState = 'turtle-state';
Prefs._CompactDisplayState= 'compact_display_state';
Prefs._Defaults =
{
@ -367,7 +368,8 @@ Prefs._Defaults =
'show_inspector': false,
'sort_direction': 'ascending',
'sort_method': 'name',
'turtle-state' : false
'turtle-state' : false,
'compact_display_state' : false
};
/*

101
web/javascript/torrent.js
View file

@ -101,26 +101,34 @@ Torrent.prototype =
top_e.appendChild( e );
element._name_container = e;
// Create the 'progress details' <div>
// Create the 'peer details' <div>
e = document.createElement( 'div' );
e.className = 'torrent_progress_details';
e.className = 'torrent_peer_details';
top_e.appendChild( e );
element._progress_details_container = e;
element._peer_details_container = e;
//Create a progress bar container
top_a = document.createElement( 'div' );
top_a.className = 'torrent_progress_bar_container';
element._progress_bar_container = top_a;
// Create the 'in progress' bar
e = document.createElement( 'div' );
e.className = 'torrent_progress_bar incomplete';
e.style.width = '0%';
top_e.appendChild( e );
top_a.appendChild( e );
element._progress_complete_container = e;
// Create the 'incomplete' bar (initially hidden)
e = document.createElement( 'div' );
e.className = 'torrent_progress_bar incomplete';
e.style.display = 'none';
top_e.appendChild( e );
top_a.appendChild( e );
element._progress_incomplete_container = e;
//Add the progress bar container to the torrent
top_e.appendChild(top_a);
// Add the pause/resume button - don't specify the
// image or alt text until the 'refresh()' function
// (depends on torrent state)
@ -131,12 +139,12 @@ Torrent.prototype =
top_e.appendChild( e );
element._pause_resume_button_image = image;
if (!iPhone) $(e).bind('click', function(e) { element._torrent.clickPauseResumeButton(e); });
// Create the 'peer details' <div>
// Create the 'progress details' <div>
e = document.createElement( 'div' );
e.className = 'torrent_peer_details';
e.className = 'torrent_progress_details';
top_e.appendChild( e );
element._peer_details_container = e;
element._progress_details_container = e;
// Set the torrent click observer
element.bind('click', function(e){ element._torrent.clickTorrent(e) });
@ -431,6 +439,7 @@ Torrent.prototype =
{
var c;
var compact_mode = this._controller[Prefs._CompactDisplayState];
if(( c = this.getErrorMessage( )))
return c;
@ -443,27 +452,41 @@ Torrent.prototype =
break;
case Torrent._StatusDownloading:
// 'Downloading from 36 of 40 peers - DL: 60.2 KiB/s UL: 4.3 KiB/s'
c = 'Downloading from ';
c += this.peersSendingToUs();
c += ' of ';
c += this._peers_connected;
c += ' peers - DL: ';
c += Math.formatBytes(this._download_speed);
c += '/s UL: ';
c += Math.formatBytes(this._upload_speed);
c += '/s';
if(compact_mode){
c = 'DL: '
c += Math.formatBytes(this._download_speed);
c += '/s UL: ';
c += Math.formatBytes(this._upload_speed);
c += '/s';
} else {
// 'Downloading from 36 of 40 peers - DL: 60.2 KiB/s UL: 4.3 KiB/s'
c = 'Downloading from ';
c += this.peersSendingToUs();
c += ' of ';
c += this._peers_connected;
c += ' peers - DL: ';
c += Math.formatBytes(this._download_speed);
c += '/s UL: ';
c += Math.formatBytes(this._upload_speed);
c += '/s';
}
break;
case Torrent._StatusSeeding:
// 'Seeding to 13 of 22 peers - UL: 36.2 KiB/s'
c = 'Seeding to ';
c += this.peersGettingFromUs();
c += ' of ';
c += this._peers_connected;
c += ' peers - UL: ';
c += Math.formatBytes(this._upload_speed);
c += '/s';
if(compact_mode){
c = 'UL: '
c += Math.formatBytes(this._upload_speed);
c += '/s';
} else {
// 'Seeding to 13 of 22 peers - UL: 36.2 KiB/s'
c = 'Seeding to ';
c += this.peersGettingFromUs();
c += ' of ';
c += this._peers_connected;
c += ' peers - UL: ';
c += Math.formatBytes(this._upload_speed);
c += '/s';
}
break;
case Torrent._StatusChecking:
@ -482,6 +505,18 @@ Torrent.prototype =
var progress_details;
var root = this._element;
var MaxBarWidth = 100; // reduce this to make the progress bar shorter (%)
var compact_mode = this._controller[Prefs._CompactDisplayState];
var compact = '';
if(compact_mode){
compact = ' compact';
root._peer_details_container.style.display = 'none';
} else {
root._peer_details_container.style.display = 'block';
}
root._progress_details_container.className = 'torrent_progress_details'+compact
root._progress_bar_container.className = 'torrent_progress_bar_container'+compact;
root._name_container.className = 'torrent_name'+compact;
setInnerHTML( root._name_container, this._name );
@ -504,9 +539,9 @@ Torrent.prototype =
empty = "empty";
root._progress_complete_container.style.width = metaPercentComplete + "%";
root._progress_complete_container.className = 'torrent_progress_bar in_progress meta ' + empty;
root._progress_complete_container.className = 'torrent_progress_bar in_progress meta ' + empty+compact;
root._progress_incomplete_container.style.width = 100 - metaPercentComplete + "%"
root._progress_incomplete_container.className = 'torrent_progress_bar incomplete meta';
root._progress_incomplete_container.className = 'torrent_progress_bar incomplete compact meta'+compact;
root._progress_incomplete_container.style.display = 'block';
}
@ -539,7 +574,7 @@ Torrent.prototype =
// Update the 'in progress' bar
e = root._progress_complete_container;
c = 'torrent_progress_bar';
c = 'torrent_progress_bar'+compact;
c += this.isActive() ? ' in_progress' : ' incomplete_stopped';
if(css_completed_width === 0) { c += ' empty'; }
e.className = c;
@ -611,16 +646,18 @@ Torrent.prototype =
}
// Update the progress details
if(compact_mode)
progress_details = this.getPeerDetails();
setInnerHTML( root._progress_details_container, progress_details );
// Update the peer details and pause/resume button
e = root._pause_resume_button_image;
if ( this.state() === Torrent._StatusPaused ) {
e.alt = 'Resume';
e.className = "torrent_resume";
e.className = "torrent_resume"+compact;
} else {
e.alt = 'Pause';
e.className = "torrent_pause";
e.className = "torrent_pause"+compact;
}
setInnerHTML( root._peer_details_container, this.getPeerDetails( ) );

21
web/javascript/transmission.js
View file

@ -1050,6 +1050,15 @@ Transmission.prototype =
$('div#stats_container h2.dialog_heading').show();
tr.showStatsDialog( );
}
else if ($element[0].id == 'compact_view') {
this[Prefs._CompactDisplayState] = !this[Prefs._CompactDisplayState];
if(this[Prefs._CompactDisplayState])
$element.selectMenuItem();
else
$element.deselectMenuItem();
this.setDisplayMode( this[Prefs._CompactDisplayState] );
// Redraw html here
}
break;
// Limit the download rate
@ -1093,7 +1102,7 @@ Transmission.prototype =
// The 'reverse sort' option state can be toggled independently of the other options
if ($element.is('#reverse_sort_order')) {
if(!$element.is('#reverse_sort_order.active')) break;
if(!$element.is('#reverse_sort_order.active')) break;
var dir;
if ($element.menuItemIsSelected()) {
$element.deselectMenuItem();
@ -1628,6 +1637,16 @@ Transmission.prototype =
return removedAny;
},
setDisplayMode: function( iscompact )
{
var torrents = this.getAllTorrents();
for( var i=0; torrents[i]; ++i )
{
torrents[i].setListDisplayElements(this[Prefs._CompactDisplayState]);
}
},
/*
* Set the alternating background colors for torrents

36
web/stylesheets/common.css
View file

@ -370,6 +370,8 @@ ul.torrent_list li {
vertical-align: middle;
-moz-user-select: none;
-webkit-user-select: none;
overflow: hidden;
}
ul.torrent_list li.torrent {
@ -402,6 +404,12 @@ ul.torrent_list li.torrent div.torrent_name {
margin-bottom: 2px;
}
ul.torrent_list li.torrent div.torrent_name.compact {
float: left;
z-index: 1;
position: absolute;
}
ul.torrent_list li.torrent.selected div.torrent_name {
color: #fff;
}
@ -411,6 +419,23 @@ ul.torrent_list li.torrent div.torrent_peer_details {
font-size: 1em;
}
ul.torrent_list li.torrent div.torrent_progress_details.compact,
ul.torrent_list li.torrent div.torrent_peer_details.compact {
padding-top: 3px;
float: left;
}
ul.torrent_list li.torrent div.torrent_progress_details.compact {
float: right;
}
ul.torrent_list li.torrent div.torrent_progress_bar_container.compact {
position: absolute;
left: 5px;
right: 35px;
opacity:0.4;
}
ul.torrent_list li.torrent div.torrent_progress_bar {
height: 10px;
margin: 3px 0;
@ -423,7 +448,7 @@ ul.torrent_list li.torrent div.torrent_progress_bar {
background-color: transparent;
}
ul.torrent_list li.torrent div.torrent_progress_bar.complete {
ul.torrent_list li.torrent div.torrent_progress_bar.compact {
background-position: left -10px;
border: 1px solid #29AD35;
}
@ -439,6 +464,11 @@ ul.torrent_list li.torrent div.torrent_progress_bar.in_progress {
border-right: none;
}
ul.torrent_list li.torrent div.torrent_progress_bar.incomplete.compact {
background: none;
border: none;
}
ul.torrent_list li.torrent div.torrent_progress_bar.incomplete {
margin-right: -10px;
background-position: left -20px;
@ -490,6 +520,10 @@ li.torrent a div {
width: 14px;
}
li.torrent a div.compact {
top: 0px;
}
li.torrent a div.torrent_pause {
background-position: left top;
}