happyz
/
memos
mirror of https://github.com/usememos/memos.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Add tooltip to LocationSelector and VisibilitySelector

This commit is contained in:
Mishti Gala 2025-07-30 16:09:05 +05:30 committed by aarohee-he
parent 57c43b5f69
commit 58dd2d939a
2 changed files with 49 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
web/src/components/MemoEditor/ActionButton/LocationSelector.tsx
View File

@ -8,6 +8,7 @@ import { Input } from "@/components/ui/input";
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
import { Location } from "@/types/proto/api/v1/memo_service";
import { useTranslate } from "@/utils/i18n";
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
interface Props {
location?: Location;
@ -94,19 +95,32 @@ const LocationSelector = (props: Props) => {
return (
<Popover open={popoverOpen} onOpenChange={setPopoverOpen}>
<PopoverTrigger asChild>
<Button variant="ghost" size={props.location ? undefined : "icon"}>
<MapPinIcon className="size-5 shrink-0" />
{props.location && (
<>
<span className="ml-0.5 text-sm text-ellipsis whitespace-nowrap overflow-hidden max-w-28">{props.location.placeholder}</span>
<span className="cursor-pointer hover:text-primary" onClick={removeLocation}>
<XIcon className="size-4 shrink-0" />
</span>
</>
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<PopoverTrigger asChild>
<Button variant="ghost" size={props.location ? undefined : "icon"}>
<MapPinIcon className="size-5 shrink-0" />
{props.location && (
<>
<span className="ml-0.5 text-sm text-ellipsis whitespace-nowrap overflow-hidden max-w-28">
{props.location.placeholder}
</span>
<span className="ml-1 cursor-pointer hover:text-primary" onClick={removeLocation}>
<XIcon className="size-4 shrink-0" />
</span>
</>
)}
</Button>
</PopoverTrigger>
</TooltipTrigger>
{!props.location && (
<TooltipContent side="bottom">
<p>{t("tooltip.select-location")}</p>
</TooltipContent>
)}
</Button>
</PopoverTrigger>
</Tooltip>
</TooltipProvider>
<PopoverContent align="center">
<div className="min-w-80 sm:w-lg p-1 flex flex-col justify-start items-start">
<LeafletMap key={JSON.stringify(state.initilized)} latlng={state.position} onChange={onPositionChanged} />

36
web/src/components/MemoEditor/ActionButton/VisibilitySelector.tsx
View File

@ -2,6 +2,7 @@ import VisibilityIcon from "@/components/VisibilityIcon";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Visibility } from "@/types/proto/api/v1/memo_service";
import { useTranslate } from "@/utils/i18n";
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"; // ⬅️ ADD this line
interface Props {
value: Visibility;
@ -26,19 +27,28 @@ const VisibilitySelector = (props: Props) => {
};
return (
<Select value={value.toString()} onValueChange={onChange} onOpenChange={handleOpenChange}>
<SelectTrigger size="xs" className="!bg-background">
<SelectValue />
</SelectTrigger>
<SelectContent align="end">
{visibilityOptions.map((option) => (
<SelectItem key={option.value} value={option.value.toString()}>
<VisibilityIcon className="size-3.5" visibility={option.value} />
{option.label}
</SelectItem>
))}
</SelectContent>
</Select>
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<Select value={value.toString()} onValueChange={onChange} onOpenChange={handleOpenChange}>
<SelectTrigger size="xs" className="!bg-background">
<SelectValue />
</SelectTrigger>
<SelectContent align="end">
{visibilityOptions.map((option) => (
<SelectItem key={option.value} value={option.value.toString()}>
<VisibilityIcon className="size-3.5" visibility={option.value} />
{option.label}
</SelectItem>
))}
</SelectContent>
</Select>
</TooltipTrigger>
<TooltipContent side="top">
<p>{t("memo.visibility-tooltip")}</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
);
};