(trunk web) make the corners of the footer buttons handle transparency.

2025-12-24 20:35:36 +00:00 · 2011-08-30 00:16:34 +00:00
parent e23697142e
commit 05155db22c
5 changed files with 105 additions and 156 deletions
--- a/web/images/graphics/chrome.png
+++ b/web/images/graphics/chrome.png
--- a/web/index.html
+++ b/web/index.html
@@ -471,7 +471,6 @@
 		</div>

 		<div class="torrent_footer">
-			<div id="disk_space_container"></div>
 			<ul id="settings_menu">
 				<li id="button">&nbsp;
 					<ul id="footer_super_menu">
@@ -540,9 +539,8 @@
 					</ul>
 				</li>
 			</ul>
+			<div id="turtle-button">&nbsp;</div>
 			<div id="compact-button">&nbsp;</div>
-			<div id="turtle_button">&nbsp;</div>
-			<div style="clear: both; visibility: hidden;"></div>
 		</div>

 		<div class="contextMenu" id="torrent_context_menu">
--- a/web/javascript/transmission.js
+++ b/web/javascript/transmission.js
@@ -53,8 +53,8 @@ Transmission.prototype =
 		$('#open_link').click(function(e) { tr.openTorrentClicked(e); });
 		$('#upload_confirm_button').click(function(e) { tr.confirmUploadClicked(e); return false;});
 		$('#upload_cancel_button').click(function(e) { tr.hideUploadDialog(); return false; });
-		$('#turtle_button').click(function() { tr.toggleTurtleClicked(); return false; });
-		$('#compact-button').click(function() { tr.toggleCompactClicked(); return false; });
+		$('#turtle-button').click(function() { tr.toggleTurtleClicked(); });
+		$('#compact-button').click(function() { tr.toggleCompactClicked(); });
 		$('#prefs-tab-general').click(function() { tr.selectPrefsTab('general'); });
 		$('#prefs-tab-speed').click(function() { tr.selectPrefsTab('speed'); });
 		$('#prefs-tab-peers').click(function() { tr.selectPrefsTab('peers'); });
@@ -752,19 +752,12 @@ Transmission.prototype =
 	},

 	updateTurtleButton: function() {
-		var t;
-		var w = $('#turtle_button');
-		if (this[Prefs._TurtleState]) {
-			w.addClass('turtleEnabled');
-			w.removeClass('turtleDisabled');
-			t = [ 'Click to disable Temporary Speed Limits' ];
-		} else {
-			w.removeClass('turtleEnabled');
-			w.addClass('turtleDisabled');
-			t = [ 'Click to enable Temporary Speed Limits' ];
-		}
-		t.push('(', Transmission.fmt.speed(this._prefs[RPC._TurtleUpSpeedLimit]), 'up,',
-		             Transmission.fmt.speed(this._prefs[RPC._TurtleDownSpeedLimit]), 'down)');
+		var enabled = this[Prefs._TurtleState],
+		    w = $('#turtle-button'),
+		    t = [ 'Click to ', (enabled?'disable':'enable'), ' Temporary Speed Limits',
+		          '(', Transmission.fmt.speed(this._prefs[RPC._TurtleUpSpeedLimit]), 'up,',
+		               Transmission.fmt.speed(this._prefs[RPC._TurtleDownSpeedLimit]), 'down)' ];
+		w.toggleClass('enabled',enabled);
 		w.attr('title', t.join(' '));
 	},

--- a/web/stylesheets/common.css
+++ b/web/stylesheets/common.css
@@ -28,6 +28,17 @@ a {
 	outline: 0;
 }

