diff options
| author | Dixsie Wolmers <dixsiew@gmail.com> | 2019-07-19 13:03:28 -0500 |
|---|---|---|
| committer | Gunnar Mills <gmills@us.ibm.com> | 2019-08-09 15:10:42 +0000 |
| commit | c652ed1889599da3ca2a0e0d36979e099f9b3b8c (patch) | |
| tree | 9dcd1d62691f1f268c7ac3d819586c59ce949f58 /app/server-control/controllers/server-led-controller.html | |
| parent | c81cdd4acceb7b284ebb9680b6e318ddf4f20542 (diff) | |
| download | phosphor-webui-c652ed1889599da3ca2a0e0d36979e099f9b3b8c.tar.gz phosphor-webui-c652ed1889599da3ca2a0e0d36979e099f9b3b8c.zip | |
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
Diffstat (limited to 'app/server-control/controllers/server-led-controller.html')
| -rw-r--r-- | app/server-control/controllers/server-led-controller.html | 64 |
1 files changed, 40 insertions, 24 deletions
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> |
