Add subapps and their style.
This commit is contained in:
parent
c2485dfb1a
commit
7a9062e8cd
5 changed files with 166 additions and 1 deletions
|
@ -26,10 +26,13 @@ import {ToggleSwitch} from "../src/Components/Forms/ToggleSwitch";
|
||||||
import {Step, Steps} from "../src/Components/Steps/Steps";
|
import {Step, Steps} from "../src/Components/Steps/Steps";
|
||||||
import {AsyncPaginate, AutoPaginate, Paginate} from "../src/Components/Pagination/Paginate";
|
import {AsyncPaginate, AutoPaginate, Paginate} from "../src/Components/Pagination/Paginate";
|
||||||
import {useCurtains} from "../src/Components/Curtains/Curtains";
|
import {useCurtains} from "../src/Components/Curtains/Curtains";
|
||||||
|
import {Subapp, useSubapps} from "../src/Components/Subapps/Subapps";
|
||||||
|
import {DemoSubapp} from "./DemoSubapp";
|
||||||
|
|
||||||
export function DemoApp()
|
export function DemoApp()
|
||||||
{
|
{
|
||||||
const curtains = useCurtains();
|
const curtains = useCurtains();
|
||||||
|
const subapps = useSubapps();
|
||||||
|
|
||||||
const [datetime, setDatetime] = useState(null);
|
const [datetime, setDatetime] = useState(null);
|
||||||
|
|
||||||
|
@ -452,7 +455,24 @@ export function DemoApp()
|
||||||
<h3>Subapps</h3>
|
<h3>Subapps</h3>
|
||||||
|
|
||||||
<Card>
|
<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>
|
</Card>
|
||||||
|
|
||||||
<h3>Modals</h3>
|
<h3>Modals</h3>
|
||||||
|
|
24
demo/DemoSubapp.tsx
Normal file
24
demo/DemoSubapp.tsx
Normal 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>
|
||||||
|
);
|
||||||
|
}
|
51
src/Components/Subapps/Subapps.tsx
Normal file
51
src/Components/Subapps/Subapps.tsx
Normal 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>
|
||||||
|
);
|
||||||
|
}
|
|
@ -15,4 +15,5 @@
|
||||||
@import "components/_select";
|
@import "components/_select";
|
||||||
@import "components/_steps";
|
@import "components/_steps";
|
||||||
@import "components/_steps-counter";
|
@import "components/_steps-counter";
|
||||||
|
@import "components/_subapp";
|
||||||
@import "components/_table";
|
@import "components/_table";
|
||||||
|
|
69
src/styles/components/_subapp.less
Normal file
69
src/styles/components/_subapp.less
Normal 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;
|
||||||
|
}
|
||||||
|
}
|
Loading…
Reference in a new issue