aboutsummaryrefslogtreecommitdiff
path: root/src/client/views/PropertiesSection.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/views/PropertiesSection.tsx')
-rw-r--r--src/client/views/PropertiesSection.tsx51
1 files changed, 51 insertions, 0 deletions
diff --git a/src/client/views/PropertiesSection.tsx b/src/client/views/PropertiesSection.tsx
new file mode 100644
index 000000000..b900d17ca
--- /dev/null
+++ b/src/client/views/PropertiesSection.tsx
@@ -0,0 +1,51 @@
+import React = require('react');
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
+import { action, computed } from "mobx"
+import { observer } from "mobx-react"
+import './PropertiesSection.scss'
+import { Doc } from '../../fields/Doc';
+import { StrCast } from '../../fields/Types';
+
+export interface PropertiesSectionProps {
+ title: string,
+ content?: JSX.Element | string | null,
+ isOpen: boolean,
+ setIsOpen: (bool: boolean) => any
+ inSection?: boolean,
+ setInSection?: (bool: boolean) => any
+}
+
+@observer
+export class PropertiesSection extends React.Component<PropertiesSectionProps> {
+ @computed get color() {
+ return StrCast(Doc.UserDoc().userColor);
+ }
+
+ @computed get backgroundColor() {
+ return StrCast(Doc.UserDoc().userBackgroundColor);
+ }
+
+ @computed get variantColor() {
+ return StrCast(Doc.UserDoc().userVariantColor);
+ }
+ render() {
+ console.log(this.props.title, this.props.content)
+ if (this.props.content === undefined || this.props.content === null) return null
+ else return <div className="propertiesView-section" onPointerEnter={action(() => (this.props.setInSection && this.props.setInSection(true)))} onPointerLeave={action(() => (this.props.setInSection && this.props.setInSection(false)))}>
+ <div className="propertiesView-sectionTitle" onPointerDown={action(() => (this.props.setIsOpen(!this.props.isOpen)))} style={{
+ background: this.props.isOpen ? this.variantColor : this.backgroundColor,
+ color: this.color
+ }}>
+ {this.props.title}
+ <div className="propertiesView-sectionTitle-icon">
+ <FontAwesomeIcon icon={this.props.isOpen ? 'caret-down' : 'caret-right'} size="lg" />
+ </div>
+ </div>
+ {!this.props.isOpen ? null :
+ <div className="propertiesView-content">
+ {this.props.content}
+ </div>
+ }
+ </div>
+ }
+} \ No newline at end of file