frontend: Improve spin box UX

Warchamp7 · Warchamp7 · commit e86a35bc45cc · 2025-11-01T00:34:16.000-04:00
diff --git a/frontend/CMakeLists.txt b/frontend/CMakeLists.txt
@@ -26,6 +26,10 @@ if(NOT TARGET OBS::bpm)
   add_subdirectory("${CMAKE_SOURCE_DIR}/shared/bpm" bpm)
 endif()
 
+if(NOT TARGET OBS::qt-clamped-doublespinbox)
+  add_subdirectory("${CMAKE_SOURCE_DIR}/shared/qt/clamped-doublespinbox" clamped-doublespinbox)
+endif()
+
 add_executable(obs-studio)
 add_executable(OBS::studio ALIAS obs-studio)
 
@@ -40,6 +44,7 @@ target_link_libraries(
     OBS::frontend-api
     OBS::json11
     OBS::bpm
+    OBS::qt-clamped-doublespinbox
 )
 
 include(cmake/ui-components.cmake)
diff --git a/frontend/data/themes/Yami.obt b/frontend/data/themes/Yami.obt
@@ -135,6 +135,7 @@
 
     --padding_base_border: calc(var(--padding_base) + 1px);
 
+    --spinbox_min_width: calc(var(--input_height) * 2.5);
     --spinbox_button_height: calc(var(--input_height_half) - 1px);
 
     --volume_slider: calc(calc(4px + var(--font_base_value)) / 4);
@@ -1215,8 +1216,11 @@ QDoubleSpinBox {
     border: var(--input_border_width) solid var(--input_bg);
     border-radius: var(--border_radius);
     padding: var(--input_padding) var(--input_text_padding);
+    padding-right: var(--padding_base);
+
     height: var(--input_height);
     max-height: var(--input_height);
+    min-width: var(--spinbox_min_width);
 }
 
 QSpinBox:hover,
diff --git a/frontend/dialogs/OBSBasicTransform.cpp b/frontend/dialogs/OBSBasicTransform.cpp
@@ -1,6 +1,7 @@
 #include "OBSBasicTransform.hpp"
 
 #include <widgets/OBSBasic.hpp>
+#include "ClampedDoubleSpinBox.hpp"
 
 #include "moc_OBSBasicTransform.cpp"
 
diff --git a/frontend/forms/OBSBasicSettings.ui b/frontend/forms/OBSBasicSettings.ui
@@ -489,7 +489,7 @@
                     </widget>
                    </item>
                    <item row="1" column="1">
-                    <widget class="QDoubleSpinBox" name="snapDistance">
+                    <widget class="ClampedDoubleSpinBox" name="snapDistance">
                      <property name="decimals">
                       <number>1</number>
                      </property>
@@ -8703,19 +8703,24 @@
  </widget>
  <customwidgets>
   <customwidget>
-   <class>UrlPushButton</class>
-   <extends>QPushButton</extends>
-   <header>components/UrlPushButton.hpp</header>
+   <class>ClampedDoubleSpinBox</class>
+   <extends>QDoubleSpinBox</extends>
+   <header>ClampedDoubleSpinBox.hpp</header>
+  </customwidget>
+  <customwidget>
+   <class>AbsoluteSlider</class>
+   <extends>QSlider</extends>
+   <header>components/AbsoluteSlider.hpp</header>
   </customwidget>
   <customwidget>
    <class>OBSHotkeyEdit</class>
    <extends>QLineEdit</extends>
    <header>settings/OBSHotkeyEdit.hpp</header>
   </customwidget>
   <customwidget>
-   <class>AbsoluteSlider</class>
-   <extends>QSlider</extends>
-   <header>components/AbsoluteSlider.hpp</header>
+   <class>UrlPushButton</class>
+   <extends>QPushButton</extends>
+   <header>components/UrlPushButton.hpp</header>
   </customwidget>
  </customwidgets>
  <tabstops>
diff --git a/frontend/forms/OBSBasicTransform.ui b/frontend/forms/OBSBasicTransform.ui
@@ -88,7 +88,7 @@
           <number>0</number>
          </property>
          <item>
-          <widget class="QDoubleSpinBox" name="positionX">
+          <widget class="ClampedDoubleSpinBox" name="positionX">
            <property name="minimumSize">
             <size>
              <width>120</width>
@@ -119,7 +119,7 @@
           </widget>
          </item>
          <item>
-          <widget class="QDoubleSpinBox" name="positionY">
+          <widget class="ClampedDoubleSpinBox" name="positionY">
            <property name="minimumSize">
             <size>
              <width>120</width>
@@ -163,7 +163,7 @@
        </widget>
       </item>
       <item row="1" column="1">
-       <widget class="QDoubleSpinBox" name="rotation">
+       <widget class="ClampedDoubleSpinBox" name="rotation">
         <property name="sizePolicy">
          <sizepolicy hsizetype="Maximum" vsizetype="Fixed">
           <horstretch>0</horstretch>
@@ -231,7 +231,7 @@
           <number>0</number>
          </property>
          <item>
-          <widget class="QDoubleSpinBox" name="sizeX">
+          <widget class="ClampedDoubleSpinBox" name="sizeX">
            <property name="minimumSize">
             <size>
              <width>120</width>
@@ -265,7 +265,7 @@
           </widget>
          </item>
          <item>
