diff --git a/Nasal/canvas/gui/dialogs/WidgetsFactoryDialog.nas b/Nasal/canvas/gui/dialogs/WidgetsFactoryDialog.nas index 605ecc8df..4b1077b90 100644 --- a/Nasal/canvas/gui/dialogs/WidgetsFactoryDialog.nas +++ b/Nasal/canvas/gui/dialogs/WidgetsFactoryDialog.nas @@ -10,48 +10,55 @@ var WidgetsFactoryDialog = { .set("background", style.getColor("bg_color")) .createGroup(); m.vbox = VBoxLayout.new(); - vbox.setContentsMargin(10); - m.setLayout(vbox); + #m.vbox.setContentsMargin(10); + m.setLayout(m.vbox); m.tabs = gui.widgets.TabWidget.new(m.root, style, {}); + m.tabsContent = m.tabs.getContent(); m.vbox.addItem(m.tabs); m.tab_1 = VBoxLayout.new(); m.tabs.addTab("tab-1", "Tab 1", m.tab_1); - m.label = gui.widgets.Label.new(m.root, style, {}) + m.label = gui.widgets.Label.new(m.tabsContent, style, {}) .setText("A label") - .setBackground("#ff0000"); + .setBackground("#ffaaaa"); m.tab_1.addItem(m.label); - m.checkbox_left = gui.widgets.CheckBox.new(m.root, style, {"label-position": "left"}) - .setText("Checkbox with text on the left side"); + m.checkbox_left = gui.widgets.CheckBox.new(m.tabsContent, style, {"label-position": "right"}) + .setText("Wanna check something ?"); m.tab_1.addItem(m.checkbox_left); - m.checkbox_right = gui.widgets.CheckBox.new(m.root, style, {"label-position": "right"}) - .setText("Checkbox with text on the right side") + m.checkbox_right = gui.widgets.CheckBox.new(m.tabsContent, style, {"label-position": "right"}) + .setText("Checkbox with text on the right side"); m.tab_1.addItem(m.checkbox_right); - m.property_checkbox = gui.widgets.PropertyCheckBox.new(props.globals.getNode("/controls/lighting/nav-lights"), m.root, style, {}) + m.property_checkbox = gui.widgets.PropertyCheckBox.new(props.globals.getNode("/controls/lighting/nav-lights"), m.tabsContent, style, {}) .setText("Nav lights"); m.tab_1.addItem(m.property_checkbox); m.tab_2 = VBoxLayout.new(); m.tabs.addTab("tab-2", "Tab 2", m.tab_2); - m.button = gui.widgets.Button.new(m.root, style, {}) + m.button = gui.widgets.Button.new(m.tabsContent, style, {}) .setText("A button") .listen("clicked", func { - var s = InputDialog.getText("You clicked the button …", "Enter some text:"); - MessageBox.information("You clicked the button …", "… and entered '" ~ s ~ "' !"); + InputDialog.getText("You clicked the button …", "Enter some text:", func (button, text) { + MessageBox.information("You clicked the button …", "… and entered '" ~ (text != nil ? text : "nothing") ~ "' !"); + }); }); m.tab_2.addItem(m.button); - m.image = gui.widgets.Label.new(m.root, style, {}) - .setImage("Textures/Splash1.png"); + m.image = gui.widgets.Label.new(m.tabsContent, style, {}) + .setImage("Textures/Splash1.png") + .setFixedSize(128, 128); m.tab_2.addItem(m.image); - m.checkable_button = gui.widgets.Button.new(m.root, style, {}) + # XXX: setVisible(0) must be called AFTER adding the widget to the layout + # doing that before layout.addItem causes FG to crash with a SIGSEGV + # see https://sourceforge.net/p/flightgear/mailman/flightgear-devel/thread/CABg8F9Rb87Fy%252B2ppXjJouYcZH9xyiQxts-jkdrPq0GK_Ymq-6w%2540mail.gmail.com/ + m.image.setVisible(0); + m.checkable_button = gui.widgets.Button.new(m.tabsContent, style, {}) .setCheckable(1) .setChecked(0) .setText("Checkable button") .listen("toggled", func (e) { m.image.setVisible(int(e.detail.checked)); }); - m.table.addItem(m.checkable_button); + m.tab_2.addItem(m.checkable_button); return m; }, diff --git a/Nasal/canvas/gui/styles/DefaultStyle.nas b/Nasal/canvas/gui/styles/DefaultStyle.nas index fea09b05f..2c28da5f8 100644 --- a/Nasal/canvas/gui/styles/DefaultStyle.nas +++ b/Nasal/canvas/gui/styles/DefaultStyle.nas @@ -459,26 +459,26 @@ DefaultStyle.widgets["scroll-area"] = { }; DefaultStyle.widgets["tab-widget"] = { + tabBarHeight: 30, new: func(parent, cfg) { me._root = parent.createChild("group", "tab-widget"); - me._bg = me._root.createChild("path", "background") + me.bg = me._root.createChild("path", "background") .set("fill", "#e0e0e0"); me.tabBar = me._root.createChild("group", "tab-widget-tabbar"); - me.tabBarHeight = 30; me.content = me._root.createChild("group", "tab-widget-content"); - me.content.setTranslation(0, me.tabBarHeight); }, update: func(model) { - me._bg.set("fill", me._style.getColor("bg_color")); + me.bg.set("fill", me._style.getColor("bg_color")); + me.tabBar.update(); + me.content.update(); }, setSize: func(model, w, h) { - me._bg.reset().rect(0, 0, model._size[0], model._size[1]); - me.tabBar.set("clip", sprintf("rect(0, %d, %d, 0)", model._size[0], me.tabBarHeight)); - me.content.set("clip", sprintf("rect(0, %d, %d, 0)", model._size[0], model._size[1] - me.tabBarHeight)); - - return me.update(model); + me.bg.reset().rect(0, w, h, 0); + me.tabBar.set("clip", sprintf("rect(0, %d, %d, 0)", w, me.tabBarHeight)); + me.content.setTranslation(0, me.tabBarHeight); + me.content.set("clip", sprintf("rect(0, %d, %d, 0)", w, h)); }, }; diff --git a/Nasal/canvas/gui/widgets/TabWidget.nas b/Nasal/canvas/gui/widgets/TabWidget.nas index 5441799dc..30e17119c 100644 --- a/Nasal/canvas/gui/widgets/TabWidget.nas +++ b/Nasal/canvas/gui/widgets/TabWidget.nas @@ -4,6 +4,46 @@ # SPDX-FileCopyrightText: (C) 2022 Frederic Croix # SPDX-License-Identifier: GPL-2.0-or-later +# Usage example +# var window = canvas.Window.new([300, 300], "dialog"); +# var myCanvas = window.createCanvas().set("background", canvas.style.getColor("bg_color")); +# var root = myCanvas.createGroup(); +# var vbox = canvas.VBoxLayout.new(); +# myCanvas.setLayout(vbox); +# +# var tabs = canvas.gui.widgets.TabWidget.new(root, canvas.style, {}); +# var tabsContent = tabs.getContent(); +# vbox.addItem(tabs); +# +# var tab1 = canvas.VBoxLayout.new(); +# var image1 = canvas.gui.widgets.Label.new(tabsContent, canvas.style, {}) +# .setImage("Textures/Splash1.png") +# .setFixedSize(128, 128); +# tab1.addItem(image1); +# var text1 = canvas.gui.widgets.Label.new(tabsContent, canvas.style, {}) +# .setText("Texture 1"); +# tab1.addItem(text1); +# tabs.addTab("tab1", "Texture 1", tab1); +# +# var tab2 = canvas.VBoxLayout.new(); +# var image2 = canvas.gui.widgets.Label.new(tabsContent, canvas.style, {}) +# .setImage("Textures/Splash2.png") +# .setFixedSize(128, 128); +# tab2.addItem(image2); +# var text2 = canvas.gui.widgets.Label.new(tabsContent, canvas.style, {}) +# .setText("Texture 2"); +# tab2.addItem(text2); +# tabs.addTab("tab2", "Texture 2", tab2); +# +# var tab3 = canvas.VBoxLayout.new(); +# var image3 = canvas.gui.widgets.Label.new(tabsContent, canvas.style, {}) +# .setImage("Textures/Splash3.png") +# .setFixedSize(128, 128); +# tab3.addItem(image3); +# var text3 = canvas.gui.widgets.Label.new(tabsContent, canvas.style, {}) +# .setText("Texture 3"); +# tab3.addItem(text3); +# tabs.addTab("tab3", "Texture 3", tab3); gui.widgets.TabWidgetTabButton = { new: func(parent, style, cfg) { @@ -66,6 +106,10 @@ gui.widgets.TabWidget = { return m; }, + getContent: func { + return me._view.content; + }, + hasTab: func(id) { return me._tabs[id] != nil; }, @@ -83,7 +127,7 @@ gui.widgets.TabWidget = { die("cannot add multiple tabs with the same id: " ~ id); } - me._tabButtons[id] = gui.widgets.TabWidgetTabButton.new(me._view._root, canvas.style, {}) + me._tabButtons[id] = gui.widgets.TabWidgetTabButton.new(me._view.tabBar, canvas.style, {}) .setText(label) .listen("toggled", func (e) { if (e.detail.selected and id != me._currentTabId) { @@ -154,7 +198,8 @@ gui.widgets.TabWidget = { if (me._currentTab) { me._currentTab.setGeometry([0, me._view.tabBarHeight, me._size[0], me._size[1] - me._view.tabBarHeight]); } - + me._view.setSize(me, me._size[0], me._size[1]); + me._view.update(me); return me;