From 4e9518f59eeb55c8fe06e9d3240c80d91032009f Mon Sep 17 00:00:00 2001
From: rlazarini <remi.lazarini@cea.fr>
Date: Tue, 17 Sep 2024 10:09:41 +0200
Subject: [PATCH] [Ivette] add animation on sidePanel + rename
---
.../frame/{sidePanel.tsx => panel.tsx} | 61 ++++-----
ivette/src/dome/renderer/frame/style.css | 121 ++++++++++--------
2 files changed, 88 insertions(+), 94 deletions(-)
rename ivette/src/dome/renderer/frame/{sidePanel.tsx => panel.tsx} (73%)
diff --git a/ivette/src/dome/renderer/frame/sidePanel.tsx b/ivette/src/dome/renderer/frame/panel.tsx
similarity index 73%
rename from ivette/src/dome/renderer/frame/sidePanel.tsx
rename to ivette/src/dome/renderer/frame/panel.tsx
index ef314ca6167..b1851a3e9f5 100644
--- a/ivette/src/dome/renderer/frame/sidePanel.tsx
+++ b/ivette/src/dome/renderer/frame/panel.tsx
@@ -21,26 +21,15 @@
/* ************************************************************************ */
/**
- This package allow us to add a side panel inside the elements.
-
- The main element is SidePanel.
- 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 :
+ This package allows us to add a panel inside positioned elements.
+
+ It provides some components to create the panel content:
* ListElement
* Text
* Actions
@packageDocumentation
- @module dome/frame/sidePanel
+ @module dome/frame/Panel
*/
import { Label } from 'dome/controls/labels';
@@ -49,40 +38,34 @@ import { classes } from 'dome/misc/utils';
/* --------------------------------------------------------------------------*/
-/* --- SidePanel Container */
+/* --- Panel Container */
/* --------------------------------------------------------------------------*/
-interface SidePanelProps {
+interface PanelProps {
className?: string;
show?: boolean;
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 classContainer = 'dome-sidepanel-container';
const classNames = classes(
- classContainer,
- position === 'left' ? classContainer+'-left' : classContainer+'-right',
+ 'dome-xPanel',
+ position === 'left' ? 'dome-xPanel-left' : 'dome-xPanel-right',
+ show ? 'dome-xPanel-open' : 'dome-xPanel-close',
className,
);
- const [A, panelContent] = props.children;
return (
- <div className='dome-sidepanel'>
- { show &&
- <div className={classNames}>
- {panelContent}
- </div>
- }
- {A}
+ <div className={classNames}>
+ {props.children}
</div>
);
};
/* --------------------------------------------------------------------------*/
-/* --- SidePanel List */
+/* --- Panel List */
/* --------------------------------------------------------------------------*/
export interface ElementProps {
label: string;
@@ -94,17 +77,17 @@ const Element = (props: ElementProps): JSX.Element => {
const { label, onClickName, content } = props;
const nameClasse = classes(
- 'dome-sidepanel-element-name',
+ 'dome-xPanel-element-name',
onClickName && "action"
);
return (
- <div className='dome-sidepanel-element'>
+ <div className='dome-xPanel-element'>
<div
className={nameClasse}
onClick={() => { if(onClickName) onClickName(); }}
>{label}</div>
- <div className='dome-sidepanel-element-content'>
+ <div className='dome-xPanel-element-content'>
{content}
</div>
</div>
@@ -117,7 +100,7 @@ interface ListElementProps {
export function ListElement(props: ListElementProps): JSX.Element {
return (
- <div className='dome-sidepanel-list'>
+ <div className='dome-xPanel-list'>
{ props.list.map((elt, k) => <Element
key={k}
{...elt}
@@ -128,7 +111,7 @@ export function ListElement(props: ListElementProps): JSX.Element {
}
/* --------------------------------------------------------------------------*/
-/* --- SidePanel Text */
+/* --- Panel Text */
/* --------------------------------------------------------------------------*/
interface TextProps {
label: string;
@@ -137,7 +120,7 @@ interface TextProps {
export function Text(props: TextProps): JSX.Element {
return (
- <div className='dome-sidepanel-text'>
+ <div className='dome-xPanel-text'>
<Label>
{props.label}
</Label>
@@ -147,7 +130,7 @@ export function Text(props: TextProps): JSX.Element {
}
/* --------------------------------------------------------------------------*/
-/* --- SidePanel Button */
+/* ---Panel Button */
/* --------------------------------------------------------------------------*/
interface ActionsProps {
children: React.ReactNode;
@@ -155,7 +138,7 @@ interface ActionsProps {
export function Actions(props: ActionsProps): JSX.Element {
return (
- <div className='dome-sidepanel-actions'>
+ <div className='dome-xPanel-actions'>
{props.children}
</div>
);
diff --git a/ivette/src/dome/renderer/frame/style.css b/ivette/src/dome/renderer/frame/style.css
index 0c28dc4ee8c..448cd5618b3 100644
--- a/ivette/src/dome/renderer/frame/style.css
+++ b/ivette/src/dome/renderer/frame/style.css
@@ -591,72 +591,83 @@ input:checked + .dome-xSwitch-slider:before {
/* -------------------------------------------------------------------------- */
/* --- Side Panel --- */
/* -------------------------------------------------------------------------- */
-.dome-sidepanel {
- position: relative;
- width: 100%;
- height: 100%;
+.dome-xPanel {
+ position: absolute;
+ top:0;
+ 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 {
- position: absolute;
- top:0;
- max-width: 350px;
- max-height: 100%;
- overflow-y: scroll;
- z-index: 50;
- background-color: var(--background-interaction);
- padding: 10px 5px;
+ &.dome-xPanel-left {
+ border-radius: 0 20px 20px 0;
- &::-webkit-scrollbar { display: none; }
+ &.dome-xPanel-close {
+ transform: translateX(-350px);
+ opacity: 0;
+ }
+ }
- &.dome-sidepanel-container-left {
- border-radius: 0 20px 20px 0;
- }
- &.dome-sidepanel-container-right {
- right: 0;
- border-radius: 20px 0 0 20px;
- }
+ &.dome-xPanel-right {
+ right: 0;
+ border-radius: 20px 0 0 20px;
- .dome-sidepanel-text {
- color: var(--text);
- padding-bottom: 3px;
- }
+ &.dome-xPanel-close {
+ transform: translateX(350px);
+ opacity: 0;
+ }
+ }
- .dome-sidepanel-actions {
- display: flex;
+ .dome-xPanel-text {
+ 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,
- button:hover label {
+ &.action:hover {
cursor: pointer;
+ background-color: var(--background-profound-hover);
}
}
- .dome-sidepanel-list {
- .dome-sidepanel-element {
- margin:5px;
- background-color: var(--background);
- overflow-x: hidden;
- 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;
- }
- }
+ .dome-xPanel-element-content {
+ padding: 4px;
+
+ &:has(*){
+ padding: 10px;
}
}
}
}
+}
--
GitLab