[brooklyn-ui] branch master updated: preserve white bg and simplify positioning for icon in app inspector tree

[he...@apache.org]

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


The following commit(s) were added to refs/heads/master by this push:
     new 74a71708 preserve white bg and simplify positioning for icon in app inspector tree
74a71708 is described below

commit 74a71708ac4b2a2dede9cbd3d6c0a185c5ef519b
Author: Alex Heneveld <al...@cloudsoft.io>
AuthorDate: Tue Nov 29 15:59:36 2022 +0000

    preserve white bg and simplify positioning for icon in app inspector tree
---
 .../app/components/entity-tree/entity-node.html    |  2 +-
 .../app/components/entity-tree/entity-node.less    | 23 ++++++++++++++++------
 2 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/ui-modules/app-inspector/app/components/entity-tree/entity-node.html b/ui-modules/app-inspector/app/components/entity-tree/entity-node.html
index eb36243f..fe0e4dfe 100644
--- a/ui-modules/app-inspector/app/components/entity-tree/entity-node.html
+++ b/ui-modules/app-inspector/app/components/entity-tree/entity-node.html
@@ -22,7 +22,7 @@
             <brooklyn-status-icon value="{{entity.serviceState}}" ng-if="entity.serviceState || entity.applicationId"></brooklyn-status-icon>
             <i class="fa fa-2x fa-external-link" ng-if="!entity.serviceState && !entity.applicationId"></i>
             <span>{{entity.name}}</span>
-            <span class="node-icon"><img ng-src="{{ iconUrl }}"/></span>
+            <div class="node-icon" ng-if="iconUrl"><img ng-src="{{ iconUrl }}"/></div>
         </a>
         <div class="entity-node-toggle-wrapper">
           <div class="entity-node-toggle"
diff --git a/ui-modules/app-inspector/app/components/entity-tree/entity-node.less b/ui-modules/app-inspector/app/components/entity-tree/entity-node.less
index 6a2a3e8f..2645dd5d 100644
--- a/ui-modules/app-inspector/app/components/entity-tree/entity-node.less
+++ b/ui-modules/app-inspector/app/components/entity-tree/entity-node.less
@@ -42,6 +42,7 @@
 
   .entity-node-item {
     display: flex;
+    align-items: center;
     background-color: #fff;
     border: 1px solid @well-border;
     border-radius: @border-radius-base;
@@ -63,12 +64,18 @@
     &.active {
       color: #fff;
       background-color: @brand-primary;
+      .node-icon {
+        img {
+          borde-radius: 3px; //need to trim edge so that blurred white forced bg hides it
+        }
+      }
     }
 
     .entity-node-link {
       flex-grow: 1;
       padding: 10px;
       display: flex;
+      align-items: center;
       min-width: 0;
 
       brooklyn-status-icon {
@@ -96,17 +103,21 @@
     }
   }
   .node-icon {
+    margin-left: 10px;
     flex-grow: 0 !important;
-    max-height: 20px; //let it extend above and below span's boundaries
+    display: flex;
+    align-items: center;
+    background-color: #fff;
+    box-shadow: 0 0 2px 2px #fff;
+    border-radius: 3px;
+
+    max-height: 36px;
+    max-width: 36px;
+
     overflow: visible !important;
-    margin-top: -8px;
-    margin-left: 0 !important;
     img {
       .make-icon(36px);
     }
-    img[src] {
-      margin-left: 10px;
-    }
   }
 
   // remove spacing between child entities (but preserve it between top-level applications)