diff options
Diffstat (limited to 'src/client/views/PropertiesSection.tsx')
-rw-r--r-- | src/client/views/PropertiesSection.tsx | 51 |
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 |