Trying to fix a weird binding bug with NToggle

This commit is contained in:
quadbyte 2025-08-15 23:15:16 -04:00
parent c371ea68a3
commit fc4bd796f1
12 changed files with 73 additions and 73 deletions

View file

@ -147,13 +147,13 @@ NLoader {
NToggle {
baseSize: Style.baseWidgetSize * 0.75
value: Settings.data.network.wifiEnabled
onToggled: function (value) {
Settings.data.network.wifiEnabled = value
NetworkService.setWifiEnabled(value)
checked: Settings.data.network.wifiEnabled
onToggled: checked => {
Settings.data.network.wifiEnabled = checked
NetworkService.setWifiEnabled(checked)
// If enabling WiFi while menu is open, refresh after a delay
if (value) {
if (checked) {
wifiEnableRefreshTimer.start()
}
}

View file

@ -201,8 +201,8 @@ NLoader {
NToggle {
label: "Label"
description: "Description"
onToggled: function (value) {
console.log("[DemoPanel] NToggle:", value)
onToggled: checked => {
console.log("[DemoPanel] NToggle:", checked)
}
}

View file

@ -123,10 +123,10 @@ ColumnLayout {
NToggle {
label: "Mute AudioService"
description: "Mute or unmute the default audio output"
value: AudioService.muted
onToggled: function (newValue) {
checked: AudioService.muted
onToggled: checked => {
if (AudioService.sink && AudioService.sink.audio) {
AudioService.sink.audio.muted = newValue
AudioService.sink.audio.muted = checked
}
}
}

View file

@ -43,27 +43,27 @@ ColumnLayout {
NToggle {
label: "Show Active Window"
description: "Display the title of the currently focused window below the bar"
value: Settings.data.bar.showActiveWindow
onToggled: function (newValue) {
Settings.data.bar.showActiveWindow = newValue
checked: Settings.data.bar.showActiveWindow
onToggled: checked => {
Settings.data.bar.showActiveWindow = checked
}
}
NToggle {
label: "Show System Info"
description: "Display system information (CPU, RAM, Temperature)"
value: Settings.data.bar.showSystemInfo
onToggled: function (newValue) {
Settings.data.bar.showSystemInfo = newValue
checked: Settings.data.bar.showSystemInfo
onToggled: checked => {
Settings.data.bar.showSystemInfo = checked
}
}
NToggle {
label: "Show Media"
description: "Display media controls and information"
value: Settings.data.bar.showMedia
onToggled: function (newValue) {
Settings.data.bar.showMedia = newValue
checked: Settings.data.bar.showMedia
onToggled: checked => {
Settings.data.bar.showMedia = checked
}
}
}

View file

@ -129,9 +129,9 @@ ColumnLayout {
NToggle {
label: "Use Matugen"
description: "Automatically generate colors based on your active wallpaper using Matugen"
value: Settings.data.colorSchemes.useWallpaperColors
onToggled: function (newValue) {
Settings.data.colorSchemes.useWallpaperColors = newValue
checked: Settings.data.colorSchemes.useWallpaperColors
onToggled: checked => {
Settings.data.colorSchemes.useWallpaperColors = checked
if (Settings.data.colorSchemes.useWallpaperColors) {
ColorSchemesService.changedWallpaper()
}

View file

@ -89,9 +89,9 @@ Item {
NToggle {
label: "Bar"
description: "Enable the top bar on this monitor"
value: (Settings.data.bar.monitors || []).indexOf(modelData.name) !== -1
onToggled: function (newValue) {
if (newValue) {
checked: (Settings.data.bar.monitors || []).indexOf(modelData.name) !== -1
onToggled: checked => {
if (checked) {
Settings.data.bar.monitors = addMonitor(Settings.data.bar.monitors, modelData.name)
} else {
Settings.data.bar.monitors = removeMonitor(Settings.data.bar.monitors, modelData.name)
@ -102,9 +102,9 @@ Item {
NToggle {
label: "Notifications"
description: "Enable notifications on this monitor"
value: (Settings.data.notifications.monitors || []).indexOf(modelData.name) !== -1
onToggled: function (newValue) {
if (newValue) {
checked: (Settings.data.notifications.monitors || []).indexOf(modelData.name) !== -1
onToggled: checked => {
if (checked) {
Settings.data.notifications.monitors = addMonitor(Settings.data.notifications.monitors,
modelData.name)
} else {
@ -117,9 +117,9 @@ Item {
NToggle {
label: "Dock"
description: "Enable the dock on this monitor"
value: (Settings.data.dock.monitors || []).indexOf(modelData.name) !== -1
onToggled: function (newValue) {
if (newValue) {
checked: (Settings.data.dock.monitors || []).indexOf(modelData.name) !== -1
onToggled: checked => {
if (checked) {
Settings.data.dock.monitors = addMonitor(Settings.data.dock.monitors, modelData.name)
} else {
Settings.data.dock.monitors = removeMonitor(Settings.data.dock.monitors, modelData.name)

View file

@ -95,27 +95,27 @@ ColumnLayout {
NToggle {
label: "Show Corners"
description: "Display rounded corners on the edge of the screen"
value: Settings.data.general.showScreenCorners
onToggled: function (v) {
Settings.data.general.showScreenCorners = v
checked: Settings.data.general.showScreenCorners
onToggled: checked => {
Settings.data.general.showScreenCorners = checked
}
}
NToggle {
label: "Dim Desktop"
description: "Dim the desktop when panels or menus are open"
value: Settings.data.general.dimDesktop
onToggled: function (v) {
Settings.data.general.dimDesktop = v
checked: Settings.data.general.dimDesktop
onToggled: checked => {
Settings.data.general.dimDesktop = checked
}
}
NToggle {
label: "Auto-hide Dock"
description: "Automatically hide the dock when not in use"
value: Settings.data.dock.autoHide
onToggled: function (v) {
Settings.data.dock.autoHide = v
checked: Settings.data.dock.autoHide
onToggled: checked => {
Settings.data.dock.autoHide = checked
}
}
}

View file

@ -45,18 +45,18 @@ ColumnLayout {
NToggle {
label: "WiFi Enabled"
description: "Enable WiFi connectivity"
value: Settings.data.network.wifiEnabled
onToggled: function (newValue) {
Settings.data.network.wifiEnabled = newValue
checked: Settings.data.network.wifiEnabled
onToggled: checked => {
Settings.data.network.wifiEnabled = checked
}
}
NToggle {
label: "Bluetooth Enabled"
description: "Enable Bluetooth connectivity"
value: Settings.data.network.bluetoothEnabled
onToggled: function (newValue) {
Settings.data.network.bluetoothEnabled = newValue
checked: Settings.data.network.bluetoothEnabled
onToggled: checked => {
Settings.data.network.bluetoothEnabled = checked
}
}
}

View file

@ -65,9 +65,9 @@ ColumnLayout {
NToggle {
label: "Show Cursor"
description: "Record mouse cursor in the video"
value: Settings.data.screenRecorder.showCursor
onToggled: function (newValue) {
Settings.data.screenRecorder.showCursor = newValue
checked: Settings.data.screenRecorder.showCursor
onToggled: checked => {
Settings.data.screenRecorder.showCursor = checked
}
}
}

View file

@ -81,18 +81,18 @@ ColumnLayout {
NToggle {
label: "Use 12-Hour Clock"
description: "Display time in 12-hour format (AM/PM) instead of 24-hour"
value: Settings.data.location.use12HourClock
onToggled: function (newValue) {
Settings.data.location.use12HourClock = newValue
checked: Settings.data.location.use12HourClock
onToggled: checked => {
Settings.data.location.use12HourClock = checked
}
}
NToggle {
label: "Reverse Day/Month"
description: "Display date as DD/MM instead of MM/DD"
value: Settings.data.location.reverseDayMonth
onToggled: function (newValue) {
Settings.data.location.reverseDayMonth = newValue
checked: Settings.data.location.reverseDayMonth
onToggled: checked => {
Settings.data.location.reverseDayMonth = checked
}
}
}
@ -119,9 +119,9 @@ ColumnLayout {
NToggle {
label: "Use Fahrenheit"
description: "Display temperature in Fahrenheit instead of Celsius"
value: Settings.data.location.useFahrenheit
onToggled: function (newValue) {
Settings.data.location.useFahrenheit = newValue
checked: Settings.data.location.useFahrenheit
onToggled: checked => {
Settings.data.location.useFahrenheit = checked
}
}
}

View file

@ -87,9 +87,9 @@ ColumnLayout {
NToggle {
label: "Random Wallpaper"
description: "Automatically select random wallpapers from the folder"
value: Settings.data.wallpaper.isRandom
onToggled: function (newValue) {
Settings.data.wallpaper.isRandom = newValue
checked: Settings.data.wallpaper.isRandom
onToggled: checked => {
Settings.data.wallpaper.isRandom = checked
}
}
@ -157,9 +157,9 @@ ColumnLayout {
NToggle {
label: "Use SWWW"
description: "Use SWWW daemon for advanced wallpaper management"
value: Settings.data.wallpaper.swww.enabled
onToggled: function (newValue) {
Settings.data.wallpaper.swww.enabled = newValue
checked: Settings.data.wallpaper.swww.enabled
onToggled: checked => {
Settings.data.wallpaper.swww.enabled = checked
}
}

View file

@ -9,11 +9,11 @@ RowLayout {
property string label: ""
property string description: ""
property bool value: false
property bool checked: false
property bool hovering: false
property int baseSize: Style.baseWidgetSize
signal toggled(bool balue)
signal toggled(bool checked)
signal entered
signal exited
@ -45,19 +45,19 @@ RowLayout {
implicitWidth: root.baseSize * 1.625 * scaling
implicitHeight: root.baseSize * scaling
radius: height * 0.5
color: value ? Colors.mPrimary : Colors.mSurface
border.color: value ? Colors.mPrimary : Colors.mOutline
color: root.checked ? Colors.mPrimary : Colors.mSurface
border.color: root.checked ? Colors.mPrimary : Colors.mOutline
border.width: Math.max(1, Style.borderMedium * scaling)
Rectangle {
implicitWidth: (root.baseSize - 5) * scaling
implicitHeight: (root.baseSize - 5) * scaling
radius: height * 0.5
color: value ? Colors.mOnPrimary : Colors.mPrimary
border.color: value ? Colors.mSurface : Colors.mSurface
color: root.checked ? Colors.mOnPrimary : Colors.mPrimary
border.color: root.checked ? Colors.mSurface : Colors.mSurface
border.width: Math.max(1, Style.borderMedium * scaling)
y: 2 * scaling
x: value ? switcher.width - width - 2 * scaling : 2 * scaling
x: root.checked ? switcher.width - width - 2 * scaling : 2 * scaling
Behavior on x {
NumberAnimation {
@ -80,8 +80,8 @@ RowLayout {
root.exited()
}
onClicked: {
value = !value
root.toggled(value)
root.checked = !root.checked
root.toggled(root.checked)
}
}
}