diff options
Diffstat (limited to 'src/client/views/nodes/DataVizBox')
| -rw-r--r-- | src/client/views/nodes/DataVizBox/SchemaCSVPopUp.scss | 175 | ||||
| -rw-r--r-- | src/client/views/nodes/DataVizBox/SchemaCSVPopUp.tsx | 80 |
2 files changed, 255 insertions, 0 deletions
diff --git a/src/client/views/nodes/DataVizBox/SchemaCSVPopUp.scss b/src/client/views/nodes/DataVizBox/SchemaCSVPopUp.scss new file mode 100644 index 000000000..63a693918 --- /dev/null +++ b/src/client/views/nodes/DataVizBox/SchemaCSVPopUp.scss @@ -0,0 +1,175 @@ +$textgrey: #707070; +$lighttextgrey: #a3a3a3; +$greyborder: #d3d3d3; +$lightgrey: #ececec; +$button: #5b97ff; +$highlightedText: #82e0ff; + +.summary-box { + position: fixed; + bottom: 10px; + right: 10px; + width: 250px; + min-height: 200px; + border-radius: 15px; + padding: 15px; + padding-bottom: 0; + z-index: 999; + display: flex; + flex-direction: column; + justify-content: space-between; + background-color: #ffffff; + box-shadow: 0 2px 5px #7474748d; + color: $textgrey; + + .summary-heading { + display: flex; + justify-content: space-between; + align-items: center; + border-bottom: 1px solid $greyborder; + padding-bottom: 5px; + + .summary-text { + font-size: 12px; + font-weight: 500; + } + } + + label { + color: $textgrey; + font-size: 12px; + font-weight: 400; + letter-spacing: 1px; + margin: 0; + padding-right: 5px; + } + + a { + cursor: pointer; + } + + .content-wrapper { + padding-top: 10px; + min-height: 50px; + max-height: 150px; + overflow-y: auto; + } + + .btns-wrapper { + height: 50px; + display: flex; + justify-content: space-between; + align-items: center; + + .summarizing { + display: flex; + align-items: center; + } + } + + button { + font-size: 9px; + padding: 10px; + color: #ffffff; + background-color: $button; + border-radius: 5px; + } + + .text-btn { + &:hover { + background-color: $button; + } + } + + .btn-secondary { + font-size: 8px; + padding: 10px 5px; + background-color: $lightgrey; + color: $textgrey; + &:hover { + background-color: $lightgrey; + } + } + + .icon-btn { + background-color: #ffffff; + padding: 10px; + border-radius: 50%; + color: $button; + border: 1px solid $button; + } +} + +.image-content-wrapper { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 8px; + padding-bottom: 16px; + + .img-wrapper { + position: relative; + cursor: pointer; + + .img-container { + pointer-events: none; + position: relative; + + img { + pointer-events: all; + position: relative; + } + } + + .img-container::after { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.5); + opacity: 0; + transition: opacity 0.3s ease; + } + + .btn-container { + position: absolute; + right: 8px; + bottom: 8px; + opacity: 0; + transition: opacity 0.3s ease; + } + + &:hover { + .img-container::after { + opacity: 1; + } + + .btn-container { + opacity: 1; + } + } + } +} + +// Typist CSS +.Typist .Cursor { + display: inline-block; +} +.Typist .Cursor--blinking { + opacity: 1; + animation: blink 1s linear infinite; +} + +@keyframes blink { + 0% { + opacity: 1; + } + 50% { + opacity: 0; + } + 100% { + opacity: 1; + } +} diff --git a/src/client/views/nodes/DataVizBox/SchemaCSVPopUp.tsx b/src/client/views/nodes/DataVizBox/SchemaCSVPopUp.tsx new file mode 100644 index 000000000..99b7dd3c4 --- /dev/null +++ b/src/client/views/nodes/DataVizBox/SchemaCSVPopUp.tsx @@ -0,0 +1,80 @@ +import React = require('react'); +import './SchemaCSVPopUp.scss'; +import { action, observable } from 'mobx'; +import { observer } from 'mobx-react'; +import { Doc } from '../../../../fields/Doc'; +import { Button, Type } from 'browndash-components'; +import { StrCast } from '../../../../fields/Types'; +import { MarqueeView } from '../../collections/collectionFreeForm/MarqueeView'; + +interface SchemaCSVPopUpProps {} + +@observer +export class SchemaCSVPopUp extends React.Component<SchemaCSVPopUpProps> { + static Instance: SchemaCSVPopUp; + + @observable + public dataVizDoc: Doc | undefined = undefined; + @action + public setDataVizDoc = (doc: Doc) => { + this.dataVizDoc = doc; + }; + + @observable + public visible: boolean = false; + @action + public setVisible = (vis: boolean) => { + this.visible = vis; + }; + + public addToCollection: any | undefined; + + /** + * Transfers the doc to the user's canvas + */ + private transferToCanvas = () => { + if (this.dataVizDoc) this.addToCollection?.(this.dataVizDoc); + this.setVisible(false); + }; + + constructor(props: SchemaCSVPopUpProps) { + super(props); + SchemaCSVPopUp.Instance = this; + } + + dataBox = () => { + return ( + <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}> + {this.heading('Schema Table as Data Visualization Doc')} + <div className="image-content-wrapper"> + <div className="img-wrapper"> + <div className="img-container" style={{background: "blue"}}> + <img + width={150} height={150} + /> + </div> + <div className="btn-container"> + <Button text="Save to Canvas" onClick={() => this.transferToCanvas()} color={StrCast(Doc.UserDoc().userColor)} type={Type.TERT} /> + </div> + </div> + {/* {this.props.children} */} + + </div> + </div> + ); + }; + + heading = (headingText: string) => ( + <div className="summary-heading"> + <label className="summary-text">{headingText}</label> + </div> + ); + + render() { + return ( + <div className="summary-box" style={{ display: this.visible ? 'flex' : 'none' }}> + {this.dataBox()} + </div> + ); + } +}
\ No newline at end of file |