diff options
author | Eleanor Eng <eleanor_eng@brown.edu> | 2019-08-06 10:54:33 -0400 |
---|---|---|
committer | Eleanor Eng <eleanor_eng@brown.edu> | 2019-08-06 10:54:33 -0400 |
commit | b7194d88ba9733413063c7f371dedefd3a97e35f (patch) | |
tree | 418203fe1ee1f4aa0771c555ab672541cc775473 /src/client/views/nodes/FaceRectangle.tsx | |
parent | 2c4440be2807b3b1da691ea04b061c35e50ecb72 (diff) | |
parent | 298d1c9b29d6ce2171fd9ac8274b64583b73f6f5 (diff) |
merge with master
Diffstat (limited to 'src/client/views/nodes/FaceRectangle.tsx')
-rw-r--r-- | src/client/views/nodes/FaceRectangle.tsx | 29 |
1 files changed, 29 insertions, 0 deletions
diff --git a/src/client/views/nodes/FaceRectangle.tsx b/src/client/views/nodes/FaceRectangle.tsx new file mode 100644 index 000000000..887efc0d5 --- /dev/null +++ b/src/client/views/nodes/FaceRectangle.tsx @@ -0,0 +1,29 @@ +import React = require("react"); +import { observer } from "mobx-react"; +import { observable, runInAction } from "mobx"; +import { RectangleTemplate } from "./FaceRectangles"; + +@observer +export default class FaceRectangle extends React.Component<{ rectangle: RectangleTemplate }> { + @observable private opacity = 0; + + componentDidMount() { + setTimeout(() => runInAction(() => this.opacity = 1), 500); + } + + render() { + let rectangle = this.props.rectangle; + return ( + <div + style={{ + ...rectangle.style, + opacity: this.opacity, + transition: "1s ease opacity", + position: "absolute", + borderRadius: 5 + }} + /> + ); + } + +}
\ No newline at end of file |