yadunut/clan-core
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

UI: fix modal, rounding, min-width and other poperties

Browse Source
This commit is contained in:
Johannes Kirschbauer
2025-01-03 16:36:07 +01:00
parent 1def061ccc
commit 9702204b00
1 changed files with 9 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
pkgs/webview-ui/app/src/components/modal/index.tsx
View File

@@ -9,6 +9,7 @@ interface ModalProps {
handleClose: () => void; handleClose: () => void;
title: string; title: string;
children: JSX.Element; children: JSX.Element;
class?: string;
} }
export const Modal = (props: ModalProps) => { export const Modal = (props: ModalProps) => {
const [dragging, setDragging] = createSignal(false); const [dragging, setDragging] = createSignal(false);
@@ -46,7 +47,10 @@ export const Modal = (props: ModalProps) => {
/> />
<Dialog.Content <Dialog.Content
class="absolute left-1/3 top-1/3 z-50 min-w-[320px] rounded-md border border-def-4 focus-visible:outline-none" class={cx(
"overflow-hidden absolute left-1/3 top-1/3 z-50 min-w-[560px] rounded-md border border-def-4 focus-visible:outline-none",
props.class,
)}
classList={{ classList={{
"!cursor-grabbing": dragging(), "!cursor-grabbing": dragging(),
[cx("scale-105 transition-transform")]: dragging(), [cx("scale-105 transition-transform")]: dragging(),
@@ -63,7 +67,7 @@ export const Modal = (props: ModalProps) => {
> >
<Dialog.Label <Dialog.Label
as="div" as="div"
class="flex w-full justify-center rounded-t-md border-b-2 px-4 py-2 align-middle bg-def-3 border-def-5" class="flex w-full justify-center border-b-2 px-4 py-2 align-middle bg-def-3 border-def-5"
onMouseDown={handleMouseDown} onMouseDown={handleMouseDown}
> >
<div <div
@@ -79,7 +83,9 @@ export const Modal = (props: ModalProps) => {
<hr class="h-px w-full border-none bg-secondary-300" /> <hr class="h-px w-full border-none bg-secondary-300" />
<hr class="h-px w-full border-none bg-secondary-300" /> <hr class="h-px w-full border-none bg-secondary-300" />
</div> </div>
<span class="mx-2"> {props.title}</span> <span class="mx-2 select-none whitespace-nowrap">
{props.title}
</span>
<div <div
class="flex w-full cursor-move flex-col gap-px py-1 " class="flex w-full cursor-move flex-col gap-px py-1 "
classList={{ classList={{