-
Notifications
You must be signed in to change notification settings - Fork 75
Fixed color selection for map sketching #4274
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: master
Are you sure you want to change the base?
Changes from all commits
7b8fd73
210b517
a288041
74c459a
95b19f6
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change | ||||
|---|---|---|---|---|---|---|
| @@ -0,0 +1,30 @@ | ||||||
| import QtQuick | ||||||
|
|
||||||
| MMRoundButton { | ||||||
|
Collaborator
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Is there any reason to base this from
Contributor
There was a problem hiding this comment. Choose a reason for hiding this commentThe 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 |
||||||
| id: root | ||||||
|
|
||||||
| required property color chosenColor | ||||||
|
Collaborator
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. If the button is chosen or not is defined by the
Suggested change
|
||||||
| 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 | ||||||
|
Collaborator
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. The
Contributor
There was a problem hiding this comment. Choose a reason for hiding this commentThe 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 | ||||||
| } | ||||||
| } | ||||||
| } | ||||||
| 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; | ||
| } | ||
| } | ||
| } | ||
| } |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -200,55 +200,18 @@ Dialog { | |
|
|
||
| MMComponents.MMListSpacer { implicitHeight: __style.margin20 } | ||
|
|
||
| ScrollView { | ||
| MMComponents.MMColorPicker{ | ||
|
Collaborator
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. The |
||
| 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 | ||
gabriel-bolbotina marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| } | ||
| } | ||
| } | ||
|
|
||
gabriel-bolbotina marked this conversation as resolved.
Show resolved
Hide resolved
|
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -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
Collaborator
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
|
||
| 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) | ||
| } | ||
| } | ||
| } | ||
| } | ||
| } | ||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Missing licence header
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Also in other files