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