YourSelfHosted/memos
1
0
Fork 0
mirror of https://github.com/usememos/memos.git synced 2025-02-21 05:40:57 +01:00
Code Issues Packages Projects Releases Wiki Activity

tweak(web): use iconbutton for editor helpers (#2426)

Browse Source
This commit is contained in:
Christopher 2023-10-22 16:10:27 +02:00 committed by GitHub
parent 331f4dcc1b
commit 82effea070
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 26 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
web/src/components/MemoEditor/ActionButton/TagSelector.tsx
View File

@ -1,3 +1,4 @@
import { IconButton } from "@mui/joy";
import Icon from "@/components/Icon";
import { useTagStore } from "@/store/module";
@ -11,9 +12,9 @@ const TagSelector = (props: Props) => {
const tags = tagStore.state.tags;
return (
<div className="relative group flex flex-row justify-center items-center p-1 w-auto h-auto mr-1 select-none rounded cursor-pointer text-gray-600 dark:text-gray-400 hover:bg-gray-300 dark:hover:bg-zinc-800 hover:shadow">
<IconButton className="relative group flex flex-row justify-center items-center p-1 w-auto h-auto mr-1 select-none rounded cursor-pointer text-gray-600 dark:text-gray-400 hover:bg-gray-300 dark:hover:bg-zinc-800 hover:shadow">
<Icon.Hash className="w-5 h-5 mx-auto" />
<div className="hidden flex-row justify-start items-start flex-wrap absolute top-6 left-0 mt-1 p-1 z-1 rounded w-52 h-auto max-h-48 overflow-y-auto font-mono shadow bg-zinc-200 dark:bg-zinc-600 group-hover:flex">
<div className="hidden flex-row justify-start items-start flex-wrap absolute top-8 left-0 mt-1 p-1 z-1 rounded w-52 h-auto max-h-48 overflow-y-auto font-mono shadow bg-zinc-200 dark:bg-zinc-600 group-hover:flex">
{tags.length > 0 ? (
tags.map((tag) => {
return (
@ -32,7 +33,7 @@ const TagSelector = (props: Props) => {
</p>
)}
</div>
</div>
</IconButton>
);
};

35
web/src/components/MemoEditor/index.tsx
View File

@ -1,4 +1,4 @@
import { Select, Option, Button } from "@mui/joy";
import { Select, Option, Button, IconButton } from "@mui/joy";
import { isNumber, last, uniq, uniqBy } from "lodash-es";
import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
import { toast } from "react-hot-toast";
@ -424,18 +424,27 @@ const MemoEditor = (props: Props) => {
<div className="relative w-full flex flex-row justify-between items-center pt-2 z-1">
<div className="flex flex-row justify-start items-center">
<TagSelector onTagSelectorClick={(tag) => handleTagSelectorClick(tag)} />
<button className="flex flex-row justify-center items-center p-1 w-auto h-auto mr-1 select-none rounded cursor-pointer text-gray-600 dark:text-gray-400 hover:bg-gray-300 dark:hover:bg-zinc-800 hover:shadow">
<Icon.Image className="w-5 h-5 mx-auto" onClick={handleUploadFileBtnClick} />
</button>
<button className="flex flex-row justify-center items-center p-1 w-auto h-auto mr-1 select-none rounded cursor-pointer text-gray-600 dark:text-gray-400 hover:bg-gray-300 dark:hover:bg-zinc-800 hover:shadow">
<Icon.Link className="w-5 h-5 mx-auto" onClick={handleAddMemoRelationBtnClick} />
</button>
<button className="flex flex-row justify-center items-center p-1 w-auto h-auto mr-1 select-none rounded cursor-pointer text-gray-600 dark:text-gray-400 hover:bg-gray-300 dark:hover:bg-zinc-800 hover:shadow">
<Icon.CheckSquare className="w-5 h-5 mx-auto" onClick={handleCheckBoxBtnClick} />
</button>
<button className="flex flex-row justify-center items-center p-1 w-auto h-auto mr-1 select-none rounded cursor-pointer text-gray-600 dark:text-gray-400 hover:bg-gray-300 dark:hover:bg-zinc-800 hover:shadow">
<Icon.Code className="w-5 h-5 mx-auto" onClick={handleCodeBlockBtnClick} />
</button>
<IconButton
onClick={handleUploadFileBtnClick}
className="flex flex-row justify-center items-center p-1 w-auto h-auto mr-1 select-none rounded cursor-pointer text-gray-600 dark:text-gray-400 hover:bg-gray-300 dark:hover:bg-zinc-800 hover:shadow"
>
<Icon.Image className="w-5 h-5 mx-auto" />
</IconButton>
<IconButton
onClick={handleAddMemoRelationBtnClick}
className="flex flex-row justify-center items-center p-1 w-auto h-auto mr-1 select-none rounded cursor-pointer text-gray-600 dark:text-gray-400 hover:bg-gray-300 dark:hover:bg-zinc-800 hover:shadow"
>
<Icon.Link className="w-5 h-5 mx-auto" />
</IconButton>
<IconButton onClick={handleCheckBoxBtnClick}>
<Icon.CheckSquare className="w-5 h-5 mx-auto" />
</IconButton>
<IconButton
onClick={handleCodeBlockBtnClick}
className="flex flex-row justify-center items-center p-1 w-auto h-auto mr-1 select-none rounded cursor-pointer text-gray-600 dark:text-gray-400 hover:bg-gray-300 dark:hover:bg-zinc-800 hover:shadow"
>
<Icon.Code className="w-5 h-5 mx-auto" />
</IconButton>
</div>
</div>
<ResourceListView resourceList={state.resourceList} setResourceList={handleSetResourceList} />