qqc2-desktop-style/org.kde.desktop/ComboBox.qml

0001 /*
0002     SPDX-FileCopyrightText: 2017 Marco Martin <mart@kde.org>
0003     SPDX-FileCopyrightText: 2017 The Qt Company Ltd.
0004
0005     SPDX-License-Identifier: LGPL-3.0-only OR GPL-2.0-or-later
0006 */
0007
0008
0009 import QtQuick
0010 import QtQuick.Window
0011 import QtQuick.Templates as T
0012 import QtQuick.Controls as Controls
0013 import org.kde.kirigami as Kirigami
0014 import org.kde.desktop.private as Private
0015 import org.kde.qqc2desktopstyle.private as StylePrivate
0016
0017 T.ComboBox {
0018     id: controlRoot
0019
0020     Kirigami.Theme.colorSet: editable ? Kirigami.Theme.View : Kirigami.Theme.Button
0021     Kirigami.Theme.inherit: false
0022
0023     implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
0024                             implicitContentWidth + leftPadding + rightPadding)
0025     implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
0026                              implicitContentHeight + topPadding + bottomPadding,
0027                              implicitIndicatorHeight + topPadding + bottomPadding)
0028
0029     baselineOffset: contentItem.y + contentItem.baselineOffset
0030
0031     hoverEnabled: true
0032     wheelEnabled: true
0033
0034     padding: 5
0035     leftPadding: editable && mirrored ? 24 : padding
0036     rightPadding: editable && !mirrored ? 24 : padding
0037
0038     delegate: ItemDelegate {
0039         required property var model
0040         required property int index
0041         width: ListView.view.width
0042         text: model[controlRoot.textRole]
0043         highlighted: controlRoot.highlightedIndex == index
0044         property bool separatorVisible: false
0045         Kirigami.Theme.colorSet: controlRoot.Kirigami.Theme.inherit ? controlRoot.Kirigami.Theme.colorSet : Kirigami.Theme.View
0046         Kirigami.Theme.inherit: controlRoot.Kirigami.Theme.inherit
0047     }
0048
0049     indicator: Item {}
0050
0051     /* ensure that the combobox and its popup have enough width for all of its items
0052      * TODO remove for KF6 because it is fixed by Qt6 */
0053     onCountChanged: {
0054         let maxWidth = 75
0055         for (let i = 0; i < count; ++i) {
0056             maxWidth = Math.max(maxWidth, fontMetrics.boundingRect(controlRoot.textAt(i)).width)
0057         }
0058         styleitem.contentWidth = maxWidth
0059     }
0060
0061     FontMetrics {
0062         id: fontMetrics
0063     }
0064
0065     contentItem: T.TextField {
0066         padding: 0
0067         text: controlRoot.editable ? controlRoot.editText : controlRoot.displayText
0068
0069         enabled: controlRoot.editable
0070         autoScroll: controlRoot.editable
0071         readOnly: controlRoot.down
0072
0073         visible: controlRoot.editable
0074         inputMethodHints: controlRoot.inputMethodHints
0075         validator: controlRoot.validator
0076
0077         // Work around Qt bug where NativeRendering breaks for non-integer scale factors
0078         // https://bugreports.qt.io/browse/QTBUG-67007
0079         renderType: Screen.devicePixelRatio % 1 !== 0 ? Text.QtRendering : Text.NativeRendering
0080         color: controlRoot.enabled ? Kirigami.Theme.textColor : Kirigami.Theme.disabledTextColor
0081         selectionColor: Kirigami.Theme.highlightColor
0082         selectedTextColor: Kirigami.Theme.highlightedTextColor
0083
0084         selectByMouse: !Kirigami.Settings.tabletMode
0085         cursorDelegate: Kirigami.Settings.tabletMode ? mobileCursor : null
0086
0087         font: controlRoot.font
0088         horizontalAlignment: Text.AlignLeft
0089         verticalAlignment: Text.AlignVCenter
0090         opacity: controlRoot.enabled ? 1 : 0.3
0091
0092         onFocusChanged: {
0093             if (focus) {
0094                 Private.MobileTextActionsToolBar.controlRoot = this;
0095             }
0096         }
0097
0098         onTextChanged: Private.MobileTextActionsToolBar.shouldBeVisible = false;
0099         onPressed: Private.MobileTextActionsToolBar.shouldBeVisible = true;
0100
0101         onPressAndHold: {
0102             if (!Kirigami.Settings.tabletMode) {
0103                 return;
0104             }
0105             forceActiveFocus();
0106             cursorPosition = positionAt(event.x, event.y);
0107             selectWord();
0108         }
0109     }
0110
0111     Component {
0112         id: mobileCursor
0113         Private.MobileCursor {
0114             target: controlRoot.contentItem
0115         }
0116     }
0117
0118     Private.MobileCursor {
0119         target: controlRoot.contentItem
0120         selectionStartHandle: true
0121         readonly property rect rect: target.positionToRectangle(target.selectionStart)
0122         x: rect.x + 5
0123         y: rect.y + 6
0124     }
0125
0126     background: StylePrivate.StyleItem {
0127         id: styleitem
0128         control: controlRoot
0129         elementType: "combobox"
0130         flat: controlRoot.flat
0131         anchors.fill: parent
0132         hover: controlRoot.hovered
0133         on: controlRoot.down
0134         hasFocus: controlRoot.activeFocus
0135         enabled: controlRoot.enabled
0136         // contentHeight as in QComboBox magic numbers taken from QQC1 style
0137         contentHeight: Math.max(Math.ceil(textHeight("")), 14) + 2
0138         text: controlRoot.displayText
0139         properties: {
0140             "editable": control.editable
0141         }
0142     }
0143
0144     popup: T.Popup {
0145         Kirigami.OverlayZStacking.layer: Kirigami.OverlayZStacking.Menu
0146         z: Kirigami.OverlayZStacking.z
0147
0148         y: controlRoot.height
0149         width: controlRoot.width
0150         implicitHeight: contentItem.implicitHeight
0151         topMargin: 6
0152         bottomMargin: 6
0153         Kirigami.Theme.colorSet: Kirigami.Theme.View
0154         Kirigami.Theme.inherit: controlRoot.Kirigami.Theme.inherit
0155         modal: true
0156         dim: true
0157         closePolicy: Controls.Popup.CloseOnEscape | Controls.Popup.CloseOnPressOutside
0158
0159         // Forces it to have a transparent dimmer.
0160         // A dimmer is needed for "click outside" to work reliably in some views
0161         // but default dimmer would, well, dim the contents in pure QtQuick windows,
0162         // like ApplicationWindow, which we don't want.
0163         Controls.Overlay.modal: Item { }
0164
0165         contentItem: ScrollView {
0166             LayoutMirroring.enabled: controlRoot.mirrored
0167             LayoutMirroring.childrenInherit: true
0168
0169             background: Rectangle {
0170                 color: Kirigami.Theme.backgroundColor
0171             }
0172             ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
0173             ListView {
0174                 id: listView
0175
0176                 // this causes us to load at least one delegate
0177                 // this is essential in guessing the contentHeight
0178                 // which is needed to initially resize the popup
0179                 cacheBuffer: 1
0180
0181                 implicitHeight: contentHeight
0182                 model: controlRoot.delegateModel
0183                 delegate: controlRoot.delegate
0184                 currentIndex: controlRoot.highlightedIndex
0185                 highlightRangeMode: ListView.ApplyRange
0186                 highlightMoveDuration: 0
0187                 boundsBehavior: Flickable.StopAtBounds
0188             }
0189         }
0190         background: Kirigami.ShadowedRectangle {
0191             anchors {
0192                 fill: parent
0193                 margins: -1
0194             }
0195             radius: 2
0196             color: Kirigami.Theme.backgroundColor
0197
0198             border.color: Kirigami.ColorUtils.linearInterpolation(Kirigami.Theme.backgroundColor, Kirigami.Theme.textColor, Kirigami.Theme.frameContrast)
0199             border.width: 1
0200
0201             shadow.xOffset: 0
0202             shadow.yOffset: 2
0203             shadow.color: Qt.rgba(0, 0, 0, 0.3)
0204             shadow.size: 8
0205         }
0206     }
0207 }