status-im/consul
2
0
Fork 0
mirror of https://github.com/status-im/consul.git synced 2025-01-20 10:39:50 +00:00
Code Issues Projects Releases Wiki Activity

ui: Tooltip Bugs (#8562)

Browse Source 
* Fix tooltip offset in Discovery Chain for Firefox Browser

* Add z-index to ember-tooltip to over over the search/sort in AppView
This commit is contained in:
Kenia 2020-08-26 10:05:09 -04:00 committed by GitHub
parent dfcd9c00cf
commit ad9f118d14
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 8 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ui-v2/app/components/discovery-chain/index.hbs
View File

@ -135,7 +135,7 @@
{{/if}} {{/if}}
{{/each}} {{/each}}
</svg> </svg>
<div class={{concat 'tooltip' (if activeTooltip ' active' '')}} style={{{ concat 'position: absolute;top:' y 'px;left:' x 'px;'}}}> <div class={{concat 'tooltip' (if activeTooltip ' active' '')}} style={{{ concat 'top:' y 'px;left:' x 'px;'}}}>
<span role="tooltip">{{round tooltip decimals=2}}%</span> <span role="tooltip">{{round tooltip decimals=2}}%</span>
</div> </div>
{{/if}} {{/if}}

4
ui-v2/app/components/discovery-chain/index.js
View File

@ -177,8 +177,8 @@ export default Component.extend({
actions: { actions: {
showSplit: function(e) { showSplit: function(e) {
this.setProperties({ this.setProperties({
x: e.offsetX, x: e.clientX,
y: e.offsetY - 5, y: e.clientY - 3,
tooltip: e.target.dataset.percentage, tooltip: e.target.dataset.percentage,
activeTooltip: true, activeTooltip: true,
}); });

1
ui-v2/app/styles/base/components/tooltip/layout.scss
View File

@ -55,4 +55,5 @@
.ember-tooltip { .ember-tooltip {
padding: 12px; padding: 12px;
max-width: 192px; max-width: 192px;
z-index: 4;
} }

4
ui-v2/app/styles/components/discovery-chain/layout.scss
View File

@ -25,6 +25,10 @@
%discovery-chain [id*=':']:not(path):hover { %discovery-chain [id*=':']:not(path):hover {
@extend %chain-node-active; @extend %chain-node-active;
} }
%discovery-chain .tooltip {
position: fixed;
z-index: 5;
}
%discovery-chain .tooltip.active > [role='tooltip'], %discovery-chain .tooltip.active > [role='tooltip'],
%discovery-chain .tooltip.active > [role='tooltip']::after { %discovery-chain .tooltip.active > [role='tooltip']::after {
@extend %blink-in-fade-out-active; @extend %blink-in-fade-out-active;