Skip to content
Snippets Groups Projects
Commit 4e9518f5 authored by Remi Lazarini's avatar Remi Lazarini
Browse files

[Ivette] add animation on sidePanel + rename

parent 067b16f6
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
ivette/src/dome/renderer/frame/sidePanel.tsx → ivette/src/dome/renderer/frame/panel.tsx
+ 22
− 39
View file @ 4e9518f5
...@@ -21,26 +21,15 @@ ...@@ -21,26 +21,15 @@
/* ************************************************************************ */ /* ************************************************************************ */
/** /**
This package allow us to add a side panel inside the elements. This package allows us to add a panel inside positioned elements.
The main element is SidePanel. It provides some components to create the panel content:
This component needs two chidren :
```
<SidePANEL>
<PanelContent />
<A />
</SidePanel>
```
"A" is the content that needs a sidePanel,
the first child is the panel content.
This package provide some components to creating the side panel content :
* ListElement * ListElement
* Text * Text
* Actions * Actions
@packageDocumentation @packageDocumentation
@module dome/frame/sidePanel @module dome/frame/Panel
*/ */
import { Label } from 'dome/controls/labels'; import { Label } from 'dome/controls/labels';
...@@ -49,40 +38,34 @@ import { classes } from 'dome/misc/utils'; ...@@ -49,40 +38,34 @@ import { classes } from 'dome/misc/utils';
/* --------------------------------------------------------------------------*/ /* --------------------------------------------------------------------------*/
/* --- SidePanel Container */ /* --- Panel Container */
/* --------------------------------------------------------------------------*/ /* --------------------------------------------------------------------------*/
interface SidePanelProps { interface PanelProps {
className?: string; className?: string;
show?: boolean; show?: boolean;
position?: 'left' | 'right' position?: 'left' | 'right'
children: [JSX.Element, JSX.Element]; children: JSX.Element[];
} }
export const SidePanel = (props: SidePanelProps): JSX.Element => { export const Panel = (props: PanelProps): JSX.Element => {
const { show = true, className, position } = props; const { show = true, className, position } = props;
const classContainer = 'dome-sidepanel-container';
const classNames = classes( const classNames = classes(
classContainer, 'dome-xPanel',
position === 'left' ? classContainer+'-left' : classContainer+'-right', position === 'left' ? 'dome-xPanel-left' : 'dome-xPanel-right',
show ? 'dome-xPanel-open' : 'dome-xPanel-close',
className, className,
); );
const [A, panelContent] = props.children;
return ( return (
<div className='dome-sidepanel'> <div className={classNames}>
{ show && {props.children}
<div className={classNames}>
{panelContent}
</div>
}
{A}
</div> </div>
); );
}; };
/* --------------------------------------------------------------------------*/ /* --------------------------------------------------------------------------*/
/* --- SidePanel List */ /* --- Panel List */
/* --------------------------------------------------------------------------*/ /* --------------------------------------------------------------------------*/
export interface ElementProps { export interface ElementProps {
label: string; label: string;
...@@ -94,17 +77,17 @@ const Element = (props: ElementProps): JSX.Element => { ...@@ -94,17 +77,17 @@ const Element = (props: ElementProps): JSX.Element => {
const { label, onClickName, content } = props; const { label, onClickName, content } = props;
const nameClasse = classes( const nameClasse = classes(
'dome-sidepanel-element-name', 'dome-xPanel-element-name',
onClickName && "action" onClickName && "action"
); );
return ( return (
<div className='dome-sidepanel-element'> <div className='dome-xPanel-element'>
<div <div
className={nameClasse} className={nameClasse}
onClick={() => { if(onClickName) onClickName(); }} onClick={() => { if(onClickName) onClickName(); }}
>{label}</div> >{label}</div>
<div className='dome-sidepanel-element-content'> <div className='dome-xPanel-element-content'>
{content} {content}
</div> </div>
</div> </div>
...@@ -117,7 +100,7 @@ interface ListElementProps { ...@@ -117,7 +100,7 @@ interface ListElementProps {
export function ListElement(props: ListElementProps): JSX.Element { export function ListElement(props: ListElementProps): JSX.Element {
return ( return (
<div className='dome-sidepanel-list'> <div className='dome-xPanel-list'>
{ props.list.map((elt, k) => <Element { props.list.map((elt, k) => <Element
key={k} key={k}
{...elt} {...elt}
...@@ -128,7 +111,7 @@ export function ListElement(props: ListElementProps): JSX.Element { ...@@ -128,7 +111,7 @@ export function ListElement(props: ListElementProps): JSX.Element {
} }
/* --------------------------------------------------------------------------*/ /* --------------------------------------------------------------------------*/
/* --- SidePanel Text */ /* --- Panel Text */
/* --------------------------------------------------------------------------*/ /* --------------------------------------------------------------------------*/
interface TextProps { interface TextProps {
label: string; label: string;
...@@ -137,7 +120,7 @@ interface TextProps { ...@@ -137,7 +120,7 @@ interface TextProps {
export function Text(props: TextProps): JSX.Element { export function Text(props: TextProps): JSX.Element {
return ( return (
<div className='dome-sidepanel-text'> <div className='dome-xPanel-text'>
<Label> <Label>
{props.label} {props.label}
</Label> </Label>
...@@ -147,7 +130,7 @@ export function Text(props: TextProps): JSX.Element { ...@@ -147,7 +130,7 @@ export function Text(props: TextProps): JSX.Element {
} }
/* --------------------------------------------------------------------------*/ /* --------------------------------------------------------------------------*/
/* --- SidePanel Button */ /* ---Panel Button */
/* --------------------------------------------------------------------------*/ /* --------------------------------------------------------------------------*/
interface ActionsProps { interface ActionsProps {
children: React.ReactNode; children: React.ReactNode;
...@@ -155,7 +138,7 @@ interface ActionsProps { ...@@ -155,7 +138,7 @@ interface ActionsProps {
export function Actions(props: ActionsProps): JSX.Element { export function Actions(props: ActionsProps): JSX.Element {
return ( return (
<div className='dome-sidepanel-actions'> <div className='dome-xPanel-actions'>
{props.children} {props.children}
</div> </div>
); );
......
ivette/src/dome/renderer/frame/style.css
+ 66
− 55
View file @ 4e9518f5
...@@ -591,72 +591,83 @@ input:checked + .dome-xSwitch-slider:before { ...@@ -591,72 +591,83 @@ input:checked + .dome-xSwitch-slider:before {
/* -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- */
/* --- Side Panel --- */ /* --- Side Panel --- */
/* -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- */
.dome-sidepanel { .dome-xPanel {
position: relative; position: absolute;
width: 100%; top:0;
height: 100%; max-width: 350px;
max-height: 100%;
overflow-y: scroll;
z-index: 50;
background-color: var(--background-interaction);
padding: 10px 5px;
transition: transform .5s ease-in-out, opacity .5s;
&::-webkit-scrollbar { display: none; }
&.dome-xPanel-open {
transform: translateX(0px);
opacity: 1;
}
.dome-sidepanel-container { &.dome-xPanel-left {
position: absolute; border-radius: 0 20px 20px 0;
top:0;
max-width: 350px;
max-height: 100%;
overflow-y: scroll;
z-index: 50;
background-color: var(--background-interaction);
padding: 10px 5px;
&::-webkit-scrollbar { display: none; } &.dome-xPanel-close {
transform: translateX(-350px);
opacity: 0;
}
}
&.dome-sidepanel-container-left { &.dome-xPanel-right {
border-radius: 0 20px 20px 0; right: 0;
} border-radius: 20px 0 0 20px;
&.dome-sidepanel-container-right {
right: 0;
border-radius: 20px 0 0 20px;
}
.dome-sidepanel-text { &.dome-xPanel-close {
color: var(--text); transform: translateX(350px);
padding-bottom: 3px; opacity: 0;
} }
}
.dome-sidepanel-actions { .dome-xPanel-text {
display: flex; color: var(--text);
padding-bottom: 3px;
}
.dome-xPanel-actions {
display: flex;
button:hover,
button:hover label {
cursor: pointer;
}
}
.dome-xPanel-list {
.dome-xPanel-element {
margin:5px;
background-color: var(--background);
overflow-x: hidden;
border-radius: 0 10px 0 10px;
.dome-xPanel-element-name {
background-color: var(--background-profound);
font-weight: bold;
width: 100%;
padding: 5px 10px;
button:hover, &.action:hover {
button:hover label {
cursor: pointer; cursor: pointer;
background-color: var(--background-profound-hover);
} }
} }
.dome-sidepanel-list { .dome-xPanel-element-content {
.dome-sidepanel-element { padding: 4px;
margin:5px;
background-color: var(--background); &:has(*){
overflow-x: hidden; padding: 10px;
border-radius: 0 10px 0 10px;
.dome-sidepanel-element-name {
background-color: var(--background-profound);
font-weight: bold;
width: 100%;
padding: 5px 10px;
&.action:hover {
cursor: pointer;
background-color: var(--background-profound-hover);
}
}
.dome-sidepanel-element-content {
padding: 4px;
&:has(*){
padding: 10px;
}
}
} }
} }
} }
} }
}
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment