Skip to content

Commit fa27674

Browse files
lane-formiolane-formio
committed
$'syncing commit from monorepo. PR: 775, Title: FIO-11511: fix duplicate Step Indicator progress bars'
1 parent d77b159 commit fa27674

3 files changed

Lines changed: 100 additions & 94 deletions

File tree

  • src/templates
    • bootstrap3/wizardHeaderStepIndicator
    • bootstrap4/wizardHeaderStepIndicator
    • bootstrap5/wizardHeaderStepIndicator

‎src/templates/bootstrap3/wizardHeaderStepIndicator/form.ejs‎

Lines changed: 33 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,33 @@
1-
<div class="progress">
2-
<div
3-
class="progress-bar"
4-
role="progressbar"
5-
style="width: {{(ctx.currentPage+1)/ctx.panels.length*100}}%"
6-
aria-valuenow="{{(ctx.currentPage+1)/ctx.panels.length*100}}"
7-
aria-valuemin="0"
8-
aria-valuemax="100"
9-
></div>
10-
</div>
11-
<nav id="{{ ctx.wizardKey }}-header">
12-
<ul class="pagination nav nav-pills">
13-
{% ctx.panels.forEach(function(panel, index) { %}
14-
<li class="page-item">
15-
<button
16-
tabindex="0"
17-
data-index="{{index}}"
18-
class="nav-link{{ctx.currentPage < index ? ' disabled' : ''}}{{ctx.currentPage === index ? ' active' : ''}}"
19-
ref="{{ctx.wizardKey}}-link"
20-
{{ctx.currentPage < index ? ' disabled' : ''}}
21-
{{ctx.currentPage === index ? ' aria-selected="true"' : ''}}
22-
>
23-
{{ctx.t(panel.title, { _userInput: true })}}
24-
{% if (panel.tooltip && ctx.currentPage === index) { %}
25-
<i ref="{{ctx.wizardKey}}-tooltip" class="{{ctx.iconClass('question-sign')}} text-muted" data-tooltip="{{panel.tooltip}}"></i>
26-
{% } %}
27-
</button>
28-
</li>
29-
{% }) %}
30-
</ul>
31-
</nav>
1+
<div id="{{ ctx.wizardKey }}-header">
2+
<div class="progress">
3+
<div
4+
class="progress-bar"
5+
role="progressbar"
6+
style="width: {{(ctx.currentPage+1)/ctx.panels.length*100}}%"
7+
aria-valuenow="{{(ctx.currentPage+1)/ctx.panels.length*100}}"
8+
aria-valuemin="0"
9+
aria-valuemax="100"
10+
></div>
11+
</div>
12+
<nav>
13+
<ul class="pagination nav nav-pills">
14+
{% ctx.panels.forEach(function(panel, index) { %}
15+
<li class="page-item">
16+
<button
17+
tabindex="0"
18+
data-index="{{index}}"
19+
class="nav-link{{ctx.currentPage < index ? ' disabled' : ''}}{{ctx.currentPage === index ? ' active' : ''}}"
20+
ref="{{ctx.wizardKey}}-link"
21+
{{ctx.currentPage < index ? ' disabled' : ''}}
22+
{{ctx.currentPage === index ? ' aria-selected="true"' : ''}}
23+
>
24+
{{ctx.t(panel.title, { _userInput: true })}}
25+
{% if (panel.tooltip && ctx.currentPage === index) { %}
26+
<i ref="{{ctx.wizardKey}}-tooltip" class="{{ctx.iconClass('question-sign')}} text-muted" data-tooltip="{{panel.tooltip}}"></i>
27+
{% } %}
28+
</button>
29+
</li>
30+
{% }) %}
31+
</ul>
32+
</nav>
33+
</div>

‎src/templates/bootstrap4/wizardHeaderStepIndicator/form.ejs‎

