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 <[email protected]> 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">
