1 files changed, 72 insertions, 0 deletions
diff --git a/src/client/views/document_templates/caption_toggle/DetailedCaptionToggle.tsx b/src/client/views/document_templates/caption_toggle/DetailedCaptionToggle.tsx
new file mode 100644
index 000000000..f8104cef3
--- /dev/null
+++ b/src/client/views/document_templates/caption_toggle/DetailedCaptionToggle.tsx
@@ -0,0 +1,72 @@
+import * as React from 'react';
+import { FontWeightProperty, FontStyleProperty, FontSizeProperty, ColorProperty } from 'csstype';
+import { observer } from 'mobx-react';
+import { observable, action, runInAction } from 'mobx';
+import { FormattedTextBox, FormattedTextBoxProps } 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() {
+        let 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>
+        );
+    }
+
+}