From 59458f5c11e7e0891391da65a54269a56c5c71b6 Mon Sep 17 00:00:00 2001
From: geireann <geireann.lindfield@gmail.com>
Date: Tue, 31 Aug 2021 15:03:37 -0400
Subject: there will be issues as a result of this

---
 src/client/views/nodes/button/ButtonInterface.ts   | 12 ++++
 src/client/views/nodes/button/FontIconBox.scss     |  4 ++
 src/client/views/nodes/button/FontIconBox.tsx      | 49 ++++++++++----
 .../nodes/button/colorDropdown/ColorDropdown.tsx   | 77 ++++++++++++++++++++++
 .../views/nodes/button/colorDropdown/index.ts      |  1 +
 .../views/nodes/button/textButton/TextButton.tsx   | 17 +++++
 src/client/views/nodes/button/textButton/index.ts  |  1 +
 .../nodes/button/toggleButton/ToggleButton.tsx     | 34 ++++++++++
 .../views/nodes/button/toggleButton/index.ts       |  1 +
 9 files changed, 185 insertions(+), 11 deletions(-)
 create mode 100644 src/client/views/nodes/button/ButtonInterface.ts
 create mode 100644 src/client/views/nodes/button/colorDropdown/ColorDropdown.tsx
 create mode 100644 src/client/views/nodes/button/colorDropdown/index.ts
 create mode 100644 src/client/views/nodes/button/textButton/TextButton.tsx
 create mode 100644 src/client/views/nodes/button/textButton/index.ts
 create mode 100644 src/client/views/nodes/button/toggleButton/ToggleButton.tsx
 create mode 100644 src/client/views/nodes/button/toggleButton/index.ts

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

diff --git a/src/client/views/nodes/button/ButtonInterface.ts b/src/client/views/nodes/button/ButtonInterface.ts
new file mode 100644
index 000000000..0aa2ac8e1
--- /dev/null
+++ b/src/client/views/nodes/button/ButtonInterface.ts
@@ -0,0 +1,12 @@
+import { Doc } from "../../../../fields/Doc";
+import { IconProp } from "@fortawesome/fontawesome-svg-core";
+import { ButtonType } from "./FontIconBox";
+
+export interface IButtonProps {
+    type: string | ButtonType;
+    rootDoc: Doc;
+    label: any;
+    icon: IconProp;
+    color: string;
+    backgroundColor: string;
+}
\ No newline at end of file
diff --git a/src/client/views/nodes/button/FontIconBox.scss b/src/client/views/nodes/button/FontIconBox.scss
index b080f1dab..48fb2c8dc 100644
--- a/src/client/views/nodes/button/FontIconBox.scss
+++ b/src/client/views/nodes/button/FontIconBox.scss
@@ -49,6 +49,10 @@
         }
     }
 
