[go: up one dir, main page]
Skip to content

Commit

Permalink
fixed tooltip positioning
Browse files Browse the repository at this point in the history
  • Loading branch information
@mad-moo
mad-moo committed Aug 14, 2024
1 parent 18a543e commit 92ffd83
Show file tree
Hide file tree
Showing 7 changed files with 122 additions and 74 deletions.
6 changes: 3 additions & 3 deletions frontend/code/components/tooltip.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ export class TooltipComponent extends ComponentBase {
this.popupManager = new PopupManager(
element,
this.popupElement,
getPositionerByName('center', 0.5, 0.0)
getPositionerByName('center', 0.0, 0.0)
);

return element;
Expand Down Expand Up @@ -76,8 +76,8 @@ export class TooltipComponent extends ComponentBase {
if (deltaState.position !== undefined || deltaState.gap !== undefined) {
this.popupManager.positioner = getPositionerByName(
deltaState.position ?? this.state.position,
0.5,
deltaState.gap ?? this.state.gap
deltaState.gap ?? this.state.gap,
0.5
);
}
}
Expand Down
38 changes: 14 additions & 24 deletions frontend/code/popupManager.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,45 +68,35 @@ export function positionOnSide({
}): { [key: string]: string } {
// Where would we like the content to be?
let anchorRect = anchor.getBoundingClientRect();
let contentWidth = content.scrollWidth;
let contentHeight = content.scrollHeight;

let anchorPointX = anchorRect.left + anchorRect.width * anchorRelativeX;
let anchorPointY = anchorRect.top + anchorRect.height * anchorRelativeY;

console.debug(anchor, content);
console.debug(
anchorRelativeX,
anchorRelativeY,
contentRelativeX,
contentRelativeY,
fixedOffsetXRem,
fixedOffsetYRem
);

let contentPointX = content.scrollWidth * contentRelativeX;
let contentPointY = content.scrollHeight * contentRelativeY;
let contentPointX = contentWidth * contentRelativeX;
let contentPointY = contentHeight * contentRelativeY;

let contentLeft =
anchorPointX - contentPointX + fixedOffsetXRem * pixelsPerRem;
let contentTop =
anchorPointY - contentPointY + fixedOffsetYRem * pixelsPerRem;

// Calculate the position of the popup

// Establish limits, so the popup doesn't go off the screen. This is
// relative to the popup's top left corner.
// let screenWidth = window.innerWidth;
// let screenHeight = window.innerHeight;
// let margin = 1 * pixelsPerRem;
let screenWidth = window.innerWidth;
let screenHeight = window.innerHeight;
let margin = 1 * pixelsPerRem;

// let minX = margin;
// let maxX = screenWidth - contentWidth - margin;
let minX = margin;
let maxX = screenWidth - contentWidth - margin;

// let minY = margin;
// let maxY = screenHeight - contentHeight - margin;
let minY = margin;
let maxY = screenHeight - contentHeight - margin;

// Enforce limits
// contentLeft = Math.min(Math.max(contentLeft, minX), maxX);
// contentTop = Math.min(Math.max(contentTop, minY), maxY);
// Enforce the limits
contentLeft = Math.min(Math.max(contentLeft, minX), maxX);
contentTop = Math.min(Math.max(contentTop, minY), maxY);

// Position & size the popup
return {
Expand Down
107 changes: 80 additions & 27 deletions frontend/css/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -375,7 +375,9 @@ select {
background-color: transparent;
opacity: 0;

transition: opacity 0.3s ease-in-out, background-color 1s ease-in-out;
transition:
opacity 0.3s ease-in-out,
background-color 1s ease-in-out;

& > * {
transform: translateY(-5rem);
Expand Down Expand Up @@ -839,7 +841,9 @@ $rio-input-box-small-label-spacing-top: 0.5rem;

outline: 0.15rem solid var(--rio-global-disabled-bg-variant);

transition: all 0.3s ease-in-out, outline 0.15s linear;
transition:
all 0.3s ease-in-out,
outline 0.15s linear;
}

svg {
Expand Down Expand Up @@ -960,7 +964,9 @@ $rio-input-box-small-label-spacing-top: 0.5rem;
}

.rio-dropdown-popup {
transition: max-height 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
transition:
max-height 0.2s ease-in-out,
box-shadow 0.2s ease-in-out;
}

.rio-dropdown-popup:not(.rio-popup-manager-open) {
Expand Down Expand Up @@ -1201,7 +1207,9 @@ $rio-input-box-small-label-spacing-top: 0.5rem;
// Preserve the text color outside of the switcheroo application, as some
// styles depend on it.
--outer-text-color: var(--rio-local-text-color);
transition: color 0.1s ease-in-out, border-color 0.1s ease-in-out;
transition:
color 0.1s ease-in-out,
border-color 0.1s ease-in-out;

@include single-container;
position: relative; // For the ripple
Expand All @@ -1215,7 +1223,9 @@ $rio-input-box-small-label-spacing-top: 0.5rem;
background-color: var(--rio-local-bg);

box-shadow: 0 0 0 transparent;
transition: background-color 0.1s ease-in-out, box-shadow 0.2s ease-in-out;
transition:
background-color 0.1s ease-in-out,
box-shadow 0.2s ease-in-out;
}

.rio-buttonstyle-major:hover {
Expand Down Expand Up @@ -1384,7 +1394,9 @@ $rio-input-box-small-label-spacing-top: 0.5rem;
opacity: 0;
transform: translateY(-50%);

transition: opacity 0.45s ease-in-out, transform 0.35s ease;
transition:
opacity 0.45s ease-in-out,
transform 0.35s ease;
}

.rio-revealer-open > * > .rio-revealer-content-inner {
Expand Down Expand Up @@ -1492,8 +1504,10 @@ $rio-input-box-small-label-spacing-top: 0.5rem;
background-color: var(--rio-local-level-2-bg);
opacity: 0%;

transition: left var(--rio-slider-position-transition-time) ease-in-out,
width 0.15s ease-in-out, height 0.15s ease-in-out,
transition:
left var(--rio-slider-position-transition-time) ease-in-out,
width 0.15s ease-in-out,
height 0.15s ease-in-out,
opacity 0.15s ease-in-out;
}

Expand All @@ -1518,7 +1532,8 @@ $rio-input-box-small-label-spacing-top: 0.5rem;

box-shadow: 0 0.1rem 0.2rem var(--rio-global-shadow-color);

transition: left var(--rio-slider-position-transition-time) ease-in-out,
transition:
left var(--rio-slider-position-transition-time) ease-in-out,
background-color 0.1s ease-in-out;
}

Expand Down Expand Up @@ -1669,7 +1684,9 @@ $rio-input-box-small-label-spacing-top: 0.5rem;
border-radius: 50%;
transform: translate(-50%, -50%);

transition: width 0.2s ease-in-out, height 0.2s ease-in-out;
transition:
width 0.2s ease-in-out,
height 0.2s ease-in-out;
}

.rio-media-player-timeline:hover .rio-media-player-timeline-knob {
Expand Down Expand Up @@ -2319,7 +2336,9 @@ $rio-input-box-small-label-spacing-top: 0.5rem;
padding: 0.3rem;
border-radius: 0.5rem;

transition: opacity 0.1s ease-in-out, color 0.1s ease-in-out,
transition:
opacity 0.1s ease-in-out,
color 0.1s ease-in-out,
background-color 0.1s ease-in-out;
}

Expand All @@ -2345,7 +2364,9 @@ $rio-input-box-small-label-spacing-top: 0.5rem;
linear-gradient(45deg, var(--checker-color) 25%, transparent 25%);

background-size: var(--checker-size) var(--checker-size);
background-position: 0 0, 0 0,
background-position:
0 0,
0 0,
calc(var(--checker-size) * -0.5) calc(var(--checker-size) * -0.5),
calc(var(--checker-size) * 0.5) calc(var(--checker-size) * 0.5);
}
Expand Down Expand Up @@ -2535,7 +2556,9 @@ $rio-input-box-small-label-spacing-top: 0.5rem;
background-color: var(--rio-local-bg);
box-shadow: 0 0 0 var(--rio-global-shadow-color);

transition: box-shadow 0.15s ease-out, background-color 0.1s ease-out;
transition:
box-shadow 0.15s ease-out,
background-color 0.1s ease-out;
}

