diff options
| -rw-r--r-- | src/client/util/CurrentUserUtils.ts | 6 | ||||
| -rw-r--r-- | src/client/views/nodes/button/FontIconBox.scss | 12 | ||||
| -rw-r--r-- | src/client/views/nodes/button/FontIconBox.tsx | 27 |
3 files changed, 25 insertions, 20 deletions
diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts index 421013f90..8bcc1f98a 100644 --- a/src/client/util/CurrentUserUtils.ts +++ b/src/client/util/CurrentUserUtils.ts @@ -911,7 +911,7 @@ export class CurrentUserUtils { doc["dockedBtn-redo"] = CurrentUserUtils.ficon({ onClick: ScriptField.MakeScript("redo()"), dontUndo: true, _stayInCollection: true, btnType: ButtonType.ToolButton, _dropAction: "alias", _hideContextMenu: true, _removeDropProperties: new List<string>(["dropAction", "_hideContextMenu", "stayInCollection"]), toolTip: "Click to redo", title: "redo", icon: "redo-alt", system: true }); } if (doc.dockedBtns === undefined) { - doc.dockedBtns = CurrentUserUtils.linearButtonList({ title: "docked buttons", _height: 30, linearViewExpandable: true, ignoreClick: true }, [doc["dockedBtn-undo"] as Doc, doc["dockedBtn-redo"] as Doc]); + doc.dockedBtns = CurrentUserUtils.linearButtonList({ title: "docked buttons", _height: 40, flexGap: 5, linearViewExpandable: true, ignoreClick: true }, [doc["dockedBtn-undo"] as Doc, doc["dockedBtn-redo"] as Doc]); } (doc["dockedBtn-undo"] as Doc).dontUndo = true; (doc["dockedBtn-redo"] as Doc).dontUndo = true; @@ -969,10 +969,10 @@ export class CurrentUserUtils { script: 'changeView', }, { - title: "Background", toolTip: "Background", btnType: ButtonType.ColorButton, width: 60, ignoreClick: true, icon: "fill-drip", + title: "Background", toolTip: "Background", btnType: ButtonType.ColorButton, ignoreClick: true, icon: "fill-drip", script: "changeBackgroundColor" }, - { title: "Overlay", toolTip: "Overlay", btnType: ButtonType.ToggleButton, icon: "layer-group", click: 'toggleOverlay()' }, + { title: "Overlay", toolTip: "Overlay", btnType: ButtonType.ToggleButton, icon: "layer-group", click: 'toggleOverlay()', script:'toggleOverlay'}, { title: "Text", type: "TextMenu" }, { title: "Ink & GFX", type: "InkMenu" }, // { title: "Ink Tools", type: "LinearMenu", icon: "pen-nib" }, diff --git a/src/client/views/nodes/button/FontIconBox.scss b/src/client/views/nodes/button/FontIconBox.scss index f0ca43a09..db42bdf5d 100644 --- a/src/client/views/nodes/button/FontIconBox.scss +++ b/src/client/views/nodes/button/FontIconBox.scss @@ -79,13 +79,19 @@ &.colorBtn { color: black; cursor: pointer; - flex-direction: row; + flex-direction: column; background: transparent; + .colorButton-color { + margin-top: 3px; + width: 90%; + height: 6px; + } + .menuButton-dropdownBox { position: absolute; - width: 150px; - height: 250px; + width: fit-content; + height: fit-content; top: 100%; z-index: 21; background-color: #e3e3e3; 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> ) |