From 9b463d062f89410251f764a8f002f747653bd932 Mon Sep 17 00:00:00 2001
From: Maxime Jacquemin <maxime2.jacquemin@gmail.com>
Date: Fri, 25 Feb 2022 12:42:12 +0100
Subject: [PATCH] [ivette] Helpful message when there is no function to display
---
ivette/src/dome/renderer/frame/sidebars.tsx | 21 ++++++++++++++++++---
ivette/src/dome/renderer/frame/style.css | 17 +++++++++++++++++
2 files changed, 35 insertions(+), 3 deletions(-)
diff --git a/ivette/src/dome/renderer/frame/sidebars.tsx b/ivette/src/dome/renderer/frame/sidebars.tsx
index 379a82505df..5c600d1e1e6 100644
--- a/ivette/src/dome/renderer/frame/sidebars.tsx
+++ b/ivette/src/dome/renderer/frame/sidebars.tsx
@@ -35,7 +35,7 @@ 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 { IconButton, Button } from 'dome/controls/buttons';
import './style.css';
@@ -132,7 +132,21 @@ export function Section(props: SectionProps): JSX.Element | null {
const icon = state ? 'TRIANGLE.DOWN' : 'TRIANGLE.RIGHT';
const { enabled = true, disabled = false, children } = props;
- if (disabled || !enabled || React.Children.count(children) === 0) return null;
+ if (disabled || !enabled) return null;
+
+ const noChildContent =
+ <div className='dome-xSideBarSection-content'>
+ <label className='dome-xSideBarSection-info'>
+ {'There is no function to display. Maybe you can change ' +
+ 'the filtering options.'}
+ </label>
+ <Button
+ icon='TUNINGS'
+ label='Functions filtering options'
+ onClick={props.onContextMenu}
+ visible={!(props.onContextMenu === undefined)}
+ />
+ </div>;
const visible = unfold ?? state;
const maxHeight = visible ? 'max-content' : 0;
@@ -149,12 +163,13 @@ export function Section(props: SectionProps): JSX.Element | null {
/>
<IconButton
icon='TUNINGS'
+ title={'Functions filtering options'}
onClick={props.onContextMenu}
visible={!(props.onContextMenu === undefined)}
/>
</Hbox>
<div className='dome-xSideBarSection-content' style={{ maxHeight }}>
- {children}
+ {React.Children.count(children) === 0 ? noChildContent : children}
</div>
</div>
);
diff --git a/ivette/src/dome/renderer/frame/style.css b/ivette/src/dome/renderer/frame/style.css
index 492e1f61ea2..f8fc23bf2f9 100644
--- a/ivette/src/dome/renderer/frame/style.css
+++ b/ivette/src/dome/renderer/frame/style.css
@@ -155,6 +155,23 @@
transition: max-height 250ms ease-in-out ;
}
+.dome-xSideBarSection-content > .dome-xBoxButton {
+ margin-left: 20px;
+ margin-right: 10px;
+ margin-top: 7px;
+ color: var(--info-text);
+ fill: var(--info-text);
+ display: flex;
+}
+
+.dome-xSideBarSection-info {
+ color: var(--info-text-discrete);
+ font-style: italic;
+ padding-left: 20px;
+ padding-right: 10px;
+ display: block;
+}
+
/* -------------------------------------------------------------------------- */
/* --- SideBar Items --- */
/* -------------------------------------------------------------------------- */
--
GitLab