Ubuntu HTML5 UI SDK

Merge lp:~daker/ubuntu-html5-theme/fix.js-css-html-struct into lp:ubuntu-html5-theme

  1. fix.js-css-html-struct
  2. Merge into trunk
Proposed by Adnane Belmadiaf
Status: Merged
Approved by: Alexandre Abreu
Approved revision: 109
Merged at revision: 113
Proposed branch: lp:~daker/ubuntu-html5-theme/fix.js-css-html-struct
Merge into: lp:ubuntu-html5-theme
Diff against target: 317 lines (+60/-47)
8 files modified
0.1/ambiance/css/default.css (+1/-1)
0.1/ambiance/css/pagestack.css (+9/-8)
0.1/ambiance/css/tabs.css (+17/-3)
0.1/ambiance/js/tabs.js (+17/-17)
examples/html5-theme/apps/rss-reader/index.html (+4/-6)
tests/data/html/apps/rss-reader/index.html (+4/-4)
tests/data/html/test-nopagestack-in-app.html (+4/-4)
tests/data/html/test-pagestack-in-app.html (+4/-4)
To merge this branch: bzr merge lp:~daker/ubuntu-html5-theme/fix.js-css-html-struct
Reviewer Review Type Date Requested Status
PS Jenkins bot continuous-integration Approve
Alexandre Abreu Approve
Review via email: mp+202765@code.launchpad.net

Commit message

Update the html document structure

To post a comment you must log in.
Revision history for this message
Alexandre Abreu (abreu-alexandre) wrote :

Dont forget to update the rss app,

Revision history for this message
Alexandre Abreu (abreu-alexandre) :
review: Approve
Revision history for this message
PS Jenkins bot (ps-jenkins) wrote :

FAILED: Autolanding.
No commit message was specified in the merge proposal. Hit 'Add commit message' on the merge proposal web page or follow the link below. You can approve the merge proposal yourself to rerun.
https://code.launchpad.net/~daker/ubuntu-html5-theme/fix.js-css-html-struct/+merge/202765/+edit-commit-message

review: Needs Fixing (continuous-integration)
Revision history for this message
PS Jenkins bot (ps-jenkins) wrote :

FAILED: Autolanding.
More details in the following jenkins job:
http://jenkins.qa.ubuntu.com/job/ubuntu-html5-theme-autolanding/181/
Executed test runs:
    UNSTABLE: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-trusty/2656
    SUCCESS: http://jenkins.qa.ubuntu.com/job/ubuntu-html5-theme-trusty-amd64-autolanding/34
    SUCCESS: http://jenkins.qa.ubuntu.com/job/ubuntu-html5-theme-trusty-armhf-autolanding/34
    UNSTABLE: http://jenkins.qa.ubuntu.com/job/autopilot-testrunner-otto-trusty/2325
    SUCCESS: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-trusty-amd64/2658
        deb: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-trusty-amd64/2658/artifact/work/output/*zip*/output.zip

review: Needs Fixing (continuous-integration)
Revision history for this message
PS Jenkins bot (ps-jenkins) wrote :

FAILED: Autolanding.
More details in the following jenkins job:
http://jenkins.qa.ubuntu.com/job/ubuntu-html5-theme-autolanding/185/
Executed test runs:
    UNSTABLE: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-trusty/2688
    SUCCESS: http://jenkins.qa.ubuntu.com/job/ubuntu-html5-theme-trusty-amd64-autolanding/38
    SUCCESS: http://jenkins.qa.ubuntu.com/job/ubuntu-html5-theme-trusty-armhf-autolanding/38
    UNSTABLE: http://jenkins.qa.ubuntu.com/job/autopilot-testrunner-otto-trusty/2354
    SUCCESS: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-trusty-amd64/2690
        deb: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-trusty-amd64/2690/artifact/work/output/*zip*/output.zip

review: Needs Fixing (continuous-integration)
Revision history for this message
PS Jenkins bot (ps-jenkins) wrote :

FAILED: Autolanding.
More details in the following jenkins job:
http://jenkins.qa.ubuntu.com/job/ubuntu-html5-theme-autolanding/187/
Executed test runs:
    UNSTABLE: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-trusty/2709
    SUCCESS: http://jenkins.qa.ubuntu.com/job/ubuntu-html5-theme-trusty-amd64-autolanding/40
    SUCCESS: http://jenkins.qa.ubuntu.com/job/ubuntu-html5-theme-trusty-armhf-autolanding/40
    UNSTABLE: http://jenkins.qa.ubuntu.com/job/autopilot-testrunner-otto-trusty/2372
    SUCCESS: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-trusty-amd64/2711
        deb: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-trusty-amd64/2711/artifact/work/output/*zip*/output.zip

