From 26c48c8c6c1ff926ad35dc8a7bd9ba375c516fce Mon Sep 17 00:00:00 2001 From: Ghislain Seguin Date: Fri, 4 Nov 2011 22:33:33 -0700 Subject: [PATCH] Fix for #2871: Added overlayTheme option to dialog widget --- css/themes/default/jquery.mobile.theme.css | 15 ++++++++++----- css/themes/valencia/jquery.mobile.theme.css | 15 ++++++++++----- js/jquery.mobile.dialog.js | 9 ++------- js/jquery.mobile.forms.select.custom.js | 8 +++----- 4 files changed, 25 insertions(+), 22 deletions(-) diff --git a/css/themes/default/jquery.mobile.theme.css b/css/themes/default/jquery.mobile.theme.css index e6a94ecb309..a98ef3bd6ae 100644 --- 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 index 2e3c5a72fcb..5981b4ec5d4 100644 --- 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 index 4b81899daa9..1d1ea560a58 100644 --- 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 = $( ""+ this.options.closeBtnText + "" ); - 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 index e6881234218..2bccb6abd2f 100644 --- 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 = $( "
" + + menuPage = $( "
" + "
" + "
" + label.getEncodedText() + "
"+ "
"+ "
"+ "
" ).appendTo( $.mobile.pageContainer ).page(), - listbox = $("
", { "class": "ui-selectmenu ui-selectmenu-hidden ui-overlay-shadow ui-corner-all ui-body-" + widget.options.overlayTheme + " " + $.mobile.defaultDialogTransition } ).insertAfter(screen), + listbox = $("
", { "class": "ui-selectmenu ui-selectmenu-hidden ui-overlay-shadow ui-corner-all ui-overlay-" + widget.options.overlayTheme + " " + $.mobile.defaultDialogTransition } ).insertAfter(screen), list = $( "
    ", { "class": "ui-selectmenu-list", @@ -33,9 +33,7 @@ "aria-labelledby": buttonId }).attr( "data-" + $.mobile.ns + "theme", widget.options.theme ).appendTo( listbox ), - header = $( "
    ", { - "class": "ui-header ui-bar-" + widget.options.theme - }).prependTo( listbox ), + header = $( "
    " ).attr( "data-" + $.mobile.ns + "theme", widget.options.theme ).prependTo( listbox ), headerTitle = $( "

    ", { "class": "ui-title"