From 7b8fd739f70cdcd041f28a8b75e42712b5aebeff Mon Sep 17 00:00:00 2001 From: Gabriel Bolbotina Date: Mon, 22 Dec 2025 15:17:56 +0200 Subject: [PATCH 1/2] Modified map sketching so that the picked color is visible --- app/qml/map/MMSketchesDrawer.qml | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/app/qml/map/MMSketchesDrawer.qml b/app/qml/map/MMSketchesDrawer.qml index 1b97a3c6b..78cc34c36 100644 --- a/app/qml/map/MMSketchesDrawer.qml +++ b/app/qml/map/MMSketchesDrawer.qml @@ -54,24 +54,24 @@ MMComponents.MMDrawer { onClicked: root.sketchingController.undo() } - drawerContent: Column { - id: mainColumn - - width: parent.width - spacing: __style.margin10 + drawerContent: ColumnLayout { + anchors { + left: parent.left + right: parent.right + } ScrollView { - width: parent.width - height: scrollRow.height - + Layout.fillWidth: true + Layout.preferredHeight: scrollRow.height + ScrollBar.vertical.policy: ScrollBar.AlwaysOff ScrollBar.horizontal.policy: ScrollBar.AlwaysOff Row { id: scrollRow - width: parent.width spacing: __style.margin12 - leftPadding: __style.margin6 + padding: __style.margin4 + anchors.centerIn: parent Repeater { id: colorsView @@ -93,8 +93,8 @@ MMComponents.MMDrawer { anchors.verticalCenter: parent.verticalCenter anchors.horizontalCenter: parent.horizontalCenter radius: width / 2 - width: scrollRow.height - height: scrollRow.height + width: __style.margin48 + height: __style.margin48 color: isActive ? __style.transparentColor : __style.lightGreenColor border.width: 2 border.color: isActive ? __style.grassColor : __style.transparentColor From 210b51750997f01146ea4a66954ff3052e3b8cbb Mon Sep 17 00:00:00 2001 From: Gabriel Bolbotina Date: Fri, 2 Jan 2026 10:38:10 +0200 Subject: [PATCH 2/2] Created reusable component for color picker --- app/qml/CMakeLists.txt | 1 + app/qml/components/MMPhotoColorPicker.qml | 77 ++++++++++++++++++ .../MMFormPhotoSketchingPageDialog.qml | 50 ++---------- app/qml/map/MMSketchesDrawer.qml | 79 ++----------------- 4 files changed, 88 insertions(+), 119 deletions(-) create mode 100644 app/qml/components/MMPhotoColorPicker.qml diff --git a/app/qml/CMakeLists.txt b/app/qml/CMakeLists.txt index 926d9f1e9..763abb497 100644 --- a/app/qml/CMakeLists.txt +++ b/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 diff --git a/app/qml/components/MMPhotoColorPicker.qml b/app/qml/components/MMPhotoColorPicker.qml new file mode 100644 index 000000000..3d5068ff5 --- /dev/null +++ b/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; + } + } + } +} \ No newline at end of file diff --git a/app/qml/form/components/MMFormPhotoSketchingPageDialog.qml b/app/qml/form/components/MMFormPhotoSketchingPageDialog.qml index 7f699a1d8..7020d982b 100644 --- a/app/qml/form/components/MMFormPhotoSketchingPageDialog.qml +++ b/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 ) - } - } - } - } } } diff --git a/app/qml/map/MMSketchesDrawer.qml b/app/qml/map/MMSketchesDrawer.qml index 78cc34c36..e29944e41 100644 --- a/app/qml/map/MMSketchesDrawer.qml +++ b/app/qml/map/MMSketchesDrawer.qml @@ -60,81 +60,12 @@ MMComponents.MMDrawer { right: parent.right } - ScrollView { + MMComponents.MMPhotoColorPicker{ + colors: root.sketchingController?.availableColors() ?? null + showEraseButton: true + controller: root.sketchingController + Layout.fillWidth: true - Layout.preferredHeight: 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 { - 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: __style.margin48 - height: __style.margin48 - 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 - } - } - } } } }