adjustments to the UI for the adding

nodeEditor/src/components/nodeList/nodeList.scss

@@ -76,89 +76,79 @@
                     }
                 }
 
-                .withButton {
-                    height: 40px;
-                    position: relative;
-                    fill: white;
-                    .icon {
-                        position: absolute;
-                        right: 10px;
-                        top: 10px;
-                        fill: white;
-                    }
-                    
-                }
-            
-                .buttonLine {
+                .nonDraggableLine {
                     height: 30px;
                     display: grid;
                     align-items: center;
                     justify-items: stretch;
-
-                    button {
-                        background: #222222;
-                        margin: 5px 10px 5px 10px;
-                        color:white;
-                        padding: 4px 5px;
-                        opacity: 0.9;
-                    }
-
-                    button:hover {
-                        opacity: 1.0;
-                    }
-
-                    button:active {
-                        background: #282828;
-                    }   
-                    
-                    button:focus {
-                        outline: 0px;
-                    }  
+                    background: #222222;
+                    text-align: center;
+                    margin: 0;
+                    box-sizing: border-box;
                 }
 
-                .buttonIcon {
+                .withButton {
+                    height: 40px;
                     position: relative;
                     .icon {
                         position: absolute;
-                        right: 20px;
-                        top:  3px;
+                        right: 10px;
+                        top: 10px;
                     }
 
-                    height: 30px;
-                    display: grid;
-                    align-items: center;
-                    justify-items: stretch;
-                    padding-bottom: 5px;
-            
-                    input[type="file"] {
-                        display: none;
-                    }
-            
-                    .file-upload {    
-                        position: absolute;           
-                        background: transparent;
-                        border: 1px transparent;
-                        margin: 5px 10px;
-                        color:transparent;
-                        padding: 15px 5px 0px 15px;
-                        opacity: 0.9;
-                        cursor: pointer;
-                        text-align: center;
-                        display: inline-block;
-                        z-index: 1;
-                        right: 20px;
-                        top:  2px;
-                    }
-            
-                    .file-upload:hover {
-                        opacity: 0.0;
-                    }
-            
-                    .file-upload:active {
-                        transform: scale(0.98);
-                        transform-origin: 0.5 0.5;
+                    .buttonLine {
+                       
+                        position: absolute;
+                        right: 10px;
+                        top: 10px;
+                        input[type="file"] {
+                            display: none;
+                        }
+                
+                        .file-upload {            
+                            background: transparent;
+                            border: transparent;
+                            margin: 0px 0px;
+                            color:white;
+                            padding: 0px 0px 5px 20px;
+                            opacity: 0.9;
+                            cursor: pointer;
+                            text-align: center;
+                        }
+                
+                        .file-upload:hover {
+                            opacity: 1.0;
+                        }
+                
+                        .file-upload:active {
+                            transform: scale(0.98);
+                            transform-origin: 0.5 0.5;
+                        }
+                
+                        button {
+                            background: transparent;
+                            border: transparent;
+                            margin: 5px 10px 5px 10px;
+                            color:white;
+                            padding: 4px 5px;
+                            opacity: 0.9;
+                        }
+                
+                        button:hover {
+                            opacity: 0.0;
+                        }
+                
+                        button:active {
+                            background: transparent;
+                        }   
+                        
+                        button:focus {
+                            border: transparent;
+                            outline: 0px;
+                        }  
                     }
-                }
+                    
+                }                
 
                 .paneContainer {
                     margin-top: 3px;

nodeEditor/src/components/nodeList/nodeListComponent.tsx

@@ -10,6 +10,7 @@ import { DraggableLineWithButtonComponent } from '../../sharedComponents/draggab
 import { LineWithFileButtonContainerComponent } from '../../sharedComponents/lineWithFileButtonContainerComponent';
 import { Tools } from 'babylonjs';
 
+
 require("./nodeList.scss");
 
 interface INodeListComponentProps {
@@ -174,7 +175,7 @@ export class NodeListComponent extends React.Component<INodeListComponentProps,
         this.setState({ filter: filter });
     }
 
-    loadFrameBlock(file: File) {
+    loadCustomFrame(file: File) {
         Tools.ReadFile(file, async (data) => {
             // get Frame Data from file
             let decoder = new TextDecoder("utf-8");
@@ -229,7 +230,7 @@ export class NodeListComponent extends React.Component<INodeListComponentProps,
 
         // Block types used to create the menu from
         const allBlocks = {
-            Custom_Blocks: this.customFrameList === null ? [""] : this.customFrameList,
+            Custom_Frames: this.customFrameList === null || this.customFrameList.length === 0 ? [] : this.customFrameList,
             Animation: ["BonesBlock", "MorphTargetsBlock"],
             Color_Management: ["ReplaceColorBlock", "PosterizeBlock", "GradientBlock", "DesaturateBlock"],
             Conversion_Blocks: ["ColorMergerBlock", "ColorSplitterBlock", "VectorMergerBlock", "VectorSplitterBlock"],
@@ -276,31 +277,30 @@ export class NodeListComponent extends React.Component<INodeListComponentProps,
             .map((block: any, i: number) => {
                 let tooltip = NodeListComponent._Tooltips[block] || "";
 
-                
                 if(key.indexOf("Custom") === -1) {
-                return <DraggableLineComponent key={block} data={block} tooltip={tooltip}/>;
+                
+                   return <DraggableLineComponent key={block} data={block} tooltip={tooltip}/>;
                 }
                 return <DraggableLineWithButtonComponent key={block} data={block} tooltip={tooltip} 
                 onIconClick={ value => this.removeItem(value)}/>;
             });
 
-            if(key === "Custom_Blocks") {
-                blockMenu.push(
-                    <LineWithFileButtonContainerComponent key={key + " blocks"} title={key.replace("__", ": ").replace("_", " ")} closed={false}
-                    label="Load Custom" uploadName={'custom-frame-upload2'}  accept=".json" onClick={(file) => {
-                        this.loadFrameBlock(file);
-                    }}>
-                        {blockList}
-                    </LineWithFileButtonContainerComponent>
-                );
-            }
-            else if(blockList.length) {
+            if(key.indexOf("Custom") != -1)
+            {
+                let line =  <LineWithFileButtonContainerComponent key={key + " blocks"} title={key.replace("__", ": ").replace("_", " ")} closed={false}
+                label="Add Custom Frame" uploadName={'custom-frame-upload'}  accept=".json" onClick={(file) => {
+                    this.loadCustomFrame(file);
+                }}/>;
+                blockList.push(line);
+                
+            }         
+            if(blockList.length) {
                 blockMenu.push(
                     <LineContainerComponent key={key + " blocks"} title={key.replace("__", ": ").replace("_", " ")} closed={false}>
                         {blockList}
                     </LineContainerComponent>
                 );
-            }
+           }
         }
 
         return (

nodeEditor/src/sharedComponents/draggableLineWithButtonComponent.tsx

@@ -12,9 +12,7 @@ export class DraggableLineWithButtonComponent extends React.Component<IDraggable
         super(props);
     }
 
-    render() {
-
-        
+    render() { 
         return (
             <div className="draggableLine withButton" 
                 title={this.props.tooltip}

nodeEditor/src/sharedComponents/lineWithFileButtonContainerComponent.tsx

@@ -1,12 +1,9 @@
 import * as React from "react";
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faChevronDown } from '@fortawesome/free-solid-svg-icons';
 import { DataStorage } from 'babylonjs/Misc/dataStorage';
 const addButton = require('../../imgs/add.svg');
 
 interface ILineWithFileButtonContainerComponentProps {
     title: string;
-    children: any[] | any;
     closed?: boolean;
     label: string;
     onClick: (file: File) => void;
@@ -43,57 +40,20 @@ export class LineWithFileButtonContainerComponent extends React.Component<ILineW
         this.setState({ isExpanded: newState });
     }
 
-    renderHeader() {
-        let className = this.state.isExpanded ? "collapse" : "collapse closed";
-
+    render() {
         return (
-            <div className="header" onClick={() => this.switchExpandedState()}>
-                <div className="title">
-                    {this.props.title}
+            <div className="nonDraggableLine withButton" title="add">
+                Add
+                <div className="icon" title="Upload Custom">
+                <img src={addButton}/>
                 </div>
-                <div className="buttonIcon" title="Upload Custom">
-                <label htmlFor={this.props.uploadName ? this.props.uploadName : "file-upload"} className="file-upload">
-                        </label>
-                    <div className="icon">
-                    <img title="Add" className="addIcon" src={addButton}/>
-                    </div>
-                    <div className="icon">
+                <div className="buttonLine" title="Upload Custom">
+                    <label htmlFor={this.props.uploadName ? this.props.uploadName : "file-upload"} className="file-upload"/>   
                     <input ref={this.uploadRef} id={this.props.uploadName ? this.props.uploadName : "file-upload"} type="file" accept={this.props.accept} onChange={evt => this.onChange(evt)} />
-                    </div>
-                    <div className={className}>
-                    <FontAwesomeIcon icon={faChevronDown} />
-                    </div>
                 </div>
-               
+                
             </div>
         );
-    }
     
-    render() {
-        
-        if (!this.state.isExpanded) {
-            return (
-                <div className="paneContainer">
-                    <div className="paneContainer-content">
-                        {
-                            this.renderHeader()
-                        }
-                    </div>
-                </div>
-            );
-        }
-
-        return (
-            <div className="paneContainer">
-                <div className="paneContainer-content">
-                    {
-                        this.renderHeader()
-                    }
-                    <div className="paneList">
-                        {this.props.children}
-                    </div >
-                </div>
-            </div>
-        );
     }
 }