Skip to content
This repository has been archived by the owner on Oct 8, 2021. It is now read-only.

Commit

Permalink
Selectmenu: Implement classes option
Browse files Browse the repository at this point in the history 
Fixes gh-7731
Closes gh-8309
  • Loading branch information
Gabriel Schulhof committed Jun 23, 2016
1 parent 98b8873 commit fdbe5c7
Show file tree
Hide file tree
Showing 47 changed files with 1,529 additions and 649 deletions.
17 changes: 14 additions & 3 deletions css/structure/jquery.mobile.controlgroup.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,8 @@
margin: .5em 0;
}

.ui-controlgroup .ui-button {
.ui-controlgroup .ui-button,
.ui-controlgroup .ui-selectmenu {
margin: 0;
}

Expand Down Expand Up @@ -55,22 +56,32 @@
}

.ui-controlgroup-horizontal > .ui-button,
.ui-controlgroup-horizontal > .ui-selectmenu .ui-button,
.ui-controlgroup-horizontal > li > .ui-button {
border-left-width: 0;
}

.ui-controlgroup-horizontal > .ui-corner-left,
.ui-controlgroup-horizontal > li > .ui-corner-left {
.ui-controlgroup-horizontal > .ui-corner-all,
.ui-controlgroup-horizontal > .ui-selectmenu .ui-corner-left,
.ui-controlgroup-horizontal > .ui-selectmenu .ui-corner-all,
.ui-controlgroup-horizontal > li > .ui-corner-left,
.ui-controlgroup-horizontal > li > .ui-corner-all {
border-left-width: 1px;
}

.ui-controlgroup-vertical > .ui-button,
.ui-controlgroup-vertical > .ui-selectmenu .ui-button,
.ui-controlgroup-vertical > li > .ui-button {
border-top-width: 0;
}

.ui-controlgroup-vertical > .ui-corner-top,
.ui-controlgroup-vertical > li > .ui-corner-top {
.ui-controlgroup-vertical > .ui-corner-all,
.ui-controlgroup-vertical > .ui-selectmenu .ui-corner-top,
.ui-controlgroup-vertical > .ui-selectmenu .ui-corner-all,
.ui-controlgroup-vertical > li > .ui-corner-top,
.ui-controlgroup-vertical > li > .ui-corner-all {
border-top-width: 1px;
}

Expand Down
59 changes: 29 additions & 30 deletions css/structure/jquery.mobile.forms.select.css
View file
Original file line number Diff line number Diff line change
@@ -1,20 +1,19 @@
.ui-select {
.ui-selectmenu {
margin-top: .5em;
margin-bottom: .5em; /* no shorthand for margin because it would override margin-right for inline selects */
position: relative;
}
.ui-select > select {
.ui-selectmenu > select {
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(1px,1px,1px,1px);
}
.ui-select .ui-button {
.ui-selectmenu .ui-button {
margin: 0;
opacity: 1; /* Fixes #2588: When Windows Phone 7.5 (Mango) tries to calculate a numeric opacity for a select (including "inherit") without explicitly specifying an opacity on the parent to give it context, a bug appears where clicking elsewhere on the page after opening the select will open the select again. */
}
.ui-select .ui-button select {
.ui-selectmenu .ui-button select {
position: absolute;
top: 0;
left: 0;
Expand All @@ -35,114 +34,114 @@
}

/* Display none because of issues with IE/WP's filter alpha opacity */
.ui-select .ui-state-disabled select {
.ui-selectmenu .ui-state-disabled select {
display: none;
}

/* Because we add all classes of the select and option elements to the span... */
.ui-select span.ui-state-disabled {
.ui-selectmenu span.ui-state-disabled {
filter: Alpha(Opacity=100);
opacity: 1;
}
.ui-select .ui-button.ui-select-nativeonly {
.ui-selectmenu .ui-button.ui-selectmenu-nativeonly {
border-radius: 0;
border: 0;
}
.ui-select .ui-button.ui-select-nativeonly select {
.ui-selectmenu .ui-button.ui-selectmenu-nativeonly select {
opacity: 1;
text-indent: 0;
display: block;
}

/* ui-listview-item-count is styled in the listview CSS. We set padding and offset here because
select supports icon position while listview doesn't. */
.ui-select .ui-listview-item-has-count.ui-button {
.ui-selectmenu .ui-listview-item-has-count.ui-button {
padding-right: 2.8125em;
}
.ui-select .ui-listview-item-has-count.ui-icon-end {
.ui-selectmenu .ui-listview-item-has-count.ui-icon-end {
padding-right: 4.6875em;
}
.ui-select .ui-icon-end .ui-listview-item-count-bubble {
.ui-selectmenu .ui-icon-end .ui-listview-item-count-bubble {
right: 3.2em;
}

/* Count indicator position must be different for mini version. */
.ui-select.ui-mini .ui-btn-icon-right .ui-listview-item-count-bubble {
.ui-selectmenu.ui-mini .ui-btn-icon-right .ui-listview-item-count-bubble {
right: 2.5em;
}

/* We set the rules for the span as well to fix an issue on Chrome with text-overflow ellipsis for the button in combination with text-align center. */
.ui-select .ui-button > span:not(.ui-listview-item-count-bubble) {
display: block;
.ui-selectmenu .ui-button > span:not(.ui-listview-item-count-bubble) {
text-overflow: ellipsis;
overflow: hidden !important;
white-space: nowrap;
}

.ui-selectmenu.ui-popup {
.ui-selectmenu-custom.ui-popup {
min-width: 11em;
}

.ui-selectmenu .ui-page-dialog-contain {
.ui-selectmenu-custom .ui-page-dialog-contain {
overflow: hidden;
}

.ui-selectmenu .ui-header {
.ui-selectmenu-custom .ui-toolbar-header {
margin: 0;
padding: 0;
border-width: 0;
}
.ui-selectmenu.ui-page-dialog .ui-header {
.ui-selectmenu-custom.ui-page-dialog .ui-toolbar-header {
z-index: 1;
position: relative;
}
.ui-selectmenu.ui-popup .ui-header {
.ui-selectmenu-custom.ui-popup .ui-toolbar-header {
-webkit-border-bottom-right-radius: 0;
border-bottom-right-radius: 0;
-webkit-border-bottom-left-radius: 0;
border-bottom-left-radius: 0;
}

/* when no placeholder is defined in a multiple select, the header height doesn't even extend past the close button. this shim's content in there */
.ui-selectmenu.ui-popup .ui-header h1:after {
.ui-selectmenu-custom.ui-popup .ui-toolbar-header h1:after {
content: ".";
visibility: hidden;
}
.ui-selectmenu .ui-header .ui-title {
.ui-selectmenu-custom .ui-toolbar-header .ui-toolbar-title {
margin: 0 2.875em;
}
.ui-selectmenu.ui-page-dialog .ui-content {
.ui-selectmenu-custom.ui-page-dialog .ui-content {
overflow: visible;
z-index: 1;
}

.ui-selectmenu .ui-selectmenu-list {
.ui-selectmenu-custom .ui-selectmenu-custom-list {
margin: 0;
-webkit-border-radius: inherit;
border-radius: inherit;
}
.ui-header:not(.ui-screen-hidden) + .ui-selectmenu-list {
.ui-toolbar-header:not(.ui-screen-hidden) + .ui-selectmenu-custom-list {
-webkit-border-top-right-radius: 0;
border-top-right-radius: 0;
-webkit-border-top-left-radius: 0;
border-top-left-radius: 0;
}
.ui-header.ui-screen-hidden + .ui-selectmenu-list li.ui-first-child .ui-button {
.ui-toolbar-header.ui-screen-hidden + .ui-selectmenu-custom-list li.ui-first-child .ui-button {
border-top-width: 0;
}
.ui-selectmenu .ui-selectmenu-list li.ui-last-child .ui-button {
.ui-selectmenu-custom .ui-selectmenu-custom-list li.ui-last-child .ui-button {
border-bottom-width: 0;
}

.ui-selectmenu .ui-button.ui-listview-item-divider {
.ui-selectmenu-custom .ui-button.ui-listview-item-divider {
cursor: default;
}

.ui-selectmenu .ui-selectmenu-placeholder {
.ui-selectmenu-custom .ui-selectmenu-custom-placeholder {
display: none;
}

/* This is necessary because multi inline select menu hides if width exceeds device width. */
.ui-select.ui-btn-inline {
.ui-selectmenu.ui-button-inline {
float: left;
max-width: 100% ;
}
2 changes: 1 addition & 1 deletion css/structure/jquery.mobile.grid.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ li.ui-block-e {
margin-left: 0;
}
[class*="ui-block-"] > .ui-button,
[class*="ui-block-"] > .ui-select,
[class*="ui-block-"] > .ui-selectmenu,
[class*="ui-block-"] > .ui-checkbox,
[class*="ui-block-"] > .ui-radio,
[class*="ui-block-"] > button.ui-button-inline,
Expand Down
2 changes: 1 addition & 1 deletion css/themes/default/jquery.mobile.theme.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -599,7 +599,7 @@ html head + body .ui-body-b.ui-focus {
.ui-disabled,
.ui-state-disabled,
button[disabled],
.ui-select .ui-button.ui-state-disabled {
.ui-selectmenu .ui-button.ui-state-disabled {
filter: Alpha(Opacity=30);
opacity: .3;
cursor: default !important;
Expand Down
15 changes: 9 additions & 6 deletions demos/controlgroup-dynamic/index.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@
action = function() {
var action = $( "[name='radio-action']:checked" ).attr( "id" );
if ( $( $el[1] ).is( "select" ) && action === "hide" ) {
$el = $( $el[1] ).parents( ".ui-select" );
$el = $( $el[1] ).parents( ".ui-selectmenu" );
}
$el[ action ]();
group.controlgroup( "refresh" );
Expand All @@ -34,11 +34,14 @@

$el = $( "<a href='#'>Link " + counter + "</a>" ).bind( "click", action );
$( "#my-controlgroup" ).controlgroup( "container" )[ $( this ).attr( "id" ) ]( $el );
$el.buttonMarkup();

} else if ( widgetType === "select" ) {

$el = $( "<label for='widget" + counter + "'>Select " + counter + "</label><select id='widget" + counter + "'><option value='option1'>Select " + counter + "</option><option value='option2'>Select option</option></select>" );
$el = $( "<label for='widget" + counter + "' class='ui-hidden-accessible'>Select " + counter + "</label>" +
"<select id='widget" + counter + "'>" +
"<option value='option1'>Select " + counter + "</option>" +
"<option value='option2'>Select option</option>" +
"</select>" );
$( $el[ 1 ] ).bind( "change", action);
$( "#my-controlgroup" ).controlgroup( "container" )[ $( this ).attr( "id" ) ]( $el );
$( $el[ 1 ] ).selectmenu();
Expand Down Expand Up @@ -96,7 +99,7 @@

<form action="#" method="get">
<div class="ui-field-contain">
<fieldset data-role="controlgroup" data-mini="true">
<fieldset data-role="controlgroup" data-mini="true" data-type="horizontal">
<legend>Widget type</legend>

<input type="radio" name="radio-widget" id="link" value="link" checked="checked">
Expand All @@ -111,7 +114,7 @@
</div>

<div class="ui-field-contain">
<fieldset data-role="controlgroup" data-mini="true">
<fieldset data-role="controlgroup" data-mini="true" data-type="horizontal">
<legend>Action<br><small>on click/change</small></legend>

<input type="radio" name="radio-action" id="remove" value="remove" checked="checked">
Expand All @@ -126,7 +129,7 @@
</div>

<div class="ui-field-contain">
<fieldset data-role="controlgroup" data-mini="true">
<fieldset data-role="controlgroup" data-mini="true" data-type="horizontal">
<legend>Switch orientation</legend>

<input type="radio" name="radio-orientation" id="isVertical" value="isVertical" checked="checked">
Expand Down
Loading

0 comments on commit fdbe5c7

Please sign in to comment.