Add text and image node styles

This commit is contained in:
2018-04-09 10:48:45 +05:30
parent 81eb9bda95
commit 4ba0dc04c3
2 changed files with 13 additions and 3 deletions
+8
View File
@@ -11,3 +11,11 @@
border: 1px solid; border: 1px solid;
} }
.canvas-area .image-node {
max-width: 150px;
}
.canvas-area .text-node {
font-size: 2em;
}
+4 -2
View File
@@ -32,7 +32,9 @@ export class CanvasArea extends React.Component<CanvasAreaProps, CanvasAreaState
const tmpTextNode = this.props.nodes.text[nodeId]; const tmpTextNode = this.props.nodes.text[nodeId];
return ( return (
<DraggableNode key={nodeId} id={nodeId} containerId={this.containerId}> <DraggableNode key={nodeId} id={nodeId} containerId={this.containerId}>
{tmpTextNode.value} <div className="text-node">
{tmpTextNode.value}
</div>
</DraggableNode> </DraggableNode>
); );
}); });
@@ -43,7 +45,7 @@ export class CanvasArea extends React.Component<CanvasAreaProps, CanvasAreaState
const tmpImageNode = this.props.nodes.image[nodeId]; const tmpImageNode = this.props.nodes.image[nodeId];
return ( return (
<DraggableNode key={nodeId} id={nodeId} containerId={this.containerId}> <DraggableNode key={nodeId} id={nodeId} containerId={this.containerId}>
<img draggable={false} src={tmpImageNode.url} style={{ maxWidth: '500px' }} /> <img className="image-node" draggable={false} src={tmpImageNode.url} />
</DraggableNode> </DraggableNode>
); );
}); });