MerginMaps · gabriel-bolbotina · Dec 22, 2025 · Jan 2, 2026 · Jan 16, 2026
diff --git a/app/mmstyle.h b/app/mmstyle.h
@@ -82,6 +82,13 @@ class MMStyle: public QObject
     Q_PROPERTY( QColor negativeUltraLightColor READ negativeUltraLightColor CONSTANT )
     Q_PROPERTY( QColor informativeColor READ informativeColor CONSTANT )
 
+    // Colors - color picker default
+    Q_PROPERTY( QColor meadowGreenColor READ meadowGreenColor CONSTANT )
+    Q_PROPERTY( QColor informativeYellowColor READ informativeYellowColor CONSTANT )
+    Q_PROPERTY( QColor fruitOrangeColor READ fruitOrangeColor CONSTANT )
+    Q_PROPERTY( QColor oceanBlueColor READ oceanBlueColor CONSTANT )
+    Q_PROPERTY( QColor salmonPinkColor READ salmonPinkColor CONSTANT )
+
     // Colors - others
     Q_PROPERTY( QColor shadowColor READ shadowColor CONSTANT )
     Q_PROPERTY( QColor snappingColor READ snappingColor CONSTANT )
@@ -382,6 +389,12 @@ class MMStyle: public QObject
     QColor informativeColor() const {return QColor::fromString( "#BEDAF0" );}
     QColor snappingColor() const {return QColor::fromString( "#BD74FF" );}
 
+    QColor meadowGreenColor() const {return QColor::fromString( "#57B46F" );}
+    QColor informativeYellowColor() const {return QColor::fromString( "#FDCB2A" );}
+    QColor fruitOrangeColor() const {return QColor::fromString( "#FF9C40" );}
+    QColor oceanBlueColor() const {return QColor::fromString( "#5E9EE4" );}
+    QColor salmonPinkColor() const {return QColor::fromString( "#FF8F93" );}
+
     QColor shadowColor() const {return QColor::fromString( "#66777777" );}
 
     QUrl splitGeometryIcon() const {return QUrl( "qrc:/SplitGeometry.svg" );}

diff --git a/app/qml/CMakeLists.txt b/app/qml/CMakeLists.txt
@@ -40,6 +40,8 @@ set(MM_QML
     components/MMNotificationView.qml
     components/MMPage.qml
     components/MMPageHeader.qml
+    components/MMColorPicker.qml
+    components/MMColorButton.qml
     components/MMPopup.qml
     components/MMPhoto.qml
     components/MMProgressBar.qml

diff --git a/app/qml/components/MMColorButton.qml b/app/qml/components/MMColorButton.qml
@@ -0,0 +1,34 @@
+import QtQuick
+import QtQuick.Controls
+
+MMRoundButton {
+    id: root
+
+    required property color chosenColor
+    property bool isSelected: false
+
+    anchors.verticalCenter: parent.verticalCenter
+
+    contentItem: Rectangle {
+        color: root.chosenColor
+        radius: width / 2
+        anchors.fill: parent
+    }
+
+    background: Rectangle {
+        anchors{
+            verticalCenter: parent.verticalCenter
+            horizontalCenter: parent.horizontalCenter
+        }
+
+        radius: width / 2
+        width: __style.margin48
+        height: __style.margin48
+
+        color: root.isSelected ? __style.transparentColor : __style.lightGreenColor
+        border{
+            width: 2
+            color: root.isSelected ? __style.grassColor : __style.transparentColor
+        }
+    }
+}
diff --git a/app/qml/components/MMColorPicker.qml b/app/qml/components/MMColorPicker.qml
@@ -0,0 +1,70 @@
+import QtQuick
+import QtQuick.Controls
+
+ScrollView {
+    id: root
+
+    required property list<color> colors
+    required property bool showEraseButton
+
+    property color activeColor: "transparent"
+    property bool eraserActive: false
+
+    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
+            MMColorButton{
+                required property color modelData
+                required property int index
+
+                chosenColor: modelData
+                isSelected: !root.eraserActive && (root.activeColor === modelData)
+
+                onClicked: {
+                    if (root.showEraseButton) {
+                        root.eraserActive = false;
+                    }   
+                    root.activeColor = modelData;
+                }
+                Component.onCompleted: {
+                    // set the initial color to be the first one in the list
+                    if ( index === 0 )
+                    {
+                        root.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: root.showEraseButton
+
+            type: MMButton.Types.Primary
+            size: MMButton.Sizes.Small
+
+            fontColor: root.eraserActive ? __style.negativeColor : __style.grapeColor
+            iconColor: root.eraserActive ? __style.negativeColor : __style.grapeColor
+            bgndColor: root.eraserActive ? __style.grapeColor : __style.negativeColor
+            fontColorHover: root.eraserActive ? __style.grapeColor : __style.negativeColor
+            iconColorHover: root.eraserActive ? __style.grapeColor : __style.negativeColor
+            bgndColorHover: root.eraserActive ? __style.negativeColor : __style.grapeColor
+
+            onClicked: {
+                root.activeColor = "transparent";
+                root.eraserActive = true;
+            }
+        }
+    }
+}
diff --git a/app/qml/form/components/MMFormPhotoSketchingPageDialog.qml b/app/qml/form/components/MMFormPhotoSketchingPageDialog.qml
@@ -200,55 +200,18 @@ Dialog {
 
     MMComponents.MMListSpacer { implicitHeight: __style.margin20 }
 
-    ScrollView {
+    MMComponents.MMColorPicker{
+      colors: [__style.polarColor, __style.nightColor, __style.oceanBlueColor, __style.meadowGreenColor, __style.informativeYellowColor, __style.fruitOrangeColor, __style.salmonPinkColor]
+      showEraseButton: false
+
       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 )
-            }
-          }
-        }
+      onActiveColorChanged:{
+        root.controller.activeColor = activeColor
       }
     }
   }

diff --git a/app/qml/map/MMSketchesDrawer.qml b/app/qml/map/MMSketchesDrawer.qml
@@ -54,87 +54,21 @@ 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: MMComponents.MMColorPicker{
+    colors: root.sketchingController?.availableColors() ?? null
+    showEraseButton: true
+
+    anchors {
+      left: parent.left
+      right: parent.right
+    }
+
+    onActiveColorChanged: {
+      root.sketchingController.activeColor = activeColor
+    }
+
+    onEraserActiveChanged: {
+      root.sketchingController.eraserActive = eraserActive
     }
   }
 }