mirror of
https://github.com/MetaCubeX/metacubexd.git
synced 2024-11-27 10:44:02 +08:00
feat: truncate proxy node name
This commit is contained in:
parent
8e377e8282
commit
6db7ceddac
8
.vscode/settings.json
vendored
Normal file
8
.vscode/settings.json
vendored
Normal file
@ -0,0 +1,8 @@
|
||||
{
|
||||
"tailwindCSS.classAttributes": [
|
||||
"class",
|
||||
"className",
|
||||
"ngClass",
|
||||
".*ClassName*"
|
||||
]
|
||||
}
|
@ -12,17 +12,22 @@ const Collapse: ParentComponent<Props> = (props) => {
|
||||
const { title, content, onCollapse } = props
|
||||
|
||||
const getCollapseClassName = () => {
|
||||
return props.isOpen ? 'collapse-open' : 'collapse-close'
|
||||
const openedClassName = 'collapse-open'
|
||||
const closedClassName = 'collapse-close'
|
||||
return props.isOpen ? openedClassName : closedClassName
|
||||
}
|
||||
|
||||
const getCollapseContentClassName = () => {
|
||||
return props.isOpen ? 'opacity-100' : 'opacity-0 scale-y-0'
|
||||
const openedClassName = 'opacity-100'
|
||||
const closedClassName = 'opacity-0 scale-y-0'
|
||||
return props.isOpen ? openedClassName : closedClassName
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
class={twMerge(
|
||||
getCollapseClassName(),
|
||||
'collapse collapse-arrow border-secondary bg-base-200 p-1',
|
||||
'collapse collapse-arrow overflow-visible border-secondary bg-base-200 p-1',
|
||||
)}
|
||||
>
|
||||
<div
|
||||
@ -34,7 +39,7 @@ const Collapse: ParentComponent<Props> = (props) => {
|
||||
<div
|
||||
class={twMerge(
|
||||
getCollapseContentClassName(),
|
||||
'collapse-content grid grid-cols-1 gap-2 overflow-hidden transition-opacity duration-1000 sm:grid-cols-3 lg:grid-cols-5',
|
||||
'collapse-content grid grid-cols-1 gap-2 transition-opacity duration-1000 sm:grid-cols-3 lg:grid-cols-5',
|
||||
)}
|
||||
>
|
||||
{content}
|
||||
|
@ -17,6 +17,7 @@ export default (props: {
|
||||
|
||||
return <span>{delay}ms</span>
|
||||
}
|
||||
console.log(proxyName)
|
||||
|
||||
return (
|
||||
<div
|
||||
@ -24,12 +25,13 @@ export default (props: {
|
||||
isSelected
|
||||
? 'border-primary bg-success-content text-success'
|
||||
: 'border-secondary',
|
||||
onClick ? 'cursor-pointer' : '',
|
||||
'card card-bordered card-compact m-1 flex-row justify-between border-secondary p-4',
|
||||
onClick && 'cursor-pointer',
|
||||
'card card-bordered tooltip tooltip-bottom card-compact flex flex-row justify-between gap-2 p-4',
|
||||
)}
|
||||
onClick={() => onClick?.()}
|
||||
data-tip={proxyName}
|
||||
>
|
||||
<span class="mr-2 overflow-hidden whitespace-nowrap">{proxyName}</span>
|
||||
<span class="truncate">{proxyName}</span>
|
||||
<span>{Delay(proxyName)}</span>
|
||||
</div>
|
||||
)
|
||||
|
@ -41,8 +41,9 @@ export default () => {
|
||||
{(proxy) => {
|
||||
const title = (
|
||||
<>
|
||||
<div class="flex items-center">
|
||||
<span class="mr-3">{proxy.name}</span>
|
||||
<div class="flex items-center gap-2">
|
||||
<span>{proxy.name}</span>
|
||||
|
||||
<IconBrandSpeedtest
|
||||
class="cursor-pointer"
|
||||
onClick={(e) => onSpeedTestClick(e, proxy.name)}
|
||||
|
Loading…
Reference in New Issue
Block a user