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

feat: add connection title field

Browse Source
This commit is contained in:
steven
2023-04-18 11:27:27 +08:00
parent 911c801f04
commit 66320c892d
3 changed files with 23 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
src/components/ConnectionSidebar.tsx
View File

@ -175,24 +175,25 @@ const ConnectionSidebar = () => {
<img src="/chat-logo-bot.webp" className="w-7 h-auto mx-auto" alt="" /> <img src="/chat-logo-bot.webp" className="w-7 h-auto mx-auto" alt="" />
</button> </button>
{connectionList.map((connection) => ( {connectionList.map((connection) => (
<button <Tooltip key={connection.id} title={connection.title} side="right">
key={connection.id} <button
className={`relative w-full h-14 rounded-l-lg p-2 mt-2 group ${ className={`relative w-full h-14 rounded-l-lg p-2 mt-2 group ${
currentConnectionCtx?.connection.id === connection.id && "bg-gray-100 dark:bg-zinc-700 shadow" currentConnectionCtx?.connection.id === connection.id && "bg-gray-100 dark:bg-zinc-700 shadow"
}`} }`}
onClick={() => handleConnectionSelect(connection)} onClick={() => handleConnectionSelect(connection)}
>
<span
className="absolute right-0.5 -mt-1.5 opacity-60 hidden group-hover:block hover:opacity-80"
onClick={(e) => {
e.stopPropagation();
handleEditConnection(connection);
}}
> >
<Icon.FiEdit3 className="w-3.5 h-auto dark:text-gray-300" /> <span
</span> className="absolute right-0.5 -mt-1.5 opacity-60 hidden group-hover:block hover:opacity-80"
<EngineIcon engine={connection.engineType} className="w-auto h-full mx-auto dark:text-gray-300" /> onClick={(e) => {
</button> e.stopPropagation();
handleEditConnection(connection);
}}
>
<Icon.FiEdit3 className="w-3.5 h-auto dark:text-gray-300" />
</span>
<EngineIcon engine={connection.engineType} className="w-auto h-full mx-auto dark:text-gray-300" />
</button>
</Tooltip>
))} ))}
<Tooltip title={t("connection.new")} side="right"> <Tooltip title={t("connection.new")} side="right">
<button <button

4
src/components/CreateConnectionModal.tsx
View File

@ -217,6 +217,10 @@ const CreateConnectionModal = (props: Props) => {
onValueChange={(value) => setPartialConnection({ engineType: value as Engine })} onValueChange={(value) => setPartialConnection({ engineType: value as Engine })}
/> />
</div> </div>
<div className="w-full flex flex-col">
<label className="block text-sm font-medium text-gray-700 mb-1">Title</label>
<TextField placeholder="Title" value={connection.title} onChange={(value) => setPartialConnection({ title: value })} />
</div>
<div className="w-full flex flex-col"> <div className="w-full flex flex-col">
<label className="block text-sm font-medium text-gray-700 mb-1">Host</label> <label className="block text-sm font-medium text-gray-700 mb-1">Host</label>
<TextField placeholder="Connect host" value={connection.host} onChange={(value) => setPartialConnection({ host: value })} /> <TextField placeholder="Connect host" value={connection.host} onChange={(value) => setPartialConnection({ host: value })} />

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

@ -20,6 +20,7 @@ const Tooltip = (props: Props) => {
className="bg-zinc-800 text-gray-200 dark:bg-black text-sm p-1 px-2 rounded-md z-[99999]" 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}
hidden={title === ""}
> >
{title} {title}
<TooltipUI.Arrow /> <TooltipUI.Arrow />