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