remove showTitle instead of setting it to empty string. add back 'transparent' color button

1 files changed, 48 insertions, 44 deletions

diff --git a/src/client/views/PropertiesButtons.tsx b/src/client/views/PropertiesButtons.tsx
index 6105cc1b5..2e3668268 100644
--- a/src/client/views/PropertiesButtons.tsx
+++ b/src/client/views/PropertiesButtons.tsx
@@ -56,24 +56,25 @@ export class PropertiesButtons extends React.Component<{}, {}> {
     propertyToggleBtn = (label: (on?: any) => string, property: string, tooltip: (on?: any) => string, icon: (on?: any) => any, onClick?: (dv: Opt<DocumentView>, doc: Doc, property: string) => void, useUserDoc?: boolean) => {
         const targetDoc = useUserDoc ? Doc.UserDoc() : this.selectedDoc;
         const onPropToggle = (dv: Opt<DocumentView>, doc: Doc, prop: string) => ((dv?.layoutDoc || doc)[prop] = (dv?.layoutDoc || doc)[prop] ? false : true);
-        return !targetDoc ? null : <Toggle
-            toggleStatus={BoolCast(targetDoc[property])}
-            text={label(targetDoc?.[property])}
-            color={StrCast(Doc.UserDoc().userColor)}
-            icon={icon(targetDoc?.[property] as any)}
-            iconPlacement={'left'}
-            align={'flex-start'}
-            fillWidth={true}
-            toggleType={ToggleType.BUTTON}
-            onClick={undoable(() => {
-                if (SelectionManager.Views().length > 1) {
-                    SelectionManager.Views().forEach(dv => (onClick ?? onPropToggle)(dv, dv.rootDoc, property));
-                } else if (targetDoc) (onClick ?? onPropToggle)(undefined, targetDoc, property);
-            }, property)}
-        />
+        return !targetDoc ? null : (
+            <Toggle
+                toggleStatus={BoolCast(targetDoc[property])}
+                text={label(targetDoc?.[property])}
+                color={StrCast(Doc.UserDoc().userColor)}
+                icon={icon(targetDoc?.[property] as any)}
+                iconPlacement={'left'}
+                align={'flex-start'}
+                fillWidth={true}
+                toggleType={ToggleType.BUTTON}
+                onClick={undoable(() => {
+                    if (SelectionManager.Views().length > 1) {
+                        SelectionManager.Views().forEach(dv => (onClick ?? onPropToggle)(dv, dv.rootDoc, property));
+                    } else if (targetDoc) (onClick ?? onPropToggle)(undefined, targetDoc, property);
+                }, property)}
+            />
+        );
     };
 
-
     // this implments a container pattern by marking the targetDoc (collection) as a lightbox
     // that always fits its contents to its container and that hides all other documents when
     // a link is followed that targets a 'lightbox' destination
@@ -110,7 +111,7 @@ export class PropertiesButtons extends React.Component<{}, {}> {
             (dv, doc) => {
                 const tdoc = dv?.rootDoc || doc;
                 const newtitle = !tdoc._layout_showTitle ? 'title' : tdoc._layout_showTitle === 'title' ? 'title:hover' : '';
-                tdoc._layout_showTitle = newtitle;
+                tdoc._layout_showTitle = newtitle ? newtitle : undefined;
             }
         );
     }
