From 2438ff3fcc86d5c739190cd16c03efd06797b40a Mon Sep 17 00:00:00 2001
From: anika-ahluwalia <anika.ahluwalia@gmail.com>
Date: Tue, 4 Aug 2020 20:20:35 -0500
Subject: structure for new settings

---
 src/client/util/SettingsManager.tsx | 220 +++++++++++++++++++++++++++++-------
 1 file changed, 182 insertions(+), 38 deletions(-)

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

diff --git a/src/client/util/SettingsManager.tsx b/src/client/util/SettingsManager.tsx
index 6276fae96..9282559e2 100644
--- a/src/client/util/SettingsManager.tsx
+++ b/src/client/util/SettingsManager.tsx
@@ -15,6 +15,12 @@ import GroupManager from "./GroupManager";
 import HypothesisAuthenticationManager from "../apis/HypothesisAuthenticationManager";
 import GoogleAuthenticationManager from "../apis/GoogleAuthenticationManager";
 import { DocServer } from "../DocServer";
+import { BoolCast } from "../../fields/Types";
+import { undoBatch } from "./UndoManager";
+import { ColorState, SketchPicker } from "react-color";
+const higflyout = require("@hig/flyout");
+export const { anchorPoints } = higflyout;
+export const Flyout = higflyout.default;
 
 library.add(fa.faTimes);
 
