From d45d71c4feb1ae90a80b6b651e27ac6670aae0ec Mon Sep 17 00:00:00 2001
From: Maxime Jacquemin <maxime2.jacquemin@gmail.com>
Date: Fri, 25 Feb 2022 10:08:20 +0100
Subject: [PATCH] [ivette] Visible functions filter
There was a context menu on the function folder that proposed to filter
the displayed function. It was impossible to find it without being told.
Now, there is a settings button on the right. Because of this new
button, the hide button has been replaced by a classical fold feeling,
with the arrow on the left.
---
ivette/src/dome/renderer/frame/sidebars.tsx | 61 ++++++++-------------
ivette/src/dome/renderer/frame/style.css | 8 ++-
2 files changed, 30 insertions(+), 39 deletions(-)
diff --git a/ivette/src/dome/renderer/frame/sidebars.tsx b/ivette/src/dome/renderer/frame/sidebars.tsx
index 88901d06f2d..379a82505df 100644
--- a/ivette/src/dome/renderer/frame/sidebars.tsx
+++ b/ivette/src/dome/renderer/frame/sidebars.tsx
@@ -34,6 +34,8 @@ import { useFlipSettings } from 'dome';
import { Badge } from 'dome/controls/icons';
import { Label } from 'dome/controls/labels';
import { classes } from 'dome/misc/utils';
+import { Hbox } from 'dome/layout/boxes';
+import { IconButton } from 'dome/controls/buttons';
import './style.css';
@@ -87,24 +89,6 @@ const makeBadge = (elt: Badges): React.ReactNode => {
return makeBadgeElt(elt);
};
-// --------------------------------------------------------------------------
-// --- SideBar Section Hide/Show Button
-// --------------------------------------------------------------------------
-
-interface HideShowProps {
- onClick: () => void;
- visible: boolean;
-}
-
-const HideShow = (props: HideShowProps): JSX.Element => (
- <label
- className="dome-xSideBarSection-hideshow dome-text-label"
- onClick={props.onClick}
- >
- {props.visible ? 'Hide' : 'Show'}
- </label>
-);
-
// --------------------------------------------------------------------------
// --- SideBar Section
// --------------------------------------------------------------------------
@@ -143,32 +127,33 @@ export interface SectionProps {
Sections with no items are not displayed.
*/
export function Section(props: SectionProps): JSX.Element | null {
-
- const [state, flipState] = useFlipSettings(
- props.settings,
- props.defaultUnfold,
- );
+ const { settings, defaultUnfold, unfold } = props;
+ const [state, flipState] = useFlipSettings(settings, defaultUnfold);
+ const icon = state ? 'TRIANGLE.DOWN' : 'TRIANGLE.RIGHT';
const { enabled = true, disabled = false, children } = props;
- if (disabled || !enabled || React.Children.count(children) === 0)
- return null;
- const { unfold } = props;
- const foldable = unfold === undefined;
+ if (disabled || !enabled || React.Children.count(children) === 0) return null;
+
const visible = unfold ?? state;
const maxHeight = visible ? 'max-content' : 0;
return (
- <div className="dome-xSideBarSection">
- <div
- className="dome-xSideBarSection-title dome-color-frame"
- title={props.title}
- onContextMenu={props.onContextMenu}
- >
- <Label label={props.label} />
- {!visible && makeBadge(props.summary)}
- {foldable && <HideShow visible={visible} onClick={flipState} />}
- </div>
- <div className="dome-xSideBarSection-content" style={{ maxHeight }}>
+ <div className='dome-xSideBarSection'>
+ <Hbox>
+ <Label
+ className='dome-xSideBarSection-title dome-color-frame'
+ title={props.title}
+ label={props.label}
+ icon={icon}
+ onClick={flipState}
+ />
+ <IconButton
+ icon='TUNINGS'
+ onClick={props.onContextMenu}
+ visible={!(props.onContextMenu === undefined)}
+ />
+ </Hbox>
+ <div className='dome-xSideBarSection-content' style={{ maxHeight }}>
{children}
</div>
</div>
diff --git a/ivette/src/dome/renderer/frame/style.css b/ivette/src/dome/renderer/frame/style.css
index 69a6511a02a..492e1f61ea2 100644
--- a/ivette/src/dome/renderer/frame/style.css
+++ b/ivette/src/dome/renderer/frame/style.css
@@ -105,12 +105,14 @@
.dome-xSideBarSection {
display: block ;
padding: 0px ;
+ padding-top: 3px;
}
.dome-xSideBarSection-title {
+ flex: 1 1 auto;
position: sticky ;
top: 0px ;
- padding-top: 3px ;
+ padding-top: 0px;
padding-bottom: 0px ;
padding-left: 3px ;
padding-right: 2px ;
@@ -119,6 +121,10 @@
align-items: center ;
}
+.dome-xSideBarSection-title > .dome-xIcon {
+ padding: 0px;
+}
+
.dome-xSideBarSection-title > .dome-xLabel {
flex: 1 1 ;
overflow: hidden ;
--
GitLab