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/common/styles/base/forms.scss b/app/common/styles/base/forms.scss
index 3699521..f04e827 100644
--- a/app/common/styles/base/forms.scss
+++ b/app/common/styles/base/forms.scss
@@ -1,28 +1,31 @@
-label, legend {
- font-size:1em;
+label,
+legend {
+ font-size: 1em;
font-weight: 300;
margin: 0;
.error {
- font-size: .9em;
+ font-size: 0.9em;
}
}
-.label__helper-text {
+// TODO: Start replacing use of label__helper-text
+.label__helper-text,
+.form__helper-text {
color: $text-02;
line-height: 1.2;
font-size: 0.9em;
margin-bottom: 0.4em;
}
-input[type='email'],
-input[type='number'],
-input[type='password'],
-input[type='search'],
-input[type='tel'],
-input[type='url'],
-input[type='text'],
-input[type='date'],
-input[type='time'],
+input[type="email"],
+input[type="number"],
+input[type="password"],
+input[type="search"],
+input[type="tel"],
+input[type="url"],
+input[type="text"],
+input[type="date"],
+input[type="time"],
textarea {
border-radius: 0px;
border: 1px solid $border-color-02;
@@ -66,37 +69,56 @@
}
.form-error {
- margin-bottom: .7em;
+ margin-bottom: 0.7em;
font-size: 0.8rem;
color: $status-error;
- height:1rem;
+ height: 1rem;
display: block;
visibility: hidden;
+ // TODO: Create state rulesets rather than relying on one off solutions
.visible {
visibility: visible;
}
}
//Foundation overwrite
-[type=color], [type=date], [type=datetime-local], [type=datetime], [type=email], [type=month], [type=number], [type=password], [type=search], [type=tel], [type=text], [type=time], [type=url], [type=week], textarea {
+[type="color"],
+[type="date"],
+[type="datetime-local"],
+[type="datetime"],
+[type="email"],
+[type="month"],
+[type="number"],
+[type="password"],
+[type="search"],
+[type="tel"],
+[type="text"],
+[type="time"],
+[type="url"],
+[type="week"],
+textarea {
border-color: $border-color-02;
}
input[readonly],
-input[readonly]:focus{
+input[readonly]:focus {
box-shadow: 0 0 0;
background: $background-03;
border: 1px solid $border-color-02;
}
-textarea { padding: .2em;
- height: auto;}
-input[type="submit"], .submit {
+textarea {
+ padding: 0.2em;
+ height: auto;
+}
+
+input[type="submit"],
+.submit {
margin: 1em 0;
width: 100%;
}
-//Custom select
-select{
+// Custom select
+select {
border-radius: 0px;
height: auto;
padding-right: 0.5rem; //override inherited Foundation style
@@ -121,3 +143,70 @@
color: $status-error;
font-size: 0.9em;
}
+
+/**
+ * Used for basic vertically stacked forms
+ * that do not need a grid for layout
+ * Should only wrap form elements and label
+ * Helper text shoul not be wrapped in the
+ * form-field container
+ * EX: Manage Power Usage
+ * Markup
+ <div class="section-content">
+ <p class="form__helper-text">Some helper text</p>
+ <div class=" form__field">
+ <label for="power-cap" class="content-label">POWER CAP VALUE IN WATTS</label>
+ <input id="power-cap type="number" />
+ </div>
+ </div>
+ */
+
+.form__field {
+ min-width: 150px;
+ max-width: 240px;
+}
+
+.form__field--large {
+ max-width: 330px;
+}
+
+// TODO Replace form-actions with form__actions. see below
+.form-actions {
+ width: 100%;
+ margin-top: 3rem;
+ padding-top: 1rem;
+ border-top: 1px solid $border-color-01;
+
+ button {
+ display: block;
+ float: right;
+ margin: 0.5em 0 0 1em;
+ }
+}
+
+/**
+ * Use to wrap the cancel and submit buttons on
+ * a form to create the top border and white space
+ * Markup
+ <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__actions {
+ margin-top: 3rem;
+ padding-top: 1rem;
+ border-top: 1px solid $border-color-01;
+ display: flex;
+ justify-content: flex-end;
+
+ button:first-of-type {
+ order: 1;
+ margin-left: 1rem;
+ }
+}
diff --git a/app/common/styles/base/mixins.scss b/app/common/styles/base/mixins.scss
index 87708da..4c5bfb1 100644
--- a/app/common/styles/base/mixins.scss
+++ b/app/common/styles/base/mixins.scss
@@ -191,3 +191,11 @@
animation: row-flash 1s infinite; /* IE 10+ */
}
}
+
+@mixin label {
+ color: $text-02;
+ text-transform: uppercase;
+ font-weight: 700;
+ font-size: 0.75em;
+ margin-bottom: 0.5rem;
+}
diff --git a/app/common/styles/base/typography.scss b/app/common/styles/base/typography.scss
index f0a5e20..baa6a60 100644
--- a/app/common/styles/base/typography.scss
+++ b/app/common/styles/base/typography.scss
@@ -20,29 +20,35 @@
color: $text-01;
}
-h1, .h1 {
+h1,
+.h1 {
font-size: 2.25rem;
font-weight: 500;
- padding-top: .5rem;
+ padding-top: 0.5rem;
+ margin-bottom: 3rem;
}
-h2, .h2 {
+h2,
+.h2 {
font-size: 1.25rem;
font-weight: bold;
}
-h3, .h3 {
+h3,
+.h3 {
font-size: 1rem;
font-weight: bold;
}
-h4, .h4 {
- font-size: .875rem;
+h4,
+.h4 {
+ font-size: 0.875rem;
font-weight: bold;
}
-h5, .h5 {
- font-size: .875rem;
+h5,
+.h5 {
+ font-size: 0.875rem;
font-weight: 500;
color: $text-02;
}
@@ -55,4 +61,4 @@
font-family: "Courier New", Helvetica, arial, sans-serif;
font-weight: 700;
margin-bottom: 0;
-}
\ No newline at end of file
+}
diff --git a/app/common/styles/base/utility.scss b/app/common/styles/base/utility.scss
index 7297628..26f138a 100644
--- a/app/common/styles/base/utility.scss
+++ b/app/common/styles/base/utility.scss
@@ -75,10 +75,6 @@
margin-top: 0 !important;
}
-.btm-border-grey {
- border-bottom: 1px solid $border-color-02;
-}
-
.transitionAll {
transition: all .5s ease;
}
diff --git a/app/common/styles/elements/quicklinks.scss b/app/common/styles/elements/quicklinks.scss
index 9d6ea48..c1bff93 100644
--- a/app/common/styles/elements/quicklinks.scss
+++ b/app/common/styles/elements/quicklinks.scss
@@ -50,12 +50,14 @@
&:after {
display: none;
}
+ .toggle-container {
+ float: right;
+ }
}
&:last-child {
border-bottom: 0;
}
.float-right {
- display:inline-block;
float: right;
@media(min-width: 1024px) and (max-width: 1140px) {
display: block;
@@ -77,9 +79,3 @@
color: $status-error;
}
}
-
-//toggle switch
-.quick-links__item .toggle label {
- transform: translateY(-2px);
- margin-right: 0;
-}
diff --git a/app/common/styles/elements/toggle-switch.scss b/app/common/styles/elements/toggle-switch.scss
index ae8c276..814da91 100644
--- a/app/common/styles/elements/toggle-switch.scss
+++ b/app/common/styles/elements/toggle-switch.scss
@@ -1,8 +1,5 @@
@mixin marginTransition {
- -webkit-transition: margin 0.4s, background 0.4s;
- -moz-transition: margin 0.4s, background 0.4s;
- -o-transition: margin 0.4s, background 0.4s;
- transition: margin 0.4s, background 0.4s;
+ transition: margin $duration--moderate-01, background $duration--moderate-01;
}
@mixin borderRadius {
@@ -11,11 +8,13 @@
border-radius: 60px;
}
+.toggle-container {
+ display: flex;
+}
+
.toggle-switch {
position: absolute;
- left: 20px;
- height: 1px;
- width: 1px;
+ top: 0;
opacity: 0;
}
@@ -32,22 +31,25 @@
.toggle label {
text-indent: -9999px;
- transform: translateY(-50%); // keeps switch centered
+ margin-right: 0.3rem;
+}
+
+input.toggle-switch__round-flat:focus + label {
+ outline: 1px solid $primary-accent;
+ outline-offset: 3px;
}
input.toggle-switch__round-flat + label {
padding: 2px;
- width: 50px;
- height: 30px;
+ width: 43px;
+ height: 22px;
background-color: $border-color-02;
@include borderRadius;
@include marginTransition;
}
-input.toggle-switch__round-flat:focus + label {
- box-shadow: 0 0 4px 4px $primary-accent;
-}
-input.toggle-switch__round-flat + label:before, input.toggle-switch__round-flat + label:after {
+input.toggle-switch__round-flat + label:before,
+input.toggle-switch__round-flat + label:after {
display: block;
position: absolute;
content: "";
@@ -65,7 +67,7 @@
top: 4px;
left: 4px;
bottom: 4px;
- width: 20px;
+ width: 15px;
background-color: $border-color-02;
-webkit-border-radius: 52px;
-moz-border-radius: 52px;
@@ -76,9 +78,9 @@
background-color: $primary-accent;
}
input.toggle-switch__round-flat:checked + label:before {
- background-color: $background-02;
+ background-color: $primary-accent;
}
input.toggle-switch__round-flat:checked + label:after {
margin-left: 20px;
- background-color: $primary-accent;
-}
\ No newline at end of file
+ background-color: $primary-light;
+}
diff --git a/app/common/styles/layout/content.scss b/app/common/styles/layout/content.scss
index 61e082b..8c8b916 100644
--- a/app/common/styles/layout/content.scss
+++ b/app/common/styles/layout/content.scss
@@ -2,15 +2,6 @@
$nav__toplvlWidth: 120px;
$nav__seclvlWidth: 240px;
-// Page header
-.page-header {
- width: 100%;
- position: relative;
- border-bottom: 1px solid $border-color-02;
- margin: 0.5em 0 2.2em;
- padding-left: 0;
-}
-
// Main element class
.content__container {
margin-left: $nav__toplvlWidth;
@@ -41,15 +32,22 @@
margin-top: 2em;
}
+// TODO: Determine if label and content-label are the same - remove generic element selector
.content-label,
label {
- color: $text-02;
- text-transform: uppercase;
- font-weight: 700;
- font-size: 0.75em;
- margin-bottom: 0;
+ @include label;
}
+// TODO: Remove and replace with page and page-title pattern
+// Page header
+.page-header {
+ width: 100%;
+ position: relative;
+ border-bottom: 1px solid $border-color-02;
+ margin: 0.5em 0 2.2em;
+ padding-left: 0;
+}
+// TODO: Remove and replace with the .section and .section-title pattern
.subhead {
width: 100%;
border-bottom: 1px solid $border-color-01;
diff --git a/app/common/styles/layout/header.scss b/app/common/styles/layout/header.scss
index 3593780..3e0f0da 100644
--- a/app/common/styles/layout/header.scss
+++ b/app/common/styles/layout/header.scss
@@ -1,3 +1,8 @@
+/**
+ * Application header styles
+ * Should only be used for the application header
+ */
+
$logoHeight: 30px;
$logoMaxHeight: 100px;
$logoMaxWidth: 125px;
@@ -38,7 +43,7 @@
.header__logout {
float: right;
color: $primary-light;
- font-size: .9em;
+ font-size: 0.9em;
text-decoration: none;
padding: 1em;
font-weight: 400;
@@ -61,7 +66,7 @@
font-size: 1.5em;
font-weight: 500;
color: $text-02;
- padding: .4em 0 0 1em;
+ padding: 0.4em 0 0 1em;
height: 100%;
background: transparent;
max-width: 600px;
@@ -78,7 +83,7 @@
}
}
.logo__wrapper {
- padding-top: .5em;
+ padding-top: 0.5em;
}
.header__logo {
@@ -97,7 +102,7 @@
right: -480px;
bottom: 0;
z-index: 100;
- margin: .3em 0;
+ margin: 0.3em 0;
background: $primary-light;
@include fastTransition-all;
&.active {
@@ -111,12 +116,13 @@
color: $primary-dark;
font-size: 1em;
}
- a, p {
+ a,
+ p {
display: block;
float: left;
text-decoration: none;
color: $text-02;
- padding: 1.250em;
+ padding: 1.25em;
height: 100%;
font-size: 0.875em;
font-weight: 400;
@@ -125,7 +131,7 @@
display: block;
font-size: 1rem;
font-weight: bold;
- margin-top: .5em;
+ margin-top: 0.5em;
}
}
}
@@ -137,7 +143,7 @@
.header__multi-server {
background: $background-02;
@include round-corners;
- margin: 0 .3em;
+ margin: 0 0.3em;
height: 100%;
border: 1px solid $border-color-01;
opacity: 1;
@@ -148,8 +154,8 @@
}
.header__multi-server {
- padding: .5em;
- padding-top: .8em;
+ padding: 0.5em;
+ padding-top: 0.8em;
float: left;
margin-top: 10px;
margin-right: -10px;
@@ -167,12 +173,12 @@
}
.header__functions {
.header__info {
- padding: .3em;
+ padding: 0.3em;
min-width: 40px;
text-align: center;
float: left;
span {
- padding: .7em 0 .3em;
+ padding: 0.7em 0 0.3em;
font-size: 1em;
font-weight: 400;
color: $text-02;
@@ -214,7 +220,7 @@
font-weight: 400;
color: $text-02;
display: block;
- margin-bottom: .2em;
+ margin-bottom: 0.2em;
}
.icon {
display: block;
diff --git a/app/common/styles/layout/index.scss b/app/common/styles/layout/index.scss
index 4183519..8a33213 100644
--- a/app/common/styles/layout/index.scss
+++ b/app/common/styles/layout/index.scss
@@ -1,2 +1,5 @@
-@import 'header';
-@import 'content';
+@import "header";
+@import "page";
+@import "section";
+@import "content";
+@import "list";
diff --git a/app/common/styles/layout/list.scss b/app/common/styles/layout/list.scss
new file mode 100644
index 0000000..9be7522
--- /dev/null
+++ b/app/common/styles/layout/list.scss
@@ -0,0 +1,18 @@
+/**
+ * Used for any key value pair
+ * Markup
+ <dl class="list-pair">
+ <dt>Term</dt>
+ <dd>Definition associated with the term</dd>
+ </dl>
+ */
+
+.list-pair {
+ dt {
+ @include label;
+ }
+ dd {
+ @include fontCourierBold;
+ margin-bottom: 0;
+ }
+}
diff --git a/app/common/styles/layout/page.scss b/app/common/styles/layout/page.scss
new file mode 100644
index 0000000..2ce98d5
--- /dev/null
+++ b/app/common/styles/layout/page.scss
@@ -0,0 +1,15 @@
+/**
+ * Used for page layout. This should be used for the page container
+ * Mark up
+ <div class="page">
+ <h1 class="page-title">Page Title</h1>
+ ...
+ </div>
+ */
+.page {
+ max-width: 1080px;
+}
+
+.page-title {
+ margin-bottom: 3rem;
+}
diff --git a/app/common/styles/layout/section.scss b/app/common/styles/layout/section.scss
new file mode 100644
index 0000000..e92b096
--- /dev/null
+++ b/app/common/styles/layout/section.scss
@@ -0,0 +1,28 @@
+/**
+ * Used for section layout. This should be used for the page container
+ * Mark up
+ <div class="section">
+ <h2 class="section-title">Section Title</h2>
+ <div class="section-content">
+ ...
+ </div>
+ <div class="section-content">
+ ...
+ </div>
+ </div>
+ */
+
+.section {
+ margin-bottom: 3rem;
+}
+
+.section-title {
+ border-bottom: 1px solid $border-color-01;
+ padding-bottom: 0.5rem;
+ margin-bottom: 1.5rem;
+}
+
+.section-content {
+ margin-bottom: 1.5rem;
+ margin-top: 0;
+}
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>
diff --git a/app/overview/styles/system-overview.scss b/app/overview/styles/system-overview.scss
index ed010aa..627ecf5 100644
--- a/app/overview/styles/system-overview.scss
+++ b/app/overview/styles/system-overview.scss
@@ -53,4 +53,8 @@
.modal__error {
color: $status-error;
+}
+
+dl {
+ margin-bottom: 0;
}
\ No newline at end of file
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;
+ }
}
}