diff --git a/ivette/src/frama-c/index.tsx b/ivette/src/frama-c/index.tsx index 33a5b74233eba561b64edf5bbdc5cf9aeea2496b..4e1db38c729e012431667c3997fe795b5ff4d1d9 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 07a86f9247f8f773ef367f7945042850cbfacd8d..7eefab232b3beaee2f6d3608d2f004bf6599c299 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 01cbdaacb3077c2301ad50422f738cc9b0523788..ff26adc019275bd62339f2240297aaac49b8de38 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 facd523435a83b25c090d2c4e9b220a20787ab16..b9c6b5d71b47a17618d93fb2044c229b3b9727ae 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 b2dfe3669eaa2e469bd008883555c9bc5909d60e..45bf4b36ca7ab6efc186b6f0f62173c7216652af 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 {