Fixed input field (#1130)

* fixed

* fixed

* fixed

client/modules/IDE/components/Preferences.jsx

@@ -29,10 +29,13 @@ class Preferences extends React.Component {
   }
 
   onFontInputChange(event) {
+    const INTEGER_REGEX = /^[0-9\b]+$/;
+    if (event.target.value === '' || INTEGER_REGEX.test(event.target.value)) {
       this.setState({
         fontSize: event.target.value
       });
     }
+  }
 
   onFontInputSubmit(event) {
     event.preventDefault();
@@ -151,10 +154,9 @@ class Preferences extends React.Component {
                   aria-atomic="true"
                   value={this.state.fontSize}
                   onChange={this.onFontInputChange}
+                  type="text"
                   ref={(element) => { this.fontSizeInput = element; }}
-                  onClick={() => {
+                  onClick={() => { this.fontSizeInput.select(); }}
-                    this.fontSizeInput.select();
-                  }}
                 />
               </form>
               <button

client/styles/components/_preferences.scss

@@ -5,7 +5,8 @@
   min-height: #{460 / $base-font-size}rem;
   max-height: 100%;
   z-index: 9999;
-  padding: 0 #{20 / $base-font-size}rem #{2 / $base-font-size}rem  #{20 / $base-font-size}rem ;
+  padding: 0 #{20 / $base-font-size}rem #{2 / $base-font-size}rem #{20 /
+    $base-font-size}rem;
   display: flex;
   flex-direction: column;
   outline: none;
@@ -47,7 +48,7 @@
   flex-direction: row;
   justify-content: space-between;
   @include themify() {
-    color: getThemifyVariable('heading-text-color');
+    color: getThemifyVariable("heading-text-color");
   }
 }
 
@@ -65,7 +66,7 @@
   flex-wrap: wrap;
   padding-bottom: #{0.1 / $base-font-size}rem;
   @include themify() {
-    border-bottom: 1px solid getThemifyVariable('button-border-color');
+    border-bottom: 1px solid getThemifyVariable("button-border-color");
   }
 }
 
@@ -75,7 +76,7 @@
   padding-bottom: #{12 / $base-font-size}rem;
   & + & {
     @include themify() {
-      border-top: 1px dashed getThemifyVariable('button-border-color');
+      border-top: 1px dashed getThemifyVariable("button-border-color");
     }
   }
 }
@@ -86,13 +87,13 @@
   margin-top: #{13 / $base-font-size}rem;
   margin-bottom: #{7 / $base-font-size}rem;
   @include themify() {
-    color: getThemifyVariable('heading-text-color');
+    color: getThemifyVariable("heading-text-color");
   }
 }
 
 .preference__subtitle {
   @include themify() {
-    color: getThemifyVariable('inactive-text-color');
+    color: getThemifyVariable("inactive-text-color");
   }
   width: 100%;
   margin-bottom: #{10 / $base-font-size}rem;
@@ -101,9 +102,10 @@
 
 .preference__value {
   @include themify() {
-    border: #{1 / $base-font-size}rem solid getThemifyVariable('button-border-color');
+    border: #{1 / $base-font-size}rem solid
-    background-color: getThemifyVariable('button-background-color');
+      getThemifyVariable("button-border-color");
-    color: getThemifyVariable('input-text-color');
+    background-color: getThemifyVariable("button-background-color");
+    color: getThemifyVariable("input-text-color");
   }
   text-align: center;
   border-radius: 0%;
@@ -118,11 +120,10 @@
 
 .preference__label {
   @include themify() {
-    color: getThemifyVariable('inactive-text-color');
+    color: getThemifyVariable("inactive-text-color");
     &:hover {
-      color: getThemifyVariable('primary-text-color');
+      color: getThemifyVariable("primary-text-color");
     }
-
   }
   margin: #{-15 / $base-font-size}rem 0 0 #{-5 / $base-font-size}rem;
   font-size: #{9 / $base-font-size}rem;
@@ -131,13 +132,14 @@
 
 .react-tabs__tab--selected {
   @include themify() {
-    border-bottom: #{4 / $base-font-size}rem solid getThemifyVariable('button-background-hover-color');
+    border-bottom: #{4 / $base-font-size}rem solid
+      getThemifyVariable("button-background-hover-color");
   }
 }
 
 .react-tabs__tab--selected .preference__subheading {
   @include themify() {
-    color: getThemifyVariable('primary-text-color');
+    color: getThemifyVariable("primary-text-color");
   }
 }
 
@@ -154,13 +156,14 @@
 
 .preference__subheading {
   @include themify() {
-    color: getThemifyVariable('inactive-text-color');
+    color: getThemifyVariable("inactive-text-color");
-    &:hover, &:focus{
+    &:hover,
-      color: getThemifyVariable('primary-text-color');
+    &:focus {
+      color: getThemifyVariable("primary-text-color");
       cursor: pointer;
     }
     &:focus {
-      color: getThemifyVariable('primary-text-color');
+      color: getThemifyVariable("primary-text-color");
       cursor: pointer;
     }
   }
@@ -186,8 +189,8 @@
   margin-top: #{40 / $base-font-size}rem;
   margin-bottom: #{10 / $base-font-size}rem;
   @include themify() {
-    color: getThemifyVariable('inactive-text-color');
+    color: getThemifyVariable("inactive-text-color");
-    border-bottom: 1px dashed getThemifyVariable('button-border-color');
+    border-bottom: 1px dashed getThemifyVariable("button-border-color");
   }
 }
 
@@ -195,6 +198,12 @@
   @extend %hidden-element;
 }
 
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
 .preference__option {
   @include themify() {
     @extend %preference-option;
@@ -213,7 +222,7 @@
   @include themify() {
     @extend %preference-option;
     &:hover {
-      color: getThemifyVariable('button-background-hover-color');
+      color: getThemifyVariable("button-background-hover-color");
     }
   }
   margin-left: #{30 / $base-font-size}rem;
@@ -233,7 +242,7 @@
 .preference__radio-button:checked + .preference__option {
   @include themify() {
     //for some reason this won't work for getThemifyVariable
-    color: map-get($theme-map, 'primary-text-color');
+    color: map-get($theme-map, "primary-text-color");
   }
 }