@@ -148,7 +149,7 @@ export class PropertiesButtons extends React.Component<{}, {}> {
 
     @computed get clustersButton() {
         return this.propertyToggleBtn(
-            on => (on ?'DISABLE CLUSTERS' : 'HIGHLIGHT CLUSTERS'),
+            on => (on ? 'DISABLE CLUSTERS' : 'HIGHLIGHT CLUSTERS'),
             '_freeform_useClusters',
             on => `${on ? 'Hide' : 'Show'} clusters`,
             on => <FaBraille />
@@ -163,12 +164,13 @@ export class PropertiesButtons extends React.Component<{}, {}> {
         );
     }
 
-    @computed get forceActiveButton() { //select text
+    @computed get forceActiveButton() {
+        //select text
         return this.propertyToggleBtn(
-            on => on ? 'INACTIVE INTERACTION' : 'ACTIVE INTERACTION',
+            on => (on ? 'INACTIVE INTERACTION' : 'ACTIVE INTERACTION'),
             '_forceActive',
             on => `${on ? 'Select to activate' : 'Contents always active'} `,
-            on => <MdTouchApp/> // 'eye'
+            on => <MdTouchApp /> // 'eye'
         );
     }
 
@@ -218,7 +220,8 @@ export class PropertiesButtons extends React.Component<{}, {}> {
     }
 
     @computed get captionButton() {
-        return this.propertyToggleBtn( //DEVELOPER
+        return this.propertyToggleBtn(
+            //DEVELOPER
             on => (on ? 'HIDE CAPTION' : 'SHOW CAPTION'), //'Caption',
             '_layout_showCaption',
             on => `${on ? 'Hide' : 'Show'} caption footer`,
@@ -227,17 +230,19 @@ export class PropertiesButtons extends React.Component<{}, {}> {
         );
     }
 
-    @computed get chromeButton() { // developer -- removing UI decoration
+    @computed get chromeButton() {
+        // developer -- removing UI decoration
         return this.propertyToggleBtn(
-            on => on ? 'ENABLE UI CONTROLS' : 'DISABLE UI CONTROLS',
+            on => (on ? 'ENABLE UI CONTROLS' : 'DISABLE UI CONTROLS'),
             '_chromeHidden',
             on => `${on ? 'Show' : 'Hide'} editing UI`,
-            on => on? <TbEditCircle/> :  <TbEditCircleOff/> , // 'edit',
+            on => (on ? <TbEditCircle /> : <TbEditCircleOff />), // 'edit',
             (dv, doc) => ((dv?.rootDoc || doc)._chromeHidden = !(dv?.rootDoc || doc)._chromeHidden)
         );
     }
 
-    @computed get layout_autoHeightButton() { // store previous dimensions to store old values 
+    @computed get layout_autoHeightButton() {
+        // store previous dimensions to store old values
         return this.propertyToggleBtn(
             on => 'Auto\xA0Size',
             '_layout_autoHeight',
@@ -251,7 +256,7 @@ export class PropertiesButtons extends React.Component<{}, {}> {
             on => (on ? 'HIDE GRID' : 'DISPLAY GRID'),
             '_freeform_backgroundGrid',
             on => `Display background grid in collection`,
-            on => (on ? <MdGridOff /> :<MdGridOn /> ) //'border-all'
+            on => (on ? <MdGridOff /> : <MdGridOn />) //'border-all'
         );
     }
 
@@ -288,13 +293,14 @@ export class PropertiesButtons extends React.Component<{}, {}> {
     //         }
     //     );
     // }
-    @computed get snapButton() { // THESE ARE NOT COMING
+    @computed get snapButton() {
+        // THESE ARE NOT COMING
         return this.propertyToggleBtn(
             on => (on ? 'HIDE SNAP LINES' : 'SHOW SNAP LINES'),
             'freeform_snapLines',
             on => `Display snapping lines when objects are dragged`,
             on => <TfiBarChart />, //'th',
-            undefined,
+            undefined
         );
     }
 
@@ -346,11 +352,11 @@ export class PropertiesButtons extends React.Component<{}, {}> {
         const followLoc = this.selectedDoc._followLinkLocation;
         const linkedToLightboxView = () => LinkManager.Links(this.selectedDoc).some(link => LinkManager.getOppositeAnchor(link, this.selectedDoc)?._isLightbox);
 
-        if (followLoc === OpenWhere.lightbox && !linkedToLightboxView()) return 'linkInPlace'
-        else if (linkButton && followLoc === OpenWhere.addRight) return 'linkOnRight'
-        else if (linkButton && this.selectedDoc._followLinkLocation === OpenWhere.lightbox && linkedToLightboxView()) return 'enterPortal'
-        else if (ScriptCast(this.selectedDoc.onClick)?.script.originalScript.includes('toggleDetail')) return 'toggleDetail'
-        else return 'nothing'
+        if (followLoc === OpenWhere.lightbox && !linkedToLightboxView()) return 'linkInPlace';
+        else if (linkButton && followLoc === OpenWhere.addRight) return 'linkOnRight';
+        else if (linkButton && this.selectedDoc._followLinkLocation === OpenWhere.lightbox && linkedToLightboxView()) return 'enterPortal';
+        else if (ScriptCast(this.selectedDoc.onClick)?.script.originalScript.includes('toggleDetail')) return 'toggleDetail';
+        else return 'nothing';
     }
 
     @computed
@@ -362,22 +368,20 @@ export class PropertiesButtons extends React.Component<{}, {}> {
             ['linkInPlace', 'Open Link in Lightbox'],
             ['linkOnRight', 'Open Link on Right'],
         ];
-        
+
         const items: IListItemProps[] = buttonList.map(value => {
-            return (
-                {
-                    text: value[1],
-                    val: value[1],
-                }
-            );
+            return {
+                text: value[1],
+                val: value[1],
+            };
         });
-        console.log("click val: ", this.onClickVal)
+        console.log('click val: ', this.onClickVal);
         return !this.selectedDoc ? null : (
             <Dropdown
-                tooltip={'Choose onClick behavior'} 
+                tooltip={'Choose onClick behavior'}
                 items={items}
                 selectedVal={this.onClickVal}
-                setSelectedVal={(val) => this.handleOptionChange(val as string)}
+                setSelectedVal={val => this.handleOptionChange(val as string)}
                 title={'Choose onClick behaviour'}
                 color={StrCast(Doc.UserDoc().userColor)}
                 dropdownType={DropdownType.SELECT}