.rio-card-elevate-on-hover:hover {
Expand Down Expand Up @@ -2586,7 +2609,9 @@ $rio-input-box-small-label-spacing-top: 0.5rem;

color: var(--rio-local-text-color);

transition: background-color 0.1s ease-out, color 0.1s ease-out;
transition:
background-color 0.1s ease-out,
color 0.1s ease-out;
}

.rio-switcher-bar-option > .rio-switcher-bar-icon {
Expand Down Expand Up @@ -3036,8 +3061,11 @@ $rio-input-box-small-label-spacing-top: 0.5rem;
position: fixed;
z-index: $z-index-dev-tools-highlighter;

transition: left 0.3s ease-in-out, top 0.3s ease-in-out,
width 0.3s ease-in-out, height 0.3s ease-in-out;
transition:
left 0.3s ease-in-out,
top 0.3s ease-in-out,
width 0.3s ease-in-out,
height 0.3s ease-in-out;
}

@keyframes pulse {
Expand Down Expand Up @@ -3174,7 +3202,8 @@ html.picking-component * {
}

.rio-switcher-resizer {
transition: min-width var(--rio-switcher-transition-time) ease-in-out,
transition:
min-width var(--rio-switcher-transition-time) ease-in-out,
min-height var(--rio-switcher-transition-time) ease-in-out;
}

Expand Down Expand Up @@ -3321,8 +3350,12 @@ html.picking-component * {

opacity: 0;

transition: opacity 0.3s ease-in-out, left 0.3s ease-in-out,
top 0.3s ease-in-out, width 0.3s ease-in-out, height 0.3s ease-in-out;
transition:
opacity 0.3s ease-in-out,
left 0.3s ease-in-out,
top 0.3s ease-in-out,
width 0.3s ease-in-out,
height 0.3s ease-in-out;
}

.rio-code-explorer-highlighter::after {
Expand Down Expand Up @@ -3393,8 +3426,11 @@ html.picking-component * {

transform: translate(-50%, -50%);

transition: top var(--rio-ripple-duration), left var(--rio-ripple-duration),
width var(--rio-ripple-duration), height var(--rio-ripple-duration),
transition:
top var(--rio-ripple-duration),
left var(--rio-ripple-duration),
width var(--rio-ripple-duration),
height var(--rio-ripple-duration),
opacity var(--rio-ripple-duration);
}

Expand All @@ -3411,14 +3447,17 @@ html.picking-component * {
transform: scale(0);
opacity: 0;

transition: transform 0.2s linear, opacity 0.1s ease-in-out;
transition:
transform 0.2s linear,
opacity 0.1s ease-in-out;
}

.rio-popup-animation-scale.rio-popup-manager-open {
transform: scale(1);
opacity: 1;

transition: transform 0.2s $transition-timing-overshoot,
transition:
transform 0.2s $transition-timing-overshoot,
opacity 0.1s ease-in-out;
}

Expand Down Expand Up @@ -3570,7 +3609,16 @@ html.picking-component * {
border-radius: var(--rio-global-corner-radius-small);
opacity: 0.5;

transition: background-color 0.1s ease-out, box-shadow 0.15s ease-out;
// Disable text selection, as that changes the cursor and is generally
// annoying in this context
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;

transition:
background-color 0.1s ease-out,
box-shadow 0.15s ease-out;
}

.rio-layout-display-child:not(.rio-layout-display-target) {
Expand Down Expand Up @@ -3629,8 +3677,11 @@ html.picking-component * {
width: 1.4rem;
height: 1.4rem;

transition: opacity 0.2s ease-in-out, border-width 0.2s ease-in-out,
border-color 0.2s ease-in-out, background-color 0.2s ease-in-out;
transition:
opacity 0.2s ease-in-out,
border-width 0.2s ease-in-out,
border-color 0.2s ease-in-out,
background-color 0.2s ease-in-out;
}

.rio-checkbox.is-on .rio-checkbox-border {
Expand Down Expand Up @@ -3684,7 +3735,9 @@ html.picking-component * {

background-color: transparent;
opacity: 0;
transition: opacity 0.2s ease-in-out, background-color 0.6s ease-in-out;
transition:
opacity 0.2s ease-in-out,
background-color 0.6s ease-in-out;

& > * {
transform: translateY(-2rem);
Expand Down
Loading

0 comments on commit 92ffd83

Please sign in to comment.