From 10ed9b42d8fd56364ca8dcfd5b9005fae28b305f Mon Sep 17 00:00:00 2001
From: Geireann Lindfield Roberts <60007097+geireann@users.noreply.github.com>
Date: Sun, 9 Jul 2023 20:08:14 -0400
Subject: fixing dropdown components

---
 src/client/views/nodes/button/FontIconBox.tsx | 92 ++++++++-------------------
 src/client/views/topbar/TopBar.tsx            | 13 ++--
 2 files changed, 31 insertions(+), 74 deletions(-)

(limited to 'src/client/views')

diff --git a/src/client/views/nodes/button/FontIconBox.tsx b/src/client/views/nodes/button/FontIconBox.tsx
index b9f75444f..7d5c38140 100644
--- a/src/client/views/nodes/button/FontIconBox.tsx
+++ b/src/client/views/nodes/button/FontIconBox.tsx
@@ -1,11 +1,12 @@
 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 { 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';
 import { ColorState, SketchPicker } from 'react-color';
+import * as fa from 'react-icons/fa';
 import { Doc, StrListCast } from '../../../../fields/Doc';
 import { Height, Width } from '../../../../fields/DocSymbols';
 import { InkTool } from '../../../../fields/InkField';
@@ -33,8 +34,6 @@ import { CollectionFreeFormDocumentView } from '../CollectionFreeFormDocumentVie
 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 {
@@ -316,8 +315,8 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
             .map(value => (
                 {
                     text: value,
-                    shortcut: '#',
-                    icon: <fa.FaCaretUp/>
+                    style: { fontFamily: value }
+                    // shortcut: '#',
                 }
                 // <div
                 //     className="list-item"
@@ -339,7 +338,7 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
             );
 
         return (
-            <Dropdown type={Type.PRIM} dropdownType={DropdownType.CLICK} items={list} location={OrientationType.LEFT}/>
+            <Dropdown color={Colors.WHITE} type={Type.PRIM} dropdownType={DropdownType.SELECT} items={list} location={OrientationType.LEFT}/>
         )
 
         return (
@@ -405,6 +404,7 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
         const color = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.Color);
         const backgroundColor = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.BackgroundColor);
         const curColor = this.colorScript?.script.run({ self: this.rootDoc, value: undefined, _readOnly_: true }).result ?? 'transparent';
+        const tooltip: string = StrCast(this.rootDoc.toolTip);
 
         const label =
             !this.label || !FontIconBox.GetShowLabels() ? null : (
@@ -414,12 +414,15 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
             );
         
         return (
-            <ColorPicker onChange={(e) => {
-                this.colorPickerClosed = !this.colorPickerClosed;
-                this.noTooltip = !this.colorPickerClosed;
-                setTimeout(() => Doc.UnBrushAllDocs());
-                e.stopPropagation();
-            }}/>
+            <ColorPicker 
+                onChange={(e) => {
+                    this.colorPickerClosed = !this.colorPickerClosed;
+                    setTimeout(() => Doc.UnBrushAllDocs());
+                    e.stopPropagation();
+                }}
+                icon={this.Icon(color)!}
+                tooltip={tooltip}
+            />
         )
 
         return (
@@ -462,40 +465,15 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
         // Determine the type of toggle button
         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);
 
-        // Button label
-        const label =
-            !this.label || !FontIconBox.GetShowLabels() ? null : (
-                <div className="fontIconBox-label" style={{ color, backgroundColor }}>
-                    {this.label}
-                </div>
-            );
-        console.log("switchToggle", switchToggle, this.rootDoc.title)
+        console.log(buttonText, tooltip);
         return (
-            <Toggle tooltip={this.label} toggleType={ToggleType.BUTTON} type={Type.PRIM} toggleStatus={switchToggle} text={buttonText} color={color} icon={this.Icon(color)!} label={this.label}/>
+            <Toggle tooltip={`Toggle + ${tooltip}`} toggleType={ToggleType.BUTTON} type={Type.PRIM} toggleStatus={switchToggle} text={buttonText} color={color} icon={this.Icon(color)!} label={this.label}/>
         )
-
-        if (switchToggle) {
-            return (
-                <div className={`menuButton ${this.type} ${'switch'}`}>
-                    {buttonText ? buttonText : null}
-                    <label className="switch">
-                        <input type="checkbox" checked={backgroundColor === Colors.MEDIUM_BLUE} />
-                        <span className="slider round" />
-                    </label>
-                </div>
-            );
-        } else {
-            return (
-                <div className={`menuButton ${this.type + (FontIconBox.GetShowLabels() ? 'Label' : '')}`} style={{ opacity: 1, backgroundColor, color }}>
-                    {this.Icon(color)}
-                    {label}
-                </div>
-            );
-        }
     }
 
     /**
@@ -504,24 +482,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);
+        const tooltip: string = StrCast(this.rootDoc.toolTip);
 
         return (
-            <IconButton icon={this.Icon(color)!} label={this.label}/>
+            <IconButton tooltip={tooltip} 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">
-                    {this.Icon(color)}
-                    {!this.label || !FontIconBox.GetShowLabels() ? null : (
-                        <div className="fontIconBox-label" style={{ color: color, backgroundColor: backgroundColor }}>
-                            {' '}
-                            {this.label}{' '}
-                        </div>
-                    )}
-                </div>
-            </div>
-        );
     }
 
     @computed get editableText() {
@@ -544,6 +509,8 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
     render() {
         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);
+
         const label = (noBackground: boolean = false) =>
             !this.label || !FontIconBox.GetShowLabels() ? null : (
                 <div className="fontIconBox-label" style={{ color, backgroundColor: noBackground ? 'transparent' : backgroundColor }}>
@@ -577,25 +544,16 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
                 break;
             case ButtonType.ClickButton:
             case ButtonType.ToolButton: button = (
-                    <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>
+                    <IconButton tooltip={tooltip} color={color} icon={this.Icon(color)!} label={this.label}/>
                 );
                 break;
             case ButtonType.MenuButton: button = (
-                    <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>
+                    <IconButton tooltip={tooltip} size={Size.LARGE} color={color} icon={this.Icon(color)!} label={this.label}/>
                 );
                 break;
         }
 
-        return !this.layoutDoc.toolTip || this.noTooltip ? button : <Tooltip title={<div className="dash-tooltip">{StrCast(this.layoutDoc.toolTip)}</div>}>{button}</Tooltip>;
+        return button;
     }
 }
 
diff --git a/src/client/views/topbar/TopBar.tsx b/src/client/views/topbar/TopBar.tsx
index a73d5cce0..80294917f 100644
--- a/src/client/views/topbar/TopBar.tsx
+++ b/src/client/views/topbar/TopBar.tsx
@@ -166,13 +166,12 @@ export class TopBar extends React.Component {
     render() {
         return (
             //TODO:glr Add support for light / dark mode
-            <div style={{ pointerEvents: 'all' }} className="topbar-container">
-                <div
-                    className="topbar-inner-container"
-                    style={{
-                        color: this.textColor,
-                        background: this.backgroundColor,
-                    }}>
+            <div style={{ 
+                pointerEvents: 'all',
+                color: this.textColor,
+                background: this.backgroundColor, 
+            }} className="topbar-container">
+                <div className="topbar-inner-container">
                     {this.topbarLeft}
                     {this.topbarCenter}
                     {this.topbarRight}
-- 
cgit v1.2.3-70-g09d2