Make ChoiceSetting work when there are more choices than can fit on the screen

harbour-seaprint.pro

@@ -32,6 +32,7 @@ SOURCES += src/harbour-seaprint.cpp \
     ppm2pwg/bytestream/bytestream.cpp
 
 DISTFILES += qml/harbour-seaprint.qml \
+    qml/components/LargeChoiceDialog.qml \
     qml/cover/CoverPage.qml \
     qml/components/*.qml \
     qml/pages/*.qml \

qml/components/ChoiceSetting.qml

@@ -8,6 +8,8 @@ Setting {
 
     property var limited_choices: Utils.limitChoices(name, choices, mime_type)
 
+    property int num_large_choices: 8
+
     ValueButton {
         enabled: valid
         anchors.verticalCenter: parent.verticalCenter
@@ -16,9 +18,20 @@ Setting {
         onClicked: parent.clicked()
     }
 
+    onClicked: {
+        if(limited_choices.length>num_large_choices)
+        {
+            var dialog = pageStack.push("LargeChoiceDialog.qml",
+                                        {name:name, choice: choice ? choice : default_choice, choices: limited_choices})
+            dialog.accepted.connect(function() {
+                                        choice = dialog.choice
+                                    })
+        }
+    }
+
     property var menu: ContextMenu {
         id: menu
-        enabled: valid
+        enabled: valid && limited_choices.length <= num_large_choices
         Repeater {
             model: limited_choices
             MenuItem {

qml/components/LargeChoiceDialog.qml

@@ -0,0 +1,40 @@
+import QtQuick 2.0
+import Sailfish.Silica 1.0
+import "../pages/utils.js" as Utils
+
+Dialog {
+    id: dialog
+
+    property string name
+    property string choice
+    property string new_choice: choice
+    property var choices
+    canAccept: false
+
+    SilicaListView
+    {
+        anchors.fill: parent
+
+        header: DialogHeader {}
+
+        model: choices
+        delegate: BackgroundItem {
+            onClicked: {
+                new_choice=choices[index]
+                dialog.canAccept = true
+            }
+            Label {
+                x: Theme.paddingLarge
+                anchors.verticalCenter: parent.verticalCenter
+                highlighted: choices[index]==new_choice
+                text: Utils.ippName(name, choices[index])
+            }
+        }
+    }
+
+    onDone: {
+        if (result == DialogResult.Accepted) {
+            choice = new_choice
+        }
+    }
+}

qml/pages/PrinterPage.qml

@@ -93,6 +93,19 @@ Page {
                 Loader {
                     id: loader
                     anchors.fill: parent
+
+                    onLoaded: {
+                        if(loaderItem.menu.enabled)
+                        {
+                            menu = loaderItem.menu
+                            loaderItem.clicked.connect(openMenu)
+                        }
+                        loaderItem.choiceMade.connect(function(tag, choice) {
+                            console.log("choice changed", tag, JSON.stringify(choice))
+                            jobParams[name] = {tag: tag, value: choice};
+                            console.log(JSON.stringify(jobParams));
+                        })
+                    }
                 }
 
                 Component.onCompleted: {
@@ -134,17 +147,6 @@ Page {
                     }
                 }
 
-                onLoaderItemChanged: {
-                    menu = loaderItem.menu
-                    loaderItem.clicked.connect(function() {
-                        openMenu()
-                    })
-                    loaderItem.choiceMade.connect(function(tag, choice) {
-                        console.log("choice changed", tag, JSON.stringify(choice))
-                        jobParams[name] = {tag: tag, value: choice};
-                        console.log(JSON.stringify(jobParams));
-                    })
-                }
 
             }
             VerticalScrollDecorator {}