Permalink
Browse files

Listview: Implement classes option

Fixes gh-7692
Fixes gh-7670
  • Loading branch information...
gabrielschulhof authored and arschmitz committed Jul 8, 2015
1 parent 3cf2944 commit b81b0c610a3e6ac6cf5c8b8421a72b29460a3032
Showing with 1,261 additions and 1,157 deletions.
  1. +7 −0 build/tasks/options/jscs.js
  2. +1 −1 css/structure/jquery.mobile.fixedToolbar.css
  3. +8 −7 css/structure/jquery.mobile.forms.select.css
  4. +36 −47 css/structure/jquery.mobile.listview.css
  5. +1 −1 css/themes/default/jquery.mobile.theme.css
  6. +3 −3 demos/_assets/css/jqm-demos.css
  7. +2 −1 demos/_assets/js/jqm-demos.js
  8. +1 −1 demos/backbone-requirejs/backbone-require.html
  9. +12 −12 demos/external-widgets/page-d.php
  10. +4 −3 demos/listview-autodividers-linkbar/autodividers-linkbar.js
  11. +5 −5 demos/listview-collapsible-item-flat/index.php
  12. +16 −16 demos/listview-collapsible-item-indented/index.php
  13. +16 −16 demos/listview-grid/index.php
  14. +8 −9 demos/listview-grid/listview-grid.css
  15. +15 −15 demos/listview-grid/listview-grid.html
  16. +46 −43 demos/listview/index.php
  17. +7 −7 demos/map-list-toggle/index.php
  18. +2 −2 demos/map-list-toggle/showMore.html
  19. +1 −1 demos/panel-styling/index.php
  20. +16 −16 demos/swipe-list/index.php
  21. +3 −3 demos/theme-classic/index.php
  22. +2 −2 demos/theme-classic/theme-classic.css
  23. +3 −3 demos/theme-default/index.php
  24. +12 −12 demos/toolbar-fixed-persistent/page-d.php
  25. +1 −0 js/index.php
  26. +1 −0 js/jquery.mobile.js
  27. +4 −4 js/widgets/forms/select.custom.js
  28. +26 −25 js/widgets/forms/select.js
  29. +75 −24 js/widgets/listview.autodividers.js
  30. +45 −0 js/widgets/listview.backcompat.js
  31. +1 −1 js/widgets/listview.hidedividers.js
  32. +179 −143 js/widgets/listview.js
  33. +1 −1 tests/functional/autodividers.html
  34. +1 −1 tests/functional/swipe.html
  35. +43 −0 tests/integration/listview/autodividers-tests.html
  36. +57 −0 tests/integration/listview/autodividers_core.js
  37. +47 −0 tests/integration/listview/backcompat-tests.html
  38. +102 −0 tests/integration/listview/backcompat_core.js
  39. +142 −207 tests/integration/listview/index.html
  40. +294 −496 tests/integration/listview/listview_core.js
  41. +0 −15 tests/integration/listview/push-state-disabled-tests.html
  42. +2 −1 tests/integration/select/select_core.js
  43. +13 −13 tests/unit/kitchensink/index.html
