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

fix: action styles in memo editor

This commit is contained in:
Johnny 2025-07-29 22:10:31 +08:00
parent e724a7ef72
commit 5074268f4f
2 changed files with 31 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -86,31 +86,27 @@ const LocationSelector = (props: Props) => {
setState({ ...state, position });
};
const removeLocation = () => {
const removeLocation = (e: React.MouseEvent) => {
e.stopPropagation();
e.preventDefault();
props.onChange(undefined);
};
return (
<Popover open={popoverOpen} onOpenChange={setPopoverOpen}>
{props.location ? (
<div className="flex items-center">
<PopoverTrigger asChild>
<Button variant="ghost" className="rounded-r-none">
<MapPinIcon className="size-5 shrink-0" />
<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>
</Button>
</PopoverTrigger>
<Button variant="ghost" size="icon" className="rounded-l-none opacity-60 hover:opacity-80" onClick={removeLocation}>
<XIcon className="size-4 shrink-0" />
</Button>
</div>
) : (
<PopoverTrigger asChild>
<Button variant="ghost" size="icon">
<MapPinIcon className="size-5 shrink-0" />
</Button>
</PopoverTrigger>
)}
<span className="cursor-pointer hover:text-primary" onClick={removeLocation}>
<XIcon className="size-4 shrink-0" />
</span>
</>
)}
</Button>
</PopoverTrigger>
<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} />

24
web/src/components/Settings/MemoRelatedSettings.tsx
View File

@ -125,10 +125,12 @@ const MemoRelatedSettings = observer(() => {
return (
<Badge key={reactionType} variant="outline" className="flex items-center gap-1">
{reactionType}
<X
className="w-3 h-3 cursor-pointer hover:text-destructive"
<span
className="cursor-pointer text-muted-foreground hover:text-primary"
onClick={() => updatePartialSetting({ reactions: memoRelatedSetting.reactions.filter((r) => r !== reactionType) })}
/>
>
<X className="w-4 h-4" />
</span>
</Badge>
);
})}
@ -139,7 +141,9 @@ const MemoRelatedSettings = observer(() => {
value={editingReaction}
onChange={(event) => setEditingReaction(event.target.value.trim())}
/>
<CheckIcon className="w-5 h-5 text-muted-foreground cursor-pointer hover:text-primary" onClick={() => upsertReaction()} />
<span className="text-muted-foreground cursor-pointer hover:text-primary" onClick={() => upsertReaction()}>
<CheckIcon className="w-5 h-5" />
</span>
</div>
</div>
</div>
@ -156,10 +160,12 @@ const MemoRelatedSettings = observer(() => {
return (
<Badge key={nsfwTag} variant="outline" className="flex items-center gap-1">
{nsfwTag}
<X
className="w-3 h-3 cursor-pointer hover:text-destructive"
<span
className="cursor-pointer text-muted-foreground hover:text-primary"
onClick={() => updatePartialSetting({ nsfwTags: memoRelatedSetting.nsfwTags.filter((r) => r !== nsfwTag) })}
/>
>
<X className="w-4 h-4" />
</span>
</Badge>
);
})}
@ -170,7 +176,9 @@ const MemoRelatedSettings = observer(() => {
value={editingNsfwTag}
onChange={(event) => setEditingNsfwTag(event.target.value.trim())}
/>
<CheckIcon className="w-5 h-5 text-muted-foreground cursor-pointer hover:text-primary" onClick={() => upsertNsfwTags()} />
<span className="text-muted-foreground cursor-pointer hover:text-primary" onClick={() => upsertNsfwTags()}>
<CheckIcon className="w-5 h-5" />
</span>
</div>
</div>
</div>