From 663c0fe851bedfc911e7d6e414d6ad1a8222041d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Loi=CC=88c=20Correnson?= <loic.correnson@cea.fr>
Date: Tue, 12 Sep 2023 19:40:58 +0200
Subject: [PATCH] [dome] toolbar groups & box display

---
 ivette/src/dome/renderer/frame/style.css    | 23 +++++++++++---
 ivette/src/dome/renderer/frame/toolbars.tsx | 35 ++++++++++++++++++++-
 ivette/src/dome/renderer/layout/boxes.tsx   | 17 ++++++++--
 ivette/src/dome/renderer/style.css          |  2 +-
 4 files changed, 68 insertions(+), 9 deletions(-)

diff --git a/ivette/src/dome/renderer/frame/style.css b/ivette/src/dome/renderer/frame/style.css
index 6ee566c0a26..28e2606171b 100644
--- a/ivette/src/dome/renderer/frame/style.css
+++ b/ivette/src/dome/renderer/frame/style.css
@@ -228,6 +228,21 @@
     border-bottom-style: none ;
 }
 
+/* -------------------------------------------------------------------------- */
+/* --- Styling ToolBar Group                                              --- */
+/* -------------------------------------------------------------------------- */
+
+.dome-xToolBar-group {
+    flex: 0 0 auto ;
+    min-height: 24px ;
+    display: flex ;
+    flex-direction: row ;
+    flex-wrap: wrap ;
+    align-items: center ;
+    margin-left: 2px ;
+    margin-right: 2px ;
+}
+
 /* -------------------------------------------------------------------------- */
 /* --- Styling ToolBar Spaces                                             --- */
 /* -------------------------------------------------------------------------- */
@@ -405,24 +420,24 @@
 /* --- Styling ToolBar Button Group                                       --- */
 /* -------------------------------------------------------------------------- */
 
-.dome-xToolBar-group {
+.dome-xToolBar-buttongroup {
     display: flex ;
     flex-direction: row ;
     flex-wrap: nowrap ;
     margin: 6px 5px 6px 5px ;
 }
 
-.dome-xToolBar-group .dome-xToolBar-control {
+.dome-xToolBar-buttongroup .dome-xToolBar-control {
     margin: 0 ;
     border-radius: 0;
 }
 
-.dome-xToolBar-group > .dome-xToolBar-control:first-child {
+.dome-xToolBar-buttongroup > .dome-xToolBar-control:first-child {
   border-top-left-radius: 4px;
   border-bottom-left-radius: 4px;
 }
 
-.dome-xToolBar-group > .dome-xToolBar-control:last-child {
+.dome-xToolBar-buttongroup > .dome-xToolBar-control:last-child {
   border-top-right-radius: 4px;
   border-bottom-right-radius: 4px;
 }
diff --git a/ivette/src/dome/renderer/frame/toolbars.tsx b/ivette/src/dome/renderer/frame/toolbars.tsx
index 89e64754f0d..d242a765371 100644
--- a/ivette/src/dome/renderer/frame/toolbars.tsx
+++ b/ivette/src/dome/renderer/frame/toolbars.tsx
@@ -94,6 +94,39 @@ export const Separator = (): JSX.Element => (
   </div>
 );
 
+// --------------------------------------------------------------------------
+// --- ToolBar Group
+// --------------------------------------------------------------------------
+
+export interface GroupProps {
+  className?: string;
+  style?: React.CSSProperties;
+  visible?: boolean;
+  display?: boolean;
+  title?: string;
+  children?: React.ReactNode;
+}
+
+/** Groups other ToolBar controls together in a tied box. */
+export function Group(props: GroupProps): JSX.Element {
+  const { visible=true, display=true } = props;
+  const allClasses = classes(
+    'dome-xToolBar-group',
+    props.className,
+    !visible && 'dome-hidden',
+    !display && 'dome-erased',
+  );
+  return (
+    <div className={allClasses} style={props.style} title={props.title}>
+      {props.children}
+    </div>
+  );
+}
+
+// --------------------------------------------------------------------------
+// --- ToolBar Controls
+// --------------------------------------------------------------------------
+
 const SELECT = 'dome-xToolBar-control dome-selected';
 const BUTTON = 'dome-xToolBar-control dome-color-frame';
 const KIND = (kind: undefined | string): string => (
@@ -231,7 +264,7 @@ export function ButtonGroup<A>(props: ButtonGroupProps<A>): JSX.Element {
     selection: value,
     onClick: onChange,
   };
-  const className = classes('dome-xToolBar-group', props.className);
+  const className = classes('dome-xToolBar-buttongroup', props.className);
   return (
     <div className={className} style={props.style}>
       {React.Children.map(children, (elt) => React.cloneElement(
diff --git a/ivette/src/dome/renderer/layout/boxes.tsx b/ivette/src/dome/renderer/layout/boxes.tsx
index 840130cbf8c..5606a8d4697 100644
--- a/ivette/src/dome/renderer/layout/boxes.tsx
+++ b/ivette/src/dome/renderer/layout/boxes.tsx
@@ -70,15 +70,26 @@ import './style.css';
 // --------------------------------------------------------------------------
 
 /** Div properties that you can also use in boxes. */
-export type DivProps = React.HTMLAttributes<HTMLDivElement>;
+export interface DivProps extends React.HTMLAttributes<HTMLDivElement> {
+  visible?: boolean;
+  display?: boolean;
+}
 
 const makeBox = (
   boxClasses: string,
   props: DivProps,
   morestyle?: React.CSSProperties,
 ): JSX.Element => {
-  const { children, className, style, ...others } = props;
-  const allClasses = classes(className, boxClasses);
+  const {
+    className, style, children,
+    visible=true, display=true,
+    ...others
+  } = props;
+  const allClasses = classes(
+    className, boxClasses,
+    !visible && 'dome-hidden',
+    !display && 'dome-erased',
+  );
   const allStyles = styles(style, morestyle);
   return (
     <div className={allClasses} style={allStyles} {...others}>
diff --git a/ivette/src/dome/renderer/style.css b/ivette/src/dome/renderer/style.css
index 9b168aa91ce..89cb548cbcc 100644
--- a/ivette/src/dome/renderer/style.css
+++ b/ivette/src/dome/renderer/style.css
@@ -31,7 +31,7 @@ body {
 /* --- Frame Colors                                                       --- */
 /* -------------------------------------------------------------------------- */
 
-.dome-phantom {
+.dome-erased {
     display: none !important;
 }
 
-- 
GitLab