changing parts about buttons

1 files changed, 33 insertions, 33 deletions

diff --git a/src/client/views/PropertiesButtons.tsx b/src/client/views/PropertiesButtons.tsx
index 3d61ee273..fc56ec861 100644
--- a/src/client/views/PropertiesButtons.tsx
+++ b/src/client/views/PropertiesButtons.tsx
@@ -25,7 +25,8 @@ import { JsxElement } from 'typescript';
 import { FaBraille, FaHighlighter, FaThumbtack } from 'react-icons/fa';
 import { AiOutlineApple, AiOutlinePicture } from 'react-icons/ai';
 import { MdSubtitles, MdSubtitlesOff } from 'react-icons/md';
-import {TbHighlight, TbHighlightOff} from 'react-icons/tb'
+import { TbHighlight, TbHighlightOff } from 'react-icons/tb';
+import { BiHide, BiShow } from 'react-icons/bi';
 const higflyout = require('@hig/flyout');
 export const { anchorPoints } = higflyout;
 export const Flyout = higflyout.default;
@@ -51,11 +52,11 @@ export class PropertiesButtons extends React.Component<{}, {}> {
         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);
 
-        console.log("current icon " + icon((targetDoc?.[property])))
+        console.log('current icon ' + icon(targetDoc?.[property]));
 
         return !targetDoc ? null : (
             <Tooltip title={<div className={`dash-tooltip`}>{tooltip(targetDoc?.[property])} </div>} placement="top">
-                <div className = 'propertiesButtons-iconAndText' >
+                <div className="propertiesButtons-iconAndText">
                     <div
                         className={`propertiesButtons-linkButton-empty toggle-${StrCast(targetDoc[property]).includes(':hover') ? 'hover' : targetDoc[property] ? 'on' : 'off'}`}
                         onPointerDown={e => e.stopPropagation()}
@@ -64,26 +65,22 @@ 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)}>
-                            <div className = "propertiesButtons-icon">  {icon((targetDoc?.[property]) as any)} </div>
-                      
-                          <div className="propertiesButtons-label">  {label(targetDoc?.[property])}</div>
+                        <div className="propertiesButtons-icon"> {icon(targetDoc?.[property] as any)} </div>
+
+                        <div className="propertiesButtons-label"> {label(targetDoc?.[property])}</div>
                         {/* <FontAwesomeIcon className="documentdecorations-icon" size="lg" icon={icon(BoolCast(targetDoc?.[property])) as any} /> */}
                     </div>
-                  
-                   
                 </div>
             </Tooltip>
         );
     };
-    
-
 
     @computed get titleButton() {
         return this.propertyToggleBtn(
-            on => !on ?  'SHOW TITLE' : (this.selectedDoc?.['_layout_showTitle']) === 'title:hover' ? 'REMOVE TITLE' : 'HOVER TITLE' ,
+            on => (!on ? 'SHOW TITLE' : this.selectedDoc?.['_layout_showTitle'] === 'title:hover' ? 'REMOVE TITLE' : 'HOVER TITLE'),
             '_layout_showTitle',
             on => 'Switch between title styles',
-            on =>   on ?  <MdSubtitlesOff/> : <MdSubtitles/>, // {currentIcon}, //(on ?  <MdSubtitles/> :)  , //,'text-width', on ?  <MdSubtitles/> : <MdSubtitlesOff/>,
+            on => (on ? <MdSubtitlesOff /> : <MdSubtitles />), // {currentIcon}, //(on ?  <MdSubtitles/> :)  , //,'text-width', on ?  <MdSubtitles/> : <MdSubtitlesOff/>,
             (dv, doc) => {
                 const tdoc = dv?.rootDoc || doc;
                 const newtitle = !tdoc._layout_showTitle ? 'title' : tdoc._layout_showTitle === 'title' ? 'title:hover' : '';
@@ -101,41 +98,44 @@ export class PropertiesButtons extends React.Component<{}, {}> {
     //        // on => 'thumbtack'
     //     );
     // }
-    @computed get maskButton() { //highlight text while going down and reading through
+    @computed get maskButton() {
+        //highlight text while going down and reading through
         return this.propertyToggleBtn(
-            on => on ? 'PLAIN INK':  'HIGHLIGHTER MASK',
+            on => (on ? 'PLAIN INK' : 'HIGHLIGHTER MASK'),
             'stroke_isInkMask',
             on => (on ? 'Make plain ink' : 'Make highlight mask'),
-            on => on ? <TbHighlightOff/> : <TbHighlight/>, // <FaHighlighter/>,// 'paint-brush',
+            on => (on ? <TbHighlightOff /> : <TbHighlight />), // <FaHighlighter/>,// 'paint-brush',
             (dv, doc) => InkingStroke.toggleMask(dv?.layoutDoc || doc)
         );
     }
- 
-    @computed get hideImageButton() { // put in developer -- can trace on top of object and drawing is still there
+
+    @computed get hideImageButton() {
+        // put in developer -- can trace on top of object and drawing is still there
         return this.propertyToggleBtn(
-            on => 'Background',
+            on => (on ? 'SHOW BACKGROUND IMAGE' : 'HIDE BACKGROUND IMAGE'), //'Background',
             '_hideImage',
             on => (on ? 'Show Image' : 'Show Background'),
-            on => <AiOutlinePicture/> //'portrait'
+            on => (on ? <BiShow /> : <BiHide />) //'portrait'
         );
     }
 
     @computed get clustersButton() {
         return this.propertyToggleBtn(
-            on =>'Clusters',
+            on => 'Clusters',
             '_freeform_useClusters',
             on => `${on ? 'Hide' : 'Show'} clusters`,
-            on => <FaBraille/>
+            on => <FaBraille />
         );
     }
-    // @computed get panButton() {
-    //     return this.propertyToggleBtn(
-    //         'Lock\xA0View',
-    //         '_lockedTransform',
-    //         on => `${on ? 'Unlock' : 'Lock'} panning of view`,
-    //         on => 'lock'
-    //     );
-    // }
+    @computed get panButton() {
+        return this.propertyToggleBtn(
+            on => 'Lock\xA0View',
+            '_lockedTransform',
+            on => `${on ? 'Unlock' : 'Lock'} panning of view`,
+            on => 'lock'
+        );
+    }
+
     // @computed get forceActiveButton() {
     //     return this.propertyToggleBtn(
     //         'Active',
@@ -428,9 +428,9 @@ 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.lockButton)} */}
+                {toggle(this.titleButton)}
+                {/* {toggle(this.captionButton)} */}
+                {/* {toggle(this.lockButton)} */}
                 {/*{toggle(this.onClickButton)}
                 {toggle(this.layout_fitWidthButton)}
                 {toggle(this.freezeThumb)}
@@ -439,7 +439,7 @@ export class PropertiesButtons extends React.Component<{}, {}> {
                 {toggle(this.isLightboxButton, { display: !isFreeForm && !isMap ? 'none' : '' })}
                 {toggle(this.layout_autoHeightButton, { display: !isText && !isStacking && !isTree ? 'none' : '' })}*/}
                 {toggle(this.maskButton, { display: !isInk ? 'none' : '' })}
-               {toggle(this.hideImageButton, { display: !isImage ? 'none' : '' })}
+                {toggle(this.hideImageButton, { display: !isImage ? 'none' : '' })}
                 {/* {toggle(this.chromeButton, { display: !isCollection || isNovice ? 'none' : '' })}
                 {toggle(this.gridButton, { display: !isCollection ? 'none' : '' })}
                 {toggle(this.groupButton, { display: isTabView || !isCollection ? 'none' : '' })}