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 dad3c1ccd1b186cd43fa294e9548cec563cb37ad Author: Alex Heneveld <[email protected]> AuthorDate: Thu Jul 27 15:34:31 2023 +0100 add ability to store a description for ui modules and show it on the home page --- .../ui/modularity/module/api/UiModule.java | 5 +++ .../module/api/internal/UiModuleImpl.java | 18 ++++++++++ ui-modules/home/app/views/main/main.controller.js | 12 ++++++- ui-modules/home/app/views/main/main.less | 38 ++++++++++++++++++++++ ui-modules/home/app/views/main/main.template.html | 19 +++++++++-- 5 files changed, 89 insertions(+), 3 deletions(-) diff --git a/modularity-server/module-api/src/main/java/org/apache/brooklyn/ui/modularity/module/api/UiModule.java b/modularity-server/module-api/src/main/java/org/apache/brooklyn/ui/modularity/module/api/UiModule.java index 0c1d326a..72ae70e6 100644 --- a/modularity-server/module-api/src/main/java/org/apache/brooklyn/ui/modularity/module/api/UiModule.java +++ b/modularity-server/module-api/src/main/java/org/apache/brooklyn/ui/modularity/module/api/UiModule.java @@ -42,6 +42,11 @@ public interface UiModule { */ String getSlug(); + /** + * @return A description of the module, in HTML format + */ + String getDescription(); + /** * @return The icon to be used for the module */ diff --git a/modularity-server/module-api/src/main/java/org/apache/brooklyn/ui/modularity/module/api/internal/UiModuleImpl.java b/modularity-server/module-api/src/main/java/org/apache/brooklyn/ui/modularity/module/api/internal/UiModuleImpl.java index fad974a4..f06a7bc3 100644 --- a/modularity-server/module-api/src/main/java/org/apache/brooklyn/ui/modularity/module/api/internal/UiModuleImpl.java +++ b/modularity-server/module-api/src/main/java/org/apache/brooklyn/ui/modularity/module/api/internal/UiModuleImpl.java @@ -34,6 +34,7 @@ public class UiModuleImpl implements UiModule { private String id; private String name; private String slug; + private String description; private String icon; private Set<String> types = new LinkedHashSet<>(); private Set<String> supersedesBundles = new LinkedHashSet<>(); @@ -47,6 +48,7 @@ public class UiModuleImpl implements UiModule { result.setName(src.getName()); result.setOrder(src.getOrder()); result.setSlug(src.getSlug()); + result.setDescription(src.getDescription()); result.setIcon(src.getIcon()); if (src.getTypes()!=null) result.types.addAll(src.getTypes()); if (src.getSupersedesBundles()!=null) result.supersedesBundles.addAll(src.getSupersedesBundles()); @@ -62,6 +64,7 @@ public class UiModuleImpl implements UiModule { result.setName(Optional.fromNullable((String) incomingMap.get("name")).or(result.getId())); result.setOrder(Optional.fromNullable((Integer) incomingMap.get("order")).or(UiModule.DEFAULT_ORDER)); result.setSlug((String) incomingMap.get("slug")); + result.setDescription((String) incomingMap.get("description")); result.setIcon(Optional.fromNullable((String) incomingMap.get("icon")).or(DEFAULT_ICON)); final Object types = incomingMap.get("types"); if (types != null && types instanceof List) { @@ -108,6 +111,11 @@ public class UiModuleImpl implements UiModule { public String getSlug() { return slug; } + + @Override + public String getDescription() { + return description; + } @Override public Set<String> getTypes() { @@ -153,10 +161,15 @@ public class UiModuleImpl implements UiModule { public void setOrder(final int order){ this.order = order; } + public void setSlug(final String slug) { this.slug = slug; } + public void setDescription(final String description) { + this.description = description; + } + public void setTypes(final Set<String> types) { this.types = types; } @@ -197,6 +210,11 @@ public class UiModuleImpl implements UiModule { return this; } + public UiModuleImpl description(final String description) { + this.description = description; + return this; + } + public UiModuleImpl types(final Set<String> types) { this.types = types; return this; diff --git a/ui-modules/home/app/views/main/main.controller.js b/ui-modules/home/app/views/main/main.controller.js index 86586542..8f11db9f 100644 --- a/ui-modules/home/app/views/main/main.controller.js +++ b/ui-modules/home/app/views/main/main.controller.js @@ -22,10 +22,11 @@ import brooklynApi from 'brooklyn-ui-utils/brooklyn.api/brooklyn.api'; import uiRouter from 'angular-ui-router'; import {HIDE_INTERSTITIAL_SPINNER_EVENT} from 'brooklyn-ui-utils/interstitial-spinner/interstitial-spinner'; import template from './main.template.html'; +import angularSanitize from 'angular-sanitize'; const MODULE_NAME = 'states.main'; -angular.module(MODULE_NAME, [brooklynUiModulesApi, uiRouter, brooklynApi]) +angular.module(MODULE_NAME, [brooklynUiModulesApi, uiRouter, brooklynApi, angularSanitize]) .config(['$stateProvider', mainStateConfig]); export default MODULE_NAME; @@ -84,4 +85,13 @@ export function mainStateController($scope, $state, uiModules, catalogApps, brUt page: 1, itemsPerPage: 6 }; + + this.onModuleHoverEnter = (x) => { + console.log(x); + $scope.hoveredModule = x; + }; + this.onModuleHoverLeave = (x) => { + $scope.hoveredModule = null; + }; + } diff --git a/ui-modules/home/app/views/main/main.less b/ui-modules/home/app/views/main/main.less index c00012b3..7da527bf 100644 --- a/ui-modules/home/app/views/main/main.less +++ b/ui-modules/home/app/views/main/main.less @@ -19,6 +19,7 @@ @brooklyn-home-button-color: @brand-primary; @brooklyn-home-button-color-hover: @primary-700; +@brooklyn-home-detail-color: @primary-800; .module-icon { font-size: 30px; @@ -244,3 +245,40 @@ } } } + +.brooklyn-module-detail { + display: flex; + color: @brooklyn-home-detail-color; + flex-direction: column; + align-items: center; + margin-top: 40px; + margin-bottom: 8px; + min-height: 160px; + > .main { + //background: white; + padding: 8px; + width: 66%; + display: flex; + flex-direction: row; + align-items: center; + > .left { + flex: 0 0 auto; + width: 180px; + text-align: center; + align-self: flex-start; + } + > .right { + flex: 1 1 auto; + text-align: left; + .title { + //font-weight: 700; + display: none; + font-size: 200%; + margin-bottom: 8px; + } + .body { + font-size: 140%; + } + } + } +} \ No newline at end of file diff --git a/ui-modules/home/app/views/main/main.template.html b/ui-modules/home/app/views/main/main.template.html index 1491ca20..c413ae67 100644 --- a/ui-modules/home/app/views/main/main.template.html +++ b/ui-modules/home/app/views/main/main.template.html @@ -16,7 +16,7 @@ specific language governing permissions and limitations under the License. --> -<div class="container"> +<div class="container" xmlns="http://www.w3.org/1999/html";> <br-card class="quick-launch-group"> <br-card-content> <br-card-content-headline> @@ -61,7 +61,7 @@ <div class="row brooklyn-modules"> - <div class="col-md-4" ng-repeat="uiModule in vm.uiModules"> + <div class="col-md-4" ng-repeat="uiModule in vm.uiModules" ng-mouseenter="vm.onModuleHoverEnter(uiModule)" ng-mouseleave="vm.onModuleHoverLeave(uiModule)"> <a ng-href="{{uiModule.path}}/"> <br-card center="true"> <br-card-content> @@ -76,6 +76,21 @@ </a> </div> </div> + + <div class="row brooklyn-module-detail"> + <div class="main" ng-if="hoveredModule && hoveredModule.description"> + <div class="left"> + <i class="module-icon fa" ng-class="hoveredModule.icon"></i> + </div> + <div class="right"> + <div class="title">{{hoveredModule.name}}</div> + <div class="body"> + <span ng-bind-html="hoveredModule.description"></span> + </div> + </div> + </div> + </div> + </div> <ui-view />
