From ba8549220295d03fb7eb7d7d31c90af72b30b1a6 Mon Sep 17 00:00:00 2001
From: Melissa Zhang <mzhang19096@gmail.com>
Date: Thu, 30 Jul 2020 10:38:57 -0700
Subject: remove unnecessary authentication/database stuff

---
 src/client/util/SettingsManager.tsx | 6 ------
 1 file changed, 6 deletions(-)

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

diff --git a/src/client/util/SettingsManager.tsx b/src/client/util/SettingsManager.tsx
index 90d59aa51..a9c2d5e15 100644
--- a/src/client/util/SettingsManager.tsx
+++ b/src/client/util/SettingsManager.tsx
@@ -12,7 +12,6 @@ import { CurrentUserUtils } from "./CurrentUserUtils";
 import { Utils } 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";
 
@@ -92,10 +91,6 @@ export default class SettingsManager extends React.Component<{}> {
     googleAuthorize = (event: any) => {
         GoogleAuthenticationManager.Instance.fetchOrGenerateAccessToken(true);
     }
-    @action
-    hypothesisAuthorize = (event: any) => {
-        HypothesisAuthenticationManager.Instance.fetchAccessToken(true);
-    }
 
     @action
     togglePlaygroundMode = () => {
@@ -118,7 +113,6 @@ export default class SettingsManager extends React.Component<{}> {
                         <button onClick={this.noviceToggle} value="data">{`Set ${Doc.UserDoc().noviceMode ? "developer" : "novice"} mode`}</button>
                         <button onClick={this.togglePlaygroundMode}>{`${this.playgroundMode ? "Disable" : "Enable"} playground mode`}</button>
                         <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={() => window.location.assign(Utils.prepend("/logout"))}>
                             {CurrentUserUtils.GuestWorkspace ? "Exit" : "Log Out"}
-- 
cgit v1.2.3-70-g09d2


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.scss | 30 +++++++++++++-
 src/client/util/SettingsManager.tsx  | 78 +++++++++++++++++++++++++++---------
 2 files changed, 87 insertions(+), 21 deletions(-)

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

diff --git a/src/client/util/SettingsManager.scss b/src/client/util/SettingsManager.scss
index 41bce8a1b..2d0fb4e95 100644
--- a/src/client/util/SettingsManager.scss
+++ b/src/client/util/SettingsManager.scss
@@ -30,10 +30,36 @@
 }
 
 .settings-username {
-    font-size: 14px;
+    font-size: 12px;
     padding-right: 15px;
     color: black;
-    margin-top: 10px;
+    margin-top: 4px;
+    /* right: 135; */
+    position: absolute;
+    left: 235;
+}
+
+.grey-submit {
+    width: 71.1875px;
+    align-self: center;
+    background: #75787c;
+    outline: none;
+    border-radius: 5px;
+    border: 0px;
+    color: #fcfbf7;
+    text-transform: uppercase;
+    letter-spacing: 2px;
+    font-size: 75%;
+    padding: 10px;
+    transition: transform 0.2s;
+    margin: 2px;
+    margin-left: 85px;
+    height: 32px;
+
+    &:hover {
+        cursor: not-allowed;
+    }
+
 }
 
 .settings-section {
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


From 3dab659503e98fe75a9c0671057771ff666d7e10 Mon Sep 17 00:00:00 2001
From: usodhi <61431818+usodhi@users.noreply.github.com>
Date: Mon, 10 Aug 2020 11:16:02 +0530
Subject: default acl private setting created + bugfix

---
 src/client/documents/Documents.ts               |  2 ++
 src/client/util/SettingsManager.scss            | 16 ++++++++++++----
 src/client/util/SettingsManager.tsx             |  6 +++++-
 src/client/views/DocComponent.tsx               |  3 ++-
 src/client/views/collections/CollectionView.tsx |  2 +-
 src/fields/Doc.ts                               |  2 ++
 6 files changed, 24 insertions(+), 7 deletions(-)

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

diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index 7b11cf0b7..a6a697574 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -577,6 +577,8 @@ export namespace Docs {
             viewDoc.author = Doc.CurrentUserEmail;
             viewDoc.type !== DocumentType.LINK && DocUtils.MakeLinkToActiveAudio(viewDoc);
 
+            if (Doc.UserDoc()?.defaultAclPrivate) viewDoc["ACL-Public"] = dataDoc["ACL-Public"] = "Not Shared";
+
             return Doc.assign(viewDoc, delegateProps, true);
         }
 
diff --git a/src/client/util/SettingsManager.scss b/src/client/util/SettingsManager.scss
index ca27cfa3c..01dda0aca 100644
--- a/src/client/util/SettingsManager.scss
+++ b/src/client/util/SettingsManager.scss
@@ -99,8 +99,8 @@
     display: flex;
 
     .modes-select {
-        width: 170px;
-        margin-right: 65px;
+        // width: 170px;
+        margin-right: 10px;
         color: black;
         border-radius: 5px;
 
@@ -109,10 +109,12 @@
         }
     }
 
-    .modes-playground {
+    .modes-playground,
+    .default-acl {
         display: flex;
 
-        .playground-check {
+        .playground-check,
+        .acl-check {
             margin-right: 5px;
 
             &:hover {
@@ -122,7 +124,13 @@
 
         .playground-text {
             color: black;
+            margin-right: 10px;
         }
+
+        .acl-text {
+            color: black;
+        }
+
     }
 }
 
diff --git a/src/client/util/SettingsManager.tsx b/src/client/util/SettingsManager.tsx
index 8b58880d4..513cece40 100644
--- a/src/client/util/SettingsManager.tsx
+++ b/src/client/util/SettingsManager.tsx
@@ -40,7 +40,7 @@ export default class SettingsManager extends React.Component<{}> {
     }
 
     public close = action(() => this.isOpen = false);
-    public open = action(() => (this.isOpen = true) && SelectionManager.DeselectAll());
+    public open = action(() => this.isOpen = true);
 
     private googleAuthorize = action(() => GoogleAuthenticationManager.Instance.fetchOrGenerateAccessToken(true));
     private changePassword = async () => {
@@ -136,6 +136,10 @@ export default class SettingsManager extends React.Component<{}> {
                 <input className="playground-check" type="checkbox" checked={this.playgroundMode} onChange={this.playgroundModeToggle} />
                 <div className="playground-text">Playground Mode</div>
             </div>
+            <div className="default-acl">
+                <input className="acl-check" type="checkbox" checked={BoolCast(Doc.UserDoc()?.defaultAclPrivate)} onChange={action(() => Doc.UserDoc().defaultAclPrivate = !Doc.UserDoc().defaultAclPrivate)} />
+                <div className="acl-text">Default access private</div>
+            </div>
         </div>;
     }
 
diff --git a/src/client/views/DocComponent.tsx b/src/client/views/DocComponent.tsx
index 831c246d1..eea133ed9 100644
--- a/src/client/views/DocComponent.tsx
+++ b/src/client/views/DocComponent.tsx
@@ -158,7 +158,8 @@ export function ViewBoxAnnotatableComponent<P extends ViewBoxAnnotatableProps, T
                     if (this.props.Document[AclSym]) {
                         added.forEach(d => {
                             for (const [key, value] of Object.entries(this.props.Document[AclSym])) {
-                                distributeAcls(key, this.AclMap.get(value) as SharingPermissions, d, true);
+                                if (d.author === key.substring(4).replace("_", ".") && !d.aliasOf) distributeAcls(key, SharingPermissions.Admin, d, true);
+                                else distributeAcls(key, this.AclMap.get(value) as SharingPermissions, d, true);
                             }
                         });
                     }
diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx
index 837ae7e86..0feec3fbd 100644
--- a/src/client/views/collections/CollectionView.tsx
+++ b/src/client/views/collections/CollectionView.tsx
@@ -151,7 +151,7 @@ export class CollectionView extends Touchable<FieldViewProps & CollectionViewCus
                 if (this.props.Document[AclSym]) {
                     added.forEach(d => {
                         for (const [key, value] of Object.entries(this.props.Document[AclSym])) {
-                            if (d.author === Doc.CurrentUserEmail && !d.aliasOf) distributeAcls(key, SharingPermissions.Admin, d, true);
+                            if (d.author === key.substring(4).replace("_", ".") && !d.aliasOf) distributeAcls(key, SharingPermissions.Admin, d, true);
                             else distributeAcls(key, this.AclMap.get(value) as SharingPermissions, d, true);
                         }
                     });
diff --git a/src/fields/Doc.ts b/src/fields/Doc.ts
index 6bfe91378..b535fea5a 100644
--- a/src/fields/Doc.ts
+++ b/src/fields/Doc.ts
@@ -770,6 +770,7 @@ export namespace Doc {
             }
         });
         copy.author = Doc.CurrentUserEmail;
+        Doc.UserDoc().defaultAclPrivate && (copy["ACL-Public"] = "Not Shared");
         return copy;
     }
 
@@ -794,6 +795,7 @@ export namespace Doc {
             const applied = ApplyTemplateTo(templateDoc, target, targetKey, templateDoc.title + "(..." + _applyCount++ + ")");
             target.layoutKey = targetKey;
             applied && (Doc.GetProto(applied).type = templateDoc.type);
+            Doc.UserDoc().defaultAclPrivate && (applied["ACL-Public"] = "Not Shared");
             return applied;
         }
         return undefined;
-- 
cgit v1.2.3-70-g09d2


From 03ae3477dac354eff9178dac701ee40e394434c9 Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Mon, 10 Aug 2020 10:37:07 -0400
Subject: fixed issues with presentationBox grabbing all keyboard events and
 preventing title edits among others. fixed runtime errors.  fixed
 groupManager to open again.

---
 src/client/util/SettingsManager.tsx                |  2 +-
 src/client/views/GlobalKeyHandler.ts               |  4 +++-
 .../views/collections/CollectionDockingView.tsx    | 12 +++++++----
 .../collectionFreeForm/MarqueeOptionsMenu.tsx      | 12 ++++-------
 src/client/views/nodes/PresBox.tsx                 | 24 ++++++++++++++++++----
 5 files changed, 36 insertions(+), 18 deletions(-)

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

diff --git a/src/client/util/SettingsManager.tsx b/src/client/util/SettingsManager.tsx
index 513cece40..e3b91925a 100644
--- a/src/client/util/SettingsManager.tsx
+++ b/src/client/util/SettingsManager.tsx
@@ -146,7 +146,7 @@ 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={GroupManager.Instance?.open}>Manage groups</button>
+            <button onClick={() => GroupManager.Instance?.open()}>Manage groups</button>
         </div>;
     }
 
diff --git a/src/client/views/GlobalKeyHandler.ts b/src/client/views/GlobalKeyHandler.ts
index 0ea02e3cb..182f6397c 100644
--- a/src/client/views/GlobalKeyHandler.ts
+++ b/src/client/views/GlobalKeyHandler.ts
@@ -108,7 +108,9 @@ export default class KeyManager {
                 GoogleAuthenticationManager.Instance.cancel();
                 SharingManager.Instance.close();
                 GroupManager.Instance.close();
-                CollectionFreeFormViewChrome.Instance.clearKeep();
+                CollectionFreeFormViewChrome.Instance?.clearKeep();
+                window.getSelection()?.empty();
+                document.body.focus();
                 break;
             case "delete":
             case "backspace":
diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx
index 7e096fa37..0c93b4e63 100644
--- a/src/client/views/collections/CollectionDockingView.tsx
+++ b/src/client/views/collections/CollectionDockingView.tsx
@@ -513,7 +513,11 @@ export class CollectionDockingView extends React.Component<SubCollectionViewProp
 
             const doc = await DocServer.GetRefField(tab.contentItem.config.props.documentId) as Doc;
             if (doc instanceof Doc) {
-                tab.titleElement[0].onclick = (e: any) => tab.titleElement[0].focus();
+                tab.titleElement[0].onclick = (e: any) => {
+                    if (Date.now() - tab.titleElement[0].lastClick < 1000) tab.titleElement[0].select();
+                    tab.titleElement[0].lastClick = Date.now();
+                    tab.titleElement[0].focus();
+                }
                 tab.titleElement[0].onchange = (e: any) => {
                     tab.titleElement[0].size = e.currentTarget.value.length + 1;
                     Doc.GetProto(doc).title = e.currentTarget.value, true;
@@ -691,8 +695,8 @@ export class DockedFrameRenderer extends React.Component<DockedFrameProps> {
         return (this.props as any).glContainer.parent.parent;
     }
     get _tab(): any {
-        const tab = (this.props as any).glContainer.tab.element[0] as HTMLElement;
-        return tab.getElementsByClassName("lm_title")?.[0];
+        const tab = (this.props as any).glContainer.tab?.element[0] as HTMLElement;
+        return tab?.getElementsByClassName("lm_title")?.[0];
     }
     constructor(props: any) {
         super(props);
@@ -757,7 +761,7 @@ export class DockedFrameRenderer extends React.Component<DockedFrameProps> {
         this._tabReaction = reaction(() => ({ views: SelectionManager.SelectedDocuments(), color: StrCast(this._document?._backgroundColor, "white") }),
             (data) => {
                 const selected = data.views.some(v => Doc.AreProtosEqual(v.props.Document, this._document));
-                this._tab.style.backgroundColor = selected ? data.color : "";
+                this._tab && (this._tab.style.backgroundColor = selected ? data.color : "");
             }
         );
     }
diff --git a/src/client/views/collections/collectionFreeForm/MarqueeOptionsMenu.tsx b/src/client/views/collections/collectionFreeForm/MarqueeOptionsMenu.tsx
index d27ca7c3a..f1df7998b 100644
--- a/src/client/views/collections/collectionFreeForm/MarqueeOptionsMenu.tsx
+++ b/src/client/views/collections/collectionFreeForm/MarqueeOptionsMenu.tsx
@@ -25,34 +25,30 @@ export default class MarqueeOptionsMenu extends AntimodeMenu {
 
     render() {
         const buttons = [
-            <Tooltip title={<><div className="dash-tooltip">Create a Collection</div></>} placement="bottom">
+            <Tooltip key="group" title={<><div className="dash-tooltip">Create a Collection</div></>} placement="bottom">
                 <button
                     className="antimodeMenu-button"
-                    key="group"
                     onPointerDown={this.createCollection}>
                     <FontAwesomeIcon icon="object-group" size="lg" />
                 </button>
             </Tooltip>,
-            <Tooltip title={<><div className="dash-tooltip">Summarize Documents</div></>} placement="bottom">
+            <Tooltip key="summarize" title={<><div className="dash-tooltip">Summarize Documents</div></>} placement="bottom">
                 <button
                     className="antimodeMenu-button"
-                    key="summarize"
                     onPointerDown={this.summarize}>
                     <FontAwesomeIcon icon="compress-arrows-alt" size="lg" />
                 </button>
             </Tooltip>,
-            <Tooltip title={<><div className="dash-tooltip">Delete Documents</div></>} placement="bottom">
+            <Tooltip key="delete" title={<><div className="dash-tooltip">Delete Documents</div></>} placement="bottom">
                 <button
                     className="antimodeMenu-button"
-                    key="delete"
                     onPointerDown={this.delete}>
                     <FontAwesomeIcon icon="trash-alt" size="lg" />
                 </button>
             </Tooltip>,
-            <Tooltip title={<><div className="dash-tooltip">Change to Text</div></>} placement="bottom">
+            <Tooltip key="inkToText" title={<><div className="dash-tooltip">Change to Text</div></>} placement="bottom">
                 <button
                     className="antimodeMenu-button"
-                    key="inkToText"
                     onPointerDown={this.inkToText}>
                     <FontAwesomeIcon icon="font" size="lg" />
                 </button>
diff --git a/src/client/views/nodes/PresBox.tsx b/src/client/views/nodes/PresBox.tsx
index b7af4683e..849fc4076 100644
--- a/src/client/views/nodes/PresBox.tsx
+++ b/src/client/views/nodes/PresBox.tsx
@@ -83,6 +83,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
     }
     @computed get isPres(): boolean {
         if (this.selectedDoc?.type === DocumentType.PRES) {
+            document.removeEventListener("keydown", this.keyEvents, true);
             document.addEventListener("keydown", this.keyEvents, true);
             return true;
         } else {
@@ -91,6 +92,9 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
         }
     }
     @computed get selectedDoc() { return this.selectedDocumentView?.rootDoc; }
+    componentWillUnmount() {
+        document.removeEventListener("keydown", this.keyEvents, true);
+    }
 
     componentDidMount() {
         this.rootDoc.presBox = this.rootDoc;
@@ -517,29 +521,41 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
     // Key for when the presentaiton is active (according to Selection Manager)
     @action
     keyEvents = (e: KeyboardEvent) => {
-        e.stopPropagation();
-        e.preventDefault();
-
+        let handled = false;
+        const anchorNode = document.activeElement as HTMLDivElement;
+        if (anchorNode && anchorNode.className?.includes("lm_title")) return;
         if (e.keyCode === 27) { // Escape key
             if (this.layoutDoc.presStatus === "edit") this._selectedArray = [];
             else this.layoutDoc.presStatus = "edit";
+            handled = true;
         } if ((e.metaKey || e.altKey) && e.keyCode === 65) { // Ctrl-A to select all
-            if (this.layoutDoc.presStatus === "edit") this._selectedArray = this.childDocs;
+            if (this.layoutDoc.presStatus === "edit") {
+                this._selectedArray = this.childDocs;
+                handled = true;
+            }
         } if (e.keyCode === 37 || e.keyCode === 38) { // left(37) / a(65) / up(38) to go back
             this.back();
+            handled = true;
         } if (e.keyCode === 39 || e.keyCode === 40) { // right (39) / d(68) / down(40) to go to next
             this.next();
+            handled = true;
         } if (e.keyCode === 32) { // spacebar to 'present' or autoplay
             if (this.layoutDoc.presStatus !== "edit") this.startAutoPres(0);
             else this.layoutDoc.presStatus = "manual";
+            handled = true;
         }
         if (e.keyCode === 8) { // delete selected items
             if (this.layoutDoc.presStatus === "edit") {
                 this._selectedArray.forEach((doc, i) => {
                     this.removeDocument(doc);
                 });
+                handled = true;
             }
         }
+        if (handled) {
+            e.stopPropagation();
+            e.preventDefault();
+        }
     }
 
     /**
-- 
cgit v1.2.3-70-g09d2