hendrik/lens
1
0
Fork 0
mirror of https://github.com/lensapp/lens.git synced 2025-05-20 05:10:56 +00:00
Code Issues Projects Releases Wiki Activity

tooltip refactoring -- part 2

Browse Source 
Signed-off-by: Roman <ixrock@gmail.com>
This commit is contained in:
Roman 2020-07-28 17:42:48 +03:00
parent f2803abcb6
commit 1d7736076c
3 changed files with 17 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/renderer/components/line-progress/line-progress.scss
View File

@ -1,5 +1,6 @@
.LineProgress { .LineProgress {
position: relative;
border-radius: 2px; border-radius: 2px;
background: $lineProgressBackground; background: $lineProgressBackground;
height: 3px; height: 3px;

6
src/renderer/components/tooltip/tooltip.scss
View File

@ -4,7 +4,7 @@
// https://developer.mozilla.org/en-US/docs/Web/CSS/position // https://developer.mozilla.org/en-US/docs/Web/CSS/position
position: fixed; position: fixed;
margin: 0 !important; margin: 0 !important;
background: $contentColor; background: $mainBackground;
font-size: small; font-size: small;
font-weight: normal; font-weight: normal;
border: 1px solid $borderColor; border: 1px solid $borderColor;
@ -14,10 +14,12 @@
padding: .5em; padding: .5em;
text-align: center; text-align: center;
pointer-events: none; pointer-events: none;
z-index: 1000;
transition: opacity 150ms 25ms ease-in-out; transition: opacity 150ms 25ms ease-in-out;
z-index: 100000;
&.hidden { &.hidden {
left: 0;
top: 0;
opacity: 0; opacity: 0;
visibility: hidden; visibility: hidden;
} }

17
src/renderer/components/tooltip/tooltip.tsx
View File

@ -1,6 +1,7 @@
import './tooltip.scss' import './tooltip.scss'
import React from "react" import React from "react"
import { createPortal } from "react-dom"
import { observer } from "mobx-react"; import { observer } from "mobx-react";
import { autobind, cssNames, IClassName } from "../../utils"; import { autobind, cssNames, IClassName } from "../../utils";
import { observable } from "mobx"; import { observable } from "mobx";
@ -11,6 +12,7 @@ export interface TooltipProps {
targetId: string; // "id" of target html-element to bind targetId: string; // "id" of target html-element to bind
visible?: boolean; visible?: boolean;
offset?: number; // px offset?: number; // px
usePortal?: boolean;
position?: TooltipPosition; position?: TooltipPosition;
className?: IClassName; className?: IClassName;
formatters?: TooltipContentFormatters; formatters?: TooltipContentFormatters;
@ -27,6 +29,7 @@ export interface TooltipContentFormatters {
} }
const defaultProps: Partial<TooltipProps> = { const defaultProps: Partial<TooltipProps> = {
usePortal: true,
offset: 10, offset: 10,
} }
@ -132,8 +135,8 @@ export class Tooltip extends React.Component<TooltipProps> {
break; break;
} }
return { return {
left, left: left,
top, top: top,
right: left + selfBounds.width, right: left + selfBounds.width,
bottom: top + selfBounds.height, bottom: top + selfBounds.height,
}; };
@ -145,15 +148,19 @@ export class Tooltip extends React.Component<TooltipProps> {
} }
render() { render() {
const { style, formatters, position, children } = this.props; const { style, formatters, usePortal, children } = this.props;
const className = cssNames("Tooltip", this.props.className, formatters, this.activePosition, { const className = cssNames("Tooltip", this.props.className, formatters, this.activePosition, {
hidden: !this.isVisible, hidden: !this.isVisible,
formatter: !!formatters, formatter: !!formatters,
}); });
return ( const tooltip = (
<div className={className} style={style} ref={this.bindRef}> <div className={className} style={style} ref={this.bindRef}>
{children} {children}
</div> </div>
); )
if (usePortal) {
return createPortal(tooltip, document.body,);
}
return tooltip;
} }
} }