diff --git a/ivette/src/dome/src/renderer/controls/buttons.js b/ivette/src/dome/src/renderer/controls/buttons.js
index bd4957cbfabe77fcb7f3a87a23224ecc8955728e..a79c24cbb0bbae6791025dc909af8ebd0adfe6a4 100644
--- a/ivette/src/dome/src/renderer/controls/buttons.js
+++ b/ivette/src/dome/src/renderer/controls/buttons.js
@@ -13,7 +13,7 @@
import React from 'react' ;
import { Icon } from './icons' ;
-import './buttons.css' ;
+import './style.css' ;
const DISABLED = ({ disabled=false, enabled=true }) => !!disabled || !enabled ;
const TRIGGER = (onClick) => (evt) => {
diff --git a/ivette/src/dome/src/renderer/controls/icons.css b/ivette/src/dome/src/renderer/controls/icons.css
deleted file mode 100644
index 066887a39172745fa58aa671f1c6ff496652a440..0000000000000000000000000000000000000000
--- a/ivette/src/dome/src/renderer/controls/icons.css
+++ /dev/null
@@ -1,42 +0,0 @@
-/* -------------------------------------------------------------------------- */
-/* --- Styling Icons --- */
-/* -------------------------------------------------------------------------- */
-
-.dome-xIcon {
- flex: 0 0 auto ;
- display: inline ;
- margin: 1px ;
- padding: 1px 0px 0px 0px ;
-}
-
-.dome-xIcon svg {
- position:relative ;
-}
-
-.dome-xBadge {
- flex: 0 0 auto ;
- display: inline ;
- margin: 1px ;
- padding: 1px 6px 1px 6px ;
- height: 16px ;
- fill: #dedede ;
- color: #dedede ;
- font-family: sans-serif ;
- font-size: smaller ;
- font-weight: bold ;
- border-radius: 8px ;
- background: #777 ;
-}
-
-.dome-window-inactive .dome-xBadge,
-.dome-disabled .dome-xBadge
-{
- background: #ccc ;
- color: #eee ;
- fill: #eee ;
-}
-
-.dome-xBadge label {
- position: relative ;
- bottom: -1px ;
-}
diff --git a/ivette/src/dome/src/renderer/controls/icons.js b/ivette/src/dome/src/renderer/controls/icons.js
index d5ad8e7a626395b9e0b29730001a0d73e672e852..35da53950a70dd0007afeb5fbd72578c443bd1bd 100644
--- a/ivette/src/dome/src/renderer/controls/icons.js
+++ b/ivette/src/dome/src/renderer/controls/icons.js
@@ -10,10 +10,10 @@
and [iterate](#.forEach) over the icon base.
*/
+import _ from 'lodash' ;
import React from 'react' ;
import Icons from './icons.json' ;
-import './icons.css' ;
-import _ from 'lodash' ;
+import './style.css' ;
// --------------------------------------------------------------------------
// --- Raw SVG element
diff --git a/ivette/src/dome/src/renderer/controls/labels.css b/ivette/src/dome/src/renderer/controls/labels.css
deleted file mode 100644
index e7417b8bd757c78768630264189d11b2c217c203..0000000000000000000000000000000000000000
--- a/ivette/src/dome/src/renderer/controls/labels.css
+++ /dev/null
@@ -1,18 +0,0 @@
-/* -------------------------------------------------------------------------- */
-/* --- Styling Labels --- */
-/* -------------------------------------------------------------------------- */
-
-.dome-xLabel {
- padding: 2px ;
- margin: 2px 4px ;
-}
-
-.dome-xLabel .dome-xIcon {
- margin-right: 4px ;
-}
-
-.dome-xLabel.dome-text-descr {
- overflow: auto ;
-}
-
-/* -------------------------------------------------------------------------- */
diff --git a/ivette/src/dome/src/renderer/controls/labels.js b/ivette/src/dome/src/renderer/controls/labels.js
index 8045b597086c205e1abb2942506934a227c2766b..70c86ce85776657822ec9c692671b5e73de0b25f 100644
--- a/ivette/src/dome/src/renderer/controls/labels.js
+++ b/ivette/src/dome/src/renderer/controls/labels.js
@@ -6,7 +6,7 @@
import React from 'react' ;
import { Icon } from './icons' ;
-import './labels.css' ;
+import './style.css' ;
// --------------------------------------------------------------------------
// --- Generic Label
diff --git a/ivette/src/dome/src/renderer/controls/buttons.css b/ivette/src/dome/src/renderer/controls/style.css
similarity index 85%
rename from ivette/src/dome/src/renderer/controls/buttons.css
rename to ivette/src/dome/src/renderer/controls/style.css
index 83e792b3dfb9a266ec2a5ecdc6f7c5fda16ae68e..a6986b056761d6525ac544183090ae4b726ce1ad 100644
--- a/ivette/src/dome/src/renderer/controls/buttons.css
+++ b/ivette/src/dome/src/renderer/controls/style.css
@@ -1,4 +1,63 @@
/* -------------------------------------------------------------------------- */
+/* --- Styling Labels --- */
+/* -------------------------------------------------------------------------- */
+
+.dome-xLabel {
+ padding: 2px ;
+ margin: 2px 4px ;
+}
+
+.dome-xLabel .dome-xIcon {
+ margin-right: 4px ;
+}
+
+.dome-xLabel.dome-text-descr {
+ overflow: auto ;
+}
+
+/* -------------------------------------------------------------------------- */
+/* --- Styling Icons --- */
+/* -------------------------------------------------------------------------- */
+
+.dome-xIcon {
+ flex: 0 0 auto ;
+ display: inline ;
+ margin: 1px ;
+ padding: 1px 0px 0px 0px ;
+}
+
+.dome-xIcon svg {
+ position:relative ;
+}
+
+.dome-xBadge {
+ flex: 0 0 auto ;
+ display: inline ;
+ margin: 1px ;
+ padding: 1px 6px 1px 6px ;
+ height: 16px ;
+ fill: #dedede ;
+ color: #dedede ;
+ font-family: sans-serif ;
+ font-size: smaller ;
+ font-weight: bold ;
+ border-radius: 8px ;
+ background: #777 ;
+}
+
+.dome-window-inactive .dome-xBadge,
+.dome-disabled .dome-xBadge
+{
+ background: #ccc ;
+ color: #eee ;
+ fill: #eee ;
+}
+
+.dome-xBadge label {
+ position: relative ;
+ bottom: -1px ;
+}
+/* -------------------------------------------------------------------------- */
/* --- Base Styling --- */
/* -------------------------------------------------------------------------- */
diff --git a/ivette/src/dome/src/renderer/dome.js b/ivette/src/dome/src/renderer/dome.js
index b5bb2dff23486099c2b6ecd4cc9f60a2158f477a..0c97272ae00420cfbdd2e279d5f5ddce6dc7706b 100644
--- a/ivette/src/dome/src/renderer/dome.js
+++ b/ivette/src/dome/src/renderer/dome.js
@@ -19,7 +19,7 @@ import { AppContainer } from 'react-hot-loader' ;
import { remote , ipcRenderer } from 'electron';
import { EventEmitter } from 'events' ;
import SYS , * as System from 'dome/system' ;
-import './dome.css' ;
+import './style.css' ;
// --------------------------------------------------------------------------
// --- Context
diff --git a/ivette/src/dome/src/renderer/layout/sidebars.js b/ivette/src/dome/src/renderer/frame/sidebars.js
similarity index 99%
rename from ivette/src/dome/src/renderer/layout/sidebars.js
rename to ivette/src/dome/src/renderer/frame/sidebars.js
index 862ddd785ab5dc63547ee449a81773b1c2f21319..5f0421cfd42984c7465e45e4e9a5e9ed59223552 100644
--- a/ivette/src/dome/src/renderer/layout/sidebars.js
+++ b/ivette/src/dome/src/renderer/frame/sidebars.js
@@ -2,13 +2,14 @@
// --- SideBars
// --------------------------------------------------------------------------
-/** @module dome/layout/sidebars */
+/** @module dome/frame/sidebars */
import React from 'react' ;
import * as Dome from 'dome' ;
import { Badge } from 'dome/controls/icons' ;
import { Label } from 'dome/controls/labels' ;
-import './sidebars.css' ;
+
+import './style.css' ;
const SideBarContext = React.createContext();
diff --git a/ivette/src/dome/src/renderer/layout/toolbars.css b/ivette/src/dome/src/renderer/frame/style.css
similarity index 57%
rename from ivette/src/dome/src/renderer/layout/toolbars.css
rename to ivette/src/dome/src/renderer/frame/style.css
index 2e5df08568f9ba6b34411a0bb5473e9d31fc2382..8aa578aa2c81c5b0106b88a28adc114af5b57068 100644
--- a/ivette/src/dome/src/renderer/layout/toolbars.css
+++ b/ivette/src/dome/src/renderer/frame/style.css
@@ -1,3 +1,205 @@
+/* -------------------------------------------------------------------------- */
+/* --- Tabs & Tab Style Sheet --- */
+/* -------------------------------------------------------------------------- */
+
+/* Tabs Bar */
+
+.dome-xTabsBar {
+ flex: 0 1 auto ;
+ position: relative ;
+ height: 20px ;
+ width: calc( 100% + 1px ); /* hides last border */
+ display: flex ;
+ flex: row wrap ;
+ border-width: 1px ;
+ border-bottom-style: solid ;
+}
+
+/* Tab Content */
+
+.dome-xTab-content {
+ width: 100% ;
+ height: 100% ;
+}
+
+/* Tab Item */
+
+.dome-xTab {
+ flex: 1 1 150px ;
+ position: relative ;
+ font-size: 10px ;
+ text-align: center ;
+ padding: 4px 20px 4px 20px ;
+ border-color: inherit ;
+ border-width: 1px ;
+ border-top-style: none ;
+ border-bottom-style: none ;
+ border-left-style: none ;
+ border-right-style: solid ;
+}
+
+.dome-window-inactive .dome-xTab.dome-inactive {
+ color: #606060 ;
+ border-color: inherit ;
+}
+
+.dome-xTab.dome-inactive:hover {
+ background: #bababa ;
+}
+
+.dome-xTab.dome-inactive {
+ color: #606060 ;
+ border-color: #9c9c9c ;
+ background: #b4b4b4 ;
+}
+
+.dome-window-inactive .dome-xTab.dome-inactive {
+ color: #b0b0b0 ;
+ background: #e6e6e6 ;
+}
+
+/* Closing Tab button */
+
+.dome-xTab-closing {
+ display: inline ;
+ border-radius: 4px ;
+ position: absolute ;
+ width: 12px ;
+ height: 12px ;
+ padding: 2px ;
+ top: 2px ;
+ opacity: 0 ;
+ transition: opacity .1s linear 0.1s , background .1s linear 0.1s ;
+}
+
+.dome-platform-darwin .dome-xTab-closing {
+ right: initial ;
+ left: 5px ;
+}
+
+.dome-xTab-closing {
+ right: 5px ;
+ left: initial ;
+}
+
+.dome-active .dome-xTab-closing:hover {
+ background: #c0c0c0 ;
+}
+
+.dome-inactive .dome-xTab-closing:hover {
+ background: #a0a0a0 ;
+}
+
+.dome-xTab:hover .dome-xTab-closing , .dome-xTab:hover .dome-xTab-closing
+{
+ opacity: 1 ;
+}
+
+/* -------------------------------------------------------------------------- */
+/* --- Styling SideBars --- */
+/* -------------------------------------------------------------------------- */
+
+.dome-xSideBar {
+ width: 100% ;
+ height: 100% ;
+ overflow-x: hidden ;
+ overflow-y: auto ;
+ padding-top: 6px ;
+ padding-bottom: 6px ;
+}
+
+.dome-window-active .dome-xSideBar.dome-color-frame {
+ background: #e3e8ec ;
+}
+
+/* -------------------------------------------------------------------------- */
+/* --- SideBar Section --- */
+/* -------------------------------------------------------------------------- */
+
+.dome-xSideBarSection {
+ display: block ;
+ margin-top: 10px ;
+ margin-bottom: 10px ;
+}
+
+.dome-xSideBarSection-title {
+ padding-left: 3px ;
+ padding-right: 2px ;
+ display: flex ;
+ flew-flow: row nowrap ;
+ align-items: center ;
+}
+
+.dome-xSideBarSection-title > .dome-xLabel {
+ flex: 1 1 ;
+ overflow: hidden ;
+ text-overflow: ellipsis ;
+ font-weight: bold ;
+}
+
+.dome-xSideBarSection-title > .dome-xBadge {
+ flex: 0 0 ;
+}
+
+.dome-xSideBarSection-hideshow {
+ flex: 0 0 ;
+ margin: 1px ;
+ color: #aaa ;
+ width: 32px ;
+ font-weight: normal ;
+ display: inline ;
+ visibility: hidden ;
+}
+
+.dome-xSideBarSection-title:hover .dome-xSideBarSection-hideshow {
+ visibility: visible ;
+}
+
+.dome-xSideBarSection-content {
+ overflow: hidden ;
+ transition: max-height 250ms ease-in-out ;
+}
+
+/* -------------------------------------------------------------------------- */
+/* --- SideBar Items --- */
+/* -------------------------------------------------------------------------- */
+
+.dome-xSideBarItem {
+ padding-left: 2px ;
+ padding-right: 2px ;
+ display: flex ;
+ flex-flow: row nowrap ;
+ align-items: center ;
+}
+
+.dome-window-active .dome-xSideBarItem.dome-active {
+ background: #ccc ;
+}
+
+.dome-window-inactive .dome-xSideBarItem.dome-active {
+ background: #ddd ;
+}
+
+.dome-xSideBarItem > .dome-xLabel {
+ flex: 1 1 ;
+ overflow: hidden ;
+ text-overflow: ellipsis ;
+ padding-left: 12px ;
+}
+
+.dome-xSideBarItem.dome-disabled > .dome-xLabel {
+ color: #b0b0b0 ;
+ fill: #b0b0b0 ;
+}
+
+.dome-xSideBarItem > .dome-xLabel:last-child {
+ margin-right: 20px ;
+}
+
+.dome-xSideBarItem > .dome-xBadge {
+ flex: 0 0 ;
+}
+
/* -------------------------------------------------------------------------- */
/* --- Styling ToolBars --- */
/* -------------------------------------------------------------------------- */
diff --git a/ivette/src/dome/src/renderer/layout/tabs.js b/ivette/src/dome/src/renderer/frame/tabs.js
similarity index 94%
rename from ivette/src/dome/src/renderer/layout/tabs.js
rename to ivette/src/dome/src/renderer/frame/tabs.js
index 61489e0bde419a6985e5ffeefc27d8a182e792e5..9f14f3c9d6dfe97174c12b0ef734ebd9174a0c62 100644
--- a/ivette/src/dome/src/renderer/layout/tabs.js
+++ b/ivette/src/dome/src/renderer/frame/tabs.js
@@ -1,12 +1,13 @@
+// --------------------------------------------------------------------------
+// --- Tabs
+// --------------------------------------------------------------------------
+
+/** @module dome/frame/tabs */
+
import React from 'react' ;
import { Icon } from 'dome/controls/icons' ;
-import './tabs.css' ;
-/** @module dome/layout/tabs */
-
-// --------------------------------------------------------------------------
-// --- Tabs Bar
-// --------------------------------------------------------------------------
+import './style.css' ;
/**
@class
@@ -14,6 +15,9 @@ import './tabs.css' ;
@description
Shall contains [Tab](module-dome_layout_tabs.Tab.html) instances.
*/
+// --------------------------------------------------------------------------
+// --- Tabs Bar
+// --------------------------------------------------------------------------
export function TabsBar(props) {
return (
diff --git a/ivette/src/dome/src/renderer/layout/toolbars.js b/ivette/src/dome/src/renderer/frame/toolbars.js
similarity index 99%
rename from ivette/src/dome/src/renderer/layout/toolbars.js
rename to ivette/src/dome/src/renderer/frame/toolbars.js
index 721c5ea3dc838188225c4231c690c36f55d8f7e5..24dff66185ff93bbe3a6749aa768ba236e467e84 100644
--- a/ivette/src/dome/src/renderer/layout/toolbars.js
+++ b/ivette/src/dome/src/renderer/frame/toolbars.js
@@ -2,10 +2,11 @@
// --- ToolBars
// --------------------------------------------------------------------------
-/** @module dome/layout/toolbars */
+/** @module dome/frame/toolbars */
import React from 'react' ;
-import './toolbars.css' ;
+
+import './style.css' ;
// --------------------------------------------------------------------------
// --- ToolBar Container
diff --git a/ivette/src/dome/src/renderer/layout/boxes.css b/ivette/src/dome/src/renderer/layout/boxes.css
deleted file mode 100644
index a53382360de5caed92ac8239926234f8e0fd5bf9..0000000000000000000000000000000000000000
--- a/ivette/src/dome/src/renderer/layout/boxes.css
+++ /dev/null
@@ -1,86 +0,0 @@
-/* -------------------------------------------------------------------------- */
-/* --- Box Containers --- */
-/* -------------------------------------------------------------------------- */
-
-.dome-xBoxes-hbox
-{
- display: flex ;
- overflow: hidden ;
- flex-flow: row nowrap ;
- align-items: stretch ;
-}
-
-.dome-xBoxes-vbox
-{
- display: flex ;
- overflow: hidden ;
- flex-flow: column nowrap ;
- align-items: stretch ;
-}
-
-.dome-xBoxes-grid
-{
- flex: 1 1 auto ;
- overflow: auto ;
- display: grid ;
- display: grid;
- grid-auto-rows: auto;
- grid-auto-flow: row;
- align-items: stretch;
- align-content: start;
- justify-content: start;
-}
-
-/* -------------------------------------------------------------------------- */
-/* --- Extensibility --- */
-/* -------------------------------------------------------------------------- */
-
-.dome-xBoxes-pack
-{
- flex: 0 0 auto ;
- align-self: flex-start ;
-}
-
-.dome-xBoxes-box
-{
- flex: 0 0 auto ;
-}
-
-.dome-xBoxes-fill
-{
- flex: 1 1 auto ;
-}
-
-.dome-xBoxes-scroll
-{
- flex: 1 1 auto ;
- overflow: auto ;
-}
-
-.dome-container > .dome-xBoxes-fill
-{
- width: 100% ;
- height: 100% ;
-}
-
-.dome-container > .dome-xBoxes-scroll
-{
- width: 100% ;
- height: 100% ;
-}
-
-/* -------------------------------------------------------------------------- */
-/* --- Spaces --- */
-/* -------------------------------------------------------------------------- */
-
-.dome-xBoxes-space
-{
- flex: 0 1 24px ;
-}
-
-.dome-xBoxes-filler
-{
- flex: 1 1 24px ;
-}
-
-/* -------------------------------------------------------------------------- */
diff --git a/ivette/src/dome/src/renderer/layout/boxes.js b/ivette/src/dome/src/renderer/layout/boxes.js
index 1d9962523660cabbe561234cb1337e23dbe617d0..6dc0a7b8c92b318e001fbfb57cf91234e290f9d6 100644
--- a/ivette/src/dome/src/renderer/layout/boxes.js
+++ b/ivette/src/dome/src/renderer/layout/boxes.js
@@ -42,7 +42,7 @@ natively, place it inside a `<Scroll/>` sub-container.
import React from 'react';
import * as Dome from 'dome';
import { Title } from 'dome/controls/labels' ;
-import './boxes.css' ;
+import './style.css' ;
// --------------------------------------------------------------------------
// --- Generic Box
diff --git a/ivette/src/dome/src/renderer/layout/forms.js b/ivette/src/dome/src/renderer/layout/forms.js
index d054f84db577e35d98943177f92dee7bea5b698b..ad53e812169f6f0149e0eefc3fac577fbb6176e1 100644
--- a/ivette/src/dome/src/renderer/layout/forms.js
+++ b/ivette/src/dome/src/renderer/layout/forms.js
@@ -9,7 +9,7 @@ import React from 'react' ;
import * as Dome from 'dome' ;
import { SVG } from 'dome/controls/icons' ;
import { Checkbox, Radio, Select as Selector } from 'dome/controls/buttons' ;
-import './forms.css' ;
+import './style.css' ;
// --------------------------------------------------------------------------
// --- Utilities
diff --git a/ivette/src/dome/src/renderer/layout/frames.js b/ivette/src/dome/src/renderer/layout/frames.js
deleted file mode 100644
index 68fb995879dda8923570ad4afda19d96e5ce1488..0000000000000000000000000000000000000000
--- a/ivette/src/dome/src/renderer/layout/frames.js
+++ /dev/null
@@ -1,207 +0,0 @@
-// --------------------------------------------------------------------------
-// --- Frames
-// --------------------------------------------------------------------------
-
-/** @module dome/layout/frames */
-
-import React from 'react' ;
-import * as Dome from 'dome' ;
-import { dispatch } from 'dome/misc/register' ;
-import { Vfill } from 'dome/layout/boxes' ;
-import { SideBar } from 'dome/layout/sidebars' ;
-import { ToolBar } from 'dome/layout/toolbars' ;
-import { TabsBar , TabContent } from 'dome/layout/tabs' ;
-import { Splitter } from 'dome/layout/splitters' ;
-
-const callbacks = (f,g) => (f ? (g ? (id) => { f(id); g(id); } : f ) : g );
-
-// --------------------------------------------------------------------------
-// --- Frame Component
-// --------------------------------------------------------------------------
-
-/**
- @class
- @summary Main view with optional tabs, toolbar and sidebar.
- @property {string} [settings] - User-setting base name for
- persistent selection and customization
- @property {string} [selectedTab] - Currently selected tab
- @property {string} [selectedItem] - Currently selected sidebar item
- @property {string} [defaultTab] - Default selected tab (see also default tab's property)
- @property {string} [defaultItem] - Default selected item
- @property {function} [onTabClose] - tab closing callback
- @property {function} [onTabSelection] - tab selection callback
- @property {function} [onItemSelection] - sidebar item selection callback
- @property {boolean} [hideToolbar] - hide tool bar (default is `false`)
- @property {boolean} [hideTabsbar] - hide tabs bar (default is `false`)
- @description
-
- ##### Content
- The Frame layout and its decorations are specified according to
- the type of its children elements:
- - [Tab](module-dome_layout_tabs.Tab.html), if any, will be rendered into an optional
- [TabsBar](module-dome_layout_tabs.TabsBar.html) and the selected tab content
- will be rendered into the main content of the frame.
- - [Sidebar items](module-dome_layout_sidebars.html), if any, will be rendered
- inside a sidebar on the left of the frame.
- - [Toolbar items](module-dome_layout_toolbars.html), if any,
- will be rendered inside a toolbar on top of the frame.
- - The remaining elements will be rendered (inside a vertical box) into the
- main content the frame, provided there is no defined tab.
-
-
- ##### Callbacks
- Both general callbacks and tab ones are invoked
- when the user select or close a tab. The tab callbacks are invoked _before_ the
- frame ones.
-
-
- ##### Settings
- When provided, user selection will be saved in user's settings
- under the following keys (when relevant):
- - `'<settings>.dome.tab'` tab selection
- - `'<settings>.dome.item'` item selection
- - `'<settings>.dome.sidebar'` position of side-bar splitter
- - `'<settings>.dome.section'` visibility of side-bar sections
-*/
-
-export class Frame extends React.Component
-{
-
- constructor(props)
- {
- super(props);
- const settings = props.settings ;
- const derived = ( selected , user , def ) =>
- (selected || ( settings && Dome.getWindowSetting( settings + user ) ) || def) ;
- var selectedTab = derived( props.selectedTab , '.dome.tab' , props.defaultTab );
- var selectedItem = derived( props.selectedItem , '.dome.item' , props.defaultItem );
- this.state = { selectedTab , selectedItem };
- this.handleSelectTab = this.handleSelectTab.bind(this);
- this.handleSelectItem = this.handleSelectItem.bind(this);
- }
-
- // --------------------------------------------------------------------------
- // --- Life Cycle
- // --------------------------------------------------------------------------
-
- componentWillMount() {
- const onTabSelection = this.props.onTabSelection ;
- if (onTabSelection) {
- const stateId = this.state.selectedTab ;
- const propsId = this.props.selectedTab ;
- if (stateId !== propsId) setImmediate(() => onTabSelection( stateId ));
- }
- const onItemSelection = this.props.onItemSelection ;
- if (onItemSelection) {
- const stateId = this.state.selectedItem ;
- const propsId = this.props.selectedItem ;
- if (stateId !== propsId) setImmediate(() => onItemSelection( stateId ));
- }
- }
-
- componentDidUpdate() {
- const tabid = this.props.selectedTab ;
- if (tabid && this.state.selectedTab !== tabid)
- this.setState( { selectedTab: tabid } );
- const itemid = this.props.selectedItem ;
- if (itemid && this.state.selectedItem !== itemid)
- this.setState( { selectedItem: itemid } );
- }
-
- // --------------------------------------------------------------------------
- // --- Update
- // --------------------------------------------------------------------------
-
- handleSelectTab(id) {
- this.setState( { selectedTab: id } );
- const settings = this.props.settings ;
- const onSelect = this.props.onTabSelection ;
- settings && Dome.setWindowSetting( settings + '.dome.tab' , id );
- onSelect && onSelect( id );
- }
-
- handleSelectItem(id) {
- this.setState( { selectedItem: id } );
- const settings = this.props.settings ;
- const onSelect = this.props.onItemSelection ;
- settings && Dome.setWindowSetting( settings + '.dome.item' , id );
- onSelect && onSelect( id );
- }
-
- // --------------------------------------------------------------------------
- // --- Rendering
- // --------------------------------------------------------------------------
-
- render() {
-
- const content = dispatch( this.props.children , {
- tabsItems: 'DOME_TABSBAR_ITEM',
- sideItems: 'DOME_SIDEBAR_ITEM',
- toolItems: 'DOME_TOOLBAR_ITEM',
- others: undefined
- });
-
- var selection = this.state.selectedTab ;
- if (selection === undefined)
- React.Children.forEach( content.tabsItems , (tab) => {
- if (!selection && tab && tab.props.default)
- selection = tab.props.ident ;
- });
-
- const makeTab = (tab) => {
- const onSelection = callbacks( tab.props.onSelection , this.handleSelectTab );
- const onClose = callbacks( tab.props.onClose , this.props.onTabClose );
- const props = { selection , onSelection , onClose , content: false } ;
- return React.cloneElement( tab , props , null );
- };
-
- const makeContent = (tab) => {
- const props = {
- selection ,
- onSelection : undefined,
- onClose : undefined,
- content: true
- };
- return React.cloneElement( tab , props );
- };
-
- var tabs , main ;
- const settings = this.props.settings ;
- const tools = content.toolItems ;
-
- if (content.tabsItems) {
- tabs = React.Children.map( content.tabsItems , (tab) => tab && makeTab(tab) );
- main = React.Children.map( content.tabsItems , (tab) => tab && makeContent(tab) );
- if (content.others) console.warn('Unexpected main content for Frame with Tabs');
- } else {
- tabs = undefined ;
- main = content.others ;
- }
-
- if (content.sideItems) {
- const sidebarOffset = settings && (settings + '.dome.sidebar');
- const sidebarSections = settings && (settings + '.dome.section');
- main = (
- <Splitter dir='LEFT' settings={sidebarOffset} >
- { <SideBar
- settings={sidebarSections}
- selection={this.state.selectedItem}
- onSelection={this.handleSelectItem}
- >{content.sideItems}</SideBar> }
- { main }
- </Splitter>
- );
- }
-
- return (
- <Vfill>
- { !this.props.hideToolbar && tools && <ToolBar>{tools}</ToolBar> }
- { !this.props.hideTabsbar && tabs && <TabsBar>{tabs}</TabsBar> }
- { main }
- </Vfill>
- );
- }
-
-}
-
-// --------------------------------------------------------------------------
diff --git a/ivette/src/dome/src/renderer/layout/grids.css b/ivette/src/dome/src/renderer/layout/grids.css
deleted file mode 100644
index f7f8ce35b9f83a6f47acb0cb81f7b2bf6b9d6913..0000000000000000000000000000000000000000
--- a/ivette/src/dome/src/renderer/layout/grids.css
+++ /dev/null
@@ -1,51 +0,0 @@
-/* -------------------------------------------------------------------------- */
-/* --- GridLayout Styles --- */
-/* -------------------------------------------------------------------------- */
-
-.dome-xGridLayout {
- flex: 1 1 auto ;
- width: 100% ;
- height: 100% ;
- position: relative ;
- overflow: auto ;
-}
-
-.dome-xGridLayout-splitter {
- z-index: 1 ;
- position: absolute ;
-}
-
-.dome-xGridLayout-hsplit { cursor: col-resize }
-.dome-xGridLayout-hdrag { cursor: ew-resize }
-.dome-xGridLayout-vsplit { cursor: row-resize }
-.dome-xGridLayout-vdrag { cursor: ns-resize }
-
-.dome-xGridLayout-target {
- z-index: 2 ;
- position: absolute ;
- border-radius: 12px ;
- background: #64b4f0 ;
- opacity: 0.5 ;
-}
-
-.dome-xGridLayout-holder {
- z-index: -1 ;
- position: absolute ;
- overflow: hidden ;
- background: lightblue ;
- opacity: 0.5 ;
-}
-
-.dome-xGridLayout-item {
- z-index: 0 ;
- position: absolute ;
- overflow: hidden ;
-}
-
-.dome-xGridLayout-item.dome-dragging
-{
- z-index: +1 ;
- transition: all 0.1s ease-out ;
-}
-
-/* -------------------------------------------------------------------------- */
diff --git a/ivette/src/dome/src/renderer/layout/grids.js b/ivette/src/dome/src/renderer/layout/grids.js
index 6843f5d0bceee0e84baf7707034f2544541235b2..aad4e32c7b6e21b1d36d9b17d31c74093487d254 100644
--- a/ivette/src/dome/src/renderer/layout/grids.js
+++ b/ivette/src/dome/src/renderer/layout/grids.js
@@ -11,7 +11,8 @@ import { AutoSizer } from 'react-virtualized' ;
import { DraggableCore } from 'react-draggable' ;
import * as Dome from 'dome' ;
-import './grids.css' ;
+
+import './style.css' ;
// --------------------------------------------------------------------------
// --- Grid Utilities
diff --git a/ivette/src/dome/src/renderer/layout/sidebars.css b/ivette/src/dome/src/renderer/layout/sidebars.css
deleted file mode 100644
index ca4193112159084ad4cad634f8df75fdd4b13889..0000000000000000000000000000000000000000
--- a/ivette/src/dome/src/renderer/layout/sidebars.css
+++ /dev/null
@@ -1,107 +0,0 @@
-/* -------------------------------------------------------------------------- */
-/* --- Styling SideBars --- */
-/* -------------------------------------------------------------------------- */
-
-.dome-xSideBar {
- width: 100% ;
- height: 100% ;
- overflow-x: hidden ;
- overflow-y: auto ;
- padding-top: 6px ;
- padding-bottom: 6px ;
-}
-
-.dome-window-active .dome-xSideBar.dome-color-frame {
- background: #e3e8ec ;
-}
-
-/* -------------------------------------------------------------------------- */
-/* --- SideBar Section --- */
-/* -------------------------------------------------------------------------- */
-
-.dome-xSideBarSection {
- display: block ;
- margin-top: 10px ;
- margin-bottom: 10px ;
-}
-
-.dome-xSideBarSection-title {
- padding-left: 3px ;
- padding-right: 2px ;
- display: flex ;
- flew-flow: row nowrap ;
- align-items: center ;
-}
-
-.dome-xSideBarSection-title > .dome-xLabel {
- flex: 1 1 ;
- overflow: hidden ;
- text-overflow: ellipsis ;
- font-weight: bold ;
-}
-
-.dome-xSideBarSection-title > .dome-xBadge {
- flex: 0 0 ;
-}
-
-.dome-xSideBarSection-hideshow {
- flex: 0 0 ;
- margin: 1px ;
- color: #aaa ;
- width: 32px ;
- font-weight: normal ;
- display: inline ;
- visibility: hidden ;
-}
-
-.dome-xSideBarSection-title:hover .dome-xSideBarSection-hideshow {
- visibility: visible ;
-}
-
-.dome-xSideBarSection-content {
- overflow: hidden ;
- transition: max-height 250ms ease-in-out ;
-}
-
-
-/* -------------------------------------------------------------------------- */
-/* --- SideBar Items --- */
-/* -------------------------------------------------------------------------- */
-
-.dome-xSideBarItem {
- padding-left: 2px ;
- padding-right: 2px ;
- display: flex ;
- flex-flow: row nowrap ;
- align-items: center ;
-}
-
-.dome-window-active .dome-xSideBarItem.dome-active {
- background: #ccc ;
-}
-
-.dome-window-inactive .dome-xSideBarItem.dome-active {
- background: #ddd ;
-}
-
-.dome-xSideBarItem > .dome-xLabel {
- flex: 1 1 ;
- overflow: hidden ;
- text-overflow: ellipsis ;
- padding-left: 12px ;
-}
-
-.dome-xSideBarItem.dome-disabled > .dome-xLabel {
- color: #b0b0b0 ;
- fill: #b0b0b0 ;
-}
-
-.dome-xSideBarItem > .dome-xLabel:last-child {
- margin-right: 20px ;
-}
-
-.dome-xSideBarItem > .dome-xBadge {
- flex: 0 0 ;
-}
-
-/* -------------------------------------------------------------------------- */
diff --git a/ivette/src/dome/src/renderer/layout/splitters.css b/ivette/src/dome/src/renderer/layout/splitters.css
deleted file mode 100644
index 0b1e80e44131a434d16e6e165003dc7ee317d95c..0000000000000000000000000000000000000000
--- a/ivette/src/dome/src/renderer/layout/splitters.css
+++ /dev/null
@@ -1,51 +0,0 @@
-/* -------------------------------------------------------------------------- */
-/* --- XSplitter Style Sheet --- */
-/* -------------------------------------------------------------------------- */
-
-.dome-xSplitter-container {
- position: relative ;
- width: 100% ;
- height: 100% ;
-}
-
-.dome-xSplitPane {
- position: relative ;
-}
-
-.dome-xSplitter-grab {
- z-index: 1 ;
- position: relative ;
- border: 0 ;
-}
-
-.dome-xSplitter-h {
- left: -1px ;
- width: 3px ;
- height: 100% ;
- cursor: col-resize ;
-}
-
-.dome-xSplitter-v {
- top: -1px ;
- height: 3px ;
- width: 100% ;
- cursor: row-resize ;
-}
-
-.dome-xSplitter-no-cursor { }
-.dome-xSplitter-h-cursor { cursor: col-resize ; }
-.dome-xSplitter-v-cursor { cursor: row-resize ; }
-
-.dome-window-active .dome-xSplitLine {
- background: #afafaf ;
-}
-
-.dome-window-inactive .dome-xSplitLine {
- background: #d6d6d6 ;
-}
-
-.dome-xSplitPane, .dome-xSplitLine {
- transition: all 0.1s ease-out ;
-}
-
-/* -------------------------------------------------------------------------- */
diff --git a/ivette/src/dome/src/renderer/layout/splitters.js b/ivette/src/dome/src/renderer/layout/splitters.js
index 6f947ee2d10b9b168ae543c5ae2b9e44cfab87ad..5b4ced76388a4e017b0718e4e50a82abad5cde19 100644
--- a/ivette/src/dome/src/renderer/layout/splitters.js
+++ b/ivette/src/dome/src/renderer/layout/splitters.js
@@ -8,7 +8,8 @@ import _ from 'lodash' ;
import * as React from 'react' ;
import * as Dome from 'dome' ;
import { Layout } from 'dome/misc/layout' ;
-import './splitters.css' ;
+
+import './style.css' ;
// --------------------------------------------------------------------------
// --- Splitter Layout
diff --git a/ivette/src/dome/src/renderer/layout/forms.css b/ivette/src/dome/src/renderer/layout/style.css
similarity index 59%
rename from ivette/src/dome/src/renderer/layout/forms.css
rename to ivette/src/dome/src/renderer/layout/style.css
index 23a1712dc346d0bf66214dcf09bae04ded0a4c44..62a94697c92b28e2039d1a86b0a73728bba0c507 100644
--- a/ivette/src/dome/src/renderer/layout/forms.css
+++ b/ivette/src/dome/src/renderer/layout/style.css
@@ -1,3 +1,188 @@
+/* -------------------------------------------------------------------------- */
+/* --- Box Containers --- */
+/* -------------------------------------------------------------------------- */
+
+.dome-xBoxes-hbox
+{
+ display: flex ;
+ overflow: hidden ;
+ flex-flow: row nowrap ;
+ align-items: stretch ;
+}
+
+.dome-xBoxes-vbox
+{
+ display: flex ;
+ overflow: hidden ;
+ flex-flow: column nowrap ;
+ align-items: stretch ;
+}
+
+.dome-xBoxes-grid
+{
+ flex: 1 1 auto ;
+ overflow: auto ;
+ display: grid ;
+ display: grid;
+ grid-auto-rows: auto;
+ grid-auto-flow: row;
+ align-items: stretch;
+ align-content: start;
+ justify-content: start;
+}
+
+/* -------------------------------------------------------------------------- */
+/* --- Extensibility --- */
+/* -------------------------------------------------------------------------- */
+
+.dome-xBoxes-pack
+{
+ flex: 0 0 auto ;
+ align-self: flex-start ;
+}
+
+.dome-xBoxes-box
+{
+ flex: 0 0 auto ;
+}
+
+.dome-xBoxes-fill
+{
+ flex: 1 1 auto ;
+}
+
+.dome-xBoxes-scroll
+{
+ flex: 1 1 auto ;
+ overflow: auto ;
+}
+
+.dome-container > .dome-xBoxes-fill
+{
+ width: 100% ;
+ height: 100% ;
+}
+
+.dome-container > .dome-xBoxes-scroll
+{
+ width: 100% ;
+ height: 100% ;
+}
+
+/* -------------------------------------------------------------------------- */
+/* --- Spaces --- */
+/* -------------------------------------------------------------------------- */
+
+.dome-xBoxes-space
+{
+ flex: 0 1 24px ;
+}
+
+.dome-xBoxes-filler
+{
+ flex: 1 1 24px ;
+}
+
+/* -------------------------------------------------------------------------- */
+/* --- XSplitter Style Sheet --- */
+/* -------------------------------------------------------------------------- */
+
+.dome-xSplitter-container {
+ position: relative ;
+ width: 100% ;
+ height: 100% ;
+}
+
+.dome-xSplitPane {
+ position: relative ;
+}
+
+.dome-xSplitter-grab {
+ z-index: 1 ;
+ position: relative ;
+ border: 0 ;
+}
+
+.dome-xSplitter-h {
+ left: -1px ;
+ width: 3px ;
+ height: 100% ;
+ cursor: col-resize ;
+}
+
+.dome-xSplitter-v {
+ top: -1px ;
+ height: 3px ;
+ width: 100% ;
+ cursor: row-resize ;
+}
+
+.dome-xSplitter-no-cursor { }
+.dome-xSplitter-h-cursor { cursor: col-resize ; }
+.dome-xSplitter-v-cursor { cursor: row-resize ; }
+
+.dome-window-active .dome-xSplitLine {
+ background: #afafaf ;
+}
+
+.dome-window-inactive .dome-xSplitLine {
+ background: #d6d6d6 ;
+}
+
+.dome-xSplitPane, .dome-xSplitLine {
+ transition: all 0.1s ease-out ;
+}
+
+/* -------------------------------------------------------------------------- */
+/* --- GridLayout Styles --- */
+/* -------------------------------------------------------------------------- */
+
+.dome-xGridLayout {
+ flex: 1 1 auto ;
+ width: 100% ;
+ height: 100% ;
+ position: relative ;
+ overflow: auto ;
+}
+
+.dome-xGridLayout-splitter {
+ z-index: 1 ;
+ position: absolute ;
+}
+
+.dome-xGridLayout-hsplit { cursor: col-resize }
+.dome-xGridLayout-hdrag { cursor: ew-resize }
+.dome-xGridLayout-vsplit { cursor: row-resize }
+.dome-xGridLayout-vdrag { cursor: ns-resize }
+
+.dome-xGridLayout-target {
+ z-index: 2 ;
+ position: absolute ;
+ border-radius: 12px ;
+ background: #64b4f0 ;
+ opacity: 0.5 ;
+}
+
+.dome-xGridLayout-holder {
+ z-index: -1 ;
+ position: absolute ;
+ overflow: hidden ;
+ background: lightblue ;
+ opacity: 0.5 ;
+}
+
+.dome-xGridLayout-item {
+ z-index: 0 ;
+ position: absolute ;
+ overflow: hidden ;
+}
+
+.dome-xGridLayout-item.dome-dragging
+{
+ z-index: +1 ;
+ transition: all 0.1s ease-out ;
+}
+
/* -------------------------------------------------------------------------- */
/* --- Form Containers --- */
/* -------------------------------------------------------------------------- */
diff --git a/ivette/src/dome/src/renderer/layout/tabs.css b/ivette/src/dome/src/renderer/layout/tabs.css
deleted file mode 100644
index f604114d0a72f62f98505e1456e6111fc7375c4e..0000000000000000000000000000000000000000
--- a/ivette/src/dome/src/renderer/layout/tabs.css
+++ /dev/null
@@ -1,98 +0,0 @@
-/* -------------------------------------------------------------------------- */
-/* --- Tabs & Tab Style Sheet --- */
-/* -------------------------------------------------------------------------- */
-
-/* Tabs Bar */
-
-.dome-xTabsBar {
- flex: 0 1 auto ;
- position: relative ;
- height: 20px ;
- width: calc( 100% + 1px ); /* hides last border */
- display: flex ;
- flex: row wrap ;
- border-width: 1px ;
- border-bottom-style: solid ;
-}
-
-/* Tab Content */
-
-.dome-xTab-content {
- width: 100% ;
- height: 100% ;
-}
-
-/* Tab Item */
-
-.dome-xTab {
- flex: 1 1 150px ;
- position: relative ;
- font-size: 10px ;
- text-align: center ;
- padding: 4px 20px 4px 20px ;
- border-color: inherit ;
- border-width: 1px ;
- border-top-style: none ;
- border-bottom-style: none ;
- border-left-style: none ;
- border-right-style: solid ;
-}
-
-.dome-window-inactive .dome-xTab.dome-inactive {
- color: #606060 ;
- border-color: inherit ;
-}
-
-.dome-xTab.dome-inactive:hover {
- background: #bababa ;
-}
-
-.dome-xTab.dome-inactive {
- color: #606060 ;
- border-color: #9c9c9c ;
- background: #b4b4b4 ;
-}
-
-.dome-window-inactive .dome-xTab.dome-inactive {
- color: #b0b0b0 ;
- background: #e6e6e6 ;
-}
-
-/* Closing Tab button */
-
-.dome-xTab-closing {
- display: inline ;
- border-radius: 4px ;
- position: absolute ;
- width: 12px ;
- height: 12px ;
- padding: 2px ;
- top: 2px ;
- opacity: 0 ;
- transition: opacity .1s linear 0.1s , background .1s linear 0.1s ;
-}
-
-.dome-platform-darwin .dome-xTab-closing {
- right: initial ;
- left: 5px ;
-}
-
-.dome-xTab-closing {
- right: 5px ;
- left: initial ;
-}
-
-.dome-active .dome-xTab-closing:hover {
- background: #c0c0c0 ;
-}
-
-.dome-inactive .dome-xTab-closing:hover {
- background: #a0a0a0 ;
-}
-
-.dome-xTab:hover .dome-xTab-closing , .dome-xTab:hover .dome-xTab-closing
-{
- opacity: 1 ;
-}
-
-/* -------------------------------------------------------------------------- */
diff --git a/ivette/src/dome/src/renderer/dome.css b/ivette/src/dome/src/renderer/style.css
similarity index 100%
rename from ivette/src/dome/src/renderer/dome.css
rename to ivette/src/dome/src/renderer/style.css
diff --git a/ivette/src/dome/src/renderer/table/tables.css b/ivette/src/dome/src/renderer/table/style.css
similarity index 100%
rename from ivette/src/dome/src/renderer/table/tables.css
rename to ivette/src/dome/src/renderer/table/style.css
diff --git a/ivette/src/dome/src/renderer/table/views.js b/ivette/src/dome/src/renderer/table/views.js
index d0a4bc112cedc9f1b385f8d71e444bc16638321d..d298a82af59ee369ab978bc12d4d4e9bf6aa88ce 100644
--- a/ivette/src/dome/src/renderer/table/views.js
+++ b/ivette/src/dome/src/renderer/table/views.js
@@ -15,7 +15,8 @@ import {
Table as VTable,
Column as VColumn
} from 'react-virtualized' ;
-import './tables.css' ;
+
+import './style.css' ;
// --------------------------------------------------------------------------
// --- Header Renderer
diff --git a/ivette/src/dome/src/renderer/text/editors.css b/ivette/src/dome/src/renderer/text/editors.css
deleted file mode 100644
index 664097705dc1179709d0fe70c3d091b9957b081b..0000000000000000000000000000000000000000
--- a/ivette/src/dome/src/renderer/text/editors.css
+++ /dev/null
@@ -1,29 +0,0 @@
-/* -------------------------------------------------------------------------- */
-/* --- Styling Code Editors --- */
-/* -------------------------------------------------------------------------- */
-
-.dome-xText {
- flex: 1 1 auto ;
- overflow: hidden ;
- position: relative ;
- fontSize: smaller ;
-}
-
-.dome-xText .CodeMirror {
- width: 100% ;
- height: 100% ;
-}
-
-.dome-xText-hover {
- background: lightgreen ;
-}
-
-.dome-xText-select {
- background: #ffda95 !important ;
-}
-
-.dome-xText-select.dome-xText-hover {
- background: orange !important ;
-}
-
-/* -------------------------------------------------------------------------- */
diff --git a/ivette/src/dome/src/renderer/text/editors.js b/ivette/src/dome/src/renderer/text/editors.js
index b54e4e829fdea10c882a21d90ebd19a0bcde5a42..aece9b84143297c1ae11852e4dec4c9d94450839 100644
--- a/ivette/src/dome/src/renderer/text/editors.js
+++ b/ivette/src/dome/src/renderer/text/editors.js
@@ -8,8 +8,9 @@ import _ from 'lodash' ;
import React from 'react' ;
import * as Dome from 'dome' ;
import CodeMirror from 'codemirror/lib/codemirror.js' ;
+
+import './style.css' ;
import 'codemirror/lib/codemirror.css' ;
-import './editors.css' ;
const CSS_HOVERED = 'dome-xText-hover' ;
const CSS_SELECTED = 'dome-xText-select' ;
diff --git a/ivette/src/dome/src/renderer/layout/pages.js b/ivette/src/dome/src/renderer/text/pages.js
similarity index 95%
rename from ivette/src/dome/src/renderer/layout/pages.js
rename to ivette/src/dome/src/renderer/text/pages.js
index a630356d953c8650310ac466f555d7358fac305c..ca8b486e080521af0ac5c26f9d2410baca5a6930 100644
--- a/ivette/src/dome/src/renderer/layout/pages.js
+++ b/ivette/src/dome/src/renderer/text/pages.js
@@ -3,7 +3,7 @@
// --------------------------------------------------------------------------
/**
- @module dome/layout/pages
+ @module dome/text/pages
@description
A collection of text area and elements do render textual content.
@@ -24,8 +24,8 @@
*/
import React from 'react' ;
-import { AutoSizer } from 'react-virtualized' ;
-import './pages.css' ;
+
+import './style.css' ;
// --------------------------------------------------------------------------
// --- Page
diff --git a/ivette/src/dome/src/renderer/layout/pages.css b/ivette/src/dome/src/renderer/text/style.css
similarity index 71%
rename from ivette/src/dome/src/renderer/layout/pages.css
rename to ivette/src/dome/src/renderer/text/style.css
index 6d593e550c77eadf0113b3e25e5d41c7282a0059..be7f8ea0dd15cccbb7f192d1f42ba4541f7073e2 100644
--- a/ivette/src/dome/src/renderer/layout/pages.css
+++ b/ivette/src/dome/src/renderer/text/style.css
@@ -1,3 +1,31 @@
+/* -------------------------------------------------------------------------- */
+/* --- Styling Code Editors --- */
+/* -------------------------------------------------------------------------- */
+
+.dome-xText {
+ flex: 1 1 auto ;
+ overflow: hidden ;
+ position: relative ;
+ fontSize: smaller ;
+}
+
+.dome-xText .CodeMirror {
+ width: 100% ;
+ height: 100% ;
+}
+
+.dome-xText-hover {
+ background: lightgreen ;
+}
+
+.dome-xText-select {
+ background: #ffda95 !important ;
+}
+
+.dome-xText-select.dome-xText-hover {
+ background: orange !important ;
+}
+
/* -------------------------------------------------------------------------- */
/* --- Styling Page --- */
/* -------------------------------------------------------------------------- */
diff --git a/ivette/src/frama-c/LabViews.tsx b/ivette/src/frama-c/LabViews.tsx
index a0225a87eb03ee695209ace0e7303fc825380587..bf41e8ba3d498d2b22a1a9340ff263043c50241c 100644
--- a/ivette/src/frama-c/LabViews.tsx
+++ b/ivette/src/frama-c/LabViews.tsx
@@ -9,7 +9,7 @@ import React from 'react';
import * as Dome from 'dome';
import { Catch } from 'dome/errors';
import { DnD, DragSource } from 'dome/dnd';
-import { SideBar, Section, Item } from 'dome/layout/sidebars';
+import { SideBar, Section, Item } from 'dome/frame/sidebars';
import { Splitter } from 'dome/layout/splitters';
import * as Grids from 'dome/layout/grids';
import { Hbox, Hfill, Vfill } from 'dome/layout/boxes';
diff --git a/ivette/src/renderer/Application.tsx b/ivette/src/renderer/Application.tsx
index bb69426246641b04171c62f47d972c25b2f5ce24..10439a75ba89564f385e65850aea5776c04a71d9 100644
--- a/ivette/src/renderer/Application.tsx
+++ b/ivette/src/renderer/Application.tsx
@@ -6,8 +6,8 @@ import React from 'react';
import * as Dome from 'dome';
import { Vfill } from 'dome/layout/boxes';
import { Splitter } from 'dome/layout/splitters';
-import * as Toolbar from 'dome/layout/toolbars';
-import * as Sidebar from 'dome/layout/sidebars';
+import * as Toolbar from 'dome/frame/toolbars';
+import * as Sidebar from 'dome/frame/sidebars';
import './style.css';
diff --git a/ivette/src/renderer/Controller.tsx b/ivette/src/renderer/Controller.tsx
index a5ce00a483587b0c8f415d2621939b7cb80037f4..dceb1b74fdeb7cd6e931da81ac96448b5bfa40bc 100644
--- a/ivette/src/renderer/Controller.tsx
+++ b/ivette/src/renderer/Controller.tsx
@@ -5,11 +5,12 @@
import React from 'react';
import * as Dome from 'dome';
-import { Button as ToolButton, ButtonGroup, Space } from 'dome/layout/toolbars';
+import { Button as ToolButton, ButtonGroup, Space } from 'dome/frame/toolbars';
import { LED, IconButton } from 'dome/controls/buttons';
import { Label, Code } from 'dome/controls/labels';
import { RichTextBuffer } from 'dome/text/buffers';
import { Text } from 'dome/text/editors';
+
import * as Server from 'frama-c/server';
import { Component, TitleBar } from 'frama-c/LabViews';