Skip to content

Commit ed637c6

Browse files
authored
Merge pull request #189 from fernandojsg/component_icons
Added icons and remove context menu on the components bar. Fixes #10
2 parents 965e268 + b39a966 commit ed637c6

File tree

4 files changed

+46
-18
lines changed

4 files changed

+46
-18
lines changed

‎src/components/components/Component.js‎

Lines changed: 22 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -20,14 +20,28 @@ export default class Component extends React.Component {
2020
name: React.PropTypes.string
2121
};
2222

23-
deleteComponent = event => {
24-
event.stopPropagation();
25-
this.props.entity.removeAttribute(this.props.name);
23+
constructor (props) {
24+
super(props);
25+
this.state = {
26+
entity: this.props.entity,
27+
name: this.props.name
28+
};
29+
}
30+
31+
componentWillReceiveProps (newProps) {
32+
if (this.state.entity !== newProps.entity) {
33+
this.setState({entity: newProps.entity});
34+
}
35+
if (this.state.name !== newProps.name) {
36+
this.setState({name: newProps.name});
37+
}
2638
}
2739

28-
resetComponent = event => {
40+
removeComponent = event => {
2941
event.stopPropagation();
30-
this.props.entity.setAttribute(this.props.name, {});
42+
if (confirm('Do you really want to remove component `' + this.props.name + '`?')) {
43+
this.props.entity.removeAttribute(this.props.name);
44+
}
3145
}
3246

3347
render () {
@@ -63,12 +77,9 @@ export default class Component extends React.Component {
6377
<Collapsible>
6478
<div className='collapsible-header'>
6579
<span title={subComponentName || componentName}>{subComponentName || componentName}</span>
66-
<div className='dropdown menu'>
67-
<div className='dropdown-content'>
68-
<a href='#' onClick={this.deleteComponent}>Delete</a>
69-
<a href='#' onClick={this.resetComponent}>Reset to default</a>
70-
<a href='#' className='disabled'>Copy to clipboard</a>
71-
</div>
80+
<div>
81+
<a href='#' title='Remove component' className='flat-button'
82+
onClick={this.removeComponent}>remove</a>
7283
</div>
7384
</div>
7485
<div className='collapsible-content'>{propertyRows}</div>

‎src/components/modals/Modal.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ export default class Modal extends React.Component {
1010
document.addEventListener('keyup', this.handleGlobalKeydown);
1111
document.addEventListener('mousedown', this.handleGlobalMousedown);
1212
}
13-
13+
change
1414
handleGlobalKeydown = event => {
1515
if (this.state.isOpen && event.keyCode === 27) {
1616
this.close();

‎src/css/dark.css‎

Lines changed: 20 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -320,6 +320,10 @@ div.vec3 {
320320
width: 50px;
321321
}
322322

323+
.collapsible-header {
324+
display: flex;
325+
justify-content: space-between;
326+
}
323327
.collapsible-header span {
324328
float: left;
325329
max-width: 180px;
@@ -350,7 +354,7 @@ div.vec3 {
350354
text-align: right;
351355
}
352356

353-
.collapsible .static .button {
357+
.collapsible .static .collapse-button {
354358
margin-top: 2px;
355359
width: 0;
356360
height: 0;
@@ -360,11 +364,11 @@ div.vec3 {
360364
border-right: 5px solid transparent;
361365
}
362366

363-
.collapsible.collapsed .static .button {
367+
.collapsible.collapsed .static .collapse-button {
364368
border-left-color: #1faaf2;
365369
}
366370

367-
.collapsible:not(.collapsed) .static .button {
371+
.collapsible:not(.collapsed) .static .collapse-button {
368372
border-top-color: #1faaf2;
369373
}
370374

@@ -829,3 +833,16 @@ code, pre {
829833
.outliner .active .fa {
830834
color: #fff;
831835
}
836+
837+
a.flat-button {
838+
color: #bcbcbc;
839+
background-color: #262626;
840+
font-size: 12px;
841+
text-decoration: none;
842+
margin-left: 10px;
843+
padding: 5px;
844+
}
845+
846+
a.flat-button:hover {
847+
color: #1faaf2;
848+
}

‎src/css/main.css‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -42,20 +42,20 @@ textarea, input { outline: none; } /* osx */
4242
margin: 0;
4343
}
4444

45-
.collapsible .static .button {
45+
.collapsible .static .collapse-button {
4646
float: left;
4747
margin-right: 6px;
4848
width: 0;
4949
height: 0;
5050
border: 6px solid transparent;
5151
}
5252

53-
.collapsible.collapsed .static .button {
53+
.collapsible.collapsed .static .collapse-button {
5454
margin-top: 2px;
5555
border-left-color: #1faaf2;
5656
}
5757

58-
.collapsible:not(.collapsed) .static .button {
58+
.collapsible:not(.collapsed) .static .collapse-button {
5959
margin-top: 6px;
6060
border-top-color: #1faaf2;
6161
}

0 commit comments

Comments
 (0)