Settings: less wide + cleanup about

2025-12-06 06:36:15 +00:00 · 2025-08-31 21:35:41 -04:00
parent b0917f5a25
commit 102aca0fa0
4 changed files with 102 additions and 75 deletions
--- a/Modules/SettingsPanel/SettingsPanel.qml
+++ b/Modules/SettingsPanel/SettingsPanel.qml
@@ -11,8 +11,8 @@ import qs.Widgets
 NPanel {
  id: root

-  panelWidth: Math.max(screen?.width * 0.5, 1280) * scaling
-  panelHeight: Math.max(screen?.height * 0.5, 720) * scaling
+  panelWidth: Math.max(screen?.width * 0.4, 768) * scaling
+  panelHeight: Math.max(screen?.height * 0.75, 810) * scaling
  panelAnchorHorizontalCenter: true
  panelAnchorVerticalCenter: true

@@ -184,7 +184,7 @@ NPanel {

      Rectangle {
        id: sidebar
-        Layout.preferredWidth: Style.sliderWidth * 1.3 * scaling
+        Layout.preferredWidth: 220 * scaling
        Layout.fillHeight: true
        color: Color.mSurfaceVariant
        border.color: Color.mOutline
@@ -208,6 +208,19 @@ NPanel {
              readonly property bool selected: index === currentTabIndex
              property bool hovering: false
              property color tabTextColor: selected ? Color.mOnPrimary : (tabItem.hovering ? Color.mOnTertiary : Color.mOnSurface)
+
+              Behavior on color {
+                ColorAnimation {
+                  duration: Style.animationFast
+                }
+              }
+
+              Behavior on tabTextColor {
+                ColorAnimation {
+                  duration: Style.animationFast
+                }
+              }
+
              RowLayout {
                anchors.fill: parent
                anchors.leftMargin: Style.marginS * scaling
--- a/Modules/SettingsPanel/Tabs/AboutTab.qml
+++ b/Modules/SettingsPanel/Tabs/AboutTab.qml
@@ -46,6 +46,7 @@ ColumnLayout {
    Layout.bottomMargin: Style.marginS * scaling
  }

+  // Versions
  GridLayout {
    Layout.alignment: Qt.AlignCenter
    columns: 2
@@ -77,6 +78,7 @@ ColumnLayout {
    }
  }

+  // Updater
  Rectangle {
    Layout.alignment: Qt.AlignCenter
    Layout.topMargin: Style.marginS * scaling
@@ -137,96 +139,108 @@ ColumnLayout {
  NDivider {
    Layout.fillWidth: true
    Layout.topMargin: Style.marginXL * scaling
-    Layout.bottomMargin: Style.marginxL * scaling
+    Layout.bottomMargin: Style.marginXL * scaling
  }

  NText {
-    text: `Shout-out to our ${root.contributors.length} awesome contributors!`
+    text: `Shout-out to our ${root.contributors.length} <b>awesome</b> contributors!`
    font.pointSize: Style.fontSizeL * scaling
-    font.weight: Style.fontWeightBold
    color: Color.mOnSurface
    Layout.alignment: Qt.AlignCenter
-    Layout.topMargin: Style.marginL * 2
  }

-  ScrollView {
-    Layout.alignment: Qt.AlignCenter
-    Layout.preferredWidth: 200 * Style.marginXS * scaling
-    Layout.fillHeight: true
+  GridView {
+    id: contributorsGrid
+
    Layout.topMargin: Style.marginL * scaling
+    Layout.alignment: Qt.AlignHCenter
+    Layout.preferredWidth: cellWidth * 3 // Fixed 3 columns
+    Layout.preferredHeight: {
+      if (root.contributors.length === 0)
+        return 0
+      const columns = 3
+      const rows = Math.ceil(root.contributors.length / columns)
+      return rows * cellHeight
+    }
+    cellWidth: Style.baseWidgetSize * 7 * scaling
+    cellHeight: Style.baseWidgetSize * 3 * scaling
+    model: root.contributors
    clip: true
-    ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
-    ScrollBar.vertical.policy: ScrollBar.AsNeeded

-    GridView {
-      id: contributorsGrid
+    delegate: Rectangle {
+      width: contributorsGrid.cellWidth - Style.marginM * scaling
+      height: contributorsGrid.cellHeight - Style.marginM * scaling
+      radius: Style.radiusL * scaling
+      color: contributorArea.containsMouse ? Color.mTertiary : Color.transparent

-      anchors.fill: parent
-      width: 200 * 4 * scaling
-      height: Math.ceil(root.contributors.length / 4) * 100
-      cellWidth: Style.baseWidgetSize * 7.5 * scaling
-      cellHeight: Style.baseWidgetSize * 3.5 * scaling
-      model: root.contributors
+      Behavior on color {
+        ColorAnimation {
+          duration: Style.animationFast
+        }
+      }

-      delegate: Rectangle {
-        width: contributorsGrid.cellWidth - Style.marginM * scaling
-        height: contributorsGrid.cellHeight - Style.marginS * scaling
-        radius: Style.radiusL * scaling
-        color: contributorArea.containsMouse ? Color.mSecondary : Color.transparent
+      RowLayout {
+        anchors.fill: parent
+        anchors.margins: Style.marginS * scaling
+        spacing: Style.marginM * scaling

-        RowLayout {
-          anchors.fill: parent
-          anchors.margins: Style.marginS * scaling
-          spacing: Style.marginM * scaling
+        Item {
+          Layout.alignment: Qt.AlignVCenter
+          Layout.preferredWidth: Style.baseWidgetSize * 2 * scaling
+          Layout.preferredHeight: Style.baseWidgetSize * 2 * scaling

-          Item {
-            Layout.alignment: Qt.AlignVCenter
-            Layout.preferredWidth: Style.baseWidgetSize * 2 * scaling
-            Layout.preferredHeight: Style.baseWidgetSize * 2 * scaling
+          NImageCircled {
+            imagePath: modelData.avatar_url || ""
+            anchors.fill: parent
+            anchors.margins: Style.marginXS * scaling
+            fallbackIcon: "person"
+            borderColor: contributorArea.containsMouse ? Color.mOnTertiary : Color.mPrimary
+            borderWidth: Math.max(1, Style.borderM * scaling)

-            NImageCircled {
-              imagePath: modelData.avatar_url || ""
-              anchors.fill: parent
-              anchors.margins: Style.marginXS * scaling
-              fallbackIcon: "person"
-              borderColor: Color.mPrimary
-              borderWidth: Math.max(1, Style.borderM * scaling)
-            }
-          }
-
-          ColumnLayout {
-            spacing: Style.marginXS * scaling
-            Layout.alignment: Qt.AlignVCenter
-            Layout.fillWidth: true
-
-            NText {
-              text: modelData.login || "Unknown"
-              font.weight: Style.fontWeightBold
-              color: contributorArea.containsMouse ? Color.mSurface : Color.mOnSurface
-              elide: Text.ElideRight
-              Layout.fillWidth: true
-            }
-
-            NText {
-              text: (modelData.contributions || 0) + " " + ((modelData.contributions || 0) === 1 ? "commit" : "commits")
-              font.pointSize: Style.fontSizeXS * scaling
-              color: contributorArea.containsMouse ? Color.mSurface : Color.mOnSurface
+            Behavior on borderColor {
+              ColorAnimation {
+                duration: Style.animationFast
+              }
            }
          }
        }

-        MouseArea {
-          id: contributorArea
+        ColumnLayout {
+          spacing: Style.marginXS * scaling
+          Layout.alignment: Qt.AlignVCenter
+          Layout.fillWidth: true

-          anchors.fill: parent
-          hoverEnabled: true
-          cursorShape: Qt.PointingHandCursor
-          onClicked: {
-            if (modelData.html_url)
-              Quickshell.execDetached(["xdg-open", modelData.html_url])
+          NText {
+            text: modelData.login || "Unknown"
+            font.weight: Style.fontWeightBold
+            color: contributorArea.containsMouse ? Color.mSurface : Color.mOnSurface
+            elide: Text.ElideRight
+            Layout.fillWidth: true
          }
+
+          NText {
+            text: (modelData.contributions || 0) + " " + ((modelData.contributions || 0) === 1 ? "commit" : "commits")
+            font.pointSize: Style.fontSizeXS * scaling
+            color: contributorArea.containsMouse ? Color.mSurface : Color.mOnSurface
+          }
+        }
+      }
+
+      MouseArea {
+        id: contributorArea
+
+        anchors.fill: parent
+        hoverEnabled: true
+        cursorShape: Qt.PointingHandCursor
+        onClicked: {
+          if (modelData.html_url)
+            Quickshell.execDetached(["xdg-open", modelData.html_url])
        }
      }
    }
  }
+
+  Item {
+    Layout.fillHeight: true
+  }
 }
--- a/Modules/SettingsPanel/Tabs/ColorSchemeTab.qml
+++ b/Modules/SettingsPanel/Tabs/ColorSchemeTab.qml
@@ -180,9 +180,9 @@ ColumnLayout {

      // Color Schemes Grid
      GridLayout {
-        columns: 4
-        rowSpacing: Style.marginL * scaling
-        columnSpacing: Style.marginL * scaling
+        columns: 3
+        rowSpacing: Style.marginM * scaling
+        columnSpacing: Style.marginM * scaling
        Layout.fillWidth: true

        Repeater {
--- a/Modules/SettingsPanel/Tabs/WallpaperSelectorTab.qml
+++ b/Modules/SettingsPanel/Tabs/WallpaperSelectorTab.qml
@@ -100,7 +100,7 @@ ColumnLayout {
      interactive: false
      clip: true

-      property int columns: 5
+      property int columns: 4
      property int itemSize: Math.floor((width - leftMargin - rightMargin - (4 * Style.marginS * scaling)) / columns)

      cellWidth: Math.floor((width - leftMargin - rightMargin) / columns)
@@ -118,7 +118,7 @@ ColumnLayout {
        property bool isSelected: screen ? (wallpaperPath === WallpaperService.getWallpaper(screen.name)) : false

        width: wallpaperGridView.itemSize
-        height: Math.floor(wallpaperGridView.itemSize * 0.67)
+        height: Math.round(wallpaperGridView.itemSize * 0.67)
        color: Color.transparent

        // NImageCached relies on the image being visible to work properly.
@@ -179,7 +179,7 @@ ColumnLayout {
          anchors.fill: parent
          acceptedButtons: Qt.LeftButton
          hoverEnabled: true
-          onClicked: {
+          onPressed: {
            if (Settings.data.wallpaper.setWallpaperOnAllMonitors) {
              WallpaperService.changeWallpaper(undefined, wallpaperPath)
            } else if (screen) {