define global message classes
Migrate power-ops to utilize.
Change-Id: Ie3946a6c957c78ef1b07b0c815448ed8d7e826b5
Signed-off-by: Michael Davis <michael.s.davis@ibm.com>
diff --git a/src/confirm.html b/src/confirm.html
index 24674d3..59ca2ad 100644
--- a/src/confirm.html
+++ b/src/confirm.html
@@ -1,10 +1,10 @@
<!-- Confirmation message - to accommodate the message for smaller screens we need to grab the height of the message and apply that height to "power-option" row -->
-<div class="power__confirm" ng-class="{active: confirm}">
- <div class="power__confirm-message">
+<div class="inline__confirm" ng-class="{active: confirm}">
+ <div class="inline__confirm-message">
<p class="h3"><i></i>Are you sure you want to <strong>{{title}}?</strong></p>
<p>{{message}}</p>
</div>
- <div class="power__confirm-buttons">
+ <div class="inline__confirm-buttons">
<button class="btn-primary" ng-click="accept()">Yes</button>
<button class="btn-primary" ng-click="cancel()">No</button>
</div>
diff --git a/src/header.html b/src/header.html
index 2a67741..94beff5 100644
--- a/src/header.html
+++ b/src/header.html
@@ -10,8 +10,8 @@
<div class="logo__wrapper"><img src="img/logo.svg" id="header__logo" alt="company logo"/></div>
<button id="header__server-name">{{dataService.server_id}}</button>
<div class="header__functions">
- <a href="" id="header__server-health">Server health<span class="status-light__error">{{dataService.server_health}}</span></a>
- <a href="power-operations.html" class="header__server-power" role="button">Server power<span ng-class="{'status-light__error': server_status == -1, 'status-light__disabled': server_status == 0, 'status-light__good': server_status == 1}">{{dataService.server_state}}</span></a>
+ <a href="" id="header__server-health">Server health<span class="status-light__good">{{dataService.server_health}}</span></a>
+ <a href="#/power-operations" class="header__server-power" role="button">Server power<span ng-class="{'status-light__error': server_status == -1, 'status-light__disabled': server_status == 0, 'status-light__good': server_status == 1}">{{dataService.server_state}}</span></a>
<p class="header__refresh">Page last refreshed <span>{{dataService.last_updated |date:'h:mm:ss MMM dd yyyy'}}</span></p>
<button class="header__page-refresh" ng-click="refresh()"><img src="img/icon-refresh-white.svg" alt="refresh page" role="button"/></button>
</div>
diff --git a/src/js/directives.js b/src/js/directives.js
index f8aae3d..a6cb77a 100644
--- a/src/js/directives.js
+++ b/src/js/directives.js
@@ -84,7 +84,7 @@
scope.$watch('confirm', function(){
if(scope.confirm){
$timeout(function(){
- angular.element(e[0].parentNode).css({'min-height': e[0].querySelector('.power__confirm').offsetHeight + 'px'});
+ angular.element(e[0].parentNode).css({'min-height': e[0].querySelector('.inline__confirm').offsetHeight + 'px'});
}, 0);
}else{
angular.element(e[0].parentNode).css({'min-height': 0+ 'px'});
diff --git a/src/power-operations.html b/src/power-operations.html
index f2db772..d70b961 100644
--- a/src/power-operations.html
+++ b/src/power-operations.html
@@ -27,7 +27,7 @@
<button id="power__power-on" class="btn-secondary" ng-click="powerOnConfirm()" role="button">Power On</button>
<p>Attempts to power on the server</p>
- <confirm title="power off" message="Power off the server" confirm="power_confirm" ng-show="power_confirm" callback="togglePower"></confirm>
+ <confirm title="power on" message="Power on the server" confirm="power_confirm" ng-show="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. -->
diff --git a/src/scss/components/_power-ops.scss b/src/scss/components/_power-ops.scss
index d41ebee..8cd7aa8 100644
--- a/src/scss/components/_power-ops.scss
+++ b/src/scss/components/_power-ops.scss
@@ -41,12 +41,13 @@
// Power bar indicator
.power__indicator-bar {
font-weight: bold;
- padding: 1.4em 3em;
+ padding: 1.4em 3em 0;
margin-bottom: 3.750em;
background-size: 200% 100%;
background-image: linear-gradient(to right, $status-ok-light 50%, $lightgrey 50%);
background-position: 100%;
transition: background-position 2s ease;
+ overflow: hidden;
p {
padding: 0;
margin: 0;
@@ -73,67 +74,20 @@
// Power button options
.power-option {
border-top: 1px solid $lightgrey;
- padding: 1.8em 0 1em 1.8em;
+ padding: 1.8em 0 1em 0;
position: relative;
overflow: hidden;
min-height: 1px;
+ min-width: 100%;
.btn-secondary {
margin-bottom: .5em;
- }
- // Confirmation message for power option
- .power__confirm {
- position: absolute;
- top: 0;
- transform: translateY(-100%);
- width: 100%;
- margin-left: -1.8em;
- z-index: 5;
- background: $darkbg__primary;
- color: $white;
- padding: 2em 2em 1.55em 2em;
- &.active {
- transform: translateY(0);
- @include fastTransition-all;
+ @include mediaQuery(small) {
+ min-width: 300px;
}
}
- &.disabled {
- @include fastTransition-all;
- p {opacity: .4;}
+ @include mediaQuery(small){
+ padding: 1.8em 0 1em 1.8em;
}
}
-}
-// Power confirmation buttons
-.power__confirm-buttons {
- .btn-primary {
- background: transparent;
- border: 2px solid $white;
- padding: 1em 2.2em;
- margin: 0 10px;
- border-radius: 4px;
- &:focus,
- &:hover {
- background: $primebtn__bg;
- border: 2px solid $primebtn__bg;
- }
- }
- @include mediaQuery(large) {
- float: right;
- }
-}
-
-// Power confirmation message
-.power__confirm-message {
- display: inline-block;
-}
-
-// Power confirmation message icon
-.power__confirm-message i::before {
- content: '\26A0';
- color: $white;
- display: inline-block;
- font-size: 2em;
- vertical-align: middle;
- font-style: normal;
- margin-right: 15px;
-}
+} //end power-operations
\ No newline at end of file
diff --git a/src/scss/elements/_alerts.scss b/src/scss/elements/_alerts.scss
index a6d66b0..76624b1 100644
--- a/src/scss/elements/_alerts.scss
+++ b/src/scss/elements/_alerts.scss
@@ -43,4 +43,25 @@
}
.alert__message {
background: $alert__message;
-}
\ No newline at end of file
+}
+
+// Power confirmation buttons
+.power__confirm-buttons {
+ .btn-primary {
+ background: transparent;
+ border: 2px solid $white;
+ padding: 1em 2.2em;
+ margin: 0 10px;
+ border-radius: 4px;
+ &:focus,
+ &:hover {
+ background: $primebtn__bg;
+ border: 2px solid $primebtn__bg;
+ }
+ }
+ @include mediaQuery(large) {
+ float: right;
+ }
+}
+
+
diff --git a/src/scss/elements/_all.scss b/src/scss/elements/_all.scss
index 2913202..7d04da2 100644
--- a/src/scss/elements/_all.scss
+++ b/src/scss/elements/_all.scss
@@ -1,4 +1,5 @@
@import "toggle-switch";
@import "status";
-@import "alerts";
\ No newline at end of file
+@import "alerts";
+@import "inline-confirm";
\ No newline at end of file
diff --git a/src/scss/elements/_inline-confirm.scss b/src/scss/elements/_inline-confirm.scss
new file mode 100644
index 0000000..863b606
--- /dev/null
+++ b/src/scss/elements/_inline-confirm.scss
@@ -0,0 +1,53 @@
+
+// inline confirmation message
+.inline__confirm {
+ position: absolute;
+ top: 0;
+ transform: translateY(-100%);
+ width: 100%;
+ margin-left: -1.8em;
+ z-index: 5;
+ background: $darkbg__primary;
+ color: $white;
+ padding: 2em 2em 1.55em 2em;
+ overflow: hidden;
+ &.active {
+ transform: translateY(0);
+ @include fastTransition-all;
+ }
+}
+
+// Power confirmation buttons
+.inline__confirm-buttons {
+ .btn-primary {
+ background: transparent;
+ border: 2px solid $white;
+ padding: 1em 2.2em;
+ margin: 0 10px;
+ border-radius: 4px;
+ &:focus,
+ &:hover {
+ background: $primebtn__bg;
+ border: 2px solid $primebtn__bg;
+ }
+ }
+ @include mediaQuery(large) {
+ float: right;
+ }
+}
+
+// confirmation message
+.inline__confirm-message {
+ display: inline-block;
+}
+
+// Power confirmation message icon
+.inline__confirm-message i::before {
+ content: '\26A0';
+ color: $white;
+ display: inline-block;
+ font-size: 2em;
+ vertical-align: middle;
+ font-style: normal;
+ margin-right: 15px;
+}
\ No newline at end of file