diff --git a/internal/compiler/builtins.slint b/internal/compiler/builtins.slint index 906649843b0..3f38a1d5557 100644 --- a/internal/compiler/builtins.slint +++ b/internal/compiler/builtins.slint @@ -534,6 +534,7 @@ component Tab { // Note: not a native class, handled in the lower_tabs pass export component TabWidget { in-out property current-index; + in property orientation; //-disallow_global_types_as_child_elements Tab { } diff --git a/internal/compiler/passes/lower_tabwidget.rs b/internal/compiler/passes/lower_tabwidget.rs index 30bda4869a1..cd32054daa0 100644 --- a/internal/compiler/passes/lower_tabwidget.rs +++ b/internal/compiler/passes/lower_tabwidget.rs @@ -30,10 +30,14 @@ pub async fn lower_tabwidget( .import_component("std-widgets.slint", "TabImpl", &mut build_diags_to_ignore) .await .expect("can't load TabImpl from std-widgets.slint"); - let tabbar_impl = type_loader - .import_component("std-widgets.slint", "TabBarImpl", &mut build_diags_to_ignore) + let tabbar_horizontal_impl = type_loader + .import_component("std-widgets.slint", "TabBarHorizontalImpl", &mut build_diags_to_ignore) .await - .expect("can't load TabBarImpl from std-widgets.slint"); + .expect("can't load TabBarHorizontalImpl from std-widgets.slint"); + let tabbar_vertical_impl = type_loader + .import_component("std-widgets.slint", "TabBarVerticalImpl", &mut build_diags_to_ignore) + .await + .expect("can't load TabBarVerticalImpl from std-widgets.slint"); let empty_type = type_loader.global_type_registry.borrow().empty_type(); doc.visit_all_used_components(|component| { @@ -43,7 +47,8 @@ pub async fn lower_tabwidget( elem, ElementType::Component(tabwidget_impl.clone()), ElementType::Component(tab_impl.clone()), - ElementType::Component(tabbar_impl.clone()), + ElementType::Component(tabbar_horizontal_impl.clone()), + ElementType::Component(tabbar_vertical_impl.clone()), &empty_type, diag, ); @@ -56,7 +61,8 @@ fn process_tabwidget( elem: &ElementRc, tabwidget_impl: ElementType, tab_impl: ElementType, - tabbar_impl: ElementType, + tabbar_horizontal_impl: ElementType, + tabbar_vertical_impl: ElementType, empty_type: &ElementType, diag: &mut BuildDiagnostics, ) { @@ -175,6 +181,21 @@ fn process_tabwidget( tabs.push(Element::make_rc(tab)); } + let mut tabbar_impl = tabbar_horizontal_impl; + if let Some(orientation) = elem.borrow().bindings.get("orientation") { + if let Expression::EnumerationValue(val) = + super::ignore_debug_hooks(&orientation.borrow().expression) + { + if val.value == 1 { + tabbar_impl = tabbar_vertical_impl; + } + } else { + diag.push_error( + "The orientation property only supports constants at the moment".into(), + &orientation.borrow().span, + ); + } + } let tabbar = Element { id: format_smolstr!("{}-tabbar", elem.borrow().id), base_type: tabbar_impl, diff --git a/internal/compiler/typeregister.rs b/internal/compiler/typeregister.rs index 85a10d4c127..569446e3912 100644 --- a/internal/compiler/typeregister.rs +++ b/internal/compiler/typeregister.rs @@ -566,6 +566,15 @@ impl TypeRegister { _ => unreachable!(), }; + match &mut register.elements.get_mut("TabWidget").unwrap() { + ElementType::Builtin(b) => { + let tabwidget = Rc::get_mut(b).unwrap(); + tabwidget.properties.get_mut("orientation").unwrap().property_visibility = + PropertyVisibility::Constexpr; + } + _ => unreachable!(), + } + register } diff --git a/internal/compiler/widgets/material/std-widgets.slint b/internal/compiler/widgets/material/std-widgets.slint index e5fc545b1b0..53ddd7c4e2e 100644 --- a/internal/compiler/widgets/material/std-widgets.slint +++ b/internal/compiler/widgets/material/std-widgets.slint @@ -7,7 +7,7 @@ export { AboutSlint } from "../common/about-slint.slint"; export { StandardButton } from "../common/standardbutton.slint"; export { StyleMetrics, ScrollView, Button, CheckBox, Palette } from "std-widgets-impl.slint"; export { LineEdit } from "lineedit.slint"; -export { TabWidgetImpl, TabImpl, TabBarImpl, TabWidget } from "tabwidget.slint"; +export { TabWidgetImpl, TabImpl, TabBarHorizontalImpl,TabBarVerticalImpl, TabWidget } from "tabwidget.slint"; export { GroupBox } from "groupbox.slint"; export { VerticalBox, HorizontalBox, GridBox } from "../common/layout.slint"; export { Slider } from "slider.slint"; diff --git a/internal/compiler/widgets/material/tabwidget.slint b/internal/compiler/widgets/material/tabwidget.slint index 5437141d76d..2eb45e9c94a 100644 --- a/internal/compiler/widgets/material/tabwidget.slint +++ b/internal/compiler/widgets/material/tabwidget.slint @@ -12,14 +12,15 @@ export component TabWidgetImpl inherits Rectangle { in property content-min-width; in property current-index; in property current-focused; - out property content-x: 0; - out property content-y: root.tabbar-preferred-height; - out property content-height: root.height - root.tabbar-preferred-height; - out property content-width: root.width; + in property orientation: Orientation.horizontal; + out property content-x: orientation==Orientation.horizontal?0:root.tabbar-preferred-width; + out property content-y: orientation==Orientation.horizontal?root.tabbar-preferred-height:0; + out property content-height: orientation==Orientation.horizontal?root.height - root.tabbar-preferred-height:root.height; + out property content-width: orientation==Orientation.horizontal?root.width:root.width - root.tabbar-preferred-width; out property tabbar-x: 0; out property tabbar-y: 0; - out property tabbar-height: root.tabbar-preferred-height; - out property tabbar-width: root.width; + out property tabbar-height: orientation==Orientation.horizontal?root.tabbar-preferred-height:root.height; + out property tabbar-width: orientation==Orientation.horizontal?root.width:root.tabbar-preferred-width; preferred-width: root.content-min-width; min-width: max(root.content-min-width, root.tabbar-preferred-width); @@ -112,7 +113,7 @@ export component TabImpl inherits Rectangle { } } -export component TabBarImpl inherits TabBarBase { +component MaterialTabBarBase inherits TabBarBase { // injected properties: // The currently focused tab in-out property current-focused: focus-scope.has-focus ? focus-scope.focused-tab : -1; @@ -121,11 +122,7 @@ export component TabBarImpl inherits TabBarBase { accessible-delegate-focus: root.current-focused >= 0 ? root.current-focused : root.current; accessible-item-count: root.num-tabs; - Flickable { - HorizontalLayout { - @children - } - } + focus-scope := FocusScope { property focused-tab: 0; @@ -160,4 +157,20 @@ export component TabBarImpl inherits TabBarBase { } } +export component TabBarHorizontalImpl inherits MaterialTabBarBase { + Flickable { + HorizontalLayout { + @children + } + } +} + +export component TabBarVerticalImpl inherits MaterialTabBarBase { + Flickable { + VerticalLayout { + @children + } + } +} + export component TabWidget inherits TabWidget { }