QmlDesigner: Fix ColorEditor opening position

Fix ColorEditor being cut off at the top, when there isn't enough space
to fit.

Task-number: QDS-5076
Change-Id: If9dc832b89d64c60e11a3458e1d90e5d7e2f0450
Reviewed-by: Miikka Heikkinen <miikka.heikkinen@qt.io>
Reviewed-by: Thomas Hartmann <thomas.hartmann@qt.io>

2 files changed, 42 insertions, 20 deletions

diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/ColorEditor.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/ColorEditor.qml
index cd956dd99e..d07812f02f 100644
--- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/ColorEditor.qml
+++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/ColorEditor.qml
@@ -303,38 +303,59 @@ SecondColumnLayout {
                 }
             }
 
+            // This connection is meant to update the popups y-position and the main scrollviews
+            // height as soon as the height of the color picker changes. Initially the height of the
+            // color picker is 0 until its completion is done.
+            Connections {
+                target: colorPicker
+                function onHeightChanged() {
+                    cePopup.setPopupY()
+                    cePopup.setMainScrollViewHeight()
+                }
+            }
+
             onOpened: {
+                cePopup.setPopupY()
+                cePopup.setMainScrollViewHeight()
+            }
+            onYChanged: cePopup.setMainScrollViewHeight()
+            onHeightChanged: cePopup.setMainScrollViewHeight()
+
+            function setMainScrollViewHeight() {
                 if (Controller.mainScrollView === null)
                     return
 
                 var mapped = preview.mapToItem(Controller.mainScrollView.contentItem, cePopup.x, cePopup.y)
-                Controller.mainScrollView.temporaryHeight = mapped.y + cePopup.height + 20
+                Controller.mainScrollView.temporaryHeight = mapped.y + cePopup.height
+                        + StudioTheme.Values.colorEditorPopupMargin
             }
 
-            onHeightChanged: {
+            function setPopupY() {
                 if (Controller.mainScrollView === null)
                     return
 
-                var mapped = preview.mapToItem(Controller.mainScrollView.contentItem, cePopup.x, cePopup.y)
-                Controller.mainScrollView.temporaryHeight = mapped.y + cePopup.height + 20
+                var tmp = preview.mapToItem(Controller.mainScrollView.contentItem, preview.x, preview.y)
+                cePopup.y = Math.max(-tmp.y + StudioTheme.Values.colorEditorPopupMargin,
+                                     cePopup.__defaultY)
             }
 
-            onClosed: {
-                Controller.mainScrollView.temporaryHeight = 0
-            }
+            onClosed: Controller.mainScrollView.temporaryHeight = 0
+
+            property real __defaultX: - StudioTheme.Values.colorEditorPopupWidth * 0.5
+                                      + preview.width * 0.5
+            property real __defaultY: - StudioTheme.Values.colorEditorPopupPadding
+                                      - (StudioTheme.Values.colorEditorPopupSpacing * 2)
+                                      - StudioTheme.Values.defaultControlHeight
+                                      - StudioTheme.Values.colorEditorPopupLineHeight
+                                      - colorPicker.height * 0.5
+                                      + preview.height * 0.5
 
-            x: - StudioTheme.Values.colorEditorPopupWidth * 0.5
-               + preview.width * 0.5
-            y: - StudioTheme.Values.colorEditorPopupMargin
-               - (StudioTheme.Values.colorEditorPopupSpacing * 2)
-               - StudioTheme.Values.defaultControlHeight
-               - StudioTheme.Values.colorEditorPopupLineHeight
-               - colorPicker.height * 0.5
-               + preview.height * 0.5
+            x: cePopup.__defaultX
+            y: cePopup.__defaultY
 
             width: StudioTheme.Values.colorEditorPopupWidth
             height: colorColumn.height + sectionColumn.height
-                    + StudioTheme.Values.colorEditorPopupMargin + 2 // TODO magic number
+                    + StudioTheme.Values.colorEditorPopupPadding + 2 // TODO magic number
 
             padding: StudioTheme.Values.border
             margins: -1 // If not defined margin will be -1
@@ -353,7 +374,7 @@ SecondColumnLayout {
                     anchors.top: parent.top
                     anchors.left: parent.left
                     anchors.right: parent.right
-                    anchors.margins: StudioTheme.Values.colorEditorPopupMargin
+                    anchors.margins: StudioTheme.Values.colorEditorPopupPadding
                     spacing: StudioTheme.Values.colorEditorPopupSpacing
 
                     RowLayout {
@@ -714,7 +735,7 @@ SecondColumnLayout {
 
                 Column {
                     id: sectionColumn
-                    anchors.topMargin: StudioTheme.Values.colorEditorPopupMargin
+                    anchors.topMargin: StudioTheme.Values.colorEditorPopupPadding
                     anchors.top: colorColumn.bottom
                     anchors.left: parent.left
                     anchors.right: parent.right
diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioTheme/Values.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioTheme/Values.qml
index 09764f7baf..c4084ca435 100644
--- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioTheme/Values.qml
+++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioTheme/Values.qml
@@ -179,9 +179,10 @@ QtObject {
     // Color Editor Popup
     property real colorEditorPopupWidth: 4 * values.colorEditorPopupSpinBoxWidth
                                          + 3 * values.controlGap
-                                         + 2 * values.colorEditorPopupMargin
+                                         + 2 * values.colorEditorPopupPadding
     property real colorEditorPopupHeight: 800
-    property real colorEditorPopupMargin: 10
+    property real colorEditorPopupPadding: 10
+    property real colorEditorPopupMargin: 20
 
     property real colorEditorPopupSpacing: 10
     property real colorEditorPopupLineHeight: 60