From 9f9737567cfa9ba343ed78d76cf0b385352dfe2c Mon Sep 17 00:00:00 2001 From: Amin Yahyaabadi Date: Thu, 18 Mar 2021 20:40:03 -0500 Subject: [PATCH] feat: make datatips look like the linter tooltips --- lib/datatip-manager.ts | 5 ++++- styles/atom-ide-datatips.less | 19 +++++++++++++++---- 2 files changed, 19 insertions(+), 5 deletions(-) diff --git a/lib/datatip-manager.ts b/lib/datatip-manager.ts index 4fcc408..95c8ff0 100644 --- a/lib/datatip-manager.ts +++ b/lib/datatip-manager.ts @@ -425,7 +425,10 @@ export class DataTipManager { position: Point, view: ViewContainer ): CompositeDisposable | null { - const element = view.element as HTMLElement + const element = document.createElement("div") + element.className = "datatip-border" + + element.appendChild(view.element as HTMLElement) // TODO do we need this? if (!element) { diff --git a/styles/atom-ide-datatips.less b/styles/atom-ide-datatips.less index 269d658..2cfd09e 100644 --- a/styles/atom-ide-datatips.less +++ b/styles/atom-ide-datatips.less @@ -1,7 +1,17 @@ @import "ui-variables"; @import "syntax-variables"; +// .datatip-overlay { +// } + +.datatip-border { + background: @overlay-background-color; + padding: 10px; +} + .datatip-element { + .datatip-responsive-effect(); + overflow: auto; // prevents the long text to come out of the datatip color: @syntax-text-color; white-space: nowrap; @@ -38,15 +48,16 @@ width: auto; } -.datatip-overlay { +.datatip-responsive-effect() { + margin-left: 5px; // info border - border-bottom: 5px solid @background-color-highlight; + border-left: 5px solid @background-color-highlight; border-radius: 3px; // info bar glow - transition: border-bottom-color 0.15s ease; + transition: border-left-color 0.15s ease; &:hover { - border-bottom-color: lighten(@background-color-highlight, 10%); + border-left-color: lighten(@background-color-highlight, 10%); } }