add hover glow to all bar modules

This commit is contained in:
Damocles 2026-04-12 17:15:51 +02:00
parent 8d074af824
commit 43c2541ccd
3 changed files with 40 additions and 4 deletions

View file

@ -1,4 +1,5 @@
import QtQuick import QtQuick
import QtQuick.Effects
import Quickshell import Quickshell
import "." as M import "." as M
@ -6,6 +7,7 @@ Text {
id: root id: root
property string icon: "" property string icon: ""
property string tooltip: "" property string tooltip: ""
property bool _hovered: false
text: icon text: icon
color: M.Theme.base05 color: M.Theme.base05
@ -13,8 +15,18 @@ Text {
font.family: M.Theme.iconFontFamily font.family: M.Theme.iconFontFamily
verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter
layer.enabled: _hovered
layer.effect: MultiEffect {
shadowEnabled: true
shadowColor: M.Theme.base05
shadowBlur: 0.5
shadowVerticalOffset: 0
shadowHorizontalOffset: 0
}
HoverHandler { HoverHandler {
onHoveredChanged: { onHoveredChanged: {
root._hovered = hovered;
if (hovered && root.tooltip !== "") { if (hovered && root.tooltip !== "") {
M.FlyoutState.text = root.tooltip; M.FlyoutState.text = root.tooltip;
M.FlyoutState.itemX = root.mapToGlobal(root.width / 2, 0).x - (QsWindow.window?.screen?.x ?? 0); M.FlyoutState.itemX = root.mapToGlobal(root.width / 2, 0).x - (QsWindow.window?.screen?.x ?? 0);

View file

@ -1,4 +1,5 @@
import QtQuick import QtQuick
import QtQuick.Effects
import Quickshell import Quickshell
import "." as M import "." as M
@ -7,9 +8,14 @@ Text {
property string label: "" property string label: ""
property string tooltip: "" property string tooltip: ""
property string minText: "" property string minText: ""
property bool _hovered: false
text: label text: label
width: minText ? Math.max(implicitWidth, _minMetrics.width) : implicitWidth width: minText ? Math.max(implicitWidth, _minMetrics.width) : implicitWidth
color: M.Theme.base05
font.pixelSize: M.Theme.fontSize
font.family: M.Theme.fontFamily
verticalAlignment: Text.AlignVCenter
TextMetrics { TextMetrics {
id: _minMetrics id: _minMetrics
@ -17,13 +23,19 @@ Text {
font.pixelSize: root.font.pixelSize font.pixelSize: root.font.pixelSize
font.family: root.font.family font.family: root.font.family
} }
color: M.Theme.base05
font.pixelSize: M.Theme.fontSize layer.enabled: _hovered
font.family: M.Theme.fontFamily layer.effect: MultiEffect {
verticalAlignment: Text.AlignVCenter shadowEnabled: true
shadowColor: M.Theme.base05
shadowBlur: 0.5
shadowVerticalOffset: 0
shadowHorizontalOffset: 0
}
HoverHandler { HoverHandler {
onHoveredChanged: { onHoveredChanged: {
root._hovered = hovered;
if (hovered && root.tooltip !== "") { if (hovered && root.tooltip !== "") {
M.FlyoutState.text = root.tooltip; M.FlyoutState.text = root.tooltip;
M.FlyoutState.itemX = root.mapToGlobal(root.width / 2, 0).x - (QsWindow.window?.screen?.x ?? 0); M.FlyoutState.itemX = root.mapToGlobal(root.width / 2, 0).x - (QsWindow.window?.screen?.x ?? 0);

View file

@ -1,13 +1,25 @@
import QtQuick import QtQuick
import QtQuick.Effects
import Quickshell import Quickshell
import "." as M import "." as M
Row { Row {
id: root id: root
property string tooltip: "" property string tooltip: ""
property bool _hovered: false
layer.enabled: _hovered
layer.effect: MultiEffect {
shadowEnabled: true
shadowColor: M.Theme.base05
shadowBlur: 0.5
shadowVerticalOffset: 0
shadowHorizontalOffset: 0
}
HoverHandler { HoverHandler {
onHoveredChanged: { onHoveredChanged: {
root._hovered = hovered;
if (hovered && root.tooltip !== "") { if (hovered && root.tooltip !== "") {
M.FlyoutState.text = root.tooltip; M.FlyoutState.text = root.tooltip;
M.FlyoutState.itemX = root.mapToGlobal(root.width / 2, 0).x - (QsWindow.window?.screen?.x ?? 0); M.FlyoutState.itemX = root.mapToGlobal(root.width / 2, 0).x - (QsWindow.window?.screen?.x ?? 0);