active coloring

satyapoojasama · May 3, 2021 · c2d3774 · c2d3774
1 parent dac427e
commit c2d3774
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 11 deletions.
diff --git a/guiEditor/public/imgs/visibilityIcon.svg → ...itor/public/imgs/visibilityActiveIcon.svg b/guiEditor/public/imgs/visibilityIcon.svg → ...itor/public/imgs/visibilityActiveIcon.svg
diff --git a/guiEditor/public/imgs/visibilityNotActiveIcon.svg b/guiEditor/public/imgs/visibilityNotActiveIcon.svg
diff --git a/guiEditor/src/components/sceneExplorer/entities/gui/controlTreeItemComponent.tsx b/guiEditor/src/components/sceneExplorer/entities/gui/controlTreeItemComponent.tsx
@@ -10,7 +10,7 @@ interface IControlTreeItemComponentProps {
     onClick: () => void;
 }
 
-export class ControlTreeItemComponent extends React.Component<IControlTreeItemComponentProps, { isActive: boolean, isVisible: boolean, isHovered: boolean}> {
+export class ControlTreeItemComponent extends React.Component<IControlTreeItemComponentProps, { isActive: boolean, isVisible: boolean, isHovered: boolean }> {
     constructor(props: IControlTreeItemComponentProps) {
         super(props);
 
@@ -35,26 +35,24 @@ export class ControlTreeItemComponent extends React.Component<IControlTreeItemCo
     render() {
         const control = this.props.control;
         const name = (control.name || "No name") + ` [${control.getClassName()}]`;
-        //const isActiveElement = this.state.isActive ? <FontAwesomeIcon icon={faHighlighter} /> : <FontAwesomeIcon icon={faHighlighter} className="isNotActive" />;
-        //const visibilityElement = this.state.isVisible ? <FontAwesomeIcon icon={faEye} /> : <FontAwesomeIcon icon={faEyeSlash} className="isNotActive" />;
 
         if (true) {
             return (
-                <div className="controlTools" onMouseOut={ () =>  this.setState({ isHovered: false})}>
+                <div className="controlTools" onMouseOutCapture={() => this.setState({ isHovered: false })}>
                     <TreeItemLabelComponent label={name} onClick={() => this.props.onClick()} color="greenyellow" />
                     <div className="addComponent icon" onClick={() => this.highlight()} title="Add component (Not Implemented)">
-                        <img src={"./imgs/makeComponentIcon.svg"} color="black" className=""/>
+                        <img src={"./imgs/makeComponentIcon.svg"}/>
                     </div>
                     <div className="visibility icon" onClick={() => this.switchVisibility()} title="Show/Hide control">
-                        <img src={"./imgs/visibilityIcon.svg"} color="black" className=""/>
+                        <img src={this.state.isVisible? "./imgs/visibilityActiveIcon.svg": "./imgs/visibilityNotActiveIcon.svg"}/>
                     </div>
                     <ExtensionsComponent target={control} extensibilityGroups={this.props.extensibilityGroups} />
                 </div>
             );
         }
         else {
             return (
-                <div className="controlTools" onMouseEnter={ () =>  this.setState({ isHovered: true})}>
+                <div className="controlTools" onMouseEnter={() => this.setState({ isHovered: true })}>
                     <TreeItemLabelComponent label={name} onClick={() => this.props.onClick()} color="greenyellow" />
                     <ExtensionsComponent target={control} extensibilityGroups={this.props.extensibilityGroups} />
                 </div>

diff --git a/guiEditor/src/components/sceneExplorer/sceneExplorer.scss b/guiEditor/src/components/sceneExplorer/sceneExplorer.scss
@@ -368,7 +368,7 @@
         .controlTools {
             grid-column: 2;
             display: grid;
-            grid-template-columns: 1fr 20px 20px auto 5px;
+            grid-template-columns: 1fr 30px 30px auto 5px;
             align-items: center;
 
             .highlight {
@@ -383,6 +383,8 @@
                 width: 20px;
                 grid-column: 4;
             }
+
+
         }   
 
 
@@ -403,8 +405,9 @@
                 grid-column: 1;
                 white-space: nowrap;
                 text-overflow: ellipsis;
-                overflow: hidden;                
-            }
+                overflow: hidden;          
+            }   
+
         }
     }
 }
diff --git a/guiEditor/src/components/sceneExplorer/sceneExplorerComponent.tsx b/guiEditor/src/components/sceneExplorer/sceneExplorerComponent.tsx
@@ -195,7 +195,7 @@ export class SceneExplorerComponent extends React.Component<ISceneExplorerCompon
         let guiElements = scene.textures.filter((t) => t.getClassName() === "AdvancedDynamicTexture");
 
         return (
-            <div id="tree" onContextMenu={(e) => e.preventDefault()}>
+            <div id="tree">
                 {guiElements && guiElements.length > 0 && <TreeItemComponent globalState={this.props.globalState} extensibilityGroups={this.props.extensibilityGroups} selectedEntity={this.state.selectedEntity} items={guiElements} label="GUI" offset={1} filter={this.state.filter} />}
             </div>
         );