Fix for #2871: Added overlayTheme option to dialog widget

jquery-archive · Nov 5, 2011 · 26c48c8 · 26c48c8
1 parent c8d3461
commit 26c48c8
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 22 deletions.
diff --git a/css/themes/default/jquery.mobile.theme.css b/css/themes/default/jquery.mobile.theme.css
@@ -49,7 +49,8 @@
 .ui-bar-a .ui-link:visited {
     color: #2489CE /*{a-bar-link-visited}*/;
 }
-.ui-body-a {
+.ui-body-a,
+.ui-dialog.ui-overlay-a {
 	border: 1px solid 		#2A2A2A /*{a-body-border}*/;
 	background: 			#222222 /*{a-body-background-color}*/;
 	color: 					#fff /*{a-body-color}*/;
@@ -188,7 +189,8 @@
 .ui-bar-b .ui-link:visited {
     color: #ddf0f8 /*{b-bar-link-visited}*/;
 }
-.ui-body-b {
+.ui-body-b,
+.ui-dialog.ui-overlay-b {
 	border: 1px solid 		#C6C6C6 /*{b-body-border}*/;
 	background: 			#cccccc /*{b-body-background-color}*/;
 	color: 					#333333 /*{b-body-color}*/;
@@ -329,7 +331,8 @@
 .ui-bar-c button {
 	font-family: Helvetica, Arial, sans-serif /*{global-font-family}*/;
 }
-.ui-body-c {
+.ui-body-c,
+.ui-dialog.ui-overlay-c {
 	border: 1px solid 		#B3B3B3 /*{c-body-border}*/;
 	color: 					#333333 /*{c-body-color}*/;
 	text-shadow: 0 /*{c-body-shadow-x}*/ 1px /*{c-body-shadow-y}*/ 0 /*{c-body-shadow-radius}*/ #fff /*{c-body-shadow-color}*/;
@@ -470,7 +473,8 @@
     color: #2489CE /*{d-bar-link-visited}*/;
 }
 
-.ui-body-d {
+.ui-body-d,
+.ui-dialog.ui-overlay-d {
 	border: 1px solid 		#ccc /*{d-body-border}*/;
 	color: 					#333333 /*{d-body-color}*/;
 	text-shadow: 0 /*{d-body-shadow-x}*/ 1px /*{d-body-shadow-y}*/ 0 /*{d-body-shadow-radius}*/ 	#fff /*{d-body-shadow-color}*/;
@@ -610,7 +614,8 @@
     color: #2489CE /*{e-bar-link-visited}*/;
 }
 
-.ui-body-e {
+.ui-body-e,
+.ui-dialog.ui-overlay-e {
 	border: 1px solid 		#F7C942 /*{e-body-border}*/;
 	color: 					#333333 /*{e-body-color}*/;
 	text-shadow: 0 /*{e-body-shadow-x}*/ 1px /*{e-body-shadow-y}*/ 0 /*{e-body-shadow-radius}*/ 	#fff /*{e-body-shadow-color}*/;

diff --git a/css/themes/valencia/jquery.mobile.theme.css b/css/themes/valencia/jquery.mobile.theme.css
@@ -86,7 +86,8 @@
   color:                  #7cc4e7;
   font-weight: bold;
 }
-.ui-body-a {
+.ui-body-a,
+.ui-dialog.ui-overlay-a {
   font-weight: normal;
   border: 1px solid       #222;
   background:             #444;
@@ -199,7 +200,8 @@
   color:                  #7cc4e7; 
   font-weight: bold;
 }
-.ui-body-b { 
+.ui-body-b,
+.ui-dialog.ui-overlay-b {
   font-weight: normal;
   border: 1px solid       #999;
   background-color:             #e5e5e5;
@@ -298,7 +300,8 @@
 .ui-btn-down-c a.ui-link-inherit { 
   color:                  #111;
 }
-.ui-body-c {
+.ui-body-c,
+.ui-dialog.ui-overlay-c {
   border: 1px solid       #ddd;
   color:                  #333333;
   text-shadow: 0 1px 0px  #fff;
@@ -414,7 +417,8 @@
 .ui-body-d .ui-link-inherit { 
   color:                  #333333;
 }
-.ui-body-d { 
+.ui-body-d,
+.ui-dialog.ui-overlay-d {
   border: 1px solid       #aaa;
   color:                  #666;
   text-shadow: 0 1px 0px  #fff;
@@ -525,7 +529,8 @@
   text-decoration: none;
   text-shadow: 0 1px 0px  #fff;
 }
-.ui-body-e { 
+.ui-body-e,
+.ui-dialog.ui-overlay-e {
   font-weight: normal;
   border: 1px solid       #aaa;
   background:             #ccc;

diff --git a/js/jquery.mobile.dialog.js b/js/jquery.mobile.dialog.js
@@ -9,20 +9,15 @@
 $.widget( "mobile.dialog", $.mobile.widget, {
 	options: {
 		closeBtnText 	: "Close",
-		theme	: "a",
+		overlayTheme	: "a",
 		initSelector	: ":jqmData(role='dialog')"
 	},
 	_create: function() {
 		var self = this,
 			$el = this.element,
-			pageTheme = $el.attr( "class" ).match( /ui-body-[a-z]/ ),
 			headerCloseButton = $( "<a href='#' data-" + $.mobile.ns + "icon='delete' data-" + $.mobile.ns + "iconpos='notext'>"+ this.options.closeBtnText + "</a>" );
 
-		if( pageTheme.length ){
-			$el.removeClass( pageTheme[ 0 ] );
-		}
-
-		$el.addClass( "ui-body-" + this.options.theme );
+		$el.addClass( "ui-overlay-" + this.options.overlayTheme );
 
 		// Class the markup for dialog styling
 		// Set aria role

diff --git a/js/jquery.mobile.forms.select.custom.js b/js/jquery.mobile.forms.select.custom.js
@@ -17,14 +17,14 @@
 			isMultiple = widget.isMultiple = widget.select[ 0 ].multiple,
 			buttonId = selectID + "-button",
 			menuId = selectID + "-menu",
-			menuPage = $( "<div data-" + $.mobile.ns + "role='dialog' data-" +$.mobile.ns + "theme='"+ widget.options.overlayTheme +"'>" +
+			menuPage = $( "<div data-" + $.mobile.ns + "role='dialog' data-" +$.mobile.ns + "theme='"+ widget.options.theme +"' data-" +$.mobile.ns + "overlay-theme='"+ widget.options.overlayTheme +"'>" +
 				"<div data-" + $.mobile.ns + "role='header'>" +
 				"<div class='ui-title'>" + label.getEncodedText() + "</div>"+
 				"</div>"+
 				"<div data-" + $.mobile.ns + "role='content'></div>"+
 				"</div>" ).appendTo( $.mobile.pageContainer ).page(),
 
-			listbox =  $("<div>", { "class": "ui-selectmenu ui-selectmenu-hidden ui-overlay-shadow ui-corner-all ui-body-" + widget.options.overlayTheme + " " + $.mobile.defaultDialogTransition } ).insertAfter(screen),
+			listbox =  $("<div>", { "class": "ui-selectmenu ui-selectmenu-hidden ui-overlay-shadow ui-corner-all ui-overlay-" + widget.options.overlayTheme + " " + $.mobile.defaultDialogTransition } ).insertAfter(screen),
 
 			list = $( "<ul>", {
 				"class": "ui-selectmenu-list",
@@ -33,9 +33,7 @@
 				"aria-labelledby": buttonId
 			}).attr( "data-" + $.mobile.ns + "theme", widget.options.theme ).appendTo( listbox ),
 
-			header = $( "<div>", {
-				"class": "ui-header ui-bar-" + widget.options.theme
-			}).prependTo( listbox ),
+			header = $( "<div>" ).attr( "data-" + $.mobile.ns + "theme", widget.options.theme ).prependTo( listbox ),
 
 			headerTitle = $( "<h1>", {
 				"class": "ui-title"