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/10/21 13:58:20 UTC
[brooklyn-ui] 11/24: align effectors in table better
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 <al...@cloudsoft.io>
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