url/homelable
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fixed the container mode toggle styling for backward compatability and proper padding to remain centered in it's parent element

Browse Source
This commit is contained in:
findthelorax
2026-04-21 11:51:29 -04:00
committed by Remy
parent 38e6604f50
commit 78b47384da
3 changed files with 6 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/canvas/nodes/index.tsx
+1 -1
View File
@@ -22,5 +22,5 @@ export const CameraNode = (props: N) => <BaseNode {...props} icon={Cctv} />
export const PrinterNode = (props: N) => <BaseNode {...props} icon={Printer} /> export const PrinterNode = (props: N) => <BaseNode {...props} icon={Printer} />
export const ComputerNode = (props: N) => <BaseNode {...props} icon={Monitor} /> export const ComputerNode = (props: N) => <BaseNode {...props} icon={Monitor} />
export const CplNode = (props: N) => <BaseNode {...props} icon={PlugZap} /> export const CplNode = (props: N) => <BaseNode {...props} icon={PlugZap} />
export const DockerNode = (props: N) => <BaseNode {...props} icon={Anchor} /> export const DockerHostNode = (props: N) => <BaseNode {...props} icon={Anchor} />
export const GenericNode = (props: N) => <BaseNode {...props} icon={Circle} /> export const GenericNode = (props: N) => <BaseNode {...props} icon={Circle} />
frontend/src/components/canvas/nodes/nodeTypes.ts
+2 -2
View File
@@ -1,4 +1,4 @@
import { IspNode, RouterNode, SwitchNode, ServerNode, VmNode, LxcNode, NasNode, IotNode, ApNode, CameraNode, PrinterNode, ComputerNode, CplNode, DockerNode, GenericNode } from './index' import { IspNode, RouterNode, SwitchNode, ServerNode, VmNode, LxcNode, NasNode, IotNode, ApNode, CameraNode, PrinterNode, ComputerNode, CplNode, DockerHostNode, GenericNode } from './index'
import { ProxmoxGroupNode } from './ProxmoxGroupNode' import { ProxmoxGroupNode } from './ProxmoxGroupNode'
import { GroupRectNode } from './GroupRectNode' import { GroupRectNode } from './GroupRectNode'
import { GroupNode } from './GroupNode' import { GroupNode } from './GroupNode'
@@ -18,7 +18,7 @@ export const nodeTypes = {
printer: PrinterNode, printer: PrinterNode,
computer: ComputerNode, computer: ComputerNode,
cpl: CplNode, cpl: CplNode,
docker_host: DockerNode, docker_host: DockerHostNode,
generic: GenericNode, generic: GenericNode,
groupRect: GroupRectNode, groupRect: GroupRectNode,
group: GroupNode, group: GroupNode,
frontend/src/components/modals/NodeModal.tsx
+3 -3
View File
@@ -296,12 +296,12 @@ export function NodeModal({ open, onClose, onSubmit, initial, title = 'Add Node'
role="switch" role="switch"
aria-checked={!!form.container_mode} aria-checked={!!form.container_mode}
onClick={() => set('container_mode', !form.container_mode)} onClick={() => set('container_mode', !form.container_mode)}
className="relative inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus:outline-none" className="relative inline-flex h-5 w-9 shrink-0 cursor-pointer rounded-full transition-colors focus:outline-none"
style={{ background: form.container_mode ? '#ff6e00' : '#30363d' }} style={{ background: form.container_mode ? '#ff6e00' : '#30363d' }}
> >
<span <span
className="pointer-events-none inline-block h-4 w-4 rounded-full bg-white shadow-sm transition-transform" className="pointer-events-none absolute top-0.5 h-4 w-4 rounded-full bg-white shadow-sm transition-all"
style={{ transform: form.container_mode ? 'translateX(16px)' : 'translateX(0)' }} style={{ left: form.container_mode ? 'calc(100% - 18px)' : '2px' }}
/> />
</button> </button>
</div> </div>