diff options
author | Andy Rickert <andrew_rickert@brown.edu> | 2020-04-02 17:42:18 -0700 |
---|---|---|
committer | Andy Rickert <andrew_rickert@brown.edu> | 2020-04-02 17:42:18 -0700 |
commit | fb329b1a8abca361d831c7ec1f1a9ea0f3d410cf (patch) | |
tree | e09138a0544fe3814b1bd1e95d59bc4c0e96f5ed /src/client/views/document_templates/caption_toggle/DetailedCaptionToggle.tsx | |
parent | 3a1dac48c00dbe81142da90f8b52bfae02ce1921 (diff) | |
parent | b4958eac84339dd7a88c964a9c52e89481048f55 (diff) |
merge
Diffstat (limited to 'src/client/views/document_templates/caption_toggle/DetailedCaptionToggle.tsx')
-rw-r--r-- | src/client/views/document_templates/caption_toggle/DetailedCaptionToggle.tsx | 72 |
1 files changed, 0 insertions, 72 deletions
diff --git a/src/client/views/document_templates/caption_toggle/DetailedCaptionToggle.tsx b/src/client/views/document_templates/caption_toggle/DetailedCaptionToggle.tsx deleted file mode 100644 index 3aaf4120c..000000000 --- a/src/client/views/document_templates/caption_toggle/DetailedCaptionToggle.tsx +++ /dev/null @@ -1,72 +0,0 @@ -import * as React from 'react'; -import { FontStyleProperty, ColorProperty } from 'csstype'; -import { observer } from 'mobx-react'; -import { observable, action, runInAction } from 'mobx'; -import { FormattedTextBox } from '../../nodes/FormattedTextBox'; -import { FieldViewProps } from '../../nodes/FieldView'; - -interface DetailedCaptionDataProps { - captionFieldKey?: string; - detailsFieldKey?: string; -} - -interface DetailedCaptionStylingProps { - sharedFontColor?: ColorProperty; - captionFontStyle?: FontStyleProperty; - detailsFontStyle?: FontStyleProperty; - toggleSize?: number; -} - -@observer -export default class DetailedCaptionToggle extends React.Component<DetailedCaptionDataProps & DetailedCaptionStylingProps & FieldViewProps> { - @observable loaded: boolean = false; - @observable detailsExpanded: boolean = false; - - @action toggleDetails = (e: React.MouseEvent<HTMLDivElement>) => { - e.preventDefault(); - e.stopPropagation(); - this.detailsExpanded = !this.detailsExpanded; - } - - componentDidMount() { - runInAction(() => this.loaded = true); - } - - render() { - const size = this.props.toggleSize || 20; - return ( - <div style={{ - transition: "0.5s opacity ease", - opacity: this.loaded ? 1 : 0, - bottom: 0, - fontSize: 14, - width: "100%", - position: "absolute" - }}> - {/* caption */} - <div style={{ opacity: this.detailsExpanded ? 0 : 1, transition: "opacity 0.3s ease" }}> - <FormattedTextBox {...this.props} fieldKey={this.props.captionFieldKey || "caption"} /> - </div> - {/* details */} - <div style={{ opacity: this.detailsExpanded ? 1 : 0, transition: "opacity 0.3s ease" }}> - <FormattedTextBox {...this.props} fieldKey={this.props.detailsFieldKey || "captiondetails"} /> - </div> - {/* toggle */} - <div - style={{ - width: size, - height: size, - borderRadius: "50%", - backgroundColor: "red", - zIndex: 3, - cursor: "pointer" - }} - onClick={this.toggleDetails} - > - <span style={{ color: "white" }}></span> - </div> - </div> - ); - } - -} |