Skip to content

Commit f5f50d7

Browse files
committed
Added icons and remove context menu on the components bar. Fixes #10
1 parent 320a776 commit f5f50d7

File tree

4 files changed

+46
-18
lines changed

4 files changed

+46
-18
lines changed

‎src/components/attributes/Component.js‎

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

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

25-
resetComponent = event => {
37+
removeComponent = event => {
2638
event.stopPropagation();
27-
this.props.entity.setAttribute(this.props.name, {});
39+
if (confirm('Do you really want to remove component `' + this.props.name + '`?')) {
40+
this.props.entity.removeAttribute(this.props.name);
41+
}
2842
}
2943

3044
render () {
@@ -60,12 +74,9 @@ export default class Component extends React.Component {
6074
<Collapsible>
6175
<div className='collapsible-header'>
6276
<span title={subComponentName || componentName}>{subComponentName || componentName}</span>
63-
<div className='dropdown menu'>
64-
<div className='dropdown-content'>
65-
<a href='#' onClick={this.deleteComponent}>Delete</a>
66-
<a href='#' onClick={this.resetComponent}>Reset to default</a>
67-
<a href='#' className='disabled'>Copy to clipboard</a>
68-
</div>
77+
<div>
78+
<a href='#' title='Remove component' className='flat-button'
79+
onClick={this.removeComponent}>remove</a>
6980
</div>
7081
</div>
7182
<div className='collapsible-content'>{attributeRows}</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)