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 && ( {showExecuteButton && (
<Tooltip title={t("common.execute")} side="top"> <Tooltip title={t("common.execute")} side="top">
<button <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} onClick={handleExecuteQuery}
> >
<Icon.IoPlay className="w-full h-auto" /> <Icon.IoPlay className="w-full h-auto" />

17
src/components/QueryDrawer.tsx
View File

@ -6,6 +6,7 @@ import TextareaAutosize from "react-textarea-autosize";
import { useQueryStore } from "@/store"; import { useQueryStore } from "@/store";
import { ExecutionResult, ResponseObject } from "@/types"; import { ExecutionResult, ResponseObject } from "@/types";
import { checkStatementIsSelect, getMessageFromExecutionResult } from "@/utils"; import { checkStatementIsSelect, getMessageFromExecutionResult } from "@/utils";
import Tooltip from "./kit/Tooltip";
import Icon from "./Icon"; import Icon from "./Icon";
import EngineIcon from "./EngineIcon"; import EngineIcon from "./EngineIcon";
import DataTableView from "./ExecutionView/DataTableView"; import DataTableView from "./ExecutionView/DataTableView";
@ -104,7 +105,7 @@ const QueryDrawer = () => {
{showExecutionWarningBanner && <ExecutionWarningBanner className="rounded-lg mt-4" />} {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"> <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 <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} value={statement}
rows={1} rows={1}
minRows={1} minRows={1}
@ -112,12 +113,14 @@ const QueryDrawer = () => {
placeholder="Enter your SQL statement here..." placeholder="Enter your SQL statement here..."
onChange={(e) => setStatement(e.target.value)} onChange={(e) => setStatement(e.target.value)}
/> />
<button <Tooltip title={t("common.execute")} side="top">
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" <button
onClick={() => executeStatement(statement)} 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" /> >
</button> <Icon.IoPlay className="w-full h-auto" />
</button>
</Tooltip>
</div> </div>
<div className="w-full flex flex-col justify-start items-start mt-4"> <div className="w-full flex flex-col justify-start items-start mt-4">
{isLoading ? ( {isLoading ? (

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

@ -17,7 +17,7 @@ const Tooltip = (props: Props) => {
<TooltipUI.Trigger asChild>{children}</TooltipUI.Trigger> <TooltipUI.Trigger asChild>{children}</TooltipUI.Trigger>
<TooltipUI.Portal> <TooltipUI.Portal>
<TooltipUI.Content <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} side={side}
sideOffset={6} sideOffset={6}
> >