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/overview/controllers | |
| 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/overview/controllers')
| -rw-r--r-- | app/overview/controllers/system-overview-controller.html | 23 |
1 files changed, 14 insertions, 9 deletions
diff --git a/app/overview/controllers/system-overview-controller.html b/app/overview/controllers/system-overview-controller.html index 34e5611..ffbf0a1 100644 --- a/app/overview/controllers/system-overview-controller.html +++ b/app/overview/controllers/system-overview-controller.html @@ -110,16 +110,21 @@ <dd class="courier-bold bmc-time">{{ bmc_time | localeDate }}</dd> </dl> <div class="quick-links__item no-icon"> - <p class="inline quick-links__label">Turn <span ng-if="dataService.LED_state == 'off'">on</span><span - ng-if="dataService.LED_state == 'on'">off</span> server LED</p> - <div class="toggle inline float-right"> - <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 is <span - class="led-switch__status">{{dataService.LED_state}}</span></label> - </div> + <p class="inline quick-links__label">Turn <span ng-if="dataService.LED_state == 'off'">on</span> + <span ng-if="dataService.LED_state == 'on'">off</span> server LED</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-click="toggleLED()" ng-checked="dataService.LED_state == 'on'" + ng-disabled="dataService.server_unreachable"> + <label for="toggle__switch-round" tabindex="0">Server LED is <span + class="uid-switch__status">{{dataService.LED_state}}</span></label> + </div> + <span> + {{ dataService.LED_state == 'on' ? "On" : "Off" }} + </span> </div> + </div> <a href="#/server-control/remote-console" class="no-icon quick-links__item"> <p class="inline quick-links__label">Serial over LAN console</p> <icon file="icon-launch.svg" class="float-right"></icon> |
