diff options
Diffstat (limited to 'src/client/views/nodes/button/FontIconBox.tsx')
| -rw-r--r-- | src/client/views/nodes/button/FontIconBox.tsx | 74 |
1 files changed, 57 insertions, 17 deletions
diff --git a/src/client/views/nodes/button/FontIconBox.tsx b/src/client/views/nodes/button/FontIconBox.tsx index 7d5c38140..8314f2d86 100644 --- a/src/client/views/nodes/button/FontIconBox.tsx +++ b/src/client/views/nodes/button/FontIconBox.tsx @@ -98,8 +98,14 @@ export class FontIconBox extends DocComponent<ButtonProps>() { @computed get label() { return StrCast(this.rootDoc.icon_label, StrCast(this.rootDoc.title)); } - Icon = (color: string) => { - const icon = StrCast(this.dataDoc[this.fieldKey ?? 'icon'] ?? this.dataDoc.icon, 'user') as any; + Icon = (color: string, iconFalse?: boolean) => { + let icon; + if (iconFalse ) { + icon = StrCast(this.dataDoc[this.fieldKey ?? 'iconFalse'] ?? this.dataDoc.icon, 'user') as any; + if (icon) return <FontAwesomeIcon className={`fontIconBox-icon-${this.type}`} icon={icon} color={color} /> + else return null + } + icon = StrCast(this.dataDoc[this.fieldKey ?? 'icon'] ?? this.dataDoc.icon, 'user') as any; const trailsIcon = () => <img src={`/assets/${'presTrails.png'}`} style={{ width: 30, height: 30, filter: `invert(${color === Colors.DARK_GRAY ? '0%' : '100%'})` }} />; return !icon ? null : icon === 'pres-trail' ? trailsIcon() : <FontAwesomeIcon className={`fontIconBox-icon-${this.type}`} icon={icon} color={color} />; }; @@ -309,25 +315,18 @@ export class FontIconBox extends DocComponent<ButtonProps>() { console.log(e); } + console.log("current item: ", text); + // Get items to place into the list const list: IListItemProps[] = this.buttonList .filter(value => !Doc.noviceMode || !noviceList.length || noviceList.includes(value)) .map(value => ( { text: value, - style: { fontFamily: value } + style: { fontFamily: value }, + onClick: undoable(() => script.script.run({ self: this.rootDoc, value }), value) // shortcut: '#', } - // <div - // className="list-item" - // key={value} - // style={{ - // fontFamily: script.script.originalScript.startsWith('{ return setFont') ? value : undefined, - // backgroundColor: value === text ? Colors.LIGHT_BLUE : undefined, - // }} - // onClick={undoable(() => script.script.run({ self: this.rootDoc, value }), value)}> - // {value[0].toUpperCase() + value.slice(1)} - // </div> )); const label = @@ -338,7 +337,7 @@ export class FontIconBox extends DocComponent<ButtonProps>() { ); return ( - <Dropdown color={Colors.WHITE} type={Type.PRIM} dropdownType={DropdownType.SELECT} items={list} location={OrientationType.LEFT}/> + <Dropdown selected={{text: text}} color={Colors.WHITE} type={Type.PRIM} dropdownType={DropdownType.SELECT} items={list} location={OrientationType.LEFT}/> ) return ( @@ -466,6 +465,7 @@ export class FontIconBox extends DocComponent<ButtonProps>() { const switchToggle: boolean = BoolCast(this.rootDoc.switchToggle); const buttonText: string = StrCast(this.rootDoc.buttonText); const tooltip: string = StrCast(this.rootDoc.toolTip); + // Colors const color = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.Color); const backgroundColor = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.BackgroundColor); @@ -507,6 +507,7 @@ export class FontIconBox extends DocComponent<ButtonProps>() { } render() { + // determine dash button metadata const color = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.Color); const backgroundColor = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.BackgroundColor); const tooltip: string = StrCast(this.rootDoc.toolTip); @@ -523,7 +524,46 @@ export class FontIconBox extends DocComponent<ButtonProps>() { // prettier-ignore switch (this.type) { case ButtonType.EditableText: return this.editableText; - case ButtonType.DropdownList: button = this.dropdownListButton; break; + case ButtonType.DropdownList: + let script = ScriptCast(this.rootDoc.script); + let noviceList: string[] = []; + let text: string | undefined; + let dropdown = true; + let icon: IconProp = 'caret-down'; + try { + if (script?.script.originalScript.startsWith('setView')) { + const selected = SelectionManager.Docs().lastElement(); + if (selected) { + if (StrCast(selected.type) === DocumentType.COL) { + text = StrCast(selected._type_collection); + } else { + dropdown = false; + text = selected.type === DocumentType.RTF ? 'Text' : StrCast(selected.type); + icon = Doc.toIcon(selected); + } + } else { + dropdown = false; + icon = 'globe-asia'; + text = 'User Default'; + } + noviceList = [CollectionViewType.Freeform, CollectionViewType.Schema, CollectionViewType.Stacking, CollectionViewType.NoteTaking]; + } else text = StrCast((RichTextMenu.Instance?.TextView?.EditorView ? RichTextMenu.Instance : Doc.UserDoc()).fontFamily); + } catch (e) { + console.log(e); + } + // Get items to place into the list + const list: IListItemProps[] = this.buttonList + .filter(value => !Doc.noviceMode || !noviceList.length || noviceList.includes(value)) + .map(value => ( + { + text: value, + style: { fontFamily: value }, + onClick: undoable(() => script.script.run({ self: this.rootDoc, value }), value) + // shortcut: '#', + } + )); + button = <Dropdown selected={{text: text}} color={Colors.WHITE} type={Type.PRIM} dropdownType={DropdownType.SELECT} items={list} location={OrientationType.LEFT}/> + break; case ButtonType.ColorButton: button = this.colorButton; break; case ButtonType.NumberDropdownButton: button = this.numberDropdownButton; break; case ButtonType.NumberInlineButton: button = this.numberInlineButton; break; @@ -532,7 +572,7 @@ export class FontIconBox extends DocComponent<ButtonProps>() { case ButtonType.ToggleButton: button = this.toggleButton; break; case ButtonType.TextButton: // Script for checking the outcome of the toggle - const script = ScriptCast(this.rootDoc.script); + script = ScriptCast(this.rootDoc.script); const checkResult = script?.script.run({ _readOnly_: true }).result; button = ( <div className={`menuButton ${this.type}`} style={{ color, backgroundColor:checkResult ?? backgroundColor, opacity: 1, gridAutoColumns: `${NumCast(this.rootDoc._height)} auto` }}> @@ -548,7 +588,7 @@ export class FontIconBox extends DocComponent<ButtonProps>() { ); break; case ButtonType.MenuButton: button = ( - <IconButton tooltip={tooltip} size={Size.LARGE} color={color} icon={this.Icon(color)!} label={this.label}/> + <IconButton tooltip={tooltip} tooltipPlacement='right' size={Size.LARGE} color={color} icon={this.Icon(color)!} label={this.label}/> ); break; } |