fix(logs): table size

This commit is contained in:
kunish 2023-09-06 03:08:18 +08:00
parent d7386fc0ca
commit 3a2560f152
No known key found for this signature in database
GPG Key ID: 647A12B4F782C430
3 changed files with 33 additions and 26 deletions

View File

@ -36,10 +36,14 @@ import {
CONNECTIONS_TABLE_ACCESSOR_KEY,
CONNECTIONS_TABLE_INITIAL_COLUMN_ORDER,
CONNECTIONS_TABLE_INITIAL_COLUMN_VISIBILITY,
TAILWINDCSS_SIZE,
} from '~/constants'
import { formatTimeFromNow } from '~/helpers'
import { secret, tableSize, useRequest, wsEndpointURL } from '~/signals'
import {
secret,
tableSizeClassName,
useRequest,
wsEndpointURL,
} from '~/signals'
import type { Connection } from '~/types'
type ConnectionWithSpeed = Connection & {
@ -313,28 +317,6 @@ export default () => {
getCoreRowModel: getCoreRowModel(),
})
const tableSizeClassName = () => {
const size = tableSize()
let className = 'table-xs'
switch (size) {
case TAILWINDCSS_SIZE.XS:
className = 'table-xs'
break
case TAILWINDCSS_SIZE.SM:
className = 'table-sm'
break
case TAILWINDCSS_SIZE.MD:
className = 'table-md'
break
case TAILWINDCSS_SIZE.LG:
className = 'table-lg'
break
}
return className
}
const tabs = () => [
{
type: ActiveTab.activeConnections,

View File

@ -9,7 +9,7 @@ import {
} from '@tanstack/solid-table'
import { For, createEffect, createSignal } from 'solid-js'
import { twMerge } from 'tailwind-merge'
import { secret, tableSize, wsEndpointURL } from '~/signals'
import { secret, tableSizeClassName, wsEndpointURL } from '~/signals'
import { Log } from '~/types'
type LogWithSeq = Log & { seq: number }
@ -76,7 +76,9 @@ export default () => {
/>
<div class="overflow-x-auto whitespace-nowrap rounded-md bg-base-300">
<table class={twMerge(tableSize(), 'table relative rounded-none')}>
<table
class={twMerge(tableSizeClassName(), 'table relative rounded-none')}
>
<thead class="sticky top-0 z-10">
<For each={table.getHeaderGroups()}>
{(headerGroup) => (

View File

@ -54,6 +54,29 @@ export const [tableSize, setTableSize] = makePersisted(
createSignal<TAILWINDCSS_SIZE>(TAILWINDCSS_SIZE.XS),
{ name: 'tableSize', storage: localStorage },
)
export const tableSizeClassName = () => {
const size = tableSize()
let className = 'table-xs'
switch (size) {
case TAILWINDCSS_SIZE.XS:
className = 'table-xs'
break
case TAILWINDCSS_SIZE.SM:
className = 'table-sm'
break
case TAILWINDCSS_SIZE.MD:
className = 'table-md'
break
case TAILWINDCSS_SIZE.LG:
className = 'table-lg'
break
}
return className
}
export const [requestTimeoutDuration, setRequestTimeoutDuration] =
makePersisted(createSignal(10000), {
name: 'requestTimeoutDuration',