From 84571682b0ecedf4e0421f3114a5a53134b50b31 Mon Sep 17 00:00:00 2001
From: David Ralph <ohlookitsderpy@protonmail.com>
Date: Mon, 26 Apr 2021 17:21:30 +0100
Subject: [PATCH] fix: slider text

---
 .../modals/main/scss/settings/_main.scss      | 16 +++++++--
 .../modals/main/settings/Slider.jsx           | 33 +++++++++++++------
 .../main/settings/sections/Appearance.jsx     |  2 +-
 3 files changed, 37 insertions(+), 14 deletions(-)

diff --git a/src/components/modals/main/scss/settings/_main.scss b/src/components/modals/main/scss/settings/_main.scss
index 865fd603..101e68ea 100644
--- a/src/components/modals/main/scss/settings/_main.scss
+++ b/src/components/modals/main/scss/settings/_main.scss
@@ -178,9 +178,19 @@ legend {
 }
 
 .sliderText {
-  background: none !important;
-  max-width: 30px;
-  padding: 0px 0px !important;
+  color: var(--modal-text);
+  background: none;
+  border: none;
   border-radius: 0;
   font-size: 1rem;
 }
+
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+input[type=number] {
+  -moz-appearance: textfield;
+}
diff --git a/src/components/modals/main/settings/Slider.jsx b/src/components/modals/main/settings/Slider.jsx
index b7acad60..c4905836 100644
--- a/src/components/modals/main/settings/Slider.jsx
+++ b/src/components/modals/main/settings/Slider.jsx
@@ -1,3 +1,4 @@
+// todo: find a better method to do width of number input
 import React from 'react';
 
 import EventBus from '../../../../modules/helpers/eventbus';
@@ -8,25 +9,36 @@ export default class Slider extends React.PureComponent {
   constructor(props) {
     super(props);
     this.state = {
-      value: localStorage.getItem(this.props.name) || ''
+      value: localStorage.getItem(this.props.name) || '',
+      numberWidth: ((localStorage.getItem(this.props.name).length + 1) * ((this.props.toast === true) ? 7.75 : 7))
     };
     this.language = window.language.modals.main.settings;
+    this.widthCalculation = (this.props.toast === true) ? 7.75 : 7;
   }
 
-  handleChange = (e) => {
+  handleChange = (e, text) => {
     let { value } = e.target;
 
-    if (value > this.props.max) {
-      value = this.props.max;
-    }
+    if (text) {
+      if (value.includes('.')) {
+        return this.setState({
+          value: this.state.value
+        });
+      }
 
-    if (value < this.props.min) {
-      value = this.props.min;
+      if (value > this.props.max) {
+        value = this.props.max;
+      }
+  
+      if (value < this.props.min) {
+        value = this.props.min;
+      }
     }
   
     localStorage.setItem(this.props.name, value);
     this.setState({
-      value: value
+      value: value,
+      numberWidth: ((value.length + 1) * this.widthCalculation)
     });
 
     EventBus.dispatch('refresh', this.props.category);
@@ -35,7 +47,8 @@ export default class Slider extends React.PureComponent {
   resetItem = () => {
     localStorage.setItem(this.props.name, this.props.default);
     this.setState({
-      value: this.props.default
+      value: this.props.default,
+      numberWidth: ((this.props.default.length + 1) * this.widthCalculation)
     });
 
     toast(window.language.toasts.reset);
@@ -43,7 +56,7 @@ export default class Slider extends React.PureComponent {
   }
 
   render() {
-    const text = <input className='sliderText' type='text' onChange={this.handleChange} value={this.state.value}/>;
+    const text = <input className='sliderText' type='number' min={this.props.min} max={this.props.max} onChange={(e) => this.handleChange(e, text)} value={this.state.value} style={{ width: this.state.numberWidth }}/>;
 
     return (
       <>
diff --git a/src/components/modals/main/settings/sections/Appearance.jsx b/src/components/modals/main/settings/sections/Appearance.jsx
index ea701f26..8d1b7ec1 100644
--- a/src/components/modals/main/settings/sections/Appearance.jsx
+++ b/src/components/modals/main/settings/sections/Appearance.jsx
@@ -61,7 +61,7 @@ export default function AppearanceSettings() {
       {(engineName === 'Blink') ? 
         <Slider title={appearance.accessibility.widget_zoom} name='widgetzoom' default='100' step='10' min='50' max='200' display='%' category='other'/> 
       : null}
-      <Slider title={appearance.accessibility.toast_duration} name='toastDisplayTime' default='2500' step='100' min='500' max='5000' display={' ' + appearance.accessibility.milliseconds} />
+      <Slider title={appearance.accessibility.toast_duration} name='toastDisplayTime' default='2500' step='100' min='500' max='5000' toast={true} display={' ' + appearance.accessibility.milliseconds} />
     </>
   );
 }