Pouzor
b1186bd7dd
Two native <select> elements sat in a header made of ghost buttons, and they looked it: their own border and background, an OS chevron, an unthemed popup. The type filter goes entirely — state, action and the CableLayer branch that read it, plus CABLE_TYPE_LABELS which had no other consumer. Filtering the cabling down to copper or fibre answered a question nobody asks of a rack they are looking at; the type still follows the port a patch starts from, which is where it matters. The visibility control becomes the shared ui/select, with a trigger sized and coloured like the buttons beside it — transparent until hovered — and an icon per option: pointer for on-hover, eye for always, crossed eye for hidden. Tests cover the trigger reflecting the active visibility, a pick writing it to the store, and CableLayer drawing ethernet and fibre alike. base-ui commits a selection on a real pointer sequence rather than a bare click, so that one goes through userEvent. ha-relevant: no
23 lines
574 B
TypeScript
23 lines
574 B
TypeScript
/** Shared defaults, kept out of the store to avoid a cycle with demoData. */
|
|
import type { CableType, PortType, RackStyle } from '@/types'
|
|
|
|
export const DEFAULT_RACK_STYLE: RackStyle = {
|
|
frame: '#1c2129',
|
|
rail: '#39424f',
|
|
interior: '#0d1117',
|
|
showNumbers: true,
|
|
enclosed: false,
|
|
}
|
|
|
|
export const CABLE_COLORS: Record<CableType, string> = {
|
|
ethernet: '#39d353',
|
|
fiber: '#f0a500',
|
|
}
|
|
|
|
/** Cable type implied by the port a patch starts from. */
|
|
export const PORT_CABLE_TYPE: Record<PortType, CableType> = {
|
|
rj45: 'ethernet',
|
|
sfp: 'fiber',
|
|
'sfp+': 'fiber',
|
|
}
|