Merge pull request #908 from oluijks/fix/color-temp-widgets

fix(night-light): replace day/night color temperature inputs with sliders
2025-12-06 06:36:15 +00:00 · 2025-11-29 12:07:19 +01:00
parent 7366298026 17b09739ad
commit fd9341d2f1
12 changed files with 146 additions and 57 deletions
--- a/Assets/Translations/de.json
+++ b/Assets/Translations/de.json
@@ -1258,10 +1258,12 @@
          "label": "Nachtlicht"
        },
        "temperature": {
-          "day": "Tag",
          "description": "Farbwärme für Nacht- und Tageszeit einstellen.",
          "label": "Farbtemperatur",
-          "night": "Nacht"
+          "day": "Tag",
+          "day-description": "Steuert die Farbtemperatur tagsüber.",
+          "night": "Nacht",
+          "night-description": "Steuert die Farbtemperatur nachts."
        }
      },
      "title": "Anzeige"
--- a/Assets/Translations/en.json
+++ b/Assets/Translations/en.json
@@ -1258,10 +1258,12 @@
          "label": "Night Light"
        },
        "temperature": {
-          "day": "Day",
          "description": "Set the color warmth for nighttime and daytime.",
          "label": "Color temperature",
-          "night": "Night"
+          "day": "Day",
+          "day-description": "Controls the temperature during daytime.",
+          "night": "Night",
+          "night-description": "Controls the temperature during nighttime."
        }
      },
      "title": "Display"
--- a/Assets/Translations/es.json
+++ b/Assets/Translations/es.json
@@ -1258,10 +1258,12 @@
          "label": "Luz nocturna"
        },
        "temperature": {
-          "day": "Día",
          "description": "Establece la calidez del color para la noche y el día.",
          "label": "Temperatura de color",
-          "night": "Noche"
+          "day": "Día",
+          "day-description": "Controla la temperatura durante el día.",
+          "night": "Noche",
+          "night-description": "Controla la temperatura durante la noche."
        }
      },
      "title": "Pantalla"
--- a/Assets/Translations/fr.json
+++ b/Assets/Translations/fr.json
@@ -1258,10 +1258,12 @@
          "label": "Éclairage nocturne"
        },
        "temperature": {
-          "day": "Jour",
          "description": "Réglez la chaleur des couleurs pour la nuit et le jour.",
          "label": "Température de couleur",
-          "night": "Nuit"
+          "day": "Jour",
+          "day-description": "Contrôle la température pendant la journée.",
+          "night": "Nuit",
+          "night-description": "Contrôle la température pendant la nuit."
        }
      },
      "title": "Affichage"
--- a/Assets/Translations/ja.json
+++ b/Assets/Translations/ja.json
@@ -1258,10 +1258,12 @@
          "label": "夜間モード"
        },
        "temperature": {
-          "day": "日中",
          "description": "日中と夜間の色温度（暖かさ）を設定します。",
          "label": "色温度",
-          "night": "夜間"
+          "day": "日中",
+          "day-description": "昼間の色温度を調整します。",
+          "night": "夜間",
+          "night-description": "夜間の色温度を調整します。"
        }
      },
      "title": "ディスプレイ"
--- a/Assets/Translations/nl.json
+++ b/Assets/Translations/nl.json
@@ -1258,10 +1258,12 @@
          "label": "Nachtlicht"
        },
        "temperature": {
-          "day": "Dag",
          "description": "Stel de kleurwarmte voor nacht en dag in.",
          "label": "Kleurtemperatuur",
-          "night": "Nacht"
+          "day": "Dag",
+          "day-description": "Regelt de kleurtemperatuur overdag.",
+          "night": "Nacht",
+          "night-description": "Regelt de kleurtemperatuur 's nachts."
        }
      },
      "title": "Beeldscherm"
--- a/Assets/Translations/pt.json
+++ b/Assets/Translations/pt.json
@@ -1258,10 +1258,12 @@
          "label": "Luz noturna"
        },
        "temperature": {
-          "day": "Dia",
          "description": "Defina o quão quente a cor será durante a noite e o dia.",
          "label": "Temperatura da cor",
-          "night": "Noite"
+          "day": "Dia",
+          "day-description": "Controla a temperatura durante o dia.",
+          "night": "Noite",
+          "night-description": "Controla a temperatura durante a noite."
        }
      },
      "title": "Tela"
