diff --git a/assets/images/battery-dark.png b/assets/images/battery-dark.png new file mode 100644 index 0000000..f7c4ff9 Binary files /dev/null and b/assets/images/battery-dark.png differ diff --git a/assets/images/battery.png b/assets/images/battery.png new file mode 100644 index 0000000..4d07775 Binary files /dev/null and b/assets/images/battery.png differ diff --git a/components/BatteryIndicator.qml b/components/BatteryIndicator.qml new file mode 100644 index 0000000..afdb4fa --- /dev/null +++ b/components/BatteryIndicator.qml @@ -0,0 +1,32 @@ +import QtQuick 2.12 +import QtGraphicalEffects 1.12 +import QtGraphicalEffects 1.0 +import QtQuick.Layouts 1.15 +Item { + width: 26 + height: 14 + + property var lightStyle : false + + property var percent: { + api.device ? api.device.batteryPercent : 0 + } + + Image { + id: iconImage + source: lightStyle ? "../assets/images/battery.png" : "../assets/images/battery-dark.png" + anchors.verticalCenter: parent.verticalCenter + anchors.horizontalCenter: parent.horizontalCenter + } + + Rectangle { + anchors.leftMargin: 2 + anchors.topMargin: 3 + anchors.top: parent.top + anchors.left: parent.left + color: lightStyle ? "#ffffff" : "#000000" + radius: 2 + width: Math.max(percent * 17.6, 2) + height: 8 + } +} diff --git a/components/HeaderHome.qml b/components/HeaderHome.qml index 0381330..105ee55 100644 --- a/components/HeaderHome.qml +++ b/components/HeaderHome.qml @@ -19,6 +19,14 @@ Rectangle { property var light: false + property var showStatusInfo : { + return layoutScreen.height >= 480 + } + + property var showBattery : { + return showStatusInfo && (api.device != null && api.device.batteryPercent) + } + id: home_header color: "transparent" width: parent.width @@ -86,17 +94,30 @@ Rectangle { KeyNavigation.down: mainFocus } + + BatteryIndicator { + id: battery_indicator + anchors.right: parent.right + anchors.top: parent.top + anchors.topMargin: 20 + anchors.rightMargin: 32 + opacity: 0.5 + lightStyle: light + visible: showBattery + } + Text { id: header_time text: Qt.formatTime(new Date(), "hh:mm") - anchors.right: parent.right + anchors.right: parent.right anchors.top: parent.top anchors.topMargin: 16 - anchors.rightMargin: 32 + anchors.rightMargin: showBattery ? 70 : 32 color: light ? "#60ffffff" : "#60000000" font.pixelSize: 18 font.letterSpacing: -0.3 - font.bold: true + font.bold: true + visible: showStatusInfo } - + } \ No newline at end of file diff --git a/components/SystemsListLarge.qml b/components/SystemsListLarge.qml index 909db15..489b4df 100644 --- a/components/SystemsListLarge.qml +++ b/components/SystemsListLarge.qml @@ -74,8 +74,8 @@ ListView { Rectangle { property int bgIndex: -1 id: systemsBackground - width: 640 - height: 480 + width: layoutScreen.width + height: layoutScreen.height anchors.top: parent.top anchors.left: parent.left anchors.topMargin: -55 diff --git a/theme.qml b/theme.qml index cd84011..31d9c39 100644 --- a/theme.qml +++ b/theme.qml @@ -214,7 +214,7 @@ FocusScope { property var layoutScreen : { "width": 640, - "height": 480, + "height": parent.height, "background": theme.background, } @@ -235,7 +235,7 @@ FocusScope { property var layoutContainer : { "width": layoutScreen.width, - "height": layoutScreen.height - layoutHeader.height - layoutHeader.height, + "height": parent.height - layoutHeader.height - layoutHeader.height, "background": "transparent", }