fixing options

5 files changed, 88 insertions, 58 deletions

diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index 478209fe9..e9cae76e4 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -575,7 +575,7 @@ export namespace Docs {
                 DocumentType.EQUATION,
                 {
                     layout: { view: EquationBox, dataField: 'text' },
-                    options: { nativeDimModifiable: true, fontSize: '14px', layout_hideResizeHandles: true, layout_hideDecorationTitle: true, }, ///systemIcon: 'BsSuperscript' + BsSubscript
+                    options: { nativeDimModifiable: true, fontSize: '14px', layout_hideResizeHandles: true, layout_hideDecorationTitle: true, systemIcon: 'BsCalculatorFill' }, ///systemIcon: 'BsSuperscript' + BsSubscript
                 },
             ],
             [
@@ -691,7 +691,7 @@ export namespace Docs {
                 {
                     data: '',
                     layout: { view: PhysicsSimulationBox, dataField: defaultDataKey, _width: 1000, _height: 800 },
-                    options: { _height: 100, layout_forceReflow: true, nativeHeightUnfrozen: true, mass1: '', mass2: '', nativeDimModifiable: true, position: '', acceleration: '', pendulum: '', spring: '', wedge: '', simulation: '', review: '' },
+                    options: { _height: 100, layout_forceReflow: true, nativeHeightUnfrozen: true, mass1: '', mass2: '', nativeDimModifiable: true, position: '', acceleration: '', pendulum: '', spring: '', wedge: '', simulation: '', review: '', systemIcon: 'BsShareFill' },
                 },
             ],
         ]);
diff --git a/src/client/views/MainView.scss b/src/client/views/MainView.scss
index b95ce0e99..eee9066b5 100644
--- a/src/client/views/MainView.scss
+++ b/src/client/views/MainView.scss
@@ -198,10 +198,10 @@ h1,
         left: 0;
         position: absolute;
         z-index: 2;
-        background-color: $light-gray;
+        background-color: linen;//$light-gray;
 
         .editable-title {
-            background-color: $light-gray;
+            background-color: linen;//$light-gray;
         }
     }
 }
diff --git a/src/client/views/PropertiesButtons.scss b/src/client/views/PropertiesButtons.scss
index 36b2df73e..f571dcf25 100644
--- a/src/client/views/PropertiesButtons.scss
+++ b/src/client/views/PropertiesButtons.scss
@@ -20,22 +20,31 @@ $linkGap : 3px;
 
 .propertiesButtons-linkButton-empty,
 .propertiesButtons-linkButton-nonempty {
-    height: 25px;
-    width: 29px;
-    border-radius: 6px;
-    pointer-events: auto;
-    background-color: $dark-gray;
-    color: #fcfbf7;
-    text-transform: uppercase;
-    letter-spacing: 2px;
-    font-size: 75%;
-    transition: transform 0.2s;
-    text-align: center;
+    // margin-right: 7px;
+    // margin-left: 8px;
+    height: 28px;
+    width: 226px;//29px;
     display: flex;
-    justify-content: center;
     align-items: center;
-    margin-right: 10px;
-    margin-left: 4px;
+    // height: 25px;
+    // width: 230px;//29px;
+    // display: flex;
+    // align-items: center;
+    // border-radius: 6px;
+    pointer-events: auto;
+    // background-color:  $dark-gray;
+    // color:  #fcfbf7;
+    // text-transform: uppercase;
+    // letter-spacing: 2px;
+    // font-size: 75%;
+    transition: transform 0.2s;
+    // text-align: center;
+  
+
+    // justify-content: center;
+    
+    // margin-right: 10px;
+    // margin-left: 4px;
 
     &:hover {
         background: $medium-gray;
@@ -52,19 +61,24 @@ $linkGap : 3px;
     color: $black;
 }
 .propertiesButtons-linkButton-empty.toggle-off {
-    background-color: $dark-gray;
-    color: white;
+    background-color: white;//$dark-gray;
+    color: black; //white;
+}
+
+.propertiesButtons-icon {
+    margin-left:8px;
 }
 
 .propertiesButtons {
-    margin-top: 3px;
-    grid-column: 1/4;
-    width: 100%;
-    height: auto;
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    padding-bottom: 5.5px;
+    position:relative;
+    //     margin-top: 3px;
+//    // grid-column: 1/4;
+//     width: 100%;
+//     height: auto;
+//     display: flex;
+//     // flex-direction: row;
+//     // flex-wrap: wrap;
+//     padding-bottom: 5.5px;
 }
 
 .onClickFlyout-editScript {
@@ -110,18 +124,32 @@ $linkGap : 3px;
     }
 }
 
-.propertiesButtons-title {
-    background: $dark-gray;
-    color: $white;
-    font-size: 6px;
-    width: 37px;
-    padding: 3px;
-    height: 12px;
-    border-radius: 7px;
+// .propertiesButtons-iconAndText{
+//     height: 28px;
+//     width: 220px;//29px;
+//     display: flex;
+//     align-items: center;
+//     background-color: white;
+// }
+
+.propertiesButtons-label {
     text-transform: uppercase;
-    text-align: center;
-    margin-top: -4px;
-}
+    margin-left: 8px;
+    // margin-right: 50 px;
+}
+
+// .propertiesButtons-title {
+//     background: pink; //$dark-gray;
+//     color: $white;
+//     font-size: 6px;
+//     width: 37px;
+//     padding: 3px;
+//     height: 12px;
+//     border-radius: 7px;
+//     text-transform: uppercase;
+//     text-align: center;
+//     margin-top: -4px;
+// }
 
 .propertiesButtons-linker {
     height: 25px;
diff --git a/src/client/views/PropertiesButtons.tsx b/src/client/views/PropertiesButtons.tsx
index 2c88eacc6..247368685 100644
--- a/src/client/views/PropertiesButtons.tsx
+++ b/src/client/views/PropertiesButtons.tsx
@@ -22,7 +22,7 @@ import { pasteImageBitmap } from './nodes/WebBoxRenderer';
 import './PropertiesButtons.scss';
 import React = require('react');
 import { JsxElement } from 'typescript';
-import { FaThumbtack } from 'react-icons/fa';
+import { FaBraille, FaThumbtack } from 'react-icons/fa';
 import { AiOutlineApple } from 'react-icons/ai';
 const higflyout = require('@hig/flyout');
 export const { anchorPoints } = higflyout;
@@ -50,7 +50,7 @@ export class PropertiesButtons extends React.Component<{}, {}> {
         const onPropToggle = (dv: Opt<DocumentView>, doc: Doc, prop: string) => ((dv?.layoutDoc || doc)[prop] = (dv?.layoutDoc || doc)[prop] ? false : true);
         return !targetDoc ? null : (
             <Tooltip title={<div className={`dash-tooltip`}>{tooltip(targetDoc?.[property])} </div>} placement="top">
-                <div>
+                <div className = 'propertiesButtons-iconAndText' >
                     <div
                         className={`propertiesButtons-linkButton-empty toggle-${StrCast(targetDoc[property]).includes(':hover') ? 'hover' : targetDoc[property] ? 'on' : 'off'}`}
                         onPointerDown={e => e.stopPropagation()}
@@ -59,11 +59,13 @@ 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)}>
-                        {icon((BoolCast(targetDoc?.[property])) as any)}
-                    
+                            <div className = "propertiesButtons-icon">  {icon((BoolCast(targetDoc?.[property])) as any)} </div>
+                      
+                          <div className="propertiesButtons-label">  {label}</div>
                         {/* <FontAwesomeIcon className="documentdecorations-icon" size="lg" icon={icon(BoolCast(targetDoc?.[property])) as any} /> */}
                     </div>
-                    <div className="propertiesButtons-title">{label}</div>
+                  
+                   
                 </div>
             </Tooltip>
         );
@@ -94,14 +96,14 @@ export class PropertiesButtons extends React.Component<{}, {}> {
     //         on => 'portrait'
     //     );
     // }
-    // @computed get clustersButton() {
-    //     return this.propertyToggleBtn(
-    //         'Clusters',
-    //         '_freeform_useClusters',
-    //         on => `${on ? 'Hide' : 'Show'} clusters`,
-    //         on => 'braille'
-    //     );
-    // }
+    @computed get clustersButton() {
+        return this.propertyToggleBtn(
+            'Clusters',
+            '_freeform_useClusters',
+            on => `${on ? 'Hide' : 'Show'} clusters`,
+            on => <FaBraille/>
+        );
+    }
     // @computed get panButton() {
     //     return this.propertyToggleBtn(
     //         'Lock\xA0View',
@@ -416,8 +418,8 @@ export class PropertiesButtons extends React.Component<{}, {}> {
             <div className="propertiesButtons">
                 {/* {toggle(this.titleButton)}
                 {toggle(this.captionButton)} */}
-                {toggle(this.lockButton)}
-                {/* {toggle(this.onClickButton)}
+                 {toggle(this.lockButton)}
+                {/*{toggle(this.onClickButton)}
                 {toggle(this.layout_fitWidthButton)}
                 {toggle(this.freezeThumb)}
                 {toggle(this.forceActiveButton)}
@@ -429,9 +431,9 @@ export class PropertiesButtons extends React.Component<{}, {}> {
                 {toggle(this.chromeButton, { display: !isCollection || isNovice ? 'none' : '' })}
                 {toggle(this.gridButton, { display: !isCollection ? 'none' : '' })}
                 {toggle(this.groupButton, { display: isTabView || !isCollection ? 'none' : '' })}
-                {toggle(this.snapButton, { display: !isCollection ? 'none' : '' })}
+                {toggle(this.snapButton, { display: !isCollection ? 'none' : '' })} */}
                 {toggle(this.clustersButton, { display: !isFreeForm ? 'none' : '' })}
-                {toggle(this.panButton, { display: !isFreeForm ? 'none' : '' })}
+                {/* {toggle(this.panButton, { display: !isFreeForm ? 'none' : '' })}
                 {toggle(this.perspectiveButton, { display: !isCollection || isNovice ? 'none' : '' })} */}
             </div>
         );
diff --git a/src/client/views/PropertiesView.scss b/src/client/views/PropertiesView.scss
index b3d16d82a..49f2fc6fe 100644
--- a/src/client/views/PropertiesView.scss
+++ b/src/client/views/PropertiesView.scss
@@ -837,7 +837,7 @@
 }
 
 .propertiesView-wordTitle{
-    color:silver;
+    color:darkslategray;
     font-weight:200;
 }
 
@@ -854,7 +854,7 @@
 }
 
 .propertiesView-wordType{
-    color:silver;
+    color:darkslategray;
     font-weight:200;
 }