From 768f4d72bb0009099ffff66d6ed35e20896a8c0f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Loi=CC=88c=20Correnson?= <loic.correnson@cea.fr>
Date: Fri, 3 May 2024 19:32:16 +0200
Subject: [PATCH] [ivette] sidebar icons
---
ivette/src/frama-c/index.tsx | 2 ++
ivette/src/ivette/index.tsx | 2 +-
ivette/src/ivette/laboratory.tsx | 7 ++++---
ivette/src/renderer/Sidebar.tsx | 8 +++++---
ivette/src/renderer/style.css | 18 +++++++-----------
5 files changed, 19 insertions(+), 18 deletions(-)
diff --git a/ivette/src/frama-c/index.tsx b/ivette/src/frama-c/index.tsx
index 33a5b74233e..4e1db38c729 100644
--- a/ivette/src/frama-c/index.tsx
+++ b/ivette/src/frama-c/index.tsx
@@ -50,6 +50,8 @@ Menu.init();
Ivette.registerSidebar({
id: 'fc.kernel.globals',
label: 'AST',
+ icon: 'DUPLICATE',
+ title: 'Global Declarations (AST)',
children: <Globals />
});
diff --git a/ivette/src/ivette/index.tsx b/ivette/src/ivette/index.tsx
index 07a86f9247f..7eefab232b3 100644
--- a/ivette/src/ivette/index.tsx
+++ b/ivette/src/ivette/index.tsx
@@ -202,7 +202,7 @@ export function TitleBar(props: TitleBarProps): JSX.Element | null {
/* -------------------------------------------------------------------------- */
export interface SidebarProps extends ContentProps {
- iconPath?: string;
+ icon?: string;
}
export interface ToolProps {
diff --git a/ivette/src/ivette/laboratory.tsx b/ivette/src/ivette/laboratory.tsx
index 01cbdaacb30..ff26adc0192 100644
--- a/ivette/src/ivette/laboratory.tsx
+++ b/ivette/src/ivette/laboratory.tsx
@@ -1239,9 +1239,10 @@ function ViewBar(): JSX.Element {
}
Ivette.registerSidebar({
- id: "ivette.views",
- label: "Views",
- title: "View Selector",
+ id: 'ivette.views',
+ label: 'Views',
+ icon: 'DISPLAY',
+ title: 'Views & Components Selector',
children: <ViewBar />,
});
diff --git a/ivette/src/renderer/Sidebar.tsx b/ivette/src/renderer/Sidebar.tsx
index facd523435a..b9c6b5d71b4 100644
--- a/ivette/src/renderer/Sidebar.tsx
+++ b/ivette/src/renderer/Sidebar.tsx
@@ -26,6 +26,7 @@
import React from 'react';
import * as Dome from 'dome';
+import { Icon } from 'dome/controls/icons';
import { SideBar } from 'dome/frame/sidebars';
import { Catch } from 'dome/errors';
import { classes } from 'dome/misc/utils';
@@ -42,16 +43,17 @@ interface SelectorProps extends SidebarProps {
}
function Selector(props: SelectorProps): JSX.Element {
- const { id, iconPath, selected, setSelected, label, title } = props;
+ const { id, icon, selected, setSelected, label } = props;
const className = classes(
'sidebar-selector',
'dome-color-frame',
selected === id && 'sidebar-selector-selected',
);
const onClick = React.useCallback(() => setSelected(id), [setSelected, id]);
+ const title = props.title ?? `${label} Sidebar`;
const component =
- iconPath
- ? <img className="sidebar-selector-icon" src={iconPath} alt={label} />
+ icon
+ ? <Icon size={20} className="sidebar-selector-icon" id={icon}/>
: <label className="sidebar-selector-label">{label}</label>;
return (
<div className={className} title={title} onClick={onClick}>
diff --git a/ivette/src/renderer/style.css b/ivette/src/renderer/style.css
index b2dfe3669ea..45bf4b36ca7 100644
--- a/ivette/src/renderer/style.css
+++ b/ivette/src/renderer/style.css
@@ -19,21 +19,16 @@
}
.sidebar-selector {
- min-height: 35px;
+ margin: 0px;
+ min-height: 40px;
min-width: 35px;
text-align: center;
+ border-left: solid 3px transparent;
}
.sidebar-selector-icon {
- margin-top: 5px;
- margin-left: 25%;
- margin-right: 25%;
- width: 25px;
- height: 25px;
-}
-
-.sidebar-selector-icon:hover {
- background-color: var(--background-profound-hover);
+ position: relative;
+ top: 6px;
}
.sidebar-selector-label {
@@ -48,11 +43,12 @@
}
.sidebar-selector:hover {
- background-color: var(--background-profound-hover);
+ background-color: var(--default-button-hover);
}
.sidebar-selector-selected {
background-color: var(--background-profound);
+ border-color: var(--selected-button-img);
}
.component-info {
--
GitLab