From c9a3d98b57482343332a19f52ab90bcecc170f69 Mon Sep 17 00:00:00 2001
From: geireann <60007097+geireann@users.noreply.github.com>
Date: Fri, 20 Aug 2021 15:12:14 -0400
Subject: undo/redo buttons fix

---
 .../collectionLinearView/CollectionLinearView.tsx  |  2 -
 src/client/views/nodes/button/FontIconBox.tsx      | 87 +++++++++++-----------
 2 files changed, 44 insertions(+), 45 deletions(-)

(limited to 'src/client/views')

diff --git a/src/client/views/collections/collectionLinearView/CollectionLinearView.tsx b/src/client/views/collections/collectionLinearView/CollectionLinearView.tsx
index 75fbbf234..48f50cf2d 100644
--- a/src/client/views/collections/collectionLinearView/CollectionLinearView.tsx
+++ b/src/client/views/collections/collectionLinearView/CollectionLinearView.tsx
@@ -115,7 +115,6 @@ export class CollectionLinearView extends CollectionSubView(LinearDocument) {
         const backgroundColor = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.BackgroundColor);
         const color = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.Color);
         const icon: string = StrCast(this.props.Document.icon); // Menu opener toggle
-        console.log("[flexGap]: " + flexGap);
         const menuOpener = <label htmlFor={`${guid}`}
             style={{
                 color: BoolCast(this.layoutDoc.linearViewIsExpanded) ? undefined : Colors.BLACK,
@@ -145,7 +144,6 @@ export class CollectionLinearView extends CollectionSubView(LinearDocument) {
                         const nested = pair.layout._viewType === CollectionViewType.Linear;
                         const dref = React.createRef<HTMLDivElement>();
                         // const scalable = pair.layout.onClick || pair.layout.onDragStart;
-                        console.log("Height:" + NumCast(pair.layout._height));
                         return <div className={`collectionLinearView-docBtn`} key={pair.layout[Id]} ref={dref}
                             style={{
                                 pointerEvents: "all",
diff --git a/src/client/views/nodes/button/FontIconBox.tsx b/src/client/views/nodes/button/FontIconBox.tsx
index 84ad03fa2..b4b6ba76c 100644
--- a/src/client/views/nodes/button/FontIconBox.tsx
+++ b/src/client/views/nodes/button/FontIconBox.tsx
@@ -106,7 +106,7 @@ export class FontIconBox extends DocComponent<ButtonProps, FontIconDocument>(Fon
     /**
      * Dropdown button
      */
-     @computed get dropdownListButton() {
+    @computed get dropdownListButton() {
         const active: string = StrCast(this.rootDoc.dropDownOpen);
         const color = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.Color);
         const backgroundColor = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.BackgroundColor);
@@ -114,15 +114,15 @@ export class FontIconBox extends DocComponent<ButtonProps, FontIconDocument>(Fon
         const script: string = StrCast(this.rootDoc.script);
 
         let noviceList: string[] = [];
-        let text:string | undefined;
+        let text: string | undefined;
         let dropdown = true;
         let show = true;
         let icon: IconProp = "caret-down";
 
 
-        if (script == 'changeView'){
+        if (script == 'changeView') {
             const selected = SelectionManager.Views().length ? SelectionManager.Views()[0] : undefined;
-            if (selected && StrCast(selected.Document.type) == DocumentType.COL){
+            if (selected && StrCast(selected.Document.type) == DocumentType.COL) {
                 text = StrCast(selected.Document._viewType);
             } else if (selected) {
                 dropdown = false;
@@ -132,41 +132,42 @@ export class FontIconBox extends DocComponent<ButtonProps, FontIconDocument>(Fon
             noviceList = [CollectionViewType.Freeform, CollectionViewType.Schema, CollectionViewType.Stacking];
         } else if (script == 'changeFont') {
             const selected = SelectionManager.Views().length ? SelectionManager.Views()[0] : undefined;
-            if (selected && StrCast(selected.Document.type) == DocumentType.RTF){
+            if (selected && StrCast(selected.Document.type) == DocumentType.RTF) {
                 text = StrCast(selected.Document._fontFamily);
             } else {
                 text = StrCast(Doc.UserDoc()._fontFamily);
             }
             noviceList = ["Roboto", "Times New Roman", "Arial", "Georgia",
-            "Comic Sans MS", "Tahoma", "Impact", "Crimson Text"];
+                "Comic Sans MS", "Tahoma", "Impact", "Crimson Text"];
         } else {
             show = false;
         }
 
         const items = this.buttonList.map((value) => {
-            // console.log(value);
-            if (Doc.UserDoc().noviceMode && !noviceList.includes(value)){
+            if (Doc.UserDoc().noviceMode && !noviceList.includes(value)) {
                 return;
             }
             const click = () => {
-                const s =  ScriptField.MakeScript(script+'("'+value+'")');
-                if (s){
-                    // console.log(s.script);
+                const s = ScriptField.MakeScript(script + '("' + value + '")');
+                if (s) {
                     s.script.run().result;
                 }
             }
-            return <div className="list-item" key={`${value}`} 
-                style={{ fontFamily: script == 'changeFont' ? value : undefined }}
+            return <div className="list-item" key={`${value}`}
+                style={{
+                    fontFamily: script === 'changeFont' ? value : undefined,
+                    backgroundColor: value === text ? Colors.LIGHT_BLUE : undefined
+                }}
                 onClick={click}>
                 {value[0].toUpperCase() + value.slice(1)}
             </div>;
         });
-        
+
         const label = !this.label || !Doc.UserDoc()._showLabel ? (null) :
-        <div className="fontIconBox-label" style={{ color: color, backgroundColor: backgroundColor, position: "absolute" }}>
-            {this.label}
-        </div>;
-        
+            <div className="fontIconBox-label" style={{ color: color, backgroundColor: backgroundColor, position: "absolute" }}>
+                {this.label}
+            </div>;
+
         return (
             <div className={`menuButton ${this.type} ${active}`}
                 style={{ display: show ? undefined : "none", backgroundColor: this.rootDoc.dropDownOpen ? Colors.MEDIUM_BLUE : backgroundColor, color: color, borderBottomLeftRadius: this.dropdown ? 0 : undefined }}
@@ -176,7 +177,7 @@ export class FontIconBox extends DocComponent<ButtonProps, FontIconDocument>(Fon
                 </div>
                 {label}
                 <div
-                className="menuButton-dropDown"
+                    className="menuButton-dropDown"
                     style={{ borderBottomRightRadius: this.dropdown ? 0 : undefined }}>
                     <FontAwesomeIcon icon={icon} color={color} size="sm" />
                 </div>
@@ -212,13 +213,13 @@ export class FontIconBox extends DocComponent<ButtonProps, FontIconDocument>(Fon
         const numSelected = SelectionManager.Views().length;
         const selectedDoc = numSelected > 0 ? SelectionManager.Views()[0].Document : undefined;
         const colorBox = (func: (color: ColorState) => void) => <SketchPicker onChange={func} color={selectedDoc ? selectedDoc._backgroundColor : backgroundColor}
-        presetColors={['#D0021B', '#F5A623', '#F8E71C', '#8B572A', '#7ED321', '#417505',
-            '#9013FE', '#4A90E2', '#50E3C2', '#B8E986', '#000000', '#4A4A4A', '#9B9B9B',
-            '#FFFFFF', '#f1efeb', 'transparent']} />;
+            presetColors={['#D0021B', '#F5A623', '#F8E71C', '#8B572A', '#7ED321', '#417505',
+                '#9013FE', '#4A90E2', '#50E3C2', '#B8E986', '#000000', '#4A4A4A', '#9B9B9B',
+                '#FFFFFF', '#f1efeb', 'transparent']} />;
         const label = !this.label || !Doc.UserDoc()._showLabel ? (null) :
-        <div className="fontIconBox-label" style={{ color: color, backgroundColor: backgroundColor, position: "absolute" }}>
-            {this.label}
-        </div>;
+            <div className="fontIconBox-label" style={{ color: color, backgroundColor: backgroundColor, position: "absolute" }}>
+                {this.label}
+            </div>;
         const dropdownCaret = <div
             className="menuButton-dropDown"
             style={{ borderBottomRightRadius: this.dropdown ? 0 : undefined }}>
@@ -227,8 +228,8 @@ export class FontIconBox extends DocComponent<ButtonProps, FontIconDocument>(Fon
         const script: string = StrCast(this.rootDoc.script);
         const click = (value: ColorState) => {
             const hex: string = value.hex;
-            const s =  ScriptField.MakeScript(script+'("'+hex+'")');
-            if (s){
+            const s = ScriptField.MakeScript(script + '("' + hex + '")');
+            if (s) {
                 // console.log(s.script);
                 s.script.run().result;
             }
@@ -260,9 +261,9 @@ export class FontIconBox extends DocComponent<ButtonProps, FontIconDocument>(Fon
         const numSelected = SelectionManager.Views().length;
         const selectedDoc = numSelected > 0 ? SelectionManager.Views()[0].Document : undefined;
 
-        const script: string = StrCast(this.rootDoc.script)+"(true)";
+        const script: string = StrCast(this.rootDoc.script) + "(true)";
         let toggleTrue: boolean | undefined = false;
-        if (script == 'toggleOverlay'){
+        if (script == 'toggleOverlay') {
             toggleTrue = selectedDoc && BoolCast(selectedDoc.z);
             console.log('toggleOverlay');
         }
@@ -272,9 +273,9 @@ export class FontIconBox extends DocComponent<ButtonProps, FontIconDocument>(Fon
         const backgroundColor = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.BackgroundColor);
         // const canClick: boolean = this.rootDoc.canClick ? eval(StrCast(this.rootDoc.canClick)) : false;
         const label = !this.label || !Doc.UserDoc()._showLabel ? (null) :
-        <div className="fontIconBox-label" style={{ color: color, backgroundColor: backgroundColor, position: "absolute" }}>
-            {this.label}
-        </div>;
+            <div className="fontIconBox-label" style={{ color: color, backgroundColor: backgroundColor, position: "absolute" }}>
+                {this.label}
+            </div>;
         return (
             <div className={`menuButton ${this.type}`} style={{ opacity: 1, backgroundColor: toggleTrue ? Colors.MEDIUM_BLUE : "transparent" }}>
                 <FontAwesomeIcon className={`fontIconBox-icon-${this.type}`} icon={this.icon} color={toggleTrue ? Colors.LIGHT_GRAY : Colors.LIGHT_GRAY} />
@@ -315,7 +316,7 @@ export class FontIconBox extends DocComponent<ButtonProps, FontIconDocument>(Fon
         const selectedDoc = numSelected > 0 ? SelectionManager.Views()[0].Document : undefined;
         const userDoc = Doc.UserDoc();
 
-        
+
         const dark: boolean = Doc.UserDoc().colorScheme === ColorScheme.Dark;
 
         const active: string = StrCast(this.rootDoc.dropDownOpen);
@@ -327,7 +328,7 @@ export class FontIconBox extends DocComponent<ButtonProps, FontIconDocument>(Fon
             <div className="fontIconBox-label" style={{ color: color, backgroundColor: backgroundColor }}>
                 {this.label}
             </div>;
-       
+
         // TODO:glr Add label of button type
         let button = this.defaultButton;
 
@@ -404,16 +405,16 @@ Scripting.addGlobal(function changeView(view: string) {
 // toggle: Set overlay status of selected document
 Scripting.addGlobal(function changeBackgroundColor(color?: string, checkResult?: boolean) {
     const selected = SelectionManager.Views().length ? SelectionManager.Views()[0] : undefined;
-    if (checkResult){
+    if (checkResult) {
         return selected && selected.Document._backgroundColor;
     }
     selected ? selected.Document._backgroundColor = color : console.log("[FontIconBox.tsx] changeBackgroundColor failed");
 });
 
 // toggle: Set overlay status of selected document
-Scripting.addGlobal(function toggleOverlay(checkResult?:boolean) {
+Scripting.addGlobal(function toggleOverlay(checkResult?: boolean) {
     const selected = SelectionManager.Views().length ? SelectionManager.Views()[0] : undefined;
-    if (checkResult){
+    if (checkResult) {
         return selected && selected.Document.z == 1;
     }
     selected ? selected.props.CollectionFreeFormDocumentView?.().float() : console.log("[FontIconBox.tsx] toggleOverlay failed");
@@ -442,8 +443,8 @@ Scripting.addGlobal(function changeFontSize(size: string) {
     Doc.UserDoc()._fontSize = size;
 });
 
-Scripting.addGlobal(function toggleBold(checkResult?:boolean) {
-    if(checkResult) {
+Scripting.addGlobal(function toggleBold(checkResult?: boolean) {
+    if (checkResult) {
         console.log("got here");
         return Doc.UserDoc().bold;
     }
@@ -453,16 +454,16 @@ Scripting.addGlobal(function toggleBold(checkResult?:boolean) {
     return Doc.UserDoc().bold;
 });
 
-Scripting.addGlobal(function toggleUnderline(checkResult?:boolean) {
-    if(checkResult) return Doc.UserDoc().underline;
+Scripting.addGlobal(function toggleUnderline(checkResult?: boolean) {
+    if (checkResult) return Doc.UserDoc().underline;
     // TODO: glr check if font selected and change selected font
     SelectionManager.Views().map(dv => dv.props.Document.underline = !dv.props.Document.underline);
     Doc.UserDoc().bold = !Doc.UserDoc().underline;
     return Doc.UserDoc().underline;
 });
 
-Scripting.addGlobal(function toggleItalic(checkResult?:boolean) {
-    if(checkResult) return Doc.UserDoc().italic;
+Scripting.addGlobal(function toggleItalic(checkResult?: boolean) {
+    if (checkResult) return Doc.UserDoc().italic;
     // TODO: glr check if font selected and change selected font
     SelectionManager.Views().map(dv => dv.props.Document.italic = !dv.props.Document.italic);
     Doc.UserDoc().bold = !Doc.UserDoc().italic;
-- 
cgit v1.2.3-70-g09d2