From ea855ecda2c3df9e5d0881d43e2fdbceb9dccafc Mon Sep 17 00:00:00 2001
From: anika-ahluwalia <anika.ahluwalia@gmail.com>
Date: Wed, 5 Aug 2020 22:25:24 -0500
Subject: finishing touches on settings

---
 src/client/util/SettingsManager.tsx | 78 ++++++++++++++++++++++++++++---------
 1 file changed, 59 insertions(+), 19 deletions(-)

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

diff --git a/src/client/util/SettingsManager.tsx b/src/client/util/SettingsManager.tsx
index 68ed32c0f..155c7f60c 100644
--- a/src/client/util/SettingsManager.tsx
+++ b/src/client/util/SettingsManager.tsx
@@ -39,6 +39,9 @@ export default class SettingsManager extends React.Component<{}> {
     private new_password_ref = React.createRef<HTMLInputElement>();
     private new_confirm_ref = React.createRef<HTMLInputElement>();
 
+    @observable private curr_password: string = "";
+    @observable private new_password: string = "";
+    @observable private new_confirm: string = "";
 
     @computed get backgroundColor() { return Doc.UserDoc().defaultColor; }
 
@@ -142,25 +145,44 @@ export default class SettingsManager extends React.Component<{}> {
         return true;
     }
 
-    private get settingsInterface() {
+    @computed get allowSubmit() {
+        return this.curr_password.length > 3 &&
+            this.new_password.length > 3 &&
+            this.new_confirm.length > 3 && this.new_confirm === this.new_password &&
+            this.new_password !== this.curr_password ? true : false;
+    }
 
+    @action
+    changeVal = (e: any, pass: string) => {
+        if (pass === "curr") {
+            this.curr_password = e.target.value;
+        } else if (pass === "new") {
+            this.new_password = e.target.value;
+        } else if (pass === "conf") {
+            this.new_confirm = e.target.value;
+        }
+    }
 
-        const passwordContent = <div className="password-content">
+    @computed get passwordContent() {
+        return <div className="password-content">
             <div className="password-content-inputs">
-                <input className="password-inputs" type="password" placeholder="current password" ref={this.curr_password_ref} />
-                <input className="password-inputs" type="password" placeholder="new password" ref={this.new_password_ref} />
-                <input className="password-inputs" type="password" placeholder="confirm new password" ref={this.new_confirm_ref} />
+                <input className="password-inputs" type="password" placeholder="current password" onChange={e => this.changeVal(e, "curr")} ref={this.curr_password_ref} />
+                <input className="password-inputs" type="password" placeholder="new password" onChange={e => this.changeVal(e, "new")} ref={this.new_password_ref} />
+                <input className="password-inputs" type="password" placeholder="confirm new password" onChange={e => this.changeVal(e, "conf")} ref={this.new_confirm_ref} />
             </div>
             <div className="password-content-buttons">
                 {this.errorText ? <div className="error-text">{this.errorText}</div> : undefined}
                 {this.successText ? <div className="success-text">{this.successText}</div> : undefined}
-                <button className="password-submit" onClick={this.dispatchRequest}>submit</button>
+                {this.allowSubmit ? <button className="password-submit"
+                    onClick={this.dispatchRequest}>submit</button> : <div className="grey-submit"> submit </div>}
                 <a className="password-forgot" style={{ marginLeft: 65, marginTop: -20 }}
                     href="/forgotPassword">forgot password?</a>
             </div>
         </div>;
+    }
 
-        const modesContent = <div className="modes-content">
+    @computed get modesContent() {
+        return <div className="modes-content">
             <select className="modes-select"
                 onChange={e => this.changeMode(e)}>
                 <option key={"Novice"} value={"Novice"} selected={BoolCast(Doc.UserDoc().noviceMode)}>
@@ -177,22 +199,28 @@ export default class SettingsManager extends React.Component<{}> {
                 /><div className="playground-text">Playground Mode</div>
             </div>
         </div>;
+    }
 
-        const accountsContent = <div className="accounts-content">
+    @computed get accountsContent() {
+        return <div className="accounts-content">
             <button onClick={this.googleAuthorize} value="data">{`Link to Google`}</button>
             <button onClick={this.hypothesisAuthorize} value="data">{`Link to Hypothes.is`}</button>
             <button onClick={() => GroupManager.Instance.open()}>Manage groups</button>
         </div>;
+    }
 
-        const colorBox = <SketchPicker onChange={this.switchColor}
+    @computed get colorBox() {
+        return <SketchPicker onChange={this.switchColor}
             presetColors={['#D0021B', '#F5A623', '#F8E71C', '#8B572A', '#7ED321', '#417505',
                 '#9013FE', '#4A90E2', '#50E3C2', '#B8E986', '#000000', '#4A4A4A', '#9B9B9B',
                 '#FFFFFF', '#f1efeb', 'transparent']}
             color={StrCast(this.backgroundColor)} />;
+    }
 
-        const colorFlyout = <div className="colorFlyout">
+    @computed get colorFlyout() {
+        return <div className="colorFlyout">
             <Flyout anchorPoint={anchorPoints.LEFT_TOP}
-                content={colorBox}>
+                content={this.colorBox}>
                 <div>
                     <div className="colorFlyout-button" style={{ backgroundColor: StrCast(this.backgroundColor) }}
                         onPointerDown={e => e.stopPropagation()} >
@@ -201,13 +229,15 @@ export default class SettingsManager extends React.Component<{}> {
                 </div>
             </Flyout>
         </div>;
+    }
 
+    @computed get preferencesContent() {
         const fontFamilies: string[] = ["Times New Roman", "Arial", "Georgia", "Comic Sans MS", "Tahoma", "Impact", "Crimson Text"];
         const fontSizes: string[] = ["7pt", "8pt", "9pt", "10pt", "12pt", "14pt", "16pt", "18pt", "20pt", "24pt", "32pt", "48pt", "72pt"];
 
         const preferencesContent = <div className="preferences-content">
             <div className="preferences-color">
-                <div className="preferences-color-text">Background Color</div> {colorFlyout}
+                <div className="preferences-color-text">Background Color</div> {this.colorFlyout}
             </div>
             <div className="preferences-font">
                 <div className="preferences-font-text">Default Font</div>
@@ -227,15 +257,25 @@ export default class SettingsManager extends React.Component<{}> {
                         </option>;
                     })}
                 </select>
-            </div>
+            </div>;
         </div>;
 
+        return preferencesContent;
+    }
+
+
+    @computed private get settingsInterface() {
+
         return (<div className="settings-interface">
             <div className="settings-top">
                 <div className="settings-title">Settings</div>
-                <div className="settings-username">{Doc.CurrentUserEmail}</div>
+                <div className="settings-username">
+                    <div style={{ fontSize: 9 }}> Signed in as: </div>
+                    <div> {Doc.CurrentUserEmail}</div>
+                </div>
                 <button onClick={() => window.location.assign(Utils.prepend("/logout"))}
-                    style={{ right: 35, position: "absolute" }} >
+                    //style={{ right: 35, position: "absolute" }} >
+                    style={{ left: 137, position: "absolute" }} >
                     {CurrentUserUtils.GuestWorkspace ? "Exit" : "Log Out"}
                 </button>
                 <div className="close-button" onClick={this.close}>
@@ -245,19 +285,19 @@ export default class SettingsManager extends React.Component<{}> {
             <div className="settings-content">
                 <div className="settings-section">
                     <div className="settings-section-title">Password</div>
-                    <div className="settings-section-context">{passwordContent}</div>
+                    <div className="settings-section-context">{this.passwordContent}</div>
                 </div>
                 <div className="settings-section">
                     <div className="settings-section-title">Modes</div>
-                    <div className="settings-section-context">{modesContent}</div>
+                    <div className="settings-section-context">{this.modesContent}</div>
                 </div>
                 <div className="settings-section">
                     <div className="settings-section-title">Accounts</div>
-                    <div className="settings-section-context">{accountsContent}</div>
+                    <div className="settings-section-context">{this.accountsContent}</div>
                 </div>
                 <div className="settings-section" style={{ paddingBottom: 4 }}>
                     <div className="settings-section-title">Preferences</div>
-                    <div className="settings-section-context">{preferencesContent}</div>
+                    <div className="settings-section-context">{this.preferencesContent}</div>
                 </div>
             </div>
         </div>);
-- 
cgit v1.2.3-70-g09d2


From ecadf91fa662a45b7e0c2302f9423a2032589909 Mon Sep 17 00:00:00 2001
From: anika-ahluwalia <anika.ahluwalia@gmail.com>
Date: Thu, 6 Aug 2020 11:21:33 -0500
Subject: ink fix

---
 src/client/util/SettingsManager.tsx                |  2 +-
 .../collectionFreeForm/PropertiesView.tsx          | 37 ++++++++++++++--------
 2 files changed, 24 insertions(+), 15 deletions(-)

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

diff --git a/src/client/util/SettingsManager.tsx b/src/client/util/SettingsManager.tsx
index 155c7f60c..8124b7676 100644
--- a/src/client/util/SettingsManager.tsx
+++ b/src/client/util/SettingsManager.tsx
@@ -257,7 +257,7 @@ export default class SettingsManager extends React.Component<{}> {
                         </option>;
                     })}
                 </select>
-            </div>;
+            </div>
         </div>;
 
         return preferencesContent;
diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx
index 3b449d941..8aeb80ace 100644
--- a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx
+++ b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx
@@ -83,6 +83,8 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
 
     @computed get isInk() { return this.selectedDoc?.type === DocumentType.INK; }
 
+    @observable scrolling: boolean = true;
+
     @action
     rtfWidth = () => {
         if (this.selectedDoc) {
@@ -598,21 +600,28 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
     set colorStk(value) { value && (this._lastLine = value); this.selectedDoc && (this.selectedDoc.color = value ? value : undefined); }
 
     colorButton(value: string, type: string, setter: () => {}) {
-        return <div className="properties-flyout">
-            <Flyout anchorPoint={anchorPoints.LEFT_TOP}
-                content={type === "fill" ? this.fillPicker : this.linePicker}>
-                <div className="color-button" key="color" onPointerDown={undoBatch(action(e => setter()))}>
-                    <div className="color-button-preview" style={{
-                        backgroundColor: value ?? "121212", width: 15, height: 15,
-                        display: value === "" || value === "transparent" ? "none" : ""
-                    }} />
-                    {value === "" || value === "transparent" ? <p style={{ fontSize: 25, color: "red", marginTop: -14, position: "fixed" }}>☒</p> : ""}
-                </div>
-            </Flyout>
+        // return <div className="properties-flyout" onPointerEnter={e => this.changeScrolling(false)}
+        //     onPointerLeave={e => this.changeScrolling(true)}>
+        //     <Flyout anchorPoint={anchorPoints.LEFT_TOP}
+        //         content={type === "fill" ? this.fillPicker : this.linePicker}>
+        return <div className="color-button" key="color" onPointerDown={undoBatch(action(e => setter()))}>
+            <div className="color-button-preview" style={{
+                backgroundColor: value ?? "121212", width: 15, height: 15,
+                display: value === "" || value === "transparent" ? "none" : ""
+            }} />
+            {value === "" || value === "transparent" ? <p style={{ fontSize: 25, color: "red", marginTop: -14 }}>☒</p> : ""}
         </div>;
+        //     </Flyout>
+        // </div>;
 
     }
 
+    @action
+    changeScrolling = (scroll: boolean) => {
+        console.log(scroll);
+        this.scrolling = scroll;
+    }
+
     @undoBatch
     @action
     switchStk = (color: ColorState) => {
@@ -654,8 +663,8 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
                     <div className="stroke-button">{this.lineButton}</div>
                 </div>
             </div>
-            {/* {this._fillBtn ? this.fillPicker : ""}
-            {this._lineBtn ? this.linePicker : ""} */}
+            {this._fillBtn ? this.fillPicker : ""}
+            {this._lineBtn ? this.linePicker : ""}
         </div>;
     }
 
@@ -771,7 +780,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
             if (this.selectedDoc && !this.isPres) {
                 return <div className="propertiesView" style={{
                     width: this.props.width,
-                    // overflowY: this.inActions ? "visible" : "scroll"
+                    overflowY: this.scrolling ? "scroll" : "visible"
                 }} >
                     <div className="propertiesView-title" style={{ width: this.props.width }}>
                         Properties
-- 
cgit v1.2.3-70-g09d2


From 59a03f711c48aa51a53759dcece88cd6d6204010 Mon Sep 17 00:00:00 2001
From: anika-ahluwalia <anika.ahluwalia@gmail.com>
Date: Thu, 6 Aug 2020 16:29:46 -0500
Subject: trying novice tools

---
 src/client/documents/Documents.ts      |   1 +
 src/client/util/CurrentUserUtils.ts    | 144 ++++++++++++++++++++++++---------
 src/client/util/SettingsManager.tsx    |   9 ++-
 src/client/views/nodes/FontIconBox.tsx |   8 +-
 4 files changed, 117 insertions(+), 45 deletions(-)

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

diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index 7719b3eef..3b5f10050 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -201,6 +201,7 @@ export interface DocumentOptions {
     linearViewIsExpanded?: boolean; // is linear view expanded
     border?: string; //for searchbox
     hovercolor?: string;
+    developerFeature?: boolean;
 }
 
 class EmptyBox {
diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index 1f140e145..822979e32 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -387,7 +387,8 @@ export class CurrentUserUtils {
 
     static creatorBtnDescriptors(doc: Doc): {
         title: string, toolTip: string, icon: string, drag?: string, ignoreClick?: boolean,
-        click?: string, ischecked?: string, activeInkPen?: Doc, backgroundColor?: string, dragFactory?: Doc
+        click?: string, ischecked?: string, activeInkPen?: Doc, backgroundColor?: string, dragFactory?: Doc, hidden?: any,
+        developerFeature?: boolean
     }[] {
         if (doc.emptyPresentation === undefined) {
             doc.emptyPresentation = Docs.Create.PresDocument(new List<Doc>(),
@@ -426,30 +427,90 @@ export class CurrentUserUtils {
         if (doc.activeMobileMenu === undefined) {
             this.setupActiveMobileMenu(doc);
         }
-        return [
-            { toolTip: "Drag a collection", title: "Col", icon: "folder", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyCollection as Doc },
-            { toolTip: "Drag a web page", title: "Web", icon: "globe-asia", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyWebpage as Doc },
-            { toolTip: "Drag a cat image", title: "Image", icon: "cat", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyImage as Doc },
-            { toolTip: "Drag a comparison box", title: "Compare", icon: "columns", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyComparison as Doc },
-            { toolTip: "Drag a screengrabber", title: "Grab", icon: "photo-video", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyScreenshot as Doc },
-            //  { title: "Drag a webcam", title: "Cam", icon: "video", ignoreClick: true, drag: 'Docs.Create.WebCamDocument("", { _width: 400, _height: 400, title: "a test cam" })' },
-            { toolTip: "Drag a audio recorder", title: "Audio", icon: "microphone", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyAudio as Doc },
-            { toolTip: "Drag a button", title: "Button", icon: "bolt", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyButton as Doc },
-
-            { toolTip: "Drag a presentation view", title: "Prezi", icon: "tv", click: 'openOnRight(Doc.UserDoc().activePresentation = getCopy(this.dragFactory, true))', drag: `Doc.UserDoc().activePresentation = getCopy(this.dragFactory, true)`, dragFactory: doc.emptyPresentation as Doc },
-            { toolTip: "Drag a search box", title: "Query", icon: "search", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptySearch as Doc },
-            { toolTip: "Drag a scripting box", title: "Script", icon: "terminal", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyScript as Doc },
-            // { title: "Drag an import folder", title: "Load", icon: "cloud-upload-alt", ignoreClick: true, drag: 'Docs.Create.DirectoryImportDocument({ title: "Directory Import", _width: 400, _height: 400 })' },
-            { toolTip: "Drag a mobile view", title: "Phone", icon: "mobile", click: 'openOnRight(Doc.UserDoc().activeMobileMenu)', drag: 'this.dragFactory', dragFactory: doc.activeMobileMenu as Doc },
-            // { title: "Drag an instance of the device collection", title: "Buxton", icon: "globe-asia", ignoreClick: true, drag: 'Docs.Create.Buxton()' },
-            // { title: "use pen", icon: "pen-nib", click: 'activatePen(this.activeInkPen = sameDocs(this.activeInkPen, this) ? undefined : this)', backgroundColor: "blue", ischecked: `sameDocs(this.activeInkPen,  this)`, activeInkPen: doc },
-            // { title: "use highlighter", icon: "highlighter", click: 'activateBrush(this.activeInkPen = sameDocs(this.activeInkPen, this) ? undefined : this,20,this.backgroundColor)', backgroundColor: "yellow", ischecked: `sameDocs(this.activeInkPen, this)`, activeInkPen: doc },
-            // { title: "use stamp", icon: "stamp", click: 'activateStamp(this.activeInkPen = sameDocs(this.activeInkPen, this) ? undefined : this)', backgroundColor: "orange", ischecked: `sameDocs(this.activeInkPen, this)`, activeInkPen: doc },
-            // { title: "use eraser", icon: "eraser", click: 'activateEraser(this.activeInkPen = sameDocs(this.activeInkPen, this) ? undefined : this);', ischecked: `sameDocs(this.activeInkPen, this)`, backgroundColor: "pink", activeInkPen: doc },
-            // { title: "use drag", icon: "mouse-pointer", click: 'deactivateInk();this.activeInkPen = this;', ischecked: `sameDocs(this.activeInkPen, this)`, backgroundColor: "white", activeInkPen: doc },
-            { toolTip: "Drag a document previewer", title: "Prev", icon: "expand", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyDocHolder as Doc },
-            { toolTip: "Toggle a Calculator REPL", title: "repl", icon: "calculator", click: 'addOverlayWindow("ScriptingRepl", { x: 300, y: 100, width: 200, height: 200, title: "Scripting REPL" })' },
-        ];
+
+        // { title: "Drag an instance of the device collection", title: "Buxton", icon: "globe-asia", ignoreClick: true, drag: 'Docs.Create.Buxton()' },
+        // { title: "use pen", icon: "pen-nib", click: 'activatePen(this.activeInkPen = sameDocs(this.activeInkPen, this) ? undefined : this)', backgroundColor: "blue", ischecked: `sameDocs(this.activeInkPen,  this)`, activeInkPen: doc },
+        // { title: "use highlighter", icon: "highlighter", click: 'activateBrush(this.activeInkPen = sameDocs(this.activeInkPen, this) ? undefined : this,20,this.backgroundColor)', backgroundColor: "yellow", ischecked: `sameDocs(this.activeInkPen, this)`, activeInkPen: doc },
+        // { title: "use stamp", icon: "stamp", click: 'activateStamp(this.activeInkPen = sameDocs(this.activeInkPen, this) ? undefined : this)', backgroundColor: "orange", ischecked: `sameDocs(this.activeInkPen, this)`, activeInkPen: doc },
+        // { title: "use eraser", icon: "eraser", click: 'activateEraser(this.activeInkPen = sameDocs(this.activeInkPen, this) ? undefined : this);', ischecked: `sameDocs(this.activeInkPen, this)`, backgroundColor: "pink", activeInkPen: doc },
+        // { title: "use drag", icon: "mouse-pointer", click: 'deactivateInk();this.activeInkPen = this;', ischecked: `sameDocs(this.activeInkPen, this)`, backgroundColor: "white", activeInkPen: doc },
+        // { title: "Drag an import folder", title: "Load", icon: "cloud-upload-alt", ignoreClick: true, drag: 'Docs.Create.DirectoryImportDocument({ title: "Directory Import", _width: 400, _height: 400 })' },
+        //  { title: "Drag a webcam", title: "Cam", icon: "video", ignoreClick: true, drag: 'Docs.Create.WebCamDocument("", { _width: 400, _height: 400, title: "a test cam" })' },
+
+        const collection = {
+            toolTip: "Drag a collection", title: "Col",
+            icon: "folder", click: 'openOnRight(getCopy(this.dragFactory, true))',
+            drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyCollection as Doc
+        };
+        const web = {
+            toolTip: "Drag a web page", title: "Web",
+            icon: "globe-asia", click: 'openOnRight(getCopy(this.dragFactory, true))',
+            drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyWebpage as Doc
+        };
+        const cat = {
+            toolTip: "Drag a cat image", title: "Image",
+            icon: "cat", click: 'openOnRight(getCopy(this.dragFactory, true))',
+            drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyImage as Doc
+        };
+        const compare = {
+            toolTip: "Drag a comparison box", title: "Compare",
+            icon: "columns", click: 'openOnRight(getCopy(this.dragFactory, true))',
+            drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyComparison as Doc
+        }
+        const screen = {
+            toolTip: "Drag a screengrabber", title: "Grab",
+            icon: "photo-video", click: 'openOnRight(getCopy(this.dragFactory, true))',
+            drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyScreenshot as Doc,
+            developerFeature: true,
+        };
+        const audio = {
+            toolTip: "Drag a audio recorder", title: "Audio",
+            icon: "microphone", click: 'openOnRight(getCopy(this.dragFactory, true))',
+            drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyAudio as Doc
+        };
+        const button = {
+            toolTip: "Drag a button", title: "Button",
+            icon: "bolt", click: 'openOnRight(getCopy(this.dragFactory, true))',
+            drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyButton as Doc
+        };
+        const pres = {
+            toolTip: "Drag a presentation view", title: "Pres", icon: "tv",
+            click: 'openOnRight(Doc.UserDoc().activePresentation = getCopy(this.dragFactory, true))',
+            drag: `Doc.UserDoc().activePresentation = getCopy(this.dragFactory, true)`,
+            dragFactory: doc.emptyPresentation as Doc
+        };
+        const search = {
+            toolTip: "Drag a search box", title: "Query", icon: "search",
+            click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)',
+            dragFactory: doc.emptySearch as Doc, developerFeature: true,
+        };
+        const script = {
+            toolTip: "Drag a scripting box", title: "Script",
+            icon: "terminal", click: 'openOnRight(getCopy(this.dragFactory, true))',
+            drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyScript as Doc,
+            developerFeature: true,
+        };
+        const mobile = {
+            toolTip: "Drag a mobile view", title: "Phone",
+            icon: "mobile", click: 'openOnRight(Doc.UserDoc().activeMobileMenu)',
+            drag: 'this.dragFactory', dragFactory: doc.activeMobileMenu as Doc,
+            developerFeature: true,
+        };
+        const preview = {
+            toolTip: "Drag a document previewer", title: "Prev",
+            icon: "expand", click: 'openOnRight(getCopy(this.dragFactory, true))',
+            drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyDocHolder as Doc,
+            developerFeature: true,
+        };
+        const repl = {
+            toolTip: "Toggle a Calculator REPL", title: "repl",
+            icon: "calculator",
+            click: 'addOverlayWindow("ScriptingRepl", { x: 300, y: 100, width: 200, height: 200, title: "Scripting REPL" })',
+            developerFeature: true,
+        };
+
+        // novice : [collection, web, compare, audio, button, pres] 
+        return [collection, web, compare, screen, audio, button, pres, search, script, preview, repl];
 
     }
 
@@ -465,21 +526,24 @@ export class CurrentUserUtils {
             }
         }
         const buttons = CurrentUserUtils.creatorBtnDescriptors(doc).filter(d => !alreadyCreatedButtons?.includes(d.title));
-        const creatorBtns = buttons.map(({ title, toolTip, icon, ignoreClick, drag, click, ischecked, activeInkPen, backgroundColor, dragFactory }) => Docs.Create.FontIconDocument({
-            _nativeWidth: 50, _nativeHeight: 50, _width: 50, _height: 50,
-            icon,
-            title,
-            toolTip,
-            ignoreClick,
-            dropAction: "copy",
-            onDragStart: drag ? ScriptField.MakeFunction(drag) : undefined,
-            onClick: click ? ScriptField.MakeScript(click) : undefined,
-            ischecked: ischecked ? ComputedField.MakeFunction(ischecked) : undefined,
-            activeInkPen,
-            backgroundColor,
-            removeDropProperties: new List<string>(["dropAction"]),
-            dragFactory,
-        }));
+        const creatorBtns = buttons.map(({ title, toolTip, icon, ignoreClick, drag,
+            click, ischecked, activeInkPen, backgroundColor, dragFactory,
+            developerFeature }) => Docs.Create.FontIconDocument({
+                _nativeWidth: 50, _nativeHeight: 50, _width: 50, _height: 50,
+                icon,
+                title,
+                toolTip,
+                ignoreClick,
+                dropAction: "copy",
+                onDragStart: drag ? ScriptField.MakeFunction(drag) : undefined,
+                onClick: click ? ScriptField.MakeScript(click) : undefined,
+                ischecked: ischecked ? ComputedField.MakeFunction(ischecked) : undefined,
+                activeInkPen,
+                backgroundColor,
+                removeDropProperties: new List<string>(["dropAction"]),
+                dragFactory,
+                developerFeature,
+            }));
 
         if (dragCreatorSet === undefined) {
             doc.myItemCreators = new PrefetchProxy(Docs.Create.MasonryDocument(creatorBtns, {
diff --git a/src/client/util/SettingsManager.tsx b/src/client/util/SettingsManager.tsx
index 8124b7676..1a419b7c6 100644
--- a/src/client/util/SettingsManager.tsx
+++ b/src/client/util/SettingsManager.tsx
@@ -203,9 +203,12 @@ export default class SettingsManager extends React.Component<{}> {
 
     @computed get accountsContent() {
         return <div className="accounts-content">
-            <button onClick={this.googleAuthorize} value="data">{`Link to Google`}</button>
-            <button onClick={this.hypothesisAuthorize} value="data">{`Link to Hypothes.is`}</button>
-            <button onClick={() => GroupManager.Instance.open()}>Manage groups</button>
+            <button onClick={this.googleAuthorize}
+                style={{ paddingLeft: 20, paddingRight: 20, marginRight: 35 }}
+                value="data">{`Link to Google`}</button>
+            {/* <button onClick={this.hypothesisAuthorize} value="data">{`Link to Hypothes.is`}</button> */}
+            <button onClick={() => GroupManager.Instance.open()}
+                style={{ paddingLeft: 20, paddingRight: 20 }}>Manage groups</button>
         </div>;
     }
 
diff --git a/src/client/views/nodes/FontIconBox.tsx b/src/client/views/nodes/FontIconBox.tsx
index c0eb78d98..71832b0dc 100644
--- a/src/client/views/nodes/FontIconBox.tsx
+++ b/src/client/views/nodes/FontIconBox.tsx
@@ -64,14 +64,18 @@ export class FontIconBox extends DocComponent<FieldViewProps, FontIconDocument>(
         const backgroundColor = StrCast(this.layoutDoc._backgroundColor, StrCast(this.rootDoc.backgroundColor, this.props.backgroundColor?.(this.rootDoc)));
         const shape = StrCast(this.layoutDoc.iconShape, "round");
         const button = <button className={`menuButton-${shape}`} ref={this._ref} onContextMenu={this.specificContextMenu}
-            style={{ boxShadow: this.layoutDoc.ischecked ? `4px 4px 12px black` : undefined, backgroundColor: this.layoutDoc.iconShape === "square" ? backgroundColor : "" }}>
+            style={{
+                boxShadow: this.layoutDoc.ischecked ? `4px 4px 12px black` : undefined,
+                backgroundColor: this.layoutDoc.iconShape === "square" ? backgroundColor : "",
+                display: (this.layoutDoc.developerFeature && Doc.UserDoc().noviceMode) ? "none" : ""
+            }}>
             <div className="menuButton-wrap">
                 {<FontAwesomeIcon className={`menuButton-icon-${shape}`} icon={StrCast(this.dataDoc.icon, "user") as any} color={color}
                     size={this.layoutDoc.iconShape === "square" ? "sm" : "lg"} />}
                 {!label ? (null) : <div className="fontIconBox-label" style={{ color, backgroundColor }}> {label} </div>}
             </div>
         </button>;
-        return !this.layoutDoc.toolTip ? button :
+        return !this.layoutDoc.toolTip || (this.layoutDoc.developerFeature && Doc.UserDoc().noviceMode) ? button :
             <Tooltip title={<div className="dash-tooltip">{StrCast(this.layoutDoc.toolTip)}</div>}>
                 {button}
             </Tooltip>;
-- 
cgit v1.2.3-70-g09d2


From d6bbd8bd52231ffaea6d0f01c9e1447087e17914 Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Fri, 7 Aug 2020 22:48:37 -0400
Subject: code cleanup

---
 src/client/documents/Documents.ts                  |   1 +
 src/client/util/SettingsManager.scss               |   5 +
 src/client/util/SettingsManager.tsx                | 281 +++++++--------------
 .../collectionFreeForm/PropertiesView.tsx          |   2 +-
 4 files changed, 97 insertions(+), 192 deletions(-)

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

diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index a06b4a581..f902da0a2 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -94,6 +94,7 @@ export interface DocumentOptions {
     title?: string;
     label?: string;
     hidden?: boolean;
+    userDoc?: Doc; // the userDocument
     toolTip?: string; // tooltip to display on hover
     style?: string;
     page?: number;
diff --git a/src/client/util/SettingsManager.scss b/src/client/util/SettingsManager.scss
index 41bce8a1b..3bae095d0 100644
--- a/src/client/util/SettingsManager.scss
+++ b/src/client/util/SettingsManager.scss
@@ -217,6 +217,11 @@
         cursor: pointer;
     }
 
+    .logout-button {
+        right: 35;
+        position: absolute;
+    }
+
     .settings-content {
         background: #e4e4e4;
         border-radius: 6px;
diff --git a/src/client/util/SettingsManager.tsx b/src/client/util/SettingsManager.tsx
index 68ed32c0f..a6c5e518e 100644
--- a/src/client/util/SettingsManager.tsx
+++ b/src/client/util/SettingsManager.tsx
@@ -2,7 +2,6 @@ import { observable, runInAction, action, computed } from "mobx";
 import * as React from "react";
 import MainViewModal from "../views/MainViewModal";
 import { observer } from "mobx-react";
-import { library } from '@fortawesome/fontawesome-svg-core';
 import * as fa from '@fortawesome/free-solid-svg-icons';
 import { SelectionManager } from "./SelectionManager";
 import "./SettingsManager.scss";
@@ -22,220 +21,135 @@ const higflyout = require("@hig/flyout");
 export const { anchorPoints } = higflyout;
 export const Flyout = higflyout.default;
 
-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;
-    @observable private settingsContent = "password";
-    @observable private errorText = "";
-    @observable private successText = "";
-    @observable private playgroundMode = false;
     private curr_password_ref = React.createRef<HTMLInputElement>();
     private new_password_ref = React.createRef<HTMLInputElement>();
     private new_confirm_ref = React.createRef<HTMLInputElement>();
-
+    @observable private isOpen = false;
+    @observable private passwordResultText = "";
+    @observable private playgroundMode = false;
 
     @computed get backgroundColor() { return Doc.UserDoc().defaultColor; }
 
-    public open = action(() => {
-        SelectionManager.DeselectAll();
-        this.isOpen = true;
-    });
-
-    public close = action(() => {
-        this.isOpen = false;
-    });
-
     constructor(props: {}) {
         super(props);
         SettingsManager.Instance = this;
     }
 
-    @action
-    private dispatchRequest = async () => {
+    public close = action(() => this.isOpen = false);
+    public open = action(() => (this.isOpen = true) && SelectionManager.DeselectAll());
+
+    private googleAuthorize = action(() => GoogleAuthenticationManager.Instance.fetchOrGenerateAccessToken(true));
+    private hypothesisAuthorize = action(() => HypothesisAuthenticationManager.Instance.fetchAccessToken(true));
+    private changePassword = async () => {
         const curr_pass = this.curr_password_ref.current?.value;
         const new_pass = this.new_password_ref.current?.value;
         const new_confirm = this.new_confirm_ref.current?.value;
 
         if (!(curr_pass && new_pass && new_confirm)) {
-            this.changeAlertText("Hey, we're missing some fields!", "");
-            return;
-        }
-
-        const passwordBundle = {
-            curr_pass,
-            new_pass,
-            new_confirm
-        };
-
-        const { error } = await Networking.PostToServer('/internalResetPassword', passwordBundle);
-        if (error) {
-            this.changeAlertText("Uh oh! " + error[0].msg + "...", "");
-            return;
+            runInAction(() => this.passwordResultText = "Error: Hey, we're missing some fields!");
+        } else {
+            const passwordBundle = { curr_pass, new_pass, new_confirm };
+            const { error } = await Networking.PostToServer('/internalResetPassword', passwordBundle);
+            runInAction(() => this.passwordResultText = error ? "Error: " + error[0].msg + "..." : "Password successfully updated!");
         }
-
-        this.changeAlertText("", "Password successfully updated!");
-    }
-
-    @action
-    private changeAlertText = (errortxt: string, successtxt: string) => {
-        this.errorText = errortxt;
-        this.successText = successtxt;
-    }
-
-    @action
-    onClick = (event: any) => {
-        this.settingsContent = event.currentTarget.value;
-        this.errorText = "";
-        this.successText = "";
-    }
-    @action
-    noviceToggle = (event: any) => {
-        Doc.UserDoc().noviceMode = !Doc.UserDoc().noviceMode;
-    }
-    @action
-    googleAuthorize = (event: any) => {
-        GoogleAuthenticationManager.Instance.fetchOrGenerateAccessToken(true);
-    }
-    @action
-    hypothesisAuthorize = (event: any) => {
-        HypothesisAuthenticationManager.Instance.fetchAccessToken(true);
     }
 
-    @action
-    togglePlaygroundMode = () => {
+    @undoBatch selectUserMode = action((e: React.ChangeEvent) => Doc.UserDoc().noviceMode = (e.currentTarget as any)?.value === "Novice");
+    @undoBatch changeFontFamily = action((e: React.ChangeEvent) => Doc.UserDoc().fontFamily = (e.currentTarget as any).value);
+    @undoBatch changeFontSize = action((e: React.ChangeEvent) => Doc.UserDoc().fontSize = (e.currentTarget as any).value);
+    @undoBatch switchColor = action((color: ColorState) => Doc.UserDoc().defaultColor = String(color.hex));
+    @undoBatch
+    playgroundModeToggle = action(() => {
         this.playgroundMode = !this.playgroundMode;
-        if (this.playgroundMode) DocServer.Control.makeReadOnly();
+        if (this.playgroundMode) {
+            DocServer.Control.makeReadOnly();
+            addStyleSheetRule(SettingsManager._settingsStyle, "lm_header", { background: "pink !important" });
+        }
         else DocServer.Control.makeEditable();
+    });
 
-        addStyleSheetRule(SettingsManager._settingsStyle, "lm_header", { background: "pink !important" });
-    }
-
-    @action
-    changeMode = (e: any) => {
-        if (e.currentTarget.value === "Novice") {
-            Doc.UserDoc().noviceMode = true;
-        } else {
-            Doc.UserDoc().noviceMode = false;
-        }
-    }
+    @computed get preferencesContent() {
+        const colorBox = <SketchPicker onChange={this.switchColor} color={StrCast(this.backgroundColor)}
+            presetColors={['#D0021B', '#F5A623', '#F8E71C', '#8B572A', '#7ED321', '#417505',
+                '#9013FE', '#4A90E2', '#50E3C2', '#B8E986', '#000000', '#4A4A4A', '#9B9B9B',
+                '#FFFFFF', '#f1efeb', 'transparent']} />;
 
-    @action
-    changeFontFamily = (e: any) => {
-        Doc.UserDoc().fontFamily = e.currentTarget.value;
-    }
+        const colorFlyout = <div className="colorFlyout">
+            <Flyout anchorPoint={anchorPoints.LEFT_TOP} content={colorBox}>
+                <div className="colorFlyout-button" style={{ backgroundColor: StrCast(this.backgroundColor) }} onPointerDown={e => e.stopPropagation()} >
+                    <FontAwesomeIcon icon="palette" size="sm" color={StrCast(this.backgroundColor)} />
+                </div>
+            </Flyout>
+        </div>;
 
-    @action
-    changeFontSize = (e: any) => {
-        Doc.UserDoc().fontSize = e.currentTarget.value;
-    }
+        const fontFamilies = ["Times New Roman", "Arial", "Georgia", "Comic Sans MS", "Tahoma", "Impact", "Crimson Text"];
+        const fontSizes = ["7pt", "8pt", "9pt", "10pt", "12pt", "14pt", "16pt", "18pt", "20pt", "24pt", "32pt", "48pt", "72pt"];
 
-    @action @undoBatch
-    switchColor = (color: ColorState) => {
-        const val = String(color.hex);
-        Doc.UserDoc().defaultColor = val;
-        return true;
+        return <div className="preferences-content">
+            <div className="preferences-color">
+                <div className="preferences-color-text">Background Color</div>
+                {colorFlyout}
+            </div>
+            <div className="preferences-font">
+                <div className="preferences-font-text">Default Font</div>
+                <select className="font-select" onChange={this.changeFontFamily}>
+                    {fontFamilies.map(font => <option key={font} value={font} defaultValue={StrCast(Doc.UserDoc().fontFamily)}> {font} </option>)}
+                </select>
+                <select className="size-select" onChange={this.changeFontSize}>
+                    {fontSizes.map(size => <option key={size} value={size} defaultValue={StrCast(Doc.UserDoc().fontSize)}> {size} </option>)}
+                </select>
+            </div>
+        </div>;
     }
 
-    private get settingsInterface() {
-
-
-        const passwordContent = <div className="password-content">
+    @computed get passwordContent() {
+        return <div className="password-content">
             <div className="password-content-inputs">
                 <input className="password-inputs" type="password" placeholder="current password" ref={this.curr_password_ref} />
                 <input className="password-inputs" type="password" placeholder="new password" ref={this.new_password_ref} />
                 <input className="password-inputs" type="password" placeholder="confirm new password" ref={this.new_confirm_ref} />
             </div>
             <div className="password-content-buttons">
-                {this.errorText ? <div className="error-text">{this.errorText}</div> : undefined}
-                {this.successText ? <div className="success-text">{this.successText}</div> : undefined}
-                <button className="password-submit" onClick={this.dispatchRequest}>submit</button>
-                <a className="password-forgot" style={{ marginLeft: 65, marginTop: -20 }}
-                    href="/forgotPassword">forgot password?</a>
+                {!this.passwordResultText ?? <div className={`${this.passwordResultText.startsWith("Error") ? "error" : "success"}-text`}>{this.passwordResultText}</div>}
+                <button className="password-submit" onClick={this.changePassword}>submit</button>
+                <a className="password-forgot" href="/forgotPassword">forgot password?</a>
             </div>
         </div>;
+    }
 
-        const modesContent = <div className="modes-content">
-            <select className="modes-select"
-                onChange={e => this.changeMode(e)}>
-                <option key={"Novice"} value={"Novice"} selected={BoolCast(Doc.UserDoc().noviceMode)}>
-                    Novice
-                </option>
-                <option key={"Developer"} value={"Developer"} selected={!BoolCast(Doc.UserDoc().noviceMode)}>
-                    Developer
-                </option>
+    @computed get modesContent() {
+        return <div className="modes-content">
+            <select className="modes-select" onChange={this.selectUserMode} defaultValue={Doc.UserDoc().noviceMode ? "Novice" : "Developer"}>
+                <option key={"Novice"} value={"Novice"}> Novice </option>
+                <option key={"Developer"} value={"Developer"}> Developer</option>
             </select>
             <div className="modes-playground">
-                <input className="playground-check" type="checkbox"
-                    checked={this.playgroundMode}
-                    onChange={undoBatch(action(() => this.togglePlaygroundMode()))}
-                /><div className="playground-text">Playground Mode</div>
+                <input className="playground-check" type="checkbox" checked={this.playgroundMode} onChange={this.playgroundModeToggle} />
+                <div className="playground-text">Playground Mode</div>
             </div>
         </div>;
+    }
 
-        const accountsContent = <div className="accounts-content">
-            <button onClick={this.googleAuthorize} value="data">{`Link to Google`}</button>
-            <button onClick={this.hypothesisAuthorize} value="data">{`Link to Hypothes.is`}</button>
-            <button onClick={() => GroupManager.Instance.open()}>Manage groups</button>
-        </div>;
-
-        const colorBox = <SketchPicker onChange={this.switchColor}
-            presetColors={['#D0021B', '#F5A623', '#F8E71C', '#8B572A', '#7ED321', '#417505',
-                '#9013FE', '#4A90E2', '#50E3C2', '#B8E986', '#000000', '#4A4A4A', '#9B9B9B',
-                '#FFFFFF', '#f1efeb', 'transparent']}
-            color={StrCast(this.backgroundColor)} />;
-
-        const colorFlyout = <div className="colorFlyout">
-            <Flyout anchorPoint={anchorPoints.LEFT_TOP}
-                content={colorBox}>
-                <div>
-                    <div className="colorFlyout-button" style={{ backgroundColor: StrCast(this.backgroundColor) }}
-                        onPointerDown={e => e.stopPropagation()} >
-                        <FontAwesomeIcon icon="palette" size="sm" color={StrCast(this.backgroundColor)} />
-                    </div>
-                </div>
-            </Flyout>
-        </div>;
-
-        const fontFamilies: string[] = ["Times New Roman", "Arial", "Georgia", "Comic Sans MS", "Tahoma", "Impact", "Crimson Text"];
-        const fontSizes: string[] = ["7pt", "8pt", "9pt", "10pt", "12pt", "14pt", "16pt", "18pt", "20pt", "24pt", "32pt", "48pt", "72pt"];
-
-        const preferencesContent = <div className="preferences-content">
-            <div className="preferences-color">
-                <div className="preferences-color-text">Background Color</div> {colorFlyout}
-            </div>
-            <div className="preferences-font">
-                <div className="preferences-font-text">Default Font</div>
-                <select className="font-select"
-                    onChange={e => this.changeFontFamily(e)}>
-                    {fontFamilies.map((font) => {
-                        return <option key={font} value={font} selected={StrCast(Doc.UserDoc().fontFamily) === font}>
-                            {font}
-                        </option>;
-                    })}
-                </select>
-                <select className="size-select"
-                    onChange={e => this.changeFontSize(e)}>
-                    {fontSizes.map((size) => {
-                        return <option key={size} value={size} selected={StrCast(Doc.UserDoc().fontSize) === size}>
-                            {size}
-                        </option>;
-                    })}
-                </select>
-            </div>
+    @computed get accountsContent() {
+        return <div className="accounts-content">
+            <button onClick={this.googleAuthorize} value="data">Link to Google</button>
+            <button onClick={this.hypothesisAuthorize} value="data">Link to Hypothes.is</button>
+            <button onClick={GroupManager.Instance?.open}>Manage groups</button>
         </div>;
+    }
 
-        return (<div className="settings-interface">
+    private get settingsInterface() {
+        const pairs = [{ title: "Password", ele: this.passwordContent }, { title: "Modes", ele: this.modesContent },
+        { title: "Accounts", ele: this.accountsContent }, { title: "Preferences", ele: this.preferencesContent }];
+        return <div className="settings-interface">
             <div className="settings-top">
                 <div className="settings-title">Settings</div>
                 <div className="settings-username">{Doc.CurrentUserEmail}</div>
-                <button onClick={() => window.location.assign(Utils.prepend("/logout"))}
-                    style={{ right: 35, position: "absolute" }} >
+                <button className="logout-button" onClick={() => window.location.assign(Utils.prepend("/logout"))} >
                     {CurrentUserUtils.GuestWorkspace ? "Exit" : "Log Out"}
                 </button>
                 <div className="close-button" onClick={this.close}>
@@ -243,36 +157,21 @@ export default class SettingsManager extends React.Component<{}> {
                 </div>
             </div>
             <div className="settings-content">
-                <div className="settings-section">
-                    <div className="settings-section-title">Password</div>
-                    <div className="settings-section-context">{passwordContent}</div>
-                </div>
-                <div className="settings-section">
-                    <div className="settings-section-title">Modes</div>
-                    <div className="settings-section-context">{modesContent}</div>
-                </div>
-                <div className="settings-section">
-                    <div className="settings-section-title">Accounts</div>
-                    <div className="settings-section-context">{accountsContent}</div>
-                </div>
-                <div className="settings-section" style={{ paddingBottom: 4 }}>
-                    <div className="settings-section-title">Preferences</div>
-                    <div className="settings-section-context">{preferencesContent}</div>
+                {pairs.map(pair => <div className="settings-section" key={pair.title}>
+                    <div className="settings-section-title">{pair.title}</div>
+                    <div className="settings-section-context">{pair.ele}</div>
                 </div>
+                )}
             </div>
-        </div>);
+        </div>;
     }
 
     render() {
-        return (
-            <MainViewModal
-                contents={this.settingsInterface}
-                isDisplayed={this.isOpen}
-                interactive={true}
-                closeOnExternalClick={this.close}
-                dialogueBoxStyle={{ width: "600px", height: "340px" }}
-            />
-        );
+        return <MainViewModal
+            contents={this.settingsInterface}
+            isDisplayed={this.isOpen}
+            interactive={true}
+            closeOnExternalClick={this.close}
+            dialogueBoxStyle={{ width: "600px", height: "340px" }} />;
     }
-
 }
\ No newline at end of file
diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx
index 15900aa33..baa32e59b 100644
--- a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx
+++ b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx
@@ -248,7 +248,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
     }
 
     @observable transform: Transform = Transform.Identity();
-    getTransform = () => { return this.transform; }
+    getTransform = () => this.transform;
     propertiesDocViewRef = (ref: HTMLDivElement) => {
         const observer = new _global.ResizeObserver(action((entries: any) => {
             const cliRect = ref.getBoundingClientRect();
-- 
cgit v1.2.3-70-g09d2