Tooltips on all NIconButtons

This commit is contained in:
quadbyte 2025-08-15 21:05:47 -04:00
parent c075b89dd2
commit 9990a88e90
19 changed files with 63 additions and 24 deletions

View file

@ -283,7 +283,9 @@ NLoader {
radius: Style.radiusMedium * scaling radius: Style.radiusMedium * scaling
color: Colors.mSurface color: Colors.mSurface
border.color: searchInput.activeFocus ? Colors.mPrimary : Colors.mOutline border.color: searchInput.activeFocus ? Colors.mPrimary : Colors.mOutline
border.width: Math.max(1, searchInput.activeFocus ? Style.borderMedium * scaling : Style.borderThin * scaling) border.width: Math.max(
1,
searchInput.activeFocus ? Style.borderMedium * scaling : Style.borderThin * scaling)
Row { Row {
anchors.fill: parent anchors.fill: parent
@ -372,7 +374,8 @@ NLoader {
color: (appCardArea.containsMouse || isSelected) ? Qt.darker(Colors.mPrimary, color: (appCardArea.containsMouse || isSelected) ? Qt.darker(Colors.mPrimary,
1.1) : Colors.mSurface 1.1) : Colors.mSurface
border.color: (appCardArea.containsMouse || isSelected) ? Colors.mPrimary : "transparent" border.color: (appCardArea.containsMouse || isSelected) ? Colors.mPrimary : "transparent"
border.width: Math.max(1, (appCardArea.containsMouse || isSelected) ? Style.borderMedium * scaling : 0) border.width: Math.max(1, (appCardArea.containsMouse
|| isSelected) ? Style.borderMedium * scaling : 0)
Behavior on color { Behavior on color {
ColorAnimation { ColorAnimation {
@ -414,9 +417,9 @@ NLoader {
// Clipboard image display // Clipboard image display
Image { Image {
id: clipboardImage id: clipboardImage
anchors.fill: parent anchors.fill: parent
anchors.margins: Style.marginTiny * scaling anchors.margins: Style.marginTiny * scaling
visible: modelData.type === 'image' visible: modelData.type === 'image'
source: modelData.data || "" source: modelData.data || ""
fillMode: Image.PreserveAspectCrop fillMode: Image.PreserveAspectCrop
asynchronous: true asynchronous: true

View file

@ -45,7 +45,7 @@ Item {
Behavior on height { Behavior on height {
SmoothedAnimation { SmoothedAnimation {
duration: Style.animationFast duration: Style.animationFast
} }
} }
} }

View file

@ -16,7 +16,7 @@ Row {
// Timer to hide full title after window switch // Timer to hide full title after window switch
Timer { Timer {
id: fullTitleTimer id: fullTitleTimer
interval: Style.animationSlow * 4 // Show full title for 2 seconds interval: Style.animationSlow * 4 // Show full title for 2 seconds
repeat: false repeat: false
onTriggered: { onTriggered: {
showingFullTitle = false showingFullTitle = false
@ -59,7 +59,7 @@ Row {
Behavior on width { Behavior on width {
NumberAnimation { NumberAnimation {
duration: Style.animationNormal duration: Style.animationNormal
easing.type: Easing.OutCubic easing.type: Easing.OutCubic
} }
} }

View file

@ -130,7 +130,7 @@ Variants {
NIconButton { NIconButton {
id: demoPanelToggle id: demoPanelToggle
icon: "experiment" icon: "experiment"
tooltipText: "Open demo panel" tooltipText: "Open Demo Panel"
sizeMultiplier: 0.8 sizeMultiplier: 0.8
showBorder: false showBorder: false
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
@ -142,7 +142,7 @@ Variants {
NIconButton { NIconButton {
id: sidePanelToggle id: sidePanelToggle
icon: "widgets" icon: "widgets"
tooltipText: "Open side panel" tooltipText: "Open Side Panel"
sizeMultiplier: 0.8 sizeMultiplier: 0.8
showBorder: false showBorder: false
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter

View file

@ -49,7 +49,7 @@ Item {
icon: getIcon() icon: getIcon()
iconCircleColor: Colors.mPrimary iconCircleColor: Colors.mPrimary
collapsedIconColor: Colors.mOnSurface collapsedIconColor: Colors.mOnSurface
autoHide: true autoHide: false // Important to be false so we can hover as long as we want
text: Math.round(BrightnessService.brightness) + "%" text: Math.round(BrightnessService.brightness) + "%"
tooltipText: "Brightness: " + Math.round( tooltipText: "Brightness: " + Math.round(
BrightnessService.brightness) + "%\nMethod: " + BrightnessService.currentMethod BrightnessService.brightness) + "%\nMethod: " + BrightnessService.currentMethod

View file

@ -13,7 +13,7 @@ PopupWindow {
property real anchorX property real anchorX
property real anchorY property real anchorY
implicitWidth: Style.baseWidgetSize * 5.625 * scaling implicitWidth: Style.baseWidgetSize * 5.625 * scaling
implicitHeight: Math.max(60 * scaling, listView.contentHeight + (Style.marginMedium * 2 * scaling)) implicitHeight: Math.max(60 * scaling, listView.contentHeight + (Style.marginMedium * 2 * scaling))
visible: false visible: false
color: "transparent" color: "transparent"

View file

@ -31,16 +31,26 @@ Item {
firstVolumeReceived = true firstVolumeReceived = true
} else { } else {
pill.show() pill.show()
externalHideTimer.restart()
} }
} }
} }
Timer {
id: externalHideTimer
running: false
interval: 1500
onTriggered: {
pill.hide()
}
}
NPill { NPill {
id: pill id: pill
icon: getIcon() icon: getIcon()
iconCircleColor: Colors.mPrimary iconCircleColor: Colors.mPrimary
collapsedIconColor: Colors.mOnSurface collapsedIconColor: Colors.mOnSurface
autoHide: true autoHide: false // Important to be false so we can hover as long as we want
text: Math.floor(Audio.volume * 100) + "%" text: Math.floor(Audio.volume * 100) + "%"
tooltipText: "Volume: " + Math.round( tooltipText: "Volume: " + Math.round(
Audio.volume * 100) + "%\nLeft click for advanced settings.\nScroll up/down to change volume." Audio.volume * 100) + "%\nLeft click for advanced settings.\nScroll up/down to change volume."

View file

@ -164,6 +164,7 @@ NLoader {
NIconButton { NIconButton {
icon: "refresh" icon: "refresh"
tooltipText: "Refresh Networks"
sizeMultiplier: 0.8 sizeMultiplier: 0.8
enabled: Settings.data.network.wifiEnabled && !network.isLoading enabled: Settings.data.network.wifiEnabled && !network.isLoading
onClicked: { onClicked: {
@ -173,6 +174,7 @@ NLoader {
NIconButton { NIconButton {
icon: "close" icon: "close"
tooltipText: "Close"
sizeMultiplier: 0.8 sizeMultiplier: 0.8
onClicked: { onClicked: {
wifiPanel.hide() wifiPanel.hide()

View file

@ -120,6 +120,7 @@ NLoader {
NIconButton { NIconButton {
icon: "chevron_left" icon: "chevron_left"
tooltipText: "Previous Month"
onClicked: { onClicked: {
let newDate = new Date(grid.year, grid.month - 1, 1) let newDate = new Date(grid.year, grid.month - 1, 1)
grid.year = newDate.getFullYear() grid.year = newDate.getFullYear()
@ -138,6 +139,7 @@ NLoader {
NIconButton { NIconButton {
icon: "chevron_right" icon: "chevron_right"
tooltipText: "Next Month"
onClicked: { onClicked: {
let newDate = new Date(grid.year, grid.month + 1, 1) let newDate = new Date(grid.year, grid.month + 1, 1)
grid.year = newDate.getFullYear() grid.year = newDate.getFullYear()

View file

@ -154,6 +154,7 @@ NLoader {
} }
NIconButton { NIconButton {
icon: "refresh" icon: "refresh"
tooltipText: "Reset Scaling"
fontPointSize: Style.fontSizeLarge * scaling fontPointSize: Style.fontSizeLarge * scaling
onClicked: { onClicked: {
Scaling.overrideEnabled = false Scaling.overrideEnabled = false
@ -178,6 +179,7 @@ NLoader {
NIconButton { NIconButton {
id: myIconButton id: myIconButton
icon: "celebration" icon: "celebration"
tooltipText: "A nice tooltip"
fontPointSize: Style.fontSizeLarge * scaling fontPointSize: Style.fontSizeLarge * scaling
} }
@ -318,6 +320,7 @@ NLoader {
spacing: Style.marginSmall * scaling spacing: Style.marginSmall * scaling
NIconButton { NIconButton {
icon: "brightness_low" icon: "brightness_low"
tooltipText: "Decrease Brightness"
fontPointSize: Style.fontSizeLarge * scaling fontPointSize: Style.fontSizeLarge * scaling
onClicked: { onClicked: {
BrightnessService.decreaseBrightness() BrightnessService.decreaseBrightness()
@ -335,6 +338,7 @@ NLoader {
} }
NIconButton { NIconButton {
icon: "brightness_high" icon: "brightness_high"
tooltipText: "Increase Brightness"
fontPointSize: Style.fontSizeLarge * scaling fontPointSize: Style.fontSizeLarge * scaling
onClicked: { onClicked: {
BrightnessService.increaseBrightness() BrightnessService.increaseBrightness()

View file

@ -58,7 +58,7 @@ Variants {
id: notificationStack id: notificationStack
anchors.top: parent.top anchors.top: parent.top
anchors.right: parent.right anchors.right: parent.right
spacing: Style.marginSmall * scaling spacing: Style.marginSmall * scaling
width: 360 * scaling width: 360 * scaling
visible: true visible: true
@ -183,12 +183,14 @@ Variants {
} }
NIconButton { NIconButton {
icon: "close"
tooltipText: "Close"
sizeMultiplier: 0.8 sizeMultiplier: 0.8
showBorder: false showBorder: false
anchors.top: parent.top anchors.top: parent.top
anchors.right: parent.right anchors.right: parent.right
anchors.margins: Style.marginSmall * scaling anchors.margins: Style.marginSmall * scaling
icon: "close"
onClicked: { onClicked: {
animateOut() animateOut()
} }

View file

@ -131,13 +131,14 @@ NLoader {
NIconButton { NIconButton {
icon: "delete" icon: "delete"
tooltipText: "Clear History"
sizeMultiplier: 0.8 sizeMultiplier: 0.8
tooltipText: "Clear history"
onClicked: NotificationService.clearHistory() onClicked: NotificationService.clearHistory()
} }
NIconButton { NIconButton {
icon: "close" icon: "close"
tooltipText: "Close"
sizeMultiplier: 0.8 sizeMultiplier: 0.8
onClicked: { onClicked: {
notificationPanel.hide() notificationPanel.hide()
@ -207,8 +208,9 @@ NLoader {
// Trash icon button // Trash icon button
NIconButton { NIconButton {
icon: "delete" icon: "delete"
tooltipText: "Delete Notification"
sizeMultiplier: 0.7 sizeMultiplier: 0.7
tooltipText: "Delete notification"
onClicked: { onClicked: {
console.log("[NotificationHistory] Removing notification:", summary) console.log("[NotificationHistory] Removing notification:", summary)
NotificationService.historyModel.remove(index) NotificationService.historyModel.remove(index)

View file

@ -40,7 +40,7 @@ NBox {
text: "album" text: "album"
font.family: "Material Symbols Outlined" font.family: "Material Symbols Outlined"
font.pointSize: Style.fontSizeXXL * 2.5 * scaling font.pointSize: Style.fontSizeXXL * 2.5 * scaling
color: Colors.mOnSurfaceVariant color: Colors.mPrimary
Layout.alignment: Qt.AlignHCenter Layout.alignment: Qt.AlignHCenter
} }
NText { NText {
@ -182,6 +182,7 @@ NBox {
NText { NText {
anchors.centerIn: parent anchors.centerIn: parent
text: "album" text: "album"
color: Colors.mPrimary
font.family: "Material Symbols Outlined" font.family: "Material Symbols Outlined"
font.pointSize: Style.fontSizeLarge * 12 * scaling font.pointSize: Style.fontSizeLarge * 12 * scaling
visible: !trackArt.visible visible: !trackArt.visible
@ -310,18 +311,24 @@ NBox {
// Previous button // Previous button
NIconButton { NIconButton {
icon: "skip_previous" icon: "skip_previous"
tooltipText: "Previous Media"
visible: MediaPlayer.canGoPrevious
onClicked: MediaPlayer.canGoPrevious ? MediaPlayer.previous() : {} onClicked: MediaPlayer.canGoPrevious ? MediaPlayer.previous() : {}
} }
// Play/Pause button // Play/Pause button
NIconButton { NIconButton {
icon: MediaPlayer.isPlaying ? "pause" : "play_arrow" icon: MediaPlayer.isPlaying ? "pause" : "play_arrow"
tooltipText: MediaPlayer.isPlaying ? "Pause" : "Play"
visible: (MediaPlayer.canPlay || MediaPlayer.canPause)
onClicked: (MediaPlayer.canPlay || MediaPlayer.canPause) ? MediaPlayer.playPause() : {} onClicked: (MediaPlayer.canPlay || MediaPlayer.canPause) ? MediaPlayer.playPause() : {}
} }
// Next button // Next button
NIconButton { NIconButton {
icon: "skip_next" icon: "skip_next"
tooltipText: "Next Media"
visible: MediaPlayer.canGoNext
onClicked: MediaPlayer.canGoNext ? MediaPlayer.next() : {} onClicked: MediaPlayer.canGoNext ? MediaPlayer.next() : {}
} }
} }

View file

@ -27,6 +27,7 @@ NBox {
// Performance // Performance
NIconButton { NIconButton {
icon: "speed" icon: "speed"
tooltipText: "Set Performance Power Profile"
enabled: hasPP enabled: hasPP
opacity: enabled ? Style.opacityFull : Style.opacityMedium opacity: enabled ? Style.opacityFull : Style.opacityMedium
showFilled: enabled && powerProfiles.profile === PowerProfile.Performance showFilled: enabled && powerProfiles.profile === PowerProfile.Performance
@ -40,6 +41,7 @@ NBox {
// Balanced // Balanced
NIconButton { NIconButton {
icon: "balance" icon: "balance"
tooltipText: "Set Balanced Power Profile"
enabled: hasPP enabled: hasPP
opacity: enabled ? Style.opacityFull : Style.opacityMedium opacity: enabled ? Style.opacityFull : Style.opacityMedium
showFilled: enabled && powerProfiles.profile === PowerProfile.Balanced showFilled: enabled && powerProfiles.profile === PowerProfile.Balanced
@ -53,6 +55,7 @@ NBox {
// Eco // Eco
NIconButton { NIconButton {
icon: "eco" icon: "eco"
tooltipText: "Set Eco Power Profile"
enabled: hasPP enabled: hasPP
opacity: enabled ? Style.opacityFull : Style.opacityMedium opacity: enabled ? Style.opacityFull : Style.opacityMedium
showFilled: enabled && powerProfiles.profile === PowerProfile.PowerSaver showFilled: enabled && powerProfiles.profile === PowerProfile.PowerSaver

View file

@ -38,7 +38,7 @@ NBox {
ColumnLayout { ColumnLayout {
Layout.fillWidth: true Layout.fillWidth: true
spacing: Style.marginTiniest * scaling spacing: Style.marginTiniest * scaling
NText { NText {
text: Quickshell.env("USER") || "user" text: Quickshell.env("USER") || "user"
font.weight: Style.fontWeightBold font.weight: Style.fontWeightBold
@ -57,15 +57,17 @@ NBox {
} }
NIconButton { NIconButton {
icon: "settings" icon: "settings"
tooltipText: "Open settings" tooltipText: "Open Settings"
onClicked: { onClicked: {
settingsPanel.requestedTab = SettingsPanel.Tab.General settingsPanel.requestedTab = SettingsPanel.Tab.General
settingsPanel.isLoaded = !settingsPanel.isLoaded settingsPanel.isLoaded = !settingsPanel.isLoaded
} }
} }
NIconButton { NIconButton {
id: powerButton id: powerButton
icon: "power_settings_new" icon: "power_settings_new"
tooltipText: "Power Menu"
onClicked: { onClicked: {
powerMenu.show() powerMenu.show()
} }

View file

@ -22,6 +22,7 @@ NBox {
// Screen Recorder // Screen Recorder
NIconButton { NIconButton {
icon: "videocam" icon: "videocam"
tooltipText: ScreenRecorder.isRecording ? "Stop Screen Recording" : "Start Screen Recording"
showFilled: ScreenRecorder.isRecording showFilled: ScreenRecorder.isRecording
onClicked: { onClicked: {
ScreenRecorder.toggleRecording() ScreenRecorder.toggleRecording()
@ -31,6 +32,7 @@ NBox {
// Wallpaper // Wallpaper
NIconButton { NIconButton {
icon: "image" icon: "image"
tooltipText: "Open Wallpaper Selector"
onClicked: { onClicked: {
settingsPanel.requestedTab = SettingsPanel.Tab.WallpaperSelector settingsPanel.requestedTab = SettingsPanel.Tab.WallpaperSelector
settingsPanel.isLoaded = true settingsPanel.isLoaded = true

View file

@ -94,7 +94,7 @@ Rectangle {
anchors.right: parent.right anchors.right: parent.right
anchors.top: parent.top anchors.top: parent.top
anchors.rightMargin: -6 * scaling * contentScale anchors.rightMargin: -6 * scaling * contentScale
anchors.topMargin: Style.marginTiniest * scaling * contentScale anchors.topMargin: Style.marginTiniest * scaling * contentScale
Text { Text {
anchors.centerIn: parent anchors.centerIn: parent

View file

@ -60,7 +60,7 @@ RowLayout {
Behavior on x { Behavior on x {
NumberAnimation { NumberAnimation {
duration: Style.animationFast duration: Style.animationFast
easing.type: Easing.OutCubic easing.type: Easing.OutCubic
} }
} }

View file

@ -37,7 +37,7 @@ Window {
function _showNow() { function _showNow() {
// Compute new size everytime we show the tooltip // Compute new size everytime we show the tooltip
width = Math.max(50 * scaling, tooltipText.implicitWidth + Style.marginLarge * 2 * scaling) width = Math.max(50 * scaling, tooltipText.implicitWidth + Style.marginLarge * 2 * scaling)
height = Math.max(50 * scaling, tooltipText.implicitHeight + Style.marginMedium * 2 * scaling) height = Math.max(40 * scaling, tooltipText.implicitHeight + Style.marginMedium * 2 * scaling)
if (!target) { if (!target) {
return return
@ -121,7 +121,7 @@ Window {
// Timer to trigger show animation // Timer to trigger show animation
Timer { Timer {
id: showTimer id: showTimer
interval: Style.animationFast / 15 // Very short delay to ensure component is visible interval: Style.animationFast / 15 // Very short delay to ensure component is visible
repeat: false repeat: false
onTriggered: { onTriggered: {
// Animate to final values // Animate to final values