From 7b8fd739f70cdcd041f28a8b75e42712b5aebeff Mon Sep 17 00:00:00 2001 From: Gabriel Bolbotina Date: Mon, 22 Dec 2025 15:17:56 +0200 Subject: [PATCH 1/4] 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/4] 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 - } - } - } } } } From a2880411f2c4feba3c44f9dc3adee72b9d05cfb1 Mon Sep 17 00:00:00 2001 From: Gabriel Bolbotina Date: Fri, 16 Jan 2026 16:06:29 +0200 Subject: [PATCH 3/4] Implemented code findings --- app/mmstyle.h | 13 ++++ app/qml/CMakeLists.txt | 3 +- app/qml/components/MMColorButton.qml | 34 ++++++++ app/qml/components/MMColorPicker.qml | 70 +++++++++++++++++ app/qml/components/MMPhotoColorPicker.qml | 77 ------------------- .../MMFormPhotoSketchingPageDialog.qml | 9 ++- app/qml/map/MMSketchesDrawer.qml | 19 +++-- 7 files changed, 136 insertions(+), 89 deletions(-) create mode 100644 app/qml/components/MMColorButton.qml create mode 100644 app/qml/components/MMColorPicker.qml delete mode 100644 app/qml/components/MMPhotoColorPicker.qml diff --git a/app/mmstyle.h b/app/mmstyle.h index 5015b0466..981d4e870 100644 --- 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 index 763abb497..df8b7844d 100644 --- a/app/qml/CMakeLists.txt +++ b/app/qml/CMakeLists.txt @@ -40,7 +40,8 @@ set(MM_QML components/MMNotificationView.qml components/MMPage.qml components/MMPageHeader.qml - components/MMPhotoColorPicker.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 new file mode 100644 index 000000000..d0e714a7b --- /dev/null +++ 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 + } + } +} \ No newline at end of file diff --git a/app/qml/components/MMColorPicker.qml b/app/qml/components/MMColorPicker.qml new file mode 100644 index 000000000..a0cf9cdb3 --- /dev/null +++ b/app/qml/components/MMColorPicker.qml @@ -0,0 +1,70 @@ +import QtQuick +import QtQuick.Controls + +ScrollView { + id: root + + required property list 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; + } + } + } +} \ No newline at end of file diff --git a/app/qml/components/MMPhotoColorPicker.qml b/app/qml/components/MMPhotoColorPicker.qml deleted file mode 100644 index 3d5068ff5..000000000 --- a/app/qml/components/MMPhotoColorPicker.qml +++ /dev/null @@ -1,77 +0,0 @@ -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 7020d982b..44a4528de 100644 --- a/app/qml/form/components/MMFormPhotoSketchingPageDialog.qml +++ b/app/qml/form/components/MMFormPhotoSketchingPageDialog.qml @@ -200,16 +200,19 @@ Dialog { MMComponents.MMListSpacer { implicitHeight: __style.margin20 } - MMComponents.MMPhotoColorPicker{ - colors: ["#FFFFFF", "#12181F", "#5E9EE4", "#57B46F", "#FDCB2A", "#FF9C40", "#FF8F93"] + MMComponents.MMColorPicker{ + colors: [__style.polarColor, __style.nightColor, __style.oceanBlueColor, __style.meadowGreenColor, __style.informativeYellowColor, __style.fruitOrangeColor, __style.salmonPinkColor] showEraseButton: false - controller: root.controller Layout.alignment: Qt.AlignHCenter 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 + + onActiveColorChanged:{ + root.controller.activeColor = activeColor + } } } diff --git a/app/qml/map/MMSketchesDrawer.qml b/app/qml/map/MMSketchesDrawer.qml index e29944e41..163029244 100644 --- a/app/qml/map/MMSketchesDrawer.qml +++ b/app/qml/map/MMSketchesDrawer.qml @@ -54,18 +54,21 @@ MMComponents.MMDrawer { onClicked: root.sketchingController.undo() } - drawerContent: ColumnLayout { + drawerContent: MMComponents.MMColorPicker{ + colors: root.sketchingController?.availableColors() ?? null + showEraseButton: true + anchors { - left: parent.left - right: parent.right + left: parent.left + right: parent.right } - MMComponents.MMPhotoColorPicker{ - colors: root.sketchingController?.availableColors() ?? null - showEraseButton: true - controller: root.sketchingController + onActiveColorChanged: { + root.sketchingController.activeColor = activeColor + } - Layout.fillWidth: true + onEraserActiveChanged: { + root.sketchingController.eraserActive = eraserActive } } } From 74c459ab8d9352913950caa9b562e26297fa6b3f Mon Sep 17 00:00:00 2001 From: Gabriel Bolbotina Date: Mon, 19 Jan 2026 18:01:35 +0200 Subject: [PATCH 4/4] Implemented code findings --- app/mmstyle.h | 24 ++++++----- app/qml/components/MMColorButton.qml | 8 +--- app/qml/components/MMColorPicker.qml | 6 +-- .../MMFormPhotoSketchingPageDialog.qml | 2 +- app/qml/map/MMSketchesDrawer.qml | 41 +++++++++++-------- 5 files changed, 44 insertions(+), 37 deletions(-) diff --git a/app/mmstyle.h b/app/mmstyle.h index 981d4e870..6bd30636c 100644 --- a/app/mmstyle.h +++ b/app/mmstyle.h @@ -83,11 +83,13 @@ class MMStyle: public QObject 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 ) + Q_PROPERTY( QColor photoSketchingBlackColor READ photoSketchingBlackColor CONSTANT ) + Q_PROPERTY( QColor photoSketchingWhiteColor READ photoSketchingWhiteColor CONSTANT ) + Q_PROPERTY( QColor photoSketchingGreenColor READ photoSketchingGreenColor CONSTANT ) + Q_PROPERTY( QColor photoSketchingYellowColor READ photoSketchingYellowColor CONSTANT ) + Q_PROPERTY( QColor photoSketchingOrangeColor READ photoSketchingOrangeColor CONSTANT ) + Q_PROPERTY( QColor photoSketchingBlueColor READ photoSketchingBlueColor CONSTANT ) + Q_PROPERTY( QColor photoSketchingPinkColor READ photoSketchingPinkColor CONSTANT ) // Colors - others Q_PROPERTY( QColor shadowColor READ shadowColor CONSTANT ) @@ -389,11 +391,13 @@ 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 photoSketchingBlackColor() const {return QColor::fromString( "#12181F" );} + QColor photoSketchingWhiteColor() const {return QColor::fromString( "#FFFFFF" );} + QColor photoSketchingGreenColor() const {return QColor::fromString( "#57B46F" );} + QColor photoSketchingYellowColor() const {return QColor::fromString( "#FDCB2A" );} + QColor photoSketchingOrangeColor() const {return QColor::fromString( "#FF9C40" );} + QColor photoSketchingBlueColor() const {return QColor::fromString( "#5E9EE4" );} + QColor photoSketchingPinkColor() const {return QColor::fromString( "#FF8F93" );} QColor shadowColor() const {return QColor::fromString( "#66777777" );} diff --git a/app/qml/components/MMColorButton.qml b/app/qml/components/MMColorButton.qml index d0e714a7b..d3f5ca012 100644 --- a/app/qml/components/MMColorButton.qml +++ b/app/qml/components/MMColorButton.qml @@ -1,5 +1,4 @@ import QtQuick -import QtQuick.Controls MMRoundButton { id: root @@ -12,14 +11,11 @@ MMRoundButton { contentItem: Rectangle { color: root.chosenColor radius: width / 2 - anchors.fill: parent + anchors.fill: root } background: Rectangle { - anchors{ - verticalCenter: parent.verticalCenter - horizontalCenter: parent.horizontalCenter - } + anchors.centerIn: root radius: width / 2 width: __style.margin48 diff --git a/app/qml/components/MMColorPicker.qml b/app/qml/components/MMColorPicker.qml index a0cf9cdb3..9b2daf592 100644 --- a/app/qml/components/MMColorPicker.qml +++ b/app/qml/components/MMColorPicker.qml @@ -7,7 +7,7 @@ ScrollView { required property list colors required property bool showEraseButton - property color activeColor: "transparent" + property color activeColor property bool eraserActive: false height: scrollRow.height @@ -21,7 +21,7 @@ ScrollView { anchors.centerIn: parent Repeater { - model: colors + model: root.colors MMColorButton{ required property color modelData required property int index @@ -62,7 +62,7 @@ ScrollView { bgndColorHover: root.eraserActive ? __style.negativeColor : __style.grapeColor onClicked: { - root.activeColor = "transparent"; + root.activeColor = null; root.eraserActive = true; } } diff --git a/app/qml/form/components/MMFormPhotoSketchingPageDialog.qml b/app/qml/form/components/MMFormPhotoSketchingPageDialog.qml index 44a4528de..61bd555fd 100644 --- a/app/qml/form/components/MMFormPhotoSketchingPageDialog.qml +++ b/app/qml/form/components/MMFormPhotoSketchingPageDialog.qml @@ -201,7 +201,7 @@ Dialog { MMComponents.MMListSpacer { implicitHeight: __style.margin20 } MMComponents.MMColorPicker{ - colors: [__style.polarColor, __style.nightColor, __style.oceanBlueColor, __style.meadowGreenColor, __style.informativeYellowColor, __style.fruitOrangeColor, __style.salmonPinkColor] + colors: [__style.photoSketchingWhiteColor, __style.photoSketchingBlackColor, __style.photoSketchingBlueColor, __style.photoSketchingGreenColor, __style.photoSketchingYellowColor, __style.photoSketchingOrangeColor, __style.photoSketchingPinkColor] showEraseButton: false Layout.alignment: Qt.AlignHCenter diff --git a/app/qml/map/MMSketchesDrawer.qml b/app/qml/map/MMSketchesDrawer.qml index 163029244..c86a1af0c 100644 --- a/app/qml/map/MMSketchesDrawer.qml +++ b/app/qml/map/MMSketchesDrawer.qml @@ -51,24 +51,31 @@ MMComponents.MMDrawer { verticalCenter: parent.verticalCenter } - onClicked: root.sketchingController.undo() + onClicked: root.sketchingController?.undo() } - 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 + drawerContent: + ColumnLayout{ + + width: parent.width + spacing: __style.margin10 + + MMComponents.MMColorPicker{ + colors: root.sketchingController?.availableColors() ?? __style.photoSketchingWhiteColor + showEraseButton: true + + Layout.alignment: Qt.AlignHCenter + Layout.preferredHeight: scrollRow.height + Layout.preferredWidth: scrollRow.width + Layout.maximumWidth: parent.width - ( 2 * __style.pageMargins) + + onActiveColorChanged: { + root.sketchingController?.activeColor = activeColor + } + + onEraserActiveChanged: { + root.sketchingController?.eraserActive = eraserActive + } + } } - } }