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_ACCESSOR_KEY,
CONNECTIONS_TABLE_INITIAL_COLUMN_ORDER, CONNECTIONS_TABLE_INITIAL_COLUMN_ORDER,
CONNECTIONS_TABLE_INITIAL_COLUMN_VISIBILITY, CONNECTIONS_TABLE_INITIAL_COLUMN_VISIBILITY,
TAILWINDCSS_SIZE,
} from '~/constants' } from '~/constants'
import { formatTimeFromNow } from '~/helpers' import { formatTimeFromNow } from '~/helpers'
import { secret, tableSize, useRequest, wsEndpointURL } from '~/signals' import {
secret,
tableSizeClassName,
useRequest,
wsEndpointURL,
} from '~/signals'
import type { Connection } from '~/types' import type { Connection } from '~/types'
type ConnectionWithSpeed = Connection & { type ConnectionWithSpeed = Connection & {
@ -313,28 +317,6 @@ export default () => {
getCoreRowModel: getCoreRowModel(), 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 = () => [ const tabs = () => [
{ {
type: ActiveTab.activeConnections, type: ActiveTab.activeConnections,

View File

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

View File

@ -54,6 +54,29 @@ export const [tableSize, setTableSize] = makePersisted(
createSignal<TAILWINDCSS_SIZE>(TAILWINDCSS_SIZE.XS), createSignal<TAILWINDCSS_SIZE>(TAILWINDCSS_SIZE.XS),
{ name: 'tableSize', storage: localStorage }, { 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] = export const [requestTimeoutDuration, setRequestTimeoutDuration] =
makePersisted(createSignal(10000), { makePersisted(createSignal(10000), {
name: 'requestTimeoutDuration', name: 'requestTimeoutDuration',