mirror of
https://github.com/bendtherules/piktochart-create-editor.git
synced 2026-08-18 22:02:56 +00:00
Add text and image node styles
This commit is contained in:
@@ -11,3 +11,11 @@
|
|||||||
|
|
||||||
border: 1px solid;
|
border: 1px solid;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.canvas-area .image-node {
|
||||||
|
max-width: 150px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.canvas-area .text-node {
|
||||||
|
font-size: 2em;
|
||||||
|
}
|
||||||
@@ -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>
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|||||||
Reference in New Issue
Block a user