Quicksettings: polishing, fixed all scaling issues.

2026-05-11 17:08:27 +08:00 · 2025-10-09 19:57:12 -04:00
parent 0989601dbc
commit 4d0041abee
31 changed files with 87 additions and 192 deletions
@@ -36,12 +36,6 @@
        {
          "id": "NotificationHistory"
        },
-        {
-          "id": "WiFi"
-        },
-        {
-          "id": "Bluetooth"
-        },
        {
          "id": "Battery"
        },
@@ -113,7 +107,7 @@
  },
  "controlCenter": {
    "position": "close_to_bar_button",
-    "quickSettingsStyle": "modern",
+    "quickSettingsStyle": "compact",
    "widgets": {
      "quickSettings": [
        {
@@ -125,20 +119,11 @@
        {
          "id": "Notifications"
        },
-        {
-          "id": "NightLight"
-        },
-        {
-          "id": "KeepAwake"
-        },
-        {
-          "id": "PowerProfile"
-        },
        {
          "id": "ScreenRecorder"
        },
        {
-          "id": "WallpaperSelector"
+          "id": "PowerProfile"
        }
      ]
    }
@@ -242,7 +242,7 @@ Singleton {
    property JsonObject controlCenter: JsonObject {
      // Position: close_to_bar_button, center, top_left, top_right, bottom_left, bottom_right, bottom_center, top_center
      property string position: "close_to_bar_button"
-      property string quickSettingsStyle: "compact" // "modern", "classic", or "compact"
+      property string quickSettingsStyle: "compact" // "compact", "classic", or "modern"
      property JsonObject widgets
      widgets: JsonObject {
        property list<var> quickSettings: [{
@@ -10,6 +10,7 @@ import qs.Widgets

 Item {
  id: root
+
  property ShellScreen screen
  property real scaling: 1.0

@@ -10,8 +10,8 @@ import qs.Widgets
 NIconButton {
  id: root

-  // NIconButton must only define screen, not scaling
  property ShellScreen screen
+  property real scaling: 1.0

  baseSize: Style.capsuleHeight
  compact: (Settings.data.bar.density === "compact")
@@ -9,8 +9,8 @@ import qs.Services
 NIconButton {
  id: root

-  // NIconButton must only define screen, not scaling
  property ShellScreen screen
+  property real scaling: 1.0

  // Widget properties passed from Bar.qml for per-instance settings
  property string widgetId: ""
@@ -11,7 +11,6 @@ import qs.Modules.Bar.Extras
 Item {
  id: root

-  // Widget properties passed from Bar.qml
  property ShellScreen screen
  property real scaling: 1.0

@@ -6,8 +6,8 @@ import qs.Services
 NIconButton {
  id: root

-  // NIconButton must only define screen, not scaling
  property ShellScreen screen
+  property real scaling: 1.0

  icon: "dark-mode"
  tooltipText: Settings.data.colorSchemes.darkMode ? I18n.tr("tooltips.switch-to-light-mode") : I18n.tr("tooltips.switch-to-dark-mode")
@@ -8,8 +8,8 @@ import qs.Widgets
 NIconButton {
  id: root

-  // NIconButton must only define screen, not scaling
  property ShellScreen screen
+  property real scaling: 1.0

  baseSize: Style.capsuleHeight
  compact: (Settings.data.bar.density === "compact")
@@ -11,8 +11,8 @@ import qs.Widgets
 NIconButton {
  id: root

-  // NIconButton must only define screen, not scaling
  property ShellScreen screen
+  property real scaling: 1.0

  compact: (Settings.data.bar.density === "compact")
  baseSize: Style.capsuleHeight
@@ -10,8 +10,8 @@ import qs.Widgets
 NIconButton {
  id: root

-  // NIconButton must only define screen, not scaling
  property ShellScreen screen
+  property real scaling: 1.0

  // Widget properties passed from Bar.qml for per-instance settings
  property string widgetId: ""
@@ -9,8 +9,8 @@ import qs.Widgets
 NIconButton {
  id: root

-  // NIconButton must only define screen, not scaling
  property ShellScreen screen
+  property real scaling: 1.0

  baseSize: Style.capsuleHeight
  visible: PowerProfileService.available
@@ -7,8 +7,8 @@ import qs.Widgets
 NIconButton {
  id: root

-  // NIconButton must only define screen, not scaling
  property ShellScreen screen
+  property real scaling: 1.0

  icon: "camera-video"
  tooltipText: ScreenRecorderService.isRecording ? I18n.tr("tooltips.click-to-stop-recording") : I18n.tr("tooltips.click-to-start-recording")
@@ -8,7 +8,6 @@ import qs.Widgets
 Item {
  id: root

-  // Widget properties passed from Bar.qml
  property ShellScreen screen
  property real scaling: 1.0

@@ -8,8 +8,8 @@ import qs.Widgets
 NIconButton {
  id: root

-  // NIconButton must only define screen, not scaling
  property ShellScreen screen
+  property real scaling: 1.0

  baseSize: Style.capsuleHeight
  compact: (Settings.data.bar.density === "compact")
@@ -10,8 +10,8 @@ import qs.Widgets
 NIconButton {
  id: root

-  // NIconButton must only define screen, not scaling
  property ShellScreen screen
+  property real scaling: 1.0

  compact: (Settings.data.bar.density === "compact")
  baseSize: Style.capsuleHeight
@@ -31,7 +31,7 @@ NBox {

      NImageCircled {
        width: Style.baseWidgetSize * 1.25 * scaling
-        height: Style.baseWidgetSize * 1.25 * scaling
+        height: width
        imagePath: Settings.data.general.avatarImage
        fallbackIcon: "person"
        borderColor: Color.mPrimary
@@ -105,7 +105,7 @@ NBox {
    GridLayout {
      id: grid
      Layout.fillWidth: true
-      columns: (Settings.data.controlCenter.quickSettingsStyle === "compact") ? 4 : 3
+      columns: (Settings.data.controlCenter.quickSettingsStyle === "compact") ? 5 : 3
      columnSpacing: Style.marginM * scaling
      rowSpacing: Style.marginS * scaling

@@ -11,12 +11,12 @@ NPanel {
  id: root

  preferredWidth: 440
-  preferredHeight: topHeight + bottomHeight + Math.round(Style.marginL * scaling * 3)
+  preferredHeight: topHeight + bottomHeight + Math.round(Style.marginL * 3)
  panelKeyboardFocus: true

-  readonly property int bottomHeight: Math.round(Math.max(196 * scaling))
+  readonly property int bottomHeight: 196
  readonly property int topHeight: {
-    const columns = (Settings.data.controlCenter.quickSettingsStyle === "compact") ? 4 : 3
+    const columns = (Settings.data.controlCenter.quickSettingsStyle === "compact") ? 5 : 3
    const rowsCount = Math.ceil(Settings.data.controlCenter.widgets.quickSettings.length / columns)

    var buttonHeight
@@ -28,7 +28,7 @@ NPanel {
      buttonHeight = 56
    }

-    return (rowsCount * buttonHeight) + (120 * scaling)
+    return (rowsCount * buttonHeight) + 120
  }

  // Positioning
@@ -56,26 +56,26 @@ NPanel {
      TopCard {
        id: topCard
        Layout.fillWidth: true
-        Layout.preferredHeight: topHeight
+        Layout.preferredHeight: topHeight * scaling
      }

      // Media + stats column
      RowLayout {
        id: bottomCard
        Layout.fillWidth: true
-        Layout.preferredHeight: bottomHeight
+        Layout.preferredHeight: bottomHeight * scaling
        spacing: content.cardSpacing

        // Media card
        MediaCard {
          Layout.preferredWidth: Math.max(250 * scaling)
-          Layout.preferredHeight: bottomHeight
+          Layout.preferredHeight: bottomHeight * scaling
        }

        // System monitors combined in one card
        SystemMonitorCard {
          Layout.preferredWidth: Math.max(140 * scaling)
-          Layout.preferredHeight: bottomHeight
+          Layout.preferredHeight: bottomHeight * scaling
        }
      }
    }
@@ -12,9 +12,7 @@ NQuickSetting {
  fontSize: Style.fontSizeS * scaling
  fontWeight: Style.fontWeightMedium
  icon: BluetoothService.enabled ? "bluetooth" : "bluetooth-off"
-  active: BluetoothService.enabled
  tooltipText: I18n.tr("quickSettings.bluetooth.tooltip.action")
  style: Settings.data.controlCenter.quickSettingsStyle || "modern"
-
  onClicked: PanelService.getPanel("bluetoothPanel")?.toggle(this)
 }
@@ -12,7 +12,7 @@ NQuickSetting {
  fontSize: Style.fontSizeS * scaling
  fontWeight: Style.fontWeightMedium
  icon: IdleInhibitorService.isInhibited ? "keep-awake-on" : "keep-awake-off"
-  active: IdleInhibitorService.isInhibited
+  hot: IdleInhibitorService.isInhibited
  tooltipText: I18n.tr("quickSettings.keepAwake.tooltip.action")
  style: Settings.data.controlCenter.quickSettingsStyle || "modern"

@@ -13,7 +13,7 @@ NQuickSetting {
  fontSize: Style.fontSizeS * scaling
  fontWeight: Style.fontWeightMedium
  icon: Settings.data.nightLight.enabled ? (Settings.data.nightLight.forced ? "nightlight-forced" : "nightlight-on") : "nightlight-off"
-  active: Settings.data.nightLight.enabled
+  hot: !Settings.data.nightLight.enabled || Settings.data.nightLight.forced
  style: Settings.data.controlCenter.quickSettingsStyle || "modern"
  tooltipText: I18n.tr("quickSettings.nightLight.tooltip.action")

@@ -12,7 +12,7 @@ NQuickSetting {
  fontSize: Style.fontSizeS * scaling
  fontWeight: Style.fontWeightMedium
  icon: Settings.data.notifications.doNotDisturb ? "bell-off" : "bell"
-  active: Settings.data.notifications.doNotDisturb
+  hot: Settings.data.notifications.doNotDisturb
  tooltipText: I18n.tr("quickSettings.notifications.tooltip.action")
  style: Settings.data.controlCenter.quickSettingsStyle || "modern"

@@ -16,7 +16,7 @@ NQuickSetting {
  fontSize: Style.fontSizeS * scaling
  fontWeight: Style.fontWeightMedium
  icon: PowerProfileService.getIcon()
-  active: hasPP
+  hot: !PowerProfileService.isDefault()
  tooltipText: I18n.tr("quickSettings.powerProfile.tooltip.action")
  style: Settings.data.controlCenter.quickSettingsStyle || "modern"

@@ -13,7 +13,7 @@ NQuickSetting {
  text: ScreenRecorderService.isRecording ? I18n.tr("quickSettings.screenRecorder.label.recording") : I18n.tr("quickSettings.screenRecorder.label.stopped")
  fontSize: Style.fontSizeS * scaling
  fontWeight: Style.fontWeightMedium
-  active: ScreenRecorderService.isRecording
+  hot: ScreenRecorderService.isRecording
  tooltipText: I18n.tr("quickSettings.screenRecorder.tooltip.action")
  style: Settings.data.controlCenter.quickSettingsStyle || "modern"

@@ -13,7 +13,6 @@ NQuickSetting {
  text: I18n.tr("quickSettings.wallpaperSelector.label")
  fontSize: Style.fontSizeS * scaling
  fontWeight: Style.fontWeightMedium
-  active: Settings.data.wallpaper.enabled
  tooltipText: I18n.tr("quickSettings.wallpaperSelector.tooltip.action")
  style: Settings.data.controlCenter.quickSettingsStyle || "modern"

@@ -46,24 +46,6 @@ NQuickSetting {
  fontSize: Style.fontSizeS * scaling
  fontWeight: Style.fontWeightMedium
  style: Settings.data.controlCenter.quickSettingsStyle || "modern"
-
-  active: {
-    if (NetworkService.ethernetConnected) {
-      return true
-    }
-    try {
-      for (const net in NetworkService.networks) {
-        if (NetworkService.networks[net].connected) {
-          return true
-        }
-      }
-      return false
-    } catch (error) {
-      return false
-    }
-  }
-
  tooltipText: I18n.tr("quickSettings.wifi.tooltip.action")
-
  onClicked: PanelService.getPanel("wifiPanel")?.toggle(this)
 }
@@ -21,7 +21,6 @@ ColumnLayout {
    var settings = Object.assign({}, widgetData || {})
    settings.onlySameOutput = valueOnlySameOutput
    settings.onlyActiveWorkspaces = valueOnlyActiveWorkspaces
-    console.log(JSON.stringify(settings))
    return settings
  }

@@ -43,14 +43,14 @@ ColumnLayout {
      description: I18n.tr("settings.control-center.quickSettingsStyle.style.description")
      Layout.fillWidth: true
      model: [{
-          "key": "modern",
-          "name": I18n.tr("options.control-center.quickSettingsStyle.modern")
+          "key": "compact",
+          "name": I18n.tr("options.control-center.quickSettingsStyle.compact")
        }, {
          "key": "classic",
          "name": I18n.tr("options.control-center.quickSettingsStyle.classic")
        }, {
-          "key": "compact",
-          "name": I18n.tr("options.control-center.quickSettingsStyle.compact")
+          "key": "modern",
+          "name": I18n.tr("options.control-center.quickSettingsStyle.modern")
        }]
      currentKey: Settings.data.controlCenter.quickSettingsStyle || "compact"
      onSelected: function (key) {
@@ -71,6 +71,12 @@ Singleton {
      setProfile(PowerProfile.Balanced)
  }

+  function isDefault() {
+    if (!available)
+      return true
+    return (profile === PowerProfile.Balanced)
+  }
+
  Connections {
    target: powerProfiles
    function onProfileChanged() {
@@ -84,7 +84,7 @@ Rectangle {
        anchors.centerIn: parent
        anchors.verticalCenterOffset: -4 * scaling * contentScale
        text: `${root.value}${root.suffix}`
-        pointSize: Style.fontSizeM * scaling * contentScale
+        pointSize: Style.fontSizeM * scaling * contentScale * 0.9
        font.weight: Style.fontWeightBold
        color: Color.mOnSurface
        horizontalAlignment: Text.AlignHCenter
@@ -8,7 +8,6 @@ Rectangle {
  id: root

  property real baseSize: Style.baseWidgetSize
-  property real scaling: 1.0

  property string icon
  property string tooltipText
@@ -13,8 +13,7 @@ Rectangle {
  property string icon: ""
  property string tooltipText: ""
  property bool enabled: true
-  property bool active: false
-  property bool compact: false
+  property bool hot: false
  property string style: "modern" // "modern", "classic", or "compact"

  // Styling properties
@@ -23,56 +22,54 @@ Rectangle {
  property real iconSize: Style.fontSizeL * scaling
  property real cornerRadius: Style.radiusM * scaling

+  // Internal properties
+  property bool hovered: false
+  property bool pressed: false
+
  // Colors - Style-dependent colors
  property color backgroundColor: {
+    if (pressed) {
+      return Color.mTertiary
+    }
+    if (hot) {
+      return Color.mPrimary
+    }
    if (style === "classic")
      return Color.mSurfaceVariant
    if (style === "compact")
      return Color.mSurface
    return Color.mSurface
  }
-  property color textColor: Color.mOnSurface
+  property color textColor: {
+    if (pressed) {
+      return Color.mOnTertiary
+    }
+    if (hot) {
+      return Color.mOnPrimary
+    }
+    return Color.mOnSurface
+  }
  property color iconColor: {
-    if (style === "classic")
+    if (pressed) {
+      return Color.mOnTertiary
+    }
+    if (hot) {
+      return Color.mOnPrimary
+    }
+    if (style !== "compact")
      return Color.mPrimary
-    if (style === "compact")
-      return active ? Color.mPrimary : Color.mOnSurface
-    return active ? Color.mPrimary : Color.mOnSurface
+    return Color.mOnSurface
  }
  property color borderColor: Color.mOutline
-  property color hoverColor: {
-    if (style === "classic")
-      return Color.mTertiary
-    if (style === "compact")
-      return Color.mPrimary
-    return Color.mPrimary
-  }
-  property color pressedColor: {
-    if (style === "classic")
-      return Color.mTertiary
-    if (style === "compact")
-      return Qt.darker(Color.mPrimary, 1.1)
-    return Qt.darker(Color.mPrimary, 1.1)
-  }
-  property color hoverTextColor: Color.mOnPrimary
-  property color hoverIconColor: {
-    if (style === "classic")
-      return Color.mOnTertiary
-    if (style === "compact")
-      return Color.mOnPrimary
-    return Color.mOnPrimary
-  }
+  property color hoverColor: Color.mTertiary
+  property color hoverTextColor: Color.mOnTertiary
+  property color hoverIconColor: Color.mOnTertiary

  // Signals
  signal clicked
  signal rightClicked
  signal middleClicked

-  // Internal properties
-  property bool hovered: false
-  property bool pressed: false
-  property real scaling: 1.0
-
  // Dimensions - Style-dependent sizing
  implicitWidth: {
    if (style === "classic") {
@@ -81,7 +78,7 @@ Rectangle {
    if (style === "compact") {
      return Style.baseWidgetSize * 0.8 * scaling
    }
-    return compact ? Math.max(100 * scaling, contentRow.implicitWidth + (Style.marginL * scaling)) : Math.max(120 * scaling, contentRow.implicitWidth + (Style.marginL * scaling))
+    return Math.max(120 * scaling, contentRow.implicitWidth + (Style.marginL * scaling))
  }
  implicitHeight: {
    if (style === "classic") {
@@ -90,7 +87,7 @@ Rectangle {
    if (style === "compact") {
      return Style.baseWidgetSize * 0.8 * scaling
    }
-    return compact ? Math.max(48 * scaling, contentRow.implicitHeight + (Style.marginM * scaling)) : Math.max(56 * scaling, contentRow.implicitHeight + (Style.marginL * scaling))
+    return Math.max(48 * scaling, contentRow.implicitHeight + (Style.marginL * scaling))
  }

  // Appearance - Style-dependent styling
@@ -104,8 +101,6 @@ Rectangle {
  color: {
    if (!enabled)
      return Qt.lighter(Color.mSurface, 1.1)
-    if (pressed)
-      return pressedColor
    if (hovered)
      return hoverColor
    return backgroundColor
@@ -128,14 +123,14 @@ Rectangle {

  Behavior on color {
    ColorAnimation {
-      duration: style === "classic" ? Style.animationNormal : Style.animationFast
+      duration: Style.animationFast
      easing.type: style === "classic" ? Easing.InOutQuad : Easing.OutCubic
    }
  }

  Behavior on border.color {
    ColorAnimation {
-      duration: style === "classic" ? Style.animationNormal : Style.animationFast
+      duration: Style.animationFast
      easing.type: style === "classic" ? Easing.InOutQuad : Easing.OutCubic
    }
  }
@@ -147,25 +142,6 @@ Rectangle {
    }
  }

-  // Hover scale effect
-  scale: hovered ? 1.02 : 1.0
-
-  // Subtle shadow/elevation effect
-  Rectangle {
-    anchors.fill: parent
-    radius: parent.radius
-    color: Qt.rgba(0, 0, 0, 0.1)
-    visible: active
-    z: -1
-
-    Behavior on color {
-      ColorAnimation {
-        duration: Style.animationFast
-        easing.type: Easing.OutCubic
-      }
-    }
-  }
-
  // Modern style - icon above text
  ColumnLayout {
    id: contentRow
@@ -198,7 +174,7 @@ Rectangle {
    // Text content
    NText {
      Layout.alignment: Qt.AlignHCenter
-      visible: root.text !== "" && !compact
+      visible: root.text !== ""
      text: root.text
      pointSize: root.fontSize
      font.weight: root.fontWeight
@@ -315,22 +291,25 @@ Rectangle {

    onPressed: mouse => {
                 root.pressed = true
-                 root.scale = 0.95
+                 root.scale = 0.92
                 if (tooltipText) {
                   TooltipService.hide()
                 }
               }

    onReleased: mouse => {
-                  root.pressed = false
                  root.scale = 1.0
+                  root.pressed = false

-                  if (mouse.button === Qt.LeftButton) {
-                    root.clicked()
-                  } else if (mouse.button === Qt.RightButton) {
-                    root.rightClicked()
-                  } else if (mouse.button === Qt.MiddleButton) {
-                    root.middleClicked()
+                  // Only trigger actions if released while hovering
+                  if (root.hovered) {
+                    if (mouse.button === Qt.LeftButton) {
+                      root.clicked()
+                    } else if (mouse.button === Qt.RightButton) {
+                      root.rightClicked()
+                    } else if (mouse.button === Qt.MiddleButton) {
+                      root.middleClicked()
+                    }
                  }
                }

@@ -343,55 +322,4 @@ Rectangle {
      }
    }
  }
-
-  Rectangle {
-    id: ripple
-    anchors.fill: parent
-    radius: parent.radius
-    color: Qt.rgba(1, 1, 1, 0.2)
-    scale: 0
-    opacity: 0
-    visible: false
-
-    SequentialAnimation {
-      id: rippleAnimation
-      running: false
-
-      ParallelAnimation {
-        NumberAnimation {
-          target: ripple
-          property: "scale"
-          from: 0
-          to: 1.2
-          duration: Style.animationNormal
-          easing.type: Easing.OutCubic
-        }
-        NumberAnimation {
-          target: ripple
-          property: "opacity"
-          from: 0.6
-          to: 0
-          duration: Style.animationNormal
-          easing.type: Easing.OutCubic
-        }
-      }
-    }
-  }
-
-  Connections {
-    target: root
-    function onClicked() {
-      ripple.visible = true
-      rippleAnimation.start()
-    }
-  }
-
-  Connections {
-    target: rippleAnimation
-    function onFinished() {
-      ripple.visible = false
-      ripple.scale = 0
-      ripple.opacity = 0
-    }
-  }
 }