Skip to content

Commit d217d56

Browse files
rnowmrnowm
committed
Added confirm BB
1 parent 9c22cb1 commit d217d56

File tree

3 files changed

+119
-84
lines changed

3 files changed

+119
-84
lines changed

‎app.html

+90-78
Original file line numberDiff line numberDiff line change
@@ -250,6 +250,11 @@ <h1>Building Blocks <em>demo</em></h1>
250250
<p>Buttons</p>
251251
</a>
252252
</li>
253+
<li>
254+
<a id="btn-confirm" href="#">
255+
<p>Confirm</p>
256+
</a>
257+
</li>
253258
<li>
254259
<a id="btn-edit-mode" href="#">
255260
<p>Edit mode</p>
@@ -335,91 +340,98 @@ <h1>Building Blocks <em>demo</em></h1>
335340
</section>
336341

337342
<!--···························· Buttons ····························-->
338-
<!--section role="region" id="headers" data-position="right">
343+
<section role="region" id="buttons" data-position="right">
339344
<header class="fixed">
340-
<a id="btn-headers-back" href="#"><span class="icon icon-back">back</span></a>
341-
<h1>Headers</h1>
345+
<a id="btn-buttons-back" href="#"><span class="icon icon-back">back</span></a>
346+
<h1>Buttons</h1>
342347
</header>
343-
<article class="content scrollable header"-->
344348

345-
<section role="region" id="buttons" data-position="right">
346-
<header class="fixed">
347-
<a id="btn-buttons-back" href="#"><span class="icon icon-back">back</span></a>
348-
<h1>Buttons</h1>
349-
</header>
349+
<article class="content scrollable header">
350+
<header><h2>Normal</h2></header>
351+
<div>
352+
<button>Default</button>
353+
<button class="recommend">Recommend</button>
354+
<button class="danger">Danger</button>
355+
</div>
356+
357+
<header><h2>Disabled</h2></header>
358+
<div>
359+
<button disabled>Default</button>
360+
<a href="#" role="button" aria-disabled="true" class="recommend">Recommend</a>
361+
<button disabled class="danger">Danger</button>
362+
</div>
350363

351-
<article class="content scrollable header">
352-
<header><h2>Normal</h2></header>
353-
<div>
354-
<button>Default</button>
355-
<button class="recommend">Recommend</button>
356-
<button class="danger">Danger</button>
357-
</div>
358-
359-
<header><h2>Disabled</h2></header>
360-
<div>
361-
<button disabled>Default</button>
362-
<a href="#" role="button" aria-disabled="true" class="recommend">Recommend</a>
363-
<button disabled class="danger">Danger</button>
364-
</div>
364+
<header><h2>Disabled with dark background</h2></header>
365+
<div>
366+
<button disabled>Default</button>
367+
<a href="#" role="button" aria-disabled="true" class="recommend">Recommend</a>
368+
<button disabled class="danger">Danger</button>
369+
</div>
365370

366-
<header><h2>Disabled with dark background</h2></header>
367-
<div>
368-
<button disabled>Default</button>
369-
<a href="#" role="button" aria-disabled="true" class="recommend">Recommend</a>
370-
<button disabled class="danger">Danger</button>
371-
</div>
371+
<header><h2>Button List</h2></header>
372+
<div>
373+
<ul>
374+
<li>
375+
<button>Default</button>
376+
</li>
377+
<li>
378+
<button disabled="disabled">Disabled</button>
379+
</li>
380+
<li>
381+
<button class="icon icon-view">
382+
View Name
383+
</button>
384+
</li>
385+
<li>
386+
<button disabled="disabled" class="icon icon-view">
387+
View Name
388+
</button>
389+
</li>
390+
<li>
391+
<a role="button" class="icon icon-dialog">
392+
Tuesday September 18, 2012
393+
</a>
394+
</li>
395+
<li>
396+
<a role="button" aria-disabled="true" class="icon icon-dialog">
397+
Tuesday September 18, 2012
398+
</a>
399+
</li>
400+
</ul>
401+
</div>
372402

373-
<header><h2>Button List</h2></header>
374-
<div>
375-
<ul>
376-
<li>
377-
<button>Default</button>
378-
</li>
379-
<li>
380-
<button disabled="disabled">Disabled</button>
381-
</li>
382-
<li>
383-
<button class="icon icon-view">
384-
View Name
385-
</button>
386-
</li>
387-
<li>
388-
<button disabled="disabled" class="icon icon-view">
389-
View Name
390-
</button>
391-
</li>
392-
<li>
393-
<a role="button" class="icon icon-dialog">
394-
Tuesday September 18, 2012
395-
</a>
396-
</li>
397-
<li>
398-
<a role="button" aria-disabled="true" class="icon icon-dialog">
399-
Tuesday September 18, 2012
400-
</a>
401-
</li>
402-
</ul>
403-
</div>
403+
<header><h2>Button List (compact mode)</h2></header>
404+
<div>
405+
<ul class="compact">
406+
<li>
407+
<label>Description</label>
408+
<button class="icon icon-dialog">Action 1</button>
409+
</li>
410+
<li>
411+
<label>Description</label>
412+
<button class="icon icon-dialog">Action 2</button>
413+
</li>
414+
<li>
415+
<label>This is a large description for this action</label>
416+
<button class="icon icon-dialog" disabled >Action 3 (disabled)</button>
417+
</li>
418+
</ul>
419+
</div>
420+
</article>
421+
</section>
404422