-          <widget class="QDoubleSpinBox" name="sizeY">
+          <widget class="ClampedDoubleSpinBox" name="sizeY">
            <property name="minimumSize">
             <size>
              <width>120</width>
@@ -531,7 +531,7 @@
           <number>0</number>
          </property>
          <item>
-          <widget class="QDoubleSpinBox" name="boundsWidth">
+          <widget class="ClampedDoubleSpinBox" name="boundsWidth">
            <property name="enabled">
             <bool>false</bool>
            </property>
@@ -565,7 +565,7 @@
           </widget>
          </item>
          <item>
-          <widget class="QDoubleSpinBox" name="boundsHeight">
+          <widget class="ClampedDoubleSpinBox" name="boundsHeight">
            <property name="enabled">
             <bool>false</bool>
            </property>
@@ -852,6 +852,13 @@
    </item>
   </layout>
  </widget>
+ <customwidgets>
+  <customwidget>
+   <class>ClampedDoubleSpinBox</class>
+   <extends>QDoubleSpinBox</extends>
+   <header>ClampedDoubleSpinBox.hpp</header>
+  </customwidget>
+ </customwidgets>
  <resources/>
  <connections>
   <connection>
diff --git a/shared/properties-view/CMakeLists.txt b/shared/properties-view/CMakeLists.txt
@@ -28,6 +28,13 @@ if(NOT TARGET OBS::qt-icon-label)
   add_subdirectory("${CMAKE_SOURCE_DIR}/shared/qt/icon-label" "${CMAKE_BINARY_DIR}/shared/qt/icon-label")
 endif()
 
+if(NOT TARGET OBS::qt-clamped-doublespinbox)
+  add_subdirectory(
+    "${CMAKE_SOURCE_DIR}/shared/qt/clamped-doublespinbox"
+    "${CMAKE_BINARY_DIR}/shared/qt/clamped-doublespinbox"
+  )
+endif()
+
 add_library(properties-view INTERFACE)
 add_library(OBS::properties-view ALIAS properties-view)
 
@@ -51,6 +58,7 @@ target_link_libraries(
     OBS::libobs
     OBS::qt-wrappers
     OBS::qt-plain-text-edit
+    OBS::qt-clamped-doublespinbox
     OBS::qt-vertical-scroll-area
     OBS::qt-slider-ignorewheel
     OBS::qt-icon-label
diff --git a/shared/properties-view/properties-view.cpp b/shared/properties-view/properties-view.cpp
@@ -25,6 +25,7 @@
 #include <QObject>
 #include <QDesktopServices>
 #include <QUuid>
+#include "ClampedDoubleSpinBox.hpp"
 #include "double-slider.hpp"
 #include "spinbox-ignorewheel.hpp"
 #include "moc_properties-view.cpp"
@@ -479,7 +480,7 @@ void OBSPropertiesView::AddFloat(obs_property_t *prop, QFormLayout *layout, QLab
 
 	const char *name = obs_property_name(prop);
 	double val = obs_data_get_double(settings, name);
-	QDoubleSpinBox *spin = new QDoubleSpinBox();
+	ClampedDoubleSpinBox *spin = new ClampedDoubleSpinBox();
 
 	if (!obs_property_enabled(prop))
 		spin->setEnabled(false);
@@ -512,8 +513,8 @@ void OBSPropertiesView::AddFloat(obs_property_t *prop, QFormLayout *layout, QLab
 		slider->setOrientation(Qt::Horizontal);
 		subLayout->addWidget(slider);
 
-		connect(slider, &DoubleSlider::doubleValChanged, spin, &QDoubleSpinBox::setValue);
-		connect(spin, &QDoubleSpinBox::valueChanged, slider, &DoubleSlider::setDoubleVal);
+		connect(slider, &DoubleSlider::doubleValChanged, spin, &ClampedDoubleSpinBox::setValue);
+		connect(spin, &ClampedDoubleSpinBox::valueChanged, slider, &DoubleSlider::setDoubleVal);
 	}
 
 	connect(spin, &QDoubleSpinBox::valueChanged, info, &WidgetInfo::ControlChanged);
diff --git a/shared/qt/clamped-doublespinbox/CMakeLists.txt b/shared/qt/clamped-doublespinbox/CMakeLists.txt
@@ -0,0 +1,11 @@
+cmake_minimum_required(VERSION 3.28...3.30)
+
+find_package(Qt6 REQUIRED Core Widgets)
+
+add_library(qt-clamped-doublespinbox INTERFACE)
+add_library(OBS::qt-clamped-doublespinbox ALIAS qt-clamped-doublespinbox)
+
+target_sources(qt-clamped-doublespinbox INTERFACE ClampedDoubleSpinBox.cpp ClampedDoubleSpinBox.hpp)
+target_include_directories(qt-clamped-doublespinbox INTERFACE "${CMAKE_CURRENT_SOURCE_DIR}")
+
+target_link_libraries(qt-clamped-doublespinbox INTERFACE Qt::Core Qt::Widgets)
diff --git a/shared/qt/clamped-doublespinbox/ClampedDoubleSpinBox.cpp b/shared/qt/clamped-doublespinbox/ClampedDoubleSpinBox.cpp
diff --git a/shared/qt/clamped-doublespinbox/ClampedDoubleSpinBox.hpp b/shared/qt/clamped-doublespinbox/ClampedDoubleSpinBox.hpp
