From 3958654925e92b1046b3ed5d49160514b6e48258 Mon Sep 17 00:00:00 2001
From: geireann <geireann.lindfield@gmail.com>
Date: Tue, 6 Jun 2023 14:36:21 -0400
Subject: added rec stuff and begun updating components

---
 src/client/views/nodes/button/FontIconBox.tsx | 34 +++++++++++++++++----------
 1 file changed, 22 insertions(+), 12 deletions(-)

(limited to 'src/client/views/nodes/button')

diff --git a/src/client/views/nodes/button/FontIconBox.tsx b/src/client/views/nodes/button/FontIconBox.tsx
index 5f4117a8d..b2223519e 100644
--- a/src/client/views/nodes/button/FontIconBox.tsx
+++ b/src/client/views/nodes/button/FontIconBox.tsx
@@ -1,7 +1,7 @@
 import { IconProp } from '@fortawesome/fontawesome-svg-core';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Tooltip } from '@material-ui/core';
-import { Button, ColorPicker, IconButton, Size } from 'browndash-components';
+import { Button, ColorPicker, Dropdown, DropdownType, IconButton, IListItemProps, OrientationType, Size, Type } from 'browndash-components';
 import { action, computed, observable, runInAction } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
@@ -33,6 +33,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 +310,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 =
@@ -331,6 +337,10 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
                 </div>
             );
 
+        return (
+            <Dropdown type={Type.PRIM} dropdownType={DropdownType.CLICK} items={list} location={OrientationType.LEFT}/>
+        )
+
         return (
             <div
                 className={`menuButton ${this.type} ${active}`}
-- 
cgit v1.2.3-70-g09d2