nymea-app-energy-overlay/common/ui/components/OverlayTabButton.qml

// SPDX-License-Identifier: GPL-3.0-or-later

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
*
* Copyright (C) 2013 - 2024, nymea GmbH
* Copyright (C) 2024 - 2025, chargebyte austria GmbH
*
* This file is part of nymea-app-energy-overlay.
*
* nymea-app-energy-overlay is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* nymea-app-energy-overlay is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License
* for more details.
*
* You should have received a copy of the GNU General Public License
* along with nymea-app-energy-overlay. If not, see <https://www.gnu.org/licenses/>.
*
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

import QtQuick
import QtQuick.Controls

import Nymea as N
import "qrc:/ui/components"

TabButton {
    id: control

    property string iconSource: ""
    property bool activeTab: false

    readonly property int animationDuration: 200

    onActiveTabChanged: {
        if (activeTab) {
            print("Active tab:", text)
        }
    }

    contentItem: Item {
        id: innerItem
        anchors.fill: parent
        anchors.leftMargin: N.Style.margins
        anchors.rightMargin: N.Style.margins

        property color color: N.Style.foregroundColor

        Row {
            anchors.centerIn: parent
            height: parent.height

            Item {
                width: N.Style.iconSize
                height: width
                anchors.verticalCenter: parent.verticalCenter
                visible: control.iconSource.length > 0

                ColorIcon {
                    anchors.fill: parent
                    name: control.iconSource
                    color: innerItem.color
                }
            }

            Item {
                id: textContainer
                height: control.height
                width: textLabel.implicitWidth + N.Style.margins
                anchors.verticalCenter: parent.verticalCenter

                Label {
                    id: textLabel
                    anchors.centerIn: parent
                    text: control.text
                    wrapMode: Text.WordWrap
                    color: innerItem.color
                    elide: Text.ElideRight
                    verticalAlignment: Text.AlignVCenter
                    //Component.onCompleted: console.warn("-----", control.text, implicitWidth)
                }
            }
        }
    }

    states: [
        State {
            name: "active"
            when: control.activeTab == true

            PropertyChanges {
                target: textLabel
                opacity: 1.0
            }

            PropertyChanges {
                target: textContainer
                width: textLabel.implicitWidth + N.Style.margins
            }

            PropertyChanges {
                target: innerItem
                color: N.Style.accentColor
            }
        },
        State {
            name: "inactive"
            when: control.activeTab == false

            PropertyChanges {
                target: textLabel
                opacity: 0.0
            }

            PropertyChanges {
                target: textContainer
                width: 0
            }

            PropertyChanges {
                target: innerItem
                color: N.Style.foregroundColor
            }
        }
    ]

    transitions: [
        Transition {
            from: "active"
            to: "inactive"

            ParallelAnimation {
                NumberAnimation {
                    properties: "opacity,width";
                    duration: animationDuration;
                    easing.type: Easing.OutQuad
                }
                ColorAnimation {
                    duration: animationDuration
                    easing.type: Easing.OutQuad
                }
            }
        },
        Transition {
            from: "inactive"
            to: "active"

            ParallelAnimation {
                NumberAnimation {
                    properties: "opacity,width";
                    duration: animationDuration;
                    easing.type: Easing.InQuad
                }
                ColorAnimation {
                    duration: animationDuration
                    easing.type: Easing.InQuad
                }
            }
        }
    ]
}