diff --git a/components/Button.qml b/components/Button.qml index b27ee698815da8b2b85af880ce272594648881ad..19dd394aaba2bd7e92cd83969e38a30f1429c235 100644 --- a/components/Button.qml +++ b/components/Button.qml @@ -45,9 +45,6 @@ import QtDesktop 0.2 BasicButton { id: button - implicitWidth: Math.max(72, backgroundItem.implicitWidth) - implicitHeight: Math.max(22, backgroundItem.implicitHeight) - property alias containsMouse: tooltip.containsMouse property bool defaultbutton: false property string styleHint @@ -65,7 +62,7 @@ BasicButton { text: button.tooltip } - background: StyleItem { + delegate: StyleItem { id: styleitem anchors.fill: parent elementType: "button" diff --git a/components/CheckBox.qml b/components/CheckBox.qml index d2e2308c32f6409ed0adc27fc29094663d7f3de5..a97e505256ec8119e7398c2a83dd8e2a4c8f4d64 100644 --- a/components/CheckBox.qml +++ b/components/CheckBox.qml @@ -54,16 +54,14 @@ FocusScope { property string text property string styleHint - property Item backgroundItem: backgroundLoader.item - // implementation Accessible.role: Accessible.CheckBox Accessible.name: text - implicitWidth: Math.max(120, backgroundItem.implicitWidth) - implicitHeight: backgroundItem.implicitHeight + implicitWidth: Math.max(120, loader.item.implicitWidth) + implicitHeight: loader.item.implicitHeight - property Component background: StyleItem { + property Component delegate: StyleItem { elementType: "checkbox" sunken: pressed on: checked || pressed @@ -86,10 +84,10 @@ FocusScope { } Loader { - id: backgroundLoader + id: loader anchors.fill: parent property alias control: checkBox - sourceComponent: background + sourceComponent: delegate } ButtonBehavior { diff --git a/components/ComboBox.qml b/components/ComboBox.qml index 0e7245bffe079c89b57930ddbf5557140194abaa..69aff685e10447b2fa48840d95137b5c096e61b6 100644 --- a/components/ComboBox.qml +++ b/components/ComboBox.qml @@ -105,7 +105,7 @@ Private.BasicButton { property alias hoveredText: popup.hoveredText property string styleHint - background: StyleItem { + delegate: StyleItem { anchors.fill: parent elementType: "combobox" sunken: comboBox.pressed @@ -115,24 +115,22 @@ Private.BasicButton { text: comboBox.selectedText hasFocus: comboBox.focus contentHeight: 18 + Component.onCompleted: popup.center = styleHint("comboboxpopup"); } // ToDo: adjust margins so that selected popup label // centers directly above button label when // popup.centerOnSelectedText === true - width: implicitWidth height: implicitHeight - implicitWidth: Math.max(80, backgroundItem.implicitWidth) - implicitHeight: backgroundItem.implicitHeight onWidthChanged: popup.setMinimumWidth(width) checkable: false onPressedChanged: if (pressed) popup.visible = true ContextMenu { id: popup - property bool center: backgroundItem.styleHint("comboboxpopup") + property bool center: false centerSelectedText: center y: center ? 0 : comboBox.height } diff --git a/components/Dialog.qml b/components/Dialog.qml index cc3cfb2556e89438fced1b12c85d513193c31350..bcebb9f07f1f1bc21b0cf07741d59ee8e190a38c 100644 --- a/components/Dialog.qml +++ b/components/Dialog.qml @@ -98,7 +98,7 @@ Window { text: "Help" focus: false Component.onCompleted: if (style.isMac) width = 22 - background: style.isMac ? machelpdelegate : cancelbutton.background + delegate: style.isMac ? machelpdelegate : cancelbutton.background onClicked: { clickedButton = helpbutton buttonClicked() diff --git a/components/Frame.qml b/components/Frame.qml index 7b82378ba84195eb98af3ec4e92ed85e90386352..ab35612e51b814c8bbca5bff165c0a603bceee38 100644 --- a/components/Frame.qml +++ b/components/Frame.qml @@ -42,22 +42,34 @@ import QtQuick 2.0 import QtDesktop 0.2 Item { + id: frame default property alias data: content.data implicitWidth: adjustToContentSize ? content.childrenRect.width + 2 * content.frameWidth : 30 implicitHeight: adjustToContentSize ? content.childrenRect.height + 2 * content.frameWidth : 30 - property alias raised: style.raised - property alias sunken: style.sunken + + property bool raised + property bool sunken property bool adjustToContentSize: false - StyleItem { - id: style + + Loader { + id: loader anchors.fill: parent - elementType: "frame" + sourceComponent: delegate Item { id: content anchors.fill: parent anchors.margins: frameWidth - property int frameWidth: styleitem.pixelMetric("defaultframewidth"); + property int frameWidth } + onLoaded: item.z = -1 } -} + property Component delegate: StyleItem { + id: style + anchors.fill: parent + elementType: "frame" + sunken: frame.sunken + raised: frame.raised + Component.onCompleted: content.frameWidth = pixelMetric("defaultframewidth"); + } +} diff --git a/components/GroupBox.qml b/components/GroupBox.qml index c87ade5ba320591f113bb4187f5bf2c125facec0..c131a7f05235f4c8d13f3f2f8b28a15d84a63042 100644 --- a/components/GroupBox.qml +++ b/components/GroupBox.qml @@ -62,7 +62,7 @@ Item { Accessible.role: Accessible.Grouping Accessible.name: title - property Component background: StyleItem { + property Component delegate: StyleItem { id: styleitem elementType: "groupbox" anchors.fill: parent @@ -83,7 +83,8 @@ Item { property int leftMargin: 4 property int rightMargin: 4 property alias styledItem: groupbox - sourceComponent: background + sourceComponent: delegate + onLoaded: item.z = -1 } CheckBox { diff --git a/components/ProgressBar.qml b/components/ProgressBar.qml index d07aa9da38ca36400171aac7d18686938515a961..8c14d114f71b5725da84a4743aa69fe0df5eada9 100644 --- a/components/ProgressBar.qml +++ b/components/ProgressBar.qml @@ -62,7 +62,7 @@ Item { implicitWidth: orientation === Qt.Horizontal ? 200 : loader.item.implicitHeight implicitHeight: orientation === Qt.Horizontal ? loader.item.implicitHeight : 200 - property Component background: StyleItem { + property Component delegate: StyleItem { anchors.fill: parent elementType: "progressbar" // XXX: since desktop uses int instead of real, the progressbar @@ -85,7 +85,7 @@ Item { property alias maximumValue:progressbar.maximumValue property alias minimumValue:progressbar.minimumValue - sourceComponent: background + sourceComponent: delegate anchors.fill: parent } diff --git a/components/RadioButton.qml b/components/RadioButton.qml index 903766659d7b65ad393cd60bd395dc2018094881..50def36343c758c4a263f20aee6ff1e7da00ff3c 100644 --- a/components/RadioButton.qml +++ b/components/RadioButton.qml @@ -46,12 +46,9 @@ import QtDesktop 0.2 CheckBox { id: radiobutton - implicitWidth: Math.max(120, backgroundItem.implicitWidth) - implicitHeight: backgroundItem.implicitHeight - Accessible.role: Accessible.RadioButton - background: StyleItem { + delegate: StyleItem { elementType: "radiobutton" sunken: pressed on: checked || pressed diff --git a/components/ScrollArea.qml b/components/ScrollArea.qml index 5c0ec0eb6965421abf4634f942e33b8e531e5eab..d001335aa09edb79da4ab84f69054c1c122e7142 100644 --- a/components/ScrollArea.qml +++ b/components/ScrollArea.qml @@ -49,7 +49,7 @@ FocusScope { // Cosmetic propeties property bool frame: true - property bool frameAroundContents: styleitem.styleHint("framearoundcontents") + property bool frameAroundContents: true property bool highlightOnFocus: false property alias color: colorRect.color // background color property int frameWidth: frame ? styleitem.frameWidth : 0 @@ -86,7 +86,10 @@ FocusScope { property int frameWidth property int scrollbarspacing: styleitem.pixelMetric("scrollbarspacing"); property int frameMargins : frame ? scrollbarspacing : 0 - Component.onCompleted: frameWidth = styleitem.pixelMetric("defaultframewidth"); + Component.onCompleted: { + frameWidth = styleitem.pixelMetric("defaultframewidth"); + frameAroundContents = styleitem.styleHint("framearoundcontents") + } } onContentYChanged: { diff --git a/components/ScrollBar.qml b/components/ScrollBar.qml index 071dee4d70ee6b43e1ed60518fc0cd76ca304b5f..dae7d8a38d7f41fc96fa921015624cb8bacbd216 100644 --- a/components/ScrollBar.qml +++ b/components/ScrollBar.qml @@ -57,6 +57,20 @@ Item { onValueChanged: internal.updateHandle() + property Component delegate: StyleItem { + id: styleitem + anchors.fill:parent + elementType: "scrollbar" + hover: activeControl != "none" + activeControl: "none" + sunken: internal.upPressed | internal.downPressed + minimum: slider.minimumValue + maximum: slider.maximumValue + value: slider.value + horizontal: orientation == Qt.Horizontal + enabled: parent.enabled + } + MouseArea { id: internal @@ -171,18 +185,10 @@ Item { value = minimumValue } - StyleItem { - id: styleitem - anchors.fill:parent - elementType: "scrollbar" - hover: activeControl != "none" - activeControl: "none" - sunken: internal.upPressed | internal.downPressed - minimum: slider.minimumValue - maximum: slider.maximumValue - value: slider.value - horizontal: orientation == Qt.Horizontal - enabled: parent.enabled + Loader { + id: loader + sourceComponent: delegate + anchors.fill: parent } property rect handleRect: Qt.rect(0,0,0,0) diff --git a/components/Slider.qml b/components/Slider.qml index de5811276bbf59ed54ab14f8bfc51f1449bcb376..6c106f787aa9e6f9621f226f707680e5ee2ba81c 100644 --- a/components/Slider.qml +++ b/components/Slider.qml @@ -84,7 +84,7 @@ Item { property string styleHint; - property Component groove: StyleItem { + property Component delegate: StyleItem { anchors.fill:parent elementType: "slider" sunken: pressed @@ -119,16 +119,15 @@ Item { stepSize: 0.0 inverted: false - positionAtMinimum: grooveLoader.leftMargin - positionAtMaximum: contents.width - grooveLoader.rightMargin + positionAtMinimum: loader.leftMargin + positionAtMaximum: contents.width - loader.rightMargin } Loader { - id: grooveLoader + id: loader anchors.fill: parent - sourceComponent: groove + sourceComponent: delegate - property real handlePosition : handleLoader.x function positionForValue(value) { return range.positionForValue(value) - leftMargin; } @@ -136,40 +135,17 @@ Item { property int rightMargin: 0 } - Loader { - id: handleLoader - transform: Translate { x: - handleLoader.width / 2 } - - anchors.verticalCenter: grooveLoader.verticalCenter - - sourceComponent: null - - x: fakeHandle.x - Behavior on x { - id: behavior - enabled: !mouseArea.drag.active - - PropertyAnimation { - duration: behavior.enabled ? 150 : 0 - easing.type: Easing.OutSine - } - } - } - Item { id: fakeHandle - width: handleLoader.width - height: handleLoader.height - transform: Translate { x: - handleLoader.width / 2 } } MouseArea { id: mouseArea hoverEnabled: true anchors.centerIn: parent - anchors.horizontalCenterOffset: (grooveLoader.leftMargin - grooveLoader.rightMargin) / 2 + anchors.horizontalCenterOffset: (loader.leftMargin - loader.rightMargin) / 2 - width: parent.width + handleLoader.width - grooveLoader.rightMargin - grooveLoader.leftMargin + width: parent.width - loader.rightMargin - loader.leftMargin height: parent.height drag.target: fakeHandle diff --git a/components/SpinBox.qml b/components/SpinBox.qml index cffa68b8f860f2c5fc718296951b951513631039..662a515a6b94533480fc4f8fd1ed0905e4073260 100644 --- a/components/SpinBox.qml +++ b/components/SpinBox.qml @@ -71,8 +71,7 @@ FocusScope { colorGroup: enabled ? SystemPalette.Active : SystemPalette.Disabled } - property Component background: Item { - + property Component delegate: Item { property rect upRect property rect downRect property rect inputRect @@ -176,7 +175,7 @@ FocusScope { property rect upRect: item ? item.upRect : Qt.rect(0, 0, 0, 0) property rect downRect: item ? item.downRect : Qt.rect(0, 0, 0, 0) property rect inputRect: item ? item.inputRect : Qt.rect(0, 0, 0, 0) - sourceComponent: background + sourceComponent: delegate anchors.fill: parent } diff --git a/components/SplitterColumn.qml b/components/SplitterColumn.qml index 86d9b8fa35e1720f9777819dd2447e27f591f5bf..4f64868b50dc74ba5ef4f731439a48b97c2cd473 100644 --- a/components/SplitterColumn.qml +++ b/components/SplitterColumn.qml @@ -50,9 +50,9 @@ import QtDesktop 0.2 * a draggable splitter added in-between each item. * * Add items to the SplitterColumn by inserting them as child items. The splitter handle -* is outsourced as a delegate (handleBackground). To enable the user to drag the handle, +* is outsourced as a delegate (handleDelegate). To enable the user to drag the handle, * it will need to contain a mouse area that communicates with the SplitterColumn by binding -* 'drag.target: handle'. The 'handle' property points to the handle item that embedds +* 'drag.target: handle'. The 'handle' property points to the handle item that embeds * the delegate. To change handle positions, either change 'y; (or 'height') of 'handle', or * change the height of the child items inside the SplitterColumn. If you set the visibility * of a child item to false, the corresponding handle will also be hidden, and the @@ -76,7 +76,7 @@ import QtDesktop 0.2 * * The SplitterColumn contains the following API: * -* Component handleBackground - delegate that will be instanciated between each +* Component handleDelegate - delegate that will be instanciated between each * child item. Inside the delegate, the following properties are available: * int handleIndex - specifies the index of the splitter handle. The handle * between the first and the second item will get index 0, the next handle index 1 etc. @@ -140,7 +140,7 @@ import QtDesktop 0.2 Private.Splitter { orientation: Qt.Vertical - handleBackground: StyleItem { + handleDelegate: StyleItem { id: styleitem elementType: "splitter" height: handleWidth != -1 ? handleWidth : pixelMetric("splitterwidth") diff --git a/components/SplitterRow.qml b/components/SplitterRow.qml index 5c566d6f5fae78320e9361fda9412b4f07d0b7cb..c1466c61ea430682c78ccc0bb3324e03bd2058b6 100644 --- a/components/SplitterRow.qml +++ b/components/SplitterRow.qml @@ -50,9 +50,9 @@ import QtDesktop 0.2 * a draggable splitter added in-between each item. * * Add items to the SplitterRow by inserting them as child items. The splitter handle -* is outsourced as a delegate (handleBackground). To enable the user to drag the handle, +* is outsourced as a delegate (handleDelegate). To enable the user to drag the handle, * it will need to contain a mouse area that communicates with the SplitterRow by binding -* 'drag.target: handle'. The 'handle' property points to the handle item that embedds +* 'drag.target: handle'. The 'handle' property points to the handle item that embeds * the delegate. To change handle positions, either change 'x' (or 'width') of 'handle', or * change the width of the child items inside the SplitterRow. If you set the visibility * of a child item to false, the corresponding handle will also be hidden, and the @@ -76,7 +76,7 @@ import QtDesktop 0.2 * * The SplitterRow contains the following API: * -* Component handleBackground - delegate that will be instanciated between each +* Component handleDelegate - delegate that will be instanciated between each * child item. Inside the delegate, the following properties are available: * int handleIndex - specifies the index of the splitter handle. The handle * between the first and the second item will get index 0, the next handle index 1 etc. @@ -141,7 +141,7 @@ import QtDesktop 0.2 Private.Splitter { orientation: Qt.Horizontal - handleBackground: StyleItem { + handleDelegate: StyleItem { id: styleitem elementType: "splitter" width: handleWidth != -1 ? handleWidth : pixelMetric("splitterwidth") diff --git a/components/TabBar.qml b/components/TabBar.qml index 02635115c30813462672a3a771eaba756464a474..c5a923a4dcbc2eb8f6e17514c7b3eaf58d67733d 100644 --- a/components/TabBar.qml +++ b/components/TabBar.qml @@ -78,13 +78,18 @@ Item { return null; } - StyleItem { - visible:false - id:styleitem + property Component delegate: StyleItem { + visible: false + id: styleitem elementType: "tab" text: "generic" } + Loader { + id: loader + sourceComponent: delegate + } + Row { id: tabrow Accessible.role: Accessible.PageTabList diff --git a/components/TabFrame.qml b/components/TabFrame.qml index f15067b721312e20bf5990271c6d73fc85716a6f..556c2d4b087e8f9dd03802fc77d0418d4de2ef50 100644 --- a/components/TabFrame.qml +++ b/components/TabFrame.qml @@ -56,7 +56,6 @@ Item { onCurrentChanged: __setOpacities() Component.onCompleted: __setOpacities() - property int __baseOverlap : frameitem.pixelMetric("tabbaseoverlap")// add paintmargins; function __setOpacities() { for (var i = 0; i < stack.children.length; ++i) { stack.children[i].visible = (i == current ? true : false) @@ -84,7 +83,25 @@ Item { current-=1 } - StyleItem { + Loader { + id: loader + anchors.fill: parent + anchors.topMargin: tabbarItem && tabsVisible && position == "North" ? Math.max(0, tabbarItem.height - stack.baseOverlap) : 0 + sourceComponent: delegate + Item { + id: stack + anchors.fill: parent + anchors.margins: (frame ? frameWidth : 0) + anchors.topMargin: anchors.margins + (style =="mac" ? 6 : 0) + anchors.bottomMargin: anchors.margins + (style =="mac" ? 6 : 0) + property int frameWidth + property string style + property int baseOverlap + } + onLoaded: item.z = -1 + } + + property Component delegate: StyleItem { id: frameitem z: style == "oxygen" ? 1 : 0 elementType: "tabframe" @@ -92,20 +109,12 @@ Item { value: tabbarItem && tabsVisible && tabbarItem.tab(current) ? tabbarItem.tab(current).x : 0 minimum: tabbarItem && tabsVisible && tabbarItem.tab(current) ? tabbarItem.tab(current).width : 0 maximum: tabbarItem && tabsVisible ? tabbarItem.tabWidth : width - anchors.fill: parent - - property int frameWidth: pixelMetric("defaultframewidth") - - Item { - id: stack - anchors.fill: parent - anchors.margins: (frame ? frameitem.frameWidth : 0) - anchors.topMargin: anchors.margins + (frameitem.style =="mac" ? 6 : 0) - anchors.bottomMargin: anchors.margins + (frameitem.style =="mac" ? 6 : 0) + Component.onCompleted: { + stack.frameWidth = pixelMetric("defaultframewidth") + stack.style = style + stack.baseOverlap = pixelMetric("tabbaseoverlap")// add paintmargins; } - anchors.topMargin: tabbarItem && tabsVisible && position == "North" ? Math.max(0, tabbarItem.height - __baseOverlap) : 0 - states: [ State { name: "South" @@ -113,11 +122,11 @@ Item { PropertyChanges { target: frameitem anchors.topMargin: 0 - anchors.bottomMargin: tabbarItem ? tabbarItem.height - __baseOverlap: 0 + anchors.bottomMargin: tabbarItem ? tabbarItem.height - stack.baseOverlap: 0 } PropertyChanges { target: tabbarItem - anchors.topMargin: -__baseOverlap + anchors.topMargin: -stack.baseOverlap } AnchorChanges { target: tabbarItem diff --git a/components/TextField.qml b/components/TextField.qml index 4cf7e3f5d29484475366987bf592728392ddf361..da028a90d9764efab128a7caf67d9c6dd32d05fc 100644 --- a/components/TextField.qml +++ b/components/TextField.qml @@ -66,7 +66,7 @@ FocusScope { property alias activeFocusOnPress: textInput.activeFocusOnPress property alias containsMouse: mouseArea.containsMouse - property Component background: StyleItem { + property Component delegate: StyleItem { anchors.fill: parent elementType: "edit" sunken: true @@ -92,11 +92,10 @@ FocusScope { elementType: "focusframe" } } - } - implicitWidth: backgroundLoader.item.implicitWidth - implicitHeight: backgroundLoader.item.implicitHeight + implicitWidth: loader.item.implicitWidth + implicitHeight: loader.item.implicitHeight Accessible.name: text Accessible.role: Accessible.EditableText @@ -147,9 +146,9 @@ FocusScope { } Loader { - id: backgroundLoader; - sourceComponent: background; - anchors.fill:parent + id: loader + sourceComponent: delegate + anchors.fill: parent } MouseArea { @@ -160,7 +159,7 @@ FocusScope { } onFocusChanged: { - if (textField.activeFocus) + if (textfield.activeFocus) textInput.forceActiveFocus(); } diff --git a/components/ToolButton.qml b/components/ToolButton.qml index 7f41fe69f5eff5f985e04f7ea17313147abc9a0f..5952a6f439dffc45726e6fe9af68f77ffd1d18e0 100644 --- a/components/ToolButton.qml +++ b/components/ToolButton.qml @@ -48,13 +48,9 @@ Private.BasicButton { property alias containsMouse: tooltip.containsMouse property string iconName property string styleHint - property int iconSize: (backgroundItem && backgroundItem.style === "mac" && button.styleHint.indexOf("segmented") !== -1) ? 16 : 24 property url iconSource property string text - implicitWidth: backgroundItem.implicitWidth - implicitHeight: backgroundItem.implicitHeight - TooltipArea { // Note this will eat hover events id: tooltip @@ -62,7 +58,7 @@ Private.BasicButton { text: button.tooltip } - background: StyleItem { + delegate: StyleItem { id: styleitem anchors.fill: parent elementType: "toolbutton" @@ -87,8 +83,9 @@ Private.BasicButton { opacity: enabled ? 1 : 0.5 smooth: true sourceSize.width: iconSize - property string iconPath: "image://desktoptheme/" + button.iconName - source: backgroundItem && backgroundItem.hasThemeIcon(iconName) ? iconPath : "" + //property string iconPath: "image://desktoptheme/" + button.iconName + property int iconSize: 24 //(backgroundItem && backgroundItem.style === "mac" && button.styleHint.indexOf("segmented") !== -1) ? 16 : 24 + //source: iconPath // backgroundItem && backgroundItem.hasThemeIcon(iconName) ? iconPath : "" fillMode: Image.PreserveAspectFit Image { // Use fallback icon diff --git a/components/private/BasicButton.qml b/components/private/BasicButton.qml index e7d40792029170791575dd00689d315f0e3a0e52..2427060cedced707afdd4f997a2c8ecc2953715c 100644 --- a/components/private/BasicButton.qml +++ b/components/private/BasicButton.qml @@ -50,8 +50,7 @@ Item { property alias checked: behavior.checked property bool activeFocusOnPress: false - property Component background: null - property Item backgroundItem: backgroundLoader.item + property Component delegate: null property color textColor: syspal.text; property string tooltip @@ -64,8 +63,8 @@ Item { // implementation property string __position: "only" - implicitWidth: backgroundLoader.item.width - implicitHeight: backgroundLoader.item.height + implicitWidth: loader.item.implicitWidth + implicitHeight: loader.item.implicitHeight function animateClick() { behavior.pressed = true @@ -80,9 +79,9 @@ Item { } Loader { - id: backgroundLoader + id: loader anchors.fill: parent - sourceComponent: background + sourceComponent: delegate property alias styledItem: button property alias position: button.__position } diff --git a/components/private/Splitter.qml b/components/private/Splitter.qml index 61c2d9f1aa859f1a4011ee8dfc300475c069ff9b..82b94d67c63fad77f254c8759db25e1953a5fa2d 100644 --- a/components/private/Splitter.qml +++ b/components/private/Splitter.qml @@ -45,7 +45,7 @@ Splitter { id: root default property alias items: splitterItems.children property alias handles: splitterHandles.children - property Component handleBackground: Rectangle { width:3; color: "black" } + property Component handleDelegate: Rectangle { width:3; color: "black" } property int handleWidth: -1 property real preferredSize: 0 property int orientation: Qt.Horizontal @@ -97,7 +97,7 @@ Splitter { propertyChangeListener.createObject(item, {"itemIndex":i}); if (i < items.length-1) { // Create a handle for the item, unless its the last: - var handle = handleBackgroundLoader.createObject(splitterHandles, {"handleIndex":i}); + var handle = handleloader.createObject(splitterHandles, {"handleIndex":i}); if (d.horizontal) { handle.anchors.top = splitterHandles.top @@ -242,7 +242,7 @@ Splitter { } Component { - id: handleBackgroundLoader + id: handleloader Loader { id: myHandle property int handleIndex: 0 @@ -254,7 +254,7 @@ Splitter { property Item background: item visible: splitterItem.visible - sourceComponent: handleBackground + sourceComponent: handleDelegate onWidthChanged: d.updateLayout() onXChanged: {