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

feat: add tooltips to editor buttons (#4934)

Browse Source 
Co-authored-by: Anthony Cooper <antcoop096@gmail.com>
Co-authored-by: aarohee-he <aarohee-he@users.noreply.github.com>
Co-authored-by: Mishti Gala <mishtigala19@gmail.com>
pull/4969/head
aarohee-he 2 months ago committed by GitHub
parent 13957472eb
commit 0f2390a0b7
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
7 changed files with 127 additions and 53 deletions
Show Stats Download Patch File Download Diff File

20
web/src/components/MemoEditor/ActionButton/AddMemoRelationPopover.tsx
Unescape Escape View File

@ -13,6 +13,7 @@ import { extractUserIdFromName } from "@/store/common";
import { Memo, MemoRelation_Memo, MemoRelation_Type } from "@/types/proto/api/v1/memo_service";
import { useTranslate } from "@/utils/i18n";
import { MemoEditorContext } from "../types";
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
const AddMemoRelationPopover = () => {
const t = useTranslate();
@ -95,11 +96,20 @@ const AddMemoRelationPopover = () => {
return (
<Popover open={popoverOpen} onOpenChange={setPopoverOpen}>
<PopoverTrigger asChild>
<Button variant="ghost" size="icon">
<LinkIcon className="size-5" />
</Button>
</PopoverTrigger>
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<PopoverTrigger asChild>
<Button variant="ghost" size="icon">
<LinkIcon className="size-5" />
</Button>
</PopoverTrigger>
</TooltipTrigger>
<TooltipContent side="bottom">
<p>{t("tooltip.link-memo")}</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
<PopoverContent align="center">
<div className="w-[16rem] p-1 flex flex-col justify-start items-start">
{/* Search and selection interface */}

38
web/src/components/MemoEditor/ActionButton/LocationSelector.tsx
Unescape Escape 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} />

21
web/src/components/MemoEditor/ActionButton/MarkdownMenu.tsx
Unescape Escape View File

@ -3,6 +3,8 @@ import { Button } from "@/components/ui/button";
import { useTranslate } from "@/utils/i18n";
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "../../ui/dropdown-menu";
import { EditorRefActions } from "../Editor";
import { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from "@/components/ui/tooltip";
interface Props {
editorRef: React.RefObject<EditorRefActions>;
@ -61,11 +63,20 @@ const MarkdownMenu = (props: Props) => {
return (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="ghost" size="icon">
<SquareSlashIcon className="size-5" />
</Button>
</DropdownMenuTrigger>
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<DropdownMenuTrigger asChild>
<Button variant="ghost" size="icon">
<SquareSlashIcon className="size-5" />
</Button>
</DropdownMenuTrigger>
</TooltipTrigger>
<TooltipContent side="bottom">
<p>{t("tooltip.markdown-menu")}</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
<DropdownMenuContent align="start">
<DropdownMenuItem onClick={handleCodeBlockClick}>
<Code2Icon className="w-4 h-auto text-muted-foreground" />

20
web/src/components/MemoEditor/ActionButton/TagSelector.tsx
Unescape Escape View File

@ -6,6 +6,7 @@ import { userStore } from "@/store";
import { useTranslate } from "@/utils/i18n";
import { Popover, PopoverContent, PopoverTrigger } from "../../ui/popover";
import { EditorRefActions } from "../Editor";
import { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from "@/components/ui/tooltip";
interface Props {
editorRef: React.RefObject<EditorRefActions>;
@ -34,11 +35,20 @@ const TagSelector = observer((props: Props) => {
return (
<Popover>
<PopoverTrigger asChild>
<Button variant="ghost" size="icon">
<HashIcon className="size-5" />
</Button>
</PopoverTrigger>
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<PopoverTrigger asChild>
<Button variant="ghost" size="icon">
<HashIcon className="size-5" />
</Button>
</PopoverTrigger>
</TooltipTrigger>
<TooltipContent side="bottom">
<p>{t("tooltip.tags")}</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
<PopoverContent align="start" sideOffset={2}>
{tags.length > 0 ? (
<div className="flex flex-row justify-start items-start flex-wrap px-2 max-w-48 h-auto max-h-48 overflow-y-auto gap-x-2">

37
web/src/components/MemoEditor/ActionButton/UploadAttachmentButton.tsx
Unescape Escape View File

@ -6,6 +6,8 @@ import { Button } from "@/components/ui/button";
import { attachmentStore } from "@/store";
import { Attachment } from "@/types/proto/api/v1/attachment_service";
import { MemoEditorContext } from "../types";
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
import { t } from "i18next";
interface Props {
isUploading?: boolean;
@ -73,19 +75,28 @@ const UploadAttachmentButton = observer((props: Props) => {
const isUploading = state.uploadingFlag || props.isUploading;
return (
<Button className="relative" variant="ghost" size="icon" disabled={isUploading}>
{isUploading ? <LoaderIcon className="size-5 animate-spin" /> : <PaperclipIcon className="size-5" />}
<input
className="absolute inset-0 w-full h-full opacity-0 cursor-pointer"
ref={fileInputRef}
disabled={isUploading}
onChange={handleFileInputChange}
type="file"
id="files"
multiple={true}
accept="*"
/>
</Button>
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<Button className="relative" variant="ghost" size="icon" disabled={isUploading}>
{isUploading ? <LoaderIcon className="size-5 animate-spin" /> : <PaperclipIcon className="size-5" />}
<input
className="absolute inset-0 w-full h-full opacity-0 cursor-pointer"
ref={fileInputRef}
disabled={isUploading}
onChange={handleFileInputChange}
type="file"
id="files"
multiple={true}
accept="*"
/>
</Button>
</TooltipTrigger>
<TooltipContent side="bottom">
<p>{t("tooltip.upload-attachment")}</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
);
});

36
web/src/components/MemoEditor/ActionButton/VisibilitySelector.tsx
Unescape Escape 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="bottom">
<p>{t("tooltip.select-visibility")}</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
);
};

8
web/src/locales/en.json
Unescape Escape View File

@ -443,5 +443,13 @@
"rename-success": "Renamed tag successfully",
"rename-tag": "Rename tag",
"rename-tip": "All your memos with this tag will be updated."
},
"tooltip": {
"link-memo": "Link Memo",
"markdown-menu": "Markdown",
"select-location": "Location",
"select-visibility": "Visibility",
"tags": "Tags",
"upload-attachment": "Upload Attachment(s)"
}
}

Write Preview
Loading…
Cancel
Save