How to implement drop down color picker in Qml

Question

I see that QML provides color dialogs out of which i can pick a color , on click of a button i can launch this color picker dialogs what if dont want the color picker dialog where on click of a button i want to show the same color picker dialog but as a drow down, something like this.

if i have to add the dialog in an overlay object? can you give me an example as to how to add it?

i have tried this and it still opens as a seperate dialog

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Dialogs 1.3
//import Qt.labs.platform 1.1
import QtQuick.Controls 2.15


Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")
    Rectangle{
        id: rect1
        height: 50
        width: 100
        color: "red"
        anchors.centerIn: parent

    }
    Button{
        id:b1
        width: 50
        height: 50
        anchors.left: rect1.right
        anchors.verticalCenter: parent.verticalCenter
        text: "V"
        onClicked: {
            console.log("launch color picker as an overlay")
            popup.open()
            colorPicker.visible = true
        }
        Popup{
            id: popup
            parent: Overlay.overlay
            x: Math.round((parent.width  - width) / 2) + 25
            y: Math.round((parent.height - height) / 2) + 50
            height: 200
            width: 150
            ColorDialog{
                id:colorPicker
            }
        }
    }

}

Answer 1

Overlay is for popups:

A window overlay for popups.
Overlay provides a layer for popups, ensuring that popups are displayed above other content...

As @JarMan rightly pointed out, if you use ColorDialog, it will always be shown as a separate dialog.

If you want the color picker to be shown in the same window as a drop down, then you have to implement the color picker component and control its visibility based on user actions.
You can implement your own version of color picker component or you could reuse any existing component.