Merge pull request #2931 from QuentinRillet/master

Fix height canvas

inspector/sass/_slider.scss

@@ -1,118 +1,74 @@
-$track-color: #3ca9f1 !default;
-$thumb-color: $color-bot !default;
+$thumb-height: 15px;
 
-$thumb-radius: 0px !default;
-$thumb-height: 14px !default;
-$thumb-width: 7px !default;
-$thumb-shadow-size: 1px !default;
-$thumb-shadow-blur: 1px !default;
-$thumb-shadow-color: rgba(0, 0, 0, .2) !default;
-$thumb-border-width: 1px !default;
-$thumb-border-color: $color-bot !default;
-
-$track-width: 50% !default;
-$track-height: 5px !default;
-$track-shadow-size: 1px !default;
-$track-shadow-blur: 1px !default;
-$track-shadow-color: rgba(0, 0, 0, .2) !default;
-$track-border-width: 1px !default;
-$track-border-color: $color-bot !default;
-
-$track-radius: 5px !default;
-$contrast: 5% !default;
-
-@mixin shadow($shadow-size, $shadow-blur, $shadow-color) {
-  box-shadow: $shadow-size $shadow-size $shadow-blur $shadow-color, 0 0 $shadow-size lighten($shadow-color, 5%);
-}
-
-@mixin track {
+input[type="range"] { 
+  margin: auto;
+  -webkit-appearance: none;
+  position: relative;
+  overflow: hidden;
+  height: $thumb-height;
+  width: 50%;
   cursor: pointer;
-  height: $track-height;
-  transition: all .2s ease;
-  width: $track-width;
+  border-radius: 0; /* iOS */
 }
 
-@mixin thumb {
-  @include shadow($thumb-shadow-size, $thumb-shadow-blur, $thumb-shadow-color);
-  background: $thumb-color;
-  border: $thumb-border-width solid $thumb-border-color;
-  border-radius: $thumb-radius;
-  cursor: pointer;
-  height: $thumb-height;
-  width: $thumb-width;
+::-webkit-slider-runnable-track {
+  background: #ddd;
 }
 
-[type='range'] {
+/*
+* 1. Set to 0 height and width, and remove border for a slider without a thumb
+*/
+::-webkit-slider-thumb {
   -webkit-appearance: none;
-  margin: $thumb-height / 2 0;
-  width: $track-width;
-
-  &:focus {
-    outline: 0;
-
-    &::-webkit-slider-runnable-track {
-      background: lighten($track-color, $contrast);
-    }
-
-    &::-ms-fill-lower {
-      background: $track-color;
-    }
-
-    &::-ms-fill-upper {
-      background: lighten($track-color, $contrast);
-    }
-  }
+  width: 20px; /* 1 */
+  height: $thumb-height; /* 1 */
+  background: #fff;
+  box-shadow: -100vw 0 0 100vw dodgerblue;
+  border: 0px solid #999; /* 1 */
+}
 
-  &::-webkit-slider-runnable-track {
-    @include track;
-    @include shadow($track-shadow-size, $track-shadow-blur, $track-shadow-color);
-    background: $track-color;
-    border: $track-border-width solid $track-border-color;
-    border-radius: $track-radius;
-  }
+::-moz-range-track {
+  height: $thumb-height;
+  background: #ddd;
+}
 
-  &::-webkit-slider-thumb {
-    @include thumb;
-    -webkit-appearance: none;
-    margin-top: ((-$track-border-width * 2 + $track-height) / 2) - ($thumb-height / 2);
-  }
+::-moz-range-thumb {
+  background: #fff;
+  height: $thumb-height;
+  width: 20px;
+  border: 0px solid #999;
+  border-radius: 0 !important;
+  box-shadow: -100vw 0 0 100vw dodgerblue;
+  box-sizing: border-box;
+}
 
-  &::-moz-range-track {
-    @include track;
-    @include shadow($track-shadow-size, $track-shadow-blur, $track-shadow-color);
-    background: $track-color;
-    border: $track-border-width solid $track-border-color;
-    border-radius: $track-radius;
-  }
+::-ms-fill-lower { 
+  background: dodgerblue;
+}
 
-  &::-moz-range-thumb {
-    @include thumb;
-  }
+::-ms-thumb { 
+  background: #fff;
+  border: 0px solid #999;
+  height: $thumb-height;
+  width: 20px;
+  box-sizing: border-box;
+}
 
-  &::-ms-track {
-    @include track;
-    background: transparent;
-    border-color: transparent;
-    border-width: ($thumb-height / 2) 0;
-    color: transparent;
-  }
+::-ms-ticks-after { 
+  display: none; 
+}
 
-  &::-ms-fill-lower {
-    @include shadow($track-shadow-size, $track-shadow-blur, $track-shadow-color);
-    background: darken($track-color, $contrast);
-    border: $track-border-width solid $track-border-color;
-    border-radius: $track-radius * 2;
-  }
+::-ms-ticks-before { 
+  display: none; 
+}
 
-  &::-ms-fill-upper {
-    @include shadow($track-shadow-size, $track-shadow-blur, $track-shadow-color);
-    background: $track-color;
-    border: $track-border-width solid $track-border-color;
-    border-radius: $track-radius * 2;
-  }
+::-ms-track { 
+  background: #ddd;
+  color: transparent;
+  height: $thumb-height;
+  border: none;
+}
 
-  &::-ms-thumb {
-    @include thumb;
-    margin-top: 0;
-  }
+::-ms-tooltip { 
+  display: none;
 }

inspector/src/details/PropertyLine.ts

@@ -88,6 +88,9 @@ module INSPECTOR {
         private _onMouseDragHandler: EventListener;
         private _onMouseUpHandler: EventListener;
 
+        private _sliderfill: HTMLElement;
+        private _slidertrack: HTMLElement;
+
         private _textValue: HTMLElement;
         /** Save previous Y mouse position */
         private _prevY: number;
@@ -495,7 +498,7 @@ module INSPECTOR {
                 })
 
                 this._textValue = Helpers.CreateDiv('value-text', this._valueDiv);
-                this._textValue.innerText = this.value;
+                this._textValue.innerText = Helpers.Trunc(this.value).toString();
                 this._textValue.style.paddingLeft = '10px';
                 this._textValue.style.display = 'inline-block';
             }
@@ -503,6 +506,7 @@ module INSPECTOR {
 
         private _rangeHandler() {
             Scheduler.getInstance().pause = true;
+            //this._input.style.backgroundSize = ((parseFloat(this._input.value) - parseFloat(this._input.min)) * 100 / ( parseFloat(this._input.max) - parseFloat(this._input.min))) + '% 100%'
             this._textValue.innerText = this._input.value;
             this.validateInput(this._input.value, false);
         }

inspector/src/properties.ts

@@ -134,7 +134,9 @@ module INSPECTOR {
                 'checkCollisions'
             ],
             slider: {
-                alpha: {min: 0, max: 1, step: 0.01}
+                alpha: {min: 0, max: 2*Math.PI, step: 0.01},
+                beta: {min: -Math.PI, max: Math.PI, step: 0.01},
+                fov: {min: 0, max: 180, step: 1}
             }
         },
         'FreeCamera': {
@@ -165,7 +167,10 @@ module INSPECTOR {
                 'orthoTop',
                 'orthoLeft',
                 'orthoRight'
-            ]
+            ],
+            slider: {
+                fov: {min: 0, max: 180, step: 1}
+            }
         },
         'Scene': {
             type: BABYLON.Scene,
@@ -227,7 +232,10 @@ module INSPECTOR {
                 'checkCollisions',
                 'hasLODLevels'
             ],
-            format: (m: BABYLON.Mesh): string => { return m.name; }
+            format: (m: BABYLON.Mesh): string => { return m.name; },
+            slider: {
+                visibility: {min: 0, max: 1, step: 0.1}
+            }
         },
         'StandardMaterial': {
             type: BABYLON.StandardMaterial,

sandbox/index.css

@@ -54,7 +54,7 @@ a {
 #renderCanvas {
     position: absolute;
     width: 100%;
-    height: 93.3%;
+    height: 100%;
     top: 0;
     margin-bottom: 70px;
     touch-action: none;