1 files changed, 51 insertions, 20 deletions
diff --git a/src/client/views/nodes/button/FontIconBox.tsx b/src/client/views/nodes/button/FontIconBox.tsx
index 5bba51ec8..e2fe0bcf1 100644
--- a/src/client/views/nodes/button/FontIconBox.tsx
+++ b/src/client/views/nodes/button/FontIconBox.tsx
@@ -1,6 +1,7 @@
 import { IconProp } from '@fortawesome/fontawesome-svg-core';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Tooltip } from '@material-ui/core';
+import { Button, ColorPicker, Dropdown, DropdownType, IconButton, IListItemProps, OrientationType, Size, Toggle, ToggleType, Type } from 'browndash-components';
 import { action, computed, observable, runInAction } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
@@ -33,6 +34,7 @@ import { OpenWhere } from '../DocumentView';
 import { RichTextMenu } from '../formattedText/RichTextMenu';
 import { WebBox } from '../WebBox';
 import { FontIconBadge } from './FontIconBadge';
+import * as fa from 'react-icons/fa'
 import './FontIconBox.scss';
 
 export enum ButtonType {
@@ -309,19 +311,24 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
         }
 
         // Get items to place into the list
-        const list = this.buttonList
+        const list: IListItemProps[] = this.buttonList
             .filter(value => !Doc.noviceMode || !noviceList.length || noviceList.includes(value))
             .map(value => (
-                <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>
+                {
+                    text: value,
+                    shortcut: '#',
+                    icon: <fa.FaCaretUp/>
+                }
+                // <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 =
@@ -332,6 +339,10 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
             );
 
         return (
+            <Dropdown type={Type.PRIM} dropdownType={DropdownType.CLICK} items={list} location={OrientationType.LEFT}/>
+        )
+
+        return (
             <div
                 className={`menuButton ${this.type} ${active}`}
                 style={{ backgroundColor: this.rootDoc.dropDownOpen ? Colors.MEDIUM_BLUE : backgroundColor, color: color, display: dropdown ? undefined : 'flex' }}
@@ -401,6 +412,15 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
                     {this.label}
                 </div>
             );
+        
+        return (
+            <ColorPicker onChange={(e) => {
+                this.colorPickerClosed = !this.colorPickerClosed;
+                this.noTooltip = !this.colorPickerClosed;
+                setTimeout(() => Doc.UnBrushAllDocs());
+                e.stopPropagation();
+            }}/>
+        )
 
         return (
             <div
@@ -453,6 +473,10 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
                     {this.label}
                 </div>
             );
+        console.log("switchToggle", switchToggle, this.rootDoc.title)
+        return (
+            <Toggle toggleType={ToggleType.BUTTON} type={Type.PRIM} toggleStatus={switchToggle} text={buttonText} color={color} icon={this.Icon(color)!} label={this.label}/>
+        )
 
         if (switchToggle) {
             return (
@@ -480,6 +504,11 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
     @computed get defaultButton() {
         const color = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.Color);
         const backgroundColor = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.BackgroundColor);
+
+        return (
+            <IconButton icon={this.Icon(color)!} label={this.label}/>
+        )
+
         return (
             <div className={`menuButton ${this.type}`} onContextMenu={this.specificContextMenu} style={{ backgroundColor: 'transparent', borderBottomLeftRadius: this.dropdown ? 0 : undefined }}>
                 <div className="menuButton-wrap">
@@ -548,18 +577,20 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
                 break;
             case ButtonType.ClickButton:
             case ButtonType.ToolButton: button = (
-                    <div className={`menuButton ${this.type + (FontIconBox.GetShowLabels() ? 'Label' : '')}`} style={{ backgroundColor, color, opacity: 1 }}>
-                        {this.Icon(color)}
-                        {label()}
-                    </div>
+                    <IconButton color={color} icon={this.Icon(color)!} label={this.label}/>
+                    // <div className={`menuButton ${this.type + (FontIconBox.GetShowLabels() ? 'Label' : '')}`} style={{ backgroundColor, color, opacity: 1 }}>
+                    //     {this.Icon(color)}
+                    //     {label()}
+                    // </div>
                 );
                 break;
             case ButtonType.MenuButton: button = (
-                    <div className={`menuButton ${this.type}`} style={{ color, backgroundColor }}>
-                        {this.Icon(color)}
-                        {label(true)}
-                        <FontIconBadge value={Cast(this.Document.badgeValue, 'string', null)} />
-                    </div>
+                    <IconButton size={Size.LARGE} color={color} icon={this.Icon(color)!} label={this.label}/>
+                    // <div className={`menuButton ${this.type}`} style={{ color, backgroundColor }}>
+                    //     {this.Icon(color)}
+                    //     {label(true)}
+                    //     <FontIconBadge value={Cast(this.Document.badgeValue, 'string', null)} />
+                    // </div>
                 );
                 break;
         }