Adjust temperature & humidity widgets for finer increments (#2200)

GladysAssistant · Jan 24, 2025 · 66c3dbb · 66c3dbb
1 parent 4df3ab3
commit 66c3dbb
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 11 deletions.
diff --git a/front/src/components/boxs/room-humidity/EditRoomHumidityBox.jsx b/front/src/components/boxs/room-humidity/EditRoomHumidityBox.jsx
@@ -11,7 +11,7 @@ const updateBoxRoom = (updateBoxRoomFunc, x, y) => room => {
   updateBoxRoomFunc(x, y, room.selector);
 };
 
-const EditRoomHumidityBox = ({ children, ...props }) => (
+const EditRoomHumidityBox = ({ children, unit, ...props }) => (
   <BaseEditBox {...props} titleKey="dashboard.boxTitle.humidity-in-room">
     <div class="form-group">
       <label>
@@ -22,7 +22,7 @@ const EditRoomHumidityBox = ({ children, ...props }) => (
         updateRoomSelection={updateBoxRoom(props.updateBoxRoom, props.x, props.y)}
       />
     </div>
-    <div className="form-group form-check">
+    <div className="form-group form-check mb-5">
       <label className="form-check-label">
         <input
           type="checkbox"
@@ -35,17 +35,38 @@ const EditRoomHumidityBox = ({ children, ...props }) => (
       </label>
     </div>
 
-    <div class="form-group">
+    <div class="form-group mb-2">
       <ReactSlider
         className={cx('humidity-slider', {
           'opacity-60': !(props.box.humidity_use_custom_value || false)
         })}
         thumbClassName="humidity-slider-thumb"
         trackClassName="humidity-slider-track"
         defaultValue={[props.humidityMin, props.humidityMax]}
-        renderThumb={(props, state) => <div {...props}>{state.valueNow}%</div>}
+        renderThumb={(props, state) => (
+          <div
+            {...props}
+            style={{
+              ...props.style,
+              transform: `translate( ${state.index === 0 ? '-75%' : '-25%'}, ${state.index === 0 ? '90%' : '-90%'})`
+            }}
+          >
+            <div
+              className={`absolute ${state.index === 0 ? 'bottom-0' : 'top-0'}
+                left-1/2
+                -translate-x-1/2
+                whitespace-nowrap`}
+            >
+              <Text id="global.percentValue" fields={{ value: state.valueNow }} />
+              <Text id={`global.${unit}`} />
+            </div>
+          </div>
+        )}
+        // renderThumb={(props, state) => <div {...props}>{state.valueNow}%</div>}
         pearling
-        minDistance={10}
+        minDistance={1}
+        max={100}
+        min={0}
         onAfterChange={props.updateBoxValue}
         value={[props.humidityMin, props.humidityMax]}
         disabled={!(props.box.humidity_use_custom_value || false)}

diff --git a/front/src/components/boxs/room-temperature/EditRoomTemperatureBox.jsx b/front/src/components/boxs/room-temperature/EditRoomTemperatureBox.jsx
@@ -24,7 +24,7 @@ const EditRoomTemperatureBox = ({ children, unit, ...props }) => (
         updateRoomSelection={updateBoxRoom(props.updateBoxRoom, props.x, props.y)}
       />
     </div>
-    <div className="form-group form-check">
+    <div className="form-group form-check mb-5">
       <label className="form-check-label">
         <input
           type="checkbox"
@@ -36,7 +36,7 @@ const EditRoomTemperatureBox = ({ children, unit, ...props }) => (
         <Text id="dashboard.boxes.temperatureInRoom.thresholdsLabel" />
       </label>
     </div>
-    <div class="form-group">
+    <div class="form-group mb-2">
       <ReactSlider
         className={cx('temperature-slider', {
           'opacity-60': !(props.box.temperature_use_custom_value || false)
@@ -45,13 +45,26 @@ const EditRoomTemperatureBox = ({ children, unit, ...props }) => (
         trackClassName="temperature-slider-track"
         defaultValue={[props.temperatureMin, props.temperatureMax]}
         renderThumb={(props, state) => (
-          <div {...props}>
-            <Text id="global.degreeValue" fields={{ value: state.valueNow }} />
-            <Text id={`global.${unit}`} />
+          <div
+            {...props}
+            style={{
+              ...props.style,
+              transform: `translate( ${state.index === 0 ? '-75%' : '-25%'}, ${state.index === 0 ? '90%' : '-90%'})`
+            }}
+          >
+            <div
+              className={`absolute ${state.index === 0 ? 'bottom-0' : 'top-0'}
+                left-1/2
+                -translate-x-1/2
+                whitespace-nowrap`}
+            >
+              <Text id="global.degreeValue" fields={{ value: state.valueNow }} />
+              <Text id={`global.${unit}`} />
+            </div>
           </div>
         )}
         pearling
-        minDistance={10}
+        minDistance={1}
         max={unit === DEVICE_FEATURE_UNITS.CELSIUS ? 50 : 122}
         min={unit === DEVICE_FEATURE_UNITS.CELSIUS ? -20 : -4}
         onAfterChange={props.updateBoxValue}