Fixed color selection for map sketching

app/qml/CMakeLists.txt

@@ -40,6 +40,7 @@ set(MM_QML
     components/MMNotificationView.qml
     components/MMPage.qml
     components/MMPageHeader.qml
+    components/MMPhotoColorPicker.qml
     components/MMPopup.qml
     components/MMPhoto.qml
     components/MMProgressBar.qml

app/qml/components/MMPhotoColorPicker.qml

@@ -0,0 +1,77 @@
+import QtQuick
+import QtQuick.Controls
+
+ScrollView {
+    id: root
+
+    required property var colors
+    required property var controller
+    required property bool showEraseButton
+
+    height: scrollRow.height
+    ScrollBar.vertical.policy: ScrollBar.AlwaysOff
+    ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
+
+    Row {
+        id: scrollRow
+        spacing: __style.margin12
+        padding: __style.margin4
+        anchors.centerIn: parent
+
+        Repeater {
+            model: colors ?? null
+
+            MMRoundButton {
+                anchors.verticalCenter: parent.verticalCenter
+
+                contentItem: Rectangle {
+                    color: modelData
+                    radius: width / 2
+                    anchors.fill: parent
+                }
+
+                background: Rectangle {
+                    property bool isActive: modelData.toLowerCase() === controller.activeColor.toString().toLowerCase()
+
+                    anchors.verticalCenter: parent.verticalCenter
+                    anchors.horizontalCenter: parent.horizontalCenter
+                    radius: width / 2
+                    width: __style.margin48
+                    height: __style.margin48
+                    color: isActive ? __style.transparentColor : __style.lightGreenColor
+                    border.width: 2
+                    border.color: isActive ? __style.grassColor : __style.transparentColor
+                }
+
+                onClicked: {
+                    if (showEraseButton) {
+                        controller.eraserActive = false;
+                    }
+                    controller.activeColor = modelData;
+                }
+            }
+        }
+
+        MMButton {
+            text: qsTr("Eraser")
+            iconSourceLeft: __style.editIcon
+            // in some instances the erase button is not needed, because there is an "undo" feature already implemented
+            visible: showEraseButton
+
+            type: MMButton.Types.Primary
+            size: MMButton.Sizes.Small
+
+            fontColor: controller?.eraserActive ? __style.negativeColor : __style.grapeColor
+            iconColor: controller?.eraserActive ? __style.negativeColor : __style.grapeColor
+            bgndColor: controller?.eraserActive ? __style.grapeColor : __style.negativeColor
+            fontColorHover: controller?.eraserActive ? __style.grapeColor : __style.negativeColor
+            iconColorHover: controller?.eraserActive ? __style.grapeColor : __style.negativeColor
+            bgndColorHover: controller?.eraserActive ? __style.negativeColor : __style.grapeColor
+
+            onClicked: {
+                controller.activeColor = null;
+                controller.eraserActive = true;
+            }
+        }
+    }
+}

app/qml/form/components/MMFormPhotoSketchingPageDialog.qml

@@ -200,56 +200,16 @@ Dialog {
 
     MMComponents.MMListSpacer { implicitHeight: __style.margin20 }
 
-    ScrollView {
+    MMComponents.MMPhotoColorPicker{
+      colors: ["#FFFFFF", "#12181F", "#5E9EE4", "#57B46F", "#FDCB2A", "#FF9C40", "#FF8F93"]
+      showEraseButton: false
+      controller: root.controller
+
       Layout.alignment: Qt.AlignHCenter
-      Layout.preferredHeight: scrollRow.height
-      Layout.preferredWidth: scrollRow.width
       Layout.maximumWidth: parent.width - ( 2 * __style.pageMargins + __style.safeAreaLeft + __style.safeAreaRight )
       Layout.bottomMargin: __style.pageMargins + __style.safeAreaBottom
       Layout.leftMargin: __style.pageMargins + __style.safeAreaLeft
       Layout.rightMargin: __style.pageMargins + __style.safeAreaRight
-
-      ScrollBar.vertical.policy: ScrollBar.AlwaysOff
-      ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
-
-      Row {
-        id: scrollRow
-        spacing: __style.margin12
-        padding: __style.margin4
-        anchors.centerIn: parent
-
-        Repeater {
-          // we use more vibrant versions of our product colors
-          model: ["#FFFFFF", "#12181F", "#5E9EE4", "#57B46F", "#FDCB2A", "#FF9C40", "#FF8F93"]
-
-          MMComponents.MMRoundButton {
-            id: colorButton
-            required property color modelData
-            anchors.verticalCenter: parent.verticalCenter
-
-            contentItem: Rectangle {
-              color: colorButton.modelData
-              radius: width / 2
-              anchors.fill: parent
-            }
-            background: Rectangle {
-              property bool isActive: colorButton.modelData === root.controller.activeColor
-
-              anchors.centerIn: parent
-              radius: width / 2
-              width: __style.margin48
-              height: __style.margin48
-              color: isActive ? __style.transparentColor : __style.lightGreenColor
-              border.width: 2
-              border.color: isActive ? __style.grassColor : __style.transparentColor
-            }
-
-            onClicked: {
-              root.controller.setActiveColor( modelData )
-            }
-          }
-        }
-      }
     }
   }
 

app/qml/map/MMSketchesDrawer.qml

@@ -54,87 +54,18 @@ MMComponents.MMDrawer {
     onClicked: root.sketchingController.undo()
   }
 
-  drawerContent: Column {
-    id: mainColumn
-
-    width: parent.width
-    spacing: __style.margin10
-
-    ScrollView {
-      width: parent.width
-      height: scrollRow.height
-
-      ScrollBar.vertical.policy: ScrollBar.AlwaysOff
-      ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
-
-      Row {
-        id: scrollRow
-        width: parent.width
-        spacing: __style.margin12
-        leftPadding: __style.margin6
-
-        Repeater {
-          id: colorsView
-
-          model: root.sketchingController?.availableColors() ?? null
-
-          MMComponents.MMRoundButton {
-            anchors.verticalCenter: parent.verticalCenter
-
-            contentItem: Rectangle {
-              color: modelData
-              radius: width / 2
-              anchors.fill: parent
-            }
-
-            background: Rectangle {
-              property bool isActive: modelData.toLowerCase() === root.sketchingController.activeColor.toString().toLowerCase()
-
-              anchors.verticalCenter: parent.verticalCenter
-              anchors.horizontalCenter: parent.horizontalCenter
-              radius: width / 2
-              width: scrollRow.height
-              height: scrollRow.height
-              color: isActive ? __style.transparentColor : __style.lightGreenColor
-              border.width: 2
-              border.color: isActive ? __style.grassColor : __style.transparentColor
-            }
-
-            onClicked: {
-              root.sketchingController.eraserActive = false
-              root.sketchingController.activeColor = modelData
-            }
-
-            Component.onCompleted: {
-              // set the initial color to be the first one in the list
-              if ( index === 0 )
-              {
-                root.sketchingController.activeColor = modelData
-              }
-            }
-          }
-        }
-
-        MMComponents.MMButton {
-          text: qsTr( "Eraser" )
-          iconSourceLeft: __style.editIcon
-
-          type: MMButton.Types.Primary
-          size: MMButton.Sizes.Small
-
-          fontColor: root.sketchingController?.eraserActive ? __style.negativeColor : __style.grapeColor
-          iconColor: root.sketchingController?.eraserActive ? __style.negativeColor : __style.grapeColor
-          bgndColor: root.sketchingController?.eraserActive ? __style.grapeColor : __style.negativeColor
-          fontColorHover: root.sketchingController?.eraserActive ? __style.grapeColor : __style.negativeColor
-          iconColorHover: root.sketchingController?.eraserActive ? __style.grapeColor : __style.negativeColor
-          bgndColorHover: root.sketchingController?.eraserActive ? __style.negativeColor : __style.grapeColor
-
-          onClicked: {
-            root.sketchingController.activeColor = null
-            root.sketchingController.eraserActive = true
-          }
-        }
-      }
+  drawerContent: ColumnLayout {
+    anchors {
+        left: parent.left
+        right: parent.right
+    }
+
+    MMComponents.MMPhotoColorPicker{
+      colors: root.sketchingController?.availableColors() ?? null
+      showEraseButton: true
+      controller: root.sketchingController
+
+      Layout.fillWidth: true
     }
   }
 }