diff options
Diffstat (limited to 'src/client/views/nodes/button/FontIconBox.tsx')
| -rw-r--r-- | src/client/views/nodes/button/FontIconBox.tsx | 21 |
1 files changed, 13 insertions, 8 deletions
diff --git a/src/client/views/nodes/button/FontIconBox.tsx b/src/client/views/nodes/button/FontIconBox.tsx index fbb336445..b72f31ef8 100644 --- a/src/client/views/nodes/button/FontIconBox.tsx +++ b/src/client/views/nodes/button/FontIconBox.tsx @@ -253,11 +253,12 @@ export class FontIconBox extends DocComponent<ButtonProps, FontIconDocument>(Fon } else if (selected) { dropdown = false; text = StrCast(selected.Document.type); + if (text === DocumentType.RTF) text = "Text"; icon = Doc.toIcon(selected.Document); } else { dropdown = false; - noneSelected = true; - text = "None selected"; + icon = "globe-asia"; + text = "User Default"; } noviceList = [CollectionViewType.Freeform, CollectionViewType.Schema, CollectionViewType.Stacking]; } else if (script === 'setFont') { @@ -302,7 +303,7 @@ export class FontIconBox extends DocComponent<ButtonProps, FontIconDocument>(Fon <div className={`menuButton ${this.type} ${active}`} style={{ backgroundColor: this.rootDoc.dropDownOpen ? Colors.MEDIUM_BLUE : backgroundColor, color: color, display: dropdown ? undefined : "flex" }} onClick={dropdown ? () => this.rootDoc.dropDownOpen = !this.rootDoc.dropDownOpen : undefined}> - {dropdown || noneSelected ? (null) : <FontAwesomeIcon className={`fontIconBox-icon-${this.type}`} icon={icon} color={color} />} + {dropdown || noneSelected ? (null) : <FontAwesomeIcon style={{marginLeft: 5}} className={`fontIconBox-icon-${this.type}`} icon={icon} color={color} />} <div className="menuButton-dropdown-header"> {text && text[0].toUpperCase() + text.slice(1)} </div> @@ -399,7 +400,7 @@ export class FontIconBox extends DocComponent<ButtonProps, FontIconDocument>(Fon @computed get toggleButton() { // Determine the type of toggle button const switchToggle: boolean = BoolCast(this.rootDoc.switchToggle); - + const buttonText: string = StrCast(this.rootDoc.buttonText); // Colors const color = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.Color); const backgroundColor = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.BackgroundColor); @@ -413,6 +414,7 @@ export class FontIconBox extends DocComponent<ButtonProps, FontIconDocument>(Fon if (switchToggle) { return ( <div className={`menuButton ${this.type} ${'switch'}`}> + {buttonText ? buttonText : null} <label className="switch"> <input type="checkbox" checked={backgroundColor === Colors.MEDIUM_BLUE} @@ -487,7 +489,7 @@ export class FontIconBox extends DocComponent<ButtonProps, FontIconDocument>(Fon </div>; const menuLabel = !this.label || !Doc.UserDoc()._showMenuLabel ? (null) : - <div className="fontIconBox-label" style={{ color: color, backgroundColor: backgroundColor }}> + <div className="fontIconBox-label" style={{ color: color, backgroundColor: "transparent" }}> {this.label} </div>; @@ -508,7 +510,7 @@ export class FontIconBox extends DocComponent<ButtonProps, FontIconDocument>(Fon switch (this.type) { case ButtonType.TextButton: button = ( - <div className={`menuButton ${this.type}`} style={{ color: color, backgroundColor: backgroundColor, opacity: 1 }}> + <div className={`menuButton ${this.type}`} style={{ color: color, backgroundColor: backgroundColor, opacity: 1, gridAutoColumns: `${NumCast(this.rootDoc._height)} auto` }}> <FontAwesomeIcon className={`fontIconBox-icon-${this.type}`} icon={this.icon} color={color} /> {buttonText ? <div className="button-text"> @@ -557,9 +559,11 @@ export class FontIconBox extends DocComponent<ButtonProps, FontIconDocument>(Fon ); break; case ButtonType.MenuButton: + const trailsIcon = <img src={`/assets/${"presTrails.png"}`} + style={{ width: 30, height: 30, filter: `invert(${color === Colors.DARK_GRAY ? "0%" : "100%"})` }} />; button = ( <div className={`menuButton ${this.type}`} style={{ color: color, backgroundColor: backgroundColor }}> - <FontAwesomeIcon className={`fontIconBox-icon-${this.type}`} icon={this.icon} color={color} /> + {this.icon === "pres-trail" ? trailsIcon : <FontAwesomeIcon className={`fontIconBox-icon-${this.type}`} icon={this.icon} color={color} />} {menuLabel} <FontIconBadge collection={Cast(this.rootDoc.watchedDocuments, Doc, null)} /> </div > @@ -603,7 +607,7 @@ Scripting.addGlobal(function setBackgroundColor(color?: string, checkResult?: bo Scripting.addGlobal(function toggleOverlay(checkResult?: boolean) { const selected = SelectionManager.Views().length ? SelectionManager.Views()[0] : undefined; if (checkResult && selected) { - if (NumCast(selected.Document.z) === 1) return Colors.MEDIUM_BLUE; + if (NumCast(selected.Document.z) >= 1) return Colors.MEDIUM_BLUE; else return "transparent"; } selected ? selected.props.CollectionFreeFormDocumentView?.().float() : console.log("[FontIconBox.tsx] toggleOverlay failed"); @@ -877,6 +881,7 @@ Scripting.addGlobal(function webSetURL(url: string, checkResult?: boolean) { **/ Scripting.addGlobal(function toggleSchemaPreview(checkResult?: boolean) { const selected = SelectionManager.Views().length ? SelectionManager.Views()[0].rootDoc : undefined; + console.log(selected && selected.title); if (checkResult && selected) { const result: boolean = NumCast(selected.schemaPreviewWidth) > 0; if (result) return Colors.MEDIUM_BLUE; |