Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 17 additions & 0 deletions app/mmstyle.h
Original file line number Diff line number Diff line change
Expand Up @@ -82,6 +82,15 @@ 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 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 )
Q_PROPERTY( QColor snappingColor READ snappingColor CONSTANT )
Expand Down Expand Up @@ -382,6 +391,14 @@ class MMStyle: public QObject
QColor informativeColor() const {return QColor::fromString( "#BEDAF0" );}
QColor snappingColor() const {return QColor::fromString( "#BD74FF" );}

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" );}

QUrl splitGeometryIcon() const {return QUrl( "qrc:/SplitGeometry.svg" );}
Expand Down
2 changes: 2 additions & 0 deletions app/qml/CMakeLists.txt
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
30 changes: 30 additions & 0 deletions app/qml/components/MMColorButton.qml
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
import QtQuick
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Missing licence header

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Also in other files


MMRoundButton {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is there any reason to base this from MMRoundButton? It seems like these two have nothing in common. You are rewriting the whole component here.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I guess I was the one creating the initial Component and it made more sense in the previous version to modify MMRoundButton instead. As we are creating a new component here yeah it's good point to rebase the component.

id: root

required property color chosenColor
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If the button is chosen or not is defined by the isSelected prop, right? In that case this is just a color, no matter if the button is selected or not.

Suggested change
required property color chosenColor
required property color buttonColor

property bool isSelected: false

anchors.verticalCenter: parent.verticalCenter

contentItem: Rectangle {
color: root.chosenColor
radius: width / 2
anchors.fill: root
}

background: Rectangle {
anchors.centerIn: root

radius: width / 2
width: __style.margin48
height: __style.margin48

color: root.isSelected ? __style.transparentColor : __style.lightGreenColor
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The background color is lightGreen if the button is not selected? 🤔

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes it creates this slightly visible halo around the button. Important for white and similar colors, which can blend with background.

border{
width: 2
color: root.isSelected ? __style.grassColor : __style.transparentColor
}
}
}
70 changes: 70 additions & 0 deletions app/qml/components/MMColorPicker.qml
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
import QtQuick
import QtQuick.Controls

ScrollView {
id: root

required property list<color> colors
required property bool showEraseButton

property color activeColor
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: root.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 = null;
root.eraserActive = true;
}
}
}
}
49 changes: 6 additions & 43 deletions app/qml/form/components/MMFormPhotoSketchingPageDialog.qml
Original file line number Diff line number Diff line change
Expand Up @@ -200,55 +200,18 @@ Dialog {

MMComponents.MMListSpacer { implicitHeight: __style.margin20 }

ScrollView {
MMComponents.MMColorPicker{
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The width is never defined

colors: [__style.photoSketchingWhiteColor, __style.photoSketchingBlackColor, __style.photoSketchingBlueColor, __style.photoSketchingGreenColor, __style.photoSketchingYellowColor, __style.photoSketchingOrangeColor, __style.photoSketchingPinkColor]
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
}
}
}
Expand Down
95 changes: 18 additions & 77 deletions app/qml/map/MMSketchesDrawer.qml
Original file line number Diff line number Diff line change
Expand Up @@ -51,90 +51,31 @@ MMComponents.MMDrawer {
verticalCenter: parent.verticalCenter
}

onClicked: root.sketchingController.undo()
onClicked: root.sketchingController?.undo()
}

drawerContent: Column {
id: mainColumn
drawerContent:
ColumnLayout{

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
}
}
}
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
Comment on lines +68 to +69
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

scrollRow is a nested id inside MMColorPicker. It should not be used outside of its file. Unless I am missing something, the width of the color picker should be set from outside, just like you set maximumWidth.

Layout.maximumWidth: parent.width - ( 2 * __style.pageMargins)

onActiveColorChanged: {
root.sketchingController?.setActiveColor(activeColor)
}

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
}
onEraserActiveChanged: {
root.sketchingController?.setEraserActive(eraserActive)
}
}
}
}
}
Loading