Merge branch 'github-main'

Widgets/NButton.qml

@@ -77,10 +77,12 @@ Rectangle {
   RowLayout {
     id: contentRow
     anchors.centerIn: parent
-    spacing: Style.marginS * scaling
+    spacing: Style.marginXS * scaling
 
     // Icon (optional)
     NIcon {
+      Layout.alignment: Qt.AlignVCenter
+      layoutTopMargin: 1 * scaling
       visible: root.icon !== ""
       text: root.icon
       font.pointSize: root.iconSize
@@ -105,6 +107,7 @@ Rectangle {
 
     // Text
     NText {
+      Layout.alignment: Qt.AlignVCenter
       visible: root.text !== ""
       text: root.text
       font.pointSize: root.fontSize

Widgets/NCheckbox.qml

@@ -27,6 +27,11 @@ RowLayout {
     visible: root.label !== "" || root.description !== ""
   }
 
+  // Spacer to push the checkbox to the far right
+  Item {
+    Layout.fillWidth: true
+  }
+
   Rectangle {
     id: box
 
@@ -39,13 +44,13 @@ RowLayout {
 
     Behavior on color {
       ColorAnimation {
-        duration: Style.animationNormal
+        duration: Style.animationFast
       }
     }
 
     Behavior on border.color {
       ColorAnimation {
-        duration: Style.animationNormal
+        duration: Style.animationFast
       }
     }
 

Widgets/NClock.qml

@@ -1,34 +0,0 @@
-import QtQuick
-import qs.Commons
-import qs.Services
-import qs.Widgets
-
-Rectangle {
-  id: root
-
-  signal entered
-  signal exited
-  signal clicked
-
-  width: textItem.paintedWidth
-  height: textItem.paintedHeight
-  color: Color.transparent
-
-  NText {
-    id: textItem
-    text: Time.time
-    anchors.centerIn: parent
-    font.pointSize: Style.fontSizeS * scaling
-    font.weight: Style.fontWeightBold
-  }
-
-  MouseArea {
-    id: clockMouseArea
-    anchors.fill: parent
-    cursorShape: Qt.PointingHandCursor
-    hoverEnabled: true
-    onEntered: root.entered()
-    onExited: root.exited()
-    onClicked: root.clicked()
-  }
-}

Widgets/NComboBox.qml

@@ -8,8 +8,7 @@ import qs.Widgets
 RowLayout {
   id: root
 
-  readonly property real preferredHeight: Style.baseWidgetSize * 1.1 * scaling
-  property real preferredWidth: 320 * scaling
+  property real minimumWidth: 280 * scaling
   property real popupHeight: 180 * scaling
 
   property string label: ""
@@ -20,9 +19,11 @@ RowLayout {
   property string currentKey: ""
   property string placeholder: ""
 
+  readonly property real preferredHeight: Style.baseWidgetSize * 1.1 * scaling
+
   signal selected(string key)
 
-  spacing: Style.marginS * scaling
+  spacing: Style.marginL * scaling
   Layout.fillWidth: true
 
   function findIndexByKey(key) {
@@ -39,11 +40,15 @@ RowLayout {
     description: root.description
   }
 
+  Item {
+    Layout.fillWidth: true
+  }
+
   ComboBox {
     id: combo
 
-    Layout.preferredWidth: root.preferredWidth
-    Layout.preferredHeight: height
+    Layout.minimumWidth: root.minimumWidth
+    Layout.preferredHeight: root.preferredHeight
     model: model
     currentIndex: findIndexByKey(currentKey)
     onActivated: {

Widgets/NIcon.qml

@@ -1,8 +1,11 @@
 import QtQuick
 import qs.Commons
 import qs.Widgets
+import QtQuick.Layouts
 
 Text {
+  // Optional layout nudge for optical alignment when used inside Layouts
+  property real layoutTopMargin: 0
   text: "question_mark"
   font.family: "Material Symbols Rounded"
   font.pointSize: Style.fontSizeL * scaling
@@ -12,4 +15,5 @@ Text {
   }
   color: Color.mOnSurface
   verticalAlignment: Text.AlignVCenter
+  Layout.topMargin: layoutTopMargin
 }

Widgets/NLabel.qml

@@ -20,6 +20,7 @@ ColumnLayout {
     font.capitalization: Font.Capitalize
     color: labelColor
     visible: label !== ""
+    Layout.fillWidth: true
   }
 
   NText {

Widgets/NPill.qml

@@ -14,6 +14,8 @@ Item {
   property color iconCircleColor: Color.mPrimary
   property color iconTextColor: Color.mSurface
   property color collapsedIconColor: Color.mOnSurface
+
+  property real iconRotation: 0
   property real sizeRatio: 0.8
   property bool autoHide: false
   property bool forceOpen: false
@@ -37,13 +39,13 @@ Item {
   property bool shouldAnimateHide: false
 
   // Exposed width logic
-  readonly property int pillHeight: Style.baseWidgetSize * sizeRatio * scaling
-  readonly property int iconSize: Style.baseWidgetSize * sizeRatio * scaling
-  readonly property int pillPaddingHorizontal: Style.marginM * scaling
+  readonly property int iconSize: Math.round(Style.baseWidgetSize * sizeRatio * scaling)
+  readonly property int pillHeight: iconSize
+  readonly property int pillPaddingHorizontal: Style.marginS * scaling
   readonly property int pillOverlap: iconSize * 0.5
   readonly property int maxPillWidth: Math.max(1, textItem.implicitWidth + pillPaddingHorizontal * 2 + pillOverlap)
 
-  width: iconSize + (effectiveShown ? maxPillWidth - pillOverlap : 0)
+  width: iconSize + Math.max(0, pill.width - pillOverlap)
   height: pillHeight
 
   Rectangle {
@@ -65,7 +67,13 @@ Item {
 
     NText {
       id: textItem
-      anchors.centerIn: parent
+      anchors.verticalCenter: parent.verticalCenter
+      x: {
+        // Little tweak to have a better text horizontal centering
+        var centerX = (parent.width - width) / 2
+        var offset = rightOpen ? Style.marginXS * scaling : -Style.marginXS * scaling
+        return centerX + offset
+      }
       text: root.text
       font.pointSize: Style.fontSizeXS * scaling
       font.weight: Style.fontWeightBold
@@ -97,9 +105,10 @@ Item {
     // When forced shown, match pill background; otherwise use accent when hovered
     color: forceOpen ? pillColor : (showPill ? iconCircleColor : Color.mSurfaceVariant)
     anchors.verticalCenter: parent.verticalCenter
+    border.width: Math.max(1, Style.borderS * scaling)
+    border.color: forceOpen ? Qt.alpha(Color.mOutline, 0.5) : Color.transparent
 
-    anchors.left: rightOpen ? parent.left : undefined
-    anchors.right: rightOpen ? undefined : parent.right
+    x: rightOpen ? 0 : (parent.width - width)
 
     Behavior on color {
       ColorAnimation {
@@ -110,6 +119,7 @@ Item {
 
     NIcon {
       text: root.icon
+      rotation: root.iconRotation
       font.pointSize: Style.fontSizeM * scaling
       // When forced shown, use pill text color; otherwise accent color when hovered
       color: forceOpen ? textColor : (showPill ? iconTextColor : Color.mOnSurface)

Widgets/NText.qml

@@ -13,4 +13,5 @@ Text {
   font.kerning: true
   color: Color.mOnSurface
   renderType: Text.QtRendering
+  verticalAlignment: Text.AlignVCenter
 }