refactor: adjust styles

unit-mesh · Dec 2, 2023 · c5e755c · c5e755c
1 parent e77f27e
commit c5e755c
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 16 deletions.
diff --git a/editor/src/components/editor/editor.css b/editor/src/components/editor/editor.css
@@ -59,21 +59,24 @@
     all: unset;
 }
 
+.toolbar-menu {
+    box-shadow: 0 2px 2px var(--black-a7);
+}
+
 .ToggleGroup {
     display: flex;
     border-radius: 4px;
     justify-content: center;
     width: fit-content;
     margin: 0 auto;
-    box-shadow: 0 2px 2px var(--black-a7);
 }
 
 .ToggleGroupItem {
     cursor: pointer;
     background-color: white;
     color: var(--mauve-11);
-    height: 35px;
-    width: 35px;
+    height: 38px;
+    width: 38px;
     display: flex;
     font-size: 15px;
     line-height: 1;
@@ -291,6 +294,7 @@
     background: var(--mauve-1);
     border: 1px solid var(--mauve-5);
     border-radius: 4px;
+    height: 40px;
     box-shadow: var(--black-a6) 0 3px 16px -5px, var(--black-a2) 0px 1px 3px;
 }
 
@@ -300,6 +304,19 @@
     margin-top: 4px;
 }
 
+.toolbar-ai-button {
+    height: 38px;
+}
+
+.bubble-dropdown button {
+    height: 38px;
+    width: 96px;
+}
+
+.bubble-dropdown button {
+    padding: 4px;
+}
+
 .node-quick-command {
     width: 720px;
     margin: 0 auto;

diff --git a/editor/src/components/editor/live-editor.tsx b/editor/src/components/editor/live-editor.tsx
@@ -18,7 +18,7 @@ import { createQuickBox } from '@/components/editor/extensions/quick-box/quick-b
 import { AdviceExtension } from '@/components/editor/extensions/advice/advice-extension';
 
 import TrackChangeExtension from '@/components/editor/extensions/diff/track-change-extension'
-import { ToolBar } from './menu/tool-bar'
+import { ToolbarMenu } from './menu/toolbar-menu'
 import { CustomEditorCommands } from './action/custom-editor-commands'
 import { Sidebar } from './components/sidebar'
 
@@ -99,8 +99,8 @@ const LiveEditor = () => {
 
 		<div className={'w-full editor-section'}>
 			{editor && <Settings editor={editor}/>}
+			{editor && <ToolbarMenu className={'toolbar-menu'} editor={editor}/>}
 			<div className={'editor-main'}>
-				{editor && <ToolBar editor={editor}/>}
 				<EditorContent editor={editor}/>
 				<div>{editor && <MenuBubble editor={editor}/>}</div>
 

diff --git a/editor/src/components/editor/menu/menu-bubble.tsx b/editor/src/components/editor/menu/menu-bubble.tsx
@@ -4,7 +4,6 @@ import { useTranslation } from 'react-i18next'
 import { Editor } from "@tiptap/core";
 import { BookmarkIcon, CookieIcon } from "@radix-ui/react-icons";
 import { Button } from "@radix-ui/themes";
-import BounceLoader from "react-spinners/BounceLoader";
 import {
 	ChangeForm,
 	DefinedVariable,
@@ -13,14 +12,12 @@ import {
 	PromptAction
 } from '@/components/editor/defs/custom-action.type'
 import { newAdvice } from '@/components/editor/extensions/advice/advice';
-import { Toolbar } from "@radix-ui/react-toolbar";
-import { ToolBar } from "@/components/editor/menu/tool-bar";
+import { ToolbarMenu } from "@/components/editor/menu/toolbar-menu";
 
 export const MenuBubble = ({ editor }: {
 	editor: Editor
 }) => {
 	const [loading, setLoading] = React.useState(false);
-	const { t, i18n } = useTranslation()
 	const [isOpen, setIsOpen] = React.useState(false);
 
 	const [smartMenus, setSmartMenus] = React.useState<PromptAction[]>([]);
@@ -53,16 +50,16 @@ export const MenuBubble = ({ editor }: {
 
 	const handleToggle = () => setIsOpen(!isOpen);
 
-	return <BubbleMenu className={'bubble-menu-group w-64'} editor={editor} tippyOptions={{ duration: 100 }}>
+	return <BubbleMenu className={`bubble-menu-group w-64`} editor={editor} tippyOptions={{ duration: 100 }}>
 		<div className={'bubble-menu-tier1'}>
-			<div className="dropdown">
-				<Button variant="soft" onClick={handleToggle}>
+			<div className="bubble-dropdown">
+				<Button variant="soft" onClick={handleToggle} className={'bg-pink-500 text-white'}>
 					Ask AI
 					<CookieIcon/>
 				</Button>
 			</div>
 			<div className="smart-menu">
-				<ToolBar editor={editor} isBubbleMenu={true}/>
+				<ToolbarMenu editor={editor} isBubbleMenu={true}/>
 			</div>
 		</div>
 		<div className={'ask-ai-dropdown'}>

diff --git a/editor/src/components/editor/menu/toolbar-ai-dropdown.tsx b/editor/src/components/editor/menu/toolbar-ai-dropdown.tsx
@@ -20,7 +20,7 @@ export const ToolbarAiDropdown = ({ editor }: {
 			setMenus(aiActions)
 		}}>
 			<DropdownMenu.Trigger>
-				<Button className={'bg-pink-500 text-white'}>
+				<Button className={'bg-pink-500 text-white toolbar-ai-button'}>
 					AI
 					<CookieIcon/>
 				</Button>

diff --git a/...r/src/components/editor/menu/tool-bar.tsx → ...c/components/editor/menu/toolbar-menu.tsx b/...r/src/components/editor/menu/tool-bar.tsx → ...c/components/editor/menu/toolbar-menu.tsx
@@ -18,12 +18,13 @@ import { ToolbarAiDropdown } from '@/components/editor/menu/toolbar-ai-dropdown'
 export interface ToolbarProps {
 	editor: Editor
 	isBubbleMenu?: boolean // 是否是气泡菜单
+	className?: string
 }
 
-export const ToolBar = ({ editor, isBubbleMenu = false }: ToolbarProps) => {
+export const ToolbarMenu = ({ editor, isBubbleMenu = false, className }: ToolbarProps) => {
 	return (
 		<ToggleGroup.Root
-			className={'ToggleGroup'}
+			className={`${className} ToggleGroup`}
 			type="single"
 			defaultValue="center"
 			aria-label="Text alignment"