qml button icon disappears when trying to change change icon on click

Viewed 300

Im am making a Frameless qml app.

For the maximize button i want to sitch between 2 icons depending on window state. Icons are named max_1.png & max_2.png. But when i change the icon on click, the icon just becomes transparent (but the button is still there and i can click it).

I also get this message in console when i click maximize button :-

qt.network.ssl: QSslSocket: cannot resolve EVP_PKEY_param_check
qt.network.ssl: QSslSocket: cannot resolve SSL_CTX_set_ciphersuites
qt.network.ssl: QSslSocket: cannot resolve SSL_set_psk_use_session_callback
qt.network.ssl: QSslSocket: cannot resolve SSL_SESSION_is_resumable
qt.network.ssl: QSslSocket: OpenSSL >= 1.1.1 is required; OpenSSL 1.1.0g  2 Nov 2017 was found instead

file:///C:/Program Files (x86)/Python38-32/lib/site-packages/PySide2/qml/QtQuick/Controls.2/RoundButton.qml: QML IconImage: Protocol "" is unknown

I havnt use any networking so not sure why those ssl messages are there. But what does that QML IconImage: Protocol "" is unknown means ?

Normal Icon initially :- Normal maximize icon

When clicked on maximize :- When clicked on maximize

Clicking again to bring window to normal size :- enter image description here

Here is the qml code for maximize button :-

        // MAXIMIZE BUTTON

        RoundButton {
            id: maxBtn
            x: 445
            width: 25
            height: 20
            opacity: 1
            anchors.right: parent.right
            anchors.top: parent.top
            smooth: false
            antialiasing: false
            leftPadding: 3
            topPadding: 3
            bottomPadding: 3
            rightPadding: 3
            padding: 0
            anchors.rightMargin: 36
            display: AbstractButton.IconOnly
            anchors.topMargin: 7
            icon.source: "images/max_1.png"
            icon.color: 'transparent'
            background: Rectangle {
                color: "transparent"
                radius: 5
            }

            onHoveredChanged: {
                maxBtn.hovered === true ? background.color='#0DCFEC' : background.color='transparent'
            }

            onPressedChanged: {
                maxBtn.pressed === true ? background.color='#0F82B2' : background.color='transparent'
            }
            onClicked: if (mainWindow.isMaximized === 1){
                           mainContainer.radius = 10
                           icon.source = 'images/max_1.png'
                           mainWindow.showNormal()
                           mainWindow.isMaximized = 0
                       }
                       else {
                           mainContainer.radius = 0
                           icon.source = 'images/max_2.png'
                           mainWindow.showMaximized()
                           mainWindow.isMaximized = 1
                       }
        }

Note: that isMaximized is a custom implemented variable to track window size.

Full Source Code :- Click Here to Download (25kb)

0 Answers
Related