NME UI rework step1

nodeEditor/src/components/preview/previewMeshControlComponent.tsx

@@ -2,9 +2,10 @@
 import * as React from "react";
 import { GlobalState } from '../../globalState';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faCircle, faRing, faCube, faHockeyPuck, faSquareFull, faPlus, faDotCircle, faWindowRestore } from '@fortawesome/free-solid-svg-icons';
+import { faWindowRestore } from '@fortawesome/free-solid-svg-icons';
 import { PreviewMeshType } from './previewMeshType';
 import { DataStorage } from '../../dataStorage';
+import { OptionsLineComponent } from '../../sharedComponents/optionsLineComponent';
 
 interface IPreviewMeshControlComponent {
     globalState: GlobalState;
@@ -44,47 +45,42 @@ export class PreviewMeshControlComponent extends React.Component<IPreviewMeshCon
     }
 
     render() {
+
+        var meshTypeOptions = [
+            { label: "Cube", value: PreviewMeshType.Box },
+            { label: "Cylinder", value: PreviewMeshType.Cylinder },
+            { label: "Plane", value: PreviewMeshType.Plane },
+            { label: "Shader ball", value: PreviewMeshType.ShaderBall },
+            { label: "Sphere", value: PreviewMeshType.Sphere },
+            { label: "Load", value: PreviewMeshType.Custom + 1 }
+        ];
+
+        if (this.props.globalState.previewMeshType === PreviewMeshType.Custom) {
+            meshTypeOptions.splice(0, 0, {
+                label: "Custom", value: PreviewMeshType.Custom
+            });
+        }
+
         return (
             <div id="preview-mesh-bar">
-                <div
-                    title="Preview with a cube" 
-                    onClick={() => this.changeMeshType(PreviewMeshType.Box)} className={"button" + (this.props.globalState.previewMeshType === PreviewMeshType.Box ? " selected" : "")}>
-                    <FontAwesomeIcon icon={faCube} />
-                </div>
-                <div
-                    title="Preview with a sphere"  
-                    onClick={() => this.changeMeshType(PreviewMeshType.Sphere)} className={"button" + (this.props.globalState.previewMeshType === PreviewMeshType.Sphere ? " selected" : "")}>
-                    <FontAwesomeIcon icon={faCircle} />
-                </div>
-                <div
-                    title="Preview with a torus"  
-                    onClick={() => this.changeMeshType(PreviewMeshType.Torus)} className={"button" + (this.props.globalState.previewMeshType === PreviewMeshType.Torus ? " selected" : "")}>
-                    <FontAwesomeIcon icon={faRing} />
-                </div>
-                <div
-                    title="Preview with a cylinder"  
-                    onClick={() => this.changeMeshType(PreviewMeshType.Cylinder)} className={"button" + (this.props.globalState.previewMeshType === PreviewMeshType.Cylinder ? " selected" : "")}>
-                    <FontAwesomeIcon icon={faHockeyPuck} />
-                </div>
-                <div
-                    title="Preview with a plane"  
-                    onClick={() => this.changeMeshType(PreviewMeshType.Plane)} className={"button" + (this.props.globalState.previewMeshType === PreviewMeshType.Plane ? " selected" : "")}>
-                    <FontAwesomeIcon icon={faSquareFull} />
-                </div>      
-                <div
-                    title="Preview with a shader ball"  
-                    onClick={() => this.changeMeshType(PreviewMeshType.ShaderBall)} className={"button" + (this.props.globalState.previewMeshType === PreviewMeshType.ShaderBall ? " selected" : "")}>
-                    <FontAwesomeIcon icon={faDotCircle} />
-                </div>   
-                <div className={"button align"} title="Preview with a custom mesh" >
-                    <label htmlFor="file-picker" id="file-picker-label">
-                        <FontAwesomeIcon icon={faPlus} />
-                    </label>
+                <OptionsLineComponent label="" options={meshTypeOptions} target={this.props.globalState} 
+                            propertyName="previewMeshType"
+                            noDirectUpdate={true}
+                            onSelect={(value: any) => {
+                                if (value !== PreviewMeshType.Custom + 1) {
+                                    this.changeMeshType(value);
+                                } else {
+                                    document.getElementById("file-picker")?.click();
+                                }
+                            }} />    
+                <div style={{
+                    display: "none"
+                }} title="Preview with a custom mesh" >
                     <input ref="file-picker" id="file-picker" type="file" onChange={evt => this.useCustomMesh(evt)} accept=".gltf, .glb, .babylon, .obj"/>
                 </div>
                 <div
                     title="Open preview in new window" id="preview-new-window"
-                    onClick={() => this.onPopUp()} className="button">
+                    onClick={() => this.onPopUp()} className="button expand">
                     <FontAwesomeIcon icon={faWindowRestore} />
                 </div>                          
             </div>

nodeEditor/src/main.scss

@@ -99,19 +99,45 @@
     #preview-mesh-bar {
         grid-row: 2;
         grid-column: 1;
-        display: flex;
+        display: grid;
+        grid-template-columns: auto 1fr 40px;
         color: white;
         align-items: center;
-        font-size: 18px;    
+        font-size: 18px;  
 
         #file-picker {
             display: none;
         }
 
-        #file-picker-label {
-            width: 100%;
-            background: transparent;
-            cursor: pointer;            
+        .listLine {
+            grid-column: 1;
+            height: 30px;
+            display: grid;
+            grid-template-columns: 0px 1fr;  
+    
+            .label {
+                grid-column: 1;
+                display: flex;
+                align-items: center;
+                font-size: 14px;
+            }
+    
+            .options {
+                grid-column: 2;
+                
+                display: flex;
+                align-items: center;   
+                margin-left: 5px;
+    
+                select {
+                    width: 115px;
+                }
+            } 
+        }
+
+        .expand {
+            width: 40px;
+            grid-column: 3;
         }
     }