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

124 lines
3.4 KiB
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 QtQuick.Layouts
import Nymea
import "qrc:/ui/components"
Item {
id: root
property int animationSpeed: 250
property int currentIndex: 0
property real expandedWidth: 0
property real colapsedWidth: 0
property bool animationEnabled: false
onWidthChanged: updateSizes()
onCurrentIndexChanged: updateSizes()
Component.onCompleted: updateSizes()
function updateSizes() {
root.expandedWidth = mainMenuRepeater.itemAt(currentIndex).expandedWidth
root.colapsedWidth = (menuRow.width - root.expandedWidth) / 2
}
ListModel {
id: mainMenuModel
ListElement {
title: qsTr("Charge point")
iconSource: "/images/flash.svg"
iconSourceActive: "/images/flash-filled.svg"
}
ListElement {
title: qsTr("Energy overview")
iconSource: "/images/troubleshoot.svg"
iconSourceActive: "/images/troubleshoot.svg"
}
ListElement {
title: qsTr("Scheduler plan")
iconSource: "/images/spotmarket.svg"
iconSourceActive: "/images/spotmarket-filled.svg"
}
}
Rectangle {
id: backgroundRectangle
anchors.fill: parent
radius: height / 2
color: Style.darkGray
}
Row {
id: menuRow
anchors.fill: parent
anchors.margins: Style.smallMargins
spacing: 0
Repeater {
id: mainMenuRepeater
model: mainMenuModel
delegate: OverlayMainMenuButton {
id: tabButton
width: activeTab ? root.expandedWidth : root.colapsedWidth
height: parent.height
title: model.title
iconSource: model.iconSource
iconSourceActive: model.iconSourceActive
animationSpeed: root.animationSpeed
activeTab: root.currentIndex === index
Behavior on width {
enabled: root.animationEnabled
NumberAnimation {
duration: animationSpeed
easing.type: Easing.Linear
}
}
MouseArea {
anchors.fill: parent
onClicked: {
root.currentIndex = index
}
}
}
}
}
}