@@ -33,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 backgroundColor = "white";
+
     public open = action(() => {
         SelectionManager.DeselectAll();
         this.isOpen = true;
@@ -107,50 +116,183 @@ export default class SettingsManager extends React.Component<{}> {
         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;
+        }
+    }
+
+    @action @undoBatch
+    switchColor = (color: ColorState) => {
+        const val = String(color.hex);
+        this.backgroundColor = val;
+        return true;
+    }
+
     private get settingsInterface() {
-        return (
-            <div className={"settings-interface"}>
-                <div className="settings-heading">
-                    <h1>settings</h1>
-                    <div className={"close-button"} onClick={this.close}>
-                        <FontAwesomeIcon icon={fa.faTimes} color="black" size={"lg"} />
-                    </div>
+
+        const oldSettings = <div className={"settings-interface"}>
+            <div className="settings-heading">
+                <h1>Settings</h1>
+                <div className={"close-button"} onClick={this.close}>
+                    <FontAwesomeIcon icon={fa.faTimes} color="black" size={"lg"} />
+                </div>
+            </div>
+            <div className="settings-body">
+                <div className="settings-type">
+                    <button onClick={this.onClick} value="password">reset password</button>
+                    <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"}
+                    </button>
                 </div>
-                <div className="settings-body">
-                    <div className="settings-type">
-                        <button onClick={this.onClick} value="password">reset password</button>
-                        <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"}
-                        </button>
+                {this.settingsContent === "password" ?
+                    <div className="settings-content">
+                        <input placeholder="current password" ref={this.curr_password_ref} />
+                        <input placeholder="new password" ref={this.new_password_ref} />
+                        <input placeholder="confirm new password" ref={this.new_confirm_ref} />
+                        {this.errorText ? <div className="error-text">{this.errorText}</div> : undefined}
+                        {this.successText ? <div className="success-text">{this.successText}</div> : undefined}
+                        <button onClick={this.dispatchRequest}>submit</button>
+                        <a style={{ marginLeft: 65, marginTop: -20 }} href="/forgotPassword">forgot password?</a>
+
+                    </div>
+                    : undefined}
+                {this.settingsContent === "data" ?
+                    <div className="settings-content">
+                        <p>WARNING: <br />
+                        THIS WILL ERASE ALL YOUR CURRENT DOCUMENTS STORED ON DASH. IF YOU WISH TO PROCEED, CLICK THE BUTTON BELOW.</p>
+                        <button className="delete-button">DELETE</button>
+                    </div>
+                    : undefined}
+            </div>
+
+        </div>;
+
+
+        const passwordContent = <div className="password-content">
+            <div className="password-content-inputs">
+                <input className="password-inputs" placeholder="current password" ref={this.curr_password_ref} />
+                <input className="password-inputs" placeholder="new password" ref={this.new_password_ref} />
+                <input className="password-inputs" 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>
+            </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>
+            </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>
+            </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={this.backgroundColor} />;
+
+        const colorFlyout = <div className="colorFlyout">
+            <Flyout anchorPoint={anchorPoints.LEFT_TOP}
+                content={colorBox}>
+                <div>
+                    <div className="colorFlyout-button" style={{ backgroundColor: this.backgroundColor }}
+                        onPointerDown={e => e.stopPropagation()} >
+                        <FontAwesomeIcon icon="palette" size="sm" color={this.backgroundColor} />
                     </div>
-                    {this.settingsContent === "password" ?
-                        <div className="settings-content">
-                            <input placeholder="current password" ref={this.curr_password_ref} />
-                            <input placeholder="new password" ref={this.new_password_ref} />
-                            <input placeholder="confirm new password" ref={this.new_confirm_ref} />
-                            {this.errorText ? <div className="error-text">{this.errorText}</div> : undefined}
-                            {this.successText ? <div className="success-text">{this.successText}</div> : undefined}
-                            <button onClick={this.dispatchRequest}>submit</button>
-                            <a style={{ marginLeft: 65, marginTop: -20 }} href="/forgotPassword">forgot password?</a>
-
-                        </div>
-                        : undefined}
-                    {this.settingsContent === "data" ?
-                        <div className="settings-content">
-                            <p>WARNING: <br />
-                                THIS WILL ERASE ALL YOUR CURRENT DOCUMENTS STORED ON DASH. IF YOU WISH TO PROCEED, CLICK THE BUTTON BELOW.</p>
-                            <button className="delete-button">DELETE</button>
-                        </div>
-                        : undefined}
                 </div>
+            </Flyout>
+        </div>;
 
+        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.changeMode(e)}>
+                    <option key={"Times New Roman"} value={"Times New Roman"} selected={BoolCast(Doc.UserDoc().noviceMode)}>
+                        Times New Roman
+                    </option>
+                    <option key={"Georgia"} value={"Georgia"} selected={!BoolCast(Doc.UserDoc().noviceMode)}>
+                        Georgia
+                    </option>
+                    <option key={"Georgia"} value={"Georgia"} selected={!BoolCast(Doc.UserDoc().noviceMode)}>
+                        Georgia
+                    </option>
+                </select>
+                <select className="size-select"
+                    onChange={e => this.changeMode(e)}>
+                    <option key={"5px"} value={"5px"} selected={BoolCast(Doc.UserDoc().noviceMode)}>
+                        5px
+                    </option>
+                    <option key={"8px"} value={"8px"} selected={!BoolCast(Doc.UserDoc().noviceMode)}>
+                        8px
+                    </option>
+                </select>
+            </div>
+        </div>;
+
+        return (<div className="settings-interface">
+            <div className="settings-top">
+                <div className="settings-title">Settings</div>
+                <button onClick={() => window.location.assign(Utils.prepend("/logout"))}>
+                    {CurrentUserUtils.GuestWorkspace ? "Exit" : "Log Out"}
+                </button>
+                <div className="close-button" onClick={this.close}>
+                    <FontAwesomeIcon icon={fa.faTimes} color="black" size={"lg"} />
+                </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>
+                </div>
+            </div>
+        </div>);
     }
 
     render() {
@@ -160,6 +302,8 @@ export default class SettingsManager extends React.Component<{}> {
                 isDisplayed={this.isOpen}
                 interactive={true}
                 closeOnExternalClick={this.close}
+                width={600}
+                height={340}
             />
         );
     }
-- 
cgit v1.2.3-70-g09d2


From 7f8cea1a3b5aa261144abe20ca0d7129be1fb1f5 Mon Sep 17 00:00:00 2001
From: anika-ahluwalia <anika.ahluwalia@gmail.com>
Date: Tue, 4 Aug 2020 22:53:44 -0500
Subject: finishing touches on settings

---
 src/client/util/CurrentUserUtils.ts  |  1 +
 src/client/util/SettingsManager.scss | 71 +++++++-------------------
 src/client/util/SettingsManager.tsx  | 98 ++++++++++++------------------------
 src/client/views/MainView.tsx        |  4 ++
 4 files changed, 54 insertions(+), 120 deletions(-)

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

diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index 8023df8b4..95e02b5fd 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -890,6 +890,7 @@ export class CurrentUserUtils {
         doc.fontFamily = StrCast(doc.fontFamily, "Arial");
         doc.fontColor = StrCast(doc.fontColor, "black");
         doc.fontHighlight = StrCast(doc.fontHighlight, "");
+        doc.defaultColor = StrCast(doc.defaultColor, "white");
         doc["constants-snapThreshold"] = NumCast(doc["constants-snapThreshold"], 10); //
         doc["constants-dragThreshold"] = NumCast(doc["constants-dragThreshold"], 4); //
         Utils.DRAG_THRESHOLD = NumCast(doc["constants-dragThreshold"]);
diff --git a/src/client/util/SettingsManager.scss b/src/client/util/SettingsManager.scss
index 075879198..2a4a4241c 100644
--- a/src/client/util/SettingsManager.scss
+++ b/src/client/util/SettingsManager.scss
@@ -93,6 +93,10 @@
         margin-right: 65px;
         color: black;
         border-radius: 5px;
+
+        &:hover{
+            cursor: pointer;
+        }
     }
 
     .modes-playground {
@@ -100,6 +104,9 @@
 
         .playground-check {
             margin-right: 5px;
+            &:hover{
+                cursor: pointer;
+            }
         }
 
         .playground-text {
@@ -112,6 +119,10 @@
     margin-top: 2px;
     margin-right: 25px;
 
+    &:hover{
+        cursor: pointer;
+    }
+
     .colorFlyout-button {
         width: 20px;
         height: 20px;
@@ -151,6 +162,9 @@
             font-size: 9;
             margin-right: 6;
             border-radius: 5px;
+            &:hover{
+                cursor: pointer;
+            }
         }
 
         .size-select {
@@ -158,6 +172,9 @@
             color: black;
             font-size: 9;
             border-radius: 5px;
+            &:hover{
+                cursor: pointer;
+            }
         }
     }
 }
@@ -190,10 +207,6 @@
         cursor: pointer;
     }
 
