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'
+
+ // Create the 'progress details'
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( ) );
diff --git a/web/javascript/transmission.js b/web/javascript/transmission.js
index 927420bd2..3e3fa46dd 100644
--- a/web/javascript/transmission.js
+++ b/web/javascript/transmission.js
@@ -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
diff --git a/web/stylesheets/common.css b/web/stylesheets/common.css
index 05d2fc48c..eb9ddca6c 100644
--- a/web/stylesheets/common.css
+++ b/web/stylesheets/common.css
@@ -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;
}