405-
<header><h2>Button List (compact mode)</h2></header>
406-
<div>
407-
<ul class="compact">
408-
<li>
409-
<label>Description</label>
410-
<button class="icon icon-dialog">Action 1</button>
411-
</li>
412-
<li>
413-
<label>Description</label>
414-
<button class="icon icon-dialog">Action 2</button>
415-
</li>
416-
<li>
417-
<label>This is a large description for this action</label>
418-
<button class="icon icon-dialog" disabled >Action 3 (disabled)</button>
419-
</li>
420-
</ul>
421-
</div>
422-
</article>
423+
<!--·························· Action menu ··························-->
424+
<section id="confirm" data-position="back" class="fullscreen">
425+
<form role="dialog" data-type="confirm">
426+
<section>
427+
<h1>Confirmation</h1>
428+
<p>Are you sure you want to delete this contact?</p>
429+
</section>
430+
<menu>
431+
<button>Cancel</button>
432+
<button class="danger">Delete</button>
433+
</menu>
434+
</form>
423435
</section>
424436

425437
<!--·························· Edit mode ··························-->

‎cross_browser.css

+21-5
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,15 @@
55
/* ----------------------------------------------------------------- */
66

77
/* Action menu */
8+
form[role="dialog"][data-type="action"],
9+
form[role="dialog"][data-type="object"],
10+
form[role="dialog"][data-type="confirm"] {
11+
background:
12+
url(style/action_menu/images/ui/pattern.png) repeat left top,
13+
url(style/action_menu/images/ui/gradient.png) no-repeat left top;
14+
background-size: auto, 100%;
15+
}
16+
817
form[role="dialog"][data-type="action"] > header:first-child,
918
form[role="dialog"][data-type="object"] > header:first-child {
1019
box-sizing: border-box;
@@ -16,6 +25,7 @@ button,
1625
a[role="button"],
1726
.button {
1827
box-sizing: border-box;
28+
-moz-box-sizing: border-box;
1929
-webkit-box-sizing: border-box;
2030
}
2131

@@ -28,19 +38,25 @@ a[role="button"].danger:active,
2838
/* Confirm */
2939
form[role="dialog"][data-type="confirm"] > section {
3040
box-sizing: border-box;
41+
-moz-box-sizing: border-box;
3142
-webkit-box-sizing: border-box;
3243
}
3344

34-
form[role="dialog"][data-type="confirm"] menu {
35-
display: inline-block;
36-
width: 100%;
37-
}
38-
3945
form[role="dialog"][data-type="confirm"] menu button,
4046
form[role="dialog"][data-type="edit"] menu button {
4147
width: 48%;
4248
}
4349

50+
form[role="dialog"][data-type="confirm"] menu button:last-child,
51+
form[role="dialog"][data-type="edit"] menu button:last-child {
52+
float: right;
53+
margin-left: 0;
54+
}
55+
56+
form[role="dialog"][data-type="confirm"] menu button:first-child:last-child,
57+
form[role="dialog"][data-type="edit"] menu button:first-child:last-child {
58+
width: 100%;
59+
}
4460

4561
/* Edit mode */
4662
form[role="dialog"][data-type="edit"] header menu[type="toolbar"] button {

‎js/app.js

+8-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
//action menu
22
document.querySelector('#btn-action-menu').addEventListener ('click', function () {
3-
console.log('actionmenu');
43
document.querySelector('#action-menu').className = 'fade-in';
54
});
65
document.querySelector('#action-menu').addEventListener ('click', function () {
@@ -17,6 +16,14 @@ document.querySelector('#btn-buttons-back').addEventListener ('click', function
1716
document.querySelector('[data-position="current"]').className = 'current';
1817
});
1918

19+
//confirm
20+
document.querySelector('#btn-confirm').addEventListener ('click', function () {
21+
document.querySelector('#confirm').className = 'fade-in';
22+
});
23+
document.querySelector('#confirm').addEventListener ('click', function () {
24+
this.className = 'fade-out';
25+
});
26+
2027
//edit mode
2128
document.querySelector('#btn-edit-mode').addEventListener ('click', function () {
2229
document.querySelector('#edit-mode').className = 'edit';

0 commit comments

Comments
 (0)