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 73eb80336fd2f932e0dc1fe796e6ea6c1237aa6a Author: Alex Heneveld <[email protected]> AuthorDate: Thu Oct 6 15:20:54 2022 +0100 align effectors in table better --- .../entity-effector/entity-effector.html | 18 ++++---- .../entity-effector/entity-effector.less | 50 +++++++++++----------- 2 files changed, 35 insertions(+), 33 deletions(-) diff --git a/ui-modules/app-inspector/app/components/entity-effector/entity-effector.html b/ui-modules/app-inspector/app/components/entity-effector/entity-effector.html index 1c92f102..f29a7843 100644 --- a/ui-modules/app-inspector/app/components/entity-effector/entity-effector.html +++ b/ui-modules/app-inspector/app/components/entity-effector/entity-effector.html @@ -28,17 +28,23 @@ </br-button> </div> <div class="row-contents"> + <div class="effector-name"> + {{effector.name}} + </div> + <div class="effector-description" ng-if="effector.description">{{effector.description}}</div> + </div> + <div class="row-tail"> <a ui-sref="main.inspect.activities({applicationId: applicationId, entityId: entityId, filter: 'EFFECTOR', search: effector.name})" - ng-if="activities && activitiesSummary()" title="{{activitiesSummary()}}"><span class="pull-right effector-pills"> + ng-if="activities && activitiesSummary()" title="{{activitiesSummary()}}"><span class="effector-pills"> <div class="effector-pill effector-active" ng-if="activities.active"> <i class="fa fa-play-circle"></i> -<!-- <i class="fa fa-dot-circle-o"></i></div>--> + <!-- <i class="fa fa-dot-circle-o"></i></div>--> {{activities.active}} </div> <div class="effector-pill effector-cancelled" ng-if="activities.cancelled"> <!-- <i class="fa fa-pause-circle"></i></div>--> -<!-- <i class="fa fa-exclamation-circle"></i></div>--> -<!-- <i class="fa fa-minus-circle"></i></div>--> + <!-- <i class="fa fa-exclamation-circle"></i></div>--> + <!-- <i class="fa fa-minus-circle"></i></div>--> <i class="fa fa-stop-circle"></i> {{activities.cancelled}} </div> @@ -51,10 +57,6 @@ {{activities.succeeded}} </div> </span></a> - <span class="effector-name"> - {{effector.name}} - </span> - <span class="effector-description">{{effector.description}}</span> </div> </div> </div> diff --git a/ui-modules/app-inspector/app/components/entity-effector/entity-effector.less b/ui-modules/app-inspector/app/components/entity-effector/entity-effector.less index dd6eaf97..421dae54 100644 --- a/ui-modules/app-inspector/app/components/entity-effector/entity-effector.less +++ b/ui-modules/app-inspector/app/components/entity-effector/entity-effector.less @@ -23,7 +23,6 @@ font-size: 18px; color: @brand-primary; display: block; - margin-top: -5px; overflow: hidden; text-overflow: ellipsis; @@ -32,6 +31,7 @@ .effector-description { font-size: 12px; color: #7F7F7F; + margin-top: 4px; } border-top: 1px solid #E1E1E1; @@ -56,37 +56,37 @@ margin-right: 12px; gap: 12px; } - .row-buttons { + .row-buttons, .row-tail { align-items: center; display: flex; } .row-contents { flex: 1 1 auto; - .effector-pills { - display: flex; - &:hover { - .effector-pill { - background: mix(@gray-light, @gray-lighter, 30%); - } - } + } + .effector-pills { + display: flex; + &:hover { .effector-pill { - background: @gray-lighter; - padding: 2px 6px; - &:first-child { - padding-left: 10px; - border-bottom-left-radius: 12px; - border-top-left-radius: 12px; - } - &:last-child { - padding-right: 10px; - border-bottom-right-radius: 12px; - border-top-right-radius: 12px; - } + background: mix(@gray-light, @gray-lighter, 30%); + } + } + .effector-pill { + background: @gray-lighter; + padding: 2px 6px; + &:first-child { + padding-left: 10px; + border-bottom-left-radius: 12px; + border-top-left-radius: 12px; + } + &:last-child { + padding-right: 10px; + border-bottom-right-radius: 12px; + border-top-right-radius: 12px; } - .effector-succeeded { color: @color-succeeded; } - .effector-failed { color: @color-failed; } - .effector-cancelled { color: @color-cancelled; } - .effector-active { color: @color-active; } } + .effector-succeeded { color: @color-succeeded; } + .effector-failed { color: @color-failed; } + .effector-cancelled { color: @color-cancelled; } + .effector-active { color: @color-active; } } } \ No newline at end of file
