chaned implementation of playroundMode

3 files changed, 24 insertions, 18 deletions

diff --git a/src/client/DocServer.ts b/src/client/DocServer.ts
index dec8724c6..f5ee6da3c 100644
--- a/src/client/DocServer.ts
+++ b/src/client/DocServer.ts
@@ -9,6 +9,7 @@ import GestureOverlay from './views/GestureOverlay';
 import MobileInkOverlay from '../mobile/MobileInkOverlay';
 import { runInAction } from 'mobx';
 import { ObjectField } from '../fields/ObjectField';
+import { getPlaygroundMode } from '../fields/util';
 
 /**
  * This class encapsulates the transfer and cross-client synchronization of
@@ -156,23 +157,23 @@ export namespace DocServer {
 
         let _isReadOnly = false;
         export function makeReadOnly() {
-            if (_isReadOnly) return;
-            _isReadOnly = true;
-            _CreateField = field => {
-                _cache[field[Id]] = field;
-            };
-            _UpdateField = emptyFunction;
-            _RespondToUpdate = emptyFunction;
+            if (!_isReadOnly) {
+                _isReadOnly = true;
+                _CreateField = field => _cache[field[Id]] = field;
+                _UpdateField = emptyFunction;
+                _RespondToUpdate = emptyFunction;
+            }
         }
 
         export function makeEditable() {
-            if (!_isReadOnly) return;
-            location.reload();
-            // _isReadOnly = false;
-            // _CreateField = _CreateFieldImpl;
-            // _UpdateField = _UpdateFieldImpl;
-            // _respondToUpdate = _respondToUpdateImpl;
-            // _cache = {};
+            if (_isReadOnly) {
+                location.reload();
+                // _isReadOnly = false;
+                // _CreateField = _CreateFieldImpl;
+                // _UpdateField = _UpdateFieldImpl;
+                // _respondToUpdate = _respondToUpdateImpl;
+                // _cache = {};
+            }
         }
 
         export function isReadOnly() { return _isReadOnly; }
@@ -451,7 +452,7 @@ export namespace DocServer {
     }
 
     function _UpdateFieldImpl(id: string, diff: any) {
-        Utils.Emit(_socket, MessageStore.UpdateField, { id, diff });
+        (!getPlaygroundMode()) && Utils.Emit(_socket, MessageStore.UpdateField, { id, diff });
     }
 
     let _UpdateField: (id: string, diff: any) => void = errorFunc;
diff --git a/src/client/util/SettingsManager.tsx b/src/client/util/SettingsManager.tsx
index 90d59aa51..fbdceb43e 100644
--- a/src/client/util/SettingsManager.tsx
+++ b/src/client/util/SettingsManager.tsx
@@ -9,18 +9,20 @@ import "./SettingsManager.scss";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { Networking } from "../Network";
 import { CurrentUserUtils } from "./CurrentUserUtils";
-import { Utils } from "../../Utils";
+import { Utils, addStyleSheet, addStyleSheetRule, removeStyleSheetRule } from "../../Utils";
 import { Doc } from "../../fields/Doc";
 import GroupManager from "./GroupManager";
 import HypothesisAuthenticationManager from "../apis/HypothesisAuthenticationManager";
 import GoogleAuthenticationManager from "../apis/GoogleAuthenticationManager";
 import { togglePlaygroundMode } from "../../fields/util";
+import { DocServer } from "../DocServer";
 
 library.add(fa.faTimes);
 
 @observer
 export default class SettingsManager extends React.Component<{}> {
     public static Instance: SettingsManager;
+    static _settingsStyle = addStyleSheet();
     @observable private isOpen = false;
     @observable private dialogueBoxOpacity = 1;
     @observable private overlayOpacity = 0.4;
@@ -99,8 +101,12 @@ export default class SettingsManager extends React.Component<{}> {
 
     @action
     togglePlaygroundMode = () => {
-        togglePlaygroundMode();
+        //togglePlaygroundMode();
         this.playgroundMode = !this.playgroundMode;
+        if (this.playgroundMode) DocServer.Control.makeReadOnly();
+        else DocServer.Control.makeEditable();
+
+        addStyleSheetRule(SettingsManager._settingsStyle, "lm_header", { background: "pink !important" });
     }
 
     private get settingsInterface() {
diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx
index 53b2d5254..4952dedc9 100644
--- a/src/client/views/collections/CollectionDockingView.tsx
+++ b/src/client/views/collections/CollectionDockingView.tsx
@@ -595,7 +595,6 @@ export class CollectionDockingView extends React.Component<SubCollectionViewProp
 
     stackCreated = (stack: any) => {
         //stack.header.controlsContainer.find('.lm_popout').hide();
-        stack.header.element[0].style.backgroundColor = DocServer.Control.isReadOnly() ? "#228540" : undefined;
         stack.header.element.on('mousedown', (e: any) => {
             if (e.target === stack.header.element[0] && e.button === 1) {
                 this.AddTab(stack, Docs.Create.FreeformDocument([], { _width: this.props.PanelWidth(), _height: this.props.PanelHeight(), title: "Untitled Collection" }));