react-split + office fabric

inspector/package.json

@@ -30,23 +30,25 @@
         "@fortawesome/react-fontawesome": "~0.1.3",
         "@types/react": "~16.4.18",
         "@types/react-dom": "~16.0.9",
+        "clean-webpack-plugin": "~0.1.19",
         "css-loader": "~1.0.0",
         "dts-bundle": "~0.7.3",
         "file-loader": "~2.0.0",
         "gulp": "~4.0.0",
         "gulp-webserver": "~0.9.1",
+        "mini-css-extract-plugin": "~0.4.4",
         "node-sass": "~4.9.4",
+        "office-ui-fabric-react": "^6.98.1",
         "re-resizable": "~4.9.1",
         "react": "~16.5.2",
         "react-dom": "~16.5.2",
+        "react-split": "^2.0.1",
         "sass-loader": "~7.1.0",
         "style-loader": "~0.23.1",
         "ts-loader": "^4.0.0",
         "typescript": "~3.1.3",
         "webpack": "~4.21.0",
         "webpack-cli": "~3.1.2",
-        "webpack-stream": "5.0.0",
-        "mini-css-extract-plugin": "~0.4.4",
-        "clean-webpack-plugin": "~0.1.19"
+        "webpack-stream": "5.0.0"
     }
-}
+}

inspector/src/components/actionTabs/actionTabs.scss

@@ -393,7 +393,7 @@
                     padding-left: 5px;
                     height: 30px;
                     display: grid;
-                    grid-template-columns: 1fr auto;
+                    grid-template-columns: 1fr 50px;
 
 
                     .label {
@@ -403,53 +403,7 @@
                     }
 
                     .checkBox {
-                        grid-column: 2;
-                        
-                        display: flex;
-                        align-items: center;
-
-                        .lbl {
-                            position: relative;
-                            display: block;
-                            height: 14px;
-                            width: 34px;
-                            margin-right: 10px;
-                            background: #898989;
-                            border-radius: 100px;
-                            cursor: pointer;
-                            transition: all 0.3s ease;
-                        }
-
-                        .lbl:after {
-                            position: absolute;
-                            left: -2px;
-                            top: -3px;
-                            display: block;
-                            width: 20px;
-                            height: 20px;
-                            border-radius: 100px;
-                            background: #fff;
-                            box-shadow: 0px 3px 3px rgba(0,0,0,0.05);
-                            content: '';
-                            transition: all 0.3s ease;
-                        }
-
-                        .lbl:active:after { 
-                            transform: scale(1.15, 0.85); 
-                        }
-
-                        .cbx:checked ~ label { 
-                            background: rgb(51, 122, 183);
-                        }
-
-                        .cbx:checked ~ label:after {
-                            left: 20px;
-                            background: rgb(22, 73, 117);
-                        }
-
-                        .hidden { 
-                            display: none; 
-                        }               
+                        grid-column: 2;                                          
                     }                    
                 }
 
@@ -566,7 +520,7 @@
                     padding-left: 5px;
                     height: 30px;
                     display: grid;
-                    grid-template-columns: 1fr auto;
+                    grid-template-columns: 1fr auto 100px;
 
 
                     .label {
@@ -575,45 +529,15 @@
                         align-items: center;
                     }
 
-                    .slider {
+                    .slider-value {
                         grid-column: 2;
-                        
                         display: flex;
                         align-items: center;
+                        margin-right: 5px;
+                    }                    
 
-                        .range {
-                            -webkit-appearance: none;
-                            width: 120px;
-                            height: 8px;
-                            background: #d3d3d3;
-                            border-radius: 5px;
-                            outline: none;
-                            opacity: 0.7;
-                            -webkit-transition: .2s;
-                            transition: opacity .2s;
-                        }
-                        
-                        .range:hover {
-                            opacity: 1;
-                        }
-                        
-                        .range::-webkit-slider-thumb {
-                            -webkit-appearance: none;
-                            appearance: none;
-                            width: 20px;
-                            height: 20px;
-                            border-radius: 50%;
-                            background: rgb(51, 122, 183);
-                            cursor: pointer;
-                        }
-                        
-                        .range::-moz-range-thumb {
-                            width: 20px;
-                            height: 20px;
-                            border-radius: 50%;
-                            background: rgb(51, 122, 183);
-                            cursor: pointer;
-                        }
+                    .slider {
+                        grid-column: 3;
                     }                    
                 }    
                 

inspector/src/components/actionTabs/lines/checkBoxLineComponent.tsx

@@ -1,6 +1,7 @@
 import * as React from "react";
 import { Observable } from "babylonjs";
 import { PropertyChangedEvent } from "../../propertyChangedEvent";
