QmlDesigner: Add transient scroll bar to ComboBox

Change-Id: I118e4801fef9fab117e4d7355e56616c7d001858
Reviewed-by: Thomas Hartmann <thomas.hartmann@qt.io>
Reviewed-by: <github-actions-qt-creator@cristianadam.eu>
Reviewed-by: Qt CI Patch Build Bot <ci_patchbuild_bot@qt.io>
Reviewed-by: Brook Cronin <brook.cronin@qt.io>
This commit is contained in:
Henning Gruendl
2023-09-19 17:14:24 +02:00
committed by Henning Gründl
parent 4ff83dd4cc
commit 5676e61298
21 changed files with 173 additions and 152 deletions

View File

@@ -5,6 +5,7 @@ import QtQuick
import QtQuick.Controls
import HelperWidgets as HelperWidgets
import StudioControls as StudioControls
import StudioTheme as StudioTheme
import AssetsLibraryBackend
TreeView {
@@ -53,8 +54,9 @@ TreeView {
HoverHandler { id: hoverHandler }
ScrollBar.vertical: HelperWidgets.ScrollBar {
ScrollBar.vertical: StudioControls.TransientScrollBar {
id: verticalScrollBar
style: StudioTheme.Values.viewStyle
parent: root
x: root.width - verticalScrollBar.width
y: 0

View File

@@ -3,8 +3,8 @@
import QtQuick
import QtQuick.Controls
import HelperWidgets 2.0 as HelperWidgets
import StudioControls 1.0 as StudioControls
import HelperWidgets as HelperWidgets
import StudioControls as StudioControls
import StudioTheme as StudioTheme
import ConnectionsEditorEditorBackend
@@ -30,8 +30,9 @@ ListView {
HoverHandler { id: hoverHandler }
ScrollBar.vertical: HelperWidgets.ScrollBar {
ScrollBar.vertical: StudioControls.TransientScrollBar {
id: verticalScrollBar
style: StudioTheme.Values.viewStyle
parent: root
x: root.width - verticalScrollBar.width
y: 0

View File

@@ -3,8 +3,8 @@
import QtQuick
import QtQuick.Controls
import HelperWidgets 2.0 as HelperWidgets
import StudioControls 1.0 as StudioControls
import HelperWidgets as HelperWidgets
import StudioControls as StudioControls
import StudioTheme as StudioTheme
import ConnectionsEditorEditorBackend
@@ -30,8 +30,9 @@ ListView {
HoverHandler { id: hoverHandler }
ScrollBar.vertical: HelperWidgets.ScrollBar {
ScrollBar.vertical: StudioControls.TransientScrollBar {
id: verticalScrollBar
style: StudioTheme.Values.viewStyle
parent: root
x: root.width - verticalScrollBar.width
y: 0

View File

@@ -3,8 +3,8 @@
import QtQuick
import QtQuick.Controls
import HelperWidgets 2.0 as HelperWidgets
import StudioControls 1.0 as StudioControls
import HelperWidgets as HelperWidgets
import StudioControls as StudioControls
import StudioTheme as StudioTheme
import ConnectionsEditorEditorBackend
@@ -30,8 +30,9 @@ ListView {
HoverHandler { id: hoverHandler }
ScrollBar.vertical: HelperWidgets.ScrollBar {
ScrollBar.vertical: StudioControls.TransientScrollBar {
id: verticalScrollBar
style: StudioTheme.Values.viewStyle
parent: root
x: root.width - verticalScrollBar.width
y: 0

View File

@@ -135,7 +135,7 @@ Controls.Popup {
boundsMovement: Flickable.StopAtBounds
boundsBehavior: Flickable.StopAtBounds
Controls.ScrollBar.vertical: HelperWidgets.ScrollBar {
Controls.ScrollBar.vertical: StudioControls.TransientScrollBar {
id: listScrollBar
parent: listView
x: listView.width - listScrollBar.width
@@ -195,7 +195,7 @@ Controls.Popup {
boundsMovement: Flickable.StopAtBounds
boundsBehavior: Flickable.StopAtBounds
Controls.ScrollBar.vertical: HelperWidgets.ScrollBar {
Controls.ScrollBar.vertical: StudioControls.TransientScrollBar {
id: treeScrollBar
parent: treeView
x: treeView.width - treeScrollBar.width

View File

@@ -6,7 +6,7 @@ import QtQuick.Controls
import QtQuick
import QtQuick.Layouts
import StudioControls as SC
import StudioControls as StudioControls
import StudioTheme as StudioTheme
import BackendApi
@@ -22,8 +22,8 @@ Item {
anchors.fill: parent
Item {
x: DialogValues.detailsPanePadding // left padding
width: parent.width - DialogValues.detailsPanePadding * 2 // right padding
x: DialogValues.detailsPanePadding * 2 // left padding
width: parent.width - DialogValues.detailsPanePadding * 3 // right padding
height: parent.height
Column {
@@ -44,6 +44,7 @@ Item {
}
Flickable {
id: flickable
width: parent.width
height: parent.height - detailsHeading.height - DialogValues.defaultPadding
- savePresetButton.height
@@ -52,14 +53,27 @@ Item {
boundsBehavior: Flickable.StopAtBounds
clip: true
ScrollBar.vertical: SC.VerticalScrollBar {}
HoverHandler { id: hoverHandler }
ScrollBar.vertical: StudioControls.TransientScrollBar {
id: verticalScrollBar
style: StudioTheme.Values.viewStyle
parent: flickable
x: flickable.width - verticalScrollBar.width
y: 0
height: flickable.availableHeight
orientation: Qt.Vertical
show: (hoverHandler.hovered || flickable.focus || verticalScrollBar.inUse)
&& verticalScrollBar.isNeeded
}
Column {
id: scrollContent
width: parent.width - DialogValues.detailsPanePadding
spacing: DialogValues.defaultPadding
SC.TextField {
StudioControls.TextField {
id: projectNameTextField
actionIndicatorVisible: false
translationIndicatorVisible: false
@@ -85,7 +99,7 @@ Item {
RowLayout { // Project location
width: parent.width
SC.TextField {
StudioControls.TextField {
Layout.fillWidth: true
id: projectLocationTextField
actionIndicatorVisible: false
@@ -102,7 +116,7 @@ Item {
value: projectLocationTextField.text
}
SC.AbstractButton {
StudioControls.AbstractButton {
implicitWidth: 30
iconSize: 20
visible: true
@@ -114,7 +128,7 @@ Item {
if (newLocation)
projectLocationTextField.text = newLocation
}
} // SC.AbstractButton
}
} // Project location RowLayout
Item { width: parent.width; height: DialogValues.narrowSpacing(7) }
@@ -171,7 +185,7 @@ Item {
} // Text
} // RowLayout
SC.CheckBox {
StudioControls.CheckBox {
id: defaultLocationCheckbox
actionIndicatorVisible: false
text: qsTr("Use as default project location")
@@ -187,7 +201,7 @@ Item {
Rectangle { width: parent.width; height: 1; color: DialogValues.dividerlineColor }
SC.ComboBox { // Screen Size ComboBox
StudioControls.ComboBox { // Screen Size ComboBox
id: screenSizeComboBox
actionIndicatorVisible: false
currentIndex: -1
@@ -253,7 +267,7 @@ Item {
}
// content items
SC.RealSpinBox {
StudioControls.RealSpinBox {
id: widthField
actionIndicatorVisible: false
implicitWidth: 70
@@ -274,7 +288,7 @@ Item {
value: widthField.realValue
}
SC.RealSpinBox {
StudioControls.RealSpinBox {
id: heightField
actionIndicatorVisible: false
implicitWidth: 70
@@ -368,7 +382,7 @@ Item {
color: DialogValues.dividerlineColor
}
SC.CheckBox {
StudioControls.CheckBox {
id: useQtVirtualKeyboard
actionIndicatorVisible: false
text: qsTr("Use Qt Virtual Keyboard")
@@ -389,7 +403,7 @@ Item {
color: DialogValues.textColor
}
SC.ComboBox { // Target Qt Version ComboBox
StudioControls.ComboBox { // Target Qt Version ComboBox
id: qtVersionComboBox
actionIndicatorVisible: false
implicitWidth: 82
@@ -421,7 +435,7 @@ Item {
} // ScrollView
} // Column
SC.AbstractButton {
StudioControls.AbstractButton {
id: savePresetButton
width: StudioTheme.Values.singleControlColumnWidth
buttonIcon: qsTr("Save Custom Preset")
@@ -459,7 +473,7 @@ Item {
color: DialogValues.textColor
}
SC.TextField {
StudioControls.TextField {
id: presetNameTextField
actionIndicatorVisible: false
translationIndicatorVisible: false

View File

@@ -6,7 +6,7 @@ import QtQuick.Controls
import QtQuick
import QtQuick.Layouts
import StudioControls as SC
import StudioControls as StudioControls
import StudioTheme as StudioTheme
import BackendApi
@@ -23,12 +23,17 @@ ScrollView {
property bool selectLast: false
ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
ScrollBar.vertical: SC.VerticalScrollBar {
ScrollBar.vertical: StudioControls.TransientScrollBar {
id: verticalScrollBar
style: StudioTheme.Values.viewStyle
parent: scrollView
x: scrollView.width + (DialogValues.gridMargins
- StudioTheme.Values.scrollBarThickness) * 0.5
x: scrollView.width + (DialogValues.gridMargins - verticalScrollBar.width) * 0.5
y: scrollView.topPadding
height: scrollView.availableHeight
orientation: Qt.Vertical
show: (scrollView.hovered || scrollView.focus || verticalScrollBar.inUse)
&& verticalScrollBar.isNeeded
}
contentWidth: gridView.contentItem.childrenRect.width

View File

@@ -6,7 +6,7 @@ import QtQuick.Window
import QtQuick.Controls
import QtQuick.Layouts
import StudioControls as SC
import StudioControls as StudioControls
import StudioTheme as StudioTheme
import BackendApi
@@ -59,7 +59,7 @@ Item {
}
}
SC.ComboBox { // Style Filter ComboBox
StudioControls.ComboBox { // Style Filter ComboBox
id: styleComboBox
actionIndicatorVisible: false
currentIndex: 0
@@ -93,10 +93,17 @@ Item {
width: parent.width
ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
ScrollBar.vertical: SC.VerticalScrollBar {
id: styleScrollBar
x: stylesList.width + (DialogValues.stylesPanePadding
- StudioTheme.Values.scrollBarThickness) * 0.5
ScrollBar.vertical: StudioControls.TransientScrollBar {
id: verticalScrollBar
style: StudioTheme.Values.viewStyle
parent: scrollView
x: scrollView.width + (DialogValues.gridMargins - verticalScrollBar.width) * 0.5
y: scrollView.topPadding
height: scrollView.availableHeight
orientation: Qt.Vertical
show: (scrollView.hovered || scrollView.focus || verticalScrollBar.inUse)
&& verticalScrollBar.isNeeded
}
ListView {

View File

@@ -2,7 +2,7 @@
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GPL-3.0-only WITH Qt-GPL-exception-1.0
import QtQuick
//import QtQuick.Controls as C
import StudioControls as StudioControls
import StudioTheme 1.0 as StudioTheme
Flickable {
@@ -26,8 +26,9 @@ Flickable {
HoverHandler { id: hoverHandler }
ScrollBar.horizontal: ScrollBar {
ScrollBar.horizontal: StudioControls.TransientScrollBar {
id: horizontalScrollBar
style: StudioTheme.Values.viewStyle
parent: flickable
x: 0
y: flickable.height - horizontalScrollBar.height
@@ -40,8 +41,9 @@ Flickable {
otherInUse: verticalScrollBar.inUse
}
ScrollBar.vertical: ScrollBar {
ScrollBar.vertical: StudioControls.TransientScrollBar {
id: verticalScrollBar
style: StudioTheme.Values.viewStyle
parent: flickable
x: flickable.width - verticalScrollBar.width
y: 0

View File

@@ -59,7 +59,6 @@ PropertyEditorPane 2.0 PropertyEditorPane.qml
PropertyLabel 2.0 PropertyLabel.qml
PaddingSection 2.0 PaddingSection.qml
RoundedPanel 2.0 RoundedPanel.qml
ScrollBar 2.0 ScrollBar.qml
ScrollView 2.0 ScrollView.qml
SecondColumnLayout 2.0 SecondColumnLayout.qml
Section 2.0 Section.qml

View File

@@ -130,14 +130,13 @@ T.ComboBox {
id: itemDelegate
width: comboBoxPopup.width - comboBoxPopup.leftPadding - comboBoxPopup.rightPadding
- (comboBoxPopupScrollBar.visible ? comboBoxPopupScrollBar.contentItem.implicitWidth
+ 2 : 0) // TODO Magic number
height: control.style.controlSize.height - 2 * control.style.borderWidth
padding: 0
enabled: model.enabled === undefined ? true : model.enabled
contentItem: Text {
leftPadding: itemDelegateIconArea.width
leftPadding: 8
rightPadding: verticalScrollBar.style.scrollBarThicknessHover
text: control.textRole ? (Array.isArray(control.model)
? modelData[control.textRole]
: model[control.textRole])
@@ -146,34 +145,16 @@ T.ComboBox {
if (!itemDelegate.enabled)
return control.style.text.disabled
return itemDelegate.highlighted ? control.style.text.selectedText
: control.style.text.idle
if (control.currentIndex === index)
return control.style.text.selectedText
return control.style.text.idle
}
font: control.font
elide: Text.ElideRight
verticalAlignment: Text.AlignVCenter
}
Item {
id: itemDelegateIconArea
width: itemDelegate.height
height: itemDelegate.height
T.Label {
id: itemDelegateIcon
text: StudioTheme.Constants.tickIcon
color: itemDelegate.highlighted ? control.style.text.selectedText
: control.style.text.idle
font.family: StudioTheme.Constants.iconFont.family
font.pixelSize: control.style.smallIconFontSize
visible: control.currentIndex === index
anchors.fill: parent
renderType: Text.NativeRendering
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
}
}
highlighted: control.highlightedIndex === index
background: Rectangle {
@@ -182,7 +163,21 @@ T.ComboBox {
y: 0
width: itemDelegate.width
height: itemDelegate.height
color: itemDelegate.highlighted ? control.style.interaction : "transparent"
color: {
if (!itemDelegate.enabled)
return "transparent"
if (itemDelegate.hovered && control.currentIndex === index)
return control.style.interactionHover
if (control.currentIndex === index)
return control.style.interaction
if (itemDelegate.hovered)
return control.style.background.hover
return "transparent"
}
}
}
@@ -211,9 +206,19 @@ T.ComboBox {
model: control.popup.visible ? control.delegateModel : null
currentIndex: control.highlightedIndex
boundsBehavior: Flickable.StopAtBounds
ScrollBar.vertical: ScrollBar {
id: comboBoxPopupScrollBar
visible: listView.height < listView.contentHeight
HoverHandler { id: hoverHandler }
ScrollBar.vertical: TransientScrollBar {
id: verticalScrollBar
parent: listView
x: listView.width - verticalScrollBar.width
y: 0
height: listView.availableHeight
orientation: Qt.Vertical
show: (hoverHandler.hovered || verticalScrollBar.inUse)
&& verticalScrollBar.isNeeded
}
}

View File

@@ -138,9 +138,19 @@ T.ComboBox {
currentIndex: control.highlightedIndex
boundsBehavior: Flickable.StopAtBounds
ScrollBar.vertical: ScrollBar {
id: comboBoxPopupScrollBar
visible: listView.height < listView.contentHeight
HoverHandler { id: hoverHandler }
ScrollBar.vertical: TransientScrollBar {
id: verticalScrollBar
style: control.style
parent: listView
x: listView.width - verticalScrollBar.width
y: 0
height: listView.availableHeight
orientation: Qt.Vertical
show: (hoverHandler.hovered || verticalScrollBar.inUse)
&& verticalScrollBar.isNeeded
}
delegate: ItemDelegate {
@@ -158,7 +168,8 @@ T.ComboBox {
enabled: model.enabled === undefined ? true : model.enabled
contentItem: Text {
leftPadding: itemDelegateIconArea.width
leftPadding: 8
rightPadding: verticalScrollBar.style.scrollBarThicknessHover
text: control.textRole ? (Array.isArray(control.model)
? modelData[control.textRole]
: model[control.textRole])
@@ -167,47 +178,37 @@ T.ComboBox {
if (!itemDelegate.enabled)
return control.style.text.disabled
return itemDelegate.hovered ? control.style.text.selectedText
: control.style.text.idle
if (control.currentIndex === index)
return control.style.text.selectedText
return control.style.text.idle
}
font: control.font
elide: Text.ElideRight
verticalAlignment: Text.AlignVCenter
}
Item {
id: itemDelegateIconArea
width: itemDelegate.height
height: itemDelegate.height
T.Label {
id: itemDelegateIcon
text: StudioTheme.Constants.tickIcon
color: {
if (!itemDelegate.enabled)
return control.style.text.disabled
return itemDelegate.hovered ? control.style.text.selectedText
: control.style.text.idle
}
font.family: StudioTheme.Constants.iconFont.family
font.pixelSize: control.style.smallIconFontSize
visible: control.currentIndex === index
anchors.fill: parent
renderType: Text.NativeRendering
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
}
}
background: Rectangle {
id: itemDelegateBackground
x: control.style.borderWidth
y: 0
width: itemDelegate.width - 2 * control.style.borderWidth
height: itemDelegate.height
color: itemDelegate.hovered && itemDelegate.enabled ? control.style.interaction
: "transparent"
color: {
if (!itemDelegate.enabled)
return "transparent"
if (itemDelegate.hovered && control.currentIndex === index)
return control.style.interactionHover
if (control.currentIndex === index)
return control.style.interaction
if (itemDelegate.hovered)
return control.style.background.hover
return "transparent"
}
}
}
}

View File

@@ -14,7 +14,8 @@ T.ScrollBar {
property bool otherInUse: false
property bool isNeeded: control.size < 1.0
property bool inUse: control.hovered || control.pressed
property int thickness: control.inUse || control.otherInUse ? 10 : 8
property int thickness: control.inUse || control.otherInUse ? control.style.scrollBarThicknessHover
: control.style.scrollBarThickness
property bool scrollBarVisible: parent.childrenRect.height > parent.height

View File

@@ -1,38 +0,0 @@
// Copyright (C) 2023 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GPL-3.0-only WITH Qt-GPL-exception-1.0
import QtQuick
//import QtQuick.Controls
import StudioTheme 1.0 as StudioTheme
ScrollBar {
id: control
implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
implicitContentWidth + leftPadding + rightPadding)
implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
implicitContentHeight + topPadding + bottomPadding)
property bool scrollBarVisible: parent.contentHeight > control.height
minimumSize: control.width / control.height
orientation: Qt.Vertical
policy: control.scrollBarVisible ? ScrollBar.AlwaysOn : ScrollBar.AlwaysOff
height: parent.availableHeight
- (parent.bothVisible ? parent.horizontalThickness : 0)
padding: control.active ? control.style.scrollBarActivePadding
: control.style.scrollBarInactivePadding
background: Rectangle {
implicitWidth: control.style.scrollBarThickness
implicitHeight: control.style.scrollBarThickness
color: control.style.scrollBar.track
}
contentItem: Rectangle {
implicitWidth: control.style.scrollBarThickness - 2 * control.padding
implicitHeight: control.style.scrollBarThickness - 2 * control.padding
color: control.style.scrollBar.handle
}
}

View File

@@ -47,6 +47,6 @@ TabButton 1.0 TabButton.qml
TextArea 1.0 TextArea.qml
TextField 1.0 TextField.qml
ToolTip 1.0 ToolTip.qml
TransientScrollBar 1.0 TransientScrollBar.qml
TranslationIndicator 1.0 TranslationIndicator.qml
VerticalScrollBar 1.0 VerticalScrollBar.qml
TopLevelComboBox 1.0 TopLevelComboBox.qml

View File

@@ -4,13 +4,15 @@
import QtQuick
ControlStyle {
radius: Values.smallRadius
baseIconFontSize: Values.baseFont
controlSize: Qt.size(Values.viewBarComboWidth, Values.viewBarComboHeight)
smallIconFontSize: Values.baseFont
scrollBarThickness: 4
scrollBarThicknessHover: 6
background: ControlStyle.BackgroundColors {
idle: Values.themePopoutControlBackground_idle
hover: Values.themePopoutControlBackground_hover
@@ -36,4 +38,10 @@ ControlStyle {
interaction: Values.themeInteraction
disabled: Values.themePopoutControlBorder_disabled
}
scrollBar: ControlStyle.ScrollBarColors {
track: Values.themeScrollBarTrack
handle: Values.themeScrollBarHandle_idle
handleHover: Values.themeScrollBarHandle
}
}

View File

@@ -67,7 +67,8 @@ QtObject {
property real sectionHeadHeight: Values.sectionHeadHeight
property real sectionHeadSpacerHeight: Values.sectionHeadSpacerHeight
property real scrollBarThickness: Values.scrollBarThickness
property real scrollBarThickness: 4//Values.scrollBarThickness
property real scrollBarThicknessHover: 6//Values.scrollBarThicknessHover
property real scrollBarActivePadding: Values.scrollBarActivePadding
property real scrollBarInactivePadding: Values.scrollBarInactivePadding

View File

@@ -99,7 +99,8 @@ QtObject {
property real inputHorizontalPadding: Math.round(6 * values.scaleFactor)
property real typeLabelVerticalShift: Math.round(6 * values.scaleFactor)
property real scrollBarThickness: 10
property real scrollBarThickness: 8
property real scrollBarThicknessHover: 10
property real scrollBarActivePadding: 1
property real scrollBarInactivePadding: 2
@@ -458,9 +459,6 @@ QtObject {
property color themePillTextSelected: Theme.color(Theme.DSpillTextSelected)
property color themePillTextEdit: Theme.color(Theme.DspillTextEdit)
// Control Style Mapping
property ControlStyle controlStyle: DefaultStyle {}
property ControlStyle connectionPopupControlStyle: ConnectionPopupControlStyle {}
@@ -474,4 +472,5 @@ QtObject {
property ControlStyle statusbarControlStyle: StatusBarControlStyle {}
property ControlStyle statesControlStyle: StatesControlStyle {}
property ControlStyle searchControlStyle: SearchControlStyle {}
property ControlStyle viewStyle: ViewStyle {}
}

View File

@@ -0,0 +1,9 @@
// Copyright (C) 2023 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GPL-3.0 WITH Qt-GPL-exception-1.0
import QtQuick
ControlStyle {
scrollBarThickness: Values.scrollBarThickness
scrollBarThicknessHover: Values.scrollBarThicknessHover
}

View File

@@ -14,3 +14,4 @@ StatusBarControlStyle 1.0 StatusBarControlStyle.qml
TopToolbarButtonStyle 1.0 TopToolbarButtonStyle.qml
ViewBarButtonStyle 1.0 ViewBarButtonStyle.qml
ViewBarControlStyle 1.0 ViewBarControlStyle.qml
ViewStyle 1.0 ViewStyle.qml

View File

@@ -579,8 +579,9 @@ Rectangle {
anchors.topMargin: root.topMargin
anchors.leftMargin: root.leftMargin
ScrollBar.horizontal: HelperWidgets.ScrollBar {
ScrollBar.horizontal: StudioControls.TransientScrollBar {
id: horizontalBar
style: StudioTheme.Values.viewStyle
parent: scrollView
x: scrollView.leftPadding
y: scrollView.height - height
@@ -592,8 +593,9 @@ Rectangle {
otherInUse: verticalBar.inUse
}
ScrollBar.vertical: HelperWidgets.ScrollBar {
ScrollBar.vertical: StudioControls.TransientScrollBar {
id: verticalBar
style: StudioTheme.Values.viewStyle
parent: scrollView
x: scrollView.mirrored ? 0 : scrollView.width - width
y: scrollView.topPadding