(trunk web) convert the inspector tab & bottom bar's buttons to use the same css as the inspector's file priority buttons. This is a work in progress & is being checked in for apple testing

web/index.html

@@ -12,7 +12,7 @@
 		<script type="text/javascript" src="./javascript/jquery/jqueryui-1.8.16.min.js"></script>
 		<link rel="stylesheet" href="./style/jqueryui/jqueryui-1.8.16.css" type="text/css" media="all" />
 <!--
-		<link media="screen" href="./stylesheets/mobile.css" type= "text/css" rel="stylesheet" />
+		<link media="screen" href="./style/transmission/mobile.css" type= "text/css" rel="stylesheet" />
 -->
 		<link media="only screen and (max-device-width: 480px)" href="./style/transmission/mobile.css" type= "text/css" rel="stylesheet" />
 		<link media="screen and (min-device-width: 481px)" href="./style/transmission/common.css" type="text/css" rel="stylesheet" />
@@ -176,22 +176,20 @@
 
 		<div id="torrent_inspector" style="display:none;">
 
-			<div style="display:none;" class="inspector_close" id="inspector_close"></div>
+			<div id="inspector-close"></div>
 
-			<div id="inspector_tabs">
-				<div class="inspector_tab selected" id="inspector_tab_info"><div id="inspector-tab-label-info"></div><a href="#info"></a></div>
-				<div class="inspector_tab" id="inspector_tab_activity"><div id="inspector-tab-label-activity"></div><a href="#activity"></a></div>
-				<div class="inspector_tab" id="inspector_tab_peers"><div id="inspector-tab-label-peers"></div><a href="#peers"></a></div>
-				<div class="inspector_tab" id="inspector_tab_trackers"><div id="inspector-tab-label-trackers"></div><a href="#trackers"></a></div>
-				<div class="inspector_tab" id="inspector_tab_files"><div id="inspector-tab-label-files"></div><a href="#files"></a></div>
-			</div>
+			<div id="inspector-tabs-wrapper">
+			<div id="inspector-tabs">
+				<div class="inspector-tab selected" id="inspector-tab-info" title="Info"><a href="#info"></a></div><div class="inspector-tab" id="inspector-tab-activity" title="Activity"><a href="#activity"></a></div><div class="inspector-tab" id="inspector-tab-peers" title="Peers"><a href="#peers"></a></div><div class="inspector-tab" id="inspector-tab-trackers" title="Trackers"><a href="#trackers"></a></div><div class="inspector-tab" id="inspector-tab-files" title="Files"><a href="#files"></a></div>
+			</div><!-- inspector-tabs -->
+			</div><!-- inspector-tabs-wrapper -->
 
 			<div id="inspector_header">
-				<h1 id="torrent_inspector_name"></h1>
+				<div id="torrent_inspector_name"></div>
 				<span id="torrent_inspector_size"></span>
 			</div>
 
-			<div class="inspector_container" id="inspector_tab_info_container">
+			<div class="inspector-page" id="inspector-page-info">
 				<div class="inspector_group">
 					<div class="inspector_group_label">Information</div>
 					<div class="inspector_row">
@@ -233,7 +231,7 @@
 				</div><!-- class="inspector_group"-->
 			</div><!-- id="inspector_tab_info_container" -->
 
-			<div style="display:none;" class="inspector_container" id="inspector_tab_activity_container">
+			<div style="display:none;" class="inspector-page" id="inspector-page-activity">
 
 				<div class="inspector_group">
 					<div class="inspector_group_label">Activity</div>
@@ -292,23 +290,25 @@
 				</div><!-- class="inspector_group"-->
 			</div><!-- id="inspector_tab_activity_container" -->
 
-			<div style="display:none;" class="inspector_container" id="inspector_tab_peers_container">
+			<div style="display:none;" class="inspector-page" id="inspector-page-peers">
 				<div id="inspector_peers_list">
 				</div>
 			</div><!-- id="inspector_tab_peers_container" -->
 
-			<div style="display:none;" class="inspector_container" id="inspector_tab_trackers_container">
+			<div style="display:none;" class="inspector-page" id="inspector-page-trackers">
 				<div id="inspector_trackers_list">
 				</div>
 			</div><!-- id="inspector_tab_trackers_container" -->
 
-			<div style="display:none;" class="inspector_container" id="inspector_tab_files_container">
-				<div id="select_all_button_container">
-					<div id="files_deselect_all" class="select_all_button">Deselect All</div>
-					<div id="files_select_all" class="select_all_button">Select All</div>
+			<div style="display:none;" class="inspector-page" id="inspector-page-files">
+				<div class="inspector_group">
+					<div id="select_all_button_container">
+						<div id="files_deselect_all" class="select_all_button">Deselect All</div>
+						<div id="files_select_all" class="select_all_button">Select All</div>
+					</div>
+					<ul id="inspector_file_list">
+					</ul>
 				</div>
-				<ul id="inspector_file_list">
-				</ul>
 			</div><!-- id="inspector_tab_files_container" -->
 
 		</div>
@@ -375,7 +375,7 @@
 		</div>
 
 		<div class="torrent_footer">
-			<ul id="settings_menu">
+			<ul id="settings_menu" title="Settings Menu">
 				<li id="button">&nbsp;
 					<ul id="footer_super_menu">
 						<li id="about-button">About</li>
@@ -443,9 +443,9 @@
 					</ul>
 				</li>
 			</ul>
