[Perl] DAQ system for the FAPG.
refactor make graph-control div the Bootstrap btn-group
Merge the graph-control wrapper and timeframe-control btn-group into a single element, removing one level of unnecessary nesting. The div now carries both classes and the role="group" attribute directly.
Changed files
roles/dashboard/t/01-graph-page.t
@@ -24,7 +24,7 @@
24
24
->element_exists('section#probe-ph[data-panel="ph"] canvas#chart-ph')
25
25
->element_exists_not('[data-status="ph"]')
26
26
->element_exists(
27
Removed:
'div.toolbar-items div.graph-control > div.timeframe-control[role="group"]'
27
Added:
'div.toolbar-items div.graph-control.timeframe-control[role="group"]'
28
28
)
29
29
->text_is(
30
30
'button[data-graph-controls-toggle][aria-expanded="false"][aria-controls="graph-controls-panel"]',
roles/dashboard/templates/dashboard/graph-control.html.ep
@@ -10,30 +10,28 @@
10
10
aria-controls="graph-controls-panel"
11
11
data-graph-controls-toggle>Graph controls</button>
12
12
<div class="collapse d-md-block graph-controls-panel" id="graph-controls-panel">
13
Removed:
<div class="graph-control">
14
Removed:
<div class="btn-group timeframe-control" role="group" aria-label="<%= $aria_label %>">
15
Removed:
% for my $timeframe ( [ hour => 'Hourly' ], [ day => 'Daily' ], [ week => 'Weekly' ], [ month => 'Monthly' ], [ year => 'Yearly' ] ) {
16
Removed:
<div class="timeframe-option d-inline-flex" data-timeframe-option="<%= $timeframe->[0] %>">
17
Removed:
<button
18
Removed:
class="btn btn-sm btn-outline-secondary timeframe-adjustment"
19
Removed:
type="button"
20
Removed:
data-timeframe-adjustment="decrease"
21
Removed:
data-timeframe="<%= $timeframe->[0] %>"
22
Removed:
aria-label="Decrease <%= $timeframe->[0] %> range">−</button>
23
Removed:
<button
24
Removed:
class="btn btn-sm btn-outline-secondary timeframe-button"
25
Removed:
type="button"
26
Removed:
data-timeframe="<%= $timeframe->[0] %>"
27
Removed:
data-timeframe-label="<%= $timeframe->[1] %>"><%= $timeframe->[1] %></button>
28
Removed:
<button
29
Removed:
class="btn btn-sm btn-outline-secondary timeframe-adjustment"
30
Removed:
type="button"
31
Removed:
data-timeframe-adjustment="increase"
32
Removed:
data-timeframe="<%= $timeframe->[0] %>"
33
Removed:
aria-label="Increase <%= $timeframe->[0] %> range">+</button>
34
Removed:
</div>
35
Removed:
% }
36
Removed:
</div>
13
Added:
<div class="graph-control btn-group timeframe-control" role="group" aria-label="<%= $aria_label %>">
14
Added:
% for my $timeframe ( [ hour => 'Hourly' ], [ day => 'Daily' ], [ week => 'Weekly' ], [ month => 'Monthly' ], [ year => 'Yearly' ] ) {
15
Added:
<div class="timeframe-option d-inline-flex" data-timeframe-option="<%= $timeframe->[0] %>">
16
Added:
<button
17
Added:
class="btn btn-sm btn-outline-secondary timeframe-adjustment"
18
Added:
type="button"
19
Added:
data-timeframe-adjustment="decrease"
20
Added:
data-timeframe="<%= $timeframe->[0] %>"
21
Added:
aria-label="Decrease <%= $timeframe->[0] %> range">−</button>
22
Added:
<button
23
Added:
class="btn btn-sm btn-outline-secondary timeframe-button"
24
Added:
type="button"
25
Added:
data-timeframe="<%= $timeframe->[0] %>"
26
Added:
data-timeframe-label="<%= $timeframe->[1] %>"><%= $timeframe->[1] %></button>
27
Added:
<button
28
Added:
class="btn btn-sm btn-outline-secondary timeframe-adjustment"
29
Added:
type="button"
30
Added:
data-timeframe-adjustment="increase"
31
Added:
data-timeframe="<%= $timeframe->[0] %>"
32
Added:
aria-label="Increase <%= $timeframe->[0] %> range">+</button>
33
Added:
</div>
34
Added:
% }
37
35
</div>
38
36
</div>
39
37
</div>