ComboBox: Make popup scrollable

We factor out part the menu item container logic from Menu into
ColumnMenuContent, which takes care of scrolling and mouse hovering,
and selection. This makes possible to extend the menu items layout.

The pop-over and pull-down look is specified by the menu style
component by overriding the ScrollView style. The popup's maximum
height is also specified by the menu style.

The gallery example can finally use a font families combo box.

Task-number: QTBUG-31568
Change-Id: I34a7278f476471c0eb51ef51dde3dd83e13002fe
Reviewed-by: J-P Nurmi <jpnurmi@digia.com>

2 files changed, 37 insertions, 1 deletions

diff --git a/src/controls/Styles/Base/ComboBoxStyle.qml b/src/controls/Styles/Base/ComboBoxStyle.qml
index 2011b219..b49d8f97 100644
--- a/src/controls/Styles/Base/ComboBoxStyle.qml
+++ b/src/controls/Styles/Base/ComboBoxStyle.qml
@@ -38,6 +38,7 @@
 **
 ****************************************************************************/
 import QtQuick 2.1
+import QtQuick.Window 2.1
 import QtQuick.Controls 1.1
 import QtQuick.Controls.Styles 1.1
 import QtQuick.Controls.Private 1.0
@@ -188,7 +189,11 @@ Style {
 
     /*! \internal */
     property Component __dropDownStyle: MenuStyle {
+        maxPopupHeight: 600
         __menuItemType: "comboboxitem"
+        scrollerStyle: ScrollViewStyle {
+            property bool useScrollers: false
+        }
     }
 
     /*! \internal */
@@ -198,6 +203,8 @@ Style {
             width: (parent ? parent.contentWidth : 0)
             height: (parent ? parent.contentHeight : 0) + 2
             border.color: "#777"
+            property real maxHeight: Math.min(500, Screen.desktopAvailableHeight)
+            property int margin: 1
         }
 
         property Component menuItem: Rectangle {
@@ -211,5 +218,14 @@ Style {
                 text: textRef
             }
         }
+
+        property Component scrollerStyle: Style {
+            padding { left: 0; right: 0; top: 0; bottom: 0 }
+            property bool scrollToClickedPosition: false
+            property Component frame: Item { visible: false }
+            property Component corner: Item { visible: false }
+            property Component __scrollbar: Item { visible: false }
+            property bool useScrollers: true
+        }
     }
 }
diff --git a/src/controls/Styles/Base/MenuStyle.qml b/src/controls/Styles/Base/MenuStyle.qml
index 9be32459..c05c6a6d 100644
--- a/src/controls/Styles/Base/MenuStyle.qml
+++ b/src/controls/Styles/Base/MenuStyle.qml
@@ -39,6 +39,7 @@
 ****************************************************************************/
 
 import QtQuick 2.1
+import QtQuick.Window 2.1
 import QtQuick.Controls 1.1
 import QtQuick.Controls.Private 1.0
 
@@ -53,6 +54,7 @@ Style {
     id: styleRoot
 
     property string __menuItemType: "menuitem"
+    property real maxPopupHeight: 600 // ### FIXME Screen.desktopAvailableHeight * 0.99
 
     property Component frame: Rectangle {
         width: (parent ? parent.contentWidth : 0) + 2
@@ -62,6 +64,8 @@ Style {
         border { width: 1; color: "darkgray" }
 
         property int subMenuOverlap: -1
+        property real maxHeight: maxPopupHeight
+        property int margin: 1
     }
 
     property Component menuItem: Rectangle {
@@ -69,7 +73,7 @@ Style {
         y: 1
         implicitWidth: Math.max((parent ? parent.width : 0),
                                 18 + text.paintedWidth + (rightDecoration.visible ? rightDecoration.width + 40 : 12))
-        implicitHeight: isSeparator ? text.font.pixelSize / 2 : text.paintedHeight + 4
+        implicitHeight: isSeparator ? text.font.pixelSize / 2 : !!scrollerDirection ? text.font.pixelSize * 0.75 : text.paintedHeight + 4
         color: selected && enabled ? "" : backgroundColor
         gradient: selected && enabled ? selectedGradient : undefined
         border.width: 1
@@ -188,6 +192,13 @@ Style {
             style: selected || !isSubmenu ? Text.Normal : Text.Raised; styleColor: Qt.lighter(color, 4)
         }
 
+        Image {
+            id: scrollerDecoration
+            visible: !!scrollerDirection
+            anchors.centerIn: parent
+            source: scrollerDirection === "up" ? "images/arrow-up.png" : "images/arrow-down.png"
+        }
+
         Rectangle {
             visible: isSeparator
             width: parent.width - 2
@@ -197,4 +208,13 @@ Style {
             color: "darkgray"
         }
     }
+
+    property Component scrollerStyle: Style {
+        padding { left: 0; right: 0; top: 0; bottom: 0 }
+        property bool scrollToClickedPosition: false
+        property Component frame: Item { visible: false }
+        property Component corner: Item { visible: false }
+        property Component __scrollbar: Item { visible: false }
+        property bool useScrollers: true
+    }
 }