+import { Toggle } from 'office-ui-fabric-react/lib/Toggle';
 
 export interface ICheckBoxLineComponentProps {
     label: string,
@@ -12,14 +13,10 @@ export interface ICheckBoxLineComponentProps {
 }
 
 export class CheckBoxLineComponent extends React.Component<ICheckBoxLineComponentProps, { isSelected: boolean }> {
-    private static _UniqueIdSeed = 0;
-    private _uniqueId: number;
     private _localChange = false;
     constructor(props: ICheckBoxLineComponentProps) {
         super(props);
 
-        this._uniqueId = CheckBoxLineComponent._UniqueIdSeed++;
-
         if (this.props.isSelected) {
             this.state = { isSelected: this.props.isSelected() };
         } else {
@@ -67,10 +64,14 @@ export class CheckBoxLineComponent extends React.Component<ICheckBoxLineComponen
                 <div className="label">
                     {this.props.label}
                 </div>
-                <div className="checkBox">
-                    <input type="checkbox" id={"checkbox" + this._uniqueId} className="cbx hidden" checked={this.state.isSelected} onChange={() => this.onChange()} />
-                    <label htmlFor={"checkbox" + this._uniqueId} className="lbl"></label>
-                </div>
+                <Toggle
+                    className="checkBox"
+                    defaultChecked={this.state.isSelected}
+                    label=""
+                    onText="On"
+                    offText="Off"
+                    onChange={() => this.onChange()}
+                />
             </div>
         );
     }

inspector/src/components/actionTabs/lines/sliderLineComponent.tsx

@@ -1,6 +1,7 @@
 import * as React from "react";
 import { Observable } from "babylonjs";
 import { PropertyChangedEvent } from "../../propertyChangedEvent";
+import { Slider } from 'office-ui-fabric-react/lib/Slider';
 
 interface ISliderLineComponentProps {
     label: string,
@@ -31,9 +32,8 @@ export class SliderLineComponent extends React.Component<ISliderLineComponentPro
         return false;
     }
 
-    onChange(newValueString: any) {
+    onChange(newValue: any) {
         this._localChange = true;
-        const newValue = parseFloat(newValueString);
 
         if (this.props.onPropertyChangedObservable) {
             this.props.onPropertyChangedObservable.notifyObservers({
@@ -55,9 +55,20 @@ export class SliderLineComponent extends React.Component<ISliderLineComponentPro
                 <div className="label">
                     {this.props.label}
                 </div>
-                <div className="slider">
-                    {this.state.value.toFixed(2)}&nbsp;<input className="range" type="range" step={this.props.step} min={this.props.minimum} max={this.props.maximum} value={this.state.value} onChange={evt => this.onChange(evt.target.value)} />
+
+                <div className="slider-value">
+                    {this.state.value.toFixed(2)}
                 </div>
+                <Slider
+                    className="slider"
+                    label=""
+                    min={this.props.minimum}
+                    max={this.props.maximum}
+                    step={this.props.step}
+                    defaultValue={this.state.value}
+                    showValue={false}
+                    onChange={(value: any) => this.onChange(value)}
+                />
             </div>
         );
     }

inspector/src/components/embedHost/embedHost.scss

@@ -78,10 +78,13 @@
 
     #split {
         grid-row: 2;
-        display: grid;
-        grid-template-rows: 40% 60%;
         overflow: hidden;
 
+        .popup {
+            display: grid;
+            grid-template-rows: 40% 60%;
+        }
+
         #topPart {
             grid-row: 1;
             overflow: hidden;
@@ -94,5 +97,11 @@
             grid-row: 2;
             height: 100%;
         }        
+
+        .gutter.gutter-vertical {
+            background-image: none;
+            background: #444444;
+            cursor: row-resize;
+        }
     }
 }

inspector/src/components/embedHost/embedHostComponent.tsx

@@ -4,6 +4,7 @@ import Resizable from "re-resizable";
 import { SceneExplorerComponent } from "../sceneExplorer/sceneExplorerComponent";
 import { ActionTabsComponent } from "../actionTabs/actionTabsComponent";
 import { Scene, Observable } from "babylonjs";
+import Split from 'react-split';
 
 require("./embedHost.scss");
 
@@ -23,8 +24,25 @@ export class EmbedHostComponent extends React.Component<IEmbedHostComponentProps
     }
 
     renderContent() {
+        if (this.props.popupMode) {
+            return (
+                <div id="split" className="popup">
+                    <div id="topPart">
+                        <SceneExplorerComponent scene={this.props.scene}
+                            popupMode={true}
+                            onSelectionChangeObservable={this.props.onSelectionChangeObservable} noHeader={true} />
+                    </div>
+                    <div id="bottomPart" style={{ marginTop: "4px", overflow: "hidden" }}>
+                        <ActionTabsComponent scene={this.props.scene}
+                            popupMode={true}
+                            onSelectionChangeObservable={this.props.onSelectionChangeObservable} noHeader={true} />
+                    </div>
+                </div>
+            )
+        }
+
         return (
-            <div id="split">
+            <Split id="split" direction="vertical" gutterSize={5} cursor="grab" minSize={[300, 300]}>
                 <div id="topPart">
                     <SceneExplorerComponent scene={this.props.scene}
                         popupMode={true}
@@ -35,7 +53,7 @@ export class EmbedHostComponent extends React.Component<IEmbedHostComponentProps
                         popupMode={true}
                         onSelectionChangeObservable={this.props.onSelectionChangeObservable} noHeader={true} />
                 </div>
-            </div>
+            </Split>
         )
     }