patternfly-sass 3.11.0 → 3.12.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/assets/stylesheets/patternfly/_bootstrap-treeview.scss +28 -6
- data/assets/stylesheets/patternfly/_dropdowns.scss +11 -0
- data/assets/stylesheets/patternfly/_forms.scss +14 -0
- data/assets/stylesheets/patternfly/_list-view.scss +63 -0
- data/assets/stylesheets/patternfly/_toolbar.scss +11 -3
- data/assets/stylesheets/patternfly/_wizard.scss +44 -8
- data/assets/stylesheets/patternfly/lib/bootstrap-datetimepicker.scss +4 -4
- data/bower.json +2 -2
- data/lib/patternfly-sass/version.rb +2 -2
- data/spec/html/bootstrap-treeview-2.html +1 -1
- data/spec/html/bootstrap-treeview.html +16 -3
- data/spec/html/card-view-multi-select.html +6 -24
- data/spec/html/card-view-single-select.html +6 -24
- data/spec/html/cards.html +3 -0
- data/spec/html/dist/css/patternfly-additions.css +194 -118
- data/spec/html/dist/css/patternfly-additions.css.map +1 -1
- data/spec/html/dist/css/patternfly-additions.min.css +2 -2
- data/spec/html/dist/css/patternfly-additions.min.css.map +1 -1
- data/spec/html/dist/css/patternfly.css +20 -38
- data/spec/html/dist/css/patternfly.css.map +1 -1
- data/spec/html/dist/css/patternfly.min.css +2 -2
- data/spec/html/dist/css/patternfly.min.css.map +1 -1
- data/spec/html/forms.html +365 -226
- data/spec/html/horizontal-navigation.html +3 -0
- data/spec/html/index.html +6 -0
- data/spec/html/list-view-compound-expansion.html +1716 -0
- data/spec/html/list-view-rows.html +4 -0
- data/spec/html/list-view-simple-expansion.html +999 -0
- data/spec/html/list-view.html +6 -24
- data/spec/html/notification-drawer-horizontal-nav.html +3 -0
- data/spec/html/notification-drawer-vertical-nav.html +3 -0
- data/spec/html/toolbar.html +8 -11
- data/spec/html/vertical-navigation-primary-only.html +3 -0
- data/spec/html/vertical-navigation-with-badges.html +3 -0
- data/spec/html/vertical-navigation-with-secondary.html +3 -0
- data/spec/html/vertical-navigation-with-tertiary-no-icons.html +3 -0
- data/spec/html/vertical-navigation-with-tertiary-pins.html +3 -0
- data/spec/html/wizard.html +574 -318
- metadata +6 -2
data/spec/html/list-view.html
CHANGED
@@ -145,11 +145,9 @@
|
|
145
145
|
<div class="input-group-btn">
|
146
146
|
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Name <span class="caret"></span></button>
|
147
147
|
<ul class="dropdown-menu">
|
148
|
-
<li><a href="#">
|
149
|
-
<li><a href="#">
|
150
|
-
<li><a href="#">
|
151
|
-
<li role="separator" class="divider"></li>
|
152
|
-
<li><a href="#">Separated link</a></li>
|
148
|
+
<li class="selected"><a href="#">Name</a></li>
|
149
|
+
<li><a href="#">Type</a></li>
|
150
|
+
<li><a href="#">Color</a></li>
|
153
151
|
</ul>
|
154
152
|
</div><!-- /btn-group -->
|
155
153
|
<input type="text" class="form-control" id="filter" placeholder="Filter By Name...">
|
@@ -159,11 +157,9 @@
|
|
159
157
|
<div class="dropdown btn-group">
|
160
158
|
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Name <span class="caret"></span></button>
|
161
159
|
<ul class="dropdown-menu">
|
162
|
-
<li><a href="#">
|
163
|
-
<li><a href="#">
|
164
|
-
<li><a href="#">
|
165
|
-
<li role="separator" class="divider"></li>
|
166
|
-
<li><a href="#">Separated link</a></li>
|
160
|
+
<li class="selected"><a href="#">Name</a></li>
|
161
|
+
<li><a href="#">Type</a></li>
|
162
|
+
<li><a href="#">Last Modified</a></li>
|
167
163
|
</ul>
|
168
164
|
</div>
|
169
165
|
<button class="btn btn-link" type="button">
|
@@ -245,21 +241,7 @@
|
|
245
241
|
</div><!-- /col -->
|
246
242
|
</div><!-- /row -->
|
247
243
|
</div><!-- /container -->
|
248
|
-
<script>
|
249
|
-
(function($) {
|
250
|
-
$(document).ready(function() {
|
251
|
-
// Upon clicking the find button, show the find dropdown content
|
252
|
-
$(".btn-find").click(function () {
|
253
|
-
$(".find-pf-dropdown-container").toggle();
|
254
|
-
});
|
255
|
-
// Upon clicking the find close button, hide the find dropdown content
|
256
|
-
$(".btn-find-close").click(function () {
|
257
|
-
$(".find-pf-dropdown-container").hide();
|
258
|
-
});
|
259
244
|
|
260
|
-
});
|
261
|
-
})(jQuery);
|
262
|
-
</script>
|
263
245
|
<div class="container-fluid">
|
264
246
|
<div class="list-group list-view-pf list-view-pf-view">
|
265
247
|
<div class="list-group-item">
|
@@ -1359,6 +1359,7 @@
|
|
1359
1359
|
Last 30 Days <span class="caret"></span>
|
1360
1360
|
</button>
|
1361
1361
|
<ul class="dropdown-menu dropdown-menu-right" role="menu">
|
1362
|
+
<li class="selected"><a href="#">Last 30 Days</a></li>
|
1362
1363
|
<li><a href="#">Last 60 Days</a></li>
|
1363
1364
|
<li><a href="#">Last 90 Days</a></li>
|
1364
1365
|
</ul>
|
@@ -1387,6 +1388,7 @@
|
|
1387
1388
|
Last 30 Days <span class="caret"></span>
|
1388
1389
|
</button>
|
1389
1390
|
<ul class="dropdown-menu dropdown-menu-right" role="menu">
|
1391
|
+
<li class="selected"><a href="#">Last 30 Days</a></li>
|
1390
1392
|
<li><a href="#">Last 60 Days</a></li>
|
1391
1393
|
<li><a href="#">Last 90 Days</a></li>
|
1392
1394
|
</ul>
|
@@ -1417,6 +1419,7 @@
|
|
1417
1419
|
Last 30 Days <span class="caret"></span>
|
1418
1420
|
</button>
|
1419
1421
|
<ul class="dropdown-menu dropdown-menu-right" role="menu">
|
1422
|
+
<li class="selected"><a href="#">Last 30 Days</a></li>
|
1420
1423
|
<li><a href="#">Last 60 Days</a></li>
|
1421
1424
|
<li><a href="#">Last 90 Days</a></li>
|
1422
1425
|
</ul>
|
@@ -1433,6 +1433,7 @@
|
|
1433
1433
|
Last 30 Days <span class="caret"></span>
|
1434
1434
|
</button>
|
1435
1435
|
<ul class="dropdown-menu dropdown-menu-right" role="menu">
|
1436
|
+
<li class="selected"><a href="#">Last 30 Days</a></li>
|
1436
1437
|
<li><a href="#">Last 60 Days</a></li>
|
1437
1438
|
<li><a href="#">Last 90 Days</a></li>
|
1438
1439
|
</ul>
|
@@ -1461,6 +1462,7 @@
|
|
1461
1462
|
Last 30 Days <span class="caret"></span>
|
1462
1463
|
</button>
|
1463
1464
|
<ul class="dropdown-menu dropdown-menu-right" role="menu">
|
1465
|
+
<li class="selected"><a href="#">Last 30 Days</a></li>
|
1464
1466
|
<li><a href="#">Last 60 Days</a></li>
|
1465
1467
|
<li><a href="#">Last 90 Days</a></li>
|
1466
1468
|
</ul>
|
@@ -1491,6 +1493,7 @@
|
|
1491
1493
|
Last 30 Days <span class="caret"></span>
|
1492
1494
|
</button>
|
1493
1495
|
<ul class="dropdown-menu dropdown-menu-right" role="menu">
|
1496
|
+
<li class="selected"><a href="#">Last 30 Days</a></li>
|
1494
1497
|
<li><a href="#">Last 60 Days</a></li>
|
1495
1498
|
<li><a href="#">Last 90 Days</a></li>
|
1496
1499
|
</ul>
|
data/spec/html/toolbar.html
CHANGED
@@ -146,11 +146,9 @@
|
|
146
146
|
<div class="input-group-btn">
|
147
147
|
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Name <span class="caret"></span></button>
|
148
148
|
<ul class="dropdown-menu">
|
149
|
-
<li><a href="#">
|
150
|
-
<li><a href="#">
|
151
|
-
<li><a href="#">
|
152
|
-
<li role="separator" class="divider"></li>
|
153
|
-
<li><a href="#">Separated link</a></li>
|
149
|
+
<li class="selected"><a href="#">Name</a></li>
|
150
|
+
<li><a href="#">Type</a></li>
|
151
|
+
<li><a href="#">Color</a></li>
|
154
152
|
</ul>
|
155
153
|
</div><!-- /btn-group -->
|
156
154
|
<input type="text" class="form-control" id="filter" placeholder="Filter By Name...">
|
@@ -160,11 +158,9 @@
|
|
160
158
|
<div class="dropdown btn-group">
|
161
159
|
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Name <span class="caret"></span></button>
|
162
160
|
<ul class="dropdown-menu">
|
163
|
-
<li><a href="#">
|
164
|
-
<li><a href="#">
|
165
|
-
<li><a href="#">
|
166
|
-
<li role="separator" class="divider"></li>
|
167
|
-
<li><a href="#">Separated link</a></li>
|
161
|
+
<li class="selected"><a href="#">Name</a></li>
|
162
|
+
<li><a href="#">Type</a></li>
|
163
|
+
<li><a href="#">Last Modified</a></li>
|
168
164
|
</ul>
|
169
165
|
</div>
|
170
166
|
<button class="btn btn-link" type="button">
|
@@ -246,12 +242,13 @@
|
|
246
242
|
</div><!-- /col -->
|
247
243
|
</div><!-- /row -->
|
248
244
|
</div><!-- /container -->
|
245
|
+
|
249
246
|
<script>
|
250
247
|
(function($) {
|
251
248
|
$(document).ready(function() {
|
252
249
|
// Upon clicking the find button, show the find dropdown content
|
253
250
|
$(".btn-find").click(function () {
|
254
|
-
$(".find-pf-dropdown-container").toggle();
|
251
|
+
$(this).parent().find(".find-pf-dropdown-container").toggle();
|
255
252
|
});
|
256
253
|
// Upon clicking the find close button, hide the find dropdown content
|
257
254
|
$(".btn-find-close").click(function () {
|
@@ -649,6 +649,7 @@
|
|
649
649
|
Last 30 Days <span class="caret"></span>
|
650
650
|
</button>
|
651
651
|
<ul class="dropdown-menu dropdown-menu-right" role="menu">
|
652
|
+
<li class="selected"><a href="#">Last 30 Days</a></li>
|
652
653
|
<li><a href="#">Last 60 Days</a></li>
|
653
654
|
<li><a href="#">Last 90 Days</a></li>
|
654
655
|
</ul>
|
@@ -677,6 +678,7 @@
|
|
677
678
|
Last 30 Days <span class="caret"></span>
|
678
679
|
</button>
|
679
680
|
<ul class="dropdown-menu dropdown-menu-right" role="menu">
|
681
|
+
<li class="selected"><a href="#">Last 30 Days</a></li>
|
680
682
|
<li><a href="#">Last 60 Days</a></li>
|
681
683
|
<li><a href="#">Last 90 Days</a></li>
|
682
684
|
</ul>
|
@@ -707,6 +709,7 @@
|
|
707
709
|
Last 30 Days <span class="caret"></span>
|
708
710
|
</button>
|
709
711
|
<ul class="dropdown-menu dropdown-menu-right" role="menu">
|
712
|
+
<li class="selected"><a href="#">Last 30 Days</a></li>
|
710
713
|
<li><a href="#">Last 60 Days</a></li>
|
711
714
|
<li><a href="#">Last 90 Days</a></li>
|
712
715
|
</ul>
|
@@ -987,6 +987,7 @@
|
|
987
987
|
Last 30 Days <span class="caret"></span>
|
988
988
|
</button>
|
989
989
|
<ul class="dropdown-menu dropdown-menu-right" role="menu">
|
990
|
+
<li class="selected"><a href="#">Last 30 Days</a></li>
|
990
991
|
<li><a href="#">Last 60 Days</a></li>
|
991
992
|
<li><a href="#">Last 90 Days</a></li>
|
992
993
|
</ul>
|
@@ -1015,6 +1016,7 @@
|
|
1015
1016
|
Last 30 Days <span class="caret"></span>
|
1016
1017
|
</button>
|
1017
1018
|
<ul class="dropdown-menu dropdown-menu-right" role="menu">
|
1019
|
+
<li class="selected"><a href="#">Last 30 Days</a></li>
|
1018
1020
|
<li><a href="#">Last 60 Days</a></li>
|
1019
1021
|
<li><a href="#">Last 90 Days</a></li>
|
1020
1022
|
</ul>
|
@@ -1045,6 +1047,7 @@
|
|
1045
1047
|
Last 30 Days <span class="caret"></span>
|
1046
1048
|
</button>
|
1047
1049
|
<ul class="dropdown-menu dropdown-menu-right" role="menu">
|
1050
|
+
<li class="selected"><a href="#">Last 30 Days</a></li>
|
1048
1051
|
<li><a href="#">Last 60 Days</a></li>
|
1049
1052
|
<li><a href="#">Last 90 Days</a></li>
|
1050
1053
|
</ul>
|
@@ -716,6 +716,7 @@
|
|
716
716
|
Last 30 Days <span class="caret"></span>
|
717
717
|
</button>
|
718
718
|
<ul class="dropdown-menu dropdown-menu-right" role="menu">
|
719
|
+
<li class="selected"><a href="#">Last 30 Days</a></li>
|
719
720
|
<li><a href="#">Last 60 Days</a></li>
|
720
721
|
<li><a href="#">Last 90 Days</a></li>
|
721
722
|
</ul>
|
@@ -744,6 +745,7 @@
|
|
744
745
|
Last 30 Days <span class="caret"></span>
|
745
746
|
</button>
|
746
747
|
<ul class="dropdown-menu dropdown-menu-right" role="menu">
|
748
|
+
<li class="selected"><a href="#">Last 30 Days</a></li>
|
747
749
|
<li><a href="#">Last 60 Days</a></li>
|
748
750
|
<li><a href="#">Last 90 Days</a></li>
|
749
751
|
</ul>
|
@@ -774,6 +776,7 @@
|
|
774
776
|
Last 30 Days <span class="caret"></span>
|
775
777
|
</button>
|
776
778
|
<ul class="dropdown-menu dropdown-menu-right" role="menu">
|
779
|
+
<li class="selected"><a href="#">Last 30 Days</a></li>
|
777
780
|
<li><a href="#">Last 60 Days</a></li>
|
778
781
|
<li><a href="#">Last 90 Days</a></li>
|
779
782
|
</ul>
|
@@ -890,6 +890,7 @@
|
|
890
890
|
Last 30 Days <span class="caret"></span>
|
891
891
|
</button>
|
892
892
|
<ul class="dropdown-menu dropdown-menu-right" role="menu">
|
893
|
+
<li class="selected"><a href="#">Last 30 Days</a></li>
|
893
894
|
<li><a href="#">Last 60 Days</a></li>
|
894
895
|
<li><a href="#">Last 90 Days</a></li>
|
895
896
|
</ul>
|
@@ -918,6 +919,7 @@
|
|
918
919
|
Last 30 Days <span class="caret"></span>
|
919
920
|
</button>
|
920
921
|
<ul class="dropdown-menu dropdown-menu-right" role="menu">
|
922
|
+
<li class="selected"><a href="#">Last 30 Days</a></li>
|
921
923
|
<li><a href="#">Last 60 Days</a></li>
|
922
924
|
<li><a href="#">Last 90 Days</a></li>
|
923
925
|
</ul>
|
@@ -948,6 +950,7 @@
|
|
948
950
|
Last 30 Days <span class="caret"></span>
|
949
951
|
</button>
|
950
952
|
<ul class="dropdown-menu dropdown-menu-right" role="menu">
|
953
|
+
<li class="selected"><a href="#">Last 30 Days</a></li>
|
951
954
|
<li><a href="#">Last 60 Days</a></li>
|
952
955
|
<li><a href="#">Last 90 Days</a></li>
|
953
956
|
</ul>
|
@@ -890,6 +890,7 @@
|
|
890
890
|
Last 30 Days <span class="caret"></span>
|
891
891
|
</button>
|
892
892
|
<ul class="dropdown-menu dropdown-menu-right" role="menu">
|
893
|
+
<li class="selected"><a href="#">Last 30 Days</a></li>
|
893
894
|
<li><a href="#">Last 60 Days</a></li>
|
894
895
|
<li><a href="#">Last 90 Days</a></li>
|
895
896
|
</ul>
|
@@ -918,6 +919,7 @@
|
|
918
919
|
Last 30 Days <span class="caret"></span>
|
919
920
|
</button>
|
920
921
|
<ul class="dropdown-menu dropdown-menu-right" role="menu">
|
922
|
+
<li class="selected"><a href="#">Last 30 Days</a></li>
|
921
923
|
<li><a href="#">Last 60 Days</a></li>
|
922
924
|
<li><a href="#">Last 90 Days</a></li>
|
923
925
|
</ul>
|
@@ -948,6 +950,7 @@
|
|
948
950
|
Last 30 Days <span class="caret"></span>
|
949
951
|
</button>
|
950
952
|
<ul class="dropdown-menu dropdown-menu-right" role="menu">
|
953
|
+
<li class="selected"><a href="#">Last 30 Days</a></li>
|
951
954
|
<li><a href="#">Last 60 Days</a></li>
|
952
955
|
<li><a href="#">Last 90 Days</a></li>
|
953
956
|
</ul>
|
data/spec/html/wizard.html
CHANGED
@@ -40,310 +40,272 @@
|
|
40
40
|
These examples are included for development testing purposes. For official documentation, see <a href="https://www.patternfly.org" class="alert-link">https://www.patternfly.org</a> and <a href="http://getbootstrap.com" class="alert-link">http://getbootstrap.com</a>.
|
41
41
|
</div>
|
42
42
|
<hr>
|
43
|
-
<h2>Initializing</h2>
|
44
|
-
<button class="btn btn-default" data-toggle="modal" data-target="#initializing">Launch wizard showing initialization
|
45
|
-
state
|
46
|
-
</button>
|
47
|
-
<div class="example-pf "><!-- for testing/dev; not for production -->
|
48
|
-
<div class="modal" id="initializing" tabindex="-1" role="dialog">
|
49
|
-
<div class="modal-dialog modal-lg wizard-pf">
|
50
|
-
<div class="modal-content">
|
51
|
-
<div class="modal-header">
|
52
|
-
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
53
|
-
<span aria-hidden="true">×</span>
|
54
|
-
</button>
|
55
|
-
<dt class="modal-title">Wizard Title</dt>
|
56
|
-
</div>
|
57
|
-
<div class="modal-body wizard-pf-body clearfix">
|
58
|
-
<div class="wizard-pf-steps hidden">
|
59
|
-
<ul class="wizard-pf-steps-indicator">
|
60
|
-
<li>
|
61
|
-
<a><span class="wizard-pf-step-number">1</span><span class="wizard-pf-step-title">First Step</span></a>
|
62
|
-
</li>
|
63
|
-
<li>
|
64
|
-
<a><span class="wizard-pf-step-number">2</span><span class="wizard-pf-step-title">Second Step</span></a>
|
65
|
-
</li>
|
66
|
-
<li>
|
67
|
-
<a><span class="wizard-pf-step-number">3</span><span class="wizard-pf-step-title">Review</span></a>
|
68
|
-
</li>
|
69
|
-
</ul>
|
70
|
-
</div>
|
71
|
-
|
72
|
-
<div class="wizard-pf-sidebar hidden">
|
73
|
-
<ul class="list-group">
|
74
|
-
<li class="list-group-item active">
|
75
|
-
<a>
|
76
|
-
<span class="wizard-pf-substep-number">1A.</span>
|
77
|
-
<span class="wizard-pf-substep-title">General</span>
|
78
|
-
</a>
|
79
|
-
</li>
|
80
|
-
<li class="list-group-item">
|
81
|
-
<a>
|
82
|
-
<span class="wizard-pf-substep-number">1B.</span>
|
83
|
-
<span class="wizard-pf-substep-title">Masters & Nodes</span>
|
84
|
-
</a>
|
85
|
-
</li>
|
86
|
-
<li class="list-group-item">
|
87
|
-
<a>
|
88
|
-
<span class="wizard-pf-substep-number">1C.</span>
|
89
|
-
<span class="wizard-pf-substep-title">CDN Channel</span>
|
90
|
-
</a>
|
91
|
-
</li>
|
92
|
-
</ul>
|
93
|
-
</div><!-- /.wizard-pf-sidebar -->
|
94
|
-
|
95
|
-
<div class="wizard-pf-main">
|
96
|
-
<div class="blank-slate-pf">
|
97
|
-
<div class="spinner spinner-lg blank-slate-pf-icon"></div>
|
98
|
-
<h3 class="blank-slate-pf-main-action">Loading Wizard</h3>
|
99
|
-
<p class="blank-slate-pf-secondary-action">Lorem ipsum dolor sit amet, porta at suspendisse ac, ut wisi
|
100
|
-
vivamus, lorem sociosqu eget nunc amet. </p>
|
101
|
-
</div>
|
102
|
-
|
103
|
-
</div>
|
104
|
-
|
105
|
-
</div><!-- /.wizard-pf-body -->
|
106
|
-
|
107
|
-
<!-- TODO: disable buttons -->
|
108
|
-
<div class="modal-footer wizard-pf-footer">
|
109
|
-
<button type="button" class="btn btn-default btn-cancel" data-dismiss="modal">Cancel</button>
|
110
|
-
<button type="button" class="btn btn-default disabled" data-dismiss="modal">
|
111
|
-
<span class="i fa fa-angle-left"></span>
|
112
|
-
Back
|
113
|
-
</button>
|
114
|
-
<button type="button" class="btn btn-primary disabled" data-dismiss="modal">
|
115
|
-
Next
|
116
|
-
<span class="i fa fa-angle-right"></span>
|
117
|
-
</button>
|
118
|
-
</div><!-- /.wizard-pf-footer -->
|
119
|
-
|
120
|
-
</div><!-- /.modal-content -->
|
121
|
-
</div><!-- /.modal-dialog -->
|
122
|
-
</div><!-- /.modal -->
|
123
|
-
</div><!-- /.example-pf (not for production) -->
|
124
43
|
|
125
|
-
<h2>
|
126
|
-
<button class="btn btn-default
|
44
|
+
<h2>Complete Wizard</h2>
|
45
|
+
<button class="btn btn-default wizard-pf-open" data-target="#complete">Launch wizard</button>
|
127
46
|
<div class="example-pf "><!-- for testing/dev; not for production -->
|
128
|
-
<div class="modal " id="
|
47
|
+
<div class="modal " id="complete" tabindex="-1" role="dialog">
|
129
48
|
<div class="modal-dialog modal-lg wizard-pf">
|
130
49
|
<div class="modal-content">
|
131
50
|
<div class="modal-header">
|
132
|
-
<button type="button" class="close
|
51
|
+
<button type="button" class="close wizard-pf-dismiss" aria-label="Close"><span
|
133
52
|
aria-hidden="true">×</span></button>
|
134
53
|
<dt class="modal-title">Wizard Title</dt>
|
135
54
|
</div>
|
136
55
|
<div class="modal-body wizard-pf-body clearfix">
|
137
|
-
<div class="wizard-pf-steps">
|
138
|
-
<ul class="wizard-pf-steps-indicator">
|
139
|
-
<li class="active">
|
140
|
-
<a><span class="wizard-pf-step-number">1</span><span class="wizard-pf-step-title">First Step</span></a>
|
141
|
-
</li>
|
142
|
-
<li>
|
143
|
-
<a><span class="wizard-pf-step-number">2</span><span class="wizard-pf-step-title">Second Step</span></a>
|
144
|
-
</li>
|
145
|
-
<li>
|
146
|
-
<a><span class="wizard-pf-step-number">3</span><span class="wizard-pf-step-title">Review</span></a>
|
147
|
-
</li>
|
148
|
-
</ul>
|
149
|
-
</div>
|
150
|
-
|
151
|
-
<div class="wizard-pf-sidebar">
|
152
|
-
<ul class="list-group">
|
153
|
-
<li class="list-group-item active clearfix">
|
154
|
-
<a>
|
155
|
-
<span class="wizard-pf-substep-number">1A.</span>
|
156
|
-
<span class="wizard-pf-substep-title">Details</span>
|
157
|
-
</a>
|
158
|
-
</li>
|
159
|
-
<li class="list-group-item">
|
160
|
-
<a>
|
161
|
-
<span class="wizard-pf-substep-number">1B.</span>
|
162
|
-
<span class="wizard-pf-substep-title">Settings</span>
|
163
|
-
</a>
|
164
|
-
</li>
|
165
|
-
</ul>
|
166
|
-
</div><!-- /.wizard-pf-sidebar -->
|
167
|
-
|
168
|
-
<div class="wizard-pf-main">
|
169
|
-
<div>
|
170
|
-
<form class="form-horizontal">
|
171
|
-
<div class="form-group required">
|
172
|
-
<label class="col-sm-2 control-label" for="textInput-markup">Name</label>
|
173
|
-
<div class="col-sm-10">
|
174
|
-
<input type="text" id="textInput-markup" class="form-control">
|
175
|
-
</div>
|
176
|
-
</div>
|
177
|
-
<div class="form-group">
|
178
|
-
<label class="col-sm-2 control-label" for="descriptionInput-markup">Description (Optional)</label>
|
179
|
-
<div class="col-sm-10">
|
180
|
-
<textarea id="descriptionInput-markup" class="form-control" rows="2"></textarea>
|
181
|
-
</div>
|
182
|
-
</div>
|
183
|
-
</form>
|
184
|
-
</div>
|
185
|
-
</div><!-- /.wizard-pf-main -->
|
186
|
-
|
187
|
-
</div><!-- /.wizard-pf-body -->
|
188
|
-
|
189
|
-
<div class="modal-footer wizard-pf-footer">
|
190
|
-
<button type="button" class="btn btn-default btn-cancel" data-dismiss="modal">Cancel</button>
|
191
|
-
<button type="button" class="btn btn-default disabled" data-dismiss="modal">
|
192
|
-
<span class="i fa fa-angle-left"></span>
|
193
|
-
Back
|
194
|
-
</button>
|
195
|
-
<button type="button" class="btn btn-primary " data-dismiss="modal">
|
196
|
-
Next
|
197
|
-
<span class="i fa fa-angle-right"></span>
|
198
|
-
</button>
|
199
|
-
|
200
|
-
</div><!-- /.wizard-pf-footer -->
|
201
|
-
|
202
|
-
</div><!-- /.modal-content -->
|
203
|
-
</div><!-- /.modal-dialog -->
|
204
|
-
</div><!-- /.modal -->
|
205
|
-
</div><!-- /.example-pf (not for production) -->
|
206
|
-
|
207
|
-
<h2>Review Step</h2>
|
208
|
-
<button class="btn btn-default" data-toggle="modal" data-target="#secondStep">Launch wizard showing review step</button>
|
209
|
-
<div class="example-pf "><!-- for testing/dev; not for production -->
|
210
|
-
<div class="modal " id="secondStep" tabindex="-1" role="dialog">
|
211
|
-
<div class="modal-dialog modal-lg wizard-pf">
|
212
|
-
<div class="modal-content">
|
213
|
-
<div class="modal-header">
|
214
|
-
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
|
215
|
-
aria-hidden="true">×</span></button>
|
216
|
-
<dt class="modal-title">Wizard Title</dt>
|
217
|
-
</div>
|
218
|
-
<div class="modal-body wizard-pf-body clearfix">
|
219
|
-
<div class="wizard-pf-steps">
|
56
|
+
<div class="wizard-pf-steps hidden">
|
220
57
|
<ul class="wizard-pf-steps-indicator">
|
221
|
-
<li class="
|
58
|
+
<li class="wizard-pf-step active" data-tabgroup="1">
|
222
59
|
<a><span class="wizard-pf-step-number">1</span><span class="wizard-pf-step-title">First Step</span></a>
|
223
60
|
</li>
|
224
|
-
<li class="
|
61
|
+
<li class="wizard-pf-step" data-tabgroup="2">
|
225
62
|
<a><span class="wizard-pf-step-number">2</span><span class="wizard-pf-step-title">Second Step</span></a>
|
226
63
|
</li>
|
227
|
-
<li class="
|
64
|
+
<li class="wizard-pf-step" data-tabgroup="3">
|
228
65
|
<a><span class="wizard-pf-step-number">3</span><span class="wizard-pf-step-title">Review</span></a>
|
229
66
|
</li>
|
230
67
|
</ul>
|
231
68
|
</div>
|
232
69
|
|
233
|
-
<div class="wizard-pf-
|
234
|
-
<
|
235
|
-
<li class="list-group-item active">
|
236
|
-
<a>
|
237
|
-
<span class="wizard-pf-substep-number">3A.</span>
|
238
|
-
<span class="wizard-pf-substep-title">Summary</span>
|
239
|
-
</a>
|
240
|
-
</li>
|
241
|
-
<li class="list-group-item">
|
242
|
-
<a>
|
243
|
-
<span class="wizard-pf-substep-number">3B.</span>
|
244
|
-
<span class="wizard-pf-substep-title">Progress</span>
|
245
|
-
</a>
|
246
|
-
</li>
|
247
|
-
</ul>
|
248
|
-
</div><!-- /.wizard-pf-sidebar -->
|
249
|
-
|
250
|
-
<div class="wizard-pf-main">
|
251
|
-
<div class="wizard-pf-review-steps">
|
70
|
+
<div class="wizard-pf-row">
|
71
|
+
<div class="wizard-pf-sidebar hidden">
|
252
72
|
<ul class="list-group">
|
73
|
+
<li class="list-group-item active">
|
74
|
+
<a href="#">
|
75
|
+
<span class="wizard-pf-substep-number">1A.</span>
|
76
|
+
<span class="wizard-pf-substep-title">Details</span>
|
77
|
+
</a>
|
78
|
+
</li>
|
253
79
|
<li class="list-group-item">
|
254
|
-
<a
|
255
|
-
|
256
|
-
<
|
257
|
-
|
258
|
-
|
259
|
-
|
260
|
-
|
261
|
-
|
262
|
-
|
263
|
-
|
264
|
-
|
265
|
-
|
266
|
-
|
267
|
-
|
268
|
-
|
269
|
-
|
270
|
-
|
271
|
-
|
272
|
-
|
273
|
-
|
274
|
-
|
275
|
-
|
276
|
-
|
277
|
-
|
278
|
-
|
279
|
-
|
280
|
-
<div id="reviewStep1Substep2" class="wizard-pf-review-content">
|
281
|
-
<form class="form">
|
282
|
-
<div class="wizard-pf-review-item">
|
283
|
-
<div class="wizard-pf-review-item-field">Setting A</div>
|
284
|
-
<div class="wizard-pf-review-item-field">Setting B</div>
|
285
|
-
</div>
|
286
|
-
</form>
|
287
|
-
</div>
|
288
|
-
</li>
|
289
|
-
</ul>
|
290
|
-
</div>
|
80
|
+
<a href="#">
|
81
|
+
<span class="wizard-pf-substep-number">1B.</span>
|
82
|
+
<span class="wizard-pf-substep-title">Settings</span>
|
83
|
+
</a>
|
84
|
+
</li>
|
85
|
+
</ul>
|
86
|
+
<ul class="list-group hidden">
|
87
|
+
<li class="list-group-item">
|
88
|
+
<a href="#">
|
89
|
+
<span class="wizard-pf-substep-number">2A.</span>
|
90
|
+
<span class="wizard-pf-substep-title">Details</span>
|
91
|
+
</a>
|
92
|
+
</li>
|
93
|
+
<li class="list-group-item">
|
94
|
+
<a href="#">
|
95
|
+
<span class="wizard-pf-substep-number">2B.</span>
|
96
|
+
<span class="wizard-pf-substep-title">Settings</span>
|
97
|
+
</a>
|
98
|
+
</li>
|
99
|
+
</ul>
|
100
|
+
<ul class="list-group hidden">
|
101
|
+
<li class="list-group-item">
|
102
|
+
<a>
|
103
|
+
<span class="wizard-pf-substep-number">3A.</span>
|
104
|
+
<span class="wizard-pf-substep-title">Summary</span>
|
105
|
+
</a>
|
291
106
|
</li>
|
292
107
|
<li class="list-group-item">
|
293
|
-
<a
|
294
|
-
|
295
|
-
<
|
296
|
-
|
297
|
-
|
298
|
-
|
299
|
-
|
300
|
-
|
301
|
-
|
302
|
-
|
303
|
-
|
304
|
-
|
305
|
-
|
108
|
+
<a>
|
109
|
+
<span class="wizard-pf-substep-number">3B.</span>
|
110
|
+
<span class="wizard-pf-substep-title">Progress</span>
|
111
|
+
</a>
|
112
|
+
</li>
|
113
|
+
</ul>
|
114
|
+
</div> <!-- /.wizard-pf-sidebar -->
|
115
|
+
<div class="wizard-pf-main">
|
116
|
+
<div class="wizard-pf-loading blank-slate-pf">
|
117
|
+
<div class="spinner spinner-lg blank-slate-pf-icon"></div>
|
118
|
+
<h3 class="blank-slate-pf-main-action">Loading Wizard</h3>
|
119
|
+
<p class="blank-slate-pf-secondary-action">Lorem ipsum dolor sit amet, porta at suspendisse ac, ut wisi
|
120
|
+
vivamus, lorem sociosqu eget nunc amet. </p>
|
121
|
+
</div>
|
122
|
+
<div class="wizard-pf-contents hidden">
|
123
|
+
<form class="form-horizontal">
|
124
|
+
<!-- replacing id with data-id to pass build errors -->
|
125
|
+
<div class="form-group required">
|
126
|
+
<label class="col-sm-2 control-label" for="textInput-markup">Name</label>
|
127
|
+
<div class="col-sm-10">
|
128
|
+
<input type="text" data-id="textInput-markup" class="form-control">
|
129
|
+
</div>
|
130
|
+
</div>
|
131
|
+
<div class="form-group">
|
132
|
+
<label class="col-sm-2 control-label" for="descriptionInput-markup">Description (Optional)</label>
|
133
|
+
<div class="col-sm-10">
|
134
|
+
<textarea data-id="descriptionInput-markup" class="form-control" rows="2"></textarea>
|
135
|
+
</div>
|
136
|
+
</div>
|
137
|
+
</form>
|
138
|
+
</div>
|
139
|
+
<div class="wizard-pf-contents hidden">
|
140
|
+
<form class="form-horizontal">
|
141
|
+
<div class="form-group required">
|
142
|
+
<label class="col-sm-2 control-label" for="lorem">Lorem ipsum</label>
|
143
|
+
<div class="col-sm-10">
|
144
|
+
<input type="text" id="lorem" class="form-control">
|
145
|
+
</div>
|
146
|
+
</div>
|
147
|
+
<div class="form-group">
|
148
|
+
<label class="col-sm-2 control-label" for="dolor">Dolor (Optional)</label>
|
149
|
+
<div class="col-sm-10">
|
150
|
+
<textarea id="dolor" class="form-control" rows="2"></textarea>
|
151
|
+
</div>
|
152
|
+
</div>
|
153
|
+
</form>
|
154
|
+
</div>
|
155
|
+
<div class="wizard-pf-contents hidden">
|
156
|
+
<form class="form-horizontal">
|
157
|
+
<div class="form-group required">
|
158
|
+
<label class="col-sm-2 control-label" for="aliquam">Aliquam</label>
|
159
|
+
<div class="col-sm-10">
|
160
|
+
<input type="text" id="aliquam" class="form-control">
|
161
|
+
</div>
|
162
|
+
</div>
|
163
|
+
<div class="form-group">
|
164
|
+
<label class="col-sm-2 control-label" for="fermentum">Fermentum</label>
|
165
|
+
<div class="col-sm-10">
|
166
|
+
<textarea id="fermentum" class="form-control" rows="2"></textarea>
|
167
|
+
</div>
|
168
|
+
</div>
|
169
|
+
</form>
|
170
|
+
</div>
|
171
|
+
<div class="wizard-pf-contents hidden">
|
172
|
+
<form class="form-horizontal">
|
173
|
+
<div class="form-group required">
|
174
|
+
<label class="col-sm-2 control-label" for="consectetur">Consectetur</label>
|
175
|
+
<div class="col-sm-10">
|
176
|
+
<input type="text" id="consectetur" class="form-control">
|
177
|
+
</div>
|
178
|
+
</div>
|
179
|
+
<div class="form-group">
|
180
|
+
<label class="col-sm-2 control-label" for="adipiscing">Adipiscing</label>
|
181
|
+
<div class="col-sm-10">
|
182
|
+
<textarea id="adipiscing" class="form-control" rows="2"></textarea>
|
183
|
+
</div>
|
184
|
+
</div>
|
185
|
+
</form>
|
186
|
+
</div>
|
187
|
+
<div class="wizard-pf-contents hidden">
|
188
|
+
<div class="wizard-pf-review-steps">
|
189
|
+
<ul class="list-group">
|
190
|
+
<li class="list-group-item">
|
191
|
+
<a onclick="$(this).toggleClass('collapsed'); $('#reviewStep1').toggleClass('collapse');">First Step</a>
|
192
|
+
<div id="reviewStep1" class="wizard-pf-review-substeps">
|
193
|
+
<ul class="list-group">
|
194
|
+
<li class="list-group-item">
|
195
|
+
<a onclick="$(this).toggleClass('collapsed'); $('#reviewStep1Substep1').toggleClass('collapse');">
|
196
|
+
<span class="wizard-pf-substep-number">1A.</span>
|
197
|
+
<span class="wizard-pf-substep-title">Details</span>
|
198
|
+
</a>
|
199
|
+
<div id="reviewStep1Substep1" class="wizard-pf-review-content">
|
200
|
+
<form class="form">
|
201
|
+
<div class="wizard-pf-review-item">
|
202
|
+
<span class="wizard-pf-review-item-label">Name:</span>
|
203
|
+
<span class="wizard-pf-review-item-value">First Last</span>
|
204
|
+
</div>
|
205
|
+
<div class="wizard-pf-review-item">
|
206
|
+
<span class="wizard-pf-review-item-label">Description:</span>
|
207
|
+
<span class="wizard-pf-review-item-value">This is the description</span>
|
208
|
+
</div>
|
209
|
+
</form>
|
306
210
|
</div>
|
307
|
-
|
308
|
-
|
309
|
-
|
211
|
+
</li>
|
212
|
+
<li class="list-group-item">
|
213
|
+
<a onclick="$(this).toggleClass('collapsed'); $('#reviewStep1Substep2').toggleClass('collapse');">
|
214
|
+
<span class="wizard-pf-substep-number">1B.</span>
|
215
|
+
<span class="wizard-pf-substep-title">Settings</span>
|
216
|
+
</a>
|
217
|
+
<div id="reviewStep1Substep2" class="wizard-pf-review-content">
|
218
|
+
<form class="form">
|
219
|
+
<div class="wizard-pf-review-item">
|
220
|
+
<div class="wizard-pf-review-item-field">Setting A</div>
|
221
|
+
<div class="wizard-pf-review-item-field">Setting B</div>
|
222
|
+
</div>
|
223
|
+
</form>
|
310
224
|
</div>
|
311
|
-
</
|
312
|
-
</
|
313
|
-
</
|
314
|
-
|
315
|
-
|
316
|
-
|
317
|
-
|
318
|
-
|
319
|
-
|
320
|
-
|
321
|
-
|
322
|
-
<
|
323
|
-
|
225
|
+
</li>
|
226
|
+
</ul>
|
227
|
+
</div>
|
228
|
+
</li>
|
229
|
+
<li class="list-group-item">
|
230
|
+
<a onclick="$(this).toggleClass('collapsed'); $('#reviewStep2').toggleClass('collapse');">Second Step</a>
|
231
|
+
<div id="reviewStep2" class="wizard-pf-review-substeps">
|
232
|
+
<ul class="list-group">
|
233
|
+
<li class="list-group-item">
|
234
|
+
<a onclick="$(this).toggleClass('collapsed'); $('#reviewStep2Substep1').toggleClass('collapse');">
|
235
|
+
<span class="wizard-pf-substep-number">2A.</span>
|
236
|
+
<span class="wizard-pf-substep-title">Details</span>
|
237
|
+
</a>
|
238
|
+
<div id="reviewStep2Substep1" class="wizard-pf-review-content">
|
239
|
+
<form class="form">
|
240
|
+
<div class="wizard-pf-review-item">
|
241
|
+
<span class="wizard-pf-review-item-label">Name:</span>
|
242
|
+
<span class="wizard-pf-review-item-value">First Last</span>
|
243
|
+
</div>
|
244
|
+
<div class="wizard-pf-review-item">
|
245
|
+
<span class="wizard-pf-review-item-label">Description:</span>
|
246
|
+
<span class="wizard-pf-review-item-value">This is the description</span>
|
247
|
+
</div>
|
248
|
+
</form>
|
324
249
|
</div>
|
325
|
-
</
|
326
|
-
|
327
|
-
|
328
|
-
|
329
|
-
|
330
|
-
|
331
|
-
|
332
|
-
|
333
|
-
|
250
|
+
</li>
|
251
|
+
<li class="list-group-item">
|
252
|
+
<a onclick="$(this).toggleClass('collapsed'); $('#reviewStep2Substep2').toggleClass('collapse');">
|
253
|
+
<span class="wizard-pf-substep-number">2B.</span>
|
254
|
+
<span class="wizard-pf-substep-title">Settings</span>
|
255
|
+
</a>
|
256
|
+
<div id="reviewStep2Substep2" class="wizard-pf-review-content">
|
257
|
+
<form class="form">
|
258
|
+
<div class="wizard-pf-review-item">
|
259
|
+
<div class="wizard-pf-review-item-field">Setting A</div>
|
260
|
+
<div class="wizard-pf-review-item-field">Setting B</div>
|
261
|
+
</div>
|
262
|
+
</form>
|
263
|
+
</div>
|
264
|
+
</li>
|
265
|
+
</ul>
|
266
|
+
</div>
|
267
|
+
</li>
|
268
|
+
</ul>
|
269
|
+
</div>
|
270
|
+
</div>
|
271
|
+
<div class="wizard-pf-contents hidden">
|
272
|
+
<div class="wizard-pf-process blank-slate-pf">
|
273
|
+
<div class="spinner spinner-lg blank-slate-pf-icon"></div>
|
274
|
+
<h3 class="blank-slate-pf-main-action">Deployment in progress</h3>
|
275
|
+
<p class="blank-slate-pf-secondary-action">Lorem ipsum dolor sit amet, porta at suspendisse ac, ut wisi
|
276
|
+
vivamus, lorem sociosqu eget nunc amet. </p>
|
277
|
+
</div>
|
278
|
+
<div class="wizard-pf-complete blank-slate-pf hidden">
|
279
|
+
<div class="wizard-pf-success-icon"><span class="glyphicon glyphicon-ok-circle"></span></div>
|
280
|
+
<h3 class="blank-slate-pf-main-action">Deployment was successful</h3>
|
281
|
+
<p class="blank-slate-pf-secondary-action">Lorem ipsum dolor sit amet, porta at suspendisse ac, ut wisi
|
282
|
+
vivamus, lorem sociosqu eget nunc amet. </p>
|
283
|
+
<button type="button" class="btn btn-lg btn-primary">
|
284
|
+
View Deployment
|
285
|
+
</button>
|
286
|
+
|
287
|
+
</div>
|
288
|
+
</div>
|
289
|
+
</div><!-- /.wizard-pf-main -->
|
290
|
+
</div>
|
334
291
|
|
335
292
|
</div><!-- /.wizard-pf-body -->
|
336
293
|
|
337
294
|
<div class="modal-footer wizard-pf-footer">
|
338
|
-
<button type="button" class="btn btn-default btn-cancel
|
339
|
-
<button type="button" class="btn btn-default
|
295
|
+
<button type="button" class="btn btn-default btn-cancel wizard-pf-cancel wizard-pf-dismiss">Cancel</button>
|
296
|
+
<button type="button" class="btn btn-default wizard-pf-back disabled">
|
340
297
|
<span class="i fa fa-angle-left"></span>
|
341
298
|
Back
|
342
299
|
</button>
|
343
|
-
<button type="button" class="btn btn-primary
|
300
|
+
<button type="button" class="btn btn-primary wizard-pf-next disabled">
|
344
301
|
Next
|
345
302
|
<span class="i fa fa-angle-right"></span>
|
346
303
|
</button>
|
304
|
+
<button type="button" class="btn btn-primary hidden wizard-pf-finish">
|
305
|
+
Deploy
|
306
|
+
<span class="i fa fa-angle-right"></span>
|
307
|
+
</button>
|
308
|
+
<button type="button" class="btn btn-primary hidden wizard-pf-close wizard-pf-dismiss">Close</button>
|
347
309
|
|
348
310
|
</div><!-- /.wizard-pf-footer -->
|
349
311
|
|
@@ -352,12 +314,12 @@
|
|
352
314
|
</div><!-- /.modal -->
|
353
315
|
</div><!-- /.example-pf (not for production) -->
|
354
316
|
|
355
|
-
<h2>
|
356
|
-
<button class="btn btn-default" data-toggle="modal" data-target="#
|
317
|
+
<h2>Initializing</h2>
|
318
|
+
<button class="btn btn-default" data-toggle="modal" data-target="#initializing">Launch wizard showing initialization
|
357
319
|
state
|
358
320
|
</button>
|
359
321
|
<div class="example-pf "><!-- for testing/dev; not for production -->
|
360
|
-
<div class="modal" id="
|
322
|
+
<div class="modal" id="initializing" tabindex="-1" role="dialog">
|
361
323
|
<div class="modal-dialog modal-lg wizard-pf">
|
362
324
|
<div class="modal-content">
|
363
325
|
<div class="modal-header">
|
@@ -367,41 +329,47 @@
|
|
367
329
|
<dt class="modal-title">Wizard Title</dt>
|
368
330
|
</div>
|
369
331
|
<div class="modal-body wizard-pf-body clearfix">
|
370
|
-
<div class="wizard-pf-steps">
|
332
|
+
<div class="wizard-pf-steps hidden">
|
371
333
|
<ul class="wizard-pf-steps-indicator">
|
372
|
-
<li
|
334
|
+
<li>
|
373
335
|
<a><span class="wizard-pf-step-number">1</span><span class="wizard-pf-step-title">First Step</span></a>
|
374
336
|
</li>
|
375
|
-
<li
|
337
|
+
<li>
|
376
338
|
<a><span class="wizard-pf-step-number">2</span><span class="wizard-pf-step-title">Second Step</span></a>
|
377
339
|
</li>
|
378
|
-
<li
|
340
|
+
<li>
|
379
341
|
<a><span class="wizard-pf-step-number">3</span><span class="wizard-pf-step-title">Review</span></a>
|
380
342
|
</li>
|
381
343
|
</ul>
|
382
344
|
</div>
|
383
345
|
|
384
|
-
<div class="wizard-pf-sidebar">
|
346
|
+
<div class="wizard-pf-sidebar hidden">
|
385
347
|
<ul class="list-group">
|
348
|
+
<li class="list-group-item active">
|
349
|
+
<a>
|
350
|
+
<span class="wizard-pf-substep-number">1A.</span>
|
351
|
+
<span class="wizard-pf-substep-title">General</span>
|
352
|
+
</a>
|
353
|
+
</li>
|
386
354
|
<li class="list-group-item">
|
387
355
|
<a>
|
388
|
-
<span class="wizard-pf-substep-number">
|
389
|
-
<span class="wizard-pf-substep-title">
|
356
|
+
<span class="wizard-pf-substep-number">1B.</span>
|
357
|
+
<span class="wizard-pf-substep-title">Masters & Nodes</span>
|
390
358
|
</a>
|
391
359
|
</li>
|
392
|
-
<li class="list-group-item
|
360
|
+
<li class="list-group-item">
|
393
361
|
<a>
|
394
|
-
<span class="wizard-pf-substep-number">
|
395
|
-
<span class="wizard-pf-substep-title">
|
362
|
+
<span class="wizard-pf-substep-number">1C.</span>
|
363
|
+
<span class="wizard-pf-substep-title">CDN Channel</span>
|
396
364
|
</a>
|
397
365
|
</li>
|
398
366
|
</ul>
|
399
367
|
</div><!-- /.wizard-pf-sidebar -->
|
400
368
|
|
401
|
-
<div class="wizard-pf-main">
|
369
|
+
<div class="wizard-pf-main" style="margin-left: 0px">
|
402
370
|
<div class="blank-slate-pf">
|
403
371
|
<div class="spinner spinner-lg blank-slate-pf-icon"></div>
|
404
|
-
<h3 class="blank-slate-pf-main-action">
|
372
|
+
<h3 class="blank-slate-pf-main-action">Loading Wizard</h3>
|
405
373
|
<p class="blank-slate-pf-secondary-action">Lorem ipsum dolor sit amet, porta at suspendisse ac, ut wisi
|
406
374
|
vivamus, lorem sociosqu eget nunc amet. </p>
|
407
375
|
</div>
|
@@ -418,7 +386,7 @@
|
|
418
386
|
Back
|
419
387
|
</button>
|
420
388
|
<button type="button" class="btn btn-primary disabled" data-dismiss="modal">
|
421
|
-
|
389
|
+
Next
|
422
390
|
<span class="i fa fa-angle-right"></span>
|
423
391
|
</button>
|
424
392
|
</div><!-- /.wizard-pf-footer -->
|
@@ -428,12 +396,12 @@
|
|
428
396
|
</div><!-- /.modal -->
|
429
397
|
</div><!-- /.example-pf (not for production) -->
|
430
398
|
|
431
|
-
<h2>
|
432
|
-
<button class="btn btn-default" data-toggle="modal" data-target="#
|
399
|
+
<h2>Last Step</h2>
|
400
|
+
<button class="btn btn-default" data-toggle="modal" data-target="#done">Launch wizard showing finalizing
|
433
401
|
state
|
434
402
|
</button>
|
435
403
|
<div class="example-pf "><!-- for testing/dev; not for production -->
|
436
|
-
<div class="modal" id="
|
404
|
+
<div class="modal" id="done" tabindex="-1" role="dialog">
|
437
405
|
<div class="modal-dialog modal-lg wizard-pf">
|
438
406
|
<div class="modal-content">
|
439
407
|
<div class="modal-header">
|
@@ -456,48 +424,46 @@
|
|
456
424
|
</li>
|
457
425
|
</ul>
|
458
426
|
</div>
|
427
|
+
<div class="wizard-pf-row">
|
428
|
+
<div class="wizard-pf-sidebar">
|
429
|
+
<ul class="list-group">
|
430
|
+
<li class="list-group-item">
|
431
|
+
<a>
|
432
|
+
<span class="wizard-pf-substep-number">3A.</span>
|
433
|
+
<span class="wizard-pf-substep-title">Summary</span>
|
434
|
+
</a>
|
435
|
+
</li>
|
436
|
+
<li class="list-group-item active">
|
437
|
+
<a>
|
438
|
+
<span class="wizard-pf-substep-number">3B.</span>
|
439
|
+
<span class="wizard-pf-substep-title">Progress</span>
|
440
|
+
</a>
|
441
|
+
</li>
|
442
|
+
</ul>
|
443
|
+
</div><!-- /.wizard-pf-sidebar -->
|
459
444
|
|
460
|
-
|
461
|
-
|
462
|
-
|
463
|
-
<
|
464
|
-
|
465
|
-
|
466
|
-
|
467
|
-
</li>
|
468
|
-
<li class="list-group-item active">
|
469
|
-
<a>
|
470
|
-
<span class="wizard-pf-substep-number">3B.</span>
|
471
|
-
<span class="wizard-pf-substep-title">Progress</span>
|
472
|
-
</a>
|
473
|
-
</li>
|
474
|
-
</ul>
|
475
|
-
</div><!-- /.wizard-pf-sidebar -->
|
476
|
-
|
477
|
-
<div class="wizard-pf-main">
|
478
|
-
<div class="blank-slate-pf">
|
479
|
-
<div class="wizard-pf-success-icon"><span class="glyphicon glyphicon-ok-circle"></span></div>
|
480
|
-
<h3 class="blank-slate-pf-main-action">Deployment was successful</h3>
|
481
|
-
<p class="blank-slate-pf-secondary-action">Lorem ipsum dolor sit amet, porta at suspendisse ac, ut wisi
|
482
|
-
vivamus, lorem sociosqu eget nunc amet. </p>
|
483
|
-
<button type="button" class="btn btn-lg btn-primary">
|
484
|
-
View Deployment
|
485
|
-
</button>
|
445
|
+
<div class="wizard-pf-main">
|
446
|
+
<div class="blank-slate-pf">
|
447
|
+
<div class="spinner spinner-lg blank-slate-pf-icon"></div>
|
448
|
+
<h3 class="blank-slate-pf-main-action">Deployment in progress</h3>
|
449
|
+
<p class="blank-slate-pf-secondary-action">Lorem ipsum dolor sit amet, porta at suspendisse ac, ut wisi
|
450
|
+
vivamus, lorem sociosqu eget nunc amet. </p>
|
451
|
+
</div>
|
486
452
|
|
487
453
|
</div>
|
488
|
-
|
489
454
|
</div>
|
490
|
-
|
491
455
|
</div><!-- /.wizard-pf-body -->
|
492
456
|
|
493
457
|
<!-- TODO: disable buttons -->
|
494
458
|
<div class="modal-footer wizard-pf-footer">
|
495
|
-
<button type="button" class="btn btn-default" data-dismiss="modal">
|
459
|
+
<button type="button" class="btn btn-default btn-cancel" data-dismiss="modal">Cancel</button>
|
460
|
+
<button type="button" class="btn btn-default disabled" data-dismiss="modal">
|
496
461
|
<span class="i fa fa-angle-left"></span>
|
497
462
|
Back
|
498
463
|
</button>
|
499
|
-
<button type="button" class="btn btn-primary" data-dismiss="modal">
|
500
|
-
|
464
|
+
<button type="button" class="btn btn-primary disabled" data-dismiss="modal">
|
465
|
+
Deploy
|
466
|
+
<span class="i fa fa-angle-right"></span>
|
501
467
|
</button>
|
502
468
|
</div><!-- /.wizard-pf-footer -->
|
503
469
|
|
@@ -507,6 +473,296 @@
|
|
507
473
|
</div><!-- /.example-pf (not for production) -->
|
508
474
|
|
509
475
|
|
476
|
+
<script>
|
477
|
+
|
478
|
+
$(document).ready(function() {
|
479
|
+
//initialize wizards
|
480
|
+
var completeWizard = new wizard(".btn[data-target='#complete']");
|
481
|
+
// the other wizard examples are not listed here -- they are only
|
482
|
+
// included to show examples of the loading and process screens
|
483
|
+
|
484
|
+
});
|
485
|
+
|
486
|
+
var wizard = function(id) {
|
487
|
+
var self = this, modal, tabs, tabCount, tabLast, currentGroup, currentTab, contents;
|
488
|
+
self.id = id;
|
489
|
+
|
490
|
+
$(self.id).click(function() {
|
491
|
+
self.init(this)
|
492
|
+
});
|
493
|
+
|
494
|
+
this.init = function(button){
|
495
|
+
// get id of open modal
|
496
|
+
self.modal = $(button).data("target");
|
497
|
+
|
498
|
+
// open modal
|
499
|
+
$(self.modal).modal('show');
|
500
|
+
// adjust height of contents row (while steps and sidebar are hidden and loading message displays)
|
501
|
+
self.updateWizardLayout();
|
502
|
+
|
503
|
+
// assign data attribute to all tabs
|
504
|
+
$(self.modal + " .wizard-pf-sidebar .list-group-item").each(function() {
|
505
|
+
// set the first digit (i.e. n.0) equal to the index of the parent tab group
|
506
|
+
// set the second digit (i.e. 0.n) equal to the index of the tab within the tab group
|
507
|
+
$(this).attr("data-tab", ($(this).parent().index() +1 + ($(this).index()/10 + .1)));
|
508
|
+
});
|
509
|
+
// assign data attribute to all tabgroups
|
510
|
+
$(self.modal + " .wizard-pf-sidebar .list-group").each(function() {
|
511
|
+
// set the value equal to the index of the tab group
|
512
|
+
$(this).attr("data-tabgroup", ($(this).index() +1));
|
513
|
+
});
|
514
|
+
|
515
|
+
// create array of all tabs, using the data attribute, and determine the last tab
|
516
|
+
self.tabs = $(self.modal + " .wizard-pf-sidebar .list-group-item" ).map(function()
|
517
|
+
{
|
518
|
+
return $(this).data("tab");
|
519
|
+
}
|
520
|
+
);
|
521
|
+
self.tabCount = self.tabs.length;
|
522
|
+
self.tabSummary = self.tabs[self.tabCount - 2]; // second to last tab displays summary
|
523
|
+
self.tabLast = self.tabs[self.tabCount - 1]; // last tab displays progress
|
524
|
+
// set first tab group and tab as current tab
|
525
|
+
// if someone wants to target a specific tab, that could be handled here
|
526
|
+
self.currentGroup = 1;
|
527
|
+
self.currentTab = 1.1;
|
528
|
+
self.updateTabGroup();
|
529
|
+
// hide loading message
|
530
|
+
$(self.modal + " .wizard-pf-loading").addClass("hidden");
|
531
|
+
// show tabs and tab groups
|
532
|
+
$(self.modal + " .wizard-pf-steps").removeClass("hidden");
|
533
|
+
$(self.modal + " .wizard-pf-sidebar").removeClass("hidden");
|
534
|
+
// remove active class from all tabs
|
535
|
+
$(self.modal + " .wizard-pf-sidebar .list-group-item.active").removeClass("active");
|
536
|
+
// apply active class to new current tab and associated contents
|
537
|
+
self.updateActiveTab();
|
538
|
+
// adjust height of contents row (while steps and sidebar and tab contents are visible)
|
539
|
+
self.updateWizardLayout();
|
540
|
+
self.updateWizardFooterDisplay();
|
541
|
+
|
542
|
+
//initialize click listeners
|
543
|
+
self.tabGroupSelect();
|
544
|
+
self.tabSelect();
|
545
|
+
self.backBtnClicked();
|
546
|
+
self.nextBtnClicked();
|
547
|
+
self.finishBtnClick();
|
548
|
+
self.cancelBtnClick();
|
549
|
+
|
550
|
+
$( window ).resize(function() {
|
551
|
+
self.updateWizardLayout();
|
552
|
+
});
|
553
|
+
};
|
554
|
+
|
555
|
+
// update which tab group is active
|
556
|
+
this.updateTabGroup = function() {
|
557
|
+
$(self.modal + " .wizard-pf-step.active").removeClass("active");
|
558
|
+
$(self.modal + " .wizard-pf-step[data-tabgroup='" + self.currentGroup + "']").addClass("active");
|
559
|
+
$(self.modal + " .wizard-pf-sidebar .list-group").addClass("hidden");
|
560
|
+
$(self.modal + " .list-group[data-tabgroup='" + self.currentGroup + "']").removeClass("hidden");
|
561
|
+
};
|
562
|
+
|
563
|
+
// update which tab is active
|
564
|
+
this.updateActiveTab = function() {
|
565
|
+
$(self.modal + " .list-group-item[data-tab='" + self.currentTab + "']").addClass("active");
|
566
|
+
self.updateVisibleContents();
|
567
|
+
};
|
568
|
+
|
569
|
+
// update which contents are visible
|
570
|
+
this.updateVisibleContents = function() {
|
571
|
+
var tabIndex = ($.inArray(self.currentTab, self.tabs));
|
572
|
+
// displaying contents associated with currentTab
|
573
|
+
$(self.modal + " .wizard-pf-contents").addClass("hidden");
|
574
|
+
$(self.modal + " .wizard-pf-contents:eq(" + tabIndex + ")").removeClass("hidden");
|
575
|
+
// setting focus to first form field in active contents
|
576
|
+
setTimeout (function() {
|
577
|
+
$(".wizard-pf-contents:not(.hidden) form input, .wizard-pf-contents:not(.hidden) form textarea, .wizard-pf-contents:not(.hidden) form select").first().focus(); // this does not account for disabled or read-only inputs
|
578
|
+
}, 100);
|
579
|
+
};
|
580
|
+
|
581
|
+
// update display state of Back button
|
582
|
+
this.updateBackBtnDisplay = function() {
|
583
|
+
if (self.currentTab == self.tabs[0]) {
|
584
|
+
$(self.modal + " .wizard-pf-back").addClass("disabled");
|
585
|
+
}
|
586
|
+
};
|
587
|
+
|
588
|
+
// update display state of next/finish button
|
589
|
+
this.updateNextBtnDisplay = function() {
|
590
|
+
if (self.currentTab == self.tabSummary) {
|
591
|
+
$(self.modal + " .wizard-pf-next").addClass("hidden");
|
592
|
+
$(self.modal + " .wizard-pf-finish").removeClass("hidden");
|
593
|
+
} else {
|
594
|
+
$(self.modal + " .wizard-pf-finish").addClass("hidden");
|
595
|
+
$(self.modal + " .wizard-pf-next").removeClass("hidden");
|
596
|
+
}
|
597
|
+
};
|
598
|
+
|
599
|
+
// update display state of buttons in the footer
|
600
|
+
this.updateWizardFooterDisplay = function() {
|
601
|
+
$(self.modal + " .wizard-pf-footer .disabled").removeClass("disabled")
|
602
|
+
self.updateBackBtnDisplay();
|
603
|
+
self.updateNextBtnDisplay();
|
604
|
+
};
|
605
|
+
|
606
|
+
// adjust layout of panels in wizard
|
607
|
+
this.updateWizardLayout = function() {
|
608
|
+
var top = ($(self.modal + " .modal-header").outerHeight() + $(self.modal + " .wizard-pf-steps").outerHeight()) + "px",
|
609
|
+
bottom = $(self.modal + " .modal-footer").outerHeight() + "px",
|
610
|
+
sidebarwidth = $(self.modal + " .wizard-pf-sidebar").outerWidth() + "px";
|
611
|
+
$(self.modal + " .wizard-pf-row").css("top", top);
|
612
|
+
$(self.modal + " .wizard-pf-row").css("bottom", bottom);
|
613
|
+
$(self.modal + " .wizard-pf-main").css("margin-left", sidebarwidth);
|
614
|
+
};
|
615
|
+
|
616
|
+
// when the user clicks a step, then the tab group for that step is displayed
|
617
|
+
this.tabGroupSelect = function() {
|
618
|
+
$(self.modal + " .wizard-pf-step>a").click(function() {
|
619
|
+
// remove active class active tabgroup and add active class to the
|
620
|
+
// clicked tab group (but don't remove the active class from current tab)
|
621
|
+
self.currentGroup = $(this).parent().data("tabgroup");
|
622
|
+
self.updateTabGroup();
|
623
|
+
// update value for currentTab -- if a tab is already marked as active
|
624
|
+
// for the new tab group, use that, otherwise set it to the first tab
|
625
|
+
// in the tab group
|
626
|
+
self.currentTab = $(self.modal + " .list-group[data-tabgroup='" + self.currentGroup + "'] .list-group-item.active").data("tab");
|
627
|
+
if (self.currentTab == undefined) {
|
628
|
+
self.currentTab = $(self.modal + " .list-group[data-tabgroup='" + self.currentGroup + "'] .list-group-item:first-child").data("tab");
|
629
|
+
// apply active class to new current tab and associated contents
|
630
|
+
self.updateActiveTab();
|
631
|
+
} else {
|
632
|
+
// use already active tab and just update contents
|
633
|
+
self.updateVisibleContents();
|
634
|
+
}
|
635
|
+
// show/hide/disable/enable buttons if needed
|
636
|
+
self.updateWizardFooterDisplay();
|
637
|
+
});
|
638
|
+
};
|
639
|
+
|
640
|
+
// when the user clicks a tab, then the tab contents are displayed
|
641
|
+
this.tabSelect = function() {
|
642
|
+
$(self.modal + " .wizard-pf-sidebar .list-group-item>a").click(function() {
|
643
|
+
// update value of currentTab to new active tab
|
644
|
+
self.currentTab = $(this).parent().data("tab");
|
645
|
+
// remove active class from active tab in current active tab group (i.e.
|
646
|
+
// don't remove the class from tabs in other groups)
|
647
|
+
$(self.modal + " .list-group[data-tabgroup='" + self.currentGroup + "'] .list-group-item.active").removeClass("active");
|
648
|
+
// add active class to the clicked tab and the associated contents
|
649
|
+
$(this).parent().addClass("active");
|
650
|
+
self.updateVisibleContents();
|
651
|
+
if (self.currentTab == self.tabLast) {
|
652
|
+
$(self.modal + " .wizard-pf-next").addClass("hidden");
|
653
|
+
$(self.modal + " .wizard-pf-finish").removeClass("hidden");
|
654
|
+
self.finish();
|
655
|
+
} else {
|
656
|
+
// show/hide/disable/enable buttons if needed
|
657
|
+
self.updateWizardFooterDisplay();
|
658
|
+
}
|
659
|
+
});
|
660
|
+
};
|
661
|
+
|
662
|
+
// Back button clicked
|
663
|
+
this.backBtnClicked = function() {
|
664
|
+
$(self.modal + " .wizard-pf-back").click(function() {
|
665
|
+
// if not the first page
|
666
|
+
if (self.currentTab != self.tabs[0]) {
|
667
|
+
// go back a page (i.e. -1)
|
668
|
+
self.wizardPaging(-1);
|
669
|
+
// show/hide/disable/enable buttons if needed
|
670
|
+
self.updateWizardFooterDisplay();
|
671
|
+
}
|
672
|
+
});
|
673
|
+
};
|
674
|
+
|
675
|
+
// Next button clicked
|
676
|
+
this.nextBtnClicked = function() {
|
677
|
+
$(self.modal + " .wizard-pf-next").click(function() {
|
678
|
+
// go forward a page (i.e. +1)
|
679
|
+
self.wizardPaging(1);
|
680
|
+
// show/hide/disable/enable buttons if needed
|
681
|
+
self.updateWizardFooterDisplay();
|
682
|
+
});
|
683
|
+
};
|
684
|
+
|
685
|
+
// Finish button clicked
|
686
|
+
// Deploy/Finish button would only display during the second to last step.
|
687
|
+
this.finishBtnClick = function() {
|
688
|
+
$(self.modal + " .wizard-pf-finish").click(function() {
|
689
|
+
self.wizardPaging(1);
|
690
|
+
self.finish();
|
691
|
+
});
|
692
|
+
};
|
693
|
+
|
694
|
+
// Cancel/Close button clicked
|
695
|
+
this.cancelBtnClick = function() {
|
696
|
+
$(self.modal + " .wizard-pf-dismiss").click(function() {
|
697
|
+
// close the modal
|
698
|
+
$(self.modal).modal('hide');
|
699
|
+
// drop click event listeners
|
700
|
+
$(self.modal + " .wizard-pf-step>a").off("click");
|
701
|
+
$(self.modal + " .wizard-pf-sidebar .list-group-item>a").off("click");
|
702
|
+
$(self.modal + " .wizard-pf-back").off("click");
|
703
|
+
$(self.modal + " .wizard-pf-next").off("click");
|
704
|
+
$(self.modal + " .wizard-pf-finish").off("click");
|
705
|
+
$(self.modal + " .wizard-pf-dismiss").off("click");
|
706
|
+
// reset final step
|
707
|
+
$(self.modal + " .wizard-pf-process").removeClass("hidden");
|
708
|
+
$(self.modal + " .wizard-pf-complete").addClass("hidden");
|
709
|
+
// reset loading message
|
710
|
+
$(self.modal + " .wizard-pf-contents").addClass("hidden");
|
711
|
+
$(self.modal + " .wizard-pf-loading").removeClass("hidden");
|
712
|
+
// remove tabs and tab groups
|
713
|
+
$(self.modal + " .wizard-pf-steps").addClass("hidden");
|
714
|
+
$(self.modal + " .wizard-pf-sidebar").addClass("hidden");
|
715
|
+
// reset buttons in final step
|
716
|
+
$(self.modal + " .wizard-pf-close").addClass("hidden");
|
717
|
+
$(self.modal + " .wizard-pf-cancel").removeClass("hidden");
|
718
|
+
});
|
719
|
+
};
|
720
|
+
|
721
|
+
// when the user clicks Next/Back, then the next/previous tab and contents display
|
722
|
+
this.wizardPaging = function(direction) {
|
723
|
+
// get n.n value of next tab using the index of next tab in tabs array
|
724
|
+
var tabIndex = ($.inArray(self.currentTab, self.tabs)) + direction;
|
725
|
+
var newTab = self.tabs[tabIndex];
|
726
|
+
// add/remove active class from current tab group
|
727
|
+
// included math.round to trim off extra .000000000002 that was getting added
|
728
|
+
if (newTab != Math.round(10*(direction*.1 + self.currentTab))/10) {
|
729
|
+
// this statement is true when the next tab is in the next tab group
|
730
|
+
// if next tab is in next tab group (e.g. next tab data-tab value is
|
731
|
+
// not equal to current tab +.1) then apply active class to next
|
732
|
+
// tab group and step, and update the value for var currentGroup +/-1
|
733
|
+
self.currentGroup = self.currentGroup + direction;
|
734
|
+
self.updateTabGroup();
|
735
|
+
}
|
736
|
+
self.currentTab = newTab;
|
737
|
+
// remove active class from active tab in current tab group
|
738
|
+
$(self.modal + " .list-group[data-tabgroup='" + self.currentGroup + "'] .list-group-item.active").removeClass("active");
|
739
|
+
// apply active class to new current tab and associated contents
|
740
|
+
self.updateActiveTab();
|
741
|
+
};
|
742
|
+
|
743
|
+
// This code keeps the same contents div active, but switches out what
|
744
|
+
// contents display in that div (i.e. replaces process message with
|
745
|
+
// success message).
|
746
|
+
this.finish = function() {
|
747
|
+
$(self.modal + " .wizard-pf-back").addClass("disabled"); // if Back remains enabled during this step, then the Close button needs to be removed when the user clicks Back
|
748
|
+
$(self.modal + " .wizard-pf-finish").addClass("disabled");
|
749
|
+
// code for kicking off process goes here
|
750
|
+
// the next code is just to simulate the expected experience, in that
|
751
|
+
// when the process is complete, the success message etc. would display
|
752
|
+
setTimeout (function() {
|
753
|
+
$(self.modal + " .wizard-pf-cancel").addClass("hidden");
|
754
|
+
$(self.modal + " .wizard-pf-finish").addClass("hidden");
|
755
|
+
$(self.modal + " .wizard-pf-close").removeClass("hidden");
|
756
|
+
$(self.modal + " .wizard-pf-process").addClass("hidden");
|
757
|
+
$(self.modal + " .wizard-pf-complete").removeClass("hidden");
|
758
|
+
}, 3000);
|
759
|
+
};
|
760
|
+
|
761
|
+
|
762
|
+
|
763
|
+
};
|
764
|
+
</script>
|
765
|
+
|
510
766
|
|
511
767
|
</div><!-- /container -->
|
512
768
|
</body>
|