opensource/sqlchat
1
0
Fork 0
mirror of https://github.com/sqlchat/sqlchat.git synced 2025-09-26 01:23:18 +08:00
Code Issues Packages Projects Releases Wiki Activity

chore: update execute button style

Browse Source
This commit is contained in:
steven
2023-04-14 16:50:59 +08:00
parent 9a47f87550
commit 355c97f14e
3 changed files with 12 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/CodeBlock.tsx
View File

@ -62,7 +62,7 @@ export const CodeBlock = (props: Props) => {
{showExecuteButton && (
<Tooltip title={t("common.execute")} side="top">
<button
className="flex justify-center items-center rounded bg-none w-6 h-6 p-1 text-xs text-white bg-gray-500 opacity-70 hover:opacity-100"
className="flex justify-center items-center rounded bg-none w-6 h-6 p-1 text-xs text-white bg-indigo-600 opacity-90 hover:opacity-100"
onClick={handleExecuteQuery}
>
<Icon.IoPlay className="w-full h-auto" />

9
src/components/QueryDrawer.tsx
View File

@ -6,6 +6,7 @@ import TextareaAutosize from "react-textarea-autosize";
import { useQueryStore } from "@/store";
import { ExecutionResult, ResponseObject } from "@/types";
import { checkStatementIsSelect, getMessageFromExecutionResult } from "@/utils";
import Tooltip from "./kit/Tooltip";
import Icon from "./Icon";
import EngineIcon from "./EngineIcon";
import DataTableView from "./ExecutionView/DataTableView";
@ -104,7 +105,7 @@ const QueryDrawer = () => {
{showExecutionWarningBanner && <ExecutionWarningBanner className="rounded-lg mt-4" />}
<div className="w-full h-auto mt-4 px-2 flex flex-row justify-between items-end border dark:border-zinc-700 rounded-lg overflow-clip">
<TextareaAutosize
className="w-full h-full outline-none border-none bg-transparent leading-6 pl-2 py-2 resize-none hide-scrollbar text-sm font-mono break-all"
className="w-full h-full outline-none border-none bg-transparent leading-6 pl-2 py-2 resize-none hide-scrollbar text-sm font-mono break-all whitespace-pre-wrap"
value={statement}
rows={1}
minRows={1}
@ -112,12 +113,14 @@ const QueryDrawer = () => {
placeholder="Enter your SQL statement here..."
onChange={(e) => setStatement(e.target.value)}
/>
<Tooltip title={t("common.execute")} side="top">
<button
className="w-8 p-1 -translate-y-1 cursor-pointer rounded-md hover:shadow hover:bg-gray-100 dark:hover:bg-zinc-700 disabled:cursor-not-allowed disabled:opacity-60"
className="w-6 p-1 -translate-y-2 cursor-pointer rounded-md hover:shadow opacity-90 hover:opacity-100 bg-indigo-600 text-gray-50 disabled:cursor-not-allowed disabled:opacity-60"
onClick={() => executeStatement(statement)}
>
<Icon.IoPlay className="w-full h-auto text-indigo-600" />
<Icon.IoPlay className="w-full h-auto" />
</button>
</Tooltip>
</div>
<div className="w-full flex flex-col justify-start items-start mt-4">
{isLoading ? (

2
src/components/kit/Tooltip.tsx
View File

@ -17,7 +17,7 @@ const Tooltip = (props: Props) => {
<TooltipUI.Trigger asChild>{children}</TooltipUI.Trigger>
<TooltipUI.Portal>
<TooltipUI.Content
className="bg-zinc-800 text-gray-200 dark:bg-black text-sm p-1 px-2 rounded-md z-[999]"
className="bg-zinc-800 text-gray-200 dark:bg-black text-sm p-1 px-2 rounded-md z-[99999]"
side={side}
sideOffset={6}
>