Lines changed: 33 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,33 @@
1-
<div class="progress">
2-
<div
3-
class="progress-bar"
4-
role="progressbar"
5-
style="width: {{(ctx.currentPage+1)/ctx.panels.length*100}}%"
6-
aria-valuenow="{{(ctx.currentPage+1)/ctx.panels.length*100}}"
7-
aria-valuemin="0"
8-
aria-valuemax="100"
9-
></div>
10-
</div>
11-
<nav id="{{ ctx.wizardKey }}-header">
12-
<ul class="pagination nav nav-pills">
13-
{% ctx.panels.forEach(function(panel, index) { %}
14-
<li class="page-item">
15-
<button
16-
tabindex="0"
17-
data-index="{{index}}"
18-
class="nav-link{{ctx.currentPage < index ? ' disabled' : ''}}{{ctx.currentPage === index ? ' active' : ''}}"
19-
ref="{{ctx.wizardKey}}-link"
20-
{{ctx.currentPage < index ? ' disabled' : ''}}
21-
{{ctx.currentPage === index ? ' aria-selected="true"' : ''}}
22-
>
23-
{{ctx.t(panel.title, { _userInput: true })}}
24-
{% if (panel.tooltip && ctx.currentPage === index) { %}
25-
<i ref="{{ctx.wizardKey}}-tooltip" class="{{ctx.iconClass('question-sign')}} text-muted" data-tooltip="{{panel.tooltip}}"></i>
26-
{% } %}
27-
</button>
28-
</li>
29-
{% }) %}
30-
</ul>
31-
</nav>
1+
<div id="{{ ctx.wizardKey }}-header" class="d-flex flex-column">
2+
<div class="progress">
3+
<div
4+
class="progress-bar"
5+
role="progressbar"
6+
style="width: {{(ctx.currentPage+1)/ctx.panels.length*100}}%"
7+
aria-valuenow="{{(ctx.currentPage+1)/ctx.panels.length*100}}"
8+
aria-valuemin="0"
9+
aria-valuemax="100"
10+
></div>
11+
</div>
12+
<nav class="align-self-start">
13+
<ul class="pagination nav nav-pills">
14+
{% ctx.panels.forEach(function(panel, index) { %}
15+
<li class="page-item">
16+
<button
17+
tabindex="0"
18+
data-index="{{index}}"
19+
class="nav-link{{ctx.currentPage < index ? ' disabled' : ''}}{{ctx.currentPage === index ? ' active' : ''}}"
20+
ref="{{ctx.wizardKey}}-link"
21+
{{ctx.currentPage < index ? ' disabled' : ''}}
22+
{{ctx.currentPage === index ? ' aria-selected="true"' : ''}}
23+
>
24+
{{ctx.t(panel.title, { _userInput: true })}}
25+
{% if (panel.tooltip && ctx.currentPage === index) { %}
26+
<i ref="{{ctx.wizardKey}}-tooltip" class="{{ctx.iconClass('question-sign')}} text-muted" data-tooltip="{{panel.tooltip}}"></i>
27+
{% } %}
28+
</button>
29+
</li>
30+
{% }) %}
31+
</ul>
32+
</nav>
33+
</div>

‎src/templates/bootstrap5/wizardHeaderStepIndicator/form.ejs‎

Lines changed: 34 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,35 @@
1-
<div
2-
class="progress mb-2"
3-
aria-valuenow="{{(ctx.currentPage+1)/ctx.panels.length*100}}"
4-
aria-valuemin="0"
5-
aria-valuemax="100"
6-
role="progressbar"
7-
>
1+
<div id="{{ ctx.wizardKey }}-header" class="d-flex flex-column">
82
<div
9-
class="progress-bar"
10-
style="width: {{(ctx.currentPage+1)/ctx.panels.length*100}}%"
11-
></div>
12-
</div>
13-
<nav id="{{ ctx.wizardKey }}-header">
14-
<ul class="pagination nav nav-pills">
15-
{% ctx.panels.forEach(function(panel, index) { %}
16-
<li class="nav-item">
17-
<button
18-
tabindex="0"
19-
data-index="{{index}}"
20-
class="nav-link{{ctx.currentPage < index ? ' disabled' : ''}}{{ctx.currentPage === index ? ' active' : ''}}"
21-
ref="{{ctx.wizardKey}}-link"
22-
{{ctx.currentPage < index ? ' disabled' : ''}}
23-
{{ctx.currentPage === index ? ' aria-selected="true"' : ''}}
24-
>
25-
{{ctx.t(panel.title, { _userInput: true })}}
26-
{% if (panel.tooltip && ctx.currentPage === index) { %}
27-
<i ref="{{ctx.wizardKey}}-tooltip" class="{{ctx.iconClass('question-sign')}} text-muted" data-tooltip="{{panel.tooltip}}"></i>
28-
{% } %}
29-
</button>
30-
</li>
31-
{% }) %}
32-
</ul>
33-
</nav>
3+
class="progress mb-2"
4+
aria-valuenow="{{(ctx.currentPage+1)/ctx.panels.length*100}}"
5+
aria-valuemin="0"
6+
aria-valuemax="100"
7+
role="progressbar"
8+
>
9+
<div
10+
class="progress-bar"
11+
style="width: {{(ctx.currentPage+1)/ctx.panels.length*100}}%"
12+
></div>
13+
</div>
14+
<nav class="align-self-start">
15+
<ul class="pagination nav nav-pills">
16+
{% ctx.panels.forEach(function(panel, index) { %}
17+
<li class="nav-item">
18+
<button
19+
tabindex="0"
20+
data-index="{{index}}"
21+
class="nav-link{{ctx.currentPage < index ? ' disabled' : ''}}{{ctx.currentPage === index ? ' active' : ''}}"
22+
ref="{{ctx.wizardKey}}-link"
23+
{{ctx.currentPage < index ? ' disabled' : ''}}
24+
{{ctx.currentPage === index ? ' aria-selected="true"' : ''}}
25+
>
26+
{{ctx.t(panel.title, { _userInput: true })}}
27+
{% if (panel.tooltip && ctx.currentPage === index) { %}
28+
<i ref="{{ctx.wizardKey}}-tooltip" class="{{ctx.iconClass('question-sign')}} text-muted" data-tooltip="{{panel.tooltip}}"></i>
29+
{% } %}
30+
</button>
31+
</li>
32+
{% }) %}
33+
</ul>
34+
</nav>
35+
</div>

0 commit comments

Comments
 (0)