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 {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
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/_steps";
|
||||
@import "components/_steps-counter";
|
||||
@import "components/_subapp";
|
||||
@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