power-operations: add indeterminate status bar
Change-Id: I400aa855e4e9dd6b00f665083a7ba0fa4843825d
Signed-off-by: Michael Davis <michael.s.davis@ibm.com>
diff --git a/src/img/icon-power.svg b/src/img/icon-power.svg
new file mode 100644
index 0000000..8844297
--- /dev/null
+++ b/src/img/icon-power.svg
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+<svg version="1.1" baseProfile="tiny" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+ x="0px" y="0px" viewBox="0 0 75 75" xml:space="preserve">
+<path fill="#3C6DF0" d="M17,14.6L17,14.6c1.2-1,1.3-2.7,0.3-3.9c-1-1.1-2.7-1.3-3.9-0.2C1.8,20.6-2.3,36.8,3.1,51.2
+ S22.3,75.1,37.6,75C53,74.9,66.7,65.3,72,50.9c5.3-14.4,1-30.6-10.6-40.6c-2.8-2.4-6.3,1.8-3.5,4.1c7,5.9,11,14.7,11,23.8
+ c0,17.3-14,31.3-31.3,31.3S6.2,55.5,6.2,38.2C6.2,29.2,10.1,20.5,17,14.6z"/>
+<path fill="#3C6DF0" d="M40.2,40.8V2.7c0-3.6-5.4-3.6-5.4,0v38.1c0,1.5,1.2,2.8,2.7,2.8C39,43.6,40.3,42.3,40.2,40.8z"/>
+</svg>
diff --git a/src/js/services.js b/src/js/services.js
index d37dc7f..db44ae9 100644
--- a/src/js/services.js
+++ b/src/js/services.js
@@ -12,7 +12,7 @@
.module('app.services', [])
.service('dataService', function(){
this.app_version = "openBMC V.0.0.1";
- this.server_health = 'Error';
+ this.server_health = 'Good';
this.server_state = 'On';
this.chassis_state = 'On';
this.server_id = "Server BLZ_109284.209.01";
diff --git a/src/power-operations.html b/src/power-operations.html
index d70b961..a692ca5 100644
--- a/src/power-operations.html
+++ b/src/power-operations.html
@@ -12,7 +12,7 @@
</div>
</div>
<div class="row column">
- <div id="power-indicator-bar" class="power__indicator-bar" ng-class="{'power__state-on': dataService.server_state == 'On', 'power__state-off': dataService.server_state == 'Off'}">
+ <div id="power-indicator-bar" class="power__indicator-bar " ng-class="{'power__state-on': dataService.server_state == 'On', 'power__state-off': dataService.server_state == 'Off', 'power__state-indet' : dataService.server_state == 'Booting' }">
<p class="inline">{{dataService.server_id}}</p>
<h3 class="power__state inline float-right h3"><span>{{dataService.server_state}}</span></h3>
</div>
@@ -24,32 +24,32 @@
<!-- Power on displays only when server is shutdown -->
<div class="row column power-option" ng-hide="dataService.server_state == 'On'" ng-class="{disabled: confirm && !power_confirm, transitionAll: confirm && power_confirm}">
- <button id="power__power-on" class="btn-secondary" ng-click="powerOnConfirm()" role="button">Power On</button>
+ <button id="power__power-on" class="btn-secondary" ng-click="powerOnConfirm()" role="button"><img src="img/icon-power.svg" />Power On</button>
<p>Attempts to power on the server</p>
- <confirm title="power on" message="Power on the server" confirm="power_confirm" ng-show="power_confirm" callback="togglePower"></confirm>
+ <confirm title="power on" message="Power on the server" confirm="power_confirm" callback="togglePower"></confirm>
</div>
<!-- Power reboot/shutdown options : when server is off all of these are hidden. When one option is selected, the others are disabled. -->
<div class="row column power-option" ng-hide="dataService.server_state == 'Off'" ng-class="{disabled: confirm && !warmboot_confirm, transitionAll: confirm && warmboot_confirm}">
- <button id="power__warm-boot" class="btn-secondary" ng-click="warmRebootConfirm()" role="button">Warm reboot</button>
+ <button id="power__warm-boot" class="btn-secondary" ng-click="warmRebootConfirm()" role="button"><i>↻</i> Warm reboot</button>
<p>Attempts to perform an orderly shutdown before restarting the server</p>
- <confirm title="Warm Reboot" message="perform an orderly shutdown" confirm="warmboot_confirm" ng-show="warmboot_confirm" callback="warmReboot"></confirm>
+ <confirm title="Warm Reboot" message="perform an orderly shutdown" confirm="warmboot_confirm" callback="warmReboot"></confirm>
</div>
<div class="row column power-option" ng-hide="dataService.server_state == 'Off'" ng-class="{disabled: confirm && !coldboot_confirm, transitionAll: confirm && coldboot_confirm}">
- <button id="power__cold-boot" class="btn-secondary" ng-click="coldRebootConfirm()" role="button">Cold reboot</button>
+ <button id="power__cold-boot" class="btn-secondary" ng-click="coldRebootConfirm()" role="button"><i>↻</i> Cold reboot</button>
<p>Shuts down the server immediately, then restarts it</p>
- <confirm title="Cold Reboot" message="Shutdown server immediately." confirm="coldboot_confirm" ng-show="coldboot_confirm" cancel="coldbootCancel" callback="toggleState"></confirm>
+ <confirm title="Cold Reboot" message="Shutdown server immediately." confirm="coldboot_confirm" cancel="coldbootCancel" callback="toggleState"></confirm>
</div>
<div class="row column power-option" ng-hide="dataService.server_state == 'Off'" ng-class="{disabled: confirm && !orderly_confirm, transitionAll: confirm && orderly_confirm}">
- <button id="power__soft-shutdown" class="btn-secondary" ng-click="orderlyShutdownConfirm()" role="button">Orderly shutdown</button>
+ <button id="power__soft-shutdown" class="btn-secondary" ng-click="orderlyShutdownConfirm()" role="button"><img src="img/icon-power.svg" />Orderly shutdown</button>
<p>Attempts to stop all software on the server before removing power</p>
- <confirm title="Orderly shutdown" message="Attempts to stop all software orderly." confirm="orderly_confirm" ng-show="orderly_confirm" cancel="orderlyShutdownCancel" callback="toggleState"></confirm>
+ <confirm title="Orderly shutdown" message="Attempts to stop all software orderly." confirm="orderly_confirm" cancel="orderlyShutdownCancel" callback="toggleState"></confirm>
</div>
<div class="row column power-option" ng-hide="dataService.server_state == 'Off'" ng-class="{disabled: confirm && !immediately_confirm, transitionAll: confirm && immediately_confirm}">
- <button id="power__hard-shutdown" class="btn-secondary" ng-click="immediateShutdownConfirm()" role="button">Immediate shutdown</button>
+ <button id="power__hard-shutdown" class="btn-secondary" ng-click="immediateShutdownConfirm()" role="button"><img src="img/icon-power.svg" />Immediate shutdown</button>
<p>Removes power from the server without waiting for software to stop</p>
- <confirm title="Immediate shutdown" message="Removes power from the server immediately." confirm="immediately_confirm" ng-show="immediately_confirm" cancel="immediatelyShutdownCancel" callback="toggleState"></confirm>
+ <confirm title="Immediate shutdown" message="Removes power from the server immediately." confirm="immediately_confirm" cancel="immediatelyShutdownCancel" callback="toggleState"></confirm>
</div>
</div>
</div>
\ No newline at end of file
diff --git a/src/scss/base/_buttons.scss b/src/scss/base/_buttons.scss
index 5f239df..7bad975 100644
--- a/src/scss/base/_buttons.scss
+++ b/src/scss/base/_buttons.scss
@@ -3,9 +3,9 @@
font-size: 1em;
text-transform: none;
border-radius: 3px;
- padding: .8rem 3.5rem;
+ padding: .8rem 3.5rem .5rem;
height: auto;
- border: 0px;
+ border: 0;
&:hover {
cursor: pointer;
}
@@ -26,6 +26,7 @@
input[type="submit"] {
color: $primebtn__text;
background: $primebtn__bg;
+ min-height: 50px;
&:hover {
background: lighten($primebtn__bg, 8%);
@include fastTransition-all;
@@ -38,11 +39,24 @@
cursor: default;
}
}
+ i { // button symbol
+ font-style: normal;
+ text-transform: none;
+ font-size: 1.5em;
+ transform: rotate(80deg);
+ display: inline-block;
+ }
+ img{
+ width: 18px;
+ height: 18px;
+ display: inline-block;
+ }
}
.btn-secondary {
color: $secbtn__text;
background: transparent;
border: 2px solid $secbtn__border;
+ min-height: 50px;
&:hover {
background: $lightbg__accent;
cursor: pointer;
@@ -57,4 +71,20 @@
background: $btn__disabled-bg;
}
}
+ i { // button symbol
+ font-style: normal;
+ font-weight: 400;
+ text-transform: none;
+ font-size: 1.5em;
+ transform: rotate(80deg) translate(-2px);
+ display: inline-block;
+ vertical-align: middle;
+ }
+ img{
+ width: 18px;
+ height: 18px;
+ display: inline-block;
+ margin-right: .5em;
+ margin-top: -3px;
+ }
}
diff --git a/src/scss/base/_colors.scss b/src/scss/base/_colors.scss
index e7fdd47..94ef663 100644
--- a/src/scss/base/_colors.scss
+++ b/src/scss/base/_colors.scss
@@ -46,4 +46,5 @@
// Status colors
$error-color: #FF5C49;
$status-ok: #34bc6e;
-$status-ok-light: #bcefce;
\ No newline at end of file
+$status-ok-light: #bcefce;
+$status-warn: #ffb000;
\ No newline at end of file
diff --git a/src/scss/base/_mixins.scss b/src/scss/base/_mixins.scss
index 578a866..71d8f39 100644
--- a/src/scss/base/_mixins.scss
+++ b/src/scss/base/_mixins.scss
@@ -51,3 +51,47 @@
@mixin bgImage__arrowDown-grey {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='32' height='24' viewBox='0 0 32 24'><polygon points='0,0 32,0 16,24' style='fill: #b8c1c1'></polygon></svg>");
}
+
+@mixin indeterminate-bar {
+ background-image: repeating-linear-gradient(-45deg, rgba(251, 234, 174, 0.35), rgba(251, 234, 174, 0.35) 25px, rgba(244, 176, 0, 0.45) 25px, rgba(244, 176, 0, 0.45) 50px);
+ -webkit-animation: progress 2s linear infinite;
+ -moz-animation: progress 2s linear infinite;
+ animation: progress 2s linear infinite;
+ background-size: 130% 100%;
+
+ @-webkit-keyframes progress {
+ 0% {
+ background-position: 0 0;
+ }
+ 100% {
+ background-position: -70px 0;
+ }
+ }
+
+ @-moz-keyframes progress {
+ 0% {
+ background-position: 0 0;
+ }
+ 100% {
+ background-position: -70px 0;
+ }
+ }
+
+ @-ms-keyframes progress {
+ 0% {
+ background-position: 0 0;
+ }
+ 100% {
+ background-position: -70px 0;
+ }
+ }
+
+ @keyframes progress {
+ 0% {
+ background-position: 0 0;
+ }
+ 100% {
+ background-position: -70px 0;
+ }
+ }
+}
diff --git a/src/scss/base/_typography.scss b/src/scss/base/_typography.scss
index 8c70067..461304c 100644
--- a/src/scss/base/_typography.scss
+++ b/src/scss/base/_typography.scss
@@ -23,7 +23,8 @@
}
h1, .h1 {
- font-size: 2.3rem;
+ font-size: 3rem;
+ font-weight: 500;
}
h2, .h2 {
diff --git a/src/scss/components/_power-ops.scss b/src/scss/components/_power-ops.scss
index 8cd7aa8..1a517be 100644
--- a/src/scss/components/_power-ops.scss
+++ b/src/scss/components/_power-ops.scss
@@ -69,6 +69,15 @@
}
}
}
+ &.power__state-indet {
+ color: $darkgrey;
+ @include indeterminate-bar;
+ .power__state {
+ span:before {
+ color: $status-warn;
+ }
+ }
+ }
}
// Power button options
diff --git a/src/scss/elements/_inline-confirm.scss b/src/scss/elements/_inline-confirm.scss
index 863b606..cb4c7e3 100644
--- a/src/scss/elements/_inline-confirm.scss
+++ b/src/scss/elements/_inline-confirm.scss
@@ -3,8 +3,9 @@
.inline__confirm {
position: absolute;
top: 0;
- transform: translateY(-100%);
+ transform: translateY(-103%);
width: 100%;
+ height: 100%;
margin-left: -1.8em;
z-index: 5;
background: $darkbg__primary;
@@ -44,7 +45,7 @@
// Power confirmation message icon
.inline__confirm-message i::before {
content: '\26A0';
- color: $white;
+ color: $status-warn;
display: inline-block;
font-size: 2em;
vertical-align: middle;
diff --git a/src/scss/elements/_toggle-switch.scss b/src/scss/elements/_toggle-switch.scss
index 6ea5054..88b1def 100644
--- a/src/scss/elements/_toggle-switch.scss
+++ b/src/scss/elements/_toggle-switch.scss
@@ -8,7 +8,6 @@
@mixin borderRadius {
-webkit-border-radius: 60px;
-moz-border-radius: 60px;
- -ms-border-radius: 60px;
border-radius: 60px;
}
@@ -19,6 +18,7 @@
width: 1px;
opacity: 0;
}
+
.toggle-switch + label {
display: block;
position: relative;
@@ -30,6 +30,11 @@
user-select: none;
}
+.toggle label {
+ text-indent: -9999px;
+ transform: translateY(-50%); // keeps switch centered
+}
+
input.toggle-switch__round-flat + label {
padding: 2px;
width: 50px;
diff --git a/src/scss/layout/_content.scss b/src/scss/layout/_content.scss
index 3d80960..b06175b 100644
--- a/src/scss/layout/_content.scss
+++ b/src/scss/layout/_content.scss
@@ -3,7 +3,7 @@
.content__container {
margin-left: $nav__toplvlWidth;
padding: 1em .1em;
- @include fastTransition-all;
+ transition: left 1s ease;
@include mediaQuery(x-small){
margin-left: $nav__toplvlWidth + $nav__seclvlWidth;
padding: 1rem 2rem;
diff --git a/src/scss/layout/_navigation.scss b/src/scss/layout/_navigation.scss
index d914b7b..6a2bbfe 100644
--- a/src/scss/layout/_navigation.scss
+++ b/src/scss/layout/_navigation.scss
@@ -93,7 +93,7 @@
margin: 0;
display: none;
list-style-type: none;
- transition: left .5s ease;
+ @include fastTransition-all;
@include mediaQuery(medium) {
left: $nav__toplvlWidth;
&.btn-overview {
diff --git a/src/unit-id.html b/src/unit-id.html
index cb05e26..6e6ba72 100644
--- a/src/unit-id.html
+++ b/src/unit-id.html
@@ -9,19 +9,19 @@
<div class="row column">
<div class="btm-border-grey">
- <div class="switch inline">
- <input id="toggle__switch-round" class="toggle-switch toggle-switch__round-flat" type="checkbox" tabindex="0">
- <label for="toggle__switch-round" tabindex="0"></label>
+ <div class="toggle inline" ng-init="indicatorState = 'off'">
+ <input id="toggle__switch-round"
+ class="toggle-switch toggle-switch__round-flat"
+ type="checkbox"
+ tabindex="0"
+ ng-click="indicatorState = { 'on': 'off', 'off':'on'}[indicatorState]"
+ >
+ <label for="toggle__switch-round" tabindex="0">Unit ID indicator is <span class="uid-switch__status">{{indicatorState}}</span></label>
</div>
<div class="uid-switch__label inline">
- <p>Unit ID indicator is <span class="uid-switch__status">off</span></p>
+ <p>Unit ID indicator is <span class="uid-switch__status">{{indicatorState}}</span></p>
<p>Control unit indicator to identify server unit.</p>
</div>
</div>
</div>
-</div>
-<!-- FOR DEMO ONLY __ DO NOT COPY BELOW -->
-<script>
-
-</script>
-
+</div>
\ No newline at end of file
