(trunk web) the preferences dialog is now activated from a toolbar button.

This is in preparation for merging about 80% of the scss code between the default and mobile versions of Clutch. Previously the mobile client had the prefs button in the footer and the default client had it in the popup menu. Now both have it in the toolbar instead.

web/index.html

@@ -44,6 +44,7 @@
 			<div id="toolbar-pause" title="Pause Selected Torrents"></div>
 			<div id="toolbar-select" title="Toggle Selection"></div>
 			<div id="toolbar-inspector" title="Toggle Inspector"></div>
+			<div id="toolbar-prefs" title="Edit Preferences..."></div>
 		</div>
 
 		<div id="statusbar">
@@ -376,7 +377,6 @@
 						<li id="homepage">Transmission Homepage</li>
 						<li id="tipjar">Transmission Tip Jar</li>
 						<li class="separator"></li>
-						<li id="preferences">Preferences</li>
 						<li id="statistics">Statistics</li>
 						<li class="separator"></li>
 						<li>Total Download Rate
@@ -438,7 +438,6 @@
 			</ul>
 			<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/prefs-dialog.js

@@ -298,6 +298,12 @@ function PrefsDialog(remote) {
         data.elements.root.dialog('open');
     };
 
+    this.close = function ()
+    {
+        transmission.hideMobileAddressbar();
+        data.elements.root.dialog('close');
+    },
+
     this.shouldAddedTorrentsStart = function()
     {
         return data.elements.root.find('#start-added-torrents')[0].checked;

web/javascript/transmission.js

@@ -26,6 +26,8 @@ Transmission.prototype =
 		this.remote = new TransmissionRemote(this);
 		this.inspector = new Inspector(this, this.remote);
 		this.prefsDialog = new PrefsDialog(this.remote);
+		$(this.prefsDialog).bind('closed', $.proxy(this.onPrefsDialogClosed,this));
+
 		this.isMenuEnabled = !isMobileDevice;
 
 		// Initialize the implementation fields
@@ -45,8 +47,7 @@ Transmission.prototype =
 		$('#toolbar-remove').click($.proxy(this.removeClicked,this));
 		$('#toolbar-open').click($.proxy(this.openTorrentClicked,this));
 		$('#toolbar-select').click($.proxy(this.toggleSelectionClicked,this));
-
-		$('#prefs-button').click($.proxy(this.showPrefsDialog,this));
+		$('#toolbar-prefs').click($.proxy(this.togglePrefsDialogClicked,this));
 
 		$('#upload_confirm_button').click($.proxy(this.confirmUploadClicked,this));
 		$('#upload_cancel_button').click($.proxy(this.hideUploadDialog,this));
@@ -549,9 +550,20 @@ Transmission.prototype =
 	 *
 	 *--------------------------------------------*/
 
-	showPrefsDialog: function()
+	onPrefsDialogClosed: function() {
+		$('#toolbar-prefs').removeClass('selected');
+	},
+
+	togglePrefsDialogClicked: function(ev)
 	{
-		this.prefsDialog.show();
+		var e = $('#toolbar-prefs');
+
+		if (e.hasClass('selected'))
+			this.prefsDialog.close();
+		else {
+			e.addClass('selected');
+			this.prefsDialog.show();
+		}
 	},
 
 	setFilterText: function(search) {
@@ -600,10 +612,6 @@ Transmission.prototype =
 		}
 		else switch (id)
 		{
-			case 'preferences':
-				this.showPrefsDialog();
-				break;
-
 			case 'statistics':
 				this.showStatsDialog();
 				break;

web/style/transmission/common.css

@@ -35,7 +35,9 @@ div#toolbar > div#toolbar-pause { -moz-border-radius-topright: 5px; -moz-border-
 div#toolbar > div#toolbar-pause:active, div#toolbar > div#toolbar-pause:hover, div#toolbar > div#toolbar-pause.selected { background-color: #7dc9f2; background-image: url("images/toolbar-pause.png"); /* fallback */ background-image: url("images/toolbar-pause.png"), -webkit-gradient(linear, left top, left bottom, from(#68abe6), to(#93e8ff)); /* Saf4+, Chrome */ background-image: url("images/toolbar-pause.png"), -webkit-linear-gradient(top, #68abe6, #93e8ff); /* Chrome 10+, Saf5.1+ */ background-image: url("images/toolbar-pause.png"), -moz-linear-gradient(top, #68abe6, #93e8ff); /* FF3.6+ */ background-image: url("images/toolbar-pause.png"), -ms-linear-gradient(top, #68abe6, #93e8ff); /* IE10 */ background-image: url("images/toolbar-pause.png"), -o-linear-gradient(top, #68abe6, #93e8ff); /* Opera 11.10+ */ background-image: url("images/toolbar-pause.png"), linear-gradient(top, #68abe6, #93e8ff); /* W3C */ background-position: center; background-repeat: no-repeat; }
 div#toolbar > div#toolbar-select { -moz-border-radius-topleft: 5px; -moz-border-radius-bottomleft: 5px; border-top-left-radius: 5px; border-bottom-left-radius: 5px; -moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; background-color: #dddddd; background-image: url("images/toolbar-pointer.png"); /* fallback */ background-image: url("images/toolbar-pointer.png"), -webkit-gradient(linear, left top, left bottom, from(white), to(#bbbbbb)); /* Saf4+, Chrome */ background-image: url("images/toolbar-pointer.png"), -webkit-linear-gradient(top, white, #bbbbbb); /* Chrome 10+, Saf5.1+ */ background-image: url("images/toolbar-pointer.png"), -moz-linear-gradient(top, white, #bbbbbb); /* FF3.6+ */ background-image: url("images/toolbar-pointer.png"), -ms-linear-gradient(top, white, #bbbbbb); /* IE10 */ background-image: url("images/toolbar-pointer.png"), -o-linear-gradient(top, white, #bbbbbb); /* Opera 11.10+ */ background-image: url("images/toolbar-pointer.png"), linear-gradient(top, white, #bbbbbb); /* W3C */ background-position: center; background-repeat: no-repeat; margin-left: 20px; }
 div#toolbar > div#toolbar-select:active, div#toolbar > div#toolbar-select:hover, div#toolbar > div#toolbar-select.selected { background-color: #7dc9f2; background-image: url("images/toolbar-pointer.png"); /* fallback */ background-image: url("images/toolbar-pointer.png"), -webkit-gradient(linear, left top, left bottom, from(#68abe6), to(#93e8ff)); /* Saf4+, Chrome */ background-image: url("images/toolbar-pointer.png"), -webkit-linear-gradient(top, #68abe6, #93e8ff); /* Chrome 10+, Saf5.1+ */ background-image: url("images/toolbar-pointer.png"), -moz-linear-gradient(top, #68abe6, #93e8ff); /* FF3.6+ */ background-image: url("images/toolbar-pointer.png"), -ms-linear-gradient(top, #68abe6, #93e8ff); /* IE10 */ background-image: url("images/toolbar-pointer.png"), -o-linear-gradient(top, #68abe6, #93e8ff); /* Opera 11.10+ */ background-image: url("images/toolbar-pointer.png"), linear-gradient(top, #68abe6, #93e8ff); /* W3C */ background-position: center; background-repeat: no-repeat; }
-div#toolbar > div#toolbar-inspector { -moz-border-radius-topleft: 5px; -moz-border-radius-bottomleft: 5px; border-top-left-radius: 5px; border-bottom-left-radius: 5px; -moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; background-color: #dddddd; background-image: url("images/toolbar-info.png"); /* fallback */ background-image: url("images/toolbar-info.png"), -webkit-gradient(linear, left top, left bottom, from(white), to(#bbbbbb)); /* Saf4+, Chrome */ background-image: url("images/toolbar-info.png"), -webkit-linear-gradient(top, white, #bbbbbb); /* Chrome 10+, Saf5.1+ */ background-image: url("images/toolbar-info.png"), -moz-linear-gradient(top, white, #bbbbbb); /* FF3.6+ */ background-image: url("images/toolbar-info.png"), -ms-linear-gradient(top, white, #bbbbbb); /* IE10 */ background-image: url("images/toolbar-info.png"), -o-linear-gradient(top, white, #bbbbbb); /* Opera 11.10+ */ background-image: url("images/toolbar-info.png"), linear-gradient(top, white, #bbbbbb); /* W3C */ background-position: center; background-repeat: no-repeat; float: right; margin-right: 8px; }
+div#toolbar > div#toolbar-prefs { -moz-border-radius-topleft: 5px; -moz-border-radius-bottomleft: 5px; border-top-left-radius: 5px; border-bottom-left-radius: 5px; background-color: #dddddd; background-image: url("images/toolbar-wrench.png"); /* fallback */ background-image: url("images/toolbar-wrench.png"), -webkit-gradient(linear, left top, left bottom, from(white), to(#bbbbbb)); /* Saf4+, Chrome */ background-image: url("images/toolbar-wrench.png"), -webkit-linear-gradient(top, white, #bbbbbb); /* Chrome 10+, Saf5.1+ */ background-image: url("images/toolbar-wrench.png"), -moz-linear-gradient(top, white, #bbbbbb); /* FF3.6+ */ background-image: url("images/toolbar-wrench.png"), -ms-linear-gradient(top, white, #bbbbbb); /* IE10 */ background-image: url("images/toolbar-wrench.png"), -o-linear-gradient(top, white, #bbbbbb); /* Opera 11.10+ */ background-image: url("images/toolbar-wrench.png"), linear-gradient(top, white, #bbbbbb); /* W3C */ background-position: center; background-repeat: no-repeat; border-right-width: 0px; float: right; }
+div#toolbar > div#toolbar-prefs:active, div#toolbar > div#toolbar-prefs:hover, div#toolbar > div#toolbar-prefs.selected { background-color: #7dc9f2; background-image: url("images/toolbar-wrench.png"); /* fallback */ background-image: url("images/toolbar-wrench.png"), -webkit-gradient(linear, left top, left bottom, from(#68abe6), to(#93e8ff)); /* Saf4+, Chrome */ background-image: url("images/toolbar-wrench.png"), -webkit-linear-gradient(top, #68abe6, #93e8ff); /* Chrome 10+, Saf5.1+ */ background-image: url("images/toolbar-wrench.png"), -moz-linear-gradient(top, #68abe6, #93e8ff); /* FF3.6+ */ background-image: url("images/toolbar-wrench.png"), -ms-linear-gradient(top, #68abe6, #93e8ff); /* IE10 */ background-image: url("images/toolbar-wrench.png"), -o-linear-gradient(top, #68abe6, #93e8ff); /* Opera 11.10+ */ background-image: url("images/toolbar-wrench.png"), linear-gradient(top, #68abe6, #93e8ff); /* W3C */ background-position: center; background-repeat: no-repeat; }
+div#toolbar > div#toolbar-inspector { -moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; background-color: #dddddd; background-image: url("images/toolbar-info.png"); /* fallback */ background-image: url("images/toolbar-info.png"), -webkit-gradient(linear, left top, left bottom, from(white), to(#bbbbbb)); /* Saf4+, Chrome */ background-image: url("images/toolbar-info.png"), -webkit-linear-gradient(top, white, #bbbbbb); /* Chrome 10+, Saf5.1+ */ background-image: url("images/toolbar-info.png"), -moz-linear-gradient(top, white, #bbbbbb); /* FF3.6+ */ background-image: url("images/toolbar-info.png"), -ms-linear-gradient(top, white, #bbbbbb); /* IE10 */ background-image: url("images/toolbar-info.png"), -o-linear-gradient(top, white, #bbbbbb); /* Opera 11.10+ */ background-image: url("images/toolbar-info.png"), linear-gradient(top, white, #bbbbbb); /* W3C */ background-position: center; background-repeat: no-repeat; float: right; margin-right: 8px; }
 div#toolbar > div#toolbar-inspector:active, div#toolbar > div#toolbar-inspector:hover, div#toolbar > div#toolbar-inspector.selected { background-color: #7dc9f2; background-image: url("images/toolbar-info.png"); /* fallback */ background-image: url("images/toolbar-info.png"), -webkit-gradient(linear, left top, left bottom, from(#68abe6), to(#93e8ff)); /* Saf4+, Chrome */ background-image: url("images/toolbar-info.png"), -webkit-linear-gradient(top, #68abe6, #93e8ff); /* Chrome 10+, Saf5.1+ */ background-image: url("images/toolbar-info.png"), -moz-linear-gradient(top, #68abe6, #93e8ff); /* FF3.6+ */ background-image: url("images/toolbar-info.png"), -ms-linear-gradient(top, #68abe6, #93e8ff); /* IE10 */ background-image: url("images/toolbar-info.png"), -o-linear-gradient(top, #68abe6, #93e8ff); /* Opera 11.10+ */ background-image: url("images/toolbar-info.png"), linear-gradient(top, #68abe6, #93e8ff); /* W3C */ background-position: center; background-repeat: no-repeat; }
 div#toolbar > *.disabled { opacity: 0.25; }
 
@@ -235,7 +237,6 @@ div.torrent_footer #turtle-button { -moz-border-radius-topleft: 5px; -moz-border
 div.torrent_footer #turtle-button:active, div.torrent_footer #turtle-button:hover, div.torrent_footer #turtle-button.selected { background-color: #7dc9f2; background-image: url("images/turtle.png"); /* fallback */ background-image: url("images/turtle.png"), -webkit-gradient(linear, left top, left bottom, from(#68abe6), to(#93e8ff)); /* Saf4+, Chrome */ background-image: url("images/turtle.png"), -webkit-linear-gradient(top, #68abe6, #93e8ff); /* Chrome 10+, Saf5.1+ */ background-image: url("images/turtle.png"), -moz-linear-gradient(top, #68abe6, #93e8ff); /* FF3.6+ */ background-image: url("images/turtle.png"), -ms-linear-gradient(top, #68abe6, #93e8ff); /* IE10 */ background-image: url("images/turtle.png"), -o-linear-gradient(top, #68abe6, #93e8ff); /* Opera 11.10+ */ background-image: url("images/turtle.png"), linear-gradient(top, #68abe6, #93e8ff); /* W3C */ background-position: center; background-repeat: no-repeat; }
 div.torrent_footer #compact-button { -moz-border-radius-topleft: 5px; -moz-border-radius-bottomleft: 5px; border-top-left-radius: 5px; border-bottom-left-radius: 5px; -moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; background-color: #dddddd; background-image: url("images/compact.png"); /* fallback */ background-image: url("images/compact.png"), -webkit-gradient(linear, left top, left bottom, from(white), to(#bbbbbb)); /* Saf4+, Chrome */ background-image: url("images/compact.png"), -webkit-linear-gradient(top, white, #bbbbbb); /* Chrome 10+, Saf5.1+ */ background-image: url("images/compact.png"), -moz-linear-gradient(top, white, #bbbbbb); /* FF3.6+ */ background-image: url("images/compact.png"), -ms-linear-gradient(top, white, #bbbbbb); /* IE10 */ background-image: url("images/compact.png"), -o-linear-gradient(top, white, #bbbbbb); /* Opera 11.10+ */ background-image: url("images/compact.png"), linear-gradient(top, white, #bbbbbb); /* W3C */ background-position: center; background-repeat: no-repeat; }
 div.torrent_footer #compact-button:active, div.torrent_footer #compact-button:hover, div.torrent_footer #compact-button.selected { background-color: #7dc9f2; background-image: url("images/compact.png"); /* fallback */ background-image: url("images/compact.png"), -webkit-gradient(linear, left top, left bottom, from(#68abe6), to(#93e8ff)); /* Saf4+, Chrome */ background-image: url("images/compact.png"), -webkit-linear-gradient(top, #68abe6, #93e8ff); /* Chrome 10+, Saf5.1+ */ background-image: url("images/compact.png"), -moz-linear-gradient(top, #68abe6, #93e8ff); /* FF3.6+ */ background-image: url("images/compact.png"), -ms-linear-gradient(top, #68abe6, #93e8ff); /* IE10 */ background-image: url("images/compact.png"), -o-linear-gradient(top, #68abe6, #93e8ff); /* Opera 11.10+ */ background-image: url("images/compact.png"), linear-gradient(top, #68abe6, #93e8ff); /* W3C */ background-position: center; background-repeat: no-repeat; }
-div.torrent_footer #prefs-button { display: none; }
 
 /****
 *****

web/style/transmission/common.scss

@@ -181,8 +181,14 @@ div#toolbar
 		@include buttonImage('images/toolbar-pointer.png', $idle-color-top, $idle-color-bottom, $active-color-top, $active-color-bottom);
 		margin-left: $separator-spacing;
 	}
-	> div#toolbar-inspector {
+
+	> div#toolbar-prefs {
 		@include leftRoundedBox(5px);
+		@include buttonImage('images/toolbar-wrench.png', $idle-color-top, $idle-color-bottom, $active-color-top, $active-color-bottom);
+		border-right-width: 0px;
+		float: right;
+	}
+	> div#toolbar-inspector {
 		@include rightRoundedBox(5px);
 		@include buttonImage('images/toolbar-info.png', $idle-color-top, $idle-color-bottom, $active-color-top, $active-color-bottom);
 		float: right;
@@ -972,10 +978,6 @@ div.torrent_footer
 		@include rightRoundedBox(5px);
 		@include buttonImage('images/compact.png', $idle-color-top, $idle-color-bottom, $active-color-top, $active-color-bottom);
 	}
-
-	#prefs-button {
-		display: none;
-	}
 }
 
 /****

web/style/transmission/images/Makefile.am

@@ -23,6 +23,6 @@ dist_data_DATA = \
   toolbar-pause.png \
   toolbar-pointer.png \
   toolbar-start.png \
-  turtle.png \
-  wrench.png
+  toolbar-wrench.png \
+  turtle.png