@@ -46,8 +46,15 @@ module.exports = {
"js/widgets/popup.js",
"js/widgets/loader.js",
"js/widgets/loader.backcompat.js",
"js/widgets/listview.autodividers.js",
"js/widgets/listview.backcompat.js",
"js/widgets/listview.hidedividers.js",
"js/widgets/listview.js",
// Tests
"tests/integration/listview/autodividers_core.js",
"tests/integration/listview/listview_core.js",
"tests/integration/listview/backcompat_core.js",
"tests/unit/textinput/settings.js",
"tests/unit/textinput/textinput_core.js",
"tests/integration/dialog/dialog_events.js",
@@ -71,6 +71,6 @@
z-index: 10;
}
/* workarounds for other widgets */
.ui-toolbar-android-2x-fixed .ui-li-has-thumb {
.ui-toolbar-android-2x-fixed .ui-listview-item-has-thumbnail {
-webkit-transform: translate3d(0,0,0);
}
@@ -54,24 +54,25 @@
display: block;
}
/* ui-li-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-li-has-count.ui-button {
/* 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 {
padding-right: 2.8125em;
}
.ui-select .ui-li-has-count.ui-icon-end {
.ui-select .ui-listview-item-has-count.ui-icon-end {
padding-right: 4.6875em;
}
.ui-select .ui-icon-end .ui-li-count {
.ui-select .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-li-count {
.ui-select.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-li-count) {
.ui-select .ui-button > span:not(.ui-listview-item-count-bubble) {
display: block;
text-overflow: ellipsis;
overflow: hidden !important;
@@ -133,7 +134,7 @@
border-bottom-width: 0;
}
.ui-selectmenu .ui-button.ui-li-divider {
.ui-selectmenu .ui-button.ui-listview-item-divider {
cursor: default;
}
@@ -23,8 +23,8 @@
position: relative;
overflow: visible;
}
.ui-listview > .ui-li-static,
.ui-listview > .ui-li-divider,
.ui-listview > .ui-listview-item-static,
.ui-listview > .ui-listview-item-divider,
.ui-listview > li > a.ui-button {
margin: 0;
display: block;
@@ -37,20 +37,20 @@
.ui-listview > li > .ui-button:focus {
z-index: 1;
}
.ui-listview > .ui-li-static,
.ui-listview > .ui-li-divider,
.ui-listview > .ui-listview-item-static,
.ui-listview > .ui-listview-item-divider,
.ui-listview > li > a.ui-button {
border-width: 1px 0 0 0;
border-style: solid;
}
.ui-listview-inset > .ui-li-static,
.ui-listview-inset > .ui-li-divider,
.ui-listview-inset > .ui-listview-item-static,
.ui-listview-inset > .ui-listview-item-divider,
.ui-listview-inset > li > a.ui-button {
border-right-width: 1px;
border-left-width: 1px;
}
.ui-listview > .ui-li-static.ui-last-child,
.ui-listview > .ui-li-divider.ui-last-child,
.ui-listview > .ui-listview-item-static.ui-last-child,
.ui-listview > .ui-listview-item-divider.ui-last-child,
.ui-listview > li.ui-last-child > a.ui-button {
border-bottom-width: 1px;
}
@@ -76,7 +76,7 @@
-webkit-border-bottom-left-radius: inherit;
border-bottom-left-radius: inherit;
}
.ui-listview > li.ui-li-has-alt > a.ui-button {
.ui-listview > li.ui-listview-item-has-alternate > a.ui-button {
-webkit-border-top-right-radius: 0;
border-top-right-radius: 0;
-webkit-border-bottom-right-radius: 0;
@@ -94,49 +94,43 @@
-webkit-border-bottom-right-radius: inherit;
border-bottom-right-radius: inherit;
}
.ui-listview > li.ui-first-child img:first-child:not(.ui-li-icon) {
.ui-listview > li.ui-first-child img:first-child:not(.ui-listview-item-icon) {
-webkit-border-top-left-radius: inherit;
border-top-left-radius: inherit;
}
.ui-listview > li.ui-last-child img:first-child:not(.ui-li-icon) {
.ui-listview > li.ui-last-child img:first-child:not(.ui-listview-item-icon) {
-webkit-border-bottom-left-radius: inherit;
border-bottom-left-radius: inherit;
}
.ui-collapsible-content > .ui-listview:not(.ui-listview-inset) {
-webkit-border-radius: inherit;
border-radius: inherit;
}
.ui-listview > .ui-li-static {
.ui-listview > .ui-listview-item-static {
padding: .7em 1em;
}
.ui-listview > .ui-li-divider {
.ui-listview > .ui-listview-item-divider {
padding: .5em 1.143em;
font-size: 14px;
font-weight: bold;
cursor: default;
outline: 0; /* Dividers in custom selectmenus have tabindex */
}
.ui-listview > .ui-li-has-count > .ui-button,
.ui-listview > .ui-li-static.ui-li-has-count,
.ui-listview > .ui-li-divider.ui-li-has-count {
.ui-listview > .ui-listview-item-has-count > .ui-button,
.ui-listview > .ui-listview-item-static.ui-listview-item-has-count,
.ui-listview > .ui-listview-item-divider.ui-listview-item-has-count {
padding-right: 2.8125em;
}
.ui-listview > .ui-li-has-count > .ui-icon-end {
.ui-listview > .ui-listview-item-has-count > .ui-icon-end {
padding-right: 4.6875em;
}
.ui-listview > .ui-li-has-thumb > .ui-button,
.ui-listview > .ui-li-static.ui-li-has-thumb {
.ui-listview > .ui-listview-item-has-thumbnail > .ui-button,
.ui-listview > .ui-listview-item-static.ui-listview-item-has-thumbnail {
min-height: 3.625em;
padding-left: 6.25em;
}
/* ui-li-has-icon deprecated in 1.4. TODO: remove in 1.5 */
.ui-listview > .ui-li-has-icon > .ui-button,
.ui-listview > .ui-li-static.ui-li-has-icon {
min-height: 1.25em;
padding-left: 2.5em;
}
/* Used by both listview and custom multiple select button */
.ui-li-count {
.ui-listview-item-count-bubble {
position: absolute;
font-size: 12.5px;
font-weight: bold;
@@ -151,27 +145,22 @@
top: 50%;
margin-top: -.88em;
}
.ui-listview .ui-icon-end .ui-li-count {
.ui-listview .ui-listview-item-count-bubble {
background-color: inherit;
border-color: inherit;
}
.ui-listview .ui-icon-end .ui-listview-item-count-bubble {
right: 3.2em;
}
.ui-listview .ui-li-has-thumb > img:first-child,
.ui-listview .ui-li-has-thumb > .ui-button > img:first-child,
.ui-listview .ui-li-has-thumb .ui-li-thumb {
.ui-listview .ui-listview-item-has-thumbnail > img:first-child,
.ui-listview .ui-listview-item-has-thumbnail > .ui-button > img:first-child,
.ui-listview .ui-listview-item-has-thumbnail .ui-listview-item-thumbnail {
position: absolute;
left: 0;
top: 0;
max-height: 5em;
max-width: 5em;
}
/* ui-li-has-icon deprecated in 1.4. TODO: remove in 1.5 */
.ui-listview > .ui-li-has-icon > img:first-child,
.ui-listview > .ui-li-has-icon > .ui-button > img:first-child {
position: absolute;
left: .625em;
top: .9em;
max-height: 1em;
max-width: 1em;
}
.ui-listview > li h1,
.ui-listview > li h2,
.ui-listview > li h3,
@@ -195,18 +184,18 @@
overflow: hidden;
white-space: nowrap;
}
.ui-listview .ui-li-aside {
.ui-listview .ui-listview-item-aside {
position: absolute;
top: 1em;
right: 3.333em;
margin: 0;
text-align: right;
}
.ui-listview > li.ui-li-has-alt > .ui-button {
.ui-listview > li.ui-listview-item-has-alternate > .ui-button {
margin-right: 2.5em;
border-right-width: 0;
}
.ui-listview > li.ui-li-has-alt > .ui-button + .ui-button {
.ui-listview > li.ui-listview-item-has-alternate > .ui-button + .ui-button {
position: absolute;
width: 2.5em;
height: 100%;
@@ -220,22 +209,22 @@
padding: 0;
z-index: 2;
}
.ui-listview-inset > li.ui-li-has-alt > .ui-button + .ui-button {
.ui-listview-inset > li.ui-listview-item-has-alternate > .ui-button + .ui-button {
border-right-width: 1px;
}
.ui-listview > li.ui-li-has-alt > .ui-button + .ui-button:focus {
.ui-listview > li.ui-listview-item-has-alternate > .ui-button + .ui-button:focus {
z-index: 3;
}
ol.ui-listview,
ol.ui-listview > .ui-li-divider {
ol.ui-listview > .ui-listview-item-divider {
counter-reset: listnumbering;
}
ol.ui-listview > li > .ui-button,
ol.ui-listview > li.ui-li-static {
ol.ui-listview > li.ui-listview-item-static {
vertical-align: middle;
}
ol.ui-listview > li > .ui-button:first-child:before,
ol.ui-listview > li.ui-li-static:before,
ol.ui-listview > li.ui-listview-item-static:before,
ol.ui-listview > li.ui-field-contain > label:before,
ol.ui-listview > li.ui-field-contain > .ui-controlgroup-label:before {
display: inline-block;
@@ -94,7 +94,7 @@ label.ui-button {
/* Flipswitch */
.ui-flipswitch.ui-corner-all,
/* Count bubble */
.ui-li-count {
.ui-listview-item-count-bubble {
-webkit-border-radius: .3125em /*{global-radii-buttons}*/;
border-radius: .3125em /*{global-radii-buttons}*/;
}
@@ -205,7 +205,7 @@
}
.jqm-demos .jqm-list .ui-button,
.jqm-demos .jqm-list .ui-button:visited,
.jqm-demos .jqm-list .ui-li-divider {
.jqm-demos .jqm-list .ui-listview-item-divider {
font-family: 'Open Sans', sans-serif;
font-weight: 300;
text-shadow: none !important;
@@ -217,15 +217,15 @@
.jqm-demos .jqm-list .ui-button.ui-button-active {
color: #fff;
}
.jqm-demos .jqm-list .ui-li-divider {
.jqm-demos .jqm-list .ui-listview-item-divider {
color: #3eb249;
}
/* Navmenu */
.jqm-navmenu-panel .ui-listview > li .ui-collapsible-heading {
margin: 0;
}
.jqm-navmenu-panel .ui-collapsible.ui-li-static {
.jqm-navmenu-panel .ui-collapsible.ui-listview-item-static {
padding: 0;
border: none !important;
}
@@ -153,7 +153,8 @@ $( document ).one( "pagecreate", ".jqm-demos", function( event ) {
$( this )
.find( "a" )
.append( "<span class='jqm-search-results-keywords ui-li-desc'>" + text + "</span>" );
.append( "<span class='jqm-search-results-keywords ui-listview-item-description'>" +
text + "</span>" );
});
});
@@ -77,7 +77,7 @@ <h1>Vehicles</h1>
<% _.each( collection.toJSON(), function( category, id ) { %>
<li class="ui-li-static">
<li class="ui-listview-item-static">
<%= category.type %>
</li>
@@ -31,57 +31,57 @@
<div class="ui-content" role="main">
<ul data-role="listview" data-theme="a" data-dividertheme="b" data-filter="true" data-filter-theme="a" data-filter-placeholder="Search messages...">
<li data-role="list-divider">Friday, October 8, 2010 <span class="ui-li-count">2</span></li>
<li data-role="list-divider">Friday, October 8, 2010 <span class="ui-listview-item-count-bubble">2</span></li>
<li><a href="#">
<h3>Stephen Weber</h3>
<p><strong>You've been invited to a meeting at Filament Group in Boston, MA</strong></p>
<p>Hey Stephen, if you're available at 10am tomorrow, we've got a meeting with the jQuery team.</p>
<p class="ui-li-aside"><strong>6:24</strong>PM</p>
<p class="ui-listview-item-aside"><strong>6:24</strong>PM</p>
</a></li>
<li><a href="#">
<h3>jQuery Team</h3>
<p><strong>Boston Conference Planning</strong></p>
<p>In preparation for the upcoming conference in Boston, we need to start gathering a list of sponsors and speakers.</p>
<p class="ui-li-aside"><strong>9:18</strong>AM</p>
<p class="ui-listview-item-aside"><strong>9:18</strong>AM</p>
</a></li>
<li data-role="list-divider">Thursday, October 7, 2010 <span class="ui-li-count">1</span></li>
<li data-role="list-divider">Thursday, October 7, 2010 <span class="ui-listview-item-count-bubble">1</span></li>
<li><a href="#">
<h3>Avery Walker</h3>
<p><strong>Re: Dinner Tonight</strong></p>
<p>Sure, let's plan on meeting at Highland Kitchen at 8:00 tonight. Can't wait! </p>
<p class="ui-li-aside"><strong>4:48</strong>PM</p>
<p class="ui-listview-item-aside"><strong>4:48</strong>PM</p>
</a></li>
<li data-role="list-divider">Wednesday, October 6, 2010 <span class="ui-li-count">3</span></li>
<li data-role="list-divider">Wednesday, October 6, 2010 <span class="ui-listview-item-count-bubble">3</span></li>
<li><a href="#">
<h3>Amazon.com</h3>
<p><strong>4-for-3 Books for Kids</strong></p>
<p>As someone who has purchased children's books from our 4-for-3 Store, you may be interested in these featured books.</p>
<p class="ui-li-aside"><strong>12:47</strong>PM</p>
<p class="ui-listview-item-aside"><strong>12:47</strong>PM</p>
</a></li>
<li><a href="#">
<h3>Mike Taylor</h3>
<p><strong>Re: This weekend in Maine</strong></p>
<p>Hey little buddy, sorry but I can't make it up to vacationland this weekend. Maybe next weekend?</p>
<p class="ui-li-aside"><strong>6:24</strong>AM</p>
<p class="ui-listview-item-aside"><strong>6:24</strong>AM</p>
</a></li>
<li><a href="#">
<h3>Redfin</h3>
<p><strong>Redfin listing updates for today</strong></p>
<p>There are 3 updates for the home on your watchlist: 1 updated MLS listing and 2 homes under contract.</p>
<p class="ui-li-aside"><strong>5:52</strong>AM</p>
<p class="ui-listview-item-aside"><strong>5:52</strong>AM</p>
</a></li>
<li data-role="list-divider">Tuesday, October 5, 2010 <span class="ui-li-count">3</span></li>
<li data-role="list-divider">Tuesday, October 5, 2010 <span class="ui-listview-item-count-bubble">3</span></li>
<li><a href="index.php">
<h3>Angela Smith</h3>
<p><strong>Link Request</strong></p>
<p>My name is Angela Smith, SEO Consultant. I've greatly enjoyed looking through your site and I was wondering if you'd be interested in providing a link</p>
<p class="ui-li-aside"><strong>6:24</strong>AM</p>
<p class="ui-listview-item-aside"><strong>6:24</strong>AM</p>
</a></li>
<li><a href="index.php">
<h3>Mike Taylor</h3>
<p><strong>This weekend in Maine</strong></p>
<p>Sounds good, let me check into our plans.</p>
<p class="ui-li-aside"><strong>6:24</strong>AM</p>
<p class="ui-listview-item-aside"><strong>6:24</strong>AM</p>
</a></li>
</ul>
Oops, something went wrong.

0 comments on commit b81b0c6

Please sign in to comment.