From 0fc47fefcb72592bd34e238949db9e98a84b8a63 Mon Sep 17 00:00:00 2001
From: geireann <geireann.lindfield@gmail.com>
Date: Mon, 5 Jun 2023 19:42:06 -0400
Subject: topbar, buttons etc

---
 src/client/views/nodes/DocumentView.scss           |  5 +-
 src/client/views/nodes/DocumentView.tsx            |  2 +-
 src/client/views/nodes/button/FontIconBox.tsx      | 39 ++++++++---
 .../nodes/button/colorDropdown/ColorDropdown.tsx   | 77 ----------------------
 .../views/nodes/button/colorDropdown/index.ts      |  1 -
 5 files changed, 35 insertions(+), 89 deletions(-)
 delete mode 100644 src/client/views/nodes/button/colorDropdown/ColorDropdown.tsx
 delete mode 100644 src/client/views/nodes/button/colorDropdown/index.ts

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

diff --git a/src/client/views/nodes/DocumentView.scss b/src/client/views/nodes/DocumentView.scss
index 1265651ad..cfad67912 100644
--- a/src/client/views/nodes/DocumentView.scss
+++ b/src/client/views/nodes/DocumentView.scss
@@ -115,7 +115,10 @@
         width: 100%;
         height: 100%;
         transition: inherit;
-
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        
         .sharingIndicator {
             height: 30px;
             width: 30px;
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index cc105326f..a94d6f71d 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -1211,7 +1211,7 @@ export class DocumentViewInternal extends DocComponent<DocumentViewInternalProps
         const renderDoc = this.renderDoc({
             borderRadius: this.borderRounding,
             outline: highlighting && !this.borderRounding && !highlighting.highlightStroke ? `${highlighting.highlightColor} ${highlighting.highlightStyle} ${highlighting.highlightIndex}px` : 'solid 0px',
-            border: highlighting && this.borderRounding && highlighting.highlightStyle === 'dashed' ? `${highlighting.highlightStyle} ${highlighting.highlightColor} ${highlighting.highlightIndex}px` : undefined,
+            border:  highlighting && this.borderRounding && highlighting.highlightStyle === 'dashed' ? `${highlighting.highlightStyle} ${highlighting.highlightColor} ${highlighting.highlightIndex}px` : undefined,
             boxShadow,
             clipPath: borderPath?.clipPath,
         });
diff --git a/src/client/views/nodes/button/FontIconBox.tsx b/src/client/views/nodes/button/FontIconBox.tsx
index fb29f95f4..5f4117a8d 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, IconButton, Size } from 'browndash-components';
 import { action, computed, observable, runInAction } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
@@ -400,6 +401,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 +463,10 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
                 </div>
             );
 
+        return (
+            <IconButton text={buttonText} icon={this.Icon(color)!} label={this.label}/>
+        )
+
         if (switchToggle) {
             return (
                 <div className={`menuButton ${this.type} ${'switch'}`}>
@@ -479,6 +493,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">
@@ -547,18 +566,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;
         }
diff --git a/src/client/views/nodes/button/colorDropdown/ColorDropdown.tsx b/src/client/views/nodes/button/colorDropdown/ColorDropdown.tsx
deleted file mode 100644
index 74c3c563c..000000000
--- a/src/client/views/nodes/button/colorDropdown/ColorDropdown.tsx
+++ /dev/null
@@ -1,77 +0,0 @@
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import React, { Component } from 'react';
-import { BoolCast, StrCast } from '../../../../../fields/Types';
-import { IButtonProps } from '../ButtonInterface';
-import { ColorState, SketchPicker } from 'react-color';
-import { ScriptField } from '../../../../../fields/ScriptField';
-import { Doc } from '../../../../../fields/Doc';
-import { FontIconBox } from '../FontIconBox';
-
-export class ColorDropdown extends Component<IButtonProps> {
-    render() {
-        const active: string = StrCast(this.props.rootDoc.dropDownOpen);
-
-        const script: string = StrCast(this.props.rootDoc.script);
-        const scriptCheck: string = script + '(undefined, true)';
-        const boolResult = ScriptField.MakeScript(scriptCheck)?.script.run().result;
-
-        const stroke: boolean = false;
-        // if (script === "setStrokeColor") {
-        //     stroke = true;
-        //     const checkWidth = ScriptField.MakeScript("setStrokeWidth(0, true)")?.script.run().result;
-        //     const width = 20 + (checkWidth / 100) * 70;
-        //     const height = 20 + (checkWidth / 100) * 70;
-        //     strokeIcon = (<div style={{ borderRadius: "100%", width: width + '%', height: height + '%', backgroundColor: boolResult ? boolResult : "#FFFFFF" }} />);
-        // }
-
-        const colorOptions: string[] = ['#D0021B', '#F5A623', '#F8E71C', '#8B572A', '#7ED321', '#417505', '#9013FE', '#4A90E2', '#50E3C2', '#B8E986', '#000000', '#4A4A4A', '#9B9B9B', '#FFFFFF', '#f1efeb'];
-
-        const colorBox = (func: (color: ColorState) => void) => <SketchPicker disableAlpha={!stroke} onChange={func} color={boolResult ? boolResult : '#FFFFFF'} presetColors={colorOptions} />;
-        const label =
-            !this.props.label || !FontIconBox.GetShowLabels() ? null : (
-                <div className="fontIconBox-label" style={{ color: this.props.color, backgroundColor: this.props.backgroundColor, position: 'absolute' }}>
-                    {this.props.label}
-                </div>
-            );
-
-        const dropdownCaret = (
-            <div className="menuButton-dropDown" style={{ borderBottomRightRadius: active ? 0 : undefined }}>
-                <FontAwesomeIcon icon={'caret-down'} color={this.props.color} size="sm" />
-            </div>
-        );
-
-        const click = (value: ColorState) => {
-            const hex: string = value.hex;
-            const s = ScriptField.MakeScript(script + '("' + hex + '", false)');
-            if (s) {
-                s.script.run().result;
-            }
-        };
-        return (
-            <div
-                className={`menuButton ${this.props.type} ${active}`}
-                style={{ color: this.props.color, borderBottomLeftRadius: active ? 0 : undefined }}
-                onClick={() => (this.props.rootDoc.dropDownOpen = !this.props.rootDoc.dropDownOpen)}
-                onPointerDown={e => e.stopPropagation()}>
-                <FontAwesomeIcon className={`fontIconBox-icon-${this.props.type}`} icon={this.props.icon} color={this.props.color} />
-                <div className="colorButton-color" style={{ backgroundColor: boolResult ? boolResult : '#FFFFFF' }} />
-                {label}
-                {/* {dropdownCaret} */}
-                {this.props.rootDoc.dropDownOpen ? (
-                    <div>
-                        <div className="menuButton-dropdownBox" onPointerDown={e => e.stopPropagation()} onClick={e => e.stopPropagation()}>
-                            {colorBox(click)}
-                        </div>
-                        <div
-                            className="dropbox-background"
-                            onClick={e => {
-                                e.stopPropagation();
-                                this.props.rootDoc.dropDownOpen = false;
-                            }}
-                        />
-                    </div>
-                ) : null}
-            </div>
-        );
-    }
-}
diff --git a/src/client/views/nodes/button/colorDropdown/index.ts b/src/client/views/nodes/button/colorDropdown/index.ts
deleted file mode 100644
index 1147d6457..000000000
--- a/src/client/views/nodes/button/colorDropdown/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './ColorDropdown';
\ No newline at end of file
-- 
cgit v1.2.3-70-g09d2