From 115aae34d8bcd6ff712077399fbb3d13dee3eaf4 Mon Sep 17 00:00:00 2001
From: rlazarini <remi.lazarini@cea.fr>
Date: Thu, 23 Jan 2025 13:11:52 +0100
Subject: [PATCH] [Ivette] Added title to sidebars.
---
ivette/src/dome/renderer/frame/sidebars.tsx | 29 ++++++-
ivette/src/dome/renderer/frame/style.css | 18 +++--
ivette/src/frama-c/kernel/Globals.tsx | 79 ++++++++++---------
.../frama-c/plugins/eva/components/Tools.tsx | 5 +-
ivette/src/frama-c/plugins/eva/style.css | 6 --
ivette/src/ivette/laboratory.tsx | 6 +-
6 files changed, 86 insertions(+), 57 deletions(-)
diff --git a/ivette/src/dome/renderer/frame/sidebars.tsx b/ivette/src/dome/renderer/frame/sidebars.tsx
index e8ceaeb196b..c91e9dfa812 100644
--- a/ivette/src/dome/renderer/frame/sidebars.tsx
+++ b/ivette/src/dome/renderer/frame/sidebars.tsx
@@ -32,7 +32,7 @@
import React from 'react';
import { useFlipSettings } from 'dome';
import { Badge } from 'dome/controls/icons';
-import { Label } from 'dome/controls/labels';
+import { Label, Title } from 'dome/controls/labels';
import { classes } from 'dome/misc/utils';
import { Hbox } from 'dome/layout/boxes';
import { IconButton, IconButtonProps } from 'dome/controls/buttons';
@@ -261,3 +261,30 @@ export function Item(props: ItemProps): JSX.Element {
}
// --------------------------------------------------------------------------
+// --- SideBar Title
+// --------------------------------------------------------------------------
+
+export interface SidebarTitleProps {
+ /** Label. */
+ label: string;
+ /** Additionnal CSS class. */
+ className?: string;
+ /** Other elements. */
+ children?: React.ReactNode;
+}
+
+/** Sidebar Title. */
+export function SidebarTitle(props: SidebarTitleProps): JSX.Element {
+ const { label, children } = props;
+ const className = classes(
+ 'dome-xSideBarTitle',
+ props.className,
+ );
+ return (
+ <Hbox className={className}>
+ <Hbox><Title label={label} title={label}/></Hbox>
+ { children}
+ </Hbox>
+ );
+}
+// --------------------------------------------------------------------------
diff --git a/ivette/src/dome/renderer/frame/style.css b/ivette/src/dome/renderer/frame/style.css
index 01924730df6..3e76ba41171 100644
--- a/ivette/src/dome/renderer/frame/style.css
+++ b/ivette/src/dome/renderer/frame/style.css
@@ -90,22 +90,28 @@
overflow-x: hidden ;
overflow-y: auto ;
padding: 0px ;
-}
-.dome-xSideBar.dome-color-frame
-{
- background: var(--background-sidebar) ;
+ &.dome-color-frame {
+ background: var(--background-sidebar);
+ }
- .dome-xSideBar-title {
+ .dome-xSideBarTitle {
+ flex-wrap: wrap;
justify-content: space-between;
position:sticky;
top:0;
z-index: 10;
padding: 5px;
border-bottom: solid 1px var(--border-discrete);
- background-color:var(--background-sidebar);
+
+ .dome-xBoxes-hbox {
+ max-width: 100%;
+ flex-wrap: wrap;
+ align-content: center;
+ }
}
}
+
/* -------------------------------------------------------------------------- */
/* --- SideBar Section --- */
/* -------------------------------------------------------------------------- */
diff --git a/ivette/src/frama-c/kernel/Globals.tsx b/ivette/src/frama-c/kernel/Globals.tsx
index a0297119945..0bb22020345 100644
--- a/ivette/src/frama-c/kernel/Globals.tsx
+++ b/ivette/src/frama-c/kernel/Globals.tsx
@@ -29,9 +29,9 @@ import * as Dome from 'dome';
import * as Json from 'dome/data/json';
import { classes } from 'dome/misc/utils';
import { alpha } from 'dome/data/compare';
-import { Section, Item } from 'dome/frame/sidebars';
+import { Section, Item, SidebarTitle } from 'dome/frame/sidebars';
import { Button } from 'dome/controls/buttons';
-import { Label, Title } from 'dome/controls/labels';
+import { Label } from 'dome/controls/labels';
import * as Toolbar from 'dome/frame/toolbars';
import { Hbox } from 'dome/layout/boxes';
import InfiniteScroll from 'react-infinite-scroller';
@@ -686,37 +686,36 @@ function SidebarFilesTitle(props: SidebarFilesTitleProps): JSX.Element {
const [showFcts, flipShowFcts] = showFctsState;
const [showVars, flipShowVars] = showVarsState;
- return <Hbox className='dome-xSideBar-title' >
- <Hbox style={{ flexWrap: 'wrap', alignContent: 'center' }}>
- <Title label='Files' />
- </Hbox>
- <Hbox>
- <Toolbar.ButtonGroup>
- <Toolbar.Button
- icon="FUNCTION"
- title={'Show functions'}
- selected={showFcts}
- onClick={() => flipShowFcts()}
- />
- <Toolbar.Button
- icon='TUNINGS'
- onClick={() => Dome.popupMenu(contextFctMenuItems)}
- />
- </Toolbar.ButtonGroup>
- <Toolbar.ButtonGroup>
- <Toolbar.Button
- icon="VARIABLE"
- title={'Show variables'}
- selected={showVars}
- onClick={() => flipShowVars()}
- />
- <Toolbar.Button
- icon='TUNINGS'
- onClick={() => Dome.popupMenu(contextVarMenuItems)}
- />
- </Toolbar.ButtonGroup>
- </Hbox>
- </Hbox>;
+ return (
+ <SidebarTitle label='Files'>
+ <Hbox>
+ <Toolbar.ButtonGroup>
+ <Toolbar.Button
+ icon="FUNCTION"
+ title={'Show functions'}
+ selected={showFcts}
+ onClick={() => flipShowFcts()}
+ />
+ <Toolbar.Button
+ icon='TUNINGS'
+ onClick={() => Dome.popupMenu(contextFctMenuItems)}
+ />
+ </Toolbar.ButtonGroup>
+ <Toolbar.ButtonGroup>
+ <Toolbar.Button
+ icon="VARIABLE"
+ title={'Show variables'}
+ selected={showVars}
+ onClick={() => flipShowVars()}
+ />
+ <Toolbar.Button
+ icon='TUNINGS'
+ onClick={() => Dome.popupMenu(contextVarMenuItems)}
+ />
+ </Toolbar.ButtonGroup>
+ </Hbox>
+ </SidebarTitle>
+ );
}
// --------------------------------------------------------------------------
@@ -757,12 +756,14 @@ export function GlobalByFiles(): JSX.Element {
export function GlobalDeclarations(): JSX.Element {
const scrollableArea = React.useRef<HTMLDivElement>(null);
- return (
- <div ref={scrollableArea} className="globals-scrollable-area">
- <Types />
- <Variables scrollableParent={scrollableArea} />
- <Functions scrollableParent={scrollableArea} />
- </div>
+ return (<>
+ <SidebarTitle label='Global Declarations' />
+ <div ref={scrollableArea} className="globals-scrollable-area">
+ <Types />
+ <Variables scrollableParent={scrollableArea} />
+ <Functions scrollableParent={scrollableArea} />
+ </div>
+ </>
);
}
diff --git a/ivette/src/frama-c/plugins/eva/components/Tools.tsx b/ivette/src/frama-c/plugins/eva/components/Tools.tsx
index c13fe32c852..d876454889f 100644
--- a/ivette/src/frama-c/plugins/eva/components/Tools.tsx
+++ b/ivette/src/frama-c/plugins/eva/components/Tools.tsx
@@ -28,6 +28,7 @@ import * as Server from 'frama-c/server';
import * as States from 'frama-c/states';
import * as Eva from 'frama-c/plugins/eva/api/general';
import { EvaStatus } from 'frama-c/plugins/eva/components/AnalysisStatus';
+import { SidebarTitle } from 'dome/frame/sidebars';
export interface EvaToolsProps {
@@ -60,7 +61,7 @@ export default function EvaTools(
const syncToFC = (): void => { remote.commit(); };
return (
- <Hbox className='dome-xSideBar-title eva-tools'>
+ <SidebarTitle label='Parameters of Eva Analysis' className='eva-tools'>
<Hbox className='eva-tools-actions'>
<IconButton
icon="MEDIA.PLAY"
@@ -100,6 +101,6 @@ export default function EvaTools(
<Hbox className='eva-tools-status'>
<EvaStatus iconSize={18} />
</Hbox>
- </Hbox>
+ </SidebarTitle>
);
}
diff --git a/ivette/src/frama-c/plugins/eva/style.css b/ivette/src/frama-c/plugins/eva/style.css
index 2821d3ff355..3823792c67e 100644
--- a/ivette/src/frama-c/plugins/eva/style.css
+++ b/ivette/src/frama-c/plugins/eva/style.css
@@ -358,12 +358,6 @@ tr:first-of-type > .eva-table-callsite-box {
/* ------------------ */
/* --- Tools Eva --- */
.eva-tools {
-
- .eva-tools-actions {
- display: flex;
- flex-wrap: wrap;
- }
-
.dome-xIconButton {
padding: 2px 5px;
}
diff --git a/ivette/src/ivette/laboratory.tsx b/ivette/src/ivette/laboratory.tsx
index 29026cd0267..2471017c620 100644
--- a/ivette/src/ivette/laboratory.tsx
+++ b/ivette/src/ivette/laboratory.tsx
@@ -1223,8 +1223,8 @@ function ViewBar(): JSX.Element {
const groups = State.useElements(GROUP);
const allGroups = groups.concat(Sandbox);
- return (
- <Sidebars.SideBar>
+ return (<>
+ <Sidebars.SidebarTitle label='Views & Components' />
<ViewSection key='views' />
{groups.map((group) =>
<GroupSection
@@ -1236,7 +1236,7 @@ function ViewBar(): JSX.Element {
<GroupSection
key='sandbox'
filter={inGroup(Sandbox)} {...Sandbox} />
- </Sidebars.SideBar>
+ </>
);
}
--
GitLab