diff options
Diffstat (limited to 'src/client/views/nodes/button/FontIconBox.tsx')
| -rw-r--r-- | src/client/views/nodes/button/FontIconBox.tsx | 27 |
1 files changed, 13 insertions, 14 deletions
diff --git a/src/client/views/nodes/button/FontIconBox.tsx b/src/client/views/nodes/button/FontIconBox.tsx index b4b6ba76c..4f52e90b7 100644 --- a/src/client/views/nodes/button/FontIconBox.tsx +++ b/src/client/views/nodes/button/FontIconBox.tsx @@ -230,25 +230,27 @@ export class FontIconBox extends DocComponent<ButtonProps, FontIconDocument>(Fon const hex: string = value.hex; const s = ScriptField.MakeScript(script + '("' + hex + '")'); if (s) { - // console.log(s.script); s.script.run().result; } - } + }; return ( <div className={`menuButton ${this.type} ${active}`} - style={{ display: selectedDoc ? undefined : "none", color: color, backgroundColor: selectedDoc ? selectedDoc._backgroundColor : backgroundColor, borderBottomLeftRadius: this.dropdown ? 0 : undefined }} + style={{ display: selectedDoc ? undefined : "none", color: color, borderBottomLeftRadius: this.dropdown ? 0 : undefined }} onClick={() => this.rootDoc.dropDownOpen = !this.rootDoc.dropDownOpen} onPointerDown={e => e.stopPropagation()}> <FontAwesomeIcon className={`fontIconBox-icon-${this.type}`} icon={this.icon} color={color} /> + <div className="colorButton-color" + style={{ backgroundColor: selectedDoc ? selectedDoc._backgroundColor : backgroundColor }} + ></div> {label} - {dropdownCaret} + {/* {dropdownCaret} */} {this.rootDoc.dropDownOpen ? <div> <div className="menuButton-dropdownBox" onPointerDown={e => e.stopPropagation()} onClick={e => e.stopPropagation()} style={{ left: 0 }}> - {colorBox((color) => click(color))} + {colorBox(click)} </div> <div className="dropbox-background" onClick={(e) => { e.stopPropagation(); this.rootDoc.dropDownOpen = false; }} /> </div> @@ -262,23 +264,20 @@ export class FontIconBox extends DocComponent<ButtonProps, FontIconDocument>(Fon const selectedDoc = numSelected > 0 ? SelectionManager.Views()[0].Document : undefined; const script: string = StrCast(this.rootDoc.script) + "(true)"; - let toggleTrue: boolean | undefined = false; - if (script == 'toggleOverlay') { - toggleTrue = selectedDoc && BoolCast(selectedDoc.z); - console.log('toggleOverlay'); - } const boolResult = ScriptField.MakeScript(script)?.script.run().result; - // console.log(this.rootDoc.title, script, boolResult); + if (script.includes("toggleOverlay")) { + console.log("boolResult: " + boolResult); + } + const color = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.Color); const backgroundColor = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.BackgroundColor); - // const canClick: boolean = this.rootDoc.canClick ? eval(StrCast(this.rootDoc.canClick)) : false; const label = !this.label || !Doc.UserDoc()._showLabel ? (null) : <div className="fontIconBox-label" style={{ color: color, backgroundColor: backgroundColor, position: "absolute" }}> {this.label} </div>; return ( - <div className={`menuButton ${this.type}`} style={{ opacity: 1, backgroundColor: toggleTrue ? Colors.MEDIUM_BLUE : "transparent" }}> - <FontAwesomeIcon className={`fontIconBox-icon-${this.type}`} icon={this.icon} color={toggleTrue ? Colors.LIGHT_GRAY : Colors.LIGHT_GRAY} /> + <div className={`menuButton ${this.type}`} style={{ opacity: 1, backgroundColor: boolResult ? Colors.MEDIUM_BLUE : "transparent" }}> + <FontAwesomeIcon className={`fontIconBox-icon-${this.type}`} icon={this.icon} color={boolResult ? Colors.LIGHT_GRAY : Colors.LIGHT_GRAY} /> {label} </div> ) |