Ubuntu HTML5 UI SDK

Merge lp:~abreu-alexandre/ubuntu-html5-theme/fix-gallery-app-and-css-fixes into lp:ubuntu-html5-theme

  1. fix-gallery-app-and-css-fixes
  2. Merge into trunk
Proposed by Alexandre Abreu
Status: Merged
Approved by: Alexandre Abreu
Approved revision: 127
Merged at revision: 135
Proposed branch: lp:~abreu-alexandre/ubuntu-html5-theme/fix-gallery-app-and-css-fixes
Merge into: lp:ubuntu-html5-theme
Diff against target: 1427 lines (+532/-488)
24 files modified
0.1/ambiance/css/buttons.css (+10/-6)
0.1/ambiance/css/default.css (+41/-1)
0.1/ambiance/css/icons.css (+37/-0)
0.1/ambiance/css/shapes.css (+8/-0)
0.1/ambiance/css/sliders.css (+6/-4)
0.1/ambiance/css/toggles.css (+2/-2)
0.1/ambiance/img/icons/icon-call.svg (+88/-0)
examples/html5-theme/ui-gallery/index.html (+24/-11)
examples/html5-theme/ui-gallery/widgets.html (+9/-5)
examples/html5-theme/widgets/Buttons.html (+39/-58)
examples/html5-theme/widgets/Dialog-Spinner.html (+6/-16)
examples/html5-theme/widgets/Dialog-Spinner@2.html (+6/-17)
examples/html5-theme/widgets/Dialog.html (+7/-17)
examples/html5-theme/widgets/Indexbar.html (+6/-16)
examples/html5-theme/widgets/ListItems.html (+103/-119)
examples/html5-theme/widgets/OptionSelector.html (+2/-19)
examples/html5-theme/widgets/Pagestack.html (+6/-16)
examples/html5-theme/widgets/Popovers.html (+2/-18)
examples/html5-theme/widgets/ProgressBars.html (+2/-19)
examples/html5-theme/widgets/Sliders.html (+6/-18)
examples/html5-theme/widgets/TextInputs.html (+2/-18)
examples/html5-theme/widgets/Toggles.html (+83/-66)
examples/html5-theme/widgets/Toolbar.html (+2/-18)
examples/html5-theme/widgets/UbuntuShape.html (+35/-24)
To merge this branch: bzr merge lp:~abreu-alexandre/ubuntu-html5-theme/fix-gallery-app-and-css-fixes
Reviewer Review Type Date Requested Status
Adnane Belmadiaf Approve
PS Jenkins bot continuous-integration Approve
Review via email: mp+206037@code.launchpad.net

Commit message

Fix gallery app (needs more fixing though) and update the css to be closer to qml

Description of the change

Fix gallery app (needs more fixing though) and update the css to be closer to qml

To post a comment you must log in.
Revision history for this message
PS Jenkins bot (ps-jenkins) wrote :

PASSED: Continuous integration, rev:126
http://jenkins.qa.ubuntu.com/job/ubuntu-html5-theme-ci/95/
Executed test runs:
    SUCCESS: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-trusty/3177
    SUCCESS: http://jenkins.qa.ubuntu.com/job/ubuntu-html5-theme-trusty-amd64-ci/79
    SUCCESS: http://jenkins.qa.ubuntu.com/job/ubuntu-html5-theme-trusty-armhf-ci/79
    SUCCESS: http://jenkins.qa.ubuntu.com/job/autopilot-testrunner-otto-trusty/2794
    SUCCESS: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-trusty-amd64/3179
        deb: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-trusty-amd64/3179/artifact/work/output/*zip*/output.zip

Click here to trigger a rebuild:
http://s-jenkins.ubuntu-ci:8080/job/ubuntu-html5-theme-ci/95/rebuild

review: Approve (continuous-integration)
lp:~abreu-alexandre/ubuntu-html5-theme/fix-gallery-app-and-css-fixes updated
127. By Alexandre Abreu

added white tick

Revision history for this message
PS Jenkins bot (ps-jenkins) wrote :

PASSED: Continuous integration, rev:127
http://jenkins.qa.ubuntu.com/job/ubuntu-html5-theme-ci/96/
Executed test runs:
    SUCCESS: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-trusty/3180
    SUCCESS: http://jenkins.qa.ubuntu.com/job/ubuntu-html5-theme-trusty-amd64-ci/80
    SUCCESS: http://jenkins.qa.ubuntu.com/job/ubuntu-html5-theme-trusty-armhf-ci/80
    SUCCESS: http://jenkins.qa.ubuntu.com/job/autopilot-testrunner-otto-trusty/2796
    SUCCESS: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-trusty-amd64/3182
        deb: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-trusty-amd64/3182/artifact/work/output/*zip*/output.zip

Click here to trigger a rebuild:
http://s-jenkins.ubuntu-ci:8080/job/ubuntu-html5-theme-ci/96/rebuild

review: Approve (continuous-integration)
Revision history for this message
Adnane Belmadiaf (daker) wrote :

LGTM.

review: Approve

Preview Diff

