staring on thursday

2 files changed, 224 insertions, 215 deletions

diff --git a/src/client/views/PropertiesButtons.tsx b/src/client/views/PropertiesButtons.tsx
index 76828a576..2c88eacc6 100644
--- a/src/client/views/PropertiesButtons.tsx
+++ b/src/client/views/PropertiesButtons.tsx
@@ -1,5 +1,5 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { Tooltip } from '@material-ui/core';
+import { Icon, Tooltip } from '@material-ui/core';
 import { action, computed, observable } from 'mobx';
 import { observer } from 'mobx-react';
 import { Doc, DocListCast, Opt } from '../../fields/Doc';
@@ -21,6 +21,9 @@ import { DocumentView, OpenWhere } from './nodes/DocumentView';
 import { pasteImageBitmap } from './nodes/WebBoxRenderer';
 import './PropertiesButtons.scss';
 import React = require('react');
+import { JsxElement } from 'typescript';
+import { FaThumbtack } from 'react-icons/fa';
+import { AiOutlineApple } from 'react-icons/ai';
 const higflyout = require('@hig/flyout');
 export const { anchorPoints } = higflyout;
 export const Flyout = higflyout.default;
@@ -30,6 +33,7 @@ enum UtilityButtonState {
     OpenRight,
     OpenExternally,
 }
+
 @observer
 export class PropertiesButtons extends React.Component<{}, {}> {
     @observable public static Instance: PropertiesButtons;
@@ -41,7 +45,7 @@ export class PropertiesButtons extends React.Component<{}, {}> {
         return !SelectionManager.SelectedSchemaDoc() && SelectionManager.Views().lastElement()?.topMost;
     }
 
-    propertyToggleBtn = (label: string, property: string, tooltip: (on?: any) => string, icon: (on: boolean) => string, onClick?: (dv: Opt<DocumentView>, doc: Doc, property: string) => void, useUserDoc?: boolean) => {
+    propertyToggleBtn = (label: string, property: string, tooltip: (on?: any) => string, icon: (on: boolean) => 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 : (
@@ -55,7 +59,9 @@ export class PropertiesButtons extends React.Component<{}, {}> {
                                 SelectionManager.Views().forEach(dv => (onClick ?? onPropToggle)(dv, dv.rootDoc, property));
                             } else if (targetDoc) (onClick ?? onPropToggle)(undefined, targetDoc, property);
                         }, property)}>
-                        <FontAwesomeIcon className="documentdecorations-icon" size="lg" icon={icon(BoolCast(targetDoc?.[property])) as any} />
+                        {icon((BoolCast(targetDoc?.[property])) as any)}
+                    
+                        {/* <FontAwesomeIcon className="documentdecorations-icon" size="lg" icon={icon(BoolCast(targetDoc?.[property])) as any} /> */}
                     </div>
                     <div className="propertiesButtons-title">{label}</div>
                 </div>
@@ -67,216 +73,217 @@ export class PropertiesButtons extends React.Component<{}, {}> {
             'No\xA0Drag',
             '_lockedPosition',
             on => `${on ? 'Unlock' : 'Lock'} position to prevent dragging`,
-            on => 'thumbtack'
-        );
-    }
-    @computed get maskButton() {
-        return this.propertyToggleBtn(
-            'Mask',
-            'stroke_isInkMask',
-            on => (on ? 'Make plain ink' : 'Make highlight mask'),
-            on => 'paint-brush',
-            (dv, doc) => InkingStroke.toggleMask(dv?.layoutDoc || doc)
-        );
-    }
-    @computed get hideImageButton() {
-        return this.propertyToggleBtn(
-            'Background',
-            '_hideImage',
-            on => (on ? 'Show Image' : 'Show Background'),
-            on => 'portrait'
-        );
-    }
-    @computed get clustersButton() {
-        return this.propertyToggleBtn(
-            'Clusters',
-            '_freeform_useClusters',
-            on => `${on ? 'Hide' : 'Show'} clusters`,
-            on => 'braille'
-        );
-    }
-    @computed get panButton() {
-        return this.propertyToggleBtn(
-            'Lock\xA0View',
-            '_lockedTransform',
-            on => `${on ? 'Unlock' : 'Lock'} panning of view`,
-            on => 'lock'
-        );
-    }
-    @computed get forceActiveButton() {
-        return this.propertyToggleBtn(
-            'Active',
-            '_forceActive',
-            on => `${on ? 'Select to activate' : 'Contents always active'} `,
-            on => 'eye'
-        );
-    }
-    @computed get fitContentButton() {
-        return this.propertyToggleBtn(
-            'View All',
-            '_freeform_fitContentsToBox',
-            on => `${on ? "Don't" : 'Do'} fit content to container visible area`,
-            on => 'object-group'
-        );
-    }
-    // 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
-    @computed get isLightboxButton() {
-        return this.propertyToggleBtn(
-            'Lightbox',
-            'isLightbox',
-            on => `${on ? 'Set' : 'Remove'} lightbox flag`,
-            on => 'window-restore',
-            onClick => {
-                SelectionManager.Views().forEach(dv => {
-                    const containerDoc = dv.rootDoc;
-                    //containerDoc.followAllLinks =
-                    // containerDoc.noShadow =
-                    // containerDoc.disableDocBrushing =
-                    // containerDoc._forceActive =
-                    //containerDoc._freeform_fitContentsToBox =
-                    containerDoc._isLightbox = !containerDoc._isLightbox;
-                    //containerDoc._xPadding = containerDoc._yPadding = containerDoc._isLightbox ? 10 : undefined;
-                    const containerContents = DocListCast(dv.dataDoc[dv.props.fieldKey ?? Doc.LayoutFieldKey(containerDoc)]);
-                    //dv.rootDoc.onClick = ScriptField.MakeScript('{self.data = undefined; documentView.select(false)}', { documentView: 'any' });
-                    containerContents.forEach(doc => LinkManager.Links(doc).forEach(link => (link.layout_linkDisplay = false)));
-                });
-            }
-        );
-    }
-    @computed get layout_fitWidthButton() {
-        return this.propertyToggleBtn(
-            'Fit\xA0Width',
-            '_layout_fitWidth',
-            on => `${on ? "Don't" : 'Do'} fit content to width of container`,
-            on => 'arrows-alt-h'
-        );
-    }
-    @computed get captionButton() {
-        return this.propertyToggleBtn(
-            'Caption',
-            '_layout_showCaption',
-            on => `${on ? 'Hide' : 'Show'} caption footer`,
-            on => 'closed-captioning',
-            (dv, doc) => ((dv?.rootDoc || doc)._layout_showCaption = (dv?.rootDoc || doc)._layout_showCaption === undefined ? 'caption' : undefined)
-        );
-    }
-    @computed get chromeButton() {
-        return this.propertyToggleBtn(
-            'Controls',
-            '_chromeHidden',
-            on => `${on ? 'Show' : 'Hide'} editing UI`,
-            on => 'edit',
-            (dv, doc) => ((dv?.rootDoc || doc)._chromeHidden = !(dv?.rootDoc || doc)._chromeHidden)
-        );
-    }
-    @computed get titleButton() {
-        return this.propertyToggleBtn(
-            'Title',
-            '_layout_showTitle',
-            on => 'Switch between title styles',
-            on => 'text-width',
-            (dv, doc) => {
-                const tdoc = dv?.rootDoc || doc;
-                const newtitle = !tdoc._layout_showTitle ? 'title' : tdoc._layout_showTitle === 'title' ? 'title:hover' : '';
-                tdoc._layout_showTitle = newtitle;
-            }
-        );
-    }
-    @computed get layout_autoHeightButton() {
-        return this.propertyToggleBtn(
-            'Auto\xA0Size',
-            '_layout_autoHeight',
-            on => `Automatical vertical sizing to show all content`,
-            on => 'arrows-alt-v'
-        );
-    }
-    @computed get gridButton() {
-        return this.propertyToggleBtn(
-            'Grid',
-            '_freeform_backgroundGrid',
-            on => `Display background grid in collection`,
-            on => 'border-all'
-        );
-    }
-    @computed get groupButton() {
-        return this.propertyToggleBtn(
-            'Group',
-            'isGroup',
-            on => `Display collection as a Group`,
-            on => 'object-group',
-            (dv, doc) => {
-                doc.isGroup = !doc.isGroup;
-                doc.forceActive = doc.isGroup;
-            }
-        );
-    }
-    @computed get freezeThumb() {
-        return this.propertyToggleBtn(
-            'FreezeThumb',
-            '_thumb-frozen',
-            on => `${on ? 'Freeze' : 'Unfreeze'} thumbnail`,
-            on => 'snowflake',
-            (dv, doc) => {
-                if (doc['thumb-frozen']) doc['thumb-frozen'] = undefined;
-                else {
-                    document.body.focus(); // so that we can access the clipboard without an error
-                    setTimeout(() =>
-                        pasteImageBitmap((data_url: any, error: any) => {
-                            error && console.log(error);
-                            data_url && Utils.convertDataUri(data_url, doc[Id] + '-thumb-frozen', true).then(returnedfilename => (doc['thumb-frozen'] = new ImageField(returnedfilename)));
-                        })
-                    );
-                }
-            }
-        );
-    }
-    @computed get snapButton() {
-        return this.propertyToggleBtn(
-            'Snap\xA0Lines',
-            'freeform_snapLines',
-            on => `Display snapping lines when objects are dragged`,
-            on => 'th',
-            undefined,
-            true
+            on => <AiOutlineApple/>
+           // on => 'thumbtack'
         );
     }
+    // @computed get maskButton() {
+    //     return this.propertyToggleBtn(
+    //         'Mask',
+    //         'stroke_isInkMask',
+    //         on => (on ? 'Make plain ink' : 'Make highlight mask'),
+    //         on => 'paint-brush',
+    //         (dv, doc) => InkingStroke.toggleMask(dv?.layoutDoc || doc)
+    //     );
+    // }
+    // @computed get hideImageButton() {
+    //     return this.propertyToggleBtn(
+    //         'Background',
+    //         '_hideImage',
+    //         on => (on ? 'Show Image' : 'Show Background'),
+    //         on => 'portrait'
+    //     );
+    // }
+    // @computed get clustersButton() {
+    //     return this.propertyToggleBtn(
+    //         'Clusters',
+    //         '_freeform_useClusters',
+    //         on => `${on ? 'Hide' : 'Show'} clusters`,
+    //         on => 'braille'
+    //     );
+    // }
+    // @computed get panButton() {
+    //     return this.propertyToggleBtn(
+    //         'Lock\xA0View',
+    //         '_lockedTransform',
+    //         on => `${on ? 'Unlock' : 'Lock'} panning of view`,
+    //         on => 'lock'
+    //     );
+    // }
+    // @computed get forceActiveButton() {
+    //     return this.propertyToggleBtn(
+    //         'Active',
+    //         '_forceActive',
+    //         on => `${on ? 'Select to activate' : 'Contents always active'} `,
+    //         on => 'eye'
+    //     );
+    // }
+    // @computed get fitContentButton() {
+    //     return this.propertyToggleBtn(
+    //         'View All',
+    //         '_freeform_fitContentsToBox',
+    //         on => `${on ? "Don't" : 'Do'} fit content to container visible area`,
+    //         on => 'object-group'
+    //     );
+    // }
+    // // 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
+    // @computed get isLightboxButton() {
+    //     return this.propertyToggleBtn(
+    //         'Lightbox',
+    //         'isLightbox',
+    //         on => `${on ? 'Set' : 'Remove'} lightbox flag`,
+    //         on => 'window-restore',
+    //         onClick => {
+    //             SelectionManager.Views().forEach(dv => {
+    //                 const containerDoc = dv.rootDoc;
+    //                 //containerDoc.followAllLinks =
+    //                 // containerDoc.noShadow =
+    //                 // containerDoc.disableDocBrushing =
+    //                 // containerDoc._forceActive =
+    //                 //containerDoc._freeform_fitContentsToBox =
+    //                 containerDoc._isLightbox = !containerDoc._isLightbox;
+    //                 //containerDoc._xPadding = containerDoc._yPadding = containerDoc._isLightbox ? 10 : undefined;
+    //                 const containerContents = DocListCast(dv.dataDoc[dv.props.fieldKey ?? Doc.LayoutFieldKey(containerDoc)]);
+    //                 //dv.rootDoc.onClick = ScriptField.MakeScript('{self.data = undefined; documentView.select(false)}', { documentView: 'any' });
+    //                 containerContents.forEach(doc => LinkManager.Links(doc).forEach(link => (link.layout_linkDisplay = false)));
+    //             });
+    //         }
+    //     );
+    // }
+    // @computed get layout_fitWidthButton() {
+    //     return this.propertyToggleBtn(
+    //         'Fit\xA0Width',
+    //         '_layout_fitWidth',
+    //         on => `${on ? "Don't" : 'Do'} fit content to width of container`,
+    //         on => 'arrows-alt-h'
+    //     );
+    // }
+    // @computed get captionButton() {
+    //     return this.propertyToggleBtn(
+    //         'Caption',
+    //         '_layout_showCaption',
+    //         on => `${on ? 'Hide' : 'Show'} caption footer`,
+    //         on => 'closed-captioning',
+    //         (dv, doc) => ((dv?.rootDoc || doc)._layout_showCaption = (dv?.rootDoc || doc)._layout_showCaption === undefined ? 'caption' : undefined)
+    //     );
+    // }
+    // @computed get chromeButton() {
+    //     return this.propertyToggleBtn(
+    //         'Controls',
+    //         '_chromeHidden',
+    //         on => `${on ? 'Show' : 'Hide'} editing UI`,
+    //         on => 'edit',
+    //         (dv, doc) => ((dv?.rootDoc || doc)._chromeHidden = !(dv?.rootDoc || doc)._chromeHidden)
+    //     );
+    // }
+    // @computed get titleButton() {
+    //     return this.propertyToggleBtn(
+    //         'Title',
+    //         '_layout_showTitle',
+    //         on => 'Switch between title styles',
+    //         on => 'text-width',
+    //         (dv, doc) => {
+    //             const tdoc = dv?.rootDoc || doc;
+    //             const newtitle = !tdoc._layout_showTitle ? 'title' : tdoc._layout_showTitle === 'title' ? 'title:hover' : '';
+    //             tdoc._layout_showTitle = newtitle;
+    //         }
+    //     );
+    // }
+    // @computed get layout_autoHeightButton() {
+    //     return this.propertyToggleBtn(
+    //         'Auto\xA0Size',
+    //         '_layout_autoHeight',
+    //         on => `Automatical vertical sizing to show all content`,
+    //         on => 'arrows-alt-v'
+    //     );
+    // }
+    // @computed get gridButton() {
+    //     return this.propertyToggleBtn(
+    //         'Grid',
+    //         '_freeform_backgroundGrid',
+    //         on => `Display background grid in collection`,
+    //         on => 'border-all'
+    //     );
+    // }
+    // @computed get groupButton() {
+    //     return this.propertyToggleBtn(
+    //         'Group',
+    //         'isGroup',
+    //         on => `Display collection as a Group`,
+    //         on => 'object-group',
+    //         (dv, doc) => {
+    //             doc.isGroup = !doc.isGroup;
+    //             doc.forceActive = doc.isGroup;
+    //         }
+    //     );
+    // }
+    // @computed get freezeThumb() {
+    //     return this.propertyToggleBtn(
+    //         'FreezeThumb',
+    //         '_thumb-frozen',
+    //         on => `${on ? 'Freeze' : 'Unfreeze'} thumbnail`,
+    //         on => 'snowflake',
+    //         (dv, doc) => {
+    //             if (doc['thumb-frozen']) doc['thumb-frozen'] = undefined;
+    //             else {
+    //                 document.body.focus(); // so that we can access the clipboard without an error
+    //                 setTimeout(() =>
+    //                     pasteImageBitmap((data_url: any, error: any) => {
+    //                         error && console.log(error);
+    //                         data_url && Utils.convertDataUri(data_url, doc[Id] + '-thumb-frozen', true).then(returnedfilename => (doc['thumb-frozen'] = new ImageField(returnedfilename)));
+    //                     })
+    //                 );
+    //             }
+    //         }
+    //     );
+    // }
+    // @computed get snapButton() {
+    //     return this.propertyToggleBtn(
+    //         'Snap\xA0Lines',
+    //         'freeform_snapLines',
+    //         on => `Display snapping lines when objects are dragged`,
+    //         on => 'th',
+    //         undefined,
+    //         true
+    //     );
+    // }
 
-    @computed
-    get onClickButton() {
-        return !this.selectedDoc ? null : (
-            <Tooltip title={<div className="dash-tooltip">Choose onClick behavior</div>} placement="top">
-                <div>
-                    <div className="propertiesButtons-linkFlyout">
-                        <Flyout anchorPoint={anchorPoints.LEFT_TOP} content={this.onClickFlyout}>
-                            <div className={'propertiesButtons-linkButton-empty'} onPointerDown={e => e.stopPropagation()}>
-                                <FontAwesomeIcon className="documentdecorations-icon" icon="mouse-pointer" size="lg" />
-                            </div>
-                        </Flyout>
-                    </div>
-                    <div className="propertiesButtons-title"> onclick </div>
-                </div>
-            </Tooltip>
-        );
-    }
-    @computed
-    get perspectiveButton() {
-        return !this.selectedDoc ? null : (
-            <Tooltip title={<div className="dash-tooltip">Choose view perspective</div>} placement="top">
-                <div>
-                    <div className="propertiesButtons-linkFlyout">
-                        <Flyout anchorPoint={anchorPoints.LEFT_TOP} content={this.onPerspectiveFlyout}>
-                            <div className={'propertiesButtons-linkButton-empty'} onPointerDown={e => e.stopPropagation()}>
-                                <FontAwesomeIcon className="documentdecorations-icon" icon="mouse-pointer" size="lg" />
-                            </div>
-                        </Flyout>
-                    </div>
-                    <div className="propertiesButtons-title"> Perspective </div>
-                </div>
-            </Tooltip>
-        );
-    }
+    // @computed
+    // get onClickButton() {
+    //     return !this.selectedDoc ? null : (
+    //         <Tooltip title={<div className="dash-tooltip">Choose onClick behavior</div>} placement="top">
+    //             <div>
+    //                 <div className="propertiesButtons-linkFlyout">
+    //                     <Flyout anchorPoint={anchorPoints.LEFT_TOP} content={this.onClickFlyout}>
+    //                         <div className={'propertiesButtons-linkButton-empty'} onPointerDown={e => e.stopPropagation()}>
+    //                             <FontAwesomeIcon className="documentdecorations-icon" icon="mouse-pointer" size="lg" />
+    //                         </div>
+    //                     </Flyout>
+    //                 </div>
+    //                 <div className="propertiesButtons-title"> onclick </div>
+    //             </div>
+    //         </Tooltip>
+    //     );
+    // }
+    // @computed
+    // get perspectiveButton() {
+    //     return !this.selectedDoc ? null : (
+    //         <Tooltip title={<div className="dash-tooltip">Choose view perspective</div>} placement="top">
+    //             <div>
+    //                 <div className="propertiesButtons-linkFlyout">
+    //                     <Flyout anchorPoint={anchorPoints.LEFT_TOP} content={this.onPerspectiveFlyout}>
+    //                         <div className={'propertiesButtons-linkButton-empty'} onPointerDown={e => e.stopPropagation()}>
+    //                             <FontAwesomeIcon className="documentdecorations-icon" icon="mouse-pointer" size="lg" />
+    //                         </div>
+    //                     </Flyout>
+    //                 </div>
+    //                 <div className="propertiesButtons-title"> Perspective </div>
+    //             </div>
+    //         </Tooltip>
+    //     );
+    // }
 
     @undoBatch
     handlePerspectiveChange = (e: any) => {
@@ -407,10 +414,10 @@ export class PropertiesButtons extends React.Component<{}, {}> {
         const isNovice = Doc.noviceMode;
         return !this.selectedDoc ? null : (
             <div className="propertiesButtons">
-                {toggle(this.titleButton)}
-                {toggle(this.captionButton)}
+                {/* {toggle(this.titleButton)}
+                {toggle(this.captionButton)} */}
                 {toggle(this.lockButton)}
-                {toggle(this.onClickButton)}
+                {/* {toggle(this.onClickButton)}
                 {toggle(this.layout_fitWidthButton)}
                 {toggle(this.freezeThumb)}
                 {toggle(this.forceActiveButton)}
@@ -425,7 +432,7 @@ export class PropertiesButtons extends React.Component<{}, {}> {
                 {toggle(this.snapButton, { display: !isCollection ? 'none' : '' })}
                 {toggle(this.clustersButton, { display: !isFreeForm ? 'none' : '' })}
                 {toggle(this.panButton, { display: !isFreeForm ? 'none' : '' })}
-                {toggle(this.perspectiveButton, { display: !isCollection || isNovice ? 'none' : '' })}
+                {toggle(this.perspectiveButton, { display: !isCollection || isNovice ? 'none' : '' })} */}
             </div>
         );
     }
diff --git a/src/client/views/PropertiesView.tsx b/src/client/views/PropertiesView.tsx
index c5dd0eaf5..5ba71b815 100644
--- a/src/client/views/PropertiesView.tsx
+++ b/src/client/views/PropertiesView.tsx
@@ -486,7 +486,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
         const documentType = StrCast(this.selectedDoc?.type)
         //console.log("this is tyoe " + typezzz)
         var currentType: string = "";
-        var currentTypeComponent =  <BsFillFileEarmarkImageFill/>;
+        var currentTypeComponent = <BsFillFileEarmarkImageFill/>;
     
             currentType = documentType
            // currentTypeComponent = //c
@@ -511,8 +511,10 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
                 <div className = "propertiesView-wordType">Type</div>
                 
                 <div className= "currentType"> 
+
                 {/* <Icon iconName = "AiFillFileText"></Icon> */}
                 {/* <IconButton icon={StrCast(this.selectedDoc?.systemIcon)}></IconButton> */}
+                {/* {currentTypeComponent} */}
                 {currentType} 
                 </div>
             </div>