Update toggle component
- Adds text to indicate the current state of the toggle button to meet
accessibility guidelines
- Update size, color, and focus of toggle component to fix
DAP violations
- Add page, section, and list-pair layout patterns established
on the power usage page to begin a pattern for consistent
page layout
- Add form__field and form__actions to help with form layout
consistency.
Tested: Verified toggle functions in the GUI and tested with screen reader. Passes DAP.
Signed-off-by: Dixsie Wolmers <dixsiew@gmail.com>
Change-Id: Iaa8646b1179cc307971065c455f4b9448095d1ec
diff --git a/app/server-control/controllers/power-usage-controller.html b/app/server-control/controllers/power-usage-controller.html
index 62ca3da..b0760e0 100644
--- a/app/server-control/controllers/power-usage-controller.html
+++ b/app/server-control/controllers/power-usage-controller.html
@@ -1,45 +1,67 @@
<loader loading="loading"></loader>
-<div id="power-usage">
- <div class="row column">
- <h1>Manage Power Usage</h1>
- </div>
+<div id="power-usage" class="page">
+ <h1 class="page-title">Manage Power Usage</h1>
<form class="power-usage__form" role="form" action="">
- <section class="row column">
- <div class="page-header">
- <h2 class="bold">Power information</h2>
+ <section class="section">
+ <h2 class="section-title">Power information</h2>
+ <dl class="list-pair">
+ <dt>Power Consumption</dt>
+ <dd>{{ power_consumption }}</dd>
+ </dl>
+ </section>
+ <section class="section">
+ <h2 class="section-title">
+ Server power cap setting
+ </h2>
+ <div class="section-content">
+ <p>
+ Set a power cap to keep power consumption at or below the specified
+ value in watts.
+ </p>
+ <div class="toggle-container">
+ <div class="toggle">
+ <input
+ id="toggle__switch-round"
+ class="toggle-switch toggle-switch__round-flat"
+ type="checkbox"
+ tabindex="0"
+ ng-model="power_cap.PowerCapEnable"
+ ng-checked="power_cap.PowerCapEnable"
+ />
+ <label for="toggle__switch-round" tabindex="0"
+ >Server power cap setting is
+ <span class="uid-switch__status">{{
+ power_cap.PowerCapEnable ? "on" : "off"
+ }}</span></label
+ >
+ </div>
+ <span>
+ {{ power_cap.PowerCapEnable ? "On" : "Off" }}
+ </span>
+ </div>
</div>
- <fieldset>
- <ul class="power-usage__metadata-wrapper">
- <li class="power-usage__metadata-block">
- <p class="content-label">Power Consumption</p>
- <p class="courier-bold">{{power_consumption}}</p>
- </li>
- <li class="power-usage__metadata-block">
- <div class="toggle inline">
- <input id="toggle__switch-round"
- class="toggle-switch toggle-switch__round-flat"
- type="checkbox"
- tabindex="0"
- ng-model="power_cap.PowerCapEnable"
- ng-checked="power_cap.PowerCapEnable">
- <label for="toggle__switch-round" tabindex="0">Server power cap setting is <span class="uid-switch__status">{{power_cap.PowerCapEnable ? "on" : "off"}}</span></label>
- </div>
- <div class="power-usage__switch-label inline">
- <p>Server power cap setting is <span class="uid-switch__status">{{power_cap.PowerCapEnable ? "on" : "off"}}</span></p>
- <p>Set a power cap to keep power consumption at or below the specified value in watts.</p>
- </div>
- <div class="small-12 large-4">
- <label for="power-cap" class="content-label power-cap-value-label">POWER CAP VALUE IN WATTS</label>
- <input id="power-cap" type="number" min="100" max="10000" step="1" ng-disabled="!power_cap.PowerCapEnable" ng-model="power_cap.PowerCap"/>
- </div>
- </li>
- </ul>
- </fieldset>
- <div class="power-usage__submit-wrapper">
- <button type="button" class="btn-primary inline" ng-click="setPowerCap()">Save settings</button>
- <button type="button" class="btn-secondary inline" ng-click="refresh()">Cancel</button>
+ <div class="section-content form__field">
+ <label for="power-cap" class="content-label"
+ >POWER CAP VALUE IN WATTS</label
+ >
+ <input
+ id="power-cap"
+ type="number"
+ min="100"
+ max="10000"
+ step="1"
+ ng-disabled="!power_cap.PowerCapEnable"
+ ng-model="power_cap.PowerCap"
+ />
</div>
</section>
+ <div class="form__actions">
+ <button type="submit" class="btn-primary" ng-click="setPowerCap()">
+ Save settings
+ </button>
+ <button type="button" class="btn btn-secondary" ng-click="refresh()">
+ Cancel
+ </button>
+ </div>
</form>
</div>
-
diff --git a/app/server-control/controllers/server-led-controller.html b/app/server-control/controllers/server-led-controller.html
index 2901d76..c5a56e1 100644
--- a/app/server-control/controllers/server-led-controller.html
+++ b/app/server-control/controllers/server-led-controller.html
@@ -1,28 +1,44 @@
<div id="led-switch">
- <div class="row column">
- <h1>Server LED</h1>
- <div class="page-header">
- <h2>LED light control</h2>
- </div>
+ <div class="row column">
+ <h1>Server LED</h1>
+ <div class="page-header">
+ <h2>LED light control</h2>
</div>
-
- <div class="row column" ng-class="{disabled: dataService.server_unreachable || dataService.loading}">
- <div class="btm-border-grey">
- <div class="toggle inline">
- <input id="toggle__switch-round"
- class="toggle-switch toggle-switch__round-flat"
- type="checkbox"
- tabindex="0"
- ng-click="toggleLED()"
- ng-checked="dataService.LED_state == 'on'"
- ng-disabled="dataService.server_unreachable"
- >
- <label for="toggle__switch-round" tabindex="0">Server indicator is <span class="led-switch__status">{{dataService.LED_state}}</span></label>
- </div>
- <div class="led-switch__label inline">
- <p>Server LED light is <span class="led-switch__status">{{dataService.LED_state}}</span></p>
- <p>Turn the LED light on or off. If the server has an LCD, use this control to display text (on) or not to display text (off) on the LCD.</p>
- </div>
- </div>
+ </div>
+ <div
+ class="column"
+ ng-class="{disabled: dataService.server_unreachable || dataService.loading}"
+ >
+ <div class="led-switch__label">
+ <h3>
+ Server LED light
+ </h3>
+ <p>
+ Turn the LED light on or off. If the server has an LCD, use this control
+ to display text (on) or not to display text (off) on the LCD.
+ </p>
</div>
+ <div class="toggle-container">
+ <div class="toggle">
+ <input
+ id="toggle__switch-round"
+ class="toggle-switch toggle-switch__round-flat"
+ type="checkbox"
+ tabindex="0"
+ ng-click="toggleLED()"
+ ng-checked="dataService.LED_state == 'on'"
+ ng-disabled="dataService.server_unreachable"
+ />
+ <label for="toggle__switch-round" tabindex="0"
+ >Server LED indicator is
+ <span class="toggle-switch__status">{{
+ dataService.LED_state
+ }}</span></label
+ >
+ </div>
+ <span>
+ {{ dataService.LED_state == "on" ? "On" : "Off" }}
+ </span>
+ </div>
+ </div>
</div>
diff --git a/app/server-control/styles/index.scss b/app/server-control/styles/index.scss
index 5e8a995..7171a7e 100644
--- a/app/server-control/styles/index.scss
+++ b/app/server-control/styles/index.scss
@@ -2,5 +2,4 @@
@import "./power-operations.scss";
@import "./remote-console.scss";
@import "./server-led.scss";
-@import "./power-usage.scss";
@import "./kvm.scss";
diff --git a/app/server-control/styles/power-usage.scss b/app/server-control/styles/power-usage.scss
deleted file mode 100644
index 0f612ae..0000000
--- a/app/server-control/styles/power-usage.scss
+++ /dev/null
@@ -1,48 +0,0 @@
-// Power Usage SCSS
-.power-usage__form {
-
- input {
- margin-bottom: 0em;
- }
-
- fieldset {
- padding-left: 1.8em;
- }
-
- .power-usage__switch-label {
- padding-bottom: .5em;
- }
-
- .power-usage__switch-label p {
- margin: 0;
- &:first-child {font-weight: 700;}
- }
-
- .power-usage__metadata-wrapper {
- margin: 0;
- padding: 0;
- }
-
- .power-usage__metadata-block {
- min-width: 47%;
- margin-bottom: 1.8em;
- margin-right: .7em;
- display: inline-block;
- white-space: normal;
- word-break: break-all;
- @include mediaQuery(small) {
- float: left;
- }
- }
-
- .power-usage__submit-wrapper {
- width: 100%;
- margin-top: 3em;
- padding-top: 1em;
- border-top: 1px solid $border-color-01;
- button {
- float: right;
- margin: .5em;
- }
- }
-}
diff --git a/app/server-control/styles/server-led.scss b/app/server-control/styles/server-led.scss
index 9807c74..26136fa 100644
--- a/app/server-control/styles/server-led.scss
+++ b/app/server-control/styles/server-led.scss
@@ -1,12 +1,13 @@
// Server LED
#led-switch {
- .switch {margin-left: 1.7em;}
.led-switch__label {
padding-bottom: 1.5em;
}
.led-switch__label p {
margin: 0;
- &:first-child {font-weight: 700;}
+ &:first-child {
+ font-weight: 700;
+ }
}
}