From 7cf0e0752e3e55c407c07bdf284d7361542caba2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Loi=CC=88c=20Correnson?= <loic.correnson@cea.fr>
Date: Wed, 5 Apr 2023 15:16:50 +0200
Subject: [PATCH] [ivette] better rendering for section infos
---
ivette/src/dome/renderer/frame/sidebars.tsx | 5 ++++-
ivette/src/dome/renderer/frame/style.css | 16 ++++++++--------
ivette/src/frama-c/kernel/Properties.tsx | 11 ++++++-----
3 files changed, 18 insertions(+), 14 deletions(-)
diff --git a/ivette/src/dome/renderer/frame/sidebars.tsx b/ivette/src/dome/renderer/frame/sidebars.tsx
index a45a391ba9a..f7b332affdf 100644
--- a/ivette/src/dome/renderer/frame/sidebars.tsx
+++ b/ivette/src/dome/renderer/frame/sidebars.tsx
@@ -110,6 +110,8 @@ export interface SectionProps {
disabled?: boolean;
/** Badge summary (only visible when folded). */
summary?: Badges;
+ /** Additional label, right-aligned. */
+ infos?: string;
/** Additional controls, (only visible when unfolded). */
rightButtonProps?: IconButtonProps;
/** Section contents. */
@@ -129,7 +131,7 @@ export interface SectionProps {
Sections with no items are not displayed.
*/
export function Section(props: SectionProps): JSX.Element | null {
- const { settings, defaultUnfold, unfold } = props;
+ const { settings, defaultUnfold, infos, unfold } = props;
const [state, flipState] = useFlipSettings(settings, defaultUnfold);
const icon = state ? 'TRIANGLE.DOWN' : 'TRIANGLE.RIGHT';
@@ -152,6 +154,7 @@ export function Section(props: SectionProps): JSX.Element | null {
icon={icon}
onClick={flipState}
/>
+ {infos && <div className='dome-xSideBarSection-infos'>{infos}</div>}
{visible ? rightButton : makeBadge(props.summary)}
</Hbox>
<div className='dome-xSideBarSection-content' style={{ maxHeight }}>
diff --git a/ivette/src/dome/renderer/frame/style.css b/ivette/src/dome/renderer/frame/style.css
index 73c306f4bef..86a42e7101f 100644
--- a/ivette/src/dome/renderer/frame/style.css
+++ b/ivette/src/dome/renderer/frame/style.css
@@ -129,6 +129,14 @@
flex: 0 0 ;
}
+.dome-xSideBarSection-infos {
+ font-size: smaller;
+ color: var(--info-text-discrete);
+ padding-left: 4px;
+ padding-right: 4px;
+ display: block;
+}
+
.dome-xSideBarSection-filterButton {
margin: 0px;
padding: 0px;
@@ -162,14 +170,6 @@
display: flex;
}
-.dome-xSideBarSection-info {
- color: var(--info-text-discrete);
- font-style: italic;
- padding-left: 20px;
- padding-right: 10px;
- display: block;
-}
-
/* -------------------------------------------------------------------------- */
/* --- SideBar Items --- */
/* -------------------------------------------------------------------------- */
diff --git a/ivette/src/frama-c/kernel/Properties.tsx b/ivette/src/frama-c/kernel/Properties.tsx
index d458118d53d..0b2bd023257 100644
--- a/ivette/src/frama-c/kernel/Properties.tsx
+++ b/ivette/src/frama-c/kernel/Properties.tsx
@@ -142,9 +142,9 @@ function filterSummary(prefix: string) : string {
if (filter(key)) enabled++;
}
}
- if (enabled == 0) return '(none)';
- if (enabled == total) return '(all)';
- return `(${enabled}/${total})`;
+ if (enabled === 0) return 'none';
+ if (enabled === total) return 'all';
+ return `${enabled} / ${total}`;
}
function filterStatus(
@@ -427,12 +427,13 @@ function FilterSection(props: SectionProps): JSX.Element {
} : undefined;
const update = Dome.useForceUpdate();
Settings.useWindowSettingsEvent(update);
- const theLabel = prefix ? `${label} ${filterSummary(prefix)}` : label;
+ const summary = prefix ? filterSummary(prefix) : undefined ;
return (
<Section
- label={theLabel}
+ label={label}
settings={settings}
defaultUnfold={props.unfold}
+ infos={summary}
rightButtonProps={filterButtonProps}
>
{props.children}
--
GitLab