From 9248a73a6ae2adf9ddacb07396c4633178352267 Mon Sep 17 00:00:00 2001
From: anika-ahluwalia <anika.ahluwalia@gmail.com>
Date: Mon, 3 Aug 2020 20:00:08 -0500
Subject: color consistencies and top menu fix for view types

---
 src/client/views/collections/CollectionMenu.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

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

diff --git a/src/client/views/collections/CollectionMenu.tsx b/src/client/views/collections/CollectionMenu.tsx
index a7d2c07fa..20df22846 100644
--- a/src/client/views/collections/CollectionMenu.tsx
+++ b/src/client/views/collections/CollectionMenu.tsx
@@ -236,7 +236,7 @@ export class CollectionViewBaseChrome extends React.Component<CollectionMenuProp
 
     @computed get subChrome() {
         switch (this.props.type) {
-            default:
+            default: return (null)
             case CollectionViewType.Freeform: return (<CollectionFreeFormViewChrome key="collchrome" {...this.props} isOverlay={this.props.type === CollectionViewType.Invalid} />);
             case CollectionViewType.Stacking: return (<CollectionStackingViewChrome key="collchrome" {...this.props} />);
             case CollectionViewType.Schema: return (<CollectionSchemaViewChrome key="collchrome" {...this.props} />);
@@ -586,12 +586,14 @@ export class CollectionFreeFormViewChrome extends React.Component<CollectionMenu
             </div>;
     }
 
+    @observable viewType = this.selectedDoc?._viewType;
+
     render() {
         return !this.props.docView.layoutDoc ? (null) :
             <div className="collectionFreeFormMenu-cont">
                 {this.props.docView.props.renderDepth !== 0 || this.isText ? (null) :
                     <Tooltip key="map" title={<div className="dash-tooltip">Toggle Mini Map</div>} placement="bottom">
-                        <div className="backKeyframe" onClick={this.miniMap}>
+                        <div className="backKeyframe" onClick={this.miniMap} style={{ marginRight: "5px" }}>
                             <FontAwesomeIcon icon={"map"} size={"lg"} />
                         </div>
                     </Tooltip>
-- 
cgit v1.2.3-70-g09d2


From 4051758f3cef5e353cb24c699f4594fa4be81758 Mon Sep 17 00:00:00 2001
From: anika-ahluwalia <anika.ahluwalia@gmail.com>
Date: Tue, 4 Aug 2020 13:10:13 -0500
Subject: several UI changes and consistency updates around the system

---
 src/client/views/ContextMenu.scss                      |  5 ++++-
 src/client/views/DocumentButtonBar.scss                |  8 ++++++--
 src/client/views/DocumentButtonBar.tsx                 |  2 +-
 src/client/views/MainView.tsx                          |  4 ++--
 src/client/views/PropertiesButtons.tsx                 |  2 +-
 src/client/views/collections/CollectionLinearView.scss |  2 +-
 src/client/views/collections/CollectionMenu.tsx        |  2 +-
 src/client/views/collections/CollectionTreeView.scss   | 15 +++++++++++----
 .../collections/collectionFreeForm/PropertiesView.scss | 11 +++++++++++
 .../collections/collectionFreeForm/PropertiesView.tsx  |  4 ++--
 src/client/views/linking/LinkEditor.scss               |  3 ++-
 src/client/views/linking/LinkEditor.tsx                |  6 +++---
 src/client/views/nodes/DocumentLinksButton.scss        |  8 +++++++-
 src/client/views/nodes/DocumentLinksButton.tsx         |  8 ++++----
 src/client/views/nodes/FontIconBox.scss                |  5 +++++
 src/client/views/nodes/FontIconBox.tsx                 | 18 ++++++++----------
 16 files changed, 69 insertions(+), 34 deletions(-)

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

diff --git a/src/client/views/ContextMenu.scss b/src/client/views/ContextMenu.scss
index 86e0a568a..7467bc043 100644
--- a/src/client/views/ContextMenu.scss
+++ b/src/client/views/ContextMenu.scss
@@ -7,7 +7,7 @@
     box-shadow: $intermediate-color 0.2vw 0.2vw 0.4vw;
     flex-direction: column;
     background: whitesmoke;
-    padding-top: 10px; 
+    padding-top: 10px;
     padding-bottom: 10px;
     border-radius: 15px;
     border: solid #BBBBBBBB 1px;
@@ -72,6 +72,7 @@
         margin-left: 5px;
     }
 }
+
 .contextMenu-description {
     // width: 11vw; //10vw
     background: whitesmoke;
@@ -100,6 +101,8 @@
     border-color: $intermediate-color; //  rgb(187, 186, 186);
     border-bottom-style: solid;
     border-top-style: solid;
+
+    cursor: pointer;
 }
 
 .contextMenu-itemSelected {
diff --git a/src/client/views/DocumentButtonBar.scss b/src/client/views/DocumentButtonBar.scss
index c2ca93900..09ae14016 100644
--- a/src/client/views/DocumentButtonBar.scss
+++ b/src/client/views/DocumentButtonBar.scss
@@ -64,9 +64,13 @@ $linkGap : 3px;
     text-align: center;
     border-radius: 50%;
     pointer-events: auto;
-    color: $dark-color;
-    border: $dark-color 1px solid;
+    background-color: $dark-color;
+    border: none;
     transition: 0.2s ease all;
+
+    &:hover {
+        background-color: $main-accent;
+    }
 }
 
 .documentButtonBar-linker:hover {
diff --git a/src/client/views/DocumentButtonBar.tsx b/src/client/views/DocumentButtonBar.tsx
index d45531b76..8748b1880 100644
--- a/src/client/views/DocumentButtonBar.tsx
+++ b/src/client/views/DocumentButtonBar.tsx
@@ -198,7 +198,7 @@ export class DocumentButtonBar extends React.Component<{ views: () => (DocumentV
         const isPinned = targetDoc && Doc.isDocPinned(targetDoc);
         return !targetDoc ? (null) : <Tooltip title={<><div className="dash-tooltip">{Doc.isDocPinned(targetDoc) ? "Unpin from presentation" : "Pin to presentation"}</div></>}>
             <div className="documentButtonBar-linker"
-                style={{ backgroundColor: isPinned ? "black" : "white", color: isPinned ? "white" : "black" }}
+                style={{ backgroundColor: isPinned ? "white" : "", color: isPinned ? "black" : "white", border: isPinned ? "black 1px solid " : "" }}
                 onClick={e => DockedFrameRenderer.PinDoc(targetDoc, isPinned)}>
                 <FontAwesomeIcon className="documentdecorations-icon" size="sm" icon="map-pin"
                 />
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index a544c52d2..e9b9be49d 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -553,7 +553,7 @@ export class MainView extends React.Component {
                 <div className="mainView-flyoutContainer" style={{ width: this.flyoutWidth }}>
                     {this.flyoutWidth !== 0 ? <div className="mainView-libraryHandle"
                         onPointerDown={this.onFlyoutPointerDown}
-                        style={{ backgroundColor: 'lightgrey' }}>
+                        style={{ backgroundColor: '#8c8b8b' }}>
                         <span title="library View Dragger" style={{
                             width: (this.flyoutWidth !== 0 && this._flyoutTranslate) ? "100%" : "3vw",
                             //height: (this.flyoutWidth !== 0 && this._flyoutTranslate) ? "100%" : "100vh",
@@ -561,7 +561,7 @@ export class MainView extends React.Component {
                             top: (this.flyoutWidth !== 0 && this._flyoutTranslate) ? "" : "0"
                         }} />
                         <div className="mainview-libraryHandle-icon">
-                            <FontAwesomeIcon icon="chevron-left" color="black" size="sm" />
+                            <FontAwesomeIcon icon="chevron-left" color="white" size="sm" />
                         </div>
                     </div> : null}
                     <div className="mainView-libraryFlyout" style={{
diff --git a/src/client/views/PropertiesButtons.tsx b/src/client/views/PropertiesButtons.tsx
index 37ee3d9e0..c25d58c60 100644
--- a/src/client/views/PropertiesButtons.tsx
+++ b/src/client/views/PropertiesButtons.tsx
@@ -563,7 +563,7 @@ export class PropertiesButtons extends React.Component<{}, {}> {
             title={<><div className="dash-tooltip">{this.selectedDoc?._fitToBox ? "Stop Fitting Content" : "Fit Content"}</div></>} placement="top">
             <div>
                 <div className={"propertiesButtons-linkButton-empty"}
-                    style={{ backgroundColor: this.selectedDoc?._fitToBox ? "#a0a0a0" : "" }}
+                    style={{ backgroundColor: this.selectedDoc?._fitToBox ? "white" : "" }}
                     onPointerDown={this.changeFitToBox}>
                     {<FontAwesomeIcon className="documentdecorations-icon"
                         color={this.selectedDoc?._fitToBox ? "black" : "white"}
diff --git a/src/client/views/collections/CollectionLinearView.scss b/src/client/views/collections/CollectionLinearView.scss
index b8b72e756..f5c4299a9 100644
--- a/src/client/views/collections/CollectionLinearView.scss
+++ b/src/client/views/collections/CollectionLinearView.scss
@@ -2,7 +2,7 @@
 @import "../_nodeModuleOverrides";
 
 .collectionLinearView-outer {
-    overflow: hidden;
+    overflow: visible;
     height: 100%;
 
     .collectionLinearView {
diff --git a/src/client/views/collections/CollectionMenu.tsx b/src/client/views/collections/CollectionMenu.tsx
index 20df22846..53c2495d0 100644
--- a/src/client/views/collections/CollectionMenu.tsx
+++ b/src/client/views/collections/CollectionMenu.tsx
@@ -185,7 +185,7 @@ export class CollectionViewBaseChrome extends React.Component<CollectionMenuProp
         initialize: (button: Doc) => { button['target-docFilters'] = this.target._docFilters instanceof ObjectField ? ObjectField.MakeCopy(this.target._docFilters as any as ObjectField) : ""; },
     };
 
-    @computed get _freeform_commands() { return Doc.UserDoc().noviceMode ? [this._viewCommand, this._saveFilterCommand] : [this._viewCommand, this._saveFilterCommand, this._contentCommand, this._templateCommand, this._narrativeCommand]; }
+    @computed get _freeform_commands() { return Doc.UserDoc().noviceMode ? [this._viewCommand] : [this._viewCommand, this._saveFilterCommand, this._contentCommand, this._templateCommand, this._narrativeCommand]; }
     @computed get _stacking_commands() { return Doc.UserDoc().noviceMode ? undefined : [this._contentCommand, this._templateCommand]; }
     @computed get _masonry_commands() { return Doc.UserDoc().noviceMode ? undefined : [this._contentCommand, this._templateCommand]; }
     @computed get _schema_commands() { return Doc.UserDoc().noviceMode ? undefined : [this._templateCommand, this._narrativeCommand]; }
diff --git a/src/client/views/collections/CollectionTreeView.scss b/src/client/views/collections/CollectionTreeView.scss
index 50f0534bd..c9bf82406 100644
--- a/src/client/views/collections/CollectionTreeView.scss
+++ b/src/client/views/collections/CollectionTreeView.scss
@@ -22,7 +22,7 @@
     ul {
         list-style: none;
         padding-left: 20px;
-        margin-bottom: 1px;// otherwise vertical scrollbars may pop up for no apparent reason....
+        margin-bottom: 1px; // otherwise vertical scrollbars may pop up for no apparent reason....
     }
 
 
@@ -35,7 +35,7 @@
         width: 15px;
         color: $intermediate-color;
         margin-top: 3px;
-        transform: scale(1.3, 1.3); 
+        transform: scale(1.3, 1.3);
         border: #80808030 1px solid;
         border-radius: 4px;
     }
@@ -67,8 +67,10 @@
     margin-left: 3px;
     display: none;
 }
+
 .collectionTreeView-keyHeader:hover {
     background: #797777;
+    cursor: pointer;
 }
 
 .collectionTreeView-subtitle {
@@ -89,8 +91,10 @@
     height: 17px;
     width: 15px;
 }
+
 .treeViewItem-openRight:hover {
     background: #797777;
+    cursor: pointer;
 }
 
 .treeViewItem-border {
@@ -106,10 +110,12 @@
     .editableView-container-editing-oneLine {
         min-width: 15px;
     }
+
     .documentView-node-topmost {
         width: unset;
     }
-    > svg {
+
+    >svg {
         display: none;
     }
 
@@ -119,7 +125,8 @@
     .collectionTreeView-keyHeader {
         display: inherit;
     }
-    > svg {
+
+    >svg {
         display: inherit;
     }
 
diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.scss b/src/client/views/collections/collectionFreeForm/PropertiesView.scss
index aede3842e..9560de2f5 100644
--- a/src/client/views/collections/collectionFreeForm/PropertiesView.scss
+++ b/src/client/views/collections/collectionFreeForm/PropertiesView.scss
@@ -641,4 +641,15 @@
             margin-top: 2px;
         }
     }
+}
+
+.editable-title {
+    border: none;
+    padding: 6px;
+    padding-bottom: 2px;
+
+
+    &:hover {
+        border: 0.75px solid rgb(122, 28, 28);
+    }
 }
\ 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 f04c5159c..e2e026ca2 100644
--- a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx
+++ b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx
@@ -358,13 +358,13 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
     }
 
     @computed get editableTitle() {
-        return <EditableView
+        return <div className="editable-title"><EditableView
             key="editableView"
             contents={StrCast(this.selectedDoc?.title)}
             height={25}
             fontSize={14}
             GetValue={() => StrCast(this.selectedDoc?.title)}
-            SetValue={this.setTitle} />;
+            SetValue={this.setTitle} /> </div>;
     }
 
     @undoBatch
diff --git a/src/client/views/linking/LinkEditor.scss b/src/client/views/linking/LinkEditor.scss
index d26b7920a..7e6999cdc 100644
--- a/src/client/views/linking/LinkEditor.scss
+++ b/src/client/views/linking/LinkEditor.scss
@@ -89,7 +89,7 @@
             /* float: right; */
             border-radius: 7px;
             font-size: 9px;
-            background-color: black;
+            background: black;
             /* padding: 3px; */
             padding-top: 4px;
             padding-left: 7px;
@@ -100,6 +100,7 @@
 
             &:hover {
                 cursor: pointer;
+                background: grey;
             }
         }
     }
diff --git a/src/client/views/linking/LinkEditor.tsx b/src/client/views/linking/LinkEditor.tsx
index 660afd4b9..75fc8bf85 100644
--- a/src/client/views/linking/LinkEditor.tsx
+++ b/src/client/views/linking/LinkEditor.tsx
@@ -287,7 +287,7 @@ export class LinkEditor extends React.Component<LinkEditorProps> {
     @observable openDropdown: boolean = false;
     @observable showInfo: boolean = false;
     @computed get infoIcon() { if (this.showInfo) { return "chevron-up"; } return "chevron-down"; }
-    @observable private buttonColor: string = "black";
+    @observable private buttonColor: string = "";
 
 
     //@observable description = this.props.linkDoc.description ? StrCast(this.props.linkDoc.description) : "DESCRIPTION";
@@ -303,7 +303,7 @@ export class LinkEditor extends React.Component<LinkEditorProps> {
         if (LinkManager.currentLink) {
             LinkManager.currentLink.description = value;
             this.buttonColor = "rgb(62, 133, 55)";
-            setTimeout(action(() => this.buttonColor = "black"), 750);
+            setTimeout(action(() => this.buttonColor = ""), 750);
             return true;
         }
     }
@@ -345,7 +345,7 @@ export class LinkEditor extends React.Component<LinkEditorProps> {
                     ></input>
                 </div>
                 <div className="linkEditor-description-add-button"
-                    style={{ backgroundColor: this.buttonColor }}
+                    style={{ background: this.buttonColor }}
                     onPointerDown={this.onDown}>Set</div>
             </div></div>;
     }
diff --git a/src/client/views/nodes/DocumentLinksButton.scss b/src/client/views/nodes/DocumentLinksButton.scss
index 97e714cd5..9328fb96b 100644
--- a/src/client/views/nodes/DocumentLinksButton.scss
+++ b/src/client/views/nodes/DocumentLinksButton.scss
@@ -28,7 +28,13 @@
 }
 
 .documentLinksButton {
-    background-color: $link-color;
+    background-color: black;
+
+    &:hover {
+        background: $main-accent;
+        transform: scale(1.05);
+        cursor: pointer;
+    }
 }
 
 .documentLinksButton-endLink {
diff --git a/src/client/views/nodes/DocumentLinksButton.tsx b/src/client/views/nodes/DocumentLinksButton.tsx
index 4713ce447..7899ff0f0 100644
--- a/src/client/views/nodes/DocumentLinksButton.tsx
+++ b/src/client/views/nodes/DocumentLinksButton.tsx
@@ -181,7 +181,7 @@ export class DocumentLinksButton extends React.Component<DocumentLinksButtonProp
 
         const linkButton = <div ref={this._linkButton} style={{ minWidth: 20, minHeight: 20, position: "absolute", left: this.props.Offset?.[0] }}>
             <div className={"documentLinksButton"} style={{
-                backgroundColor: this.props.InMenu ? "black" : "",
+                backgroundColor: this.props.InMenu ? "" : "#add8e6",
                 color: this.props.InMenu ? "white" : "black",
                 width: this.props.InMenu ? "20px" : "30px", height: this.props.InMenu ? "20px" : "30px", fontWeight: "bold"
             }}
@@ -202,8 +202,8 @@ export class DocumentLinksButton extends React.Component<DocumentLinksButtonProp
                     link : links.length}
 
             </div>
-            {DocumentLinksButton.StartLink && this.props.InMenu && !this.props.StartLink &&
-                DocumentLinksButton.StartLink !== this.props.View ? <div className={"documentLinksButton-endLink"}
+            {this.props.InMenu && !this.props.StartLink && DocumentLinksButton.StartLink !== this.props.View ?
+                <div className={"documentLinksButton-endLink"}
                     style={{
                         width: this.props.InMenu ? "20px" : "30px", height: this.props.InMenu ? "20px" : "30px",
                         backgroundColor: DocumentLinksButton.StartLink ? "" : "grey",
@@ -218,7 +218,7 @@ export class DocumentLinksButton extends React.Component<DocumentLinksButtonProp
         </div>;
 
         return (!links.length) && !this.props.AlwaysOn ? (null) :
-            this.props.InMenu ?
+            this.props.InMenu && (DocumentLinksButton.StartLink || this.props.StartLink) ?
                 <Tooltip title={<><div className="dash-tooltip">{title}</div></>}>
                     {linkButton}
                 </Tooltip> : !!!DocumentLinksButton.EditLink && !this.props.InMenu ?
diff --git a/src/client/views/nodes/FontIconBox.scss b/src/client/views/nodes/FontIconBox.scss
index 5bdafd857..9709e1dbd 100644
--- a/src/client/views/nodes/FontIconBox.scss
+++ b/src/client/views/nodes/FontIconBox.scss
@@ -15,12 +15,17 @@
 
 .menuButton-round {
     border-radius: 100%;
+    background-color: black;
 
     .fontIconBox-label {
         margin-left: -10px; // button padding is 10px;
         bottom: 0;
         position: absolute;
     }
+
+    &:hover {
+        background-color: #aaaaa3;
+    }
 }
 
 .menuButton-square {
diff --git a/src/client/views/nodes/FontIconBox.tsx b/src/client/views/nodes/FontIconBox.tsx
index eff5a4160..c0eb78d98 100644
--- a/src/client/views/nodes/FontIconBox.tsx
+++ b/src/client/views/nodes/FontIconBox.tsx
@@ -63,16 +63,14 @@ export class FontIconBox extends DocComponent<FieldViewProps, FontIconDocument>(
         const color = StrCast(this.layoutDoc.color, this._foregroundColor);
         const backgroundColor = StrCast(this.layoutDoc._backgroundColor, StrCast(this.rootDoc.backgroundColor, this.props.backgroundColor?.(this.rootDoc)));
         const shape = StrCast(this.layoutDoc.iconShape, "round");
-        const button = <>
-            <button className={`menuButton-${shape}`} ref={this._ref} onContextMenu={this.specificContextMenu}
-                style={{ boxShadow: this.layoutDoc.ischecked ? `4px 4px 12px black` : undefined, backgroundColor }}>
-                <div className="menuButton-wrap">
-                    {<FontAwesomeIcon className={`menuButton-icon-${shape}`} icon={StrCast(this.dataDoc.icon, "user") as any} color={color}
-                        size={this.layoutDoc.iconShape === "square" ? "sm" : "lg"} />}
-                    {!label ? (null) : <div className="fontIconBox-label" style={{ color, backgroundColor }}> {label} </div>}
-                </div>
-            </button>
-        </>;
+        const button = <button className={`menuButton-${shape}`} ref={this._ref} onContextMenu={this.specificContextMenu}
+            style={{ boxShadow: this.layoutDoc.ischecked ? `4px 4px 12px black` : undefined, backgroundColor: this.layoutDoc.iconShape === "square" ? backgroundColor : "" }}>
+            <div className="menuButton-wrap">
+                {<FontAwesomeIcon className={`menuButton-icon-${shape}`} icon={StrCast(this.dataDoc.icon, "user") as any} color={color}
+                    size={this.layoutDoc.iconShape === "square" ? "sm" : "lg"} />}
+                {!label ? (null) : <div className="fontIconBox-label" style={{ color, backgroundColor }}> {label} </div>}
+            </div>
+        </button>;
         return !this.layoutDoc.toolTip ? button :
             <Tooltip title={<div className="dash-tooltip">{StrCast(this.layoutDoc.toolTip)}</div>}>
                 {button}
-- 
cgit v1.2.3-70-g09d2


From a9bfba81c25df304d00111c0cd8dccf7571a8418 Mon Sep 17 00:00:00 2001
From: anika-ahluwalia <anika.ahluwalia@gmail.com>
Date: Tue, 4 Aug 2020 15:00:45 -0500
Subject: adding inking commands for images, pdf, etc in top menu on select

---
 src/client/views/collections/CollectionMenu.tsx | 29 +++++++++++++++++++------
 1 file changed, 22 insertions(+), 7 deletions(-)

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

diff --git a/src/client/views/collections/CollectionMenu.tsx b/src/client/views/collections/CollectionMenu.tsx
index 53c2495d0..ce5283928 100644
--- a/src/client/views/collections/CollectionMenu.tsx
+++ b/src/client/views/collections/CollectionMenu.tsx
@@ -236,7 +236,7 @@ export class CollectionViewBaseChrome extends React.Component<CollectionMenuProp
 
     @computed get subChrome() {
         switch (this.props.type) {
-            default: return (null)
+            default: return this.otherSubChrome;
             case CollectionViewType.Freeform: return (<CollectionFreeFormViewChrome key="collchrome" {...this.props} isOverlay={this.props.type === CollectionViewType.Invalid} />);
             case CollectionViewType.Stacking: return (<CollectionStackingViewChrome key="collchrome" {...this.props} />);
             case CollectionViewType.Schema: return (<CollectionSchemaViewChrome key="collchrome" {...this.props} />);
@@ -247,6 +247,21 @@ export class CollectionViewBaseChrome extends React.Component<CollectionMenuProp
             case CollectionViewType.Docking: return (<CollectionDockingChrome key="collchrome" {...this.props} />);
         }
     }
+
+    @computed get otherSubChrome() {
+        const docType = this.props.docView.Document.type;
+        switch (docType) {
+            default: return (null);
+            case DocumentType.IMG: return (<CollectionFreeFormViewChrome key="collchrome" {...this.props} isOverlay={false} isDoc={true} />);
+            case DocumentType.PDF: return (<CollectionFreeFormViewChrome key="collchrome" {...this.props} isOverlay={false} isDoc={true} />);
+            case DocumentType.INK: return (<CollectionFreeFormViewChrome key="collchrome" {...this.props} isOverlay={false} isDoc={true} />);
+            case DocumentType.WEB: return (<CollectionFreeFormViewChrome key="collchrome" {...this.props} isOverlay={false} isDoc={true} />);
+            case DocumentType.VID: return (<CollectionFreeFormViewChrome key="collchrome" {...this.props} isOverlay={false} isDoc={true} />);
+            case DocumentType.RTF: return (<CollectionFreeFormViewChrome key="collchrome" {...this.props} isOverlay={this.props.type === CollectionViewType.Invalid} isDoc={true} />);
+        }
+    }
+
+
     private dropDisposer?: DragManager.DragDropDisposer;
     protected createDropTarget = (ele: HTMLDivElement) => {
         this.dropDisposer?.();
@@ -392,7 +407,7 @@ export class CollectionDockingChrome extends React.Component<CollectionMenuProps
 }
 
 @observer
-export class CollectionFreeFormViewChrome extends React.Component<CollectionMenuProps & { isOverlay: boolean }> {
+export class CollectionFreeFormViewChrome extends React.Component<CollectionMenuProps & { isOverlay: boolean, isDoc?: boolean }> {
     public static Instance: CollectionFreeFormViewChrome;
     constructor(props: any) {
         super(props);
@@ -591,31 +606,31 @@ export class CollectionFreeFormViewChrome extends React.Component<CollectionMenu
     render() {
         return !this.props.docView.layoutDoc ? (null) :
             <div className="collectionFreeFormMenu-cont">
-                {this.props.docView.props.renderDepth !== 0 || this.isText ? (null) :
+                {this.props.docView.props.renderDepth !== 0 || this.isText || this.props.isDoc ? (null) :
                     <Tooltip key="map" title={<div className="dash-tooltip">Toggle Mini Map</div>} placement="bottom">
                         <div className="backKeyframe" onClick={this.miniMap} style={{ marginRight: "5px" }}>
                             <FontAwesomeIcon icon={"map"} size={"lg"} />
                         </div>
                     </Tooltip>
                 }
-                {!this.isText ? <Tooltip key="back" title={<div className="dash-tooltip">Back Frame</div>} placement="bottom">
+                {!this.isText && !this.props.isDoc ? <Tooltip key="back" title={<div className="dash-tooltip">Back Frame</div>} placement="bottom">
                     <div className="backKeyframe" onClick={this.prevKeyframe}>
                         <FontAwesomeIcon icon={"caret-left"} size={"lg"} />
                     </div>
                 </Tooltip> : null}
-                {!this.isText ? <Tooltip key="num" title={<div className="dash-tooltip">Toggle View All</div>} placement="bottom">
+                {!this.isText && !this.props.isDoc ? <Tooltip key="num" title={<div className="dash-tooltip">Toggle View All</div>} placement="bottom">
                     <div className="numKeyframe" style={{ backgroundColor: this.document.editing ? "#759c75" : "#c56565" }}
                         onClick={action(() => this.document.editing = !this.document.editing)} >
                         {NumCast(this.document.currentFrame)}
                     </div>
                 </Tooltip> : null}
-                {!this.isText ? <Tooltip key="fwd" title={<div className="dash-tooltip">Forward Frame</div>} placement="bottom">
+                {!this.isText && !this.props.isDoc ? <Tooltip key="fwd" title={<div className="dash-tooltip">Forward Frame</div>} placement="bottom">
                     <div className="fwdKeyframe" onClick={this.nextKeyframe}>
                         <FontAwesomeIcon icon={"caret-right"} size={"lg"} />
                     </div>
                 </Tooltip> : null}
 
-                {!this.props.isOverlay || this.document.type !== DocumentType.WEB || this.isText ? (null) :
+                {!this.props.isOverlay || this.document.type !== DocumentType.WEB || this.isText || this.props.isDoc ? (null) :
                     <Tooltip key="hypothesis" title={<div className="dash-tooltip">Use Hypothesis</div>} placement="bottom">
                         <button className={"antimodeMenu-button"} key="hypothesis"
                             style={{
-- 
cgit v1.2.3-70-g09d2


From 6028a6f6c87b793d0ea87f9e05a07fa094a4745b Mon Sep 17 00:00:00 2001
From: anika-ahluwalia <anika.ahluwalia@gmail.com>
Date: Wed, 5 Aug 2020 01:10:31 -0500
Subject: fixes for stacking view

---
 src/client/views/collections/CollectionMenu.tsx         | 17 +++++++++++++++++
 .../collections/CollectionStackingViewFieldColumn.tsx   |  2 +-
 2 files changed, 18 insertions(+), 1 deletion(-)

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

diff --git a/src/client/views/collections/CollectionMenu.tsx b/src/client/views/collections/CollectionMenu.tsx
index ce5283928..511735f2d 100644
--- a/src/client/views/collections/CollectionMenu.tsx
+++ b/src/client/views/collections/CollectionMenu.tsx
@@ -668,6 +668,23 @@ export class CollectionStackingViewChrome extends React.Component<CollectionMenu
     getKeySuggestions = async (value: string): Promise<string[]> => {
         value = value.toLowerCase();
         const docs = DocListCast(this.document[this.props.fieldKey]);
+
+        if (Doc.UserDoc().noviceMode) {
+            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));
+            } 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));
+            }
+        }
+
         if (docs instanceof Doc) {
             return Object.keys(docs).filter(key => key.toLowerCase().startsWith(value));
         } else {
diff --git a/src/client/views/collections/CollectionStackingViewFieldColumn.tsx b/src/client/views/collections/CollectionStackingViewFieldColumn.tsx
index 4042a070d..fb75b8b61 100644
--- a/src/client/views/collections/CollectionStackingViewFieldColumn.tsx
+++ b/src/client/views/collections/CollectionStackingViewFieldColumn.tsx
@@ -368,7 +368,7 @@ export class CollectionStackingViewFieldColumn extends React.Component<CSVFieldC
                         </div>
                         {(chromeStatus !== 'view-mode' && chromeStatus !== 'disabled') ?
                             <div key={`${heading}-add-document`} className="collectionStackingView-addDocumentButton"
-                                style={{ width: style.columnWidth / style.numGroupColumns }}>
+                                style={{ width: style.columnWidth / style.numGroupColumns, marginBottom: 70 }}>
                                 <EditableView {...newEditableViewProps} menuCallback={this.menuCallback} />
                             </div> : null}
                     </div>
-- 
cgit v1.2.3-70-g09d2


From 217bb86beceed8f48ffe81cea0dbc578cb57a431 Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Wed, 5 Aug 2020 10:31:11 -0400
Subject: fixed some warnings/errors.  added tooltip for filter icon.

---
 .../apis/HypothesisAuthenticationManager.tsx       |  2 +-
 src/client/views/PropertiesButtons.tsx             | 28 +++----
 src/client/views/collections/CollectionMenu.tsx    | 48 ++++++------
 .../collectionGrid/CollectionGridView.tsx          |  2 +-
 src/client/views/nodes/WebBox.tsx                  |  2 +-
 src/client/views/search/SearchBox.tsx              | 85 +++++++++-------------
 src/server/websocket.ts                            |  3 +-
 7 files changed, 77 insertions(+), 93 deletions(-)

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

diff --git a/src/client/apis/HypothesisAuthenticationManager.tsx b/src/client/apis/HypothesisAuthenticationManager.tsx
index c3e8d2fff..bc95b5f9a 100644
--- a/src/client/apis/HypothesisAuthenticationManager.tsx
+++ b/src/client/apis/HypothesisAuthenticationManager.tsx
@@ -18,7 +18,7 @@ export default class HypothesisAuthenticationManager extends React.Component<{}>
     @observable private showPasteTargetState = false;
     @observable private success: Opt<boolean> = undefined;
     @observable private displayLauncher = true;
-    @observable private credentials: string;
+    @observable private credentials: string = "";
     private disposer: Opt<IReactionDisposer>;
 
     private set isOpen(value: boolean) {
diff --git a/src/client/views/PropertiesButtons.tsx b/src/client/views/PropertiesButtons.tsx
index d46c03470..033bd7791 100644
--- a/src/client/views/PropertiesButtons.tsx
+++ b/src/client/views/PropertiesButtons.tsx
@@ -28,7 +28,6 @@ import { GooglePhotos } from '../apis/google_docs/GooglePhotosClientUtils';
 import { ImageField } from '../../fields/URLField';
 import { undoBatch, UndoManager } from '../util/UndoManager';
 import { DocumentType } from '../documents/DocumentTypes';
-import { CollectionFreeFormView } from './collections/collectionFreeForm/CollectionFreeFormView';
 import { InkField } from '../../fields/InkField';
 const higflyout = require("@hig/flyout");
 export const { anchorPoints } = higflyout;
@@ -128,18 +127,19 @@ export class PropertiesButtons extends React.Component<{}, {}> {
         const targetDoc = this.selectedDoc;
         const published = targetDoc && Doc.GetProto(targetDoc)[GoogleRef] !== undefined;
         const animation = this.isAnimatingPulse ? "shadow-pulse 1s linear infinite" : "none";
-        return !targetDoc ? (null) : <Tooltip title={<><div className="dash-tooltip">{`${published ? "Push" : "Publish"} to Google Docs`}</div></>}>
-            <div
-                className="propertiesButtons-linker"
-                style={{ animation }}
-                onClick={async () => {
-                    await GoogleAuthenticationManager.Instance.fetchOrGenerateAccessToken();
-                    !published && runInAction(() => this.isAnimatingPulse = true);
-                    PropertiesButtons.hasPushedHack = false;
-                    targetDoc[Pushes] = NumCast(targetDoc[Pushes]) + 1;
-                }}>
-                <FontAwesomeIcon className="documentdecorations-icon" icon={published ? (this.pushIcon as any) : cloud} size={published ? "sm" : "xs"} />
-            </div></Tooltip>;
+        return !targetDoc ? (null) :
+            <Tooltip title={<><div className="dash-tooltip">{`${published ? "Push" : "Publish"} to Google Docs`}</div></>}>
+                <div className="propertiesButtons-linker"
+                    style={{ animation }}
+                    onClick={async () => {
+                        await GoogleAuthenticationManager.Instance.fetchOrGenerateAccessToken();
+                        !published && runInAction(() => this.isAnimatingPulse = true);
+                        PropertiesButtons.hasPushedHack = false;
+                        targetDoc[Pushes] = NumCast(targetDoc[Pushes]) + 1;
+                    }}>
+                    <FontAwesomeIcon className="documentdecorations-icon" icon={published ? (this.pushIcon as any) : cloud} size={published ? "sm" : "xs"} />
+                </div>
+            </Tooltip>;
     }
 
     @computed
@@ -377,7 +377,7 @@ export class PropertiesButtons extends React.Component<{}, {}> {
     @computed
     get onClickButton() {
         if (this.selectedDoc) {
-            return <Tooltip title={<><div className="dash-tooltip">Choose onClick behavior</div></>}>
+            return <Tooltip title={<div className="dash-tooltip">Choose onClick behavior</div>}>
                 <div className="propertiesButtons-linkFlyout">
                     <Flyout anchorPoint={anchorPoints.LEFT_TOP}
                         content={this.onClickFlyout}>
diff --git a/src/client/views/collections/CollectionMenu.tsx b/src/client/views/collections/CollectionMenu.tsx
index a7d2c07fa..4eb0088f6 100644
--- a/src/client/views/collections/CollectionMenu.tsx
+++ b/src/client/views/collections/CollectionMenu.tsx
@@ -1,37 +1,35 @@
 import React = require("react");
+import { IconProp } from '@fortawesome/fontawesome-svg-core';
 import { FontAwesomeIcon, FontAwesomeIconProps } from "@fortawesome/react-fontawesome";
-import { action, computed, observable, reaction, runInAction, Lambda } from "mobx";
+import { Tooltip } from "@material-ui/core";
+import { action, computed, Lambda, observable, reaction, runInAction } from "mobx";
 import { observer } from "mobx-react";
-import { Doc, DocListCast, Opt, Field } from "../../../fields/Doc";
-import { BoolCast, Cast, StrCast, NumCast } from "../../../fields/Types";
-import AntimodeMenu from "../AntimodeMenu";
-import "./CollectionMenu.scss";
-import { undoBatch } from "../../util/UndoManager";
-import { CollectionViewType, CollectionView, COLLECTION_BORDER_WIDTH } from "./CollectionView";
-import { emptyFunction, setupMoveUpEvents, Utils } from "../../../Utils";
-import { DragManager } from "../../util/DragManager";
-import { CollectionFreeFormDocumentView } from "../nodes/CollectionFreeFormDocumentView";
-import { List } from "../../../fields/List";
-import { EditableView } from "../EditableView";
+import { ColorState } from "react-color";
+import { Doc, DocListCast, Opt } from "../../../fields/Doc";
+import { Document } from "../../../fields/documentSchemas";
 import { Id } from "../../../fields/FieldSymbols";
-import { listSpec } from "../../../fields/Schema";
-import FormatShapePane from "./collectionFreeForm/FormatShapePane";
-import { ActiveFillColor, SetActiveInkWidth, ActiveInkColor, SetActiveBezierApprox, SetActiveArrowEnd, SetActiveArrowStart, SetActiveFillColor, SetActiveInkColor } from "../InkingStroke";
-import GestureOverlay from "../GestureOverlay";
 import { InkTool } from "../../../fields/InkField";
-import { DocumentType } from "../../documents/DocumentTypes";
-import { Document } from "../../../fields/documentSchemas";
-import { SelectionManager } from "../../util/SelectionManager";
-import { DocumentView } from "../nodes/DocumentView";
-import { ColorState } from "react-color";
+import { List } from "../../../fields/List";
 import { ObjectField } from "../../../fields/ObjectField";
-import RichTextMenu from "../nodes/formattedText/RichTextMenu";
 import { RichTextField } from "../../../fields/RichTextField";
+import { listSpec } from "../../../fields/Schema";
 import { ScriptField } from "../../../fields/ScriptField";
-import { IconProp } from '@fortawesome/fontawesome-svg-core';
-import { DocUtils } from "../../documents/Documents";
-import { Tooltip } from "@material-ui/core";
+import { BoolCast, Cast, NumCast, StrCast } from "../../../fields/Types";
+import { emptyFunction, setupMoveUpEvents, Utils } from "../../../Utils";
+import { DocumentType } from "../../documents/DocumentTypes";
 import { CurrentUserUtils } from "../../util/CurrentUserUtils";
+import { DragManager } from "../../util/DragManager";
+import { SelectionManager } from "../../util/SelectionManager";
+import { undoBatch } from "../../util/UndoManager";
+import AntimodeMenu from "../AntimodeMenu";
+import { EditableView } from "../EditableView";
+import GestureOverlay from "../GestureOverlay";
+import { ActiveFillColor, ActiveInkColor, SetActiveArrowEnd, SetActiveArrowStart, SetActiveBezierApprox, SetActiveFillColor, SetActiveInkColor, SetActiveInkWidth } from "../InkingStroke";
+import { CollectionFreeFormDocumentView } from "../nodes/CollectionFreeFormDocumentView";
+import { DocumentView } from "../nodes/DocumentView";
+import RichTextMenu from "../nodes/formattedText/RichTextMenu";
+import "./CollectionMenu.scss";
+import { CollectionViewType, COLLECTION_BORDER_WIDTH } from "./CollectionView";
 
 @observer
 export default class CollectionMenu extends AntimodeMenu {
diff --git a/src/client/views/collections/collectionGrid/CollectionGridView.tsx b/src/client/views/collections/collectionGrid/CollectionGridView.tsx
index 21f77e47b..e6ac7021a 100644
--- a/src/client/views/collections/collectionGrid/CollectionGridView.tsx
+++ b/src/client/views/collections/collectionGrid/CollectionGridView.tsx
@@ -240,7 +240,7 @@ export class CollectionGridView extends CollectionSubView(GridSchema) {
                 w: Math.min(w, this.numCols), // reduces width if greater than numCols
                 static: BoolCast(this.childLayoutPairs.find(({ layout }) => layout[Id] === i)?.layout.lockedPosition, false) // checks if the lock position item has been selected in the context menu
             })) :
-            this.savedLayoutList.map((layout, index) => Object.assign(layout, this.unflexedPosition(index)));
+            this.savedLayoutList.map((layout, index) => { Object.assign(layout, this.unflexedPosition(index)); return layout; });
     }
 
     /**
diff --git a/src/client/views/nodes/WebBox.tsx b/src/client/views/nodes/WebBox.tsx
index 646a94aa7..3283f568a 100644
--- a/src/client/views/nodes/WebBox.tsx
+++ b/src/client/views/nodes/WebBox.tsx
@@ -536,7 +536,7 @@ export class WebBox extends ViewBoxAnnotatableComponent<FieldViewProps, WebDocum
     highlight = (color: string) => {
         // creates annotation documents for current highlights
         const effectiveAcl = GetEffectiveAcl(this.props.Document);
-        const annotationDoc = [AclAddonly, AclEdit, AclAdmin].includes(effectiveAcl) && this.makeAnnotationDocument(color);
+        const annotationDoc = [AclAddonly, AclEdit, AclAdmin].includes(effectiveAcl) ? this.makeAnnotationDocument(color) : undefined;
         annotationDoc && this.addDocument?.(annotationDoc);
         return annotationDoc ?? undefined;
     }
diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx
index 097e6c4d9..812658b32 100644
--- a/src/client/views/search/SearchBox.tsx
+++ b/src/client/views/search/SearchBox.tsx
@@ -1,4 +1,5 @@
-import * as _ from "lodash";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { Tooltip } from '@material-ui/core';
 import { action, computed, observable, runInAction } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
@@ -15,7 +16,6 @@ import { Docs } from '../../documents/Documents';
 import { DocumentType } from "../../documents/DocumentTypes";
 import { CurrentUserUtils } from '../../util/CurrentUserUtils';
 import { SetupDrag } from '../../util/DragManager';
-import { Scripting, _scriptingGlobals } from '../../util/Scripting';
 import { SearchUtil } from '../../util/SearchUtil';
 import { SelectionManager } from '../../util/SelectionManager';
 import { Transform } from '../../util/Transform';
@@ -24,7 +24,6 @@ import { ViewBoxBaseComponent } from "../DocComponent";
 import { DocumentView } from '../nodes/DocumentView';
 import { FieldView, FieldViewProps } from '../nodes/FieldView';
 import "./SearchBox.scss";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 export const searchSchema = createSchema({
     id: "string",
@@ -771,57 +770,43 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
                         <FontAwesomeIcon onPointerDown={SetupDrag(this.collectionRef, () => StrCast(this.layoutDoc._searchString) ? this.startDragCollection() : undefined)} icon={"search"} size="lg"
                             style={{ color: "black", padding: 1, left: 35, position: "relative" }} />
 
-                        <FontAwesomeIcon icon={"filter"} size="lg"
-                            style={{ cursor: "default", right: 20, padding: 1, left: 250, position: "relative", backgroundColor: this.filter ? "white" : "lightgray", color: this.filter ? "black" : "white" }}
-                            onPointerDown={e => { e.stopPropagation(); SetupDrag(this.collectionRef, () => StrCast(this.layoutDoc._searchString) ? this.startDragCollection() : undefined); }}
-                            onClick={action(() => {
-                                this.filter = !this.filter && !this.searchFullDB;
-                                if (this.filter === true && this.currentSelectedCollection !== undefined) {
-                                    this.currentSelectedCollection.props.Document._searchDocs = new List<Doc>(this.docsforfilter);
-                                    let newarray: Doc[] = [];
-                                    let docs: Doc[] = [];
-                                    docs = DocListCast(this.currentSelectedCollection.dataDoc[Doc.LayoutFieldKey(this.currentSelectedCollection.dataDoc)]);
-                                    while (docs.length > 0) {
-                                        newarray = [];
-                                        docs.forEach((d) => {
-                                            if (d.data !== undefined) {
-                                                d._searchDocs = new List<Doc>(this.docsforfilter);
-                                                const newdocs = DocListCast(d.data);
-                                                newdocs.forEach((newdoc) => {
-                                                    newarray.push(newdoc);
+                        <div style={{ cursor: "default", left: 250, position: "relative", }}>
+                            <Tooltip title={<div className="dash-tooltip" >only display documents matching search</div>} ><div>
+                                <FontAwesomeIcon icon={"filter"} size="lg"
+                                    style={{ padding: 1, backgroundColor: this.filter ? "white" : "lightgray", color: this.filter ? "black" : "white" }}
+                                    onPointerDown={e => { e.stopPropagation(); SetupDrag(this.collectionRef, () => StrCast(this.layoutDoc._searchString) ? this.startDragCollection() : undefined); }}
+                                    onClick={action(() => {
+                                        const dofilter = (currentSelectedCollection: DocumentView) => {
+                                            let docs = DocListCast(currentSelectedCollection.dataDoc[Doc.LayoutFieldKey(currentSelectedCollection.dataDoc)]);
+                                            while (docs.length > 0) {
+                                                const newarray: Doc[] = [];
+                                                docs.filter(d => d.data !== undefined).forEach((d) => {
+                                                    d._searchDocs = new List<Doc>(this.docsforfilter);
+                                                    newarray.push(...DocListCast(d.data));
                                                 });
+                                                docs = newarray;
                                             }
-                                        });
-                                        docs = newarray;
-                                    }
+                                        };
+                                        this.filter = !this.filter && !this.searchFullDB;
+                                        if (this.filter === true && this.currentSelectedCollection !== undefined) {
+                                            this.currentSelectedCollection.props.Document._searchDocs = new List<Doc>(this.docsforfilter);
 
-                                    this.currentSelectedCollection.props.Document._docFilters = new List<string>(Cast(this.props.Document._docFilters, listSpec("string"), []));
-                                    this.props.Document.selectedDoc = this.currentSelectedCollection.props.Document;
-                                }
-                                else if (this.filter === false && this.currentSelectedCollection !== undefined) {
-                                    let newarray: Doc[] = [];
-                                    let docs: Doc[] = [];
-                                    docs = DocListCast(this.currentSelectedCollection.dataDoc[Doc.LayoutFieldKey(this.currentSelectedCollection.dataDoc)]);
-                                    while (docs.length > 0) {
-                                        newarray = [];
-                                        docs.forEach((d) => {
-                                            if (d.data !== undefined) {
-                                                d._searchDocs = new List<Doc>();
-                                                const newdocs = DocListCast(d.data);
-                                                newdocs.forEach((newdoc) => {
-                                                    newarray.push(newdoc);
-                                                });
-                                            }
-                                        });
-                                        docs = newarray;
-                                    }
+                                            dofilter(this.currentSelectedCollection);
 
-                                    this.currentSelectedCollection.props.Document._searchDocs = new List<Doc>([]);
-                                    this.currentSelectedCollection.props.Document._docFilters = undefined;
-                                    this.props.Document.selectedDoc = undefined;
-                                }
-                            }
-                            )} />
+                                            this.currentSelectedCollection.props.Document._docFilters = new List<string>(Cast(this.props.Document._docFilters, listSpec("string"), []));
+                                            this.props.Document.selectedDoc = this.currentSelectedCollection.props.Document;
+                                        }
+                                        else if (this.filter === false && this.currentSelectedCollection !== undefined) {
+
+                                            dofilter(this.currentSelectedCollection);
+
+                                            this.currentSelectedCollection.props.Document._searchDocs = new List<Doc>([]);
+                                            this.currentSelectedCollection.props.Document._docFilters = undefined;
+                                            this.props.Document.selectedDoc = undefined;
+                                        }
+                                    }
+                                    )} />
+                            </div></Tooltip></div>
                         <input value={this.newsearchstring} autoComplete="off" onChange={this.onChange} type="text" placeholder="Search..." id="search-input" ref={this.inputRef}
                             className="searchBox-barChild searchBox-input" onPointerDown={this.openSearch} onKeyPress={this.enter} onFocus={this.openSearch}
                             style={{ padding: 1, paddingLeft: 20, paddingRight: 20, color: "black", height: 20, width: 250 }} />
diff --git a/src/server/websocket.ts b/src/server/websocket.ts
index 2c8ec090a..24371a997 100644
--- a/src/server/websocket.ts
+++ b/src/server/websocket.ts
@@ -16,6 +16,7 @@ import { DocumentsCollection } from "./IDatabase";
 import { Diff, GestureContent, MessageStore, MobileDocumentUploadContent, MobileInkOverlayContent, Transferable, Types, UpdateMobileInkOverlayPositionContent, YoutubeQueryInput, YoutubeQueryTypes } from "./Message";
 import { Search } from "./Search";
 import { resolvedPorts } from './server_Initialization';
+import { Opt } from "../fields/Doc";
 
 export namespace WebSocket {
 
@@ -31,7 +32,7 @@ export namespace WebSocket {
             if (socketPort) {
                 resolvedPorts.socket = Number(socketPort);
             }
-            let socketEndpoint: Server;
+            let socketEndpoint: Opt<Server>;
             await new Promise<void>(resolve => socketEndpoint = createServer(SSL.Credentials, app).listen(resolvedPorts.socket, resolve));
             io = sio(socketEndpoint!, SSL.Credentials as any);
         } else {
-- 
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/views/collections/CollectionMenu.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

