Hide unnecessary edges from SpinBox style

LithApp · Oct 13, 2023 · dda02b3 · dda02b3
1 parent ba63467
commit dda02b3
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 4 deletions.
diff --git a/modules/Lith/Style/Button.qml b/modules/Lith/Style/Button.qml
@@ -75,7 +75,7 @@ T.Button {
 
     background: Rectangle {
         id: backgroundRect
-        radius: 3
+        radius: 3  // TODO make this a constant
         border.color: ColorUtils.mixColors(LithPalette.regular.button, LithPalette.regular.text, 0.9)
         border.width:  control.flat ? 0 : 0.5
         readonly property real themeQuotient: WindowHelper.lightTheme ? 0.0 : WindowHelper.useBlack ? 0.5 : 0.5

diff --git a/modules/Lith/Style/SpinBox.qml b/modules/Lith/Style/SpinBox.qml
@@ -1,6 +1,10 @@
 import QtQuick
 import QtQuick.Templates as T
 
+import Lith.UI
+import Lith.Style
+import Lith.Core
+
 T.SpinBox {
     id: control
 
@@ -23,11 +27,11 @@ T.SpinBox {
     }
 
     contentItem: TextField {
-        z: 2
         text: control.displayText
         clip: width < implicitWidth
         padding: 6
 
+        borderColor: backgroundColor
         font: control.font
         horizontalAlignment: Qt.AlignHCenter
         verticalAlignment: Qt.AlignVCenter
@@ -38,6 +42,7 @@ T.SpinBox {
     }
 
     up.indicator: Button {
+        z: 1
         x: control.mirrored ? 0 : control.width - width
         height: control.height
         implicitWidth: 40
@@ -47,6 +52,7 @@ T.SpinBox {
     }
 
     down.indicator: Button {
+        z: 1
         x: control.mirrored ? parent.width - width : 0
         height: control.height
         implicitWidth: 40
@@ -57,7 +63,15 @@ T.SpinBox {
 
     background: Rectangle {
         implicitWidth: 140
-        color: enabled ? control.LithPalette.regular.base : control.LithPalette.regular.button
-        border.color: control.LithPalette.regular.button
+        z: 2
+        color: "transparent"
+        radius: 3 // TODO make this a constant, should be same value as in Button
+        border.color: {
+            if (control.activeFocus)
+                return LithPalette.regular.midlight
+            return ColorUtils.mixColors(LithPalette.regular.button, LithPalette.regular.text, 0.9)
+        }
+        //color: enabled ? control.LithPalette.regular.base : control.LithPalette.regular.button
+        //border.color: control.LithPalette.regular.button
     }
 }