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

diff --git a/web/index.html b/web/index.html
index 9af88ec294078cf90399397e8cd2e1bb44102389..5caf17ec2a1d726c681fef48c7fa80dff93750ad 100755 (executable)
--- a/web/index.html
+++ b/web/index.html
@@ -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>

diff --git a/web/javascript/common.js b/web/javascript/common.js
index d7b3029c73385eac0c8362da2c65c6774c6b7c38..dea11f730df089fed09b37e74a94afb36ae71582 100644 (file)
--- 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 5521fe77b579f08edde7dfd2ab062af89d8d0ec6..6fd6bc88ad0a254949d4c1dd5cb0828acfb3bcab 100644 (file)
--- 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' <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( ) );

diff --git a/web/javascript/transmission.js b/web/javascript/transmission.js
index 927420bd203513b0f330b8e8b7365e8970ab4a0f..3e3fa46dd247ed2dbd37aff366c60ee74413db48 100644 (file)
--- 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 05d2fc48caf1684e05fb00c0d5f4d6e91ae135ae..eb9ddca6c0109e3119f72eb96b94783258799e01 100644 (file)
--- 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;
 }