You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@brooklyn.apache.org by he...@apache.org on 2022/10/21 13:58:21 UTC
[brooklyn-ui] 12/24: consistent colours and icons for task and br status
This is an automated email from the ASF dual-hosted git repository.
heneveld pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/brooklyn-ui.git
commit 54a57c412d28d4f3f834d568542817a191e73580
Author: Alex Heneveld <al...@cloudsoft.io>
AuthorDate: Thu Oct 6 15:57:48 2022 +0100
consistent colours and icons for task and br status
switches tasks to use check and x
---
ui-modules/shared/style/first.less | 7 +------
ui-modules/utils/br-core/style/variables.less | 13 +++++++++++++
ui-modules/utils/status/status.js | 12 +++++++-----
ui-modules/utils/status/status.less | 9 +++++++++
ui-modules/utils/status/status.template.html | 21 +++++++++++++++++++++
5 files changed, 51 insertions(+), 11 deletions(-)
diff --git a/ui-modules/shared/style/first.less b/ui-modules/shared/style/first.less
index faf640f7..83df06d1 100644
--- a/ui-modules/shared/style/first.less
+++ b/ui-modules/shared/style/first.less
@@ -27,12 +27,7 @@
@import '~brooklyn-ui-utils/br-core/br-core.less';
@import '~font-awesome/less/font-awesome';
-@navbar-divider-color: rgba(60, 85, 136, .5);
-@gray-light-lighter: lighten(@gray-light, 20%);
-@color-succeeded: #363;
-@color-failed: #820;
-@color-cancelled: #660;
-@color-active: #6a2;
+// see variables.less (in our br-core, and stock bootstrap)
.navbar-text {
float: left;
diff --git a/ui-modules/utils/br-core/style/variables.less b/ui-modules/utils/br-core/style/variables.less
index 439ee28b..efa00800 100644
--- a/ui-modules/utils/br-core/style/variables.less
+++ b/ui-modules/utils/br-core/style/variables.less
@@ -20,6 +20,16 @@
@brand-primary: #3C5588;
@brand-accent: #bf3727;
+@color-succeeded: #363;
+@color-failed: #820;
+@color-cancelled: #660;
+@color-active: #6a2;
+
+// brand-success and others usually used for BG, so make lighter
+@color-succeeded-bg: #484;
+@color-failed-bg: #A41;
+@brand-success: @color-succeeded-bg;
+@brand-danger: @color-failed-bg;
// bootstrap colours at
// https://github.com/twbs/bootstrap-sass/blob/master/assets/stylesheets/bootstrap/_variables.scss
@@ -27,10 +37,13 @@
@gray-light: #818899; // override bootstrap default of #777
@gray-lighter: #E1E5E7; // override bootstrap default of #eee
@gray-lightest: #f8f8f9;
+
+@gray-light-lighter: lighten(@gray-light, 20%);
@label-gray: darken(@gray-light, 10%); // between @gray and @gray-light
@body-bg: hsl(223,30%,97%); // override bootstrap default, #333, same as @gray-dark, used for the button bar, body default bg colour from bootstrap scaffolding
+@navbar-divider-color: rgba(60, 85, 136, .5);
@card-border-color: mix(black, @body-bg, 7%);
/* Colors in pattern lab */
diff --git a/ui-modules/utils/status/status.js b/ui-modules/utils/status/status.js
index 17a21388..cf26b45a 100644
--- a/ui-modules/utils/status/status.js
+++ b/ui-modules/utils/status/status.js
@@ -27,7 +27,9 @@ const ICONS = {
ON_FIRE: 'ON_FIRE',
ERROR: 'ERROR',
UNKNOWN: 'UNKNOWN',
- NO_STATE: 'NO_STATE'
+ NO_STATE: 'NO_STATE',
+ COMPLETED: 'COMPLETED',
+ FAILED: 'FAILED',
};
const STATUS = {
@@ -43,10 +45,10 @@ const STATUS = {
// for tasks
'In progress': {name: 'In progress', icon: ICONS.STARTING},
- 'Completed': {name: 'Completed', icon: ICONS.RUNNING},
- 'Failed': {name: 'Failed', icon: ICONS.ERROR},
- 'Unavailable': {name: 'Incomplete', icon: ICONS.ERROR},
- 'Cancelled': {name: 'Cancelled', icon: ICONS.ERROR},
+ 'Completed': {name: 'Completed', icon: ICONS.COMPLETED},
+ 'Failed': {name: 'Failed', icon: ICONS.FAILED},
+ 'Unavailable': {name: 'Incomplete', icon: ICONS.FAILED},
+ 'Cancelled': {name: 'Cancelled', icon: ICONS.FAILED},
};
const MODULE_NAME = 'brooklyn.components.status';
diff --git a/ui-modules/utils/status/status.less b/ui-modules/utils/status/status.less
index 979b4613..fdbf6ec9 100644
--- a/ui-modules/utils/status/status.less
+++ b/ui-modules/utils/status/status.less
@@ -25,6 +25,12 @@
@import "states/stopping.less";
@import "states/unknown.less";
+brooklyn-status-icon, brooklyn-status-text {
+ .status-failed { color: @brand-danger; }
+ .status-completed { color: @brand-success; }
+}
+
+
@circleBackgroundColor: rgba(0, 0, 0, 0.1);
@status-stroke-width: 7;
@@ -41,6 +47,9 @@ brooklyn-status-icon {
width: 100%;
height: 100%;
}
+ .fa {
+ font-size: 6vh;
+ }
}
diff --git a/ui-modules/utils/status/status.template.html b/ui-modules/utils/status/status.template.html
index e2b89c6b..6204d204 100644
--- a/ui-modules/utils/status/status.template.html
+++ b/ui-modules/utils/status/status.template.html
@@ -60,6 +60,27 @@
</g>
</svg>
</div>
+
+ <!-- for tasks -->
+ <div ng-switch-when="COMPLETED">
+ <svg viewBox="20 20 60 60">
+ <foreignObject x="20" y="15" width="100" height="100">
+ <body>
+ <i class="fa fa-check-circle"></i>
+ </body>
+ </foreignObject>
+ </svg>
+ </div>
+ <div ng-switch-when="FAILED">
+ <svg viewBox="20 20 60 60">
+ <foreignObject x="20" y="15" width="100" height="100">
+ <body>
+ <i class="fa fa-times-circle"></i>
+ </body>
+ </foreignObject>
+ </svg>
+ </div>
+
<div ng-switch-when="UNKNOWN">
<svg id="168033fd-2902-4e00-8797-d9d22be6bcd3" data-name="icon-unknown"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">