+    &.textBtn {
+        width: 100%;
+    }
+
     &.tglBtn {
         cursor: pointer;
 
diff --git a/src/client/views/nodes/button/FontIconBox.tsx b/src/client/views/nodes/button/FontIconBox.tsx
index a6887cbba..96db929eb 100644
--- a/src/client/views/nodes/button/FontIconBox.tsx
+++ b/src/client/views/nodes/button/FontIconBox.tsx
@@ -27,11 +27,15 @@ import { StyleProp } from '../../StyleProvider';
 import { FieldView, FieldViewProps } from '.././FieldView';
 import './FontIconBox.scss';
 import { RichTextMenu } from '../formattedText/RichTextMenu';
+import { TextButton } from './textButton';
+import { ToggleButton } from './toggleButton';
+import { IButtonProps } from './ButtonInterface';
 const FontIconSchema = createSchema({
     icon: "string",
 });
 
 export enum ButtonType {
+    TextButton = "textBtn",
     MenuButton = "menuBtn",
     DropdownList = "drpdownList",
     DropdownButton = "drpdownBtn",
@@ -331,13 +335,13 @@ export class FontIconBox extends DocComponent<ButtonProps, FontIconDocument>(Fon
 
         let stroke: boolean = false;
         let strokeIcon: any;
-        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" }} />);
-        }
+        // 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',
@@ -473,25 +477,47 @@ export class FontIconBox extends DocComponent<ButtonProps, FontIconDocument>(Fon
     render() {
         const color = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.Color);
         const backgroundColor = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.BackgroundColor);
-        // Variables called through eval (from button)
-        const numSelected = SelectionManager.Views().length;
-
         const dark: boolean = Doc.UserDoc().colorScheme === ColorScheme.Dark;
 
-        const active: string = StrCast(this.rootDoc.dropDownOpen);
         const label = !this.label || !Doc.UserDoc()._showLabel ? (null) :
             <div className="fontIconBox-label" style={{ color: color, backgroundColor: backgroundColor, position: "absolute" }}>
                 {this.label}
             </div>;
+
         const menuLabel = !this.label || !Doc.UserDoc()._showMenuLabel ? (null) :
             <div className="fontIconBox-label" style={{ color: color, backgroundColor: backgroundColor }}>
                 {this.label}
             </div>;
 
+        const buttonProps:IButtonProps = {
+            type: this.type,
+            rootDoc: this.rootDoc,
+            label: label,
+            backgroundColor: backgroundColor,
+            icon: this.icon,
+            color: color
+        }
+
+        const buttonText = StrCast(this.rootDoc.buttonText);
+
         // TODO:glr Add label of button type
         let button = this.defaultButton;
 
         switch (this.type) {
+            case ButtonType.TextButton:
+                button = (
+                    <div className={`menuButton ${this.type}`} style={{ color: color, backgroundColor: backgroundColor, opacity: 1 }}>
+                        <FontAwesomeIcon className={`fontIconBox-icon-${this.type}`} icon={this.icon} color={color} />
+                        {buttonText ? 
+                            <div className="button-text">
+                                    {buttonText}
+                            </div>
+                            : null}
+                        {label}
+                    </div>
+                );
+                // button = <TextButton {...buttonProps}></TextButton>
+                break;
             case ButtonType.EditableText:
                 console.log("Editable text");
                 button = this.editableText;
@@ -518,6 +544,7 @@ export class FontIconBox extends DocComponent<ButtonProps, FontIconDocument>(Fon
                 break;
             case ButtonType.ToggleButton:
                 button = this.toggleButton;
+                // button = <ToggleButton {...buttonProps}></ToggleButton>
                 break;
             case ButtonType.ClickButton:
                 button = (
diff --git a/src/client/views/nodes/button/colorDropdown/ColorDropdown.tsx b/src/client/views/nodes/button/colorDropdown/ColorDropdown.tsx
new file mode 100644
index 000000000..1809f4e2e
--- /dev/null
+++ b/src/client/views/nodes/button/colorDropdown/ColorDropdown.tsx
@@ -0,0 +1,77 @@
+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';
+
+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;
+
+        let stroke: boolean = false;
+        let strokeIcon: any;
+        // 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 || !Doc.UserDoc()._showLabel ? (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()}>
+                {stroke ? strokeIcon : <><FontAwesomeIcon className={`fontIconBox-icon-${this.props.type}`} icon={this.props.icon} color={this.props.color} />
+                    <div className="colorButton-color"
+                        style={{ backgroundColor: boolResult ? boolResult : "#FFFFFF" }}
+                    ></div></>}
+                {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>
+        );
+    }
+}
\ No newline at end of file
diff --git a/src/client/views/nodes/button/colorDropdown/index.ts b/src/client/views/nodes/button/colorDropdown/index.ts
new file mode 100644
index 000000000..1147d6457
--- /dev/null
+++ b/src/client/views/nodes/button/colorDropdown/index.ts
@@ -0,0 +1 @@
+export * from './ColorDropdown';
\ No newline at end of file
diff --git a/src/client/views/nodes/button/textButton/TextButton.tsx b/src/client/views/nodes/button/textButton/TextButton.tsx
new file mode 100644
index 000000000..414b50dcb
--- /dev/null
+++ b/src/client/views/nodes/button/textButton/TextButton.tsx
@@ -0,0 +1,17 @@
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import React, { Component } from 'react';
+import { BoolCast } from '../../../../../fields/Types';
+import { IButtonProps } from '../ButtonInterface';
+
+export class TextButton extends Component<IButtonProps> {
+    render() {
+        const type = this.props.type;
+        // Determine the type of toggle button
+        const buttonText: boolean = BoolCast(this.props.rootDoc.switchToggle);
+
+        return (<div className={`menuButton ${this.props.type}`} style={{ opacity: 1, backgroundColor: this.props.backgroundColor, color: this.props.color }}>
+            <FontAwesomeIcon className={`fontIconBox-icon-${this.props.type}`} icon={this.props.icon} color={this.props.color} />
+            {this.props.label}
+        </div>)
+    }
+}
\ No newline at end of file
diff --git a/src/client/views/nodes/button/textButton/index.ts b/src/client/views/nodes/button/textButton/index.ts
new file mode 100644
index 000000000..01fcde54f
--- /dev/null
+++ b/src/client/views/nodes/button/textButton/index.ts
@@ -0,0 +1 @@
+export * from './TextButton'
\ No newline at end of file
diff --git a/src/client/views/nodes/button/toggleButton/ToggleButton.tsx b/src/client/views/nodes/button/toggleButton/ToggleButton.tsx
new file mode 100644
index 000000000..dca6487d8
--- /dev/null
+++ b/src/client/views/nodes/button/toggleButton/ToggleButton.tsx
@@ -0,0 +1,34 @@
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import React, { Component } from 'react';
+import { BoolCast } from '../../../../../fields/Types';
+import { Colors } from '../../../global/globalEnums';
+import { IButtonProps } from '../ButtonInterface';
+
+export class ToggleButton extends Component<IButtonProps> {
+    render() {
+        const type = this.props.type;
+        // Determine the type of toggle button
+        const switchToggle: boolean = BoolCast(this.props.rootDoc.switchToggle);
+
+        if (switchToggle) {
+            return (
+                <div className={`menuButton ${type} ${'switch'}`}>
+                    <label className="switch">
+                        <input type="checkbox"
+                            checked={this.props.backgroundColor === Colors.MEDIUM_BLUE}
+                        />
+                        <span className="slider round"></span>
+                    </label>
+                </div>
+            );
+        } else {
+            return (
+                <div className={`menuButton ${type}`}
+                    style={{ opacity: 1, backgroundColor: this.props.backgroundColor, color: this.props.color }}>
+                    <FontAwesomeIcon className={`fontIconBox-icon-${type}`} icon={this.props.icon} color={this.props.color} />
+                    {this.props.label}
+                </div>
+            );
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/client/views/nodes/button/toggleButton/index.ts b/src/client/views/nodes/button/toggleButton/index.ts
new file mode 100644
index 000000000..48b28fb4c
--- /dev/null
+++ b/src/client/views/nodes/button/toggleButton/index.ts
@@ -0,0 +1 @@
+export * from './ToggleButton'
\ No newline at end of file
-- 
cgit v1.2.3-70-g09d2