Add subapps and their style.

This commit is contained in:
Madeorsk 2024-07-14 15:21:44 +02:00
parent c2485dfb1a
commit 7a9062e8cd
Signed by: Madeorsk
SSH key fingerprint: SHA256:J9G0ofIOLKf7kyS2IfrMqtMaPdfsk1W02+oGueZzDDU
5 changed files with 166 additions and 1 deletions

View file

@ -26,10 +26,13 @@ import {ToggleSwitch} from "../src/Components/Forms/ToggleSwitch";
import {Step, Steps} from "../src/Components/Steps/Steps";
import {AsyncPaginate, AutoPaginate, Paginate} from "../src/Components/Pagination/Paginate";
import {useCurtains} from "../src/Components/Curtains/Curtains";
import {Subapp, useSubapps} from "../src/Components/Subapps/Subapps";
import {DemoSubapp} from "./DemoSubapp";
export function DemoApp()
{
const curtains = useCurtains();
const subapps = useSubapps();
const [datetime, setDatetime] = useState(null);
@ -452,7 +455,24 @@ export function DemoApp()
<h3>Subapps</h3>
<Card>
<button>Open a subapp</button>
<button onClick={() => {
subapps.open(
<Subapp title={"Title test"}>
<p>A test content.</p>
<p>
Test button :
<Float mode={"click"} content={"Test content."}>
<button>A button with floating content</button>
</Float>
</p>
</Subapp>
)
}}>Open a subapp
</button>
<button onClick={() => { subapps.open(<DemoSubapp />) }}>
Complex subapp with component
</button>
</Card>
<h3>Modals</h3>

24
demo/DemoSubapp.tsx Normal file
View file

@ -0,0 +1,24 @@
import React from "react";
import {Subapp, useSubapp} from "../src/Components/Subapps/Subapps";
import {Card} from "../src/Components/Card";
/**
* A demo Subapp component.
*/
export function DemoSubapp()
{
// Get subapp close function.
const {uuid, close} = useSubapp();
return (
<Subapp title={"My complex subapp"}>
<Card>
<p>This is a complex subapp.</p>
<p>UUID : <code>{uuid}</code></p>
<button onClick={close}>Close the subapp</button>
</Card>
</Subapp>
);
}

View file

@ -0,0 +1,51 @@
import React from "react";
import {X} from "@phosphor-icons/react";
import {useCurtain, useCurtains} from "../Curtains/Curtains";
/**
* More natural name of useCurtains for subapps.
* @see useCurtains
*/
export const useSubapps = useCurtains;
/**
* More natural name of useCurtain for subapps.
* @see useCurtain
*/
export const useSubapp = useCurtain;
/**
* Subapp main component.
*/
export function Subapp({title, closable, children}: React.PropsWithChildren<{
/**
* Subapp title.
*/
title?: string;
/**
* Can disable close button.
*/
closable?: boolean;
}>)
{
// Subapp is closable by default.
closable = closable !== undefined ? closable : true;
// Subapp state.
const {close} = useSubapp();
return (
<div className={"subapp"}>
<header>
<h1>{title ?? ""}</h1>
<button className={"icon-only close"} onClick={close} disabled={!closable}><X size={32}/></button>
</header>
<main>
{children}
</main>
</div>
);
}

View file

@ -15,4 +15,5 @@
@import "components/_select";
@import "components/_steps";
@import "components/_steps-counter";
@import "components/_subapp";
@import "components/_table";

View file

@ -0,0 +1,69 @@
@subapp-margin: 1.5em;
.curtain > .subapp
{
position: absolute;
top: @subapp-margin;
left: @subapp-margin;
width: calc(100% - (2 * @subapp-margin));
height: calc(100% - (2 * @subapp-margin));
border-radius: 0.25em;
box-sizing: border-box;
background: var(--background);
overflow: auto;
> header
{
display: flex;
flex-direction: row;
align-items: center;
> h1
{
flex: 1;
margin: auto;
padding: 1em 1em;
font-size: 1.66em;
font-weight: 650;
}
> .close
{
transition: opacity 0.2s ease;
width: 3em;
height: 3em;
margin: auto 1em;
padding: 0;
border-radius: 2em;
box-shadow: 0 0 0 0 transparent;
outline: none;
border: none;
background: none;
color: var(--foreground-lightest);
opacity: 0.6;
&:hover
{
opacity: 1;
}
&:disabled
{
opacity: 0.33;
}
}
}
> main
{
padding: 1em;
}
}