review: Needs Fixing (continuous-integration)
lp:~daker/ubuntu-html5-theme/fix.js-css-html-struct updated
109. By Adnane Belmadiaf

Merged Alex branch to fix tests data
[ Robert Bruce Park ]
Rename binary package from ubuntu-html5-theme to ubuntu-html5-ui-toolkit.

Revision history for this message
PS Jenkins bot (ps-jenkins) :
review: Approve (continuous-integration)

Preview Diff

[H/L] Next/Prev Comment, [J/K] Next/Prev File, [N/P] Next/Prev Hunk
1=== modified file '0.1/ambiance/css/default.css'
2--- 0.1/ambiance/css/default.css 2014-01-27 18:42:31 +0000
3+++ 0.1/ambiance/css/default.css 2014-01-30 20:14:49 +0000
4@@ -85,4 +85,4 @@
5
6 .inset {
7 margin-bottom: 10px;
8-}
9\ No newline at end of file
10+}
11
12=== modified file '0.1/ambiance/css/pagestack.css'
13--- 0.1/ambiance/css/pagestack.css 2014-01-27 18:42:31 +0000
14+++ 0.1/ambiance/css/pagestack.css 2014-01-30 20:14:49 +0000
15@@ -5,18 +5,18 @@
16 * This file is part of ubuntu-html5-ui-toolkit.
17 *
18 * This package is free software; you can redistribute it and/or modify
19- * it under the terms of the GNU Lesser General Public License as
20- * published by the Free Software Foundation; either version 3 of the
21+ * it under the terms of the GNU Lesser General Public License as
22+ * published by the Free Software Foundation; either version 3 of the
23 * License, or
24 * (at your option) any later version.
25-
26+
27 * This package is distributed in the hope that it will be useful,
28 * but WITHOUT ANY WARRANTY; without even the implied warranty of
29 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
30 * GNU General Public License for more details.
31-
32- * You should have received a copy of the GNU Lesser General Public
33- * License along with this program. If not, see
34+
35+ * You should have received a copy of the GNU Lesser General Public
36+ * License along with this program. If not, see
37 * <http://www.gnu.org/licenses/>.
38 */
39
40@@ -30,7 +30,7 @@
41 transition: all 0 linear;
42 }
43
44-[data-role="pagestack"] [data-role="page"] {
45+[data-role="page"] {
46 vertical-align: top;
47 width: 100%;
48 height: 100%;
49@@ -40,6 +40,7 @@
50 box-sizing: border-box;
51 }
52
53-[data-role="pagestack"] [data-role="page"]:first-child {
54+[data-role="pagestack"]>[data-role="page"]:first-child,
55+[data-role="mainview"]>[data-role="page"] {
56 display: block;
57 }
58\ No newline at end of file
59
60=== modified file '0.1/ambiance/css/tabs.css'
61--- 0.1/ambiance/css/tabs.css 2014-01-27 18:42:31 +0000
62+++ 0.1/ambiance/css/tabs.css 2014-01-30 20:14:49 +0000
63@@ -41,12 +41,12 @@
64 display: block;
65 }
66
67-[data-role="header"] ul {
68+[data-role="tabs"] {
69 width: 100%;
70 white-space: nowrap;
71 }
72
73-[data-role="header"] ul li {
74+[data-role="tabitem"] {
75 display: inline-block;
76 font: 35px "Ubuntu";
77 letter-spacing: -1px;
78@@ -75,7 +75,7 @@
79 opacity: 0.5;
80 }
81
82-[data-role="header"] li:only-child:after {
83+[data-role="tabitem"]:only-child:after {
84 content: "";
85 padding-left: 10px;
86 }
87@@ -85,4 +85,18 @@
88 color: #a0a0a0;
89 -webkit-opacity: 0.5;
90 opacity: 0.5;
91+}
92+
93+[data-role="tab"] {
94+ vertical-align: top;
95+ width: 100%;
96+ height: 100%;
97+ overflow: hidden;
98+ display: none;
99+ -webkit-box-sizing: border-box;
100+ box-sizing: border-box;
101+}
102+
103+[data-role="tab"]:first-child {
104+ display: block;
105 }
106\ No newline at end of file
107
108=== modified file '0.1/ambiance/js/tabs.js'
109--- 0.1/ambiance/js/tabs.js 2014-01-27 18:42:31 +0000
110+++ 0.1/ambiance/js/tabs.js 2014-01-30 20:14:49 +0000
111@@ -33,10 +33,10 @@
112 <div data-role="page">
113 <header data-role="header" id="headerID">
114 <ul data-role="tabs">
115- <li data-role="tab" data-page="main">
116+ <li data-role="tabitem" data-page="main">
117 Main
118 </li>
119- <li data-role="tab" data-page="page2">
120+ <li data-role="tabitem" data-page="page2">
121 Two
122 </li>
123 </ul>
124@@ -94,7 +94,7 @@
125 if (touchEvents.touchLeave) {
126 this._tabs.addEventListener(touchEvents.touchLeave, this.__onTouchLeave.bind(this));
127 }
128-
129+
130 // initialize default page
131 this.__setupInitialTabVisibility();
132 };
133@@ -149,15 +149,15 @@
134 * @private
135 */
136 __setupInitialTabVisibility: function() {
137- var tab = this._tabs.querySelector('[data-role="tab"]:first-child');
138+ var tab = this._tabs.querySelector('[data-role="tabitem"]:first-child');
139 tab.classList.add('active');
140 var updateDisplayStyle = function(tab, value) {
141 var targetPage = document.getElementById(tab.getAttribute('data-page'));
142- if (targetPage)
143- targetPage.style.display=value;
144+ if (targetPage)
145+ targetPage.style.display=value;
146 };
147 [].slice.
148- call(this._tabs.querySelectorAll('[data-role="tab"]:not(:first-child)')).
149+ call(this._tabs.querySelectorAll('[data-role="tabitem"]:not(:first-child)')).
150 forEach(function(element) {
151 updateDisplayStyle(element, 'none');
152 });
153@@ -282,14 +282,14 @@
154 __endNavigation: function () {
155 if (state !== STATES.navigating) return;
156
157- var activeTab = document.querySelector('[data-role="tab"].active');
158+ var activeTab = document.querySelector('[data-role="tabitem"].active');
159 if (! activeTab) return;
160
161 var offsetX = activeTab.offsetLeft;
162 this._tabs.style['-webkit-transition-duration'] = '.3s';
163 this._tabs.style.webkitTransform = 'translate3d(-' + offsetX + 'px,0,0)';
164-
165- [].forEach.call(document.querySelectorAll('[data-role="tab"]:not(.active)'), function (el) {
166+
167+ [].forEach.call(document.querySelectorAll('[data-role="tabitem"]:not(.active)'), function (el) {
168 el.classList.toggle('inactive');
169 });
170 },
171@@ -301,7 +301,7 @@
172 if (state !== STATES.transitioning_to_navigation) return;
173
174 // TODO constraint a bit the selector
175- [].forEach.call(document.querySelectorAll('[data-role="tab"]:not(.active)'), function (el) {
176+ [].forEach.call(document.querySelectorAll('[data-role="tabitem"]:not(.active)'), function (el) {
177 el.classList.toggle('inactive');
178 });
179 },
180@@ -344,19 +344,19 @@
181 var selectedTab = document.elementFromPoint(touch.pageX, touch.pageY);
182 if (selectedTab == null)
183 return;
184- if (selectedTab.getAttribute("data-role") !== 'tab')
185+ if (selectedTab.getAttribute("data-role") !== 'tabitem')
186 return;
187 if ((selectedTab.className).indexOf('inactive') > -1) {
188 window.clearTimeout(t2);
189
190- activeTab = this._tabs.querySelector('[data-role="tab"].active');
191+ activeTab = this._tabs.querySelector('[data-role="tabitem"].active');
192 offsetX = this.offsetLeft;
193 this._tabs.style['-webkit-transition-duration'] = '.3s';
194 this._tabs.style.webkitTransform = 'translate3d(-' + offsetX + 'px,0,0)';
195
196 this.__updateActiveTab(selectedTab, activeTab);
197
198- [].forEach.call(this._tabs.querySelectorAll('[data-role="tab"]:not(.active)'), function (e) {
199+ [].forEach.call(this._tabs.querySelectorAll('[data-role="tabitem"]:not(.active)'), function (e) {
200 e.classList.remove('inactive');
201 });
202
203@@ -365,11 +365,11 @@
204 this.__dispatchTabChangedEvent(targetPageId);
205 } else {
206
207- [].forEach.call(this._tabs.querySelectorAll('[data-role="tab"]:not(.active)'), function (el) {
208+ [].forEach.call(this._tabs.querySelectorAll('[data-role="tabitem"]:not(.active)'), function (el) {
209 el.classList.toggle('inactive');
210 });
211 t2 = window.setTimeout(function () {
212- [].forEach.call(this._tabs.querySelectorAll('[data-role="tab"]:not(.active)'), function (el) {
213+ [].forEach.call(this._tabs.querySelectorAll('[data-role="tabitem"]:not(.active)'), function (el) {
214 el.classList.toggle('inactive');
215 });
216 }, 3000);
217@@ -387,7 +387,7 @@
218 if (!activeTab)
219 return;
220
221- [].forEach.call(this._tabs.querySelectorAll('[data-role="tab"]'), function (e) {
222+ [].forEach.call(this._tabs.querySelectorAll('[data-role="tabitem"]'), function (e) {
223 e.classList.remove('active');
224 e.classList.remove('inactive');
225 });
226
227=== modified file 'examples/html5-theme/apps/rss-reader/index.html'
228--- examples/html5-theme/apps/rss-reader/index.html 2014-01-27 18:42:31 +0000
229+++ examples/html5-theme/apps/rss-reader/index.html 2014-01-30 20:14:49 +0000
230@@ -52,19 +52,17 @@
231 </head>
232
233 <body>
234- <div data-role="page">
235+ <div data-role="mainview">
236
237 <header data-role="header">
238 <ul data-role="tabs">
239- <li data-role="tab" data-page="main">RSS Mobile Reader</li>
240- <li data-role="tab" data-page="results">RSS Feed</li>
241- <li data-role="tab" data-page="article">Article</li>
242+ <li data-role="tabitem" data-page="main">RSS Mobile Reader</li>
243 </ul>
244 </header>
245
246 <div data-role="content">
247- <div data-role="pagestack">
248- <div data-role="page" id="main">
249+ <div data-role="pagestack" id="main">
250+ <div data-role="page">
251 <section data-role="list" id="yourfeeds"></section>
252 <footer data-role="footer" class="revealed">
253 <nav>
254
255=== modified file 'tests/data/html/apps/rss-reader/index.html'
256--- tests/data/html/apps/rss-reader/index.html 2014-01-27 18:42:31 +0000
257+++ tests/data/html/apps/rss-reader/index.html 2014-01-30 20:14:49 +0000
258@@ -52,13 +52,13 @@
259 </head>
260
261 <body>
262- <div data-role="page">
263+ <div data-role="mainview">
264
265 <header data-role="header">
266 <ul data-role="tabs">
267- <li data-role="tab" data-page="main">RSS Mobile Reader</li>
268- <li data-role="tab" data-page="results">RSS Feed</li>
269- <li data-role="tab" data-page="article">Article</li>
270+ <li data-role="tabitem" data-page="main">RSS Mobile Reader</li>
271+ <li data-role="tabitem" data-page="results">RSS Feed</li>
272+ <li data-role="tabitem" data-page="article">Article</li>
273 </ul>
274 </header>
275
276
277=== modified file 'tests/data/html/test-nopagestack-in-app.html'
278--- tests/data/html/test-nopagestack-in-app.html 2014-01-27 21:34:44 +0000
279+++ tests/data/html/test-nopagestack-in-app.html 2014-01-30 20:14:49 +0000
280@@ -45,13 +45,13 @@
281 </script>
282 </head>
283 <body>
284- <div data-role="page">
285+ <div data-role="mainview">
286
287 <header data-role="header">
288 <ul data-role="tabs">
289- <li data-role="tab" data-page="main">RSS Mobile Reader</li>
290- <li data-role="tab" data-page="results">RSS Feed</li>
291- <li data-role="tab" data-page="article">Article</li>
292+ <li data-role="tabitem" data-page="main">RSS Mobile Reader</li>
293+ <li data-role="tabitem" data-page="results">RSS Feed</li>
294+ <li data-role="tabitem" data-page="article">Article</li>
295 </ul>
296 </header>
297
298
299=== modified file 'tests/data/html/test-pagestack-in-app.html'
300--- tests/data/html/test-pagestack-in-app.html 2014-01-27 21:34:44 +0000
301+++ tests/data/html/test-pagestack-in-app.html 2014-01-30 20:14:49 +0000
302@@ -45,12 +45,12 @@
303
304 </head>
305 <body>
306- <div data-role="page">
307+ <div data-role="mainview">
308 <header data-role="header">
309 <ul data-role="tabs">
310- <li data-role="tab">Tab 1</li>
311- <li data-role="tab">Tab 2</li>
312- <li data-role="tab">Tab 3</li>
313+ <li data-role="tabitem">Tab 1</li>
314+ <li data-role="tabitem">Tab 2</li>
315+ <li data-role="tabitem">Tab 3</li>
316 </ul>
317 </header>
318

Subscribers

People subscribed via source and target branches