--- a/Assets/Translations/ru.json
+++ b/Assets/Translations/ru.json
@@ -1258,10 +1258,12 @@
          "label": "Ночной свет"
        },
        "temperature": {
-          "day": "День",
          "description": "Установите цветовую температуру для ночного и дневного времени.",
          "label": "Цветовая температура",
-          "night": "Ночь"
+          "day": "День",
+          "day-description": "Управляет цветовой температурой в дневное время.",
+          "night": "Ночь",
+          "night-description": "Управляет цветовой температурой в ночное время."
        }
      },
      "title": "Дисплей"
--- a/Assets/Translations/tr.json
+++ b/Assets/Translations/tr.json
@@ -1258,10 +1258,12 @@
          "label": "Gece ışığı"
        },
        "temperature": {
-          "day": "Gündüz",
          "description": "Gece ve gündüz için renk sıcaklığını ayarlayın.",
          "label": "Renk sıcaklığı",
-          "night": "Gece"
+          "day": "Gündüz",
+          "day-description": "Gündüz saatlerindeki renk sıcaklığını kontrol eder.",
+          "night": "Gece",
+          "night-description": "Gece saatlerindeki renk sıcaklığını kontrol eder."
        }
      },
      "title": "Görüntü"
--- a/Assets/Translations/uk-UA.json
+++ b/Assets/Translations/uk-UA.json
@@ -1258,10 +1258,12 @@
          "label": "Нічне світло"
        },
        "temperature": {
-          "day": "День",
          "description": "Встановіть теплоту кольору для нічного та денного часу.",
          "label": "Колірна температура",
-          "night": "Ніч"
+          "day": "День",
+          "day-description": "Керує колірною температурою вдень.",
+          "night": "Ніч",
+          "night-description": "Керує колірною температурою вночі."
        }
      },
      "title": "Дисплей"
--- a/Assets/Translations/zh-CN.json
+++ b/Assets/Translations/zh-CN.json
@@ -1258,10 +1258,12 @@
          "label": "夜间模式"
        },
        "temperature": {
-          "day": "白天",
          "description": "设置夜间和白天的颜色温暖度。",
          "label": "色温",
-          "night": "夜间"
+          "day": "白天",
+          "day-description": "控制白天的色温。",
+          "night": "夜间",
+          "night-description": "控制夜间的色温。"
        }
      },
      "title": "显示"
