From 25b966fe24de812074b78f70146a1c68e7ced029 Mon Sep 17 00:00:00 2001 From: Charles Kerr Date: Sat, 19 Jun 2010 16:36:00 +0000 Subject: [PATCH] (trunk) #2758 "add compact mode to web gui" -- patch by fx and kim --- web/index.html | 2 + web/javascript/common.js | 4 +- web/javascript/torrent.js | 101 ++++++++++++++++++++++----------- web/javascript/transmission.js | 21 ++++++- web/stylesheets/common.css | 36 +++++++++++- 5 files changed, 129 insertions(+), 35 deletions(-) diff --git a/web/index.html b/web/index.html index 9af88ec29..5caf17ec2 100755 --- a/web/index.html +++ b/web/index.html @@ -462,6 +462,8 @@
  • Reverse Sort Order
    • +
  • +
  • Compact View
    • diff --git a/web/javascript/common.js b/web/javascript/common.js index d7b3029c7..dea11f730 100644 --- a/web/javascript/common.js +++ b/web/javascript/common.js @@ -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 }; /* diff --git a/web/javascript/torrent.js b/web/javascript/torrent.js index 5521fe77b..6fd6bc88a 100644 --- a/web/javascript/torrent.js +++ b/web/javascript/torrent.js @@ -101,26 +101,34 @@ Torrent.prototype = top_e.appendChild( e ); element._name_container = e; - // Create the 'progress details'
    + // Create the 'peer details'
    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; } -- 2.40.0