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

Commit 24c072b

Browse files
cgackarschmitz
cgack
authored and
arschmitz
committed
Toolbar: Implement classes option
Fixes gh-7687 Closes gh-8114
1 parent 18f65ae commit 24c072b

File tree

243 files changed

+1394
-1303
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

243 files changed

+1394
-1303
lines changed

‎build/tasks/options/jscs.js

+12-3
Original file line numberDiff line numberDiff line change
@@ -25,16 +25,18 @@ module.exports = {
2525
"js/widgets/forms/checkboxradio.backcompat.js",
2626
"js/widgets/forms/flipswitch.js",
2727
"js/widgets/forms/flipswitch.backcompat.js",
28-
"tests/unit/flipswitch/*.js",
2928
"js/widgets/forms/rangeslider.js",
3029
"js/widgets/forms/rangeslider.backcompat.js",
31-
"js/tests/unit/rangeslider/*.js",
3230
"js/widgets/forms/slider.js",
3331
"js/widgets/forms/slider.backcompat.js",
34-
"js/tests/unit/slider/*.js",
3532
"js/widgets/controlgroup.js",
3633
"js/widgets/controlgroup.backcompat.js",
3734
"js/widgets/tabs.ajax.js",
35+
"js/widgets/toolbar.js",
36+
"js/widgets/toolbar.backcompat.js",
37+
"js/widgets/fixedToolbar.js",
38+
"js/widgets/fixedToolbar.backcompat.js",
39+
"js/widgets/fixedToolbar.tapToggle.js",
3840
"js/widgets/enhancer.js",
3941
"js/widgets/enhancer.backcompat.js",
4042
"js/degradeInputs.js",
@@ -55,6 +57,13 @@ module.exports = {
5557
"tests/integration/page/page_enhance_within.js",
5658
"tests/integration/page/page_theme.js",
5759
"tests/integration/page/page_title_entity.js",
60+
"tests/unit/flipswitch/*.js",
61+
"tests/unit/slider/*.js",
62+
"tests/unit/rangeslider/*.js",
63+
"tests/unit/toolbar/*.js",
64+
"tests/unit/fixed-toolbar/*.js",
65+
"tests/integration/fixed-toolbar/*.js",
66+
"tests/integration/toolbar/*.js",
5867
"tests/unit/dialog/dialog_count.js",
5968
"tests/unit/init/init_dialog.js",
6069
"tests/unit/pagecontainer/pagecontainer_core.js",

‎css/structure/jquery.mobile.core.css

+22-81
Original file line numberDiff line numberDiff line change
@@ -165,50 +165,24 @@ div.ui-mobile-viewport {
165165
font-size: 1em;
166166
display: inline-block;
167167
}
168-
.ui-header,
169-
.ui-footer {
170-
border-width: 1px 0;
171-
border-style: solid;
172-
position: relative;
173-
}
174-
.ui-header:empty,
175-
.ui-footer:empty {
176-
min-height: 2.6875em;
177-
}
178-
.ui-header .ui-title,
179-
.ui-footer .ui-title {
180-
font-size: 1em;
181-
min-height: 1.1em;
182-
text-align: center;
183-
display: block;
184-
margin: 0 30%;
185-
padding: .7em 0;
186-
text-overflow: ellipsis;
187-
overflow: hidden;
188-
white-space: nowrap;
189-
outline: 0 !important;
190-
}
191-
.ui-footer .ui-title {
192-
margin: 0 1em;
193-
}
194168
.ui-content {
195169
border-width: 0;
196170
overflow: visible;
197171
overflow-x: hidden;
198172
padding: 1em;
199173
}
200174
/* Corner styling for dialogs and popups */
201-
.ui-corner-all > .ui-header:first-child,
175+
.ui-corner-all > .ui-toolbar-header:first-child,
202176
.ui-corner-all > .ui-content:first-child,
203-
.ui-corner-all > .ui-footer:first-child {
177+
.ui-corner-all > .ui-toolbar-footer:first-child {
204178
-webkit-border-top-left-radius: inherit;
205179
border-top-left-radius: inherit;
206180
-webkit-border-top-right-radius: inherit;
207181
border-top-right-radius: inherit;
208182
}
209-
.ui-corner-all > .ui-header:last-child,
183+
.ui-corner-all > .ui-toolbar-header:last-child,
210184
.ui-corner-all > .ui-content:last-child,
211-
.ui-corner-all > .ui-footer:last-child {
185+
.ui-corner-all > .ui-toolbar-footer:last-child {
212186
-webkit-border-bottom-left-radius: inherit;
213187
border-bottom-left-radius: inherit;
214188
-webkit-border-bottom-right-radius: inherit;
@@ -234,8 +208,8 @@ div.ui-mobile-viewport {
234208
user-select: none;
235209
}
236210
.ui-button-icon-only,
237-
.ui-header button.ui-button.ui-button-icon-only,
238-
.ui-footer button.ui-button.ui-button-icon-only {
211+
.ui-toolbar-header button.ui-button.ui-button-icon-only,
212+
.ui-toolbar-footer button.ui-button.ui-button-icon-only {
239213
padding: 0;
240214
width: 1.75em;
241215
height: 1.75em;
@@ -254,25 +228,25 @@ div.ui-mobile-viewport {
254228
line-height: inherit;
255229
}
256230
/* Make buttons in toolbars default to mini and inline. */
257-
.ui-header .ui-button,
258-
.ui-footer .ui-button {
231+
.ui-toolbar-header .ui-button,
232+
.ui-toolbar-footer .ui-button {
259233
display: inline-block;
260234
vertical-align: middle;
261235
}
262236
.ui-mini,
263-
.ui-header .ui-button,
264-
.ui-footer .ui-button,
265-
.ui-header .ui-controlgroup .ui-button-icon-only,
266-
.ui-footer .ui-controlgroup .ui-button-icon-only,
267-
.ui-header .ui-button-left,
268-
.ui-header .ui-button-right {
237+
.ui-toolbar-header .ui-button,
238+
.ui-toolbar-footer .ui-button,
239+
.ui-toolbar-header .ui-controlgroup .ui-button-icon-only,
240+
.ui-toolbar-footer .ui-controlgroup .ui-button-icon-only,
241+
.ui-toolbar-header .ui-toolbar-header-button-left,
242+
.ui-toolbar-header .ui-toolbar-header-button-right {
269243
font-size: 13px;
270244
line-height: 1.8462;
271245
}
272246
.ui-mini.ui-button-icon-only,
273247
.ui-mini .ui-button-icon-only,
274-
.ui-header .ui-button-icon-only,
275-
.ui-footer .ui-button-icon-only {
248+
.ui-toolbar-header .ui-button-icon-only,
249+
.ui-toolbar-footer .ui-button-icon-only {
276250
font-size: 16px;
277251
padding: 0;
278252
}
@@ -303,47 +277,14 @@ div.ui-mobile-viewport {
303277
bottom: auto;
304278
top: 50%;
305279
left: 50%;
280+
}
281+
.ui-button-icon-only .ui-icon,
282+
.ui-button-icon-only.ui-toolbar-header-button-left > .ui-icon,
283+
.ui-button-icon-only.ui-toolbar-header-button-right > .ui-icon {
306284
margin-top: -11px;
307285
margin-left: -11px;
308286
}
309287

310-
/* Float icons helper classes */
311-
.ui-widget-icon-floatbeginning {
312-
bottom: auto;
313-
float: left;
314-
}
315-
.ui-widget-icon-floatend {
316-
bottom: auto;
317-
float: right;
318-
}
319-
320-
/* Buttons in header position classes */
321-
.ui-header .ui-button-left,
322-
.ui-header .ui-button-right,
323-
.ui-button-left > [class*="ui-"],
324-
.ui-button-right > [class*="ui-"] {
325-
margin: 0;
326-
}
327-
.ui-button-left,
328-
.ui-button-right {
329-
position: absolute;
330-
top: .24em;
331-
}
332-
.ui-button-left {
333-
left: .4em;
334-
}
335-
.ui-button-right {
336-
right: .4em;
337-
}
338-
.ui-button-icon-only.ui-button-left {
339-
top: .3125em;
340-
left: .3125em;
341-
}
342-
.ui-button-icon-only.ui-button-right {
343-
top: .3125em;
344-
right: .3125em;
345-
}
346-
347288
/* Button elements and input buttons */
348289
button.ui-button,
349290
input.ui-button {
@@ -356,8 +297,8 @@ input.ui-button {
356297
}
357298
button.ui-button-inline,
358299
input.ui-button-inline,
359-
.ui-header button.ui-button,
360-
.ui-footer button.ui-button {
300+
.ui-toolbar-header button.ui-button,
301+
.ui-toolbar-footer button.ui-button {
361302
width: auto;
362303
}
363304
/* Firefox adds a 1px border in a button element. We negate this to make sure they have the same height as other buttons in controlgroups. */

‎css/structure/jquery.mobile.fixedToolbar.css

+23-23
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,38 @@
11
/* fixed page header & footer configuration */
2-
.ui-header-fixed,
3-
.ui-footer-fixed {
2+
.ui-toolbar-header-fixed,
3+
.ui-toolbar-footer-fixed {
44
left: 0;
55
right: 0;
66
width: 100%;
77
position: fixed;
88
z-index: 1000;
99
}
10-
.ui-header-fixed {
10+
.ui-toolbar-header-fixed {
1111
top: -1px;
1212
padding-top: 1px;
1313
}
14-
.ui-header-fixed.ui-fixed-hidden {
14+
.ui-toolbar-header-fixed.ui-toolbar-fixed-hidden {
1515
top: 0;
1616
padding-top: 0;
1717
}
18-
.ui-header-fixed .ui-button-left,
19-
.ui-header-fixed .ui-button-right {
18+
.ui-toolbar-header-fixed .ui-button-left,
19+
.ui-toolbar-header-fixed .ui-button-right {
2020
margin-top: 1px;
2121
}
22-
.ui-header-fixed.ui-fixed-hidden .ui-button-left,
23-
.ui-header-fixed.ui-fixed-hidden .ui-button-right {
22+
.ui-toolbar-header-fixed.ui-toolbar-fixed-hidden .ui-button-left,
23+
.ui-toolbar-header-fixed.ui-toolbar-fixed-hidden .ui-button-right {
2424
margin-top: 0;
2525
}
26-
.ui-footer-fixed {
26+
.ui-toolbar-footer-fixed {
2727
bottom: -1px;
2828
padding-bottom: 1px;
2929
}
30-
.ui-footer-fixed.ui-fixed-hidden {
30+
.ui-toolbar-footer-fixed.ui-toolbar-fixed-hidden {
3131
bottom: 0;
3232
padding-bottom: 0;
3333
}
34-
.ui-header-fullscreen,
35-
.ui-footer-fullscreen {
34+
.ui-toolbar-header-fullscreen,
35+
.ui-toolbar-footer-fullscreen {
3636
filter: Alpha(Opacity=90);
3737
opacity: .9;
3838
}
@@ -43,34 +43,34 @@
4343
.ui-page-footer-fixed {
4444
padding-bottom: 2.8125em;
4545
}
46-
.ui-page-header-fullscreen > .ui-content,
47-
.ui-page-footer-fullscreen > .ui-content {
46+
.ui-toolbar-page-header-fullscreen > .ui-content,
47+
.ui-toolbar-page-footer-fullscreen > .ui-content {
4848
padding: 0;
4949
}
50-
.ui-fixed-hidden {
50+
.ui-toolbar-fixed-hidden {
5151
position: absolute;
5252
}
5353
/* Tap toggle: hide external fixed footer. See issue #6604 */
54-
.ui-footer-fixed.ui-fixed-hidden {
54+
.ui-toolbar-footer-fixed.ui-toolbar-fixed-hidden {
5555
display: none;
5656
}
57-
.ui-page .ui-footer-fixed.ui-fixed-hidden {
58-
display: block;
57+
.ui-page .ui-toolbar-footer-fixed.ui-toolbar-fixed-hidden {
58+
display: block
5959
}
6060

61-
.ui-page-header-fullscreen .ui-fixed-hidden,
62-
.ui-page-footer-fullscreen .ui-fixed-hidden {
61+
.ui-toolbar-page-header-fullscreen .ui-toolbar-fixed-hidden,
62+
.ui-toolbar-page-footer-fullscreen .ui-toolbar-fixed-hidden {
6363
position: absolute !important;
6464
height: 1px;
6565
width: 1px;
6666
overflow: hidden;
6767
clip: rect(1px,1px,1px,1px);
6868
}
69-
.ui-header-fixed .ui-button,
70-
.ui-footer-fixed .ui-button {
69+
.ui-toolbar-header-fixed .ui-button,
70+
.ui-toolbar-footer-fixed .ui-button {
7171
z-index: 10;
7272
}
7373
/* workarounds for other widgets */
74-
.ui-android-2x-fixed .ui-li-has-thumb {
74+
.ui-toolbar-android-2x-fixed .ui-li-has-thumb {
7575
-webkit-transform: translate3d(0,0,0);
7676
}

‎css/structure/jquery.mobile.structure.css

+1
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
@import url("jquery.mobile.transition.visuals.css");
44
@import url("jquery.mobile.forms.fieldcontain.css");
55
@import url("jquery.mobile.grid.css");
6+
@import url("jquery.mobile.toolbar.css");
67
@import url("jquery.mobile.fixedToolbar.css");
78
@import url("jquery.mobile.navbar.css");
89
@import url("jquery.mobile.collapsible.css");

‎css/structure/jquery.mobile.toolbar.css

+58
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
.ui-toolbar,
2+
.ui-toolbar-header,
3+
.ui-toolbar-footer {
4+
border-width: 1px 0;
5+
border-style: solid;
6+
position: relative;
7+
}
8+
.ui-toolbar:empty,
9+
.ui-toolbar-header:empty,
10+
.ui-toolbar-footer:empty {
11+
min-height: 2.6875em;
12+
}
13+
.ui-toolbar .ui-toolbar-title,
14+
.ui-toolbar-header .ui-toolbar-title,
15+
.ui-toolbar-footer .ui-toolbar-title {
16+
font-size: 1em;
17+
min-height: 1.1em;
18+
text-align: center;
19+
display: block;
20+
margin: 0 30%;
21+
padding: .7em 0;
22+
text-overflow: ellipsis;
23+
overflow: hidden;
24+
white-space: nowrap;
25+
outline: 0 !important;
26+
}
27+
.ui-toolbar-footer .ui-toolbar-title {
28+
margin: 0 1em;
29+
}
30+
/* Buttons in header position classes */
31+
.ui-toolbar-header .ui-toolbar-header-button-left,
32+
.ui-toolbar-header .ui-toolbar-header-button-right,
33+
.ui-toolbar-header-button-left > [class*="ui-"],
34+
.ui-toolbar-header-button-right > [class*="ui-"] {
35+
margin: 0;
36+
}
37+
.ui-toolbar-header-button-left,
38+
.ui-toolbar-header-button-right {
39+
position: absolute;
40+
top: .24em;
41+
}
42+
.ui-toolbar-header-button-left {
43+
left: .4em;
44+
}
45+
.ui-toolbar-header-button-right {
46+
right: .4em;
47+
}
48+
.ui-btn-icon-notext.ui-toolbar-header-button-left {
49+
top: .3125em;
50+
left: .3125em;
51+
}
52+
.ui-btn-icon-notext.ui-toolbar-header-button-right {
53+
top: .3125em;
54+
right: .3125em;
55+
}
56+
.ui-toolbar-header .ui-controlgroup-horizontal:after {
57+
clear: none;
58+
}

‎demos/_search/index.php

+2-2
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
<body>
1717
<div data-role="page" class="jqm-demos jqm-demos-index jqm-demos-search-results">
1818

19-
<div data-role="header" class="jqm-header">
19+
<div data-role="toolbar" data-type="header" class="jqm-header">
2020
<h2><a href="../" title="jQuery Mobile Demos home"><img src="../_assets/img/jquery-logo.png" alt="jQuery Mobile"></a></h2>
2121
<p><span class="jqm-version"></span> Demos</p>
2222
<a href="#" class="jqm-navmenu-link ui-button ui-button-icon-only ui-corner-all ui-nodisc-icon ui-alt-icon ui-button-left">Menu<span class="ui-icon ui-icon-bars"></span></a>
@@ -37,7 +37,7 @@
3737

3838
<?php include( '../jqm-navmenu.php' ); ?>
3939

40-
<div data-role="footer" data-position="fixed" data-tap-toggle="false" class="jqm-footer">
40+
<div data-role="toolbar" data-type="footer" data-position="fixed" data-tap-toggle="false" class="jqm-footer">
4141
<p>jQuery Mobile Demos version <span class="jqm-version"></span></p>
4242
<p>Copyright jQuery Foundation</p>
4343
</div><!-- /footer -->

0 commit comments

Comments
 (0)