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 926d9f1e9..df8b7844d 100644 --- 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 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/form/components/MMFormPhotoSketchingPageDialog.qml b/app/qml/form/components/MMFormPhotoSketchingPageDialog.qml index 7f699a1d8..44a4528de 100644 --- 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 index 1b97a3c6b..163029244 100644 --- 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 } } }