Skip to content

Commit

Permalink
chore(toolbar): Convert toolbar to card (#1269)
Browse files Browse the repository at this point in the history 
This sets up some groundwork for light mode - unfortunately light mode
also requires doing some codemirror styling as well as fixing the data
grid library's theming which seems to be a source of constant issues.
  • Loading branch information
@msfstef
msfstef committed May 16, 2024
1 parent f725bdd commit 52265c8
Show file tree
Hide file tree
Showing 4 changed files with 95 additions and 73 deletions.
5 changes: 5 additions & 0 deletions .changeset/short-hounds-train.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@electric-sql/debug-toolbar": patch
---

Convert toolbar container into rounded border card
62 changes: 37 additions & 25 deletions components/toolbar/src/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import 'codemirror/mode/sql/sql'
import './index.css'

import logo from './logo.svg'
import { Theme, Button, Box, Flex, Select, Text } from '@radix-ui/themes'
import { Theme, Button, Box, Flex, Select, Text, Card } from '@radix-ui/themes'

import ToolbarTabs from './tabs'
import { ToolbarInterface } from './api/interface'
Expand All @@ -31,6 +31,7 @@ export type ToolbarProps = {

function ElectricToolbar({ api }: ToolbarProps) {
const [hidden, setHidden] = useState(true)
const [appearance] = useState<'light' | 'dark'>('dark')
const [dbNames, setDbNames] = useState<Array<string>>([])
const [dbName, setDbName] = useState('')

Expand All @@ -45,41 +46,52 @@ function ElectricToolbar({ api }: ToolbarProps) {
}, [])

return (
<Theme asChild appearance="dark" accentColor="teal" grayColor="sage">
<Theme
asChild
appearance={appearance}
accentColor="teal"
grayColor="sage"
panelBackground="solid"
>
<Box
id="electric-core"
width={hidden ? '400px' : '100%'}
height="fit-content"
minHeight="auto"
p="2"
m={hidden ? '2' : '0'}
style={{
backgroundColor: 'transparent',
float: 'right',
pointerEvents: 'auto',
boxSizing: 'border-box',
}}
>
<Flex justify="between" flexGrow="1">
<Flex align="center" gap="1">
<img src={logo} width="30px" height="30px" alt="logo" />
<Text>ElectricSQL Debug Tools</Text>
<Card style={{ pointerEvents: 'auto' }}>
<Flex justify="between" flexGrow="1">
<Flex align="center" gap="1">
<img src={logo} width="30px" height="30px" alt="logo" />
<Text>ElectricSQL Debug Tools</Text>
</Flex>
<Flex gap="2">
{!hidden && (
<Select.Root
defaultValue={dbNames[0]}
onValueChange={setDbName}
>
<Select.Trigger />
<Select.Content container={getToolbarElem()}>
{dbNames.map((name) => (
<Select.Item key={name} value={name}>
{name}
</Select.Item>
))}
</Select.Content>
</Select.Root>
)}
<Button onClick={onToggle}>{hidden ? 'SHOW' : 'HIDE'}</Button>
</Flex>
</Flex>
<Flex gap="2">
{!hidden && (
<Select.Root defaultValue={dbNames[0]} onValueChange={setDbName}>
<Select.Trigger />
<Select.Content container={getToolbarElem()}>
{dbNames.map((name) => (
<Select.Item key={name} value={name}>
{name}
</Select.Item>
))}
</Select.Content>
</Select.Root>
)}
<Button onClick={onToggle}>{hidden ? 'SHOW' : 'HIDE'}</Button>
</Flex>
</Flex>
{!hidden && <ToolbarTabs dbName={dbName} api={api} />}
{!hidden && <ToolbarTabs dbName={dbName} api={api} />}
</Card>
</Box>
</Theme>
)
Expand Down
97 changes: 51 additions & 46 deletions components/toolbar/src/tabs/LocalDBTab.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import {
Badge,
Box,
Button,
Card,
DataList,
Flex,
Heading,
Expand Down Expand Up @@ -94,53 +95,57 @@ const TableDataItem = ({
</Badge>
</HoverCard.Trigger>

<HoverCard.Content container={getToolbarElem()}>
<Flex direction="column" minWidth="100px" gap="3">
<Heading>Schema</Heading>
{tblInfo.sql ? (
<CodeMirrorUnControlled
value={format(tblInfo.sql, {
language: 'sqlite',
tabWidth: 2,
expressionWidth: 20,
})}
options={{
readOnly: true,
tabSize: 2,
mode: 'sql',
theme: 'material',
lineNumbers: false,
}}
/>
) : (
<Table.Root>
<Table.Header>
<Table.Row>
<Table.ColumnHeaderCell>
Column Name
</Table.ColumnHeaderCell>
<Table.ColumnHeaderCell>
Type
</Table.ColumnHeaderCell>
<Table.ColumnHeaderCell>
Nullable
</Table.ColumnHeaderCell>
</Table.Row>
</Table.Header>
<Table.Body>
{tblInfo.columns.map((col) => (
<Table.Row key={col.name}>
<Table.Cell>{col.name}</Table.Cell>
<Table.Cell>{col.type?.toUpperCase()}</Table.Cell>
<Table.Cell>
{col.nullable ? 'YES' : 'NO'}
</Table.Cell>
<HoverCard.Content asChild container={getToolbarElem()}>
<Card>
<Flex direction="column" minWidth="100px" gap="3">
<Heading>Schema</Heading>
{tblInfo.sql ? (
<CodeMirrorUnControlled
value={format(tblInfo.sql, {
language: 'sqlite',
tabWidth: 2,
expressionWidth: 20,
})}
options={{
readOnly: true,
tabSize: 2,
mode: 'sql',
theme: 'material',
lineNumbers: false,
}}
/>
) : (
<Table.Root>
<Table.Header>
<Table.Row>
<Table.ColumnHeaderCell>
Column Name
</Table.ColumnHeaderCell>
<Table.ColumnHeaderCell>
Type
</Table.ColumnHeaderCell>
<Table.ColumnHeaderCell>
Nullable
</Table.ColumnHeaderCell>
</Table.Row>
))}
</Table.Body>
</Table.Root>
)}
</Flex>
</Table.Header>
<Table.Body>
{tblInfo.columns.map((col) => (
<Table.Row key={col.name}>
<Table.Cell>{col.name}</Table.Cell>
<Table.Cell>
{col.type?.toUpperCase()}
</Table.Cell>
<Table.Cell>
{col.nullable ? 'YES' : 'NO'}
</Table.Cell>
</Table.Row>
))}
</Table.Body>
</Table.Root>
)}
</Flex>
</Card>
</HoverCard.Content>
</HoverCard.Root>
))
Expand Down
4 changes: 2 additions & 2 deletions components/toolbar/src/utils/portal.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,8 @@ export const TOOLBAR_TEMPLATE_ID = `${TOOLBAR_ELEMENT_ID}_template`
export const getToolbarElem = (): HTMLElement =>
getToolbarContainer().shadowRoot!.getElementById(TOOLBAR_ELEMENT_ID)!

export const getToolbarContainer = (): HTMLIFrameElement =>
document.getElementById(TOOLBAR_CONTAINER_ID)! as HTMLIFrameElement
export const getToolbarContainer = (): HTMLElement =>
document.getElementById(TOOLBAR_CONTAINER_ID)! as HTMLElement

export const getToolbarTemplate = (): HTMLTemplateElement =>
document.getElementById(TOOLBAR_TEMPLATE_ID) as HTMLTemplateElement

0 comments on commit 52265c8

Please sign in to comment.