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/11/10 17:35:30 UTC
[brooklyn-ui] 02/03: better colours in composer, and options/position of snackbar
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 51c06be1e3b88c42fd243f88bb7545d3a15c0133
Author: Alex Heneveld <al...@cloudsoft.io>
AuthorDate: Thu Nov 10 16:29:37 2022 +0000
better colours in composer, and options/position of snackbar
---
ui-modules/blueprint-composer/app/index.js | 2 +-
.../app/views/main/graphical/graphical.state.less | 1 +
.../app/views/main/main.controller.js | 11 +++++++----
.../blueprint-composer/app/views/main/main.less | 10 ++++++++--
ui-modules/utils/br-core/snackbar/snackbar.html | 6 ++++--
ui-modules/utils/br-core/snackbar/snackbar.js | 19 ++++++++++++++-----
ui-modules/utils/br-core/style/buttons.less | 9 +++++++--
ui-modules/utils/br-core/style/mixins.less | 2 ++
ui-modules/utils/br-core/style/snackbars.less | 7 +++++--
9 files changed, 49 insertions(+), 18 deletions(-)
diff --git a/ui-modules/blueprint-composer/app/index.js b/ui-modules/blueprint-composer/app/index.js
index 92b92486..2b763d1b 100755
--- a/ui-modules/blueprint-composer/app/index.js
+++ b/ui-modules/blueprint-composer/app/index.js
@@ -115,7 +115,7 @@ function applicationConfig($urlRouterProvider, $stateProvider, $logProvider, $co
}
function actionConfig(actionServiceProvider) {
- actionServiceProvider.addAction("deploy", {html: '<button class="btn btn-outline btn-success" ng-click="vm.deployApplication()" ng-disabled="vm.deploying">Deploy</button>'});
+ actionServiceProvider.addAction("deploy", {html: '<button class="btn btn-outline btn-primary-light" ng-click="vm.deployApplication()" ng-disabled="vm.deploying">Deploy</button>'});
actionServiceProvider.addAction("add", {html: '<catalog-saver config="vm.saveToCatalogConfig"></catalog-saver>'});
}
diff --git a/ui-modules/blueprint-composer/app/views/main/graphical/graphical.state.less b/ui-modules/blueprint-composer/app/views/main/graphical/graphical.state.less
index 0ae8097b..8e957352 100644
--- a/ui-modules/blueprint-composer/app/views/main/graphical/graphical.state.less
+++ b/ui-modules/blueprint-composer/app/views/main/graphical/graphical.state.less
@@ -82,6 +82,7 @@
.errors-square, .warning-square {
padding-left: 0;
padding-right: 0;
+ padding-bottom: 14px !important;
text-align: center;
&.errorsActive {
background: @gray-lighter;
diff --git a/ui-modules/blueprint-composer/app/views/main/main.controller.js b/ui-modules/blueprint-composer/app/views/main/main.controller.js
index e2da370d..5fb43772 100644
--- a/ui-modules/blueprint-composer/app/views/main/main.controller.js
+++ b/ui-modules/blueprint-composer/app/views/main/main.controller.js
@@ -249,22 +249,25 @@ export function MainController($scope, $element, $log, $state, $stateParams, brB
vm.displayIssues = () => {
let isOnlyWarnings = blueprintService.getIssues().length === blueprintService.getIssues().filter(issue => issue.level === ISSUE_LEVEL.WARN).length;
let message = '';
- let options = {};
+ let action = {};
+ let options = { timeout: 15*1000, class: 'snackbar-top-right' };
if (isOnlyWarnings) {
- message = 'Blueprint has some warnings, deployment might fail. Do you wish to proceed anyway?';
- options = {
+ message = 'Blueprint has warnings which may cause the deployment to fail. Do you wish to proceed anyway?';
+ action = {
label: 'Deploy',
callback: deployApplication
}
+ options.closeText = 'Cancel';
} else {
message = 'Blueprint is not valid: there ' + (
blueprintService.getIssues().filter(issue => issue.level === ISSUE_LEVEL.ERROR).length > 1 ?
'are ' + blueprintService.getIssues().filter(issue => issue.level === ISSUE_LEVEL.ERROR).length + ' problems' :
'is 1 problem'
) + ' to fix';
+ options.closeText = 'OK';
}
- brSnackbar.create(message, options);
+ brSnackbar.create(message, action, options);
let firstEntityWithIssue = blueprintService.getIssues().filter(issue => {
if (isOnlyWarnings) {
diff --git a/ui-modules/blueprint-composer/app/views/main/main.less b/ui-modules/blueprint-composer/app/views/main/main.less
index 6d5818f5..e4bbc41e 100644
--- a/ui-modules/blueprint-composer/app/views/main/main.less
+++ b/ui-modules/blueprint-composer/app/views/main/main.less
@@ -38,11 +38,11 @@
.navbar-nav-mode > .active > a,
.navbar-nav-mode > .active > a:hover,
.navbar-nav-mode > .active > a:focus {
- border-bottom: 5px solid @brand-primary;
+ border-bottom: 5px solid @primary-light;
background-color: #666666;
& > i.fa {
- color: @brand-primary;
+ color: @primary-light;
}
}
@@ -119,3 +119,9 @@
.hand {
cursor: pointer;
}
+
+.snackbar-top-right {
+ bottom: auto;
+ left: auto;
+ top: 115px;
+}
\ No newline at end of file
diff --git a/ui-modules/utils/br-core/snackbar/snackbar.html b/ui-modules/utils/br-core/snackbar/snackbar.html
index 35c31dba..db454198 100644
--- a/ui-modules/utils/br-core/snackbar/snackbar.html
+++ b/ui-modules/utils/br-core/snackbar/snackbar.html
@@ -16,7 +16,9 @@
specific language governing permissions and limitations
under the License.
-->
-<div class="snackbar">
+<div class="snackbar {{extraClasses}}">
<div class="snackbar-message">{{message}}</div>
- <div class="snackbar-action" ng-if="hasAction()" ng-click="performAction()">{{action.label}}</div>
+<!-- <div class="snackbar-action" ng-if="hasAction()" ng-click="performAction()">{{action.label}}</div>-->
+ <button class="btn btn-warning btn-xs" ng-if="hasAction()" ng-click="performAction()">{{action.label}}</button>
+ <button class="btn btn-info btn-xs" ng-if="closeText" ng-click="close()">{{ closeText }}</button>
</div>
\ No newline at end of file
diff --git a/ui-modules/utils/br-core/snackbar/snackbar.js b/ui-modules/utils/br-core/snackbar/snackbar.js
index a38c9171..41f7d9da 100644
--- a/ui-modules/utils/br-core/snackbar/snackbar.js
+++ b/ui-modules/utils/br-core/snackbar/snackbar.js
@@ -130,7 +130,7 @@ export function brSnackbar($rootScope, $document, $compile, $templateCache, $ani
// Remove the snackbar after the timeout
snackbar.timeout = $timeout(function() {
removeSnackbar(snackbar);
- }, 5000);
+ }, snackbar.options.timeout || 5000);
}
function removeSnackbar(snackbar) {
@@ -157,27 +157,36 @@ export function brSnackbar($rootScope, $document, $compile, $templateCache, $ani
* the current `$element` object of the snackbar
* @returns {promise} A promise that will be resolved once the snackbar is dismissed
*/
- create: function(message, action) {
+ create: function(message, action, options) {
+ if (!options) options = {};
+
var scope = $rootScope.$new(true);
scope.message = message;
scope.action = angular.extend({}, action);
scope.hasAction = function() {
return !angular.isUndefined(scope.action.label) && !angular.isUndefined(scope.action.callback);
};
+ scope.extraClasses = options.class;
scope.performAction = function() {
var snackbar = $rootScope.snackbars[0];
scope.action.callback(snackbar.elm);
+ scope.close();
+ };
+ scope.closeText = options.closeText
+ scope.close = function() {
+ var snackbar = $rootScope.snackbars[0];
$timeout.cancel(snackbar.timeout);
removeSnackbar(snackbar);
- };
+ }
var template = $templateCache.get(TEMPLATE_URL);
var elm = angular.element($compile(template)(scope));
var promise = $q.defer();
$rootScope.snackbars.push({
- elm: elm,
- promise: promise
+ elm,
+ promise,
+ options,
});
return promise.promise;
diff --git a/ui-modules/utils/br-core/style/buttons.less b/ui-modules/utils/br-core/style/buttons.less
index baefe441..213f8470 100644
--- a/ui-modules/utils/br-core/style/buttons.less
+++ b/ui-modules/utils/br-core/style/buttons.less
@@ -18,8 +18,9 @@
*/
@btn-primary-border: @btn-primary-bg;
-
-// Danger and error appear as red
+.btn-primary-light {
+ .button-variant(@btn-accent-color; @primary-light; @primary-light);
+}
.btn-accent {
.button-variant(@btn-accent-color; @btn-accent-bg; @btn-accent-border);
}
@@ -32,6 +33,10 @@
background-color: transparent;
color: @brand-primary;
}
+ &.btn-primary-light:not(:hover) {
+ background-color: transparent;
+ color: @primary-light;
+ }
&.btn-accent:not(:hover) {
background-color: transparent;
color: @brand-accent;
diff --git a/ui-modules/utils/br-core/style/mixins.less b/ui-modules/utils/br-core/style/mixins.less
index b33d5749..2cb89f72 100644
--- a/ui-modules/utils/br-core/style/mixins.less
+++ b/ui-modules/utils/br-core/style/mixins.less
@@ -50,6 +50,8 @@
@accent-900: mix(black, @accent, 40%);
}
+@primary-light: @primary-200;
+
.monospace() {
font-family: Courier, monospace;
font-size: 95%;
diff --git a/ui-modules/utils/br-core/style/snackbars.less b/ui-modules/utils/br-core/style/snackbars.less
index ed8f36cb..6c7d7ef7 100644
--- a/ui-modules/utils/br-core/style/snackbars.less
+++ b/ui-modules/utils/br-core/style/snackbars.less
@@ -20,7 +20,7 @@
overflow: hidden;
background-color: #323232;
padding: 14px 24px 14px 24px;
- color: #fff;
+ color: @gray-lighter;
min-width: 288px;
max-width: 568px;
position: fixed;
@@ -29,22 +29,25 @@
right: 15px;
display: flex;
flex-wrap: nowrap;
+ gap: 1ex;
align-items: center;
transition: all linear 0.3s;
z-index: 1001;
+ border-radius: 6px;
.snackbar-message {
overflow: hidden;
line-height: 1.2em;
min-height: 1.2em;
max-height: 2.4em;
+ margin-right: 1em;
flex: 1;
}
.snackbar-action {
text-transform: uppercase;
font-weight: bold;
margin-left: 48px;
- color: @accent-500;
+ color: @gray-lighter;
cursor: pointer;
cursor: hand;
}