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 74880bf0 fix tooltip styling for summary page
74880bf0 is described below
commit 74880bf0e038ff47235c5db881c972ad3794a42e
Author: Alex Heneveld <[email protected]>
AuthorDate: Tue Aug 1 11:22:53 2023 +0100
fix tooltip styling for summary page
overly broad application when we made the entity title show a tooltip
---
.../app/views/main/inspect/summary/summary.less | 43 +++++++++++-----------
.../main/inspect/summary/summary.template.html | 14 +++----
2 files changed, 27 insertions(+), 30 deletions(-)
diff --git
a/ui-modules/app-inspector/app/views/main/inspect/summary/summary.less
b/ui-modules/app-inspector/app/views/main/inspect/summary/summary.less
index 256ade73..2724753f 100644
--- a/ui-modules/app-inspector/app/views/main/inspect/summary/summary.less
+++ b/ui-modules/app-inspector/app/views/main/inspect/summary/summary.less
@@ -124,29 +124,28 @@ a.blueprint-button {
font-style: italic;
}
-.tooltip {
- position: relative;
- display: inline-block;
- opacity: 1;
- top: 25px;
- filter: drop-shadow(5px 5px 4px #b3c5ab);
-}
-
-.tooltip .tooltiptext {
- background-color: #e3f5db;
- border-radius: 6px;
- z-index: 1;
-}
-
-.tooltiptext {
- position: absolute;
- opacity: 0;
- transition: opacity 0.5s;
+.inline-tooltip {
+ &.tooltip {
+ position: relative;
+ display: inline-block;
+ opacity: 0;
+ top: 25px;
+ filter: drop-shadow(5px 5px 4px #b3c5ab);
+ .tooltiptext {
+ background-color: #e3f5db;
+ border-radius: 6px;
+ z-index: 1;
+ position: absolute;
+ }
+ }
}
-
-.tooltip:hover .tooltiptext {
- opacity: 1;
+.entity-header:hover {
+ .inline-tooltip {
+ &.tooltip {
+ transition: opacity 0.5s;
+ opacity: 1;
+ }
+ }
}
-
.modal-dialog .modal-header .text-danger:extend(.text-danger) {}
diff --git
a/ui-modules/app-inspector/app/views/main/inspect/summary/summary.template.html
b/ui-modules/app-inspector/app/views/main/inspect/summary/summary.template.html
index 4e64fb46..21fdbaa4 100644
---
a/ui-modules/app-inspector/app/views/main/inspect/summary/summary.template.html
+++
b/ui-modules/app-inspector/app/views/main/inspect/summary/summary.template.html
@@ -20,9 +20,9 @@
<div class="tab-header">
<div class="entity-header">
<h2 ng-if="!vm.entity" class="entity-name loading"><loading-state
error="vm.error.entity"></loading-state></h2>
- <span ng-if="vm.entity" class="tooltip">
- <span class="tooltiptext">{{ vm.entity.name }}</span>
- </span>
+ <span ng-if="vm.entity" class="tooltip inline-tooltip">
+ <span class="tooltiptext">{{ vm.entity.name }}</span>
+ </span>
<h2 ng-if="vm.entity" class="entity-name">
<span class="node-icon"><img ng-src="{{ vm.iconUrl }}"/></span>
<span class="node-name" editable-text="vm.name" blur="submit"
buttons="no" blur="submit" onaftersave="vm.updateEntityName()">{{
vm.entity.name }}</span>
@@ -207,11 +207,9 @@
></config-sensor-table>
</div>
<div class="grid-option-footer">
- <button ng-click="vm.toggleConfigResolved()" ng-class="{
'btn-outline': !vm.showResolvedConfig, 'btn-accent': vm.showResolvedConfig }">
- <span ng-if="vm.showResolvedConfig" uib-tooltip="Show
unresolved DSL values">
- <i class="fa fa-code"></i>
- </span>
- <span ng-if="!vm.showResolvedConfig" uib-tooltip="Show
resolved values">
+ <button ng-click="vm.toggleConfigResolved()" ng-class="{
'btn-outline': !vm.showResolvedConfig, 'btn-accent': vm.showResolvedConfig }"
+ uib-tooltip="{{ vm.showResolvedConfig ? 'Show unresolved
DSL values' : 'Show resolved values' }}">
+ <span>
<i class="fa fa-code"></i>
</span>
</button>