[H/L] Next/Prev Comment, [J/K] Next/Prev File, [N/P] Next/Prev Hunk
1=== modified file '0.1/ambiance/css/buttons.css'
2--- 0.1/ambiance/css/buttons.css 2014-01-27 18:42:31 +0000
3+++ 0.1/ambiance/css/buttons.css 2014-02-12 21:02:42 +0000
4@@ -5,18 +5,18 @@
5 * This file is part of ubuntu-html5-ui-toolkit.
6 *
7 * This package is free software; you can redistribute it and/or modify
8- * it under the terms of the GNU Lesser General Public License as
9- * published by the Free Software Foundation; either version 3 of the
10+ * it under the terms of the GNU Lesser General Public License as
11+ * published by the Free Software Foundation; either version 3 of the
12 * License, or
13 * (at your option) any later version.
14-
15+
16 * This package is distributed in the hope that it will be useful,
17 * but WITHOUT ANY WARRANTY; without even the implied warranty of
18 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
19 * GNU General Public License for more details.
20-
21- * You should have received a copy of the GNU Lesser General Public
22- * License along with this program. If not, see
23+
24+ * You should have received a copy of the GNU Lesser General Public
25+ * License along with this program. If not, see
26 * <http://www.gnu.org/licenses/>
27 */
28
29@@ -89,4 +89,8 @@
30 background: #5da357;
31 color: #ffffff;
32 text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
33+}
34+
35+[data-role="button"].disabled {
36+ color: rgba(255,255,255,0.6);
37 }
38\ No newline at end of file
39
40=== modified file '0.1/ambiance/css/default.css'
41--- 0.1/ambiance/css/default.css 2014-01-30 19:56:22 +0000
42+++ 0.1/ambiance/css/default.css 2014-02-12 21:02:42 +0000
43@@ -35,6 +35,7 @@
44 @import url("shapes.css");
45 @import url("indexbar.css");
46 @import url("option-selector.css");
47+@import url("icons.css");
48
49
50 * {
51@@ -67,7 +68,6 @@
52 [data-role="content"] h3 {
53 color: #747278;
54 font: 1.3rem "Ubuntu Light";
55- font-weight: bold;
56 }
57
58 [data-role="content"] h2 {
59@@ -86,3 +86,43 @@
60 .inset {
61 margin-bottom: 10px;
62 }
63+
64+/**
65+ To be factored out
66+ */
67+
68+.xlarge-font {
69+ font-size: 33px !important;
70+ font-family: "Ubuntu";
71+ color: #787878 ;
72+}
73+
74+.large-font {
75+ font-size: 20px !important;
76+ font-family: "Ubuntu";
77+ color: #787878;
78+}
79+
80+.medium-font {
81+ font-size: 14px !important;
82+ font-family: "Ubuntu";
83+ color: #787878;
84+}
85+
86+.small-font {
87+ font-size: 12px !important;
88+ font-family: "Ubuntu";
89+ color: #787878;
90+}
91+
92+.xsmall-font {
93+ font-size: 10px !important;
94+ font-family: "Ubuntu";
95+ color: #787878;
96+}
97+
98+.xxsmall-font {
99+ font-size: 8px !important;
100+ font-family: "Ubuntu";
101+ color: #787878;
102+}
103
104=== added file '0.1/ambiance/css/icons.css'
105--- 0.1/ambiance/css/icons.css 1970-01-01 00:00:00 +0000
106+++ 0.1/ambiance/css/icons.css 2014-02-12 21:02:42 +0000
107@@ -0,0 +1,37 @@
108+/*
109+ * Copyright (C) 2013 Adnane Belmadiaf <daker@ubuntu.com>
110+ * License granted by Canonical Limited
111+ *
112+ * This file is part of ubuntu-html5-ui-toolkit.
113+ *
114+ * This package is free software; you can redistribute it and/or modify
115+ * it under the terms of the GNU Lesser General Public License as
116+ * published by the Free Software Foundation; either version 3 of the
117+ * License, or
118+ * (at your option) any later version.
119+
120+ * This package is distributed in the hope that it will be useful,
121+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
122+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
123+ * GNU General Public License for more details.
124+
125+ * You should have received a copy of the GNU Lesser General Public
126+ * License along with this program. If not, see
127+ * <http://www.gnu.org/licenses/>.
128+ */
129+
130+ /* ----------------------------------
131+ * Icons
132+ * ---------------------------------- */
133+
134+.icon {
135+ width: 26px;
136+ height: 26px;
137+ display: inline-block;
138+ vertical-align: middle;
139+}
140+
141+.icon.icon-call {
142+ background: url(../img/icons/icon-call.svg) no-repeat scroll center center transparent;
143+ background-size: 26px;
144+}
145\ No newline at end of file
146
147=== modified file '0.1/ambiance/css/shapes.css'
148--- 0.1/ambiance/css/shapes.css 2014-01-27 18:42:31 +0000
149+++ 0.1/ambiance/css/shapes.css 2014-02-12 21:02:42 +0000
150@@ -51,4 +51,12 @@
151 border-radius: 1.5rem;
152 margin-bottom: 0;
153 display: inline-block;
154+}
155+
156+[data-role="shape"] div {
157+ height: 100%;
158+ width: 100%;
159+ border-radius: 1.5rem;
160+ margin-bottom: 0;
161+ display: inline-block;
162 }
163\ No newline at end of file
164
165=== modified file '0.1/ambiance/css/sliders.css'
166--- 0.1/ambiance/css/sliders.css 2014-01-27 18:42:31 +0000
167+++ 0.1/ambiance/css/sliders.css 2014-02-12 21:02:42 +0000
168@@ -37,15 +37,17 @@
169 box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1);
170 }
171
172+/**
173+ TODO: remove absolte values for w/h
174+ */
175 input[type="range"]::-webkit-slider-thumb {
176 -webkit-appearance: none;
177- background-color: #bbbbbb;
178+ background-color: #dd4814;
179 -webkit-box-sizing: border-box;
180 box-sizing: border-box;
181 border-radius: 6px;
182- width: 38px;
183- height: 35px;
184- background-color: #bbbbbb;
185+ width: 30px;
186+ height: 27px;
187 -webkit-box-shadow: inset 0 2px 1px rgba(0, 0, 0, 0.1);
188 box-shadow: inset 0 2px 1px rgba(0, 0, 0, 0.1);
189 }
190\ No newline at end of file
191
192=== modified file '0.1/ambiance/css/toggles.css'
193--- 0.1/ambiance/css/toggles.css 2014-01-27 18:42:31 +0000
194+++ 0.1/ambiance/css/toggles.css 2014-02-12 21:02:42 +0000
195@@ -57,7 +57,7 @@
196 }
197
198 label:not([for]) input[type="checkbox"]:checked + span {
199- background: #dd4814 url(../img/tick@30.png) no-repeat 0.3rem 0.3rem;
200+ background: #dd4814 url(../img/tick-white@30.png) no-repeat 0.3rem 0.3rem;
201 background-size: 75% 75%;
202 background-position-y: 5px;
203 -webkit-transition: background-image 0.3s ease-in-out, background-color 0.3s ease-in-out, background-position 0.3s ease-in-out;
204@@ -70,7 +70,7 @@
205 }
206
207 input[type="checkbox"]:disabled:checked + span {
208- background: rgba(221, 72, 20, 0.5) url(../img/tick@30.png) no-repeat 0.3rem 0.3rem!important;
209+ background: rgba(221, 72, 20, 0.5) url(../img/tick-white@30.png) no-repeat 0.3rem 0.3rem!important;
210 background-size: 75% 75%!important;
211 }
212
213
214=== added directory '0.1/ambiance/img/icons'
215=== added file '0.1/ambiance/img/icons/icon-call.svg'
216--- 0.1/ambiance/img/icons/icon-call.svg 1970-01-01 00:00:00 +0000
217+++ 0.1/ambiance/img/icons/icon-call.svg 2014-02-12 21:02:42 +0000
218@@ -0,0 +1,88 @@
219+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
220+<!-- Created with Inkscape (http://www.inkscape.org/) -->
221+
222+<svg
223+ xmlns:dc="http://purl.org/dc/elements/1.1/"
224+ xmlns:cc="http://creativecommons.org/ns#"
225+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
226+ xmlns:svg="http://www.w3.org/2000/svg"
227+ xmlns="http://www.w3.org/2000/svg"
228+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
229+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
230+ width="90"
231+ height="90"
232+ id="svg3242"
233+ version="1.1"
234+ inkscape:version="0.48.4 r9939"
235+ sodipodi:docname="icon-call.svg">
236+ <defs
237+ id="defs3244" />
238+ <sodipodi:namedview
239+ id="base"
240+ pagecolor="#ffffff"
241+ bordercolor="#666666"
242+ borderopacity="1.0"
243+ inkscape:pageopacity="0.0"
244+ inkscape:pageshadow="2"
245+ inkscape:zoom="5.0931703"
246+ inkscape:cx="-3.9759133"
247+ inkscape:cy="57.478931"
248+ inkscape:document-units="px"
249+ inkscape:current-layer="g4255"
250+ showgrid="true"
251+ fit-margin-top="0"
252+ fit-margin-left="0"
253+ fit-margin-right="0"
254+ fit-margin-bottom="0"
255+ inkscape:window-width="1313"
256+ inkscape:window-height="744"
257+ inkscape:window-x="53"
258+ inkscape:window-y="24"
259+ inkscape:window-maximized="1">
260+ <inkscape:grid
261+ type="xygrid"
262+ id="grid3753"
263+ empspacing="6"
264+ visible="true"
265+ enabled="true"
266+ snapvisiblegridlinesonly="true"
267+ originx="0px"
268+ originy="-4.1975098e-06px" />
269+ </sodipodi:namedview>
270+ <metadata
271+ id="metadata3247">
272+ <rdf:RDF>
273+ <cc:Work
274+ rdf:about="">
275+ <dc:format>image/svg+xml</dc:format>
276+ <dc:type
277+ rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
278+ <dc:title></dc:title>
279+ </cc:Work>
280+ </rdf:RDF>
281+ </metadata>
282+ <g
283+ inkscape:label="Layer 1"
284+ inkscape:groupmode="layer"
285+ id="layer1"
286+ transform="translate(-2.6171875e-6,-962.3622)">
287+ <g
288+ transform="matrix(-1,0,0,1,90.000003,96.000017)"
289+ inkscape:label="#g3021"
290+ id="g4255">
291+ <rect
292+ style="opacity:0.4;fill:none;stroke:none"
293+ id="rect4257"
294+ width="90"
295+ height="90"
296+ x="0"
297+ y="866.36218" />
298+ <path
299+ style="fill:#ffffff;fill-opacity:1;stroke:none"
300+ d="m 70.726062,950.36218 c -28.77138,0 -64.7260601,-38.04794 -64.7260601,-64.63902 0,-2.08513 7.9904201,-17.04192 12.5276501,-12.51078 6.26382,6.25538 12.52761,18.76616 10.43966,22.93643 -1.7607,3.51666 -8.35175,2.22293 -8.35175,6.25537 0,4.03247 9.04774,9.03558 14.61557,14.59592 5.56784,5.56035 14.84647,18.76616 18.79142,18.76616 4.16766,0 3.25012,-6.6029 6.26384,-8.3405 4.06548,-2.34408 16.70346,4.17025 22.96727,10.42564 C 87.429562,942.02165 72.813992,950.36218 70.726062,950.36218 Z"
301+ id="path4259"
302+ inkscape:connector-curvature="0"
303+ sodipodi:nodetypes="ccsszzsssc" />
304+ </g>
305+ </g>
306+</svg>
307
308=== added file '0.1/ambiance/img/tick-white@30.png'
309Binary files 0.1/ambiance/img/tick-white@30.png 1970-01-01 00:00:00 +0000 and 0.1/ambiance/img/tick-white@30.png 2014-02-12 21:02:42 +0000 differ
310=== modified file 'examples/html5-theme/ui-gallery/index.html'
311--- examples/html5-theme/ui-gallery/index.html 2014-01-27 21:34:44 +0000
312+++ examples/html5-theme/ui-gallery/index.html 2014-02-12 21:02:42 +0000
313@@ -25,21 +25,33 @@
314 <meta charset="utf-8">
315 <meta name="copyright" content="Adnane Belmadiaf <daker@ubuntu.com>">
316 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
317- <title>Ubuntu UI HTML5: UI Gallery</title>
318+
319+ <title>Ubuntu HTML5 SDK: UI Gallery</title>
320 <link href="../../../0.1/ambiance/css/appTemplate.css" rel="stylesheet" type="text/css" />
321+
322+ <!-- Ubuntu UI javascript imports - Ambiance theme -->
323+ <script src="../../../0.1/ambiance/js/fast-buttons.js"></script>
324+ <script src="../../../0.1/ambiance/js/core.js"></script>
325+ <script src="../../../0.1/ambiance/js/page.js"></script>
326+ <script src="../../../0.1/ambiance/js/tabs.js"></script>
327+ <script src="../../../0.1/ambiance/js/pagestacks.js"></script>
328+
329+ <script>
330+ var UI = new UbuntuUI();
331+ window.onload = function() {
332+ UI.init();
333+ };
334+ </script>
335+
336 </head>
337+
338 <body>
339- <div data-role="page">
340+ <div data-role="mainview">
341+
342 <header data-role="header">
343- <nav data-role="navbar" class="tabs">
344- <div class="tabs-inner">
345- <ul data-role="tabs">
346- <li data-role="tab" class="active">
347- <a href="#item1">Ubuntu UI HTML5 Theme</a>
348- </li>
349- </ul>
350- </div>
351- </nav>
352+ <ul data-role="tabs">
353+ <li data-role="tabitem" data-page="main">Ubuntu HTML5 UI Toolkit</li>
354+ </ul>
355 </header>
356
357 <div data-role="content">
358@@ -48,4 +60,5 @@
359 </div>
360 </div>
361 </body>
362+
363 </html>
364
365=== modified file 'examples/html5-theme/ui-gallery/widgets.html'
366--- examples/html5-theme/ui-gallery/widgets.html 2014-01-27 21:34:44 +0000
367+++ examples/html5-theme/ui-gallery/widgets.html 2014-02-12 21:02:42 +0000
368@@ -25,12 +25,15 @@
369 <meta charset="utf-8">
370 <meta name="copyright" content="Adnane Belmadiaf <daker@ubuntu.com>">
371 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
372- <title>Ubuntu UI HTML5: ListItems</title>
373+ <title>Ubuntu HTML5 SDK</title>
374 <link href="../../../0.1/ambiance/css/appTemplate.css" rel="stylesheet" type="text/css" />
375 </head>
376+
377 <body>
378- <div data-role="page">
379+ <div data-role="mainview">
380+
381 <div data-role="content">
382+
383 <section data-role="list">
384 <ul data-role="listview">
385 <li>
386@@ -55,12 +58,12 @@
387 <a href="../widgets/ListItems.html" target="component">List Items</a>
388 </li>
389 <li>
390+ <a href="../widgets/OptionSelector.html" target="component">Option Selector</a>
391+ </li>
392+ <li>
393 <a href="../widgets/Dialog.html" target="component">Dialog</a>
394 </li>
395 <li>
396- <a href="../widgets/Dialog-Spinner.html" target="component">Dialog + Spinner</a>
397- </li>
398- <li>
399 <a href="../widgets/Popovers.html" target="component">Popover</a>
400 </li>
401 <li>
402@@ -68,6 +71,7 @@
403 </li>
404 </ul>
405 </section>
406+
407 </div>
408 </div>
409 </body>
410
411=== modified file 'examples/html5-theme/widgets/Buttons.html'
412--- examples/html5-theme/widgets/Buttons.html 2014-01-27 21:34:44 +0000
413+++ examples/html5-theme/widgets/Buttons.html 2014-02-12 21:02:42 +0000
414@@ -5,18 +5,18 @@
415 This file is part of ubuntu-html5-ui-toolkit.
416
417 This package is free software; you can redistribute it and/or modify
418- it under the terms of the GNU Lesser General Public License as
419- published by the Free Software Foundation; either version 3 of the
420+ it under the terms of the GNU Lesser General Public License as
421+ published by the Free Software Foundation; either version 3 of the
422 License, or
423 (at your option) any later version.
424-
425+
426 This package is distributed in the hope that it will be useful,
427 but WITHOUT ANY WARRANTY; without even the implied warranty of
428 MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
429 GNU General Public License for more details.
430-
431- You should have received a copy of the GNU Lesser General Public
432- License along with this program. If not, see
433+
434+ You should have received a copy of the GNU Lesser General Public
435+ License along with this program. If not, see
436 <http://www.gnu.org/licenses/>.
437 -->
438
439@@ -26,64 +26,45 @@
440 <meta charset="utf-8" />
441 <meta name="copyright" content="Adnane Belmadiaf <daker@ubuntu.com>">
442 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
443- <title>Ubuntu UI HTML5: Buttons</title>
444+ <title>Ubuntu HTML5 UI SDK: Buttons</title>
445 <link href="../../../0.1/ambiance/css/appTemplate.css" rel="stylesheet" type="text/css" />
446 </head>
447+
448 <body>
449- <div data-role="page">
450- <header data-role="header">
451- <nav data-role="navbar" class="tabs">
452- <div class="tabs-inner">
453- <ul data-role="tabs">
454- <li class="active" data-role="tab">
455- <a href="#item1">Tab 1</a>
456- </li>
457- <li class="inactive" data-role="tab">
458- <a href="#item2">Tab 2</a>
459- </li>
460- <li class="inactive" data-role="tab">
461- <a href="#item3">Tab 3</a>
462- </li>
463- </ul>
464- </div>
465- </nav>
466- </header>
467-
468+ <div data-role="mainview">
469 <div class="content">
470- <h1>Buttons</h1>
471- <div class="inset">
472- <button data-role="button">Standard</button>
473- </div>
474- <div class="inset">
475- <button data-role="button" class="success">Call</button>
476- </div>
477- <div class="inset">
478- <button data-role="button" class="danger">Delete</button>
479- </div>
480- <div class="inset">
481- <button data-role="button" class="warning">Warning</button>
482- </div>
483- <div class="inset">
484- <button data-role="button" class="ubuntu">Ubuntu</button>
485- </div>
486-
487- <h1>Links</h1>
488- <div class="inset">
489- <a href="#" data-role="button">Standard</a>
490- </div>
491- <div class="inset">
492- <a href="#" data-role="button">Call</a>
493- </div>
494- <div class="inset">
495- <a href="#" data-role="button">Delete</a>
496- </div>
497- <div class="inset">
498- <a href="#" data-role="button">Warning</a>
499- </div>
500- <div class="inset">
501- <a href="#" data-role="button">Ubuntu</a>
502+
503+ <div class="large-font">
504+ Button
505+ </div>
506+
507+ <div class="inset">
508+ <span class="medium-font">Standard</span>
509+ <button data-role="button" class="ubuntu">Standard</button>
510+ </div>
511+
512+ <div class="inset">
513+ <span class="medium-font">Color</span>
514+ <button data-role="button">Call</button>
515+ </div>
516+
517+ <div class="inset">
518+ <span class="medium-font">Icon</span>
519+ <button data-role="button" class="ubuntu"><span class="icon icon-call"></span></button>
520+ </div>
521+
522+ <div class="inset">
523+ <span class="medium-font">Icon and text</span>
524+ <button data-role="button" class="ubuntu">Call <span class="icon icon-call"></span></button>
525+ <button data-role="button" class="ubuntu"><span class="icon icon-call"></span> Call</button>
526+ </div>
527+
528+ <div class="inset">
529+ <span class="medium-font">Disabled</span>
530+ <button data-role="button" class="ubuntu disabled">Call</button>
531 </div>
532 </div>
533+
534 </div>
535 </body>
536 </html>
537
538=== modified file 'examples/html5-theme/widgets/Dialog-Spinner.html'
539--- examples/html5-theme/widgets/Dialog-Spinner.html 2014-01-27 21:34:44 +0000
540+++ examples/html5-theme/widgets/Dialog-Spinner.html 2014-02-12 21:02:42 +0000
541@@ -29,24 +29,14 @@
542 <title>Ubuntu UI HTML5: Dialog + Spinner</title>
543 <link href="../../../0.1/ambiance/css/appTemplate.css" rel="stylesheet" type="text/css" />
544 </head>
545+
546 <body>
547- <div data-role="page">
548+ <div data-role="mainview">
549+
550 <header data-role="header">
551- <nav data-role="navbar" class="tabs">
552- <div class="tabs-inner">
553- <ul data-role="tabs">
554- <li class="active" data-role="tab">
555- <a href="#item1">Tab 1</a>
556- </li>
557- <li class="inactive" data-role="tab">
558- <a href="#item2">Tab 2</a>
559- </li>
560- <li class="inactive" data-role="tab">
561- <a href="#item3">Tab 3</a>
562- </li>
563- </ul>
564- </div>
565- </nav>
566+ <ul data-role="tabs">
567+ <li data-role="tabitem" data-page="main">Ubuntu HTML5 UI Toolkit</li>
568+ </ul>
569 </header>
570
571 <div data-role="content">
572
573=== modified file 'examples/html5-theme/widgets/Dialog-Spinner@2.html'
574--- examples/html5-theme/widgets/Dialog-Spinner@2.html 2014-01-27 21:34:44 +0000
575+++ examples/html5-theme/widgets/Dialog-Spinner@2.html 2014-02-12 21:02:42 +0000
576@@ -27,27 +27,16 @@
577 <meta name="copyright" content="Adnane Belmadiaf <daker@ubuntu.com>">
578 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
579 <meta name="copyright" content="Adnane Belmadiaf <daker@ubuntu.com>">
580- <title>Ubuntu UI HTML5: Dialog + Big Spinner</title>
581+ <title>Ubuntu HTML5 UI SDK: Dialog + Big Spinner</title>
582 <link href="../../../0.1/ambiance/css/appTemplate.css" rel="stylesheet" type="text/css" />
583 </head>
584 <body>
585- <div data-role="page">
586+ <div data-role="mainview">
587+
588 <header data-role="header">
589- <nav data-role="navbar" class="tabs">
590- <div class="tabs-inner">
591- <ul data-role="tabs">
592- <li class="active" data-role="tab">
593- <a href="#item1">Tab 1</a>
594- </li>
595- <li class="inactive" data-role="tab">
596- <a href="#item2">Tab 2</a>
597- </li>
598- <li class="inactive" data-role="tab">
599- <a href="#item3">Tab 3</a>
600- </li>
601- </ul>
602- </div>
603- </nav>
604+ <ul data-role="tabs">
605+ <li data-role="tabitem" data-page="main">Ubuntu HTML5 UI Toolkit</li>
606+ </ul>
607 </header>
608
609 <div data-role="content">
610
611=== modified file 'examples/html5-theme/widgets/Dialog.html'
612--- examples/html5-theme/widgets/Dialog.html 2014-01-27 21:34:44 +0000
613+++ examples/html5-theme/widgets/Dialog.html 2014-02-12 21:02:42 +0000
614@@ -26,27 +26,17 @@
615 <meta charset="utf-8" />
616 <meta name="copyright" content="Adnane Belmadiaf <daker@ubuntu.com>">
617 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
618- <title>Ubuntu UI HTML5: Dialogs</title>
619+ <title>Ubuntu HTML5 UI SDK: Dialogs</title>
620 <link href="../../../0.1/ambiance/css/appTemplate.css" rel="stylesheet" type="text/css" />
621 </head>
622+
623 <body>
624- <div data-role="page">
625+ <div data-role="mainview">
626+
627 <header data-role="header">
628- <nav data-role="navbar" class="tabs">
629- <div class="tabs-inner">
630- <ul data-role="tabs">
631- <li class="active" data-role="tab">
632- <a href="#item1">Tab 1</a>
633- </li>
634- <li class="inactive" data-role="tab">
635- <a href="#item2">Tab 2</a>
636- </li>
637- <li class="inactive" data-role="tab">
638- <a href="#item3">Tab 3</a>
639- </li>
640- </ul>
641- </div>
642- </nav>
643+ <ul data-role="tabs">
644+ <li data-role="tabitem" data-page="main">Ubuntu HTML5 UI Toolkit</li>
645+ </ul>
646 </header>
647
648 <div data-role="content">
649
650=== modified file 'examples/html5-theme/widgets/Indexbar.html'
651--- examples/html5-theme/widgets/Indexbar.html 2014-01-27 21:34:44 +0000
652+++ examples/html5-theme/widgets/Indexbar.html 2014-02-12 21:02:42 +0000
653@@ -29,24 +29,14 @@
654 <title>Ubuntu UI HTML5: Application Template</title>
655 <link href="../../../0.1/ambiance/css/appTemplate.css" rel="stylesheet" type="text/css" />
656 </head>
657+
658 <body>
659- <div data-role="page">
660+ <div data-role="mainview">
661+
662 <header data-role="header">
663- <nav data-role="navbar" class="tabs">
664- <div class="tabs-inner">
665- <ul data-role="tabs">
666- <li class="active" data-role="tab">
667- <a href="#item1">Tab 1</a>
668- </li>
669- <li class="inactive" data-role="tab">
670- <a href="#item2">Tab 2</a>
671- </li>
672- <li class="inactive" data-role="tab">
673- <a href="#item3">Tab 3</a>
674- </li>
675- </ul>
676- </div>
677- </nav>
678+ <ul data-role="tabs">
679+ <li data-role="tabitem" data-page="main">Ubuntu HTML5 UI Toolkit</li>
680+ </ul>
681 </header>
682
683 <div data-role="content">
684
685=== modified file 'examples/html5-theme/widgets/ListItems.html'
686--- examples/html5-theme/widgets/ListItems.html 2014-01-27 21:34:44 +0000
687+++ examples/html5-theme/widgets/ListItems.html 2014-02-12 21:02:42 +0000
688@@ -29,129 +29,113 @@
689 <title>Ubuntu UI HTML5: ListItems</title>
690 <link href="../../../0.1/ambiance/css/appTemplate.css" rel="stylesheet" type="text/css" />
691 </head>
692+
693 <body>
694- <div data-role="page">
695- <header data-role="header">
696- <nav data-role="navbar" class="tabs">
697- <div class="tabs-inner">
698- <ul data-role="tabs">
699- <li class="active" data-role="tab">
700- <a href="#item1">Tab 1</a>
701- </li>
702- <li class="inactive" data-role="tab">
703- <a href="#item2">Tab 2</a>
704- </li>
705- <li class="inactive" data-role="tab">
706- <a href="#item3">Tab 3</a>
707- </li>
708- </ul>
709- </div>
710- </nav>
711- </header>
712+ <div data-role="mainview">
713
714 <div data-role="content">
715 <section data-role="list">
716- <header>1 - Standard</header>
717- <ul data-role="listview">
718- <li>
719- <p>Label</p>
720- </li>
721- <li>
722- <p>Label</p>
723- </li>
724- <li>
725- <p>Label</p>
726- </li>
727- </ul>
728- </section>
729-
730- <section data-role="list">
731- <header>2 - Subtitled</header>
732- <ul data-role="listview">
733- <li>
734- <p>Label</p>
735- <p>Secondary Label</p>
736- </li>
737- <li>
738- <p>Label</p>
739- <p>Secondary Label</p>
740- </li>
741- <li>
742- <p>Label</p>
743- <p>Secondary Label</p>
744- </li>
745- </ul>
746- </section>
747-
748- <section data-role="list">
749- <header>3 - Multiple Value</header>
750- <ul data-role="listview">
751- <li>
752- <p>Label</p>
753- <p>Value 1, Value 2</p>
754- </li>
755- <li>
756- <p>Label</p>
757- <p>Value 1, Value 2</p>
758- </li>
759- <li>
760- <p>Label</p>
761- <p>Value 1, Value 2</p>
762- </li>
763- <li>
764- <p>Label</p>
765- <p>Value 1, Value 2</p>
766- </li>
767- </ul>
768- </section>
769-
770- <section data-role="list">
771- <header>4 - Progression</header>
772- <ul data-role="listview">
773- <li>
774- <a href="#">Label</a>
775- </li>
776- <li>
777- <a href="#">Label</a>
778- </li>
779- <li>
780- <a href="#">Label</a>
781- </li>
782- </ul>
783- </section>
784-
785- <section data-role="list">
786- <header>5 - Icon</header>
787- <ul data-role="listview">
788- <li>
789- <a href="#">
790- <aside>
791- <img alt="placeholder" src="../../ambiance/img/avatar_contacts_list@8.png">
792- </aside>
793- <p>Label</p>
794- </a>
795- </li>
796- <li>
797- <a href="#">
798- <aside>
799- <img alt="placeholder" src="../../ambiance/img/avatar_contacts_list@8.png">
800- </aside>
801- <p>Label</p>
802- </a>
803- </li>
804- <li>
805- <a href="#">
806- <aside>
807- <img alt="placeholder" src="../../ambiance/img/avatar_contacts_list@8.png">
808- </aside>
809- <p>Label</p>
810- </a>
811- </li>
812- </ul>
813- </section>
814-
815- <section data-role="list">
816- <header>6 - Control</header>
817+ <header class="large-font">Standard</header>
818+ <ul data-role="listview">
819+ <li>
820+ <p>Label</p>
821+ </li>
822+ <li>
823+ <p>Label</p>
824+ </li>
825+ <li>
826+ <p>Label</p>
827+ </li>
828+ </ul>
829+ </section>
830+
831+ <section data-role="list">
832+ <header class="large-font">Subtitled</header>
833+ <ul data-role="listview">
834+ <li>
835+ <p>Label</p>
836+ <p class="small-font">Secondary Label</p>
837+ </li>
838+ <li>
839+ <p>Label</p>
840+ <p class="small-font">Secondary Label</p>
841+ </li>
842+ <li>
843+ <p>Label</p>
844+ <p class="small-font">Secondary Label</p>
845+ </li>
846+ </ul>
847+ </section>
848+
849+ <section data-role="list">
850+ <header class="large-font">Multiple Value</header>
851+ <ul data-role="listview">
852+ <li>
853+ <p>Label</p>
854+ <p class="small-font">Value 1, Value 2</p>
855+ </li>
856+ <li>
857+ <p>Label</p>
858+ <p class="small-font">Value 1, Value 2</p>
859+ </li>
860+ <li>
861+ <p>Label</p>
862+ <p class="small-font">Value 1, Value 2</p>
863+ </li>
864+ <li>
865+ <p>Label</p>
866+ <p class="small-font">Value 1, Value 2</p>
867+ </li>
868+ </ul>
869+ </section>
870+
871+ <section data-role="list">
872+ <header class="large-font">Progression</header>
873+ <ul data-role="listview">
874+ <li>
875+ <a href="#">Label</a>
876+ </li>
877+ <li>
878+ <a href="#">Label</a>
879+ </li>
880+ <li>
881+ <a href="#">Label</a>
882+ </li>
883+ </ul>
884+ </section>
885+
886+ <section data-role="list">
887+ <header class="large-font">Icon</header>
888+ <ul data-role="listview">
889+ <li>
890+ <a href="#">
891+ <aside>
892+ <img alt="placeholder" src="/usr/share/ubuntu-html5-ui-toolkit/0.1/ambiance/img/avatar_contacts_list@8.png">
893+ </aside>
894+ <p>Label</p>
895+ </a>
896+ </li>
897+ <li>
898+ <a href="#">
899+ <aside>
900+ <img alt="placeholder" src="/usr/share/ubuntu-html5-ui-toolkit/0.1/ambiance/img/avatar_contacts_list@8.png">
901+ </aside>
902+ <p>Label</p>
903+ </a>
904+ </li>
905+ <li>
906+ <a href="#">
907+ <aside>
908+ <img alt="placeholder" src="/usr/share/ubuntu-html5-ui-toolkit/0.1/ambiance/img/avatar_contacts_list@8.png">
909+ </aside>
910+ <p>Label</p>
911+ </a>
912+ </li>
913+ </ul>
914+ </section>
915+
916+ <section data-role="list">
917+ <header class="large-font">Control</header>
918 <ul data-role="listview">
919 <li>
920 <p>Label</p>
921
922=== modified file 'examples/html5-theme/widgets/OptionSelector.html'
923--- examples/html5-theme/widgets/OptionSelector.html 2014-01-27 21:34:44 +0000
924+++ examples/html5-theme/widgets/OptionSelector.html 2014-02-12 21:02:42 +0000
925@@ -58,24 +58,7 @@
926 </script>
927 </head>
928 <body>
929- <div data-role="page">
930- <header data-role="header">
931- <nav data-role="navbar" class="tabs">
932- <div class="tabs-inner">
933- <ul data-role="tabs">
934- <li class="active" data-role="tab">
935- <a href="#item1">Tab 1</a>
936- </li>
937- <li class="inactive" data-role="tab">
938- <a href="#item2">Tab 2</a>
939- </li>
940- <li class="inactive" data-role="tab">
941- <a href="#item3">Tab 3</a>
942- </li>
943- </ul>
944- </div>
945- </nav>
946- </header>
947+ <div data-role="mainview">
948
949 <div data-role="content">
950 <div class="inset" style="margin: 15px;">
951@@ -162,4 +145,4 @@
952 </div>
953 </div>
954 </body>
955-</html>
956\ No newline at end of file
957+</html>
958
959=== modified file 'examples/html5-theme/widgets/Pagestack.html'
960--- examples/html5-theme/widgets/Pagestack.html 2014-01-27 21:34:44 +0000
961+++ examples/html5-theme/widgets/Pagestack.html 2014-02-12 21:02:42 +0000
962@@ -29,24 +29,14 @@
963 <title>Ubuntu UI HTML5: PageStack</title>
964 <link href="../../../0.1/ambiance/css/appTemplate.css" rel="stylesheet" type="text/css" />
965 </head>
966+
967 <body>
968- <div data-role="page">
969+ <div data-role="mainview">
970+
971 <header data-role="header">
972- <nav data-role="navbar" class="tabs">
973- <div class="tabs-inner">
974- <ul data-role="tabs">
975- <li class="active" data-role="tab">
976- <a href="#item1">Tab 1</a>
977- </li>
978- <li class="inactive" data-role="tab">
979- <a href="#item2">Tab 2</a>
980- </li>
981- <li class="inactive" data-role="tab">
982- <a href="#item3">Tab 3</a>
983- </li>
984- </ul>
985- </div>
986- </nav>
987+ <ul data-role="tabs">
988+ <li data-role="tabitem" data-page="main">Ubuntu HTML5 UI Toolkit</li>
989+ </ul>
990 </header>
991
992 <div data-role="content">
993
994=== modified file 'examples/html5-theme/widgets/Popovers.html'
995--- examples/html5-theme/widgets/Popovers.html 2014-01-27 21:34:44 +0000
996+++ examples/html5-theme/widgets/Popovers.html 2014-02-12 21:02:42 +0000
997@@ -33,25 +33,9 @@
998 <script src="../../../0.1/ambiance/js/buttons.js"></script>
999 <script src="../../../0.1/ambiance/js/popovers.js"></script>
1000 </head>
1001+
1002 <body>
1003- <div data-role="page">
1004- <header data-role="header">
1005- <nav data-role="navbar" class="tabs">
1006- <div class="tabs-inner">
1007- <ul data-role="tabs">
1008- <li class="active" data-role="tab">
1009- <a href="#item1">Tab 1</a>
1010- </li>
1011- <li class="inactive" data-role="tab">
1012- <a href="#item2">Tab 2</a>
1013- </li>
1014- <li class="inactive" data-role="tab">
1015- <a href="#item3">Tab 3</a>
1016- </li>
1017- </ul>
1018- </div>
1019- </nav>
1020- </header>
1021+ <div data-role="mainview">
1022
1023 <div data-role="content">
1024 <div class="inset" style="margin-top: 250px;text-align: center">
1025
1026=== modified file 'examples/html5-theme/widgets/ProgressBars.html'
1027--- examples/html5-theme/widgets/ProgressBars.html 2014-01-27 21:34:44 +0000
1028+++ examples/html5-theme/widgets/ProgressBars.html 2014-02-12 21:02:42 +0000
1029@@ -29,30 +29,13 @@
1030 <title>Ubuntu UI HTML5: ProgressBars</title>
1031 <link href="../../../0.1/ambiance/css/appTemplate.css" rel="stylesheet" type="text/css" />
1032 </head>
1033+
1034 <body>
1035- <div data-role="page">
1036- <header data-role="header">
1037- <nav data-role="navbar" class="tabs">
1038- <div class="tabs-inner">
1039- <ul data-role="tabs">
1040- <li class="active" data-role="tab">
1041- <a href="#item1">Tab 1</a>
1042- </li>
1043- <li class="inactive" data-role="tab">
1044- <a href="#item2">Tab 2</a>
1045- </li>
1046- <li class="inactive" data-role="tab">
1047- <a href="#item3">Tab 3</a>
1048- </li>
1049- </ul>
1050- </div>
1051- </nav>
1052- </header>
1053+ <div data-role="mainview">
1054
1055 <div data-role="content">
1056 <div class="inset">
1057 <progress></progress>
1058- <progress class="bigger"></progress>
1059 </div>
1060 <div class="inset">
1061 <progress value="80" max="100"></progress>
1062
1063=== modified file 'examples/html5-theme/widgets/Sliders.html'
1064--- examples/html5-theme/widgets/Sliders.html 2014-01-27 21:34:44 +0000
1065+++ examples/html5-theme/widgets/Sliders.html 2014-02-12 21:02:42 +0000
1066@@ -29,45 +29,33 @@
1067 <title>Ubuntu UI HTML5: Sliders</title>
1068 <link href="../../../0.1/ambiance/css/appTemplate.css" rel="stylesheet" type="text/css" />
1069 </head>
1070+
1071 <body>
1072- <div data-role="page">
1073- <header data-role="header">
1074- <nav data-role="navbar" class="tabs">
1075- <div class="tabs-inner">
1076- <ul data-role="tabs">
1077- <li class="active" data-role="tab">
1078- <a href="#item1">Tab 1</a>
1079- </li>
1080- <li class="inactive" data-role="tab">
1081- <a href="#item2">Tab 2</a>
1082- </li>
1083- <li class="inactive" data-role="tab">
1084- <a href="#item3">Tab 3</a>
1085- </li>
1086- </ul>
1087- </div>
1088- </nav>
1089- </header>
1090+ <div data-role="mainview">
1091
1092 <div data-role="content">
1093+
1094 <div class="inset">
1095 <form onsubmit="return false" oninput="ojim.value = jim.valueAsNumber">
1096 <input name="jim" id="jim" type="range" min="0" max="100" value="0">
1097 <output for="jim" name="ojim">0</output>
1098 </form>
1099 </div>
1100+
1101 <div class="inset">
1102 <form onsubmit="return false" oninput="obob.value = bob.valueAsNumber">
1103 <input id="bob" name="bob" type="range" min="23" max="109" value="0">
1104 <output for="bob" name="obob">23</output>
1105 </form>
1106 </div>
1107+
1108 <div class="inset">
1109 <form onsubmit="return false" oninput="osue.value = sue.valueAsNumber">
1110 <input id="sue" name="sue" type="range" min="50" max="250" value="50" step="15">
1111 <output for="sue" name="osue">50</output>
1112 </form>
1113 </div>
1114+
1115 </div>
1116 </div>
1117 </body>
1118
1119=== modified file 'examples/html5-theme/widgets/TextInputs.html'
1120--- examples/html5-theme/widgets/TextInputs.html 2014-01-27 21:34:44 +0000
1121+++ examples/html5-theme/widgets/TextInputs.html 2014-02-12 21:02:42 +0000
1122@@ -29,25 +29,9 @@
1123 <title>Ubuntu UI HTML5: TextInputs</title>
1124 <link href="../../../0.1/ambiance/css/appTemplate.css" rel="stylesheet" type="text/css" />
1125 </head>
1126+
1127 <body>
1128- <div data-role="page">
1129- <header data-role="header">
1130- <nav data-role="navbar" class="tabs">
1131- <div class="tabs-inner">
1132- <ul data-role="tabs">
1133- <li class="active" data-role="tab">
1134- <a href="#item1">Tab 1</a>
1135- </li>
1136- <li class="inactive" data-role="tab">
1137- <a href="#item2">Tab 2</a>
1138- </li>
1139- <li class="inactive" data-role="tab">
1140- <a href="#item3">Tab 3</a>
1141- </li>
1142- </ul>
1143- </div>
1144- </nav>
1145- </header>
1146+ <div data-role="mainview">
1147
1148 <div data-role="content">
1149 <div class="inset">
1150
1151=== modified file 'examples/html5-theme/widgets/Toggles.html'
1152--- examples/html5-theme/widgets/Toggles.html 2014-01-27 21:34:44 +0000
1153+++ examples/html5-theme/widgets/Toggles.html 2014-02-12 21:02:42 +0000
1154@@ -29,53 +29,72 @@
1155 <title>Ubuntu UI HTML5: Toggles</title>
1156 <link href="../../../0.1/ambiance/css/appTemplate.css" rel="stylesheet" type="text/css" />
1157 </head>
1158+
1159 <body>
1160- <div data-role="page">
1161- <header data-role="header">
1162- <nav data-role="navbar" class="tabs">
1163- <div class="tabs-inner">
1164- <ul data-role="tabs">
1165- <li class="active" data-role="tab">
1166- <a href="#item1">Tab 1</a>
1167- </li>
1168- <li class="inactive" data-role="tab">
1169- <a href="#item2">Tab 2</a>
1170- </li>
1171- <li class="inactive" data-role="tab">
1172- <a href="#item3">Tab 3</a>
1173- </li>
1174- </ul>
1175- </div>
1176- </nav>
1177- </header>
1178+ <div data-role="mainview">
1179+
1180+ <div data-role="content">
1181+
1182+ <!-- Checkboxes -->
1183+
1184+ <div style="padding-bottom: 40px">
1185+ <div class="large-font">
1186+ Checkbox
1187+ </div>
1188
1189- <div data-role="content">
1190 <div class="inset">
1191+ <span class="medium-font">Unchecked</span>
1192+ <label>
1193+ <input type="checkbox">
1194+ <span></span>
1195+ </label>
1196+ </div>
1197+ <div>
1198+ <span class="medium-font">Checked</span>
1199 <label>
1200 <input type="checkbox" checked="">
1201 <span></span>
1202 </label>
1203 </div>
1204- <div class="inset">
1205- <label>
1206- <input type="checkbox">
1207- <span></span>
1208- </label>
1209- </div>
1210- <div class="inset">
1211- <label>
1212- <input type="checkbox" checked="" disabled="">
1213- <span></span>
1214- </label>
1215- </div>
1216- <div class="inset">
1217- <label>
1218- <input type="checkbox" disabled="">
1219- <span></span>
1220- </label>
1221- </div>
1222- <div class="inset">
1223- <label>
1224+
1225+ <div>
1226+ <span class="medium-font">Disabled</span>
1227+ <div class="inset" style="display:inline">
1228+ <label>
1229+ <input type="checkbox" checked="" disabled="">
1230+ <span></span>
1231+ </label>
1232+ </div>
1233+ <div class="inset" style="display: inline">
1234+ <label>
1235+ <input type="checkbox" disabled="">
1236+ <span></span>
1237+ </label>
1238+ </div>
1239+ </div>
1240+
1241+</div>
1242+
1243+<!-- Switch -->
1244+
1245+<div>
1246+ <div class="large-font">
1247+ Switch
1248+ </div>
1249+
1250+ <div class="inset">
1251+ <span class="medium-font">Unchecked</span>
1252+ <label>
1253+ <input type="checkbox" data-type="switch">
1254+ <span class="toggle">
1255+ <span class="toggle-handle"></span>
1256+ <span class="toggle-bg"></span>
1257+ </span>
1258+ </label>
1259+ </div>
1260+ <div class="inset">
1261+ <span class="medium-font">Checked</span>
1262+ <label>
1263 <input type="checkbox" data-type="switch" checked="">
1264 <span class="toggle">
1265 <span class="toggle-handle"></span>
1266@@ -83,33 +102,31 @@
1267 </span>
1268 </label>
1269 </div>
1270- <div class="inset">
1271- <label>
1272- <input type="checkbox" data-type="switch">
1273- <span class="toggle">
1274- <span class="toggle-handle"></span>
1275- <span class="toggle-bg"></span>
1276- </span>
1277- </label>
1278- </div>
1279- <div class="inset">
1280- <label>
1281- <input type="checkbox" data-type="switch" checked="" disabled="">
1282- <span class="toggle">
1283- <span class="toggle-handle"></span>
1284- <span class="toggle-bg"></span>
1285- </span>
1286- </label>
1287- </div>
1288- <div class="inset">
1289- <label>
1290- <input type="checkbox" data-type="switch" disabled="">
1291- <span class="toggle">
1292- <span class="toggle-handle"></span>
1293- <span class="toggle-bg"></span>
1294- </span>
1295- </label>
1296- </div>
1297+
1298+ <div>
1299+ <span class="medium-font">Disabled</span>
1300+
1301+ <div class="inset" style="display: inline">
1302+ <label>
1303+ <input type="checkbox" data-type="switch" checked="" disabled="">
1304+ <span class="toggle">
1305+ <span class="toggle-handle"></span>
1306+ <span class="toggle-bg"></span>
1307+ </span>
1308+ </label>
1309+ </div>
1310+ <div class="inset" style="display: inline">
1311+ <label>
1312+ <input type="checkbox" data-type="switch" disabled="">
1313+ <span class="toggle">
1314+ <span class="toggle-handle"></span>
1315+ <span class="toggle-bg"></span>
1316+ </span>
1317+ </label>
1318+ </div>
1319+ </div>
1320+</div>
1321+
1322 </div>
1323 </div>
1324 </body>
1325
1326=== modified file 'examples/html5-theme/widgets/Toolbar.html'
1327--- examples/html5-theme/widgets/Toolbar.html 2014-01-27 21:34:44 +0000
1328+++ examples/html5-theme/widgets/Toolbar.html 2014-02-12 21:02:42 +0000
1329@@ -38,25 +38,9 @@
1330 <script src="../../../0.1/ambiance/js/toolbars.js"></script>
1331 <script src="../../../0.1/ambiance/js/tabs.js"></script>
1332 </head>
1333+
1334 <body>
1335- <div data-role="page">
1336- <header data-role="header">
1337- <nav data-role="navbar" class="tabs">
1338- <div class="tabs-inner">
1339- <ul data-role="tabs">
1340- <li class="active" data-role="tab">
1341- <a href="#item1">Tab 1</a>
1342- </li>
1343- <li class="inactive" data-role="tab">
1344- <a href="#item2">Tab 2</a>
1345- </li>
1346- <li class="inactive" data-role="tab">
1347- <a href="#item3">Tab 3</a>
1348- </li>
1349- </ul>
1350- </div>
1351- </nav>
1352- </header>
1353+ <div data-role="mainview">
1354
1355 <div data-role="content">
1356 <div class="inset">
1357
1358=== modified file 'examples/html5-theme/widgets/UbuntuShape.html'
1359--- examples/html5-theme/widgets/UbuntuShape.html 2014-01-27 21:34:44 +0000
1360+++ examples/html5-theme/widgets/UbuntuShape.html 2014-02-12 21:02:42 +0000
1361@@ -29,31 +29,42 @@
1362 <title>Ubuntu UI HTML5: UbuntuShape</title>
1363 <link href="../../../0.1/ambiance/css/appTemplate.css" rel="stylesheet" type="text/css" />
1364 </head>
1365+
1366 <body>
1367- <div data-role="page">
1368- <header data-role="header">
1369- <nav data-role="navbar" class="tabs">
1370- <div class="tabs-inner">
1371- <ul data-role="tabs">
1372- <li class="active" data-role="tab">
1373- <a href="#item1">Tab 1</a>
1374- </li>
1375- <li class="inactive" data-role="tab">
1376- <a href="#item2">Tab 2</a>
1377- </li>
1378- <li class="inactive" data-role="tab">
1379- <a href="#item3">Tab 3</a>
1380- </li>
1381- </ul>
1382- </div>
1383- </nav>
1384- </header>
1385-
1386- <div data-role="content">
1387- <div data-role="shape">
1388- <img src="img/map_icon.png">
1389- </div>
1390- </div>
1391+ <div data-role="mainview">
1392+
1393+ <div class="large-font" style="padding-bottom: 40px">
1394+ Ubuntu Shape
1395+ </div>
1396+
1397+ <div class="medium-font">
1398+ <span>Color</span>
1399+ <div data-role="content" style="display: inline">
1400+ <div data-role="shape">
1401+ <div style="background-color: #dd4814"/>
1402+ </div>
1403+ </div>
1404+ <div data-role="content" style="display: inline">
1405+ <div data-role="shape">
1406+ <div style="background-color: violet"/>
1407+ </div>
1408+ </div>
1409+ <div data-role="content" style="display: inline">
1410+ <div data-role="shape">
1411+ <div style="background-color: gray"/>
1412+ </div>
1413+ </div>
1414+ </div>
1415+
1416+ <div class="medium-font">
1417+ <span>Image</span>
1418+ <div data-role="content" style="display: inline">
1419+ <div data-role="shape">
1420+ <img src="/usr/share/ubuntu-html5-ui-toolkit/0.1/ambiance/img/map_icon.png">
1421+ </div>
1422+ </div>
1423+ </div>
1424+
1425 </div>
1426 </body>
1427 </html>

Subscribers

People subscribed via source and target branches