-			<div id="turtle-button">&nbsp;</div>
-			<div id="compact-button">&nbsp;</div>
-			<div id="prefs-button">&nbsp;</div>
+			<div id="turtle-button" title="Alternative Speed Limits">&nbsp;</div>
+			<div id="compact-button" title="Compact View">&nbsp;</div>
+			<div id="prefs-button" title="Edit Preferences...">&nbsp;</div>
 		</div>
 
 		<div class="contextMenu" id="torrent_context_menu">

web/javascript/inspector.js

@@ -48,7 +48,8 @@ function Inspector(controller) {
         $(tab).addClass('selected').siblings().removeClass('selected');
 
         // show this tab and hide the others
-        $('#'+tab.id+'_container').show().siblings('.inspector_container').hide();
+        console.log('#' + tab.id.replace('tab','page'));
+        $('#' + tab.id.replace('tab','page')).show().siblings('.inspector-page').hide();
 
         updateInspector();
     },
@@ -459,15 +460,15 @@ function Inspector(controller) {
 
         data.controller = controller;
 
-        $('.inspector_tab').click(onTabClicked);
+        $('.inspector-tab').click(onTabClicked);
         $('#files_select_all').click(filesSelectAllClicked);
         $('#files_deselect_all').click(filesDeselectAllClicked);
 
-        data.elements.info_page      = $('#inspector_tab_info_container')[0];
-        data.elements.files_page     = $('#inspector_tab_files_container')[0];
-        data.elements.peers_page     = $('#inspector_tab_peers_container')[0];
-        data.elements.trackers_page  = $('#inspector_tab_trackers_container')[0];
-        data.elements.activity_page  = $('#inspector_tab_activity_container')[0];
+        data.elements.info_page      = $('#inspector-page-info')[0];
+        data.elements.files_page     = $('#inspector-page-files')[0];
+        data.elements.peers_page     = $('#inspector-page-peers')[0];
+        data.elements.trackers_page  = $('#inspector-page-trackers')[0];
+        data.elements.activity_page  = $('#inspector-page-activity')[0];
 
         data.elements.file_list      = $('#inspector_file_list')[0];
         data.elements.peers_list     = $('#inspector_peers_list')[0];

web/javascript/transmission.js

@@ -62,9 +62,9 @@ Transmission.prototype =
 
 		$('#torrent_upload_form').submit(function() { $('#upload_confirm_button').click(); return false; });
 
-		if (isMobileDevice) {
-			$('#inspector_close').click($.proxy(this.toggleInspector,this));
-		} else {
+		$('#inspector-close').click($.proxy(this.toggleInspector,this));
+
+		if (!isMobileDevice) {
 			$(document).bind('keydown', $.proxy(this.keyDown,this) );
 			$(document).bind('keyup', $.proxy(this.keyUp, this) );
 			$('#torrent_container').click( $.proxy(this.deselectAll,this) );
@@ -548,7 +548,7 @@ Transmission.prototype =
 	toggleTurtleClicked: function()
 	{
 		var o = {};
-		o[RPC._TurtleState] = !$('#turtle-button').hasClass('enabled');
+		o[RPC._TurtleState] = !$('#turtle-button').hasClass('selected');
 		this.remote.savePrefs(o);
 	},
 
@@ -1025,7 +1025,7 @@ Transmission.prototype =
 			         ' up,',
 			         fmt.speed(o[RPC._TurtleDownSpeedLimit]),
 			         ' down)' ].join('');
-			e.toggleClass('enabled', b);
+			e.toggleClass('selected', b);
 			e.attr('title', text);
 		}
 
@@ -1147,7 +1147,6 @@ Transmission.prototype =
 		$('#torrent_inspector').toggle(visible);
 		if (isMobileDevice) {
 			$('body').toggleClass('inspector_showing',visible);
-			$('#inspector_close').toggle(visible);
 			this.hideMobileAddressbar();
 		} else {
 			var w = visible ? $('#torrent_inspector').outerWidth() + 1 + 'px' : '0px';
@@ -1580,7 +1579,7 @@ Transmission.prototype =
 		var compact = this[Prefs._CompactDisplayState];
 
 		// update the ui: footer button
-		$("#compact-button").toggleClass('enabled',compact);
+		$("#compact-button").toggleClass('selected',compact);
 
 		// update the ui: torrent list
 		this.torrentRenderer = compact ? new TorrentRendererCompact()

web/style/transmission/images/Makefile.am

@@ -3,14 +3,21 @@ SUBDIRS = buttons
 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 \
+  inspector-activity.png \
+  inspector-files.png \
+  inspector-info.png \
+  inspector-peers.png \
+  inspector-trackers.png
   iphone_chrome.png \
   lock_icon.png \
   logo.png \
-  progress.png
+  progress.png \
+  settings.png \
+  turtle.png \
+  wrench.png
 

web/style/transmission/images/buttons/Makefile.am

@@ -3,12 +3,5 @@ datadir = ${datarootdir}/${PACKAGE_NAME}/${subdir}
 dist_data_DATA = \
   cancel.png \
   file_wanted_buttons.png \
-  info_activity.png \
-  info_files.png \
-  info_general.png \
-  info_peers.png \
-  info_trackers.png \
-  tab_backgrounds.png \
-  tab_backgrounds_highlight.png \
   toolbar_buttons.png \
   torrent_buttons.png