aljaz/opencode
1
0
Fork 0
mirror of https://github.com/aljazceru/opencode.git synced 2025-12-29 05:34:19 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat(desktop): better tooltips

Browse Source
This commit is contained in:
Adam
2025-11-06 06:05:08 -06:00
parent a1836527ce
commit ab345cf0da
4 changed files with 68 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
packages/ui/src/components/icon.tsx
View File

@@ -151,6 +151,7 @@ const newIcons = {
"square-arrow-top-right": `<path d="M7.91675 2.9165H2.91675V17.0832H17.0834V12.0832M12.0834 2.9165H17.0834V7.9165M9.58342 10.4165L16.6667 3.33317" stroke="currentColor" stroke-linecap="square"/>`,
"circle-ban-sign": `<path d="M15.3675 4.63087L4.55742 15.441M17.9163 9.9987C17.9163 14.371 14.3719 17.9154 9.99967 17.9154C7.81355 17.9154 5.83438 17.0293 4.40175 15.5966C2.96911 14.164 2.08301 12.1848 2.08301 9.9987C2.08301 5.62644 5.62742 2.08203 9.99967 2.08203C12.1858 2.08203 14.165 2.96813 15.5976 4.40077C17.0302 5.8334 17.9163 7.81257 17.9163 9.9987Z" stroke="currentColor" stroke-linecap="round"/>`,
stop: `<rect x="6" y="6" width="8" height="8" fill="currentColor"/>`,
enter: `<path d="M5.83333 15.8334L2.5 12.5L5.83333 9.16671M3.33333 12.5H17.9167V4.58337H10" stroke="currentColor" stroke-linecap="square"/>`,
}
export interface IconProps extends ComponentProps<"svg"> {

69
packages/ui/src/components/tooltip.css
View File

@@ -6,54 +6,55 @@
[data-component="tooltip"] {
z-index: 1000;
max-width: 320px;
border-radius: 12px;
border-radius: 6px;
background-color: var(--surface-float-base);
color: var(--white);
padding: 2px 12px 2px 12px;
color: rgba(253, 252, 252, 0.94);
padding: 2px 8px;
border: 0.5px solid rgba(253, 252, 252, 0.2);
box-shadow: var(--shadow-md);
pointer-events: none !important;
transition: all 150ms ease-out;
transform: translate3d(0, 0, 0);
transform-origin: var(--kb-tooltip-content-transform-origin);
/* transition: all 150ms ease-out; */
/* transform: translate3d(0, 0, 0); */
/* transform-origin: var(--kb-tooltip-content-transform-origin); */
/* text-14-regular */
/* text-12-medium */
font-family: var(--font-family-sans);
font-size: var(--font-size-base);
font-size: var(--font-size-small);
font-style: normal;
font-weight: var(--font-weight-regular);
line-height: var(--line-height-large); /* 171.429% */
font-weight: var(--font-weight-medium);
line-height: var(--line-height-large); /* 166.667% */
letter-spacing: var(--letter-spacing-normal);
&[data-expanded] {
opacity: 1;
transform: translate3d(0, 0, 0);
/* transform: translate3d(0, 0, 0); */
}
&[data-closed] {
opacity: 0;
}
&[data-placement="top"] {
&[data-closed] {
transform: translate3d(0, 4px, 0);
}
}
&[data-placement="bottom"] {
&[data-closed] {
transform: translate3d(0, -4px, 0);
}
}
&[data-placement="left"] {
&[data-closed] {
transform: translate3d(4px, 0, 0);
}
}
&[data-placement="right"] {
&[data-closed] {
transform: translate3d(-4px, 0, 0);
}
}
/* &[data-placement="top"] { */
/* &[data-closed] { */
/* transform: translate3d(0, 4px, 0); */
/* } */
/* } */
/**/
/* &[data-placement="bottom"] { */
/* &[data-closed] { */
/* transform: translate3d(0, -4px, 0); */
/* } */
/* } */
/**/
/* &[data-placement="left"] { */
/* &[data-closed] { */
/* transform: translate3d(4px, 0, 0); */
/* } */
/* } */
/**/
/* &[data-placement="right"] { */
/* &[data-closed] { */
/* transform: translate3d(-4px, 0, 0); */
/* } */
/* } */
}

8
packages/ui/src/components/tooltip.tsx
View File

@@ -1,9 +1,9 @@
import { Tooltip as KobalteTooltip } from "@kobalte/core/tooltip"
import { children, createEffect, createSignal, splitProps } from "solid-js"
import { children, createEffect, createSignal, splitProps, type JSX } from "solid-js"
import type { ComponentProps } from "solid-js"
export interface TooltipProps extends ComponentProps<typeof KobalteTooltip> {
value: string | (() => string)
value: JSX.Element
class?: string
}
@@ -29,13 +29,13 @@ export function Tooltip(props: TooltipProps) {
})
return (
<KobalteTooltip forceMount {...others} open={open()} onOpenChange={setOpen}>
<KobalteTooltip forceMount {...others} open={open()} onOpenChange={setOpen} gutter={4}>
<KobalteTooltip.Trigger as={"div"} data-component="tooltip-trigger" class={local.class}>
{c()}
</KobalteTooltip.Trigger>
<KobalteTooltip.Portal>
<KobalteTooltip.Content data-component="tooltip" data-placement={props.placement}>
{typeof others.value === "function" ? others.value() : others.value}
{others.value}
{/* <KobalteTooltip.Arrow data-slot="arrow" /> */}
</KobalteTooltip.Content>
</KobalteTooltip.Portal>