From 29f99bd56f5384c390c7a7cc7ebf5a0fe50c1edc Mon Sep 17 00:00:00 2001 From: Mitch Curtis Date: Fri, 18 Mar 2016 16:29:33 +0100 Subject: Update Default style ComboBox to match new design specs Change-Id: Iac0038c6854685b031d5343b651836d9b605a6d0 Task-number: QTBUG-50993 Reviewed-by: J-P Nurmi --- src/imports/controls/ComboBox.qml | 40 ++++++++++----------- src/imports/controls/images/double-arrow-focus.png | Bin 0 -> 1282 bytes .../controls/images/double-arrow-focus@2x.png | Bin 0 -> 1697 bytes .../controls/images/double-arrow-focus@3x.png | Bin 0 -> 2067 bytes .../controls/images/double-arrow-focus@4x.png | Bin 0 -> 2551 bytes src/imports/controls/images/double-arrow.png | Bin 0 -> 1275 bytes src/imports/controls/images/double-arrow@2x.png | Bin 0 -> 1690 bytes src/imports/controls/images/double-arrow@3x.png | Bin 0 -> 2059 bytes src/imports/controls/images/double-arrow@4x.png | Bin 0 -> 2523 bytes src/imports/controls/qtquickcontrols2plugin.qrc | 8 +++++ 10 files changed, 27 insertions(+), 21 deletions(-) create mode 100644 src/imports/controls/images/double-arrow-focus.png create mode 100644 src/imports/controls/images/double-arrow-focus@2x.png create mode 100644 src/imports/controls/images/double-arrow-focus@3x.png create mode 100644 src/imports/controls/images/double-arrow-focus@4x.png create mode 100644 src/imports/controls/images/double-arrow.png create mode 100644 src/imports/controls/images/double-arrow@2x.png create mode 100644 src/imports/controls/images/double-arrow@3x.png create mode 100644 src/imports/controls/images/double-arrow@4x.png diff --git a/src/imports/controls/ComboBox.qml b/src/imports/controls/ComboBox.qml index cb9735a2..c04ca842 100644 --- a/src/imports/controls/ComboBox.qml +++ b/src/imports/controls/ComboBox.qml @@ -42,24 +42,23 @@ import Qt.labs.templates 1.0 as T T.ComboBox { id: control - implicitWidth: Math.max(background ? background.implicitWidth : 0, - contentItem.implicitWidth + leftPadding + rightPadding) - implicitHeight: Math.max(background ? background.implicitHeight : 0, - contentItem.implicitHeight + topPadding + bottomPadding) + implicitWidth: (background ? background.implicitWidth : contentItem.implicitWidth) + leftPadding + rightPadding + implicitHeight: Math.max(background ? background.implicitHeight : 0, contentItem.implicitHeight + topPadding + bottomPadding) baselineOffset: contentItem.y + contentItem.baselineOffset spacing: 8 padding: 6 - leftPadding: 8 - rightPadding: 8 + leftPadding: 12 + rightPadding: 12 + + opacity: enabled ? 1 : 0.3 //! [delegate] delegate: ItemDelegate { width: control.width text: control.textRole ? (Array.isArray(control.model) ? modelData[control.textRole] : model[control.textRole]) : modelData - autoExclusive: true - checked: control.currentIndex === index - highlighted: control.highlightedIndex === index + font.weight: control.currentIndex === index ? Font.DemiBold : Font.Normal + highlighted: control.highlightedIndex == index } //! [delegate] @@ -67,7 +66,7 @@ T.ComboBox { contentItem: Text { text: control.displayText font: control.font - color: "#ffffff" + color: control.activeKeyFocus ? "#0066ff" : "#353637" horizontalAlignment: Text.AlignLeft verticalAlignment: Text.AlignVCenter elide: Text.ElideRight @@ -76,28 +75,27 @@ T.ComboBox { //! [contentItem] //! [background] - background: Item { + background: Rectangle { implicitWidth: 120 implicitHeight: 40 - Rectangle { - width: parent.width - height: parent.height - opacity: control.enabled ? 1.0 : 0.2 - color: control.pressed || popup.visible ? "#585A5C" : "#353637" - } + color: control.activeKeyFocus ? (control.pressed ? "#cce0ff" : "#f0f6ff") : + (control.pressed || popup.visible ? "#d6d6d6" : "#f6f6f6") + border.color: control.activeKeyFocus ? "#0066ff" : "#353637" + border.width: control.activeKeyFocus ? 2 : 1 Image { - x: parent.width - width - control.rightPadding + x: parent.width - width - 4 y: (parent.height - height) / 2 - source: "qrc:/qt-project.org/imports/Qt/labs/controls/images/drop-indicator.png" + source: "qrc:/qt-project.org/imports/Qt/labs/controls/images/double-arrow" + + (control.activeKeyFocus ? "-focus" : "") + ".png" } } //! [background] //! [popup] popup: T.Popup { - y: control.height - 1 + y: control.height - (control.activeKeyFocus ? 0 : 1) implicitWidth: control.width implicitHeight: listview.contentHeight topMargin: 6 @@ -114,8 +112,8 @@ T.ComboBox { parent: listview width: listview.width height: listview.height - border.color: "#353637" color: "transparent" + border.color: "#353637" } T.ScrollIndicator.vertical: ScrollIndicator { } diff --git a/src/imports/controls/images/double-arrow-focus.png b/src/imports/controls/images/double-arrow-focus.png new file mode 100644 index 00000000..d68de2c2 Binary files /dev/null and b/src/imports/controls/images/double-arrow-focus.png differ diff --git a/src/imports/controls/images/double-arrow-focus@2x.png b/src/imports/controls/images/double-arrow-focus@2x.png new file mode 100644 index 00000000..d0686fc8 Binary files /dev/null and b/src/imports/controls/images/double-arrow-focus@2x.png differ diff --git a/src/imports/controls/images/double-arrow-focus@3x.png b/src/imports/controls/images/double-arrow-focus@3x.png new file mode 100644 index 00000000..2cf08077 Binary files /dev/null and b/src/imports/controls/images/double-arrow-focus@3x.png differ diff --git a/src/imports/controls/images/double-arrow-focus@4x.png b/src/imports/controls/images/double-arrow-focus@4x.png new file mode 100644 index 00000000..e0b6eeb3 Binary files /dev/null and b/src/imports/controls/images/double-arrow-focus@4x.png differ diff --git a/src/imports/controls/images/double-arrow.png b/src/imports/controls/images/double-arrow.png new file mode 100644 index 00000000..a6d84dbc Binary files /dev/null and b/src/imports/controls/images/double-arrow.png differ diff --git a/src/imports/controls/images/double-arrow@2x.png b/src/imports/controls/images/double-arrow@2x.png new file mode 100644 index 00000000..36ffd5fe Binary files /dev/null and b/src/imports/controls/images/double-arrow@2x.png differ diff --git a/src/imports/controls/images/double-arrow@3x.png b/src/imports/controls/images/double-arrow@3x.png new file mode 100644 index 00000000..5a2a59fe Binary files /dev/null and b/src/imports/controls/images/double-arrow@3x.png differ diff --git a/src/imports/controls/images/double-arrow@4x.png b/src/imports/controls/images/double-arrow@4x.png new file mode 100644 index 00000000..22977545 Binary files /dev/null and b/src/imports/controls/images/double-arrow@4x.png differ diff --git a/src/imports/controls/qtquickcontrols2plugin.qrc b/src/imports/controls/qtquickcontrols2plugin.qrc index 227bd435..75fe80c2 100644 --- a/src/imports/controls/qtquickcontrols2plugin.qrc +++ b/src/imports/controls/qtquickcontrols2plugin.qrc @@ -16,5 +16,13 @@ images/check-focus@2x.png images/check-focus@3x.png images/check-focus@4x.png + images/double-arrow.png + images/double-arrow@2x.png + images/double-arrow@3x.png + images/double-arrow@4x.png + images/double-arrow-focus.png + images/double-arrow-focus@2x.png + images/double-arrow-focus@3x.png + images/double-arrow-focus@4x.png -- cgit v1.2.3