Added icons and remove context menu on the components bar. Fixes #10

Author: fernandojsg

src/components/attributes/Component.js

@@ -17,14 +17,28 @@ export default class Component extends React.Component {
     name: React.PropTypes.string
   };
 
-  deleteComponent = event => {
-    event.stopPropagation();
-    this.props.entity.removeAttribute(this.props.name);
+  constructor (props) {
+    super(props);
+    this.state = {
+      entity: this.props.entity,
+      name: this.props.name
+    };
+  }
+
+  componentWillReceiveProps(newProps) {
+    if (this.state.entity !== newProps.entity) {
+      this.setState({entity: newProps.entity});
+    }
+    if (this.state.name !== newProps.name) {
+      this.setState({name: newProps.name});
+    }
   }
 
-  resetComponent = event => {
+  removeComponent = event => {
     event.stopPropagation();
-    this.props.entity.setAttribute(this.props.name, {});
+    if (confirm('Do you really want to remove component `' + this.props.name + '`?')) {
+      this.props.entity.removeAttribute(this.props.name);
+    }
   }
 
   render () {
@@ -60,12 +74,9 @@ export default class Component extends React.Component {
       <Collapsible>
         <div className='collapsible-header'>
           <span title={subComponentName || componentName}>{subComponentName || componentName}</span>
-          <div className='dropdown menu'>
-            <div className='dropdown-content'>
-              <a href='#' onClick={this.deleteComponent}>Delete</a>
-              <a href='#' onClick={this.resetComponent}>Reset to default</a>
-              <a href='#' className='disabled'>Copy to clipboard</a>
-            </div>
+          <div>
+            <a href='#' title='Remove component' className='flat-button'
+              onClick={this.removeComponent}>remove</a>
           </div>
         </div>
         <div className='collapsible-content'>{attributeRows}</div>

src/components/modals/Modal.js

@@ -10,7 +10,7 @@ export default class Modal extends React.Component {
     document.addEventListener('keyup', this.handleGlobalKeydown);
     document.addEventListener('mousedown', this.handleGlobalMousedown);
   }
-
+change
   handleGlobalKeydown = event => {
     if (this.state.isOpen && event.keyCode === 27) {
       this.close();

src/css/dark.css

@@ -320,6 +320,10 @@ div.vec3 {
   width: 50px;
 }
 
+.collapsible-header {
+  display: flex;
+  justify-content: space-between;
+}
 .collapsible-header span {
   float: left;
   max-width: 180px;
@@ -350,7 +354,7 @@ div.vec3 {
   text-align: right;
 }
 
-.collapsible .static .button {
+.collapsible .static .collapse-button {
   margin-top: 2px;
   width: 0;
   height: 0;
@@ -360,11 +364,11 @@ div.vec3 {
   border-right: 5px solid transparent;
 }
 
-.collapsible.collapsed .static .button {
+.collapsible.collapsed .static .collapse-button {
   border-left-color: #1faaf2;
 }
 
-.collapsible:not(.collapsed) .static .button {
+.collapsible:not(.collapsed) .static .collapse-button {
   border-top-color: #1faaf2;
 }
 
@@ -829,3 +833,16 @@ code, pre {
 .outliner .active .fa {
   color: #fff;
 }
+
+a.flat-button {
+  color: #bcbcbc;
+  background-color: #262626;
+  font-size: 12px;
+  text-decoration: none;
+  margin-left: 10px;
+  padding: 5px;
+}
+
+a.flat-button:hover {
+  color: #1faaf2;
+}

src/css/main.css

@@ -42,20 +42,20 @@ textarea, input { outline: none; } /* osx */
 		margin: 0;
 	}
 
-	.collapsible .static .button {
+	.collapsible .static .collapse-button {
 		float: left;
 		margin-right: 6px;
 		width: 0;
 		height: 0;
 		border: 6px solid transparent;
 	}
 
-	.collapsible.collapsed .static .button {
+	.collapsible.collapsed .static .collapse-button {
 		margin-top: 2px;
 		border-left-color: #1faaf2;
 	}
 
-	.collapsible:not(.collapsed) .static .button {
+	.collapsible:not(.collapsed) .static .collapse-button {
 		margin-top: 6px;
 		border-top-color: #1faaf2;
 	}