From e1ad098f0756f7a11d4a43bdc47499c8cb4b0842 Mon Sep 17 00:00:00 2001
From: anika-ahluwalia <anika.ahluwalia@gmail.com>
Date: Thu, 6 Aug 2020 01:30:41 -0500
Subject: scrolling bugs for properties

---
 .../collectionFreeForm/PropertiesView.tsx          | 28 +++++++++++-----------
 1 file changed, 14 insertions(+), 14 deletions(-)

(limited to 'src/client/views/collections/collectionFreeForm/PropertiesView.tsx')

diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx
index 89f48fc65..3b449d941 100644
--- a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx
+++ b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx
@@ -598,16 +598,18 @@ 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 <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">
+            <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>
+        </div>;
 
     }
 
@@ -844,11 +846,9 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
                         <div className="propertiesView-fields-title"
                             onPointerDown={() => runInAction(() => { this.openFields = !this.openFields; })}
                             style={{ backgroundColor: this.openFields ? "black" : "" }}>
-                            <div className="propertiesView-fields-title-name">
-                                Fields {"&"} Tags
+                            Fields {"&"} Tags
                             <div className="propertiesView-fields-title-icon">
-                                    <FontAwesomeIcon icon={this.openFields ? "caret-down" : "caret-right"} size="lg" color="white" />
-                                </div>
+                                <FontAwesomeIcon icon={this.openFields ? "caret-down" : "caret-right"} size="lg" color="white" />
                             </div>
                         </div>
                         {!novice && this.openFields ? <div className="propertiesView-fields-checkbox">
-- 
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/views/collections/collectionFreeForm/PropertiesView.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 4b48414585910fc83e1599913f8a23672f895995 Mon Sep 17 00:00:00 2001
From: anika-ahluwalia <anika.ahluwalia@gmail.com>
Date: Thu, 6 Aug 2020 11:29:42 -0500
Subject: last ink fix

---
 .../views/collections/collectionFreeForm/PropertiesView.tsx    | 10 +---------
 1 file changed, 1 insertion(+), 9 deletions(-)

(limited to 'src/client/views/collections/collectionFreeForm/PropertiesView.tsx')

diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx
index 8aeb80ace..6dcfdf161 100644
--- a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx
+++ b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx
@@ -83,8 +83,6 @@ 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) {
@@ -616,12 +614,6 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
 
     }
 
-    @action
-    changeScrolling = (scroll: boolean) => {
-        console.log(scroll);
-        this.scrolling = scroll;
-    }
-
     @undoBatch
     @action
     switchStk = (color: ColorState) => {
@@ -780,7 +772,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
             if (this.selectedDoc && !this.isPres) {
                 return <div className="propertiesView" style={{
                     width: this.props.width,
-                    overflowY: this.scrolling ? "scroll" : "visible"
+                    //overflowY: this.scrolling ? "scroll" : "visible"
                 }} >
                     <div className="propertiesView-title" style={{ width: this.props.width }}>
                         Properties
-- 
cgit v1.2.3-70-g09d2


From 1e84a64ffb1f1933eb7e506fa133835fdb1a0972 Mon Sep 17 00:00:00 2001
From: anika-ahluwalia <anika.ahluwalia@gmail.com>
Date: Thu, 6 Aug 2020 23:39:53 -0500
Subject: finished all properties UI changes

---
 src/client/views/collections/CollectionView.tsx                    | 2 +-
 .../views/collections/collectionFreeForm/PropertiesView.scss       | 6 +++---
 src/client/views/collections/collectionFreeForm/PropertiesView.tsx | 7 ++-----
 3 files changed, 6 insertions(+), 9 deletions(-)

(limited to 'src/client/views/collections/collectionFreeForm/PropertiesView.tsx')

diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx
index 4d1cb670c..837ae7e86 100644
--- a/src/client/views/collections/CollectionView.tsx
+++ b/src/client/views/collections/CollectionView.tsx
@@ -594,7 +594,7 @@ export class CollectionView extends Touchable<FieldViewProps & CollectionViewCus
                     ""))}
             {(Doc.UserDoc()?.noviceMode || !this.props.isSelected() && !this.props.Document.forceActive) || this.props.Document.hideFilterView ? (null) :
                 <div className="collectionView-filterDragger" title="library View Dragger" onPointerDown={this.onPointerDown}
-                    style={{ right: this.facetWidth() - 1, top: this.props.Document._viewType === CollectionViewType.Docking ? "25%" : "55%" }} />
+                    style={{ right: this.facetWidth() - 1, top: this.props.Document._viewType === CollectionViewType.Docking ? "25%" : "60%" }} />
             }
             {Doc.UserDoc()?.noviceMode || this.facetWidth() < 10 ? (null) : this.filterView}
         </div>);
diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.scss b/src/client/views/collections/collectionFreeForm/PropertiesView.scss
index c952dc358..aee28366a 100644
--- a/src/client/views/collections/collectionFreeForm/PropertiesView.scss
+++ b/src/client/views/collections/collectionFreeForm/PropertiesView.scss
@@ -437,9 +437,9 @@
 
             .propertiesView-presTrails-title-icon {
                 float: right;
-                right: 0;
-                position: absolute;
-                margin-left: 2px;
+                justify-items: right;
+                align-items: flex-end;
+                margin-left: auto;
                 margin-right: 9px;
 
                 &:hover {
diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx
index 4610c0143..2d76e109c 100644
--- a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx
+++ b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx
@@ -950,12 +950,9 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
             }
             if (this.isPres) {
                 const selectedItem: boolean = PresBox.Instance._selectedArray.length > 0;
-                return <div className="propertiesView" style={{ width: this.props.width }} >
-                    <div className="propertiesView-title" style={{ width: this.props.width }}>
+                return <div className="propertiesView">
+                    <div className="propertiesView-title">
                         Presentation
-                    <div className="propertiesView-title-icon" onPointerDown={this.props.onDown}>
-                            <FontAwesomeIcon icon="times" color="black" size="sm" />
-                        </div>
                     </div>
                     <div className="propertiesView-name">
                         {this.editableTitle}
-- 
cgit v1.2.3-70-g09d2


From 625882842ca6af7563983c52a22543469a0fa319 Mon Sep 17 00:00:00 2001
From: anika-ahluwalia <anika.ahluwalia@gmail.com>
Date: Fri, 7 Aug 2020 00:58:58 -0500
Subject: smaller buttons and bug fix

---
 src/client/views/PropertiesButtons.scss                | 18 +++++++++---------
 src/client/views/PropertiesButtons.tsx                 |  2 +-
 .../collections/collectionFreeForm/PropertiesView.tsx  |  2 +-
 src/client/views/nodes/FontIconBox.scss                |  2 +-
 src/client/views/nodes/PresBox.tsx                     |  3 ++-
 5 files changed, 14 insertions(+), 13 deletions(-)

(limited to 'src/client/views/collections/collectionFreeForm/PropertiesView.tsx')

diff --git a/src/client/views/PropertiesButtons.scss b/src/client/views/PropertiesButtons.scss
index 6199d34d0..8d9d56c9e 100644
--- a/src/client/views/PropertiesButtons.scss
+++ b/src/client/views/PropertiesButtons.scss
@@ -20,8 +20,8 @@ $linkGap : 3px;
 
 .propertiesButtons-linkButton-empty,
 .propertiesButtons-linkButton-nonempty {
-    height: 30px;
-    width: 32px;
+    height: 25px;
+    width: 29px;
     border-radius: 6px;
     pointer-events: auto;
     background-color: #121721;
@@ -35,7 +35,7 @@ $linkGap : 3px;
     justify-content: center;
     align-items: center;
     margin-right: 10px;
-    margin-left: 3.5px;
+    margin-left: 4px;
 
     &:hover {
         background: $main-accent;
@@ -68,7 +68,7 @@ $linkGap : 3px;
     padding-right: 5px;
     width: 25px;
     border-radius: 5px;
-    margin-right: 22px;
+    margin-right: 20px;
     margin-bottom: 8px;
 }
 
@@ -76,9 +76,9 @@ $linkGap : 3px;
     background: #121721;
     color: white;
     font-size: 6px;
-    width: 40px;
+    width: 37px;
     padding: 3px;
-    height: 13px;
+    height: 12px;
     border-radius: 7px;
     text-transform: uppercase;
     text-align: center;
@@ -86,8 +86,8 @@ $linkGap : 3px;
 }
 
 .propertiesButtons-linker {
-    height: 30px;
-    width: 32px;
+    height: 25px;
+    width: 29px;
     text-align: center;
     border-radius: 6px;
     pointer-events: auto;
@@ -96,7 +96,7 @@ $linkGap : 3px;
     transition: 0.2s ease all;
     margin-right: 5px;
     padding-top: 5px;
-    margin-left: 3.5px;
+    margin-left: 4px;
 
     &:hover {
         background: $main-accent;
diff --git a/src/client/views/PropertiesButtons.tsx b/src/client/views/PropertiesButtons.tsx
index a905dc1e7..4255e5caa 100644
--- a/src/client/views/PropertiesButtons.tsx
+++ b/src/client/views/PropertiesButtons.tsx
@@ -259,7 +259,7 @@ export class PropertiesButtons extends React.Component<{}, {}> {
                         }
                     }}>
                     <FontAwesomeIcon className="documentdecorations-icon" size="lg" icon="map-pin" />
-                    <div style={{ position: 'relative', fontSize: 25, fontWeight: 700, transform: 'translate(0, -20px)', color: 'rgba(250,250,250,0.5)' }}>V</div>
+                    <div style={{ position: 'relative', fontSize: 25, fontWeight: 700, transform: 'translate(0, -28px)', color: 'rgba(250,250,250,0.55)' }}>V</div>
                 </div>
 
                 <div className="propertiesButtons-title">{"View"}</div>
diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx
index 2d76e109c..5e9159dc2 100644
--- a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx
+++ b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx
@@ -52,7 +52,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
     @computed get selectedDocumentView() {
         if (SelectionManager.SelectedDocuments().length) {
             return SelectionManager.SelectedDocuments()[0];
-        } else if (PresBox.Instance._selectedArray.length) {
+        } else if (PresBox.Instance && PresBox.Instance._selectedArray.length) {
             return DocumentManager.Instance.getDocumentView(PresBox.Instance.rootDoc);
         } else { return undefined; }
     }
diff --git a/src/client/views/nodes/FontIconBox.scss b/src/client/views/nodes/FontIconBox.scss
index 9709e1dbd..6a540269e 100644
--- a/src/client/views/nodes/FontIconBox.scss
+++ b/src/client/views/nodes/FontIconBox.scss
@@ -60,7 +60,7 @@
 
     .menuButton-icon-square {
         width: auto;
-        height: 32px;
+        height: 29px;
         padding: 4px;
     }
 
diff --git a/src/client/views/nodes/PresBox.tsx b/src/client/views/nodes/PresBox.tsx
index 502fd51f3..b7af4683e 100644
--- a/src/client/views/nodes/PresBox.tsx
+++ b/src/client/views/nodes/PresBox.tsx
@@ -34,7 +34,8 @@ const PresBoxDocument = makeInterface(documentSchema);
 @observer
 export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>(PresBoxDocument) {
     public static LayoutString(fieldKey: string) { return FieldView.LayoutString(PresBox, fieldKey); }
-    static Instance: PresBox;
+
+    public static Instance: PresBox;
 
     @observable _isChildActive = false;
     @observable _moveOnFromAudio: boolean = true;
-- 
cgit v1.2.3-70-g09d2


From cdd96649cb4a32ee9991deb314c4bd14a8352a6f Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Fri, 7 Aug 2020 08:23:11 -0400
Subject: added novice mode entries for creator buttons.  fixed screentransform
 for propertiesview preview.  fixed other runtime errors.

---
 src/client/util/CurrentUserUtils.ts                | 18 +++++-----
 .../collectionFreeForm/PropertiesView.tsx          | 38 ++++++++++++++--------
 2 files changed, 35 insertions(+), 21 deletions(-)

(limited to 'src/client/views/collections/collectionFreeForm/PropertiesView.tsx')

diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index 37ffcb78e..0ed03cebe 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -387,7 +387,7 @@ 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, noviceMode?: boolean
     }[] {
         if (doc.emptyPresentation === undefined) {
             doc.emptyPresentation = Docs.Create.PresDocument(new List<Doc>(),
@@ -427,16 +427,16 @@ export class CurrentUserUtils {
             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 collection", title: "Col", icon: "folder", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyCollection as Doc, noviceMode: true },
+            { 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, noviceMode: true },
             { 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 comparison box", title: "Compare", icon: "columns", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyComparison as Doc, noviceMode: true },
             { 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 audio recorder", title: "Audio", icon: "microphone", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyAudio as Doc, noviceMode: true },
+            { toolTip: "Drag a button", title: "Button", icon: "bolt", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyButton as Doc, noviceMode: true },
 
-            { 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 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, noviceMode: true },
             { 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 })' },
@@ -465,7 +465,7 @@ 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({
+        const creatorBtns = buttons.map(({ title, toolTip, icon, ignoreClick, drag, click, ischecked, activeInkPen, backgroundColor, dragFactory, noviceMode }) => Docs.Create.FontIconDocument({
             _nativeWidth: 50, _nativeHeight: 50, _width: 50, _height: 50,
             icon,
             title,
@@ -479,6 +479,8 @@ export class CurrentUserUtils {
             backgroundColor,
             removeDropProperties: new List<string>(["dropAction"]),
             dragFactory,
+            target: noviceMode ? undefined as any : doc,
+            hidden: noviceMode ? undefined as any : ComputedField.MakeFunction("self.target.noviceMode")
         }));
 
         if (dragCreatorSet === undefined) {
diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx
index 1a8ee3ea1..bc2c9422c 100644
--- a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx
+++ b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx
@@ -22,13 +22,13 @@ import { InkField } from "../../../../fields/InkField";
 import { undoBatch, UndoManager } from "../../../util/UndoManager";
 import { ColorState, SketchPicker } from "react-color";
 import "./FormatShapePane.scss";
-import { discovery_v1 } from "googleapis";
 import { PresBox } from "../../nodes/PresBox";
 import { DocumentManager } from "../../../util/DocumentManager";
 import FormatShapePane from "./FormatShapePane";
 const higflyout = require("@hig/flyout");
 export const { anchorPoints } = higflyout;
 export const Flyout = higflyout.default;
+const _global = (window /* browser */ || global /* node */) as any;
 
 // import * as fa from '@fortawesome/free-solid-svg-icons';
 // import { library } from "@fortawesome/fontawesome-svg-core";
@@ -52,7 +52,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
     @computed get selectedDocumentView() {
         if (SelectionManager.SelectedDocuments().length) {
             return SelectionManager.SelectedDocuments()[0];
-        } else if (PresBox.Instance._selectedArray.length) {
+        } else if (PresBox.Instance?._selectedArray.length) {
             return DocumentManager.Instance.getDocumentView(PresBox.Instance.rootDoc);
         } else { return undefined; }
     }
@@ -247,12 +247,22 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
         return false;
     }
 
+    @observable transform: Transform = Transform.Identity();
+    getTransform = () => { return this.transform; }
+    propertiesDocViewRef = (ref: HTMLDivElement) => {
+        const observer = new _global.ResizeObserver(action((entries: any) => {
+            const cliRect = ref.getBoundingClientRect();
+            this.transform = new Transform(-cliRect.x, -cliRect.y, 1);
+        }));
+        ref && observer.observe(ref);
+    }
+
     @computed get layoutPreview() {
         if (this.selectedDoc) {
             const layoutDoc = Doc.Layout(this.selectedDoc);
             const panelHeight = StrCast(Doc.LayoutField(layoutDoc)).includes("FormattedTextBox") ? this.rtfHeight : this.docHeight;
             const panelWidth = StrCast(Doc.LayoutField(layoutDoc)).includes("FormattedTextBox") ? this.rtfWidth : this.docWidth;
-            return <div style={{ display: "inline-block", height: panelHeight() }} key={this.selectedDoc[Id]}>
+            return <div ref={this.propertiesDocViewRef} style={{ display: "inline-block", height: panelHeight() }} key={this.selectedDoc[Id]}>
                 <ContentFittingDocumentView
                     Document={layoutDoc}
                     DataDoc={this.dataDoc}
@@ -270,7 +280,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
                     PanelWidth={panelWidth}
                     PanelHeight={panelHeight}
                     focus={returnFalse}
-                    ScreenToLocalTransform={this.props.ScreenToLocalTransform}
+                    ScreenToLocalTransform={this.getTransform}
                     docFilters={returnEmptyFilter}
                     ContainingCollectionDoc={undefined}
                     ContainingCollectionView={undefined}
@@ -320,7 +330,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
      * @returns the notification icon. On clicking, it should notify someone of a document been shared with them.
      */
     @computed get notifyIcon() {
-        return <Tooltip title={<><div className="dash-tooltip">Notify with message</div></>}>
+        return <Tooltip title={<div className="dash-tooltip">Notify with message</div>}>
             <div className="notify-button">
                 <FontAwesomeIcon className="notify-button-icon" icon="bell" color="white" size="sm" />
             </div>
@@ -331,7 +341,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
      * ... next to the owner that opens the main SharingManager interface on click.
      */
     @computed get expansionIcon() {
-        return <Tooltip title={<><div className="dash-tooltip">{"Show more permissions"}</div></>}>
+        return <Tooltip title={<div className="dash-tooltip">{"Show more permissions"}</div>}>
             <div className="expansion-button" onPointerDown={() => {
                 if (this.selectedDocumentView) {
                     SharingManager.Instance.open(this.selectedDocumentView);
@@ -346,7 +356,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
      * @returns a row of the permissions panel
      */
     sharingItem(name: string, effectiveAcl: symbol, permission: string) {
-        return <div className="propertiesView-sharingTable-item"
+        return <div className="propertiesView-sharingTable-item" key={name + permission}
         // style={{ backgroundColor: this.selectedUser === name ? "#bcecfc" : "" }}
         // onPointerDown={action(() => this.selectedUser = this.selectedUser === name ? "" : name)}
         >
@@ -378,7 +388,9 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
         if (this.selectedDoc![AclSym]) {
             for (const [key, value] of Object.entries(this.selectedDoc![AclSym])) {
                 const name = key.substring(4).replace("_", ".");
-                if (name !== Doc.CurrentUserEmail && name !== this.selectedDoc!.author/* && sidebarUsersDisplayed![name] !== false*/) tableEntries.push(this.sharingItem(name, effectiveAcl, AclMap.get(value)!));
+                if (name !== Doc.CurrentUserEmail && name !== this.selectedDoc!.author/* && sidebarUsersDisplayed![name] !== false*/) {
+                    tableEntries.push(this.sharingItem(name, effectiveAcl, AclMap.get(value)!));
+                }
             }
         }
 
@@ -484,17 +496,17 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
     @computed
     get controlPointsButton() {
         return <div className="inking-button">
-            <Tooltip title={<><div className="dash-tooltip">{"Edit points"}</div></>}>
+            <Tooltip title={<div className="dash-tooltip">{"Edit points"}</div>}>
                 <div className="inking-button-points" onPointerDown={action(() => FormatShapePane.Instance._controlBtn = !FormatShapePane.Instance._controlBtn)} style={{ backgroundColor: FormatShapePane.Instance._controlBtn ? "black" : "" }}>
                     <FontAwesomeIcon icon="bezier-curve" color="white" size="lg" />
                 </div>
             </Tooltip>
-            <Tooltip title={<><div className="dash-tooltip">{FormatShapePane.Instance._lock ? "Unlock ratio" : "Lock ratio"}</div></>}>
+            <Tooltip title={<div className="dash-tooltip">{FormatShapePane.Instance._lock ? "Unlock ratio" : "Lock ratio"}</div>}>
                 <div className="inking-button-lock" onPointerDown={action(() => FormatShapePane.Instance._lock = !FormatShapePane.Instance._lock)} >
                     <FontAwesomeIcon icon={FormatShapePane.Instance._lock ? "lock" : "unlock"} color="white" size="lg" />
                 </div>
             </Tooltip>
-            <Tooltip title={<><div className="dash-tooltip">{"Rotate 90˚"}</div></>}>
+            <Tooltip title={<div className="dash-tooltip">{"Rotate 90˚"}</div>}>
                 <div className="inking-button-rotate" onPointerDown={action(() => this.rotate(Math.PI / 2))}>
                     <FontAwesomeIcon icon="undo" color="white" size="lg" />
                 </div>
@@ -943,12 +955,12 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
                                 <FontAwesomeIcon icon={this.openLayout ? "caret-down" : "caret-right"} size="lg" color="white" />
                             </div>
                         </div>
-                        {this.openLayout ? <div className="propertiesView-layout-content">{this.layoutPreview}</div> : null}
+                        {this.openLayout ? <div className="propertiesView-layout-content"  >{this.layoutPreview}</div> : null}
                     </div>
                 </div>;
             }
             if (this.isPres) {
-                const selectedItem: boolean = PresBox.Instance._selectedArray.length > 0;
+                const selectedItem: boolean = PresBox.Instance?._selectedArray.length > 0;
                 return <div className="propertiesView" style={{ width: this.props.width }} >
                     <div className="propertiesView-title" style={{ width: this.props.width }}>
                         Presentation
-- 
cgit v1.2.3-70-g09d2


From 58f67868c705899562b3a35dd0bf3771d074d6a0 Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Fri, 7 Aug 2020 08:27:53 -0400
Subject: made propertiesview preview unclickable.

---
 src/client/views/collections/collectionFreeForm/PropertiesView.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

(limited to 'src/client/views/collections/collectionFreeForm/PropertiesView.tsx')

diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx
index bc2c9422c..15900aa33 100644
--- a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx
+++ b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx
@@ -257,12 +257,13 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
         ref && observer.observe(ref);
     }
 
+    previewBackground = () => "lightgrey";
     @computed get layoutPreview() {
         if (this.selectedDoc) {
             const layoutDoc = Doc.Layout(this.selectedDoc);
             const panelHeight = StrCast(Doc.LayoutField(layoutDoc)).includes("FormattedTextBox") ? this.rtfHeight : this.docHeight;
             const panelWidth = StrCast(Doc.LayoutField(layoutDoc)).includes("FormattedTextBox") ? this.rtfWidth : this.docWidth;
-            return <div ref={this.propertiesDocViewRef} style={{ display: "inline-block", height: panelHeight() }} key={this.selectedDoc[Id]}>
+            return <div ref={this.propertiesDocViewRef} style={{ pointerEvents: "none", display: "inline-block", height: panelHeight() }} key={this.selectedDoc[Id]}>
                 <ContentFittingDocumentView
                     Document={layoutDoc}
                     DataDoc={this.dataDoc}
@@ -270,7 +271,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
                     renderDepth={this.props.renderDepth + 1}
                     rootSelected={returnFalse}
                     treeViewDoc={undefined}
-                    backgroundColor={() => "lightgrey"}
+                    backgroundColor={this.previewBackground}
                     fitToBox={true}
                     FreezeDimensions={true}
                     NativeWidth={layoutDoc.type ===
-- 
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/views/collections/collectionFreeForm/PropertiesView.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

