forked from Shinonome/dots-hyprland
Runze
061bb2abeb
- Unified popup handling in ClockWidget, Resource, BatteryPopup, and WeatherBar using PanelWindow + LazyLoader for consistent positioning and compositor animations. - Replaced plain text with ColumnLayout and RowLayout where possible, adding MaterialSymbol icons for improved visual consistency with the overall desktop style. - Added Translation.tr() for bilingual (Chinese/English) support to avoid hardcoded strings. - Based on improvements from PR #1771 (mine) and PR #1773 (by @finjener), merged and refined into a more polished and practical solution.
134 lines
4.0 KiB
QML
134 lines
4.0 KiB
QML
import qs.modules.common
|
|
import qs.modules.common.widgets
|
|
import qs.services
|
|
import QtQuick
|
|
import QtQuick.Layouts
|
|
import Quickshell
|
|
|
|
MouseArea {
|
|
id: root
|
|
property bool borderless: Config.options.bar.borderless
|
|
readonly property var chargeState: Battery.chargeState
|
|
readonly property bool isCharging: Battery.isCharging
|
|
readonly property bool isPluggedIn: Battery.isPluggedIn
|
|
readonly property real percentage: Battery.percentage
|
|
readonly property bool isLow: percentage <= Config.options.battery.low / 100
|
|
readonly property color batteryLowBackground: Appearance.m3colors.darkmode ? Appearance.m3colors.m3error : Appearance.m3colors.m3errorContainer
|
|
readonly property color batteryLowOnBackground: Appearance.m3colors.darkmode ? Appearance.m3colors.m3errorContainer : Appearance.m3colors.m3error
|
|
|
|
implicitWidth: rowLayout.implicitWidth + rowLayout.spacing * 2
|
|
implicitHeight: 32
|
|
|
|
hoverEnabled: true
|
|
|
|
RowLayout {
|
|
id: rowLayout
|
|
|
|
spacing: 4
|
|
anchors.centerIn: parent
|
|
|
|
Rectangle {
|
|
implicitWidth: (isCharging ? (boltIconLoader?.item?.width ?? 0) : 0)
|
|
|
|
Behavior on implicitWidth {
|
|
animation: Appearance.animation.elementMove.numberAnimation.createObject(this)
|
|
}
|
|
}
|
|
|
|
StyledText {
|
|
Layout.alignment: Qt.AlignVCenter
|
|
color: Appearance.colors.colOnLayer1
|
|
text: `${Math.round(percentage * 100)}`
|
|
}
|
|
|
|
CircularProgress {
|
|
enableAnimation: false
|
|
Layout.alignment: Qt.AlignVCenter
|
|
lineWidth: 2
|
|
value: percentage
|
|
implicitSize: 26
|
|
colSecondary: (isLow && !isCharging) ? batteryLowBackground : Appearance.colors.colSecondaryContainer
|
|
colPrimary: (isLow && !isCharging) ? batteryLowOnBackground : Appearance.m3colors.m3onSecondaryContainer
|
|
fill: (isLow && !isCharging)
|
|
|
|
MaterialSymbol {
|
|
anchors.centerIn: parent
|
|
fill: 1
|
|
text: "battery_full"
|
|
iconSize: Appearance.font.pixelSize.normal
|
|
color: (isLow && !isCharging) ? batteryLowOnBackground : Appearance.m3colors.m3onSecondaryContainer
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
Loader {
|
|
id: boltIconLoader
|
|
active: true
|
|
anchors.left: rowLayout.left
|
|
anchors.verticalCenter: rowLayout.verticalCenter
|
|
|
|
Connections {
|
|
target: root
|
|
function onIsChargingChanged() {
|
|
if (isCharging) boltIconLoader.active = true
|
|
}
|
|
}
|
|
|
|
sourceComponent: MaterialSymbol {
|
|
id: boltIcon
|
|
|
|
text: "bolt"
|
|
iconSize: Appearance.font.pixelSize.large
|
|
color: Appearance.m3colors.m3onSecondaryContainer
|
|
visible: opacity > 0 // Only show when charging
|
|
opacity: isCharging ? 1 : 0 // Keep opacity for visibility
|
|
onVisibleChanged: {
|
|
if (!visible) boltIconLoader.active = false
|
|
}
|
|
|
|
Behavior on opacity {
|
|
animation: Appearance.animation.elementMove.numberAnimation.createObject(this)
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
LazyLoader {
|
|
id: popupLoader
|
|
active: root.containsMouse
|
|
|
|
component: PanelWindow {
|
|
id: popupWindow
|
|
visible: true
|
|
color: "transparent"
|
|
exclusiveZone: 0
|
|
|
|
anchors.top: true
|
|
anchors.left: true
|
|
|
|
implicitWidth: batteryPopup.implicitWidth
|
|
implicitHeight: batteryPopup.implicitHeight
|
|
|
|
margins {
|
|
left: root.mapToGlobal(Qt.point(
|
|
(root.width - batteryPopup.implicitWidth) / 2,
|
|
0
|
|
)).x
|
|
top: root.mapToGlobal(Qt.point(0, root.height)).y - 30
|
|
}
|
|
|
|
mask: Region {
|
|
item: batteryPopup
|
|
}
|
|
|
|
BatteryPopup {
|
|
id: batteryPopup
|
|
anchors.centerIn: parent
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|