-    // .settings-heading {
-    //     letter-spacing: .5em;
-    // }
-
     .settings-content {
         background: #e4e4e4;
         border-radius: 6px;
@@ -206,56 +219,6 @@
         margin-bottom: 10px;
     }
 
-    // .settings-body {
-    //     display: flex;
-    //     justify-content: space-between;
-    //     margin-top: -10;
-
-    //     .settings-type {
-    //         display: flex;
-    //         flex-direction: column;
-    //         flex-basis: 45%;
-
-    //     }
-
-    //     .settings-content {
-    //         background: whitesmoke;
-    //         border-radius: 6px;
-
-    //         // padding-left: 1em;
-    //         // padding-right: 1em;
-    //         // display: flex;
-    //         // flex-direction: column;
-    //         // flex-basis: 70%;
-    //         // justify-content: space-around;
-    //         // text-align: left;
-
-    //         ::placeholder {
-    //             color: $intermediate-color;
-    //         }
-
-    //         input {
-    //             border-radius: 5px;
-    //             border: none;
-    //             padding: 4px;
-    //             min-width: 100%;
-    //             margin: 2px 0;
-    //         }
-
-    //         .error-text {
-    //             color: #C40233;
-    //         }
-
-    //         .success-text {
-    //             color: #009F6B;
-    //         }
-
-    //         p {
-    //             padding: 0 0 .1em .2em;
-    //         }
-
-    //     }
-    // }
 
     .error-text {
         color: #C40233;
diff --git a/src/client/util/SettingsManager.tsx b/src/client/util/SettingsManager.tsx
index 9282559e2..a12cc2cb6 100644
--- a/src/client/util/SettingsManager.tsx
+++ b/src/client/util/SettingsManager.tsx
@@ -1,4 +1,4 @@
-import { observable, runInAction, action } from "mobx";
+import { observable, runInAction, action, computed } from "mobx";
 import * as React from "react";
 import MainViewModal from "../views/MainViewModal";
 import { observer } from "mobx-react";
@@ -15,7 +15,7 @@ import GroupManager from "./GroupManager";
 import HypothesisAuthenticationManager from "../apis/HypothesisAuthenticationManager";
 import GoogleAuthenticationManager from "../apis/GoogleAuthenticationManager";
 import { DocServer } from "../DocServer";
-import { BoolCast } from "../../fields/Types";
+import { BoolCast, StrCast, NumCast } from "../../fields/Types";
 import { undoBatch } from "./UndoManager";
 import { ColorState, SketchPicker } from "react-color";
 const higflyout = require("@hig/flyout");
@@ -40,7 +40,7 @@ export default class SettingsManager extends React.Component<{}> {
     private new_confirm_ref = React.createRef<HTMLInputElement>();
 
 
-    @observable private backgroundColor = "white";
+    @computed get backgroundColor() { return Doc.UserDoc().defaultColor; }
 
     public open = action(() => {
         SelectionManager.DeselectAll();
@@ -125,57 +125,25 @@ export default class SettingsManager extends React.Component<{}> {
         }
     }
 
+    @action
+    changeFontFamily = (e: any) => {
+        Doc.UserDoc().fontFamily = e.currentTarget.value;
+    }
+
+    @action
+    changeFontSize = (e: any) => {
+        Doc.UserDoc().fontSize = e.currentTarget.value;
+    }
+
     @action @undoBatch
     switchColor = (color: ColorState) => {
         const val = String(color.hex);
-        this.backgroundColor = val;
+        Doc.UserDoc().defaultColor = val;
         return true;
     }
 
     private get settingsInterface() {
 
-        const oldSettings = <div className={"settings-interface"}>
-            <div className="settings-heading">
-                <h1>Settings</h1>
-                <div className={"close-button"} onClick={this.close}>
-                    <FontAwesomeIcon icon={fa.faTimes} color="black" size={"lg"} />
-                </div>
-            </div>
-            <div className="settings-body">
-                <div className="settings-type">
-                    <button onClick={this.onClick} value="password">reset password</button>
-                    <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"}
-                    </button>
-                </div>
-                {this.settingsContent === "password" ?
-                    <div className="settings-content">
-                        <input placeholder="current password" ref={this.curr_password_ref} />
-                        <input placeholder="new password" ref={this.new_password_ref} />
-                        <input placeholder="confirm new password" ref={this.new_confirm_ref} />
-                        {this.errorText ? <div className="error-text">{this.errorText}</div> : undefined}
-                        {this.successText ? <div className="success-text">{this.successText}</div> : undefined}
-                        <button onClick={this.dispatchRequest}>submit</button>
-                        <a style={{ marginLeft: 65, marginTop: -20 }} href="/forgotPassword">forgot password?</a>
-
-                    </div>
-                    : undefined}
-                {this.settingsContent === "data" ?
-                    <div className="settings-content">
-                        <p>WARNING: <br />
-                        THIS WILL ERASE ALL YOUR CURRENT DOCUMENTS STORED ON DASH. IF YOU WISH TO PROCEED, CLICK THE BUTTON BELOW.</p>
-                        <button className="delete-button">DELETE</button>
-                    </div>
-                    : undefined}
-            </div>
-
-        </div>;
-
 
         const passwordContent = <div className="password-content">
             <div className="password-content-inputs">
@@ -220,20 +188,23 @@ export default class SettingsManager extends React.Component<{}> {
             presetColors={['#D0021B', '#F5A623', '#F8E71C', '#8B572A', '#7ED321', '#417505',
                 '#9013FE', '#4A90E2', '#50E3C2', '#B8E986', '#000000', '#4A4A4A', '#9B9B9B',
                 '#FFFFFF', '#f1efeb', 'transparent']}
-            color={this.backgroundColor} />;
+            color={StrCast(this.backgroundColor)} />;
 
         const colorFlyout = <div className="colorFlyout">
             <Flyout anchorPoint={anchorPoints.LEFT_TOP}
                 content={colorBox}>
                 <div>
-                    <div className="colorFlyout-button" style={{ backgroundColor: this.backgroundColor }}
+                    <div className="colorFlyout-button" style={{ backgroundColor: StrCast(this.backgroundColor) }}
                         onPointerDown={e => e.stopPropagation()} >
-                        <FontAwesomeIcon icon="palette" size="sm" color={this.backgroundColor} />
+                        <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: number[] = [7, 8, 9, 10, 12, 14, 16, 18, 20, 24, 32, 48, 72];
+
         const preferencesContent = <div className="preferences-content">
             <div className="preferences-color">
                 <div className="preferences-color-text">Background Color</div> {colorFlyout}
@@ -241,25 +212,20 @@ export default class SettingsManager extends React.Component<{}> {
             <div className="preferences-font">
                 <div className="preferences-font-text">Default Font</div>
                 <select className="font-select"
-                    onChange={e => this.changeMode(e)}>
-                    <option key={"Times New Roman"} value={"Times New Roman"} selected={BoolCast(Doc.UserDoc().noviceMode)}>
-                        Times New Roman
-                    </option>
-                    <option key={"Georgia"} value={"Georgia"} selected={!BoolCast(Doc.UserDoc().noviceMode)}>
-                        Georgia
-                    </option>
-                    <option key={"Georgia"} value={"Georgia"} selected={!BoolCast(Doc.UserDoc().noviceMode)}>
-                        Georgia
-                    </option>
+                    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.changeMode(e)}>
-                    <option key={"5px"} value={"5px"} selected={BoolCast(Doc.UserDoc().noviceMode)}>
-                        5px
-                    </option>
-                    <option key={"8px"} value={"8px"} selected={!BoolCast(Doc.UserDoc().noviceMode)}>
-                        8px
-                    </option>
+                    onChange={e => this.changeFontSize(e)}>
+                    {fontSizes.map((size) => {
+                        return <option key={size} value={size} selected={NumCast(Doc.UserDoc().fontSize) === size}>
+                            {size + "pt"}
+                        </option>;
+                    })}
                 </select>
             </div>
         </div>;
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index e9b9be49d..bbf36a04f 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -313,6 +313,10 @@ export class MainView extends React.Component {
 
     defaultBackgroundColors = (doc: Opt<Doc>) => {
         if (this.panelContent === doc?.title) return "lightgrey";
+
+        if (doc?.type === DocumentType.COL) {
+            return StrCast(Doc.UserDoc().defaultColor);
+        }
         if (this.darkScheme) {
             switch (doc?.type) {
                 case DocumentType.FONTICON: return "white";
-- 
cgit v1.2.3-70-g09d2


From 0d6a6991ae39406f80530bcaaa6e5b328bd64b67 Mon Sep 17 00:00:00 2001
From: anika-ahluwalia <anika.ahluwalia@gmail.com>
Date: Wed, 5 Aug 2020 12:59:07 -0500
Subject: UI changes and bug fixes found with UV

---
 src/client/util/CurrentUserUtils.ts                |  3 ++-
 src/client/util/SettingsManager.scss               | 20 ++++++++++++----
 src/client/util/SettingsManager.tsx                | 13 +++++-----
 src/client/views/MainView.tsx                      |  7 ++++++
 src/client/views/MainViewModal.tsx                 |  6 +----
 src/client/views/PropertiesButtons.tsx             | 28 +++++++++++++++++-----
 src/client/views/collections/CollectionMenu.tsx    |  9 +++----
 .../collectionFreeForm/PropertiesView.tsx          |  3 +--
 8 files changed, 60 insertions(+), 29 deletions(-)

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

diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index 95e02b5fd..630952ccf 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -8,7 +8,7 @@ import { Doc, DocListCast, DocListCastAsync, DataSym } from "../../fields/Doc";
 import { List } from "../../fields/List";
 import { listSpec } from "../../fields/Schema";
 import { ScriptField, ComputedField } from "../../fields/ScriptField";
-import { Cast, PromiseValue, StrCast, NumCast } from "../../fields/Types";
+import { Cast, PromiseValue, StrCast, NumCast, BoolCast } from "../../fields/Types";
 import { nullAudio } from "../../fields/URLField";
 import { DragManager } from "./DragManager";
 import { Scripting } from "./Scripting";
@@ -891,6 +891,7 @@ export class CurrentUserUtils {
         doc.fontColor = StrCast(doc.fontColor, "black");
         doc.fontHighlight = StrCast(doc.fontHighlight, "");
         doc.defaultColor = StrCast(doc.defaultColor, "white");
+        doc.noviceMode = BoolCast(doc.noviceMode, true);
         doc["constants-snapThreshold"] = NumCast(doc["constants-snapThreshold"], 10); //
         doc["constants-dragThreshold"] = NumCast(doc["constants-dragThreshold"], 4); //
         Utils.DRAG_THRESHOLD = NumCast(doc["constants-dragThreshold"]);
diff --git a/src/client/util/SettingsManager.scss b/src/client/util/SettingsManager.scss
index 2a4a4241c..41bce8a1b 100644
--- a/src/client/util/SettingsManager.scss
+++ b/src/client/util/SettingsManager.scss
@@ -25,8 +25,15 @@
 .settings-title {
     font-size: 25px;
     font-weight: bold;
+    padding-right: 10px;
+    color: black;
+}
+
+.settings-username {
+    font-size: 14px;
     padding-right: 15px;
     color: black;
+    margin-top: 10px;
 }
 
 .settings-section {
@@ -94,7 +101,7 @@
         color: black;
         border-radius: 5px;
 
-        &:hover{
+        &:hover {
             cursor: pointer;
         }
     }
@@ -104,7 +111,8 @@
 
         .playground-check {
             margin-right: 5px;
-            &:hover{
+
+            &:hover {
                 cursor: pointer;
             }
         }
@@ -119,7 +127,7 @@
     margin-top: 2px;
     margin-right: 25px;
 
-    &:hover{
+    &:hover {
         cursor: pointer;
     }
 
@@ -162,7 +170,8 @@
             font-size: 9;
             margin-right: 6;
             border-radius: 5px;
-            &:hover{
+
+            &:hover {
                 cursor: pointer;
             }
         }
@@ -172,7 +181,8 @@
             color: black;
             font-size: 9;
             border-radius: 5px;
-            &:hover{
+
+            &:hover {
                 cursor: pointer;
             }
         }
diff --git a/src/client/util/SettingsManager.tsx b/src/client/util/SettingsManager.tsx
index a12cc2cb6..fce28a466 100644
--- a/src/client/util/SettingsManager.tsx
+++ b/src/client/util/SettingsManager.tsx
@@ -147,9 +147,9 @@ export default class SettingsManager extends React.Component<{}> {
 
         const passwordContent = <div className="password-content">
             <div className="password-content-inputs">
-                <input className="password-inputs" placeholder="current password" ref={this.curr_password_ref} />
-                <input className="password-inputs" placeholder="new password" ref={this.new_password_ref} />
-                <input className="password-inputs" placeholder="confirm new password" ref={this.new_confirm_ref} />
+                <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}
@@ -233,7 +233,9 @@ export default class SettingsManager extends React.Component<{}> {
         return (<div className="settings-interface">
             <div className="settings-top">
                 <div className="settings-title">Settings</div>
-                <button onClick={() => window.location.assign(Utils.prepend("/logout"))}>
+                <div className="settings-username">{Doc.CurrentUserEmail}</div>
+                <button onClick={() => window.location.assign(Utils.prepend("/logout"))}
+                    style={{ right: 35, position: "absolute" }} >
                     {CurrentUserUtils.GuestWorkspace ? "Exit" : "Log Out"}
                 </button>
                 <div className="close-button" onClick={this.close}>
@@ -268,8 +270,7 @@ export default class SettingsManager extends React.Component<{}> {
                 isDisplayed={this.isOpen}
                 interactive={true}
                 closeOnExternalClick={this.close}
-                width={600}
-                height={340}
+                dialogueBoxStyle={{ width: "600px", height: "340px" }}
             />
         );
     }
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index bbf36a04f..4bbcddd79 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -315,6 +315,12 @@ export class MainView extends React.Component {
         if (this.panelContent === doc?.title) return "lightgrey";
 
         if (doc?.type === DocumentType.COL) {
+            if (doc.title === "Basic Item Creators" || doc.title === "sidebar-tools"
+                || doc.title === "sidebar-recentlyClosed" || doc.title === "sidebar-catalog"
+                || doc.title === "Mobile Uploads" || doc.title === "COLLECTION_PROTO"
+                || doc.title === "Advanced Item Prototypes" || doc.title === "all Creators") {
+                return "lightgrey";
+            }
             return StrCast(Doc.UserDoc().defaultColor);
         }
         if (this.darkScheme) {
@@ -450,6 +456,7 @@ export class MainView extends React.Component {
                     ContainingCollectionView={undefined}
                     ContainingCollectionDoc={undefined}
                     relative={true}
+                    forcedBackgroundColor={() => "lightgrey"}
                 />
             </div>
             {this.docButtons}</div>;
diff --git a/src/client/views/MainViewModal.tsx b/src/client/views/MainViewModal.tsx
index c7b752b60..19387f619 100644
--- a/src/client/views/MainViewModal.tsx
+++ b/src/client/views/MainViewModal.tsx
@@ -10,8 +10,6 @@ export interface MainViewOverlayProps {
     overlayStyle?: React.CSSProperties;
     dialogueBoxDisplayedOpacity?: number;
     overlayDisplayedOpacity?: number;
-    width?: number;
-    height?: number;
     closeOnExternalClick?: () => void; // the close method of a MainViewModal, triggered if there is a click on the overlay (closing the modal)
 }
 
@@ -31,9 +29,7 @@ export default class MainViewModal extends React.Component<MainViewOverlayProps>
                     style={{
                         borderColor: "black",
                         ...(p.dialogueBoxStyle || {}),
-                        opacity: p.isDisplayed ? dialogueOpacity : 0,
-                        width: this.props.width ? this.props.width : "auto",
-                        height: this.props.height ? this.props.height : "auto"
+                        opacity: p.isDisplayed ? dialogueOpacity : 0
                     }}
                 >{p.contents}</div>
                 <div
diff --git a/src/client/views/PropertiesButtons.tsx b/src/client/views/PropertiesButtons.tsx
index c25d58c60..14ea36dde 100644
--- a/src/client/views/PropertiesButtons.tsx
+++ b/src/client/views/PropertiesButtons.tsx
@@ -196,6 +196,7 @@ export class PropertiesButtons extends React.Component<{}, {}> {
                         }
                     }}>
                     <FontAwesomeIcon className="documentdecorations-icon" size="lg"
+                        color="black"
                         style={{ WebkitAnimation: animation, MozAnimation: animation }}
                         icon={(() => {
                             switch (this.openHover) {
@@ -207,7 +208,7 @@ export class PropertiesButtons extends React.Component<{}, {}> {
                         })()}
                     />
                 </div>
-                <div className="propertiesButtons-title">Fetch</div>
+                <div className="propertiesButtons-title" style={{ backgroundColor: "white", color: "black" }}>Fetch</div>
             </div>
         </Tooltip>;
     }
@@ -226,7 +227,11 @@ export class PropertiesButtons extends React.Component<{}, {}> {
                     />
                 </div>
 
-                <div className="propertiesButtons-title">{Doc.isDocPinned(targetDoc) ? "Unpin" : "Pin"}</div>
+                <div className="propertiesButtons-title" style={{
+                    backgroundColor: Doc.isDocPinned(targetDoc) ? "white" : "black",
+                    color: Doc.isDocPinned(targetDoc) ? "black" : "white"
+                }}
+                >{Doc.isDocPinned(targetDoc) ? "Unpin" : "Pin"}</div>
             </div>
         </Tooltip>;
     }
@@ -339,11 +344,16 @@ export class PropertiesButtons extends React.Component<{}, {}> {
                 "Unlock Position" : "Lock Position"}</div></>} placement="top">
             <div>
                 <div className={"propertiesButtons-linkButton-empty"}
+                    style={{ backgroundColor: BoolCast(this.selectedDoc?.lockedPosition) ? "white" : "" }}
                     onPointerDown={this.onLock} >
                     {<FontAwesomeIcon className="documentdecorations-icon"
+                        color={BoolCast(this.selectedDoc?.lockedPosition) ? "black" : "white"}
                         icon={BoolCast(this.selectedDoc?.lockedPosition) ? "unlock" : "lock"} size="lg" />}
                 </div>
-                <div className="propertiesButtons-title">Position </div>
+                <div className="propertiesButtons-title" style={{
+                    backgroundColor: BoolCast(this.selectedDoc?.lockedPosition) ? "white" : "black",
+                    color: BoolCast(this.selectedDoc?.lockedPosition) ? "black" : "white"
+                }}>Position </div>
             </div>
         </Tooltip>;
     }
@@ -535,13 +545,16 @@ export class PropertiesButtons extends React.Component<{}, {}> {
             title={<><div className="dash-tooltip">{this.selectedDoc?.useClusters ? "Stop Showing Clusters" : "Show Clusters"}</div></>} placement="top">
             <div>
                 <div className={"propertiesButtons-linkButton-empty"}
-                    style={{ backgroundColor: this.selectedDoc?.useClusters ? "#a0a0a0" : "" }}
+                    style={{ backgroundColor: this.selectedDoc?.useClusters ? "white" : "" }}
                     onPointerDown={this.changeClusters}>
                     {<FontAwesomeIcon className="documentdecorations-icon"
                         color={this.selectedDoc?.useClusters ? "black" : "white"}
                         icon="braille" size="lg" />}
                 </div>
-                <div className="propertiesButtons-title"> clusters </div>
+                <div className="propertiesButtons-title" style={{
+                    backgroundColor: this.selectedDoc?.useClusters ? "white" : "black",
+                    color: this.selectedDoc?.useClusters ? "black" : "white"
+                }}> clusters </div>
             </div>
         </Tooltip>;
     }
@@ -569,7 +582,10 @@ export class PropertiesButtons extends React.Component<{}, {}> {
                         color={this.selectedDoc?._fitToBox ? "black" : "white"}
                         icon="expand" size="lg" />}
                 </div>
-                <div className="propertiesButtons-title"> {this.selectedDoc?._fitToBox ? "unfit" : "fit"} </div>
+                <div className="propertiesButtons-title" style={{
+                    backgroundColor: this.selectedDoc?._fitToBox ? "white" : "black",
+                    color: this.selectedDoc?._fitToBox ? "black" : "white"
+                }}> {this.selectedDoc?._fitToBox ? "unfit" : "fit"} </div>
             </div>
         </Tooltip>;
     }
diff --git a/src/client/views/collections/CollectionMenu.tsx b/src/client/views/collections/CollectionMenu.tsx
index 511735f2d..6eed4eba1 100644
--- a/src/client/views/collections/CollectionMenu.tsx
+++ b/src/client/views/collections/CollectionMenu.tsx
@@ -673,15 +673,16 @@ export class CollectionStackingViewChrome extends React.Component<CollectionMenu
             if (docs instanceof Doc) {
                 const keys = Object.keys(docs).filter(key => key.indexOf("title") >= 0 || key.indexOf("author") >= 0 ||
                     key.indexOf("creationDate") >= 0 || key.indexOf("lastModified") >= 0 ||
-                    (key[0].toUpperCase() === key[0] && key.substring(0, 3) !== "ACL"));
-                return keys.filter(key => key.toLowerCase().startsWith(value));
+                    (key[0].toUpperCase() === key[0] && key.substring(0, 3) !== "ACL" && key !== "UseCors" && key[0] !== "_"));
+                return keys.filter(key => key.toLowerCase().indexOf(value.toLowerCase()) > -1);
             } else {
                 const keys = new Set<string>();
                 docs.forEach(doc => Doc.allKeys(doc).forEach(key => keys.add(key)));
                 const noviceKeys = Array.from(keys).filter(key => key.indexOf("title") >= 0 ||
                     key.indexOf("author") >= 0 || key.indexOf("creationDate") >= 0 ||
-                    key.indexOf("lastModified") >= 0 || (key[0].toUpperCase() === key[0] && key.substring(0, 3) !== "ACL"));
-                return noviceKeys.filter(key => key.toLowerCase().startsWith(value));
+                    key.indexOf("lastModified") >= 0 || (key[0].toUpperCase() === key[0] &&
+                        key.substring(0, 3) !== "ACL" && key !== "UseCors" && key[0] !== "_"));
+                return noviceKeys.filter(key => key.toLowerCase().indexOf(value.toLowerCase()) > -1);
             }
         }
 
diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx
index a6b1849b1..7f21c63da 100644
--- a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx
+++ b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx
@@ -161,7 +161,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
             doc && Object.keys(doc).forEach(key => !(key in ids) && doc[key] !== ComputedField.undefined && (ids[key] = key));
             const rows: JSX.Element[] = [];
             for (const key of Object.keys(ids).slice().sort()) {
-                if ((key[0] === key[0].toUpperCase() && key.substring(0, 3) !== "ACL")
+                if ((key[0] === key[0].toUpperCase() && key.substring(0, 3) !== "ACL" && key !== "UseCors")
                     || key[0] === "#" || key === "author" ||
                     key === "creationDate" || key.indexOf("lastModified") !== -1) {
 
@@ -354,7 +354,6 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
         />;
     }
 
-    @undoBatch
     @action
     toggleCheckbox = () => {
         this.layoutFields = !this.layoutFields;
-- 
cgit v1.2.3-70-g09d2


From 38b33d2891a5e07de450015bcf4d34ae334c292d Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Wed, 5 Aug 2020 16:15:48 -0400
Subject: fixed display of fontsizes in richtexts dropdownmenu

---
 src/client/util/SettingsManager.tsx                   | 6 +++---
 src/client/views/nodes/formattedText/RichTextMenu.tsx | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

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

diff --git a/src/client/util/SettingsManager.tsx b/src/client/util/SettingsManager.tsx
index fce28a466..68ed32c0f 100644
--- a/src/client/util/SettingsManager.tsx
+++ b/src/client/util/SettingsManager.tsx
@@ -203,7 +203,7 @@ export default class SettingsManager extends React.Component<{}> {
         </div>;
 
         const fontFamilies: string[] = ["Times New Roman", "Arial", "Georgia", "Comic Sans MS", "Tahoma", "Impact", "Crimson Text"];
-        const fontSizes: number[] = [7, 8, 9, 10, 12, 14, 16, 18, 20, 24, 32, 48, 72];
+        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">
@@ -222,8 +222,8 @@ export default class SettingsManager extends React.Component<{}> {
                 <select className="size-select"
                     onChange={e => this.changeFontSize(e)}>
                     {fontSizes.map((size) => {
-                        return <option key={size} value={size} selected={NumCast(Doc.UserDoc().fontSize) === size}>
-                            {size + "pt"}
+                        return <option key={size} value={size} selected={StrCast(Doc.UserDoc().fontSize) === size}>
+                            {size}
                         </option>;
                     })}
                 </select>
diff --git a/src/client/views/nodes/formattedText/RichTextMenu.tsx b/src/client/views/nodes/formattedText/RichTextMenu.tsx
index 6e268be48..f040cd26d 100644
--- a/src/client/views/nodes/formattedText/RichTextMenu.tsx
+++ b/src/client/views/nodes/formattedText/RichTextMenu.tsx
@@ -274,7 +274,7 @@ export default class RichTextMenu extends AntimodeMenu {
             }
             !activeFamilies.length && (activeFamilies.push(StrCast(this.TextView.layoutDoc._fontFamily, StrCast(Doc.UserDoc().fontFamily))));
             !activeSizes.length && (activeSizes.push(StrCast(this.TextView.layoutDoc._fontSize, StrCast(Doc.UserDoc().fontSize))));
-            !activeColors.length && (activeSizes.push(StrCast(this.TextView.layoutDoc.color, StrCast(Doc.UserDoc().fontColor))));
+            !activeColors.length && (activeColors.push(StrCast(this.TextView.layoutDoc.color, StrCast(Doc.UserDoc().fontColor))));
         }
         !activeFamilies.length && (activeFamilies.push(StrCast(Doc.UserDoc().fontFamily)));
         !activeSizes.length && (activeSizes.push(StrCast(Doc.UserDoc().fontSize)));
-- 
cgit v1.2.3-70-g09d2