--- a/Modules/Panels/Settings/Tabs/DisplayTab.qml
+++ b/Modules/Panels/Settings/Tabs/DisplayTab.qml
@@ -232,63 +232,130 @@ ColumnLayout {

  // Temperature
  ColumnLayout {
-    spacing: Style.marginXS
-    Layout.alignment: Qt.AlignVCenter
+    visible: Settings.data.nightLight.enabled
+    spacing: Style.marginM
+    Layout.fillWidth: true

+    // Night temperature
    NLabel {
-      label: I18n.tr("settings.display.night-light.temperature.label")
-      description: I18n.tr("settings.display.night-light.temperature.description")
+      label: I18n.tr("settings.display.night-light.temperature.night")
+      description: I18n.tr("settings.display.night-light.temperature.night-description")
+      Layout.fillWidth: true
    }

    RowLayout {
-      visible: Settings.data.nightLight.enabled
+      Layout.fillWidth: true
      spacing: Style.marginM
-      Layout.fillWidth: false
-      Layout.fillHeight: true
-      Layout.alignment: Qt.AlignVCenter

-      NText {
-        text: I18n.tr("settings.display.night-light.temperature.night")
-        pointSize: Style.fontSizeM
-        color: Color.mOnSurfaceVariant
-        Layout.alignment: Qt.AlignVCenter
-      }
+      NSlider {
+        id: nightSlider
+        Layout.fillWidth: true

-      NTextInput {
-        text: Settings.data.nightLight.nightTemp
-        inputMethodHints: Qt.ImhDigitsOnly
-        Layout.alignment: Qt.AlignVCenter
-        onEditingFinished: {
-          var nightTemp = parseInt(text);
+        from: 1000
+        to: 6500
+        value: Settings.data.nightLight.nightTemp
+
+        // Clamp as the thumb moves, but do NOT change Settings here
+        onValueChanged: {
          var dayTemp = parseInt(Settings.data.nightLight.dayTemp);
-          if (!isNaN(nightTemp) && !isNaN(dayTemp)) {
-            // Clamp value between [1000 .. (dayTemp-500)]
-            var clampedValue = Math.min(dayTemp - 500, Math.max(1000, nightTemp));
-            text = Settings.data.nightLight.nightTemp = clampedValue.toString();
+          var v = Math.round(value);
+
+          if (!isNaN(dayTemp)) {
+            var maxNight = dayTemp - 500;
+            v = Math.min(maxNight, Math.max(1000, v));
+          } else {
+            v = Math.max(1000, v);
+          }
+
+          if (v !== value)
+            value = v;
+        }
+
+        // Only write back to Settings when the user releases the slider
+        onPressedChanged: {
+          if (!pressed) {
+            var dayTemp = parseInt(Settings.data.nightLight.dayTemp);
+            var v = Math.round(value);
+
+            if (!isNaN(dayTemp)) {
+              var maxNight = dayTemp - 500;
+              v = Math.min(maxNight, Math.max(1000, v));
+            } else {
+              v = Math.max(1000, v);
+            }
+
+            Settings.data.nightLight.nightTemp = v;
          }
        }
      }

      NText {
-        text: I18n.tr("settings.display.night-light.temperature.day")
+        text: nightSlider.value + "K"
        pointSize: Style.fontSizeM
        color: Color.mOnSurfaceVariant
        Layout.alignment: Qt.AlignVCenter
      }
-      NTextInput {
-        text: Settings.data.nightLight.dayTemp
-        inputMethodHints: Qt.ImhDigitsOnly
-        Layout.alignment: Qt.AlignVCenter
-        onEditingFinished: {
-          var dayTemp = parseInt(text);
+    }
+
+    // Day temperature
+    NLabel {
+      label: I18n.tr("settings.display.night-light.temperature.day")
+      description: I18n.tr("settings.display.night-light.temperature.day-description")
+      Layout.fillWidth: true
+    }
+
+    RowLayout {
+      Layout.fillWidth: true
+      spacing: Style.marginM
+
+      NSlider {
+        id: daySlider
+        Layout.fillWidth: true
+
+        from: 1000
+        to: 6500
+        value: Settings.data.nightLight.dayTemp
+
+        // Clamp as the thumb moves, but do NOT change Settings here
+        onValueChanged: {
          var nightTemp = parseInt(Settings.data.nightLight.nightTemp);
-          if (!isNaN(nightTemp) && !isNaN(dayTemp)) {
-            // Clamp value between [(nightTemp+500) .. 6500]
-            var clampedValue = Math.max(nightTemp + 500, Math.min(6500, dayTemp));
-            text = Settings.data.nightLight.dayTemp = clampedValue.toString();
+          var v = Math.round(value);
+
+          if (!isNaN(nightTemp)) {
+            var minDay = nightTemp + 500;
+            v = Math.max(minDay, Math.min(6500, v));
+          } else {
+            v = Math.min(6500, v);
+          }
+
+          if (v !== value)
+            value = v;
+        }
+
+        // Only write back to Settings when the user releases the slider
+        onPressedChanged: {
+          if (!pressed) {
+            var nightTemp = parseInt(Settings.data.nightLight.nightTemp);
+            var v = Math.round(value);
+
+            if (!isNaN(nightTemp)) {
+              var minDay = nightTemp + 500;
+              v = Math.max(minDay, Math.min(6500, v));
+            } else {
+              v = Math.min(6500, v);
+            }
+
+            Settings.data.nightLight.dayTemp = v;
          }
        }
      }
+
+      NText {
+        text: daySlider.value + "K"
+        pointSize: Style.fontSizeM
+        color: Color.mOnSurfaceVariant
+        Layout.alignment: Qt.AlignVCenter
+      }
    }
  }