Permalink
Browse files

Listview: Simplified markup, no more buttonMarkup.

  • Loading branch information...
jaspermdegroot committed Apr 20, 2013
1 parent 0c38dda commit 78cb93362fe7143ad3cc5665d0ac185fd45e5ae1
Showing with 231 additions and 65 deletions.
  1. +218 −58 css/structure/jquery.mobile.listview.css
  2. +13 −7 js/widgets/listview.js
@@ -1,53 +1,102 @@
-.ui-listview { margin: 0; }
-ol.ui-listview, ol.ui-listview .ui-li-divider { counter-reset: listnumbering; }
-.ui-content .ui-listview, .ui-panel-inner > .ui-listview { margin: -15px; }
-.ui-collapsible-content > .ui-listview { margin: -10px -15px; }
-.ui-content .ui-listview-inset, .ui-panel-inner .ui-listview-inset { margin: 1em 0; }
-.ui-collapsible-content .ui-listview-inset { margin: .5em 0; }
-.ui-listview, .ui-li { list-style: none; padding: 0; }
-.ui-li, .ui-li.ui-field-contain { display: block; margin: 0; position: relative; overflow: visible; text-align: left; border-width: 0; border-top-width: 1px; }
-.ui-li.ui-btn, .ui-li.ui-field-contain, .ui-li-divider, .ui-li-static { margin: 0; }
-.ui-listview-inset .ui-li { border-right-width: 1px; border-left-width: 1px; }
-.ui-li.ui-last-child, .ui-li.ui-field-contain.ui-last-child { border-bottom-width: 1px; }
-.ui-collapsible-content > .ui-listview:not(.ui-listview-inset) > .ui-li.ui-first-child { border-top-width: 0; }
-.ui-collapsible-themed-content .ui-listview:not(.ui-listview-inset) > .ui-li.ui-last-child { border-bottom-width: 0; }
-.ui-li .ui-btn-text a.ui-link-inherit { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
-.ui-li-static { background-image: none; }
-.ui-li-divider { padding: .5em 15px; font-size: 14px; font-weight: bold; }
-ol.ui-listview .ui-link-inherit:before, ol.ui-listview .ui-li-static:before, .ui-li-dec { font-size: .8em; display: inline-block; padding-right: .3em; font-weight: normal; counter-increment: listnumbering; content: counter(listnumbering) ". "; }
-ol.ui-listview .ui-li-jsnumbering:before { content: "" !important; } /* to avoid chance of duplication */
-
-.ui-listview > li > .ui-btn:focus {
+.ui-listview,
+.ui-li {
+ margin: 0;
+ padding: 0;
+ list-style: none;
+}
+.ui-content .ui-listview,
+.ui-panel-inner > .ui-listview {
+ margin: -15px;
+}
+.ui-collapsible-content > .ui-listview {
+ margin: -10px -15px;
+}
+.ui-content .ui-listview-inset,
+.ui-panel-inner > .ui-listview-inset {
+ margin: 1em 0;
+}
+.ui-collapsible-content > .ui-listview-inset {
+ margin: .5em 0;
+}
+.ui-li {
+ display: block;
+ position: relative;
+ overflow: visible;
+}
+.ui-li-static,
+.ui-li-divider,
+.ui-li > .ui-btn {
+ margin: 0;
+ display: block;
+ position: relative;
+ text-align: left;
+ text-overflow: ellipsis;
+ overflow: hidden;

This comment has been minimized.

Show comment
Hide comment
@NewboO

NewboO Feb 11, 2014

Hi.

List items used to have overflow: visible before. I have a very specific plugin for a form in a listview, showing a kind of preview when focusing a text input, which needs to overflow out of its list item. Now, with position: relative and overflow: hidden, it can't work as I'd like to anymore (at least not without adding ugly JS code to simulate the same behaviour).
Is there a reason behind this change? Is it possible to consider changing overflow back to visible (at least for .ui-li-static) or does it imply any unwanted side effect?

Thanks.

@NewboO

NewboO Feb 11, 2014

Hi.

List items used to have overflow: visible before. I have a very specific plugin for a form in a listview, showing a kind of preview when focusing a text input, which needs to overflow out of its list item. Now, with position: relative and overflow: hidden, it can't work as I'd like to anymore (at least not without adding ugly JS code to simulate the same behaviour).
Is there a reason behind this change? Is it possible to consider changing overflow back to visible (at least for .ui-li-static) or does it imply any unwanted side effect?

Thanks.

+ white-space: nowrap;
+}
+.ui-li > .ui-btn:focus {
z-index: 1;
}
-
-.ui-listview .ui-li > .ui-btn-text {
- -webkit-border-radius: inherit;
- border-radius: inherit;
+.ui-li,
+.ui-li > .ui-btn {
+ border-width: 0;
+ border-top-width: 1px;
+}
+.ui-listview-inset .ui-li-static,
+.ui-listview-inset .ui-li-divider,
+.ui-listview-inset .ui-li > .ui-btn {
+ border-right-width: 1px;
+ border-left-width: 1px;
+}
+.ui-li-static.ui-last-child,
+.ui-li-divider.ui-last-child,
+.ui-li.ui-last-child > .ui-btn {
+ border-bottom-width: 1px;
+}
+.ui-collapsible-content > .ui-listview:not(.ui-listview-inset) > .ui-li-static.ui-first-child,
+.ui-collapsible-content > .ui-listview:not(.ui-listview-inset) > .ui-li-divider.ui-first-child,
+.ui-collapsible-content > .ui-listview:not(.ui-listview-inset) > .ui-li.ui-first-child > .ui-btn {
+ border-top-width: 0;
+}
+.ui-collapsible-themed-content .ui-listview:not(.ui-listview-inset) > .ui-li-static.ui-last-child,
+.ui-collapsible-themed-content .ui-listview:not(.ui-listview-inset) > .ui-li-divider.ui-last-child,
+.ui-collapsible-themed-content .ui-listview:not(.ui-listview-inset) > .ui-li.ui-last-child > .ui-btn {
+ border-bottom-width: 0;
}
.ui-listview > .ui-li.ui-first-child,
-.ui-listview .ui-btn.ui-first-child > .ui-li > .ui-btn-text > .ui-link-inherit {
+.ui-listview > .ui-li.ui-first-child > .ui-btn {
-webkit-border-top-right-radius: inherit;
border-top-right-radius: inherit;
-webkit-border-top-left-radius: inherit;
border-top-left-radius: inherit;
}
.ui-listview > .ui-li.ui-last-child,
-.ui-listview .ui-btn.ui-last-child > .ui-li > .ui-btn-text > .ui-link-inherit,
+.ui-listview > .ui-li.ui-last-child > .ui-btn,
.ui-collapsible-content > .ui-listview:not(.ui-listview-inset),
-.ui-collapsible-content > .ui-listview:not(.ui-listview-inset) .ui-li.ui-last-child {
+.ui-collapsible-content > .ui-listview:not(.ui-listview-inset) .ui-li.ui-last-child,
+.ui-collapsible-content > .ui-listview:not(.ui-listview-inset) .ui-li.ui-last-child > .ui-btn {
-webkit-border-bottom-right-radius: inherit;
border-bottom-right-radius: inherit;
-webkit-border-bottom-left-radius: inherit;
border-bottom-left-radius: inherit;
}
+.ui-listview > .ui-li.ui-li-has-alt > .ui-btn {
+ -webkit-border-top-right-radius: 0;
+ border-bottom-top-radius: 0;
+ -webkit-border-bottom-right-radius: 0;
+ border-bottom-right-radius: 0;
+}
.ui-listview > .ui-li.ui-first-child .ui-li-link-alt {
- -webkit-border-top-right-radius: inherit;
- border-top-right-radius: inherit;
+ -webkit-border-top-left-radius: 0;
+ border-top-left-radius: 0;
+ -webkit-border-top-right-radius: inherit;
+ border-bottom-top-radius: inherit;
}
.ui-listview > .ui-li.ui-last-child .ui-li-link-alt {
+ -webkit-border-bottom-left-radius: 0;
+ border-bottom-left-radius: 0;
-webkit-border-bottom-right-radius: inherit;
- border-bottom-right-radius: inherit;
+ border-bottom-right-radius: inherit;
}
.ui-listview > .ui-li.ui-first-child .ui-li-thumb:not(.ui-li-icon) {
-webkit-border-top-left-radius: inherit;
@@ -57,37 +106,152 @@ ol.ui-listview .ui-li-jsnumbering:before { content: "" !important; } /* to avoid
-webkit-border-bottom-left-radius: inherit;
border-bottom-left-radius: inherit;
}
-.ui-li>.ui-btn-inner { display: block; position: relative; padding: 0; }
-.ui-li .ui-btn-inner a.ui-link-inherit, .ui-li-static.ui-li { padding: .7em 15px; display: block; }
-.ui-li-has-thumb .ui-btn-inner a.ui-link-inherit, .ui-li-static.ui-li-has-thumb { min-height: 59px; padding-left: 100px; }
-.ui-li-has-icon .ui-btn-inner a.ui-link-inherit, .ui-li-static.ui-li-has-icon { min-height: 20px; padding-left: 40px; }
-.ui-li-has-count .ui-btn-inner a.ui-link-inherit, .ui-li-static.ui-li-has-count, .ui-li-divider.ui-li-has-count { padding-right: 45px; }
-.ui-li-has-arrow .ui-btn-inner a.ui-link-inherit, .ui-li-static.ui-li-has-arrow { padding-right: 40px; }
-.ui-li-has-arrow.ui-li-has-count .ui-btn-inner a.ui-link-inherit, .ui-li-static.ui-li-has-arrow.ui-li-has-count { padding-right: 75px; }
-.ui-li-heading { font-size: 16px; font-weight: bold; display: block; margin: .6em 0; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
-.ui-li-desc { font-size: 12px; font-weight: normal; display: block; margin: -.5em 0 .6em; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
-ol.ui-listview > .ui-li .ui-li-heading { display: inline-block; width: 100%; margin-left: -1.3em; text-indent: 1.3em; vertical-align: middle; }
-ol.ui-listview > .ui-li .ui-li-desc:not(.ui-li-aside) { text-indent: 1.55em; }
-.ui-li-thumb, .ui-listview .ui-li-icon { position: absolute; left: 1px; top: 0; max-height: 80px; max-width: 80px; }
-.ui-listview .ui-li-icon { max-height: 16px; max-width: 16px; left: 10px; top: .9em; }
-.ui-li-thumb, .ui-listview .ui-li-icon, .ui-li-content { float: left; margin-right: 10px; }
-.ui-li-aside { float: right; width: 50%; text-align: right; margin: .3em 0; }
+.ui-li > .ui-btn,
+.ui-li-static.ui-li {
+ padding: .7em 15px;
+}
+.ui-li-divider {
+ padding: .5em 15px;
+ font-size: 14px;
+ font-weight: bold;
+ cursor: default;
+}
+.ui-li-has-arrow > .ui-btn,
+.ui-li-static.ui-li-has-arrow {
+ padding-right: 40px;
+}
+.ui-li-has-count > .ui-btn,
+.ui-li-static.ui-li-has-count,
+.ui-li-divider.ui-li-has-count {
+ padding-right: 45px;
+}
+.ui-li-has-arrow.ui-li-has-count > .ui-btn,
+.ui-li-static.ui-li-has-arrow.ui-li-has-count {
+ padding-right: 75px;
+}
+.ui-li-has-thumb > .ui-btn,
+.ui-li-static.ui-li-has-thumb {
+ min-height: 58px;
+ padding-left: 100px;
+}
+.ui-li-has-icon > .ui-btn,
+.ui-li-static.ui-li-has-icon {
+ min-height: 20px;
+ padding-left: 40px;
+}
+.ui-li-count {
+ position: absolute;
+ font-size: 11px;
+ font-weight: bold;
+ padding: .2em .5em;
+ right: 10px;
+ top: 50%;
+ margin-top: -.9em;
+}
+.ui-li-has-arrow.ui-li-has-count .ui-li-count {
+ right: 40px;
+}
+.ui-li-has-alt.ui-li-has-count .ui-li-count {
+ right: 53px;
+}
+.ui-li-thumb {
+ position: absolute;
+ left: 0;
+ top: 0;
+ max-height: 80px;
+ max-width: 80px;
+}
+.ui-li-icon {
+ position: absolute;
+ left: 10px;
+ top: .9em;
+ max-height: 16px;
+ max-width: 16px;
+}
+.ui-li-heading {
+ font-size: 16px;
+ font-weight: bold;
+ display: block;
+ margin: .6em 0;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ white-space: nowrap;
+}
+.ui-li-desc {
+ font-size: 12px;
+ font-weight: normal;
+ display: block;
+ margin: -.5em 0 .6em;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ white-space: nowrap;
+}
+.ui-li-aside {
+ float: right;
+ width: 50%;
+ text-align: right;
+ margin: .3em 0;
+}
@media all and (min-width: 480px){
.ui-li-aside { width: 45%; }
}
-.ui-li-divider { cursor: default; }
-.ui-li-has-alt .ui-btn-inner a.ui-link-inherit, .ui-li-static.ui-li-has-alt { padding-right: 53px; }
-.ui-li-has-alt.ui-li-has-count .ui-btn-inner a.ui-link-inherit, .ui-li-static.ui-li-has-alt.ui-li-has-count { padding-right: 88px; }
-.ui-li-has-count .ui-li-count { position: absolute; font-size: 11px; font-weight: bold; padding: .2em .5em; top: 50%; margin-top: -.9em; right: 10px; }
-.ui-li-has-count.ui-li-divider .ui-li-count, .ui-li-has-count .ui-link-inherit .ui-li-count { margin-top: -.95em; }
-.ui-li-has-arrow.ui-li-has-count .ui-li-count { right: 40px; }
-.ui-li-has-alt.ui-li-has-count .ui-li-count { right: 53px; }
-.ui-li-link-alt { position: absolute; width: 40px; height: 100%; border-width: 0; border-left-width: 1px; top: 0; right: 0; margin: 0; padding: 0; z-index: 2; }
+ol.ui-listview,
+ol.ui-listview .ui-li-divider {
+ counter-reset: listnumbering;
+}
+ol.ui-listview .ui-li > .ui-btn:before,
+ol.ui-listview .ui-li-static:before,
+.ui-li-dec {
+ font-size: .8em;
+ display: inline-block;
+ padding-right: .3em;
+ font-weight: normal;
+ counter-increment: listnumbering;
+ content: counter(listnumbering) ". ";
+}
+ol.ui-listview .ui-li-jsnumbering:before {
+ content: "" !important;
+}
+ol.ui-listview .ui-li-heading {
+ display: inline-block;
+ width: 100%;
+ margin-left: -1.3em;
+ text-indent: 1.3em;
+ vertical-align: middle;
+}
+ol.ui-listview .ui-li-desc:not(.ui-li-aside) {
+ text-indent: 1.55em;
+}
+.ui-li.ui-li-has-alt > .ui-btn {
+ margin-right: 40px;
+ border-right-width: 0;
+}
+.ui-li.ui-li-has-alt a.ui-li-link-alt {
+ position: absolute;
+ width: 40px;
+ height: 100%;
+ min-height: auto;
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+ border-left-width: 1px;
+ top: 0;
+ right: 0;
+ margin: 0;
+ padding: 0;
+ z-index: 2;
+}
+.ui-listview-inset .ui-li.ui-li-has-alt a.ui-li-link-alt {
+ border-right-width: 1px;
+}
+.ui-li.ui-li-has-alt a.ui-li-link-alt:focus {
+ z-index: 3;
+}
+
.ui-li-link-alt .ui-btn { overflow: hidden; position: absolute; right: 8px; top: 50%; margin: -13px 0 0 0; border-bottom-width: 1px; z-index: -1;}
.ui-li-link-alt .ui-btn-inner { padding: 0; height: 100%; position: absolute; width: 100%; top: 0; left: 0;}
.ui-li-link-alt .ui-btn .ui-icon { right: 50%; margin-right: -9px; }
.ui-li-link-alt .ui-btn-icon-notext .ui-btn-inner .ui-icon { position: absolute; top: 50%; margin-top: -9px; }
-
.ui-listview * .ui-btn-inner > .ui-btn > .ui-btn-inner { border-top: 0; }
.ui-listview-filter { border-width: 0; overflow: hidden; margin: -15px -15px 15px -15px; }
@@ -97,7 +261,3 @@ ol.ui-listview > .ui-li .ui-li-desc:not(.ui-li-aside) { text-indent: 1.55em; }
.ui-listview-filter .ui-input-search { margin: 5px; width: auto; display: block; }
.ui-li.ui-screen-hidden{ display:none; }
-/* Odd iPad positioning issue. */
-@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
- .ui-li .ui-btn-text { overflow: visible; }
-}
View
@@ -113,7 +113,7 @@ $.widget( "mobile.listview", $.mobile.widget, $.extend( {
itemClassDict = {},
item, itemClass, itemTheme,
a, last, splittheme, counter, startCount, newStartCount, countParent, icon, linkIcon,
- pos, numli, isDivider;
+ pos, numli, isDivider, buttonClass;
if ( ol && jsCount ) {
$list.find( ".ui-li-dec" ).remove();
@@ -134,7 +134,7 @@ $.widget( "mobile.listview", $.mobile.widget, $.extend( {
}
if ( !o.theme ) {
- o.theme = $.mobile.getInheritedTheme( this.element, "a" );
+ o.theme = "a";
}
for ( pos = 0, numli = li.length; pos < numli; pos++ ) {
@@ -150,20 +150,26 @@ $.widget( "mobile.listview", $.mobile.widget, $.extend( {
if ( a.length && !isDivider ) {
icon = getAttr( item[ 0 ], "icon", true );
- item.buttonMarkup({
+ /* item.buttonMarkup({
wrapperEls: "div",
shadow: false,
corners: false,
iconpos: "right",
icon: a.length > 1 || icon === false ? false : icon || listicon || o.icon,
theme: itemTheme
- });
-
+ }); */
+
if ( ( icon !== false ) && ( a.length === 1 ) ) {
item.addClass( "ui-li-has-arrow" );
}
+
+ buttonClass = "ui-btn";
+
+ if ( itemTheme ) {
+ buttonClass += " ui-btn-" + itemTheme;
+ }
- a.first().removeClass( "ui-link" ).addClass( "ui-link-inherit" );
+ a.first().removeClass( "ui-link" ).addClass( buttonClass );
if ( a.length > 1 ) {
itemClass += " ui-li-has-alt";
@@ -277,7 +283,7 @@ $.widget( "mobile.listview", $.mobile.widget, $.extend( {
// opposed to 30 seconds.
this._addThumbClasses( li );
- this._addThumbClasses( $list.find( ".ui-link-inherit" ) );
+ this._addThumbClasses( $list.find( ".ui-btn" ) );
this._addFirstLastClasses( li, this._getVisibles( li, create ), create );
// autodividers binds to this to redraw dividers after the listview refresh

0 comments on commit 78cb933

Please sign in to comment.