+#toolbar,
+#statusbar,
+.torrent_footer {
+	background-color: #B9B9B9; /* fallback color if gradients are not supported */
+	background-image: -webkit-gradient(linear, left top, left bottom, from(#C9C9C9), to(#A7A7A7)); 
+	background-image: -webkit-linear-gradient(top, #C9C9C9, #A7A7A7); 
+	background-image:    -moz-linear-gradient(top, #C9C9C9, #A7A7A7); 
+	background-image:     -ms-linear-gradient(top, #C9C9C9, #A7A7A7); 
+	background-image:      -o-linear-gradient(top, #C9C9C9, #A7A7A7); 
+	background-image:         linear-gradient(top, #C9C9C9, #A7A7A7); /* standard, but currently unimplemented */
+}

 /***
 ****
@@ -39,7 +50,6 @@ a {
 	width: 100%;
 	height: 75px;
 	margin: 0;
-	background: transparent url('../images/graphics/chrome.png') left top repeat-x;
        border: 1px outset #AEBBCB;
 	overflow: hidden;
 	-moz-user-select: none;
@@ -126,7 +136,6 @@ li#inspector       div:active div.toolbar_image { background-position: right -22
 ***/

 #statusbar {
-	background: #ACACAC;
 	border: 1px outset #AEBBCB;
 	height: 24px;
 	width: 100%;
@@ -864,90 +873,66 @@ li.inspector_torrent_file_list_entry.complete div.file_priority_control {
 *--------------------------------------*/

 div.torrent_footer {
-	background: #aaa url('../images/graphics/chrome.png') left -142px repeat-x;
+	height: 22px;
 	border-top: 1px solid #555;
 	bottom: 0;
-	height: 22px;
 	position: fixed;
 	width: 100%;
 	z-index: 3;
 }

+div.torrent_footer > * {
+	position: relative;
+	float: left;
+	margin: 2px 4px;
+}
+div.torrent_footer > *,
 div.torrent_footer ul#settings_menu li#button {
-	height: 22px;
-	width: 32px !important;
-	background: transparent url('../images/graphics/chrome.png') left -75px no-repeat;
-	margin: 0 0 0 3px;
-	padding: 0;
-	float: left;
-	position: relative;
+	height: 18px;
+	width: 32px;
+	cursor: pointer;
 	-moz-user-select: none;
 	-webkit-user-select: none;
 }

-div.torrent_footer ul#settings_menu li#button:active {
-	background: transparent url('../images/graphics/chrome.png') -32px -75px no-repeat;
+div.torrent_footer ul#settings_menu li#button {
+	background: transparent url('../images/graphics/chrome.png') left top no-repeat;
+	padding: 0;
+	position: relative;
 }
-
+div.torrent_footer ul#settings_menu li#button:active,
 div.torrent_footer ul#settings_menu li#button:hover {
-	background: transparent url('../images/graphics/chrome.png') -32px -75px no-repeat;
+	background-position: -32px top;
 }

-div.torrent_footer div#disk_space_container {
-	float: right;
-	font-size: 1.1em;
-	line-height: 22px;
-	vertical-align: middle;
-	margin: 0 20px 0 0;
-	padding: 0px;
+#turtle-button {
+	background: transparent url('../images/graphics/chrome.png') left -18px no-repeat;
+}
+#turtle-button:active,
+#turtle-button:hover {
+	background-position: -32px -18px;
+}
+#turtle-button.enabled {
+	background-position: left -36px;
+}
+#turtle-button.enabled:active,
+#turtle-button.enabled:hover {
+	background-position: -32px -36px;
 }

-div.torrent_footer div#turtle_button {
-	height: 22px;
-	width: 32px !important;
-	margin: 0 0 0 38px;
-	padding: 0;
-	cursor: pointer;
-	-moz-user-select: none;
-	-webkit-user-select: none;
+#compact-button {
+        background: transparent url('../images/graphics/chrome.png') left -54px no-repeat;
 }
-
-.turtleEnabled {
-	background: transparent url('../images/graphics/chrome.png') left -119px no-repeat;
+#compact-button:active,
+#compact-button:hover {
+	background-position: -32px -54px;
 }
-.turtleEnabled:active {
-	background: transparent url('../images/graphics/chrome.png') -32px -119px no-repeat;
+#compact-button.enabled {
+	background-position: left -72px;
 }
-.turtleDisabled {
-	background: transparent url('../images/graphics/chrome.png') left -97px no-repeat;
-}
-.turtleDisabled:active {
-	background: transparent url('../images/graphics/chrome.png') -32px -97px no-repeat;
-}
-
-div.torrent_footer #compact-button {
-	height: 22px;
-	width: 32px !important;
-	visibility: visible;
-	padding: 0;
-	float: left;
-	margin-left: 38px;
-	position: relative;
-	cursor: pointer;
-	-moz-user-select: none;
-	-webkit-user-select: none;
-}
-div.torrent_footer #compact-button {
-        background: transparent url('../images/graphics/chrome.png') left -185px no-repeat;
-}
-div.torrent_footer #compact-button:active {
-        background: transparent url('../images/graphics/chrome.png') -32px -185px no-repeat;
-}
-div.torrent_footer #compact-button.enabled {
-        background: transparent url('../images/graphics/chrome.png') left -163px no-repeat;
-}
-div.torrent_footer #compact-button.enabled:active {
-        background: transparent url('../images/graphics/chrome.png') -32px -163px no-repeat;
+#compact-button.enabled:active,
+#compact-button.enabled:hover {
+	background-position: -32px -72px;
 }


@@ -1284,17 +1269,20 @@ div#prefs_container div#pref_error {
 .trans_menu {
 	margin: 0;
 	padding: 0;
-	cursor: default;
 }

-.trans_menu, .trans_menu ul {
+.trans_menu,
+.trans_menu ul {
 	list-style: none;
 }

 .trans_menu ul {
+	/* place it right above the button */
+	position: relative;
+	bottom: 18px;
+
 	min-width: 210px;
-	background-color: #fff;
-	opacity: .98;
+	background-color: white;
 	padding: 5px 0;
 	text-align: left;
 	list-style: none;
@@ -1310,7 +1298,7 @@ div#prefs_container div#pref_error {
 	min-width: 175px;
 }

-.trans_menu li {
+.trans_menu > * li {
 	margin: 0;
 	padding: 0 10px 2px 20px !important;
 	color: #000;
@@ -1327,7 +1315,8 @@ div#prefs_container div#pref_error {
 	text-shadow: none;
 }

-.trans_menu li.separator, .trans_menu li.separator.hover {
+.trans_menu li.separator,
+.trans_menu li.separator.hover {
 	border-top: 1px solid #ddd;
 	margin: 5px 0;
 	padding: 0px;
@@ -1343,7 +1332,7 @@ div#prefs_container div#pref_error {
 }

 .trans_menu li.hover li.hover span.arrow, .trans_menu li.hover li.hover li.hover span.selected {
-	color: #fff;
+	color: white;
 }

 .trans_menu span.selected {
@@ -1365,21 +1354,11 @@ div#prefs_container div#pref_error {
 	margin: 0;
 }

-.trans_menu li.main {
-	float: left;
-	padding: 0 !important;
-	width: 30px !important;
-}
-
 .trans_menu li.main li {
 	z-index: 2;
 	min-width: 78px;
 }

-.trans_menu li.main.active {
-	background: transparent url('../images/graphics/chrome.png') right -75px no-repeat !important;
-}
-
 .trans_menu a {
 	text-decoration: none;
 	cursor: default;
--- a/web/stylesheets/mobile.css
+++ b/web/stylesheets/mobile.css
@@ -857,9 +857,8 @@ ul.single_file li.inspector_torrent_file_list_entry>.file_priority_control, li.i
 *--------------------------------------*/

 div.torrent_footer {
-	margin: -1px 0 0;
+	margin: 0px;
 	height: 20px;
-	background: #ddd url('../images/graphics/filter_bar.png') repeat-x left -51px;
 	border-top: 1px solid #777;
 	position: relative;
 	width: 100%;
@@ -868,6 +867,14 @@ div.torrent_footer {
 	color: #222;
 	text-shadow: 0 1px 1px #fff;
 	overflow: hidden;
+
+        background-color: #B9B9B9; /* fallback color if gradients are not supported */
+        background-image: -webkit-gradient(linear, left top, left bottom, from(#C9C9C9), to(#A7A7A7));
+        background-image: -webkit-linear-gradient(top, #C9C9C9, #A7A7A7);
+        background-image:    -moz-linear-gradient(top, #C9C9C9, #A7A7A7);
+        background-image:     -ms-linear-gradient(top, #C9C9C9, #A7A7A7);
+        background-image:      -o-linear-gradient(top, #C9C9C9, #A7A7A7);
+        background-image:         linear-gradient(top, #C9C9C9, #A7A7A7); /* standard, but currently unimplemented */
 }

 div.torrent_footer div#disk_space_container, div.torrent_footer a#preferences_link {
@@ -904,69 +911,41 @@ iframe#torrent_upload_frame {
 	margin: 0;
 }

-div.torrent_footer #compact-button {
+div.torrent_footer #compact-button,
+div.torrent_footer #turtle-button {
 	position: absolute;
-	top: 0px;
-	right: 0px;
-	margin: 2px;
 	height: 18px;
 	width: 32px !important;
-}
-div.torrent_footer #compact-button {
-	background: transparent url('../images/graphics/chrome.png') left -31px no-repeat;
-}
-div.torrent_footer #compact-button.active {
-	background: transparent url('../images/graphics/chrome.png') -32px -31px no-repeat;
-}
-div.torrent_footer #compact-button.enabled {
-	background: transparent url('../images/graphics/chrome.png') left -53px no-repeat;
-}
-div.torrent_footer #compact-button.enabled.active {
-	background: transparent url('../images/graphics/chrome.png') -32px -53px no-repeat;
+	top: 0px;
+	margin: 2px;
 }

-div.torrent_footer div#turtle_button {
-	position: absolute;
-	top: 0px;
+#compact-button {
+	right: 0px;
+        background: transparent url('../images/graphics/chrome.png') left -54px no-repeat;
+}
+#compact-button:active {
+        background-position: -32px -54px;
+}
+#compact-button.enabled {
+        background-position: left -72px;
+}
+#compact-button.enabled:active {
+        background-position: -32px -72px;
+}
+
+#turtle-button {
 	left: 0px;
-	margin: 2px;
-	height: 18px;
-	width: 32px !important;
+        background: transparent url('../images/graphics/chrome.png') left -18px no-repeat;
 }
-
-.turtleEnabled {
-	background: transparent url('../images/graphics/chrome.png') left -121px no-repeat;
+#turtle-button:active {
+        background-position: -32px -18px;
 }
-.turtleEnabled:active {
-	background: transparent url('../images/graphics/chrome.png') -32px -121px no-repeat;
+#turtle-button.enabled {
+        background-position: left -36px;
 }
-.turtleDisabled {
-	background: transparent url('../images/graphics/chrome.png') left -99px no-repeat;
-}
-.turtleDisabled:active {
-	background: transparent url('../images/graphics/chrome.png') -32px -99px no-repeat;
-}
-
-div.torrent_footer #compact-button {
-	position: absolute;
-	top: 0px;
-	right: 0px;
-	margin: 2px;
-	height: 18px;
-	width: 32px !important;
-        visibility: visible;
-}
-div.torrent_footer #compact-button {
-        background: transparent url('../images/graphics/chrome.png') left -187px no-repeat;
-}
-div.torrent_footer #compact-button:active {
-        background: transparent url('../images/graphics/chrome.png') -32px -187px no-repeat;
-}
-div.torrent_footer #compact-button.enabled {
-        background: transparent url('../images/graphics/chrome.png') left -165px no-repeat;
-}
-div.torrent_footer #compact-button.enabled:active {
-        background: transparent url('../images/graphics/chrome.png') -32px -165px no-repeat;
+#turtle-button.enabled:active {
+        background-position: -32px -36px;
 }

 /*--------------------------------------