From a6f34fd4b67b863a85aab8fae0a2bd06a1decdc8 Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Fri, 23 Dec 2022 17:30:51 -0500
Subject: fixed scroll  pan vs. zoom option and ui

---
 src/client/util/SettingsManager.tsx | 26 ++++++++++++++++----------
 1 file changed, 16 insertions(+), 10 deletions(-)

(limited to 'src/client/util/SettingsManager.tsx')

diff --git a/src/client/util/SettingsManager.tsx b/src/client/util/SettingsManager.tsx
index 5c1c836f7..a3d76591f 100644
--- a/src/client/util/SettingsManager.tsx
+++ b/src/client/util/SettingsManager.tsx
@@ -28,7 +28,7 @@ export enum ColorScheme {
 
 export enum freeformScrollMode {
     Pan = 'pan',
-    Zoom = 'zoom'
+    Zoom = 'zoom',
 }
 
 @observer
@@ -307,11 +307,9 @@ export class SettingsManager extends React.Component<{}> {
         );
     }
 
-
-
     setFreeformScrollMode = (mode: freeformScrollMode) => {
         Doc.UserDoc().freeformScrollMode = mode;
-    }
+    };
 
     @computed get modesContent() {
         return (
@@ -334,12 +332,20 @@ export class SettingsManager extends React.Component<{}> {
                             <div className="playground-text">Playground Mode</div>
                         </div>
                     </div>
-                    <div className="tab-column-title">Freeform scroll mode</div>
-                    <div>
-                        <button onClick={() => this.setFreeformScrollMode(freeformScrollMode.Pan)}>Scroll to pan</button>
-                        <div>Scrolling pans around the freeform, holding shift and scrolling zooms in and out.</div>
-                        <button onClick={() => this.setFreeformScrollMode(freeformScrollMode.Zoom)}>Scroll to zoom</button>
-                        <div>Scrolling zooms in and out of canvas</div>
+                    <div className="tab-column-title" style={{ marginTop: 10, marginBottom: 0 }}>
+                        Freeform scrolling
+                    </div>
+                    <div className="tab-column-content">
+                        <button style={{ backgroundColor: Doc.UserDoc().freeformScrollMode === freeformScrollMode.Pan ? 'blue' : '' }} onClick={() => this.setFreeformScrollMode(freeformScrollMode.Pan)}>
+                            Scroll to pan
+                        </button>
+                        <div>
+                            <div>Scrolling pans canvas, shift + scrolling zooms</div>
+                        </div>
+                        <button style={{ backgroundColor: Doc.UserDoc().freeformScrollMode === freeformScrollMode.Zoom ? 'blue' : '' }} onClick={() => this.setFreeformScrollMode(freeformScrollMode.Zoom)}>
+                            Scroll to zoom
+                        </button>
+                        <div>Scrolling zooms canvas</div>
                     </div>
                 </div>
                 <div className="tab-column">
-- 
cgit v1.2.3-70-g09d2