import QtQuick 2.10
import QtQuick.Controls 2.3
import QtQuick.Window 2.10
import QtGraphicalEffects 1.0
import QtQuick.Layouts 1.3

ApplicationWindow {
    id: applicationWindow
    visible: true
    width: 300
    height: 40
    title: qsTr("ColorOverlay Test")

    Rectangle {
        anchors {
            left: parent.left
            right: parent.right
            top: parent.top
        }
        height: 40
        visible: true
        color: "#696969"

        Rectangle {
            anchors {
                left: parent.left
                right: parent.right
                bottom: parent.bottom
            }
            height: 1
            color: "#808080"
            z: 1
        }

        RowLayout {
            anchors.fill: parent
            spacing: 4

            Item {
                id: flexibleSpace
                Layout.fillWidth: true
            }

            ToolButton {
                id: rightPaneToggle
                checkable: true
                Layout.preferredWidth: parent.height
                Layout.fillHeight: true
                Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
                Layout.rightMargin: 10
                padding: 0
                contentItem: Image {
                    source: "qrc:///Pane-Right.png"
                    sourceSize: Qt.size(parent.width, parent.height)
                    fillMode: Image.PreserveAspectFit
                }
                ColorOverlay {
                    anchors.fill: rightPaneToggle.contentItem
                    color: "#444"
                    source: rightPaneToggle.contentItem
                    cached: true
                    opacity: rightPaneToggle.checked ? 0 : 1
                }
            }

            ToolButton {
                id: rightPaneToggle2
                checkable: true
                Layout.preferredWidth: parent.height
                Layout.fillHeight: true
                Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter | Qt.AlignRight
                Layout.rightMargin: 10
                padding: 0
                contentItem: Image {
                    id: rptImage
                    source: "qrc:///Pane-Right.png"
                    sourceSize: Qt.size(parent.width, parent.height)
                    fillMode: Image.PreserveAspectFit
                }
                ColorOverlay {
                    anchors.fill: rptImage
                    color: "#444"
                    source: rptImage
                    cached: true
                    opacity: rightPaneToggle2.checked ? 0 : 1
                }
            }
        }
    }
}