From a1d6cf23a902215b91433d26724a75a1844bd4dd Mon Sep 17 00:00:00 2001
From: Andy Rickert <andrew_rickert@brown.edu>
Date: Tue, 12 May 2020 23:02:23 -0700
Subject: setting up facets

---
 src/client/util/SearchUtil.ts | 2 ++
 1 file changed, 2 insertions(+)

(limited to 'src/client/util')

diff --git a/src/client/util/SearchUtil.ts b/src/client/util/SearchUtil.ts
index 6501da34a..c2be385ae 100644
--- a/src/client/util/SearchUtil.ts
+++ b/src/client/util/SearchUtil.ts
@@ -35,7 +35,9 @@ export namespace SearchUtil {
     export async function Search(query: string, returnDocs: boolean, options: SearchParams = {}) {
         query = query || "*"; //If we just have a filter query, search for * as the query
         const rpquery = Utils.prepend("/dashsearch");
+        console.log(query);
         const gotten = await rp.get(rpquery, { qs: { ...options, q: query } });
+        console.log(gotten);
         const result: IdSearchResult = gotten.startsWith("<") ? { ids: [], docs: [], numFound: 0, lines: [] } : JSON.parse(gotten);
         if (!returnDocs) {
             return result;
-- 
cgit v1.2.3-70-g09d2


From 4ed8daf3bcceb8dec07d349e2da584005d4f17d5 Mon Sep 17 00:00:00 2001
From: Andy Rickert <andrew_rickert@brown.edu>
Date: Wed, 20 May 2020 21:52:52 -0700
Subject: working on search syntax

---
 src/client/util/SearchUtil.ts | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

(limited to 'src/client/util')

diff --git a/src/client/util/SearchUtil.ts b/src/client/util/SearchUtil.ts
index c2be385ae..1939b3e77 100644
--- a/src/client/util/SearchUtil.ts
+++ b/src/client/util/SearchUtil.ts
@@ -29,16 +29,21 @@ export namespace SearchUtil {
         rows?: number;
         fq?: string;
         allowAliases?: boolean;
+
     }
     export function Search(query: string, returnDocs: true, options?: SearchParams): Promise<DocSearchResult>;
     export function Search(query: string, returnDocs: false, options?: SearchParams): Promise<IdSearchResult>;
     export async function Search(query: string, returnDocs: boolean, options: SearchParams = {}) {
         query = query || "*"; //If we just have a filter query, search for * as the query
         const rpquery = Utils.prepend("/dashsearch");
-        console.log(query);
-        const gotten = await rp.get(rpquery, { qs: { ...options, q: query } });
+        console.log(rpquery);
+        console.log(options);
+        query = query + '&facet=true&facet.field=_height&facet.limit=3';
+        const gotten = await rp.get(rpquery+)
+        // const gotten = await rp.get(rpquery, { qs: { ...options, q: query } });
         console.log(gotten);
         const result: IdSearchResult = gotten.startsWith("<") ? { ids: [], docs: [], numFound: 0, lines: [] } : JSON.parse(gotten);
+        console.log(result);
         if (!returnDocs) {
             return result;
         }
-- 
cgit v1.2.3-70-g09d2


From d86a60f534c47773801a53f8992f9d2f3bc4db1c Mon Sep 17 00:00:00 2001
From: Andy Rickert <andrew_rickert@brown.edu>
Date: Wed, 20 May 2020 23:32:57 -0700
Subject: working on search syntax

---
 src/client/util/SearchUtil.ts         | 9 +++++----
 src/client/views/search/SearchBox.tsx | 4 +---
 2 files changed, 6 insertions(+), 7 deletions(-)

(limited to 'src/client/util')

diff --git a/src/client/util/SearchUtil.ts b/src/client/util/SearchUtil.ts
index 1939b3e77..77fac3711 100644
--- a/src/client/util/SearchUtil.ts
+++ b/src/client/util/SearchUtil.ts
@@ -4,6 +4,7 @@ import { Doc } from '../../new_fields/Doc';
 import { Id } from '../../new_fields/FieldSymbols';
 import { Utils } from '../../Utils';
 import { DocumentType } from '../documents/DocumentTypes';
+import { StringMap } from 'libxmljs';
 
 export namespace SearchUtil {
     export type HighlightingResult = { [id: string]: { [key: string]: string[] } };
@@ -29,7 +30,8 @@ export namespace SearchUtil {
         rows?: number;
         fq?: string;
         allowAliases?: boolean;
-
+        "facet"?:string;
+        "facet.field"?: string;
     }
     export function Search(query: string, returnDocs: true, options?: SearchParams): Promise<DocSearchResult>;
     export function Search(query: string, returnDocs: false, options?: SearchParams): Promise<IdSearchResult>;
@@ -38,9 +40,8 @@ export namespace SearchUtil {
         const rpquery = Utils.prepend("/dashsearch");
         console.log(rpquery);
         console.log(options);
-        query = query + '&facet=true&facet.field=_height&facet.limit=3';
-        const gotten = await rp.get(rpquery+)
-        // const gotten = await rp.get(rpquery, { qs: { ...options, q: query } });
+        console.log({ qs: { ...options, q: query } });
+        const gotten = await rp.get(rpquery, { qs: { ...options, q: query } });
         console.log(gotten);
         const result: IdSearchResult = gotten.startsWith("<") ? { ids: [], docs: [], numFound: 0, lines: [] } : JSON.parse(gotten);
         console.log(result);
diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx
index 728ae0eae..a1631951e 100644
--- a/src/client/views/search/SearchBox.tsx
+++ b/src/client/views/search/SearchBox.tsx
@@ -383,10 +383,8 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
     }
     
     @action private makebuckets(){
-        console.log("we made it");
         console.log(this._numTotalResults);
         while (this.buckets!.length <this._numTotalResults/3){
-            console.log("yeet");
 
             let bucket = Docs.Create.StackingDocument([],{ _viewType:CollectionViewType.Stacking,title: `bucket` });
             bucket.targetDoc = bucket;      
@@ -429,7 +427,7 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
         }
         this.lockPromise = new Promise(async res => {
             while (this._results.length <= this._endIndex && (this._numTotalResults === -1 || this._maxSearchIndex < this._numTotalResults)) {
-                this._curRequest = SearchUtil.Search(query, true, { fq: this.filterQuery, start: this._maxSearchIndex, rows: this.NumResults, hl: true, "hl.fl": "*" }).then(action(async (res: SearchUtil.DocSearchResult) => {
+                this._curRequest = SearchUtil.Search(query, true, {fq: this.filterQuery, start: this._maxSearchIndex, rows: this.NumResults, hl: true, "hl.fl": "*", "facet":"on", "facet.field":"_height" }).then(action(async (res: SearchUtil.DocSearchResult) => {
                     // happens at the beginning
                     if (res.numFound !== this._numTotalResults && this._numTotalResults === -1) {
                         this._numTotalResults = res.numFound;
-- 
cgit v1.2.3-70-g09d2


From c709da751cb1f98c89f3c9a3e81aa6524cc9173e Mon Sep 17 00:00:00 2001
From: Andy Rickert <andrew_rickert@brown.edu>
Date: Thu, 4 Jun 2020 17:08:00 -0400
Subject: sorting in buckets works

---
 solr-8.3.1/bin/solr-8983.pid          |   2 +-
 src/client/util/SearchUtil.ts         |   4 --
 src/client/views/search/SearchBox.tsx | 103 +++++++++++++++++++++++++++++-----
 3 files changed, 89 insertions(+), 20 deletions(-)

(limited to 'src/client/util')

diff --git a/solr-8.3.1/bin/solr-8983.pid b/solr-8.3.1/bin/solr-8983.pid
index 448f2547b..5559899bb 100644
--- a/solr-8.3.1/bin/solr-8983.pid
+++ b/solr-8.3.1/bin/solr-8983.pid
@@ -1 +1 @@
-5663
+846
diff --git a/src/client/util/SearchUtil.ts b/src/client/util/SearchUtil.ts
index 15f1f9494..ef6665c43 100644
--- a/src/client/util/SearchUtil.ts
+++ b/src/client/util/SearchUtil.ts
@@ -38,13 +38,9 @@ export namespace SearchUtil {
     export async function Search(query: string, returnDocs: boolean, options: SearchParams = {}) {
         query = query || "*"; //If we just have a filter query, search for * as the query
         const rpquery = Utils.prepend("/dashsearch");
-        console.log(rpquery);
-        console.log(options);
         console.log({ qs: { ...options, q: query } });
         const gotten = await rp.get(rpquery, { qs: { ...options, q: query } });
-        console.log(gotten);
         const result: IdSearchResult = gotten.startsWith("<") ? { ids: [], docs: [], numFound: 0, lines: [] } : JSON.parse(gotten);
-        console.log(result);
         if (!returnDocs) {
             return result;
         }
diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx
index 2be398028..0ae9b4bb3 100644
--- a/src/client/views/search/SearchBox.tsx
+++ b/src/client/views/search/SearchBox.tsx
@@ -137,7 +137,6 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
     }
     @observable setupButtons =false;
     componentDidMount = () => {
-        console.log(this.setupButtons);
         if (this.setupButtons==false){
             this.setupDocTypeButtons();
             this.setupKeyButtons();
@@ -149,7 +148,6 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
             runInAction( () => {this._searchbarOpen = true});
         }
         if (this.rootDoc.searchQuery&& this.newAssign) {
-            console.log(this.rootDoc.searchQuery);
             const sq = this.rootDoc.searchQuery;
             runInAction(() => {
 
@@ -358,7 +356,6 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
 
     @action
     submitSearch = async () => {
-        console.log(StrCast(this.layoutDoc._searchString));
         this.dataDoc[this.fieldKey] = new List<Doc>([]);
         this.buckets=[];
         this.new_buckets={};
@@ -370,7 +367,6 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
         this._isSorted=[];
         this._visibleElements = [];
         this._visibleDocuments = [];
-        console.log(query);
         if (query !== "") {
             this._endIndex = 12;
             this._maxSearchIndex = 0;
@@ -387,7 +383,6 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
     }
     
     @action private makebuckets(){
-        console.log(this._numTotalResults);
         this._results.forEach(element => {
             
         });
@@ -399,11 +394,67 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
             bucket.bucketfield = "Default";
             bucket.isBucket=true;
             Doc.AddDocToList(this.dataDoc, this.props.fieldKey, bucket);
-            this.buckets!.push(bucket);
-            console.log(this.buckets!.length);
-            
+            this.buckets!.push(bucket);            
             }
     }
+    @observable firststring: string = "";
+    @observable secondstring: string = "";
+
+    @observable bucketcount:number[]=[];
+
+    @action private makenewbuckets(){
+        let highcount=0;
+        let secondcount=0;
+        this.firststring="";
+        this.secondstring="";
+        this.buckets=[];
+        this.bucketcount=[];
+        this.dataDoc[this.fieldKey] = new List<Doc>([]);
+        for (var key in this.new_buckets){
+            if (this.new_buckets[key]>highcount){
+                secondcount===highcount;
+                this.secondstring=this.firststring;
+                highcount=this.new_buckets[key];
+                this.firststring= key;
+            }
+            else if (this.new_buckets[key]>secondcount){
+                secondcount=this.new_buckets[key];
+                this.secondstring= key;
+            }
+        }
+
+        let bucket = Docs.Create.StackingDocument([],{ _viewType:CollectionViewType.Stacking,title: `default bucket` });
+        bucket.targetDoc = bucket;      
+        bucket._viewType === CollectionViewType.Stacking;
+        bucket.bucketfield = "Default";
+        bucket.isBucket=true;
+        Doc.AddDocToList(this.dataDoc, this.props.fieldKey, bucket);
+        this.buckets!.push(bucket);
+        this.bucketcount[0]=0;
+        
+        if (this.firststring!==""){
+        let firstbucket = Docs.Create.StackingDocument([],{ _viewType:CollectionViewType.Stacking,title: this.firststring });
+        firstbucket.targetDoc = firstbucket;      
+        firstbucket._viewType === CollectionViewType.Stacking;
+        firstbucket.bucketfield = this.firststring;
+        firstbucket.isBucket=true;
+        Doc.AddDocToList(this.dataDoc, this.props.fieldKey, firstbucket);
+        this.buckets!.push(firstbucket);
+        this.bucketcount[1]=0;
+
+        }
+
+        if (this.secondstring!==""){
+        let secondbucket = Docs.Create.StackingDocument([],{ _viewType:CollectionViewType.Stacking,title: this.secondstring });
+        secondbucket.targetDoc = secondbucket;      
+        secondbucket._viewType === CollectionViewType.Stacking;
+        secondbucket.bucketfield = this.secondstring;
+        secondbucket.isBucket=true;
+        Doc.AddDocToList(this.dataDoc, this.props.fieldKey, secondbucket);
+        this.buckets!.push(secondbucket);
+        this.bucketcount[2]=0;
+        }
+    }
 
     @observable buckets:Doc[]|undefined;
 
@@ -481,8 +532,9 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
     collectionRef = React.createRef<HTMLSpanElement>();
     startDragCollection = async () => {
         const res = await this.getAllResults(this.getFinalQuery(StrCast(this.layoutDoc._searchString)));
-        const filtered = this.filterDocsByType(res.docs);
-        const docs = filtered.map(doc => {
+       // const filtered = this.filterDocsByType(res.docs);
+       const filtered = res.docs 
+       const docs = filtered.map(doc => {
             const isProto = Doc.GetT(doc, "isPrototype", "boolean", true);
             if (isProto) {
                 return Doc.MakeDelegate(doc);
@@ -621,7 +673,7 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
                             //<SearchItem {...this.props} doc={result[0]} lines={result[2]} highlighting={highlights} />;
                             result[0].targetDoc=result[0];
 
-                            Doc.AddDocToList(this.buckets![Math.floor(i/3)], this.props.fieldKey, result[0]);
+                            //Doc.AddDocToList(this.buckets![Math.floor(i/3)], this.props.fieldKey, result[0]);
                             this._isSearch[i] = "search";
                         }
                         }
@@ -643,23 +695,45 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
                             result[0].highlighting=highlights.join(", ");
 
                             //this._visibleElements[i] = <SearchItem {...this.props} doc={result[0]} lines={result[2]} highlighting={highlights} />;
+                            if(i<this._visibleDocuments.length){
                             this._visibleDocuments[i]=result[0];
                             result[0].targetDoc=result[0];
 
                             //Doc.AddDocToList(this.buckets![Math.floor(i/3)], this.props.fieldKey, result[0]);
                             this._isSearch[i] = "search";
                             }
+                            }
                         }
                     }
                 }
             }
         }
+        this.makenewbuckets();
         for (let i = 0; i < this._numTotalResults; i++) {
-            if (this._isSearch[i] === "search" && this._isSorted[i]==="placeholder") {
-                console.log(this.new_buckets);
+            console.log(this._isSearch[i],this._isSorted[i]);
+            if (this._isSearch[i] === "search" && (this._isSorted[i]===undefined ||this._isSorted[i]==="placeholder" )) {
+                let result = this._results[i];
+                if (StrCast(result[0].type)=== this.firststring && this.bucketcount[1]<3){
+                    Doc.AddDocToList(this.buckets![1], this.props.fieldKey, result[0]);
+                    this.bucketcount[1]+=1;
+                }
+                else if (StrCast(result[0].type)=== this.secondstring && this.bucketcount[1]<3){
+                    Doc.AddDocToList(this.buckets![2], this.props.fieldKey, result[0]);
+                    this.bucketcount[2]+=1;
+                }
+                else if (this.bucketcount[0]<3){
+                    Doc.AddDocToList(this.buckets![0], this.props.fieldKey, result[0]);
+                    this.bucketcount[0]+=1;
+
+                }
                 this._isSorted[i]="sorted"; 
             }
         }
+        if (this.bucketcount[0]===0){
+            Doc.RemoveDocFromList(this.dataDoc, this.props.fieldKey, this.buckets![0]);
+            }
+        
+
         if (this._maxSearchIndex >= this._numTotalResults) {
             this._visibleElements.length = this._results.length;
             this._visibleDocuments.length = this._results.length;
@@ -667,6 +741,7 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
         }
     }
 
+
     @computed
     get resFull() { return this._numTotalResults <= 8; }
 
@@ -681,7 +756,6 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
 
     @action.bound
     handleNodeChange = () => {
-        console.log("oi!");
         this._nodeStatus = !this._nodeStatus;
         if (this._nodeStatus) {
             this.expandSection(`node${this.props.Document[Id]}`);
@@ -754,7 +828,6 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
     }
 
     expandSection(thing: string) {
-        console.log("expand");
         const element = document.getElementById(thing)!;
         // get the height of the element's inner content, regardless of its actual size
         const sectionHeight = element.scrollHeight;
-- 
cgit v1.2.3-70-g09d2


From e2a29915b100cb9a1580e224e0cfdfb8be669208 Mon Sep 17 00:00:00 2001
From: Andy Rickert <andrew_rickert@brown.edu>
Date: Mon, 8 Jun 2020 14:22:27 -0400
Subject: fixed filtering on search, allowing buckets to expand searches

---
 solr-8.3.1/bin/solr-8983.pid           |   2 +-
 src/client/util/Scripting.ts           |   2 +-
 src/client/views/search/SearchBox.tsx  | 118 +++++++++++++++++++++------------
 src/client/views/search/SearchItem.tsx |  13 ++--
 src/fields/Doc.ts                      |  10 ---
 5 files changed, 85 insertions(+), 60 deletions(-)

(limited to 'src/client/util')

diff --git a/solr-8.3.1/bin/solr-8983.pid b/solr-8.3.1/bin/solr-8983.pid
index 5559899bb..6642ad1da 100644
--- a/solr-8.3.1/bin/solr-8983.pid
+++ b/solr-8.3.1/bin/solr-8983.pid
@@ -1 +1 @@
-846
+2696
diff --git a/src/client/util/Scripting.ts b/src/client/util/Scripting.ts
index ab577315c..98bbffcd7 100644
--- a/src/client/util/Scripting.ts
+++ b/src/client/util/Scripting.ts
@@ -93,7 +93,7 @@ export function scriptingGlobal(constructor: { new(...args: any[]): any }) {
     Scripting.addGlobal(constructor);
 }
 
-const _scriptingGlobals: { [name: string]: any } = {};
+export const _scriptingGlobals: { [name: string]: any } = {};
 let scriptingGlobals: { [name: string]: any } = _scriptingGlobals;
 
 function Run(script: string | undefined, customParams: string[], diagnostics: any[], originalScript: string, options: ScriptOptions): CompileResult {
diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx
index 15bddcd8a..8e188df38 100644
--- a/src/client/views/search/SearchBox.tsx
+++ b/src/client/views/search/SearchBox.tsx
@@ -30,12 +30,14 @@ import { List } from '../../../fields/List';
 import { faSearch, faFilePdf, faFilm, faImage, faObjectGroup, faStickyNote, faMusic, faLink, faChartBar, faGlobeAsia, faBan, faVideo, faCaretDown } from '@fortawesome/free-solid-svg-icons';
 import { Transform } from '../../util/Transform';
 import { MainView } from "../MainView";
-import { Scripting } from '../../util/Scripting';
+import { Scripting,_scriptingGlobals } from '../../util/Scripting';
 import { CollectionView, CollectionViewType } from '../collections/CollectionView';
 import { ViewBoxBaseComponent } from "../DocComponent";
 import { documentSchema } from "../../../fields/documentSchemas";
 import { makeInterface, createSchema } from '../../../fields/Schema';
 import { listSpec } from '../../../fields/Schema';
+import * as _ from "lodash";
+
 
 library.add(faTimes);
 
@@ -107,9 +109,18 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
         
         super(props);
         SearchBox.Instance = this;
+        if (!_scriptingGlobals.hasOwnProperty("handleNodeChange")){
         Scripting.addGlobal(this.handleNodeChange);
-        Scripting.addGlobal(this.handleKeyChange);
-        Scripting.addGlobal(this.handleWordQueryChange);
+        }
+        if (!_scriptingGlobals.hasOwnProperty("handleKeyChange")){
+            Scripting.addGlobal(this.handleKeyChange);
+        }
+        if (!_scriptingGlobals.hasOwnProperty("handleWordQueryChange")){
+            Scripting.addGlobal(this.handleWordQueryChange);
+        }
+        if (!_scriptingGlobals.hasOwnProperty("updateIcon")){
+            Scripting.addGlobal(this.updateIcon);
+        }
 
         this.resultsScrolled = this.resultsScrolled.bind(this);
         this.rootDoc._viewType = CollectionViewType.Stacking;
@@ -178,6 +189,7 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
 
     enter = (e: React.KeyboardEvent) => {
         if (e.key === "Enter") {
+            runInAction(()=>{this.expandedBucket=false});
             this.submitSearch();
         }
     }
@@ -348,9 +360,10 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
     get fieldFiltersApplied() { return !(this._authorFieldStatus && this._titleFieldStatus); }
 
 
+    @observable expandedBucket:boolean=false;
     @action
     submitSearch = async (reset?:boolean) => {
-        console.log("yes");
+        console.log(this._icons);
         if (reset){
             this.layoutDoc._searchString="";
         }
@@ -411,7 +424,7 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
         bucket.targetDoc = bucket;      
         bucket._viewType === CollectionViewType.Stacking;
         bucket._height=185;
-        bucket.bucketfield = "Default";
+        bucket.bucketfield = "results";
         bucket.isBucket=true;
         Doc.AddDocToList(this.dataDoc, this.props.fieldKey, bucket);
         this.buckets!.push(bucket);
@@ -686,7 +699,7 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
                 }
             }
         }
-        // if (this._numTotalResults>3){
+        if (this._numTotalResults>3 && this.expandedBucket===false){
         this.makenewbuckets();
         for (let i = 0; i < this._numTotalResults; i++) {
             console.log(this._isSearch[i],this._isSorted[i]);
@@ -701,9 +714,14 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
                     this.bucketcount[2]+=1;
                 }
                 else if (this.bucketcount[0]<3){
-                    Doc.AddDocToList(this.buckets![0], this.props.fieldKey, result[0]);
-                    this.bucketcount[0]+=1;
-
+                    //Doc.AddDocToList(this.buckets![0], this.props.fieldKey, result[0]);
+                    //this.bucketcount[0]+=1;
+                    const highlights = Array.from([...Array.from(new Set(result[1]).values())]);
+                    result[0].query=StrCast(this.layoutDoc._searchString);
+                    result[0].lines=new List<string>(result[2]);
+                    result[0].highlighting=highlights.join(", ");
+                    result[0].targetDoc=result[0];
+                    Doc.AddDocToList(this.dataDoc, this.props.fieldKey, result[0]);
                 }
                 this._isSorted[i]="sorted"; 
             }
@@ -721,18 +739,24 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
         this.buckets![2]._height = this.bucketcount[2]*53 + 21;
         }
 
-        if (this.bucketcount[0]===0){
-            Doc.RemoveDocFromList(this.dataDoc, this.props.fieldKey, this.buckets![0]);
-            }
-        // }
-        // else {
-        //     for (let i = 0; i < this._numTotalResults; i++) {
-        //         if ((this._isSorted[i]===undefined ||this._isSorted[i]==="placeholder" )) {
-        //             let result = this._results[i];
-        //             Doc.AddDocToList(this.dataDoc, this.props.fieldKey, result[0]);
-        //         }
+        // if (this.bucketcount[0]===0){
+        //     Doc.RemoveDocFromList(this.dataDoc, this.props.fieldKey, this.buckets![0]);
         //     }
-        // }
+        }
+            
+        else {
+                for (let i = 0; i < this._numTotalResults; i++) {
+                    if ((this._isSorted[i]===undefined ||this._isSorted[i]==="placeholder" )) {
+                        let result = this._results[i];
+                        const highlights = Array.from([...Array.from(new Set(result[1]).values())]);
+                        result[0].query=StrCast(this.layoutDoc._searchString);
+                        result[0].lines=new List<string>(result[2]);
+                        result[0].highlighting=highlights.join(", ");
+                        result[0].targetDoc=result[0];
+                        Doc.AddDocToList(this.dataDoc, this.props.fieldKey, result[0]);
+                    }
+                }
+            }
 
         if (this._maxSearchIndex >= this._numTotalResults) {
             this._visibleElements.length = this._results.length;
@@ -986,22 +1010,39 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
         return (null);
     }
 
+    @action.bound
+    updateIcon= async (icon: string) =>{
+        if (this._icons.includes(icon)){
+            _.pull(this._icons, icon);
+            let cap = icon.charAt(0).toUpperCase() + icon.slice(1)
+            console.log(cap);
+            let doc = await Cast(this.props.Document[cap], Doc)
+            doc!.backgroundColor= "";
+        }
+        else{
+            this._icons.push(icon);
+            let cap = icon.charAt(0).toUpperCase() + icon.slice(1)
+            let doc = await Cast(this.props.Document[cap], Doc)
+            doc!.backgroundColor= "aaaaa3";
+        }
+        console.log(this._icons);
+    }
+
     setupDocTypeButtons() {
         let doc = this.props.Document;
         const ficon = (opts: DocumentOptions) => new PrefetchProxy(Docs.Create.FontIconDocument({ ...opts,  
         dropAction: "alias", removeDropProperties: new List<string>(["dropAction"]), _nativeWidth: 100, _nativeHeight: 100, _width: 100,
          _height: 100 })) as any as Doc;
-        doc.Music = ficon({ onClick: undefined, title: "mussic button", icon: "music" });
-        doc.Col = ficon({ onClick: undefined, title: "col button", icon: "object-group" });
-        doc.Hist = ficon({ onClick: undefined, title: "hist button", icon: "chart-bar" });
-        doc.Image = ficon({ onClick: undefined, title: "image button", icon: "image" });
-        doc.Link = ficon({ onClick: undefined, title: "link button", icon: "link" });
-        doc.PDF = ficon({ onClick: undefined, title: "pdf button", icon: "file-pdf" });
-        doc.TEXT = ficon({ onClick: undefined, title: "text button", icon: "sticky-note" });
-        doc.Vid = ficon({ onClick: undefined, title: "vid button", icon: "video" });
-        doc.Web = ficon({ onClick: undefined, title: "web button", icon: "globe-asia" });
-
-        let buttons = [doc.None as Doc, doc.Music as Doc, doc.Col as Doc, doc.Hist as Doc,
+        doc.Music = ficon({ onClick: ScriptField.MakeScript(`updateIcon("audio")`), title: "music button", icon: "music" });
+        doc.Col  = ficon({ onClick: ScriptField.MakeScript(`updateIcon("collection")`), title: "col button", icon: "object-group" });
+        doc.Image = ficon({ onClick: ScriptField.MakeScript(`updateIcon("image")`), title: "image button", icon: "image" });
+        doc.Link = ficon({ onClick: ScriptField.MakeScript(`updateIcon("link")`), title: "link button", icon: "link" });
+        doc.Pdf = ficon({ onClick: ScriptField.MakeScript(`updateIcon("pdf")`), title: "pdf button", icon: "file-pdf" });
+        doc.Text = ficon({ onClick: ScriptField.MakeScript(`updateIcon("rtf")`), title: "text button", icon: "sticky-note" });
+        doc.Vid = ficon({ onClick: ScriptField.MakeScript(`updateIcon("video")`), title: "vid button", icon: "video" });
+        doc.Web = ficon({ onClick: ScriptField.MakeScript(`updateIcon("web")`), title: "web button", icon: "globe-asia" });
+
+        let buttons = [doc.None as Doc, doc.Music as Doc, doc.Col as Doc, doc.Hist as Doc,  
         doc.Image as Doc, doc.Link as Doc, doc.PDF as Doc, doc.TEXT as Doc, doc.Vid as Doc, doc.Web as Doc];
 
         const dragCreators = Docs.Create.MasonryDocument(buttons, {
@@ -1036,7 +1077,9 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
         let doc = this.props.Document;
         const button = (opts: DocumentOptions) => new PrefetchProxy( Docs.Create.ButtonDocument({...opts,
             _width: 35, _height: 30,
-            borderRounding: "16px", border:"1px solid grey", color:"white", hovercolor: "rgb(170, 170, 163)", letterSpacing: "2px",
+            borderRounding: "16px", border:"1px solid grey", color:"white", 
+            //hovercolor: "rgb(170, 170, 163)", 
+            letterSpacing: "2px",
             _fontSize: 7,
         }))as any as Doc;
         doc.keywords=button({ title: "Keywords", onClick:ScriptField.MakeScript("handleWordQueryChange(self)")});
@@ -1087,18 +1130,11 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
                 <div id={`filterhead${this.props.Document[Id]}`} className="filter-form" style={this._filterOpen && this._numTotalResults >0 ? {overflow:"visible"} : {overflow:"hidden"}}>
                     <div id={`filterhead2${this.props.Document[Id]}`} className="filter-header"  >
                         {this.defaultButtons}
-                        {/* <button className="filter-item" style={this._basicWordStatus ? { background: "#aaaaa3", } : {}} onClick={this.handleWordQueryChange}>Keywords</button>
-                        <button className="filter-item" style={this._keyStatus ? { background: "#aaaaa3" } : {}} onClick={this.handleKeyChange}>Keys</button>
-                        <button className="filter-item" style={this._nodeStatus ? { background: "#aaaaa3" } : {}} onClick={this.handleNodeChange}>Nodes</button> */}
                     </div>
                     <div id={`node${this.props.Document[Id]}`} className="filter-body" style={this._nodeStatus ? { borderTop: "grey 1px solid" } : { borderTop: "0px" }}>
                         {this.docButtons}
                     </div>
                     <div className="filter-key" id={`key${this.props.Document[Id]}`} style={this._keyStatus ? { borderTop: "grey 1px solid" } : { borderTop: "0px" }}>
-                        {/* <div className="filter-keybar"> */}
-                            {/* <button className="filter-item" style={this._titleFieldStatus ? { background: "#aaaaa3", } : {}} onClick={this.updateTitleStatus}>Title</button>
-                            <button className="filter-item" style={this._deletedDocsStatus ? { background: "#aaaaa3", } : {}} onClick={this.updateDataStatus}>Deleted Docs</button>
-                            <button className="filter-item" style={this._authorFieldStatus ? { background: "#aaaaa3", } : {}} onClick={this.updateAuthorStatus}>Author</button> */}
                         {this.keyButtons}
                     </div>
                 </div>
@@ -1117,9 +1153,7 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
                     height: this.resFull ? "auto" : this.resultHeight,
                     overflow: "visibile" // this.resFull ? "auto" : "visible"
                 }} ref={this._resultsRef}>
-                    {this._visibleElements.length}
-                    
-                    
+                    {this._visibleElements.length}           
                 </div>
             </div>
         );
diff --git a/src/client/views/search/SearchItem.tsx b/src/client/views/search/SearchItem.tsx
index a8d664ad8..a9a8b563b 100644
--- a/src/client/views/search/SearchItem.tsx
+++ b/src/client/views/search/SearchItem.tsx
@@ -344,8 +344,11 @@ export class SearchItem extends ViewBoxBaseComponent<FieldViewProps, SearchSchem
 
     newsearch(){
        runInAction(()=>{
-        SearchBox.Instance._searchString="";
-        SearchBox.Instance.submitSearch(true);
+        if (StrCast(this.rootDoc.bucketfield)!=="results"){
+        SearchBox.Instance._icons=[StrCast(this.rootDoc.bucketfield)];
+        }
+        SearchBox.Instance.expandedBucket= true;
+        SearchBox.Instance.submitSearch();
        }) 
     }
 
@@ -355,26 +358,24 @@ export class SearchItem extends ViewBoxBaseComponent<FieldViewProps, SearchSchem
         if (this.targetDoc.isBucket === true){
             this.props.Document._viewType=CollectionViewType.Stacking;  
             this.props.Document._chromeStatus='disabled';
-
             this.props.Document._height=this.targetDoc._height;
 
             return <div>
             <div className="bucket-title">
-                {StrCast(this.rootDoc.bucketfield)}
+                {StrCast(this.rootDoc.bucketfield)==="results"? null:StrCast(this.rootDoc.bucketfield)}
             </div>
             <CollectionView {...this.props}
             Document={this.props.Document}
             PanelHeight={this.panelHeight}
             whenActiveChanged={emptyFunction}
             onClick={undefined}
-
             moveDocument={returnFalse}
             childLayoutTemplate={this.childLayoutTemplate}
             addDocument={this.addDocument}
             removeDocument={returnFalse}
             focus={this.selectElement}
             ScreenToLocalTransform={this.getTransform} />
-            <button onClick={()=>this.newsearch()}className="bucket-expand" style={{transform:"none", fontSize:"100%",textTransform:"none", background: "lightgray",color: "black", bottom: 8, fontFamily:"Arial, sans-serif"}}>See all results...
+            <button onClick={()=>this.newsearch()}className="bucket-expand" style={{transform:"none", fontSize:"100%",textTransform:"none", background: "lightgray",color: "black", bottom: 8, fontFamily:"Arial, sans-serif"}}>See all {StrCast(this.rootDoc.bucketfield)}...
             </button>
             </div>
         }
diff --git a/src/fields/Doc.ts b/src/fields/Doc.ts
index 62eac379b..e14e4996b 100644
--- a/src/fields/Doc.ts
+++ b/src/fields/Doc.ts
@@ -1148,13 +1148,3 @@ Scripting.addGlobal(function selectedDocs(container: Doc, excludeCollections: bo
 });
 Scripting.addGlobal(function setDocFilter(container: Doc, key: string, value: any, modifiers?: "check" | "x" | undefined) { Doc.setDocFilter(container, key, value, modifiers); });
 Scripting.addGlobal(function setDocFilterRange(container: Doc, key: string, range: number[]) { Doc.setDocFilterRange(container, key, range); });
-// Scripting.addGlobal(function handleNodeChange(doc: any) {
-//     console.log("oi");
-//     // console.log(doc);
-//     console.log(this);
-//     this.handleNodeChange();
-    
-//     // const dv = DocumentManager.Instance.getDocumentView(doc);
-//     // if (dv?.props.Document.layoutKey === layoutKey) dv?.switchViews(otherKey !== "layout", otherKey.replace("layout_", ""));
-//     // else dv?.switchViews(true, layoutKey.replace("layout_", ""));
-// });
\ No newline at end of file
-- 
cgit v1.2.3-70-g09d2


From 2767e06d90eeeb25283d2939208a463f8b52ee6e Mon Sep 17 00:00:00 2001
From: Andy Rickert <andrew_rickert@brown.edu>
Date: Tue, 9 Jun 2020 18:17:41 -0400
Subject:  bugfixing and cosmetic changes

---
 solr-8.3.1/bin/solr-8983.pid            |  2 +-
 src/client/util/CurrentUserUtils.ts     |  2 +-
 src/client/views/search/SearchBox.scss  |  2 --
 src/client/views/search/SearchBox.tsx   | 64 ++++++++++++++++++---------------
 src/client/views/search/SearchItem.scss | 10 +++---
 src/client/views/search/SearchItem.tsx  | 20 ++++-------
 src/server/websocket.ts                 |  5 ---
 7 files changed, 48 insertions(+), 57 deletions(-)

(limited to 'src/client/util')

diff --git a/solr-8.3.1/bin/solr-8983.pid b/solr-8.3.1/bin/solr-8983.pid
index 6642ad1da..4d042afa2 100644
--- a/solr-8.3.1/bin/solr-8983.pid
+++ b/solr-8.3.1/bin/solr-8983.pid
@@ -1 +1 @@
-2696
+1018
diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index 40e5a3451..abbcd9352 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -560,7 +560,7 @@ export class CurrentUserUtils {
             doc["tabs-button-search"] = new PrefetchProxy(Docs.Create.ButtonDocument({
                 _width: 50, _height: 25, title: "Search", _fontSize: 10,
                 letterSpacing: "0px", textTransform: "unset", borderRounding: "5px 5px 0px 0px", boxShadow: "3px 3px 0px rgb(34, 34, 34)",
-                sourcePanel: new PrefetchProxy(Docs.Create.SearchDocument({ title: "search stack", })) as any as Doc,
+                sourcePanel: new PrefetchProxy(Docs.Create.SearchDocument({ title: "sidebar search stack", })) as any as Doc,
                 searchFileTypes: new List<string>([DocumentType.RTF, DocumentType.IMG, DocumentType.PDF, DocumentType.VID, DocumentType.WEB, DocumentType.SCRIPTING]),
                 targetContainer: new PrefetchProxy(sidebarContainer) as any as Doc,
                 lockedPosition: true,
diff --git a/src/client/views/search/SearchBox.scss b/src/client/views/search/SearchBox.scss
index 1e71f8cb0..cd64d71ff 100644
--- a/src/client/views/search/SearchBox.scss
+++ b/src/client/views/search/SearchBox.scss
@@ -83,8 +83,6 @@
     .no-result {
         width: 500px;
         background: $light-color-secondary;
-        border-color: $intermediate-color;
-        border-bottom-style: solid;
         padding: 10px;
         height: 50px;
         text-transform: uppercase;
diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx
index 1d03e78a9..30d4fd5aa 100644
--- a/src/client/views/search/SearchBox.tsx
+++ b/src/client/views/search/SearchBox.tsx
@@ -45,12 +45,9 @@ library.add(faTimes);
 export const searchSchema = createSchema({
     id: "string",
     Document: Doc,
-    sideBar: "boolean",
     searchQuery: "string",
 });
 
-//add back filterquery
-
 export enum Keys {
     TITLE = "title",
     AUTHOR = "author",
@@ -190,7 +187,9 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
 
     enter = (e: React.KeyboardEvent) => {
         if (e.key === "Enter") {
+            if (this._icons!==this._allIcons){
             runInAction(()=>{this.expandedBucket=false});
+            }
             this.submitSearch();
         }
     }
@@ -651,7 +650,7 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
                         this.getResults(StrCast(this.layoutDoc._searchString));
                         if (i < this._results.length) result = this._results[i];
                         if (result) {
-                            if (StrCast(result[0].type)!=="search"){
+                            if (!this.blockedTypes.includes(StrCast(result[0].type))){
 
                             if(this.new_buckets[StrCast(result[0].type)]===undefined){
                                 this.new_buckets[StrCast(result[0].type)]=1;
@@ -660,13 +659,9 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
                                 this.new_buckets[StrCast(result[0].type)]=this.new_buckets[StrCast(result[0].type)]+1;
                             }
                             const highlights = Array.from([...Array.from(new Set(result[1]).values())]);
-                            
-                            result[0].query=StrCast(this.layoutDoc._searchString);
-                            //Make alias
                             let lines = new List<string>(result[2]);
                             result[0].lines=lines
                             result[0].highlighting=highlights.join(", ");
-
                             this._visibleDocuments[i] = result[0];
                             result[0].targetDoc=result[0];
 
@@ -678,7 +673,7 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
                     else {
                         result = this._results[i];
                         if (result) {
-                            if (StrCast(result[0].type)!=="search"){
+                            if (!this.blockedTypes.includes(StrCast(result[0].type))){
                             if(this.new_buckets[StrCast(result[0].type)]===undefined){
                                 this.new_buckets[StrCast(result[0].type)]=1;
                             }
@@ -686,7 +681,6 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
                                 this.new_buckets[StrCast(result[0].type)]=this.new_buckets[StrCast(result[0].type)]+1;
                             }
                             const highlights = Array.from([...Array.from(new Set(result[1]).values())]);
-                            result[0].query=StrCast(this.layoutDoc._searchString);
                             result[0].lines=new List<string>(result[2]);
                             result[0].highlighting=highlights.join(", ");
                             if(i<this._visibleDocuments.length){
@@ -703,22 +697,24 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
         if (this._numTotalResults>3 && this.expandedBucket===false){
         this.makenewbuckets();
         for (let i = 0; i < this._numTotalResults; i++) {
-            console.log(this._isSearch[i],this._isSorted[i]);
+            let result = this._results[i];
+            if (!this.blockedTypes.includes(StrCast(result[0].type))){
             if (this._isSearch[i] === "search" && (this._isSorted[i]===undefined ||this._isSorted[i]==="placeholder" )) {
-                let result = this._results[i];
+                console.log(StrCast(result[0].type));
                 if (StrCast(result[0].type)=== this.firststring && this.bucketcount[1]<3){
                     Doc.AddDocToList(this.buckets![1], this.props.fieldKey, result[0]);
                     this.bucketcount[1]+=1;
+                    console.log("1 count")
                 }
-                else if (StrCast(result[0].type)=== this.secondstring && this.bucketcount[1]<3){
+                else if (StrCast(result[0].type)=== this.secondstring && this.bucketcount[2]<3){
                     Doc.AddDocToList(this.buckets![2], this.props.fieldKey, result[0]);
                     this.bucketcount[2]+=1;
+                    console.log("2 count")
                 }
                 else if (this.bucketcount[0]<3){
                     //Doc.AddDocToList(this.buckets![0], this.props.fieldKey, result[0]);
                     //this.bucketcount[0]+=1;
                     const highlights = Array.from([...Array.from(new Set(result[1]).values())]);
-                    result[0].query=StrCast(this.layoutDoc._searchString);
                     result[0].lines=new List<string>(result[2]);
                     result[0].highlighting=highlights.join(", ");
                     result[0].targetDoc=result[0];
@@ -727,17 +723,18 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
                 this._isSorted[i]="sorted"; 
             }
         }
+        }
         console.log(this.bucketcount[0]);
         console.log(this.bucketcount[1]);
         console.log(this.bucketcount[2]);
         if (this.buckets![0]){
-        this.buckets![0]._height = this.bucketcount[0]*53 + 21;
+        this.buckets![0]._height = this.bucketcount[0]*55 + 25;
         }
         if (this.buckets![1]){
-        this.buckets![1]._height = this.bucketcount[1]*53 + 21;
+        this.buckets![1]._height = this.bucketcount[1]*55 + 25;
         }
         if (this.buckets![2]){  
-        this.buckets![2]._height = this.bucketcount[2]*53 + 21;
+        this.buckets![2]._height = this.bucketcount[2]*55 + 25;
         }
 
         // if (this.bucketcount[0]===0){
@@ -749,14 +746,16 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
                 for (let i = 0; i < this._numTotalResults; i++) {
                     if ((this._isSorted[i]===undefined ||this._isSorted[i]==="placeholder" )) {
                         let result = this._results[i];
+                        if (!this.blockedTypes.includes(StrCast(result[0].type))){
+
                         const highlights = Array.from([...Array.from(new Set(result[1]).values())]);
-                        result[0].query=StrCast(this.layoutDoc._searchString);
                         result[0].lines=new List<string>(result[2]);
                         result[0].highlighting=highlights.join(", ");
                         result[0].targetDoc=result[0];
                         Doc.AddDocToList(this.dataDoc, this.props.fieldKey, result[0]);
                     }
                 }
+                }
             }
 
         if (this._maxSearchIndex >= this._numTotalResults) {
@@ -766,6 +765,9 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
         }
     }
 
+    
+    blockedTypes:string[]= ["preselement","docholder","collection","search","searchitem", "script", "fonticonbox", "button", "label"];
+    blockedFields: string[]= ["layout"];
 
     @computed
     get resFull() { return this._numTotalResults <= 8; }
@@ -900,9 +902,10 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
     @computed get docButtons() {
         const nodeBtns = this.props.Document.nodeButtons;
         let width = () => NumCast(this.props.Document._width);
-        if (this.rootDoc.sideBar===true){
+        // if (StrCast(this.props.Document.title)==="sidebar search stack"){
             width = MainView.Instance.flyoutWidthFunc;
-        }
+
+        // }   
         if (nodeBtns instanceof Doc) {
             return <div id="hi" style={{height:"100px",}}>
                 <DocumentView
@@ -938,9 +941,9 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
     @computed get keyButtons() {
         const nodeBtns = this.props.Document.keyButtons;
         let width = () => NumCast(this.props.Document._width);
-        if (this.rootDoc.sideBar===true){
+        // if (StrCast(this.props.Document.title)==="sidebar search stack"){
             width = MainView.Instance.flyoutWidthFunc;
-        }
+        // }
         if (nodeBtns instanceof Doc) {
             return <div id="hi" style={{height:"35px",}}>
                 <DocumentView
@@ -976,9 +979,9 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
     @computed get defaultButtons() {
         const defBtns = this.props.Document.defaultButtons;
         let width = () => NumCast(this.props.Document._width);
-        if (this.rootDoc.sideBar===true){
+        // if (StrCast(this.props.Document.title)==="sidebar search stack"){
             width = MainView.Instance.flyoutWidthFunc;
-        }
+        // }
         if (defBtns instanceof Doc) {
             return <div id="hi" style={{height:"35px",}}>
                 <DocumentView
@@ -1122,13 +1125,16 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
     }
 
     addDocument = (doc: Doc) => {
-        const newPinDoc = Doc.MakeAlias(doc);
-        newPinDoc.presentationTargetDoc = doc;
-        return Doc.AddDocToList(this.dataDoc, this.fieldKey, newPinDoc);
+        return null;
     }
     //Make id layour document
     render() {
-        this.props.Document._gridGap=5;
+        if (this.expandedBucket  === true){
+            this.props.Document._gridGap=5;
+        }
+        else {
+            this.props.Document._gridGap=10;
+        }
         this.props.Document._searchDoc=true;
 
         return (
@@ -1160,7 +1166,7 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
                         moveDocument={returnFalse}
                         NativeHeight={()=>400}
                         childLayoutTemplate={this.childLayoutTemplate}
-                        addDocument={this.addDocument}
+                        addDocument={undefined}
                         removeDocument={returnFalse}
                         focus={this.selectElement}
                         ScreenToLocalTransform={Transform.Identity} />
diff --git a/src/client/views/search/SearchItem.scss b/src/client/views/search/SearchItem.scss
index 9996e0a50..5ce022d41 100644
--- a/src/client/views/search/SearchItem.scss
+++ b/src/client/views/search/SearchItem.scss
@@ -11,15 +11,15 @@
 .searchItem-overview .searchItem {
     width: 100%;
     background: $light-color-secondary;
-    border-color: $intermediate-color;
-    border-bottom-style: solid;
-    padding: 10px;
-    min-height: 50px;
+    padding: 8px;
+    min-height: 46px;
+    height:46px;
     max-height: 150px;
     height: auto;
     z-index: 0;
     display: flex;
     overflow: visible;
+    box-shadow: rgb(156, 147, 150) 0.2vw 0.2vw 0.8vw;
 
     .searchItem-body {
         display: flex;
@@ -146,7 +146,7 @@
 }
 
 .searchBox-placeholder {
-    min-height: 50px;
+    min-height: 46px;
     margin-left: 150px;
     width: calc(100% - 150px);
     text-transform: uppercase;
diff --git a/src/client/views/search/SearchItem.tsx b/src/client/views/search/SearchItem.tsx
index 97ca0ee69..9d5d64dca 100644
--- a/src/client/views/search/SearchItem.tsx
+++ b/src/client/views/search/SearchItem.tsx
@@ -336,12 +336,6 @@ export class SearchItem extends ViewBoxBaseComponent<FieldViewProps, SearchSchem
         //this.gotoDocument(this.childDocs.indexOf(doc), NumCast(this.layoutDoc._itemIndex));
     }
 
-    addDocument = (doc: Doc) => {
-        const newPinDoc = Doc.MakeAlias(doc);
-        newPinDoc.presentationTargetDoc = doc;
-        return Doc.AddDocToList(this.dataDoc, this.fieldKey, newPinDoc);
-    }
-
     newsearch(){
        runInAction(()=>{
         if (StrCast(this.rootDoc.bucketfield)!=="results"){
@@ -362,9 +356,6 @@ export class SearchItem extends ViewBoxBaseComponent<FieldViewProps, SearchSchem
             this.props.Document._height=this.targetDoc._height;
 
             return <div>
-            <div className="bucket-title">
-                {StrCast(this.rootDoc.bucketfield)==="results"? null:StrCast(this.rootDoc.bucketfield)}
-            </div>
             <CollectionView {...this.props}
             Document={this.props.Document}
             PanelHeight={this.panelHeight}
@@ -372,11 +363,11 @@ export class SearchItem extends ViewBoxBaseComponent<FieldViewProps, SearchSchem
             onClick={undefined}
             moveDocument={returnFalse}
             childLayoutTemplate={this.childLayoutTemplate}
-            addDocument={this.addDocument}
+            addDocument={undefined}
             removeDocument={returnFalse}
             focus={this.selectElement}
             ScreenToLocalTransform={this.getTransform} />
-            <button onClick={()=>this.newsearch()}className="bucket-expand" style={{transform:"none", fontSize:"100%",textTransform:"none", background: "lightgray",color: "black", bottom: 8, fontFamily:"Arial, sans-serif"}}>See all {StrCast(this.rootDoc.bucketfield)}...
+            <button onClick={()=>this.newsearch()}className="bucket-expand" style={{transform:"none", fontSize:"100%",textTransform:"none", background: "lightgray",color: "black", bottom: 8, marginBottom:-2, paddingTop:2,fontFamily:"Arial, sans-serif"}}>See all {StrCast(this.rootDoc.bucketfield)}...
             </button>
             </div>
         }
@@ -385,9 +376,10 @@ export class SearchItem extends ViewBoxBaseComponent<FieldViewProps, SearchSchem
             <div className="searchItem" onPointerDown={this.nextHighlight} onPointerEnter={this.highlightDoc} onPointerLeave={this.unHighlightDoc}>
                 <div className="searchItem-body" onClick={this.onClick}>
                     <div className="searchItem-title-container">
-                        <div className="searchItem-title">{StrCast(this.targetDoc.title)}</div>
-                        <div className="searchItem-highlighting">{StrCast(this.targetDoc.highlighting).length ? "Matched fields:" + StrCast(this.targetDoc.highlighting) : Cast(this.targetDoc.lines, listSpec("string"))!.length ? Cast(this.targetDoc.lines, listSpec("string"))![0] : ""}</div>
-                        {Cast(this.targetDoc.lines, listSpec("string"))!.filter((m, i) => i).map((l, i) => <div id={i.toString()} className="searchItem-highlighting">{l}</div>)}
+                        <div className="searchItem-title" style={{height:"10px", overflow:"hidden", textOverflow:"ellipsis"}}>{StrCast(this.targetDoc.title)}</div>
+                        <div className="searchItem-highlighting">
+                        {StrCast(this.targetDoc.highlighting).length ? "Matched fields:" + StrCast(this.targetDoc.highlighting) : Cast(this.targetDoc.lines, listSpec("string"))!.length ? Cast(this.targetDoc.lines, listSpec("string"))![0] : ""}</div>
+                        {/* {Cast(this.targetDoc.lines, listSpec("string"))!.filter((m, i) => i).map((l, i) => <div id={i.toString()} className="searchItem-highlighting">{l}</div>)} */}
                     </div>
                 </div>
                 <div className="searchItem-info" style={{ width: this._useIcons ? "30px" : "100%" }}>
diff --git a/src/server/websocket.ts b/src/server/websocket.ts
index 87af5fa06..19c98454c 100644
--- a/src/server/websocket.ts
+++ b/src/server/websocket.ts
@@ -236,7 +236,6 @@ export namespace WebSocket {
     };
 
     function ToSearchTerm(val: any): { suffix: string, value: any } | undefined {
-        // console.log(val);
 
         if (val === null || val === undefined) {
             return;
@@ -258,7 +257,6 @@ export namespace WebSocket {
             suffix = suffix[0];
 
         }
-        // console.log(suffix);
         return { suffix, value: val };
     }
 
@@ -273,9 +271,7 @@ export namespace WebSocket {
         if (!docfield) {
             return;
         }
-        //console.log(diff);
         const update: any = { id: diff.id };
-        console.log(update);
         let dynfield = false;
         for (let key in docfield) {
             if (!key.startsWith("fields.")) continue;
@@ -295,7 +291,6 @@ export namespace WebSocket {
                     update[key] = { set: value };
                 }
                 update[key + suffix] = { set: value };
-                console.log(update);
             }
         }
         if (dynfield) {
-- 
cgit v1.2.3-70-g09d2


From 52f88acb3141e15b1063f489273d94d98447c87a Mon Sep 17 00:00:00 2001
From: Andy Rickert <andrew_rickert@brown.edu>
Date: Tue, 9 Jun 2020 19:27:47 -0400
Subject: more bugfixing'

---
 src/client/util/CurrentUserUtils.ts    |  5 ++---
 src/client/util/SearchUtil.ts          |  2 --
 src/client/views/search/SearchBox.tsx  | 26 +++++++++++++++++++-------
 src/client/views/search/SearchItem.tsx | 10 ++++++++++
 4 files changed, 31 insertions(+), 12 deletions(-)

(limited to 'src/client/util')

diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index abbcd9352..9e19962f8 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -43,7 +43,7 @@ export class CurrentUserUtils {
         if (doc["template-button-query"] === undefined) {
             const queryTemplate = Docs.Create.MulticolumnDocument(
                 [
-                    Docs.Create.SearchDocument({ title: "query", _height: 200 }),
+                    Docs.Create.SearchDocument({ _viewType: CollectionViewType.Stacking, title: "query", _height: 200 }),
                     Docs.Create.FreeformDocument([], { title: "data", _height: 100, _LODdisable: true })
                 ],
                 { _width: 400, _height: 300, title: "queryView", _chromeStatus: "disabled", _xMargin: 3, _yMargin: 3, hideFilterView: true }
@@ -342,7 +342,6 @@ export class CurrentUserUtils {
             { title: "Drag a document previewer", label: "Prev", icon: "expand", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory,true)', dragFactory: doc.emptyDocHolder as Doc },
             { title: "Toggle a Calculator REPL", label: "repl", icon: "calculator", click: 'addOverlayWindow("ScriptingRepl", { x: 300, y: 100, width: 200, height: 200, title: "Scripting REPL" })' },
             { title: "Connect a Google Account", label: "Google Account", icon: "external-link-alt", click: 'GoogleAuthenticationManager.Instance.fetchOrGenerateAccessToken(true)' },
-            { title: "query", icon: "bolt", label: "Col", ignoreClick: true, drag: 'Docs.Create.SearchDocument({ _width: 200, title: "an image of a cat" })' },
         ];
 
     }
@@ -560,7 +559,7 @@ export class CurrentUserUtils {
             doc["tabs-button-search"] = new PrefetchProxy(Docs.Create.ButtonDocument({
                 _width: 50, _height: 25, title: "Search", _fontSize: 10,
                 letterSpacing: "0px", textTransform: "unset", borderRounding: "5px 5px 0px 0px", boxShadow: "3px 3px 0px rgb(34, 34, 34)",
-                sourcePanel: new PrefetchProxy(Docs.Create.SearchDocument({ title: "sidebar search stack", })) as any as Doc,
+                sourcePanel: new PrefetchProxy(Docs.Create.SearchDocument({_viewType: CollectionViewType.Stacking, title: "sidebar search stack", })) as any as Doc,
                 searchFileTypes: new List<string>([DocumentType.RTF, DocumentType.IMG, DocumentType.PDF, DocumentType.VID, DocumentType.WEB, DocumentType.SCRIPTING]),
                 targetContainer: new PrefetchProxy(sidebarContainer) as any as Doc,
                 lockedPosition: true,
diff --git a/src/client/util/SearchUtil.ts b/src/client/util/SearchUtil.ts
index ef6665c43..e4c4f5fb7 100644
--- a/src/client/util/SearchUtil.ts
+++ b/src/client/util/SearchUtil.ts
@@ -38,7 +38,6 @@ export namespace SearchUtil {
     export async function Search(query: string, returnDocs: boolean, options: SearchParams = {}) {
         query = query || "*"; //If we just have a filter query, search for * as the query
         const rpquery = Utils.prepend("/dashsearch");
-        console.log({ qs: { ...options, q: query } });
         const gotten = await rp.get(rpquery, { qs: { ...options, q: query } });
         const result: IdSearchResult = gotten.startsWith("<") ? { ids: [], docs: [], numFound: 0, lines: [] } : JSON.parse(gotten);
         if (!returnDocs) {
@@ -132,7 +131,6 @@ export namespace SearchUtil {
         });
         const result: IdSearchResult = JSON.parse(response);
         const { ids, numFound, highlighting } = result;
-        //console.log(ids.length);
         const docMap = await DocServer.GetRefFields(ids);
         const docs: Doc[] = [];
         for (const id of ids) {
diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx
index 30d4fd5aa..5ec911221 100644
--- a/src/client/views/search/SearchBox.tsx
+++ b/src/client/views/search/SearchBox.tsx
@@ -119,9 +119,18 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
         if (!_scriptingGlobals.hasOwnProperty("updateIcon")){
             Scripting.addGlobal(this.updateIcon);
         }
+        if (!_scriptingGlobals.hasOwnProperty("updateTitleStatus")){
+            Scripting.addGlobal(this.updateTitleStatus);
+        }
+        if (!_scriptingGlobals.hasOwnProperty("updateAuthorStatus")){
+            Scripting.addGlobal(this.updateAuthorStatus);
+        }
+        if (!_scriptingGlobals.hasOwnProperty("updateDeletedStatus")){
+            Scripting.addGlobal(this.updateDeletedStatus);
+        }
+
 
         this.resultsScrolled = this.resultsScrolled.bind(this);
-        this.rootDoc._viewType = CollectionViewType.Stacking;
 
        new PrefetchProxy(Docs.Create.SearchItemBoxDocument({ title: "search item template", 
        backgroundColor: "transparent", _xMargin: 5, _height: 46, isTemplateDoc: true, isTemplateForField: "data" }));
@@ -612,6 +621,10 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
         if ((this._numTotalResults === 0 || this._results.length === 0) && this._openNoResults) {
             this._visibleElements = [<div className="no-result">No Search Results</div>];
             //this._visibleDocuments= Docs.Create.
+            let noResult= Docs.Create.TextDocument("",{title:"noResult"})
+            noResult.targetDoc=noResult;
+            noResult.isBucket =false;
+            Doc.AddDocToList(this.dataDoc, this.props.fieldKey, noResult);
             return;
         }
 
@@ -893,7 +906,7 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
     updateAuthorStatus() { this._authorFieldStatus = !this._authorFieldStatus; }
 
     @action.bound
-    updateDataStatus() { this._deletedDocsStatus = !this._deletedDocsStatus; }
+    updateDeletedStatus() { this._deletedDocsStatus = !this._deletedDocsStatus; }
 
     addButtonDoc = (doc: Doc) => Doc.AddDocToList(CurrentUserUtils.UserDocument.expandingButtons as Doc, "data", doc);
     remButtonDoc = (doc: Doc) => Doc.RemoveDocFromList(CurrentUserUtils.UserDocument.expandingButtons as Doc, "data", doc);
@@ -1079,10 +1092,10 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
             borderRounding: "16px", border:"1px solid grey", color:"white", hovercolor: "rgb(170, 170, 163)", letterSpacing: "2px",
             _fontSize: 7,
         }))as any as Doc;
-        doc.title=button({ title: "Title", onClick:ScriptField.MakeScript("this.updateTitleStatus")});
-        doc.deleted=button({ title: "Deleted", onClick:ScriptField.MakeScript(`handleNodeChange()`)});
-        doc.author = button({ title: "Author", onClick:ScriptField.MakeScript("this.updateTitleStatus")});
-
+        doc.title=button({ title: "Title", onClick:ScriptField.MakeScript("updateTitleStatus(self)")});
+        doc.deleted=button({ title: "Deleted", onClick:ScriptField.MakeScript("updateDeletedStatus(self)")});
+        doc.author = button({ title: "Author", onClick:ScriptField.MakeScript("updateAuthorStatus(self)")});
+        
         let buttons = [doc.title as Doc, doc.deleted as Doc, doc.author as Doc];
 
         const dragCreators = Docs.Create.MasonryDocument(buttons, {
@@ -1175,7 +1188,6 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
                     height: this.resFull ? "auto" : this.resultHeight,
                     overflow: "visibile" // this.resFull ? "auto" : "visible"
                 }} ref={this._resultsRef}>
-                    {this._visibleElements.length}           
                 </div>
             </div>
         );
diff --git a/src/client/views/search/SearchItem.tsx b/src/client/views/search/SearchItem.tsx
index 9d5d64dca..74750a40c 100644
--- a/src/client/views/search/SearchItem.tsx
+++ b/src/client/views/search/SearchItem.tsx
@@ -371,6 +371,16 @@ export class SearchItem extends ViewBoxBaseComponent<FieldViewProps, SearchSchem
             </button>
             </div>
         }
+        else if (this.targetDoc.isBucket === false){
+            this.props.Document._chromeStatus='disabled';
+            return      <div className="searchItem">
+                <div className="searchItem-body" >
+                <div className="searchItem-title-container">
+                <div className="searchItem-title" style={{height:"10px", overflow:"hidden", textOverflow:"ellipsis"}}>No Search Results</div>
+                </div>
+                </div>
+            </div>
+        }
         else {
         return <div className="searchItem-overview" onPointerDown={this.pointerDown} onContextMenu={this.onContextMenu}>
             <div className="searchItem" onPointerDown={this.nextHighlight} onPointerEnter={this.highlightDoc} onPointerLeave={this.unHighlightDoc}>
-- 
cgit v1.2.3-70-g09d2


From 7a291cbffb9e609633759cfff8b459e1a32b4fc3 Mon Sep 17 00:00:00 2001
From: Andy Rickert <andrew_rickert@brown.edu>
Date: Thu, 25 Jun 2020 17:23:43 -0400
Subject: bugfixing search, refreshing docs, ghost buckets, etc.

---
 src/client/documents/Documents.ts                  |  1 -
 src/client/util/CurrentUserUtils.ts                |  6 ++--
 .../views/nodes/formattedText/FormattedTextBox.tsx | 15 ++++++----
 src/client/views/search/SearchBox.tsx              | 35 ++++++++++++++--------
 4 files changed, 35 insertions(+), 22 deletions(-)

(limited to 'src/client/util')

diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index c32d187a0..ebdae1ce5 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -181,7 +181,6 @@ export interface DocumentOptions {
     flexDirection?: "unset" | "row" | "column" | "row-reverse" | "column-reverse";
     selectedIndex?: number;
     syntaxColor?: string; // can be applied to text for syntax highlighting all matches in the text
-    searchText?: string, //for searchbox
     searchQuery?: string, // for quersyBox
     filterQuery?: filterData,
     linearViewIsExpanded?: boolean; // is linear view expanded
diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index a7cb29815..0e0942496 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -42,10 +42,10 @@ export class CurrentUserUtils {
         if (doc["template-button-query"] === undefined) {
             const queryTemplate = Docs.Create.MulticolumnDocument(
                 [
-                    Docs.Create.SearchDocument({ _viewType: CollectionViewType.Stacking, title: "query", _height: 200 }),
+                    Docs.Create.SearchDocument({ _viewType: CollectionViewType.Stacking, ignoreClick: true, forceActive: true, lockedPosition: true, title: "query", _height: 200 }),
                     Docs.Create.FreeformDocument([], { title: "data", _height: 100, _LODdisable: true })
                 ],
-                { _width: 400, _height: 300, title: "queryView", _chromeStatus: "disabled", _xMargin: 3, _yMargin: 3, hideFilterView: true }
+                { _width: 400, _height: 300, title: "queryView", _chromeStatus: "disabled", _xMargin: 3,  _yMargin: 3, hideFilterView: true }
             );
             queryTemplate.isTemplateDoc = makeTemplate(queryTemplate);
             doc["template-button-query"] = CurrentUserUtils.ficon({
@@ -628,7 +628,7 @@ export class CurrentUserUtils {
             doc["tabs-button-search"] = new PrefetchProxy(Docs.Create.ButtonDocument({
                 _width: 50, _height: 25, title: "Search", _fontSize: 10,
                 letterSpacing: "0px", textTransform: "unset", borderRounding: "5px 5px 0px 0px", boxShadow: "3px 3px 0px rgb(34, 34, 34)",
-                sourcePanel: new PrefetchProxy(Docs.Create.SearchDocument({_viewType: CollectionViewType.Stacking, title: "sidebar search stack", })) as any as Doc,
+                sourcePanel: new PrefetchProxy(Docs.Create.SearchDocument({ignoreClick: true, childDropAction: "alias", lockedPosition: true, _viewType: CollectionViewType.Stacking, title: "sidebar search stack", })) as any as Doc,
                 searchFileTypes: new List<string>([DocumentType.RTF, DocumentType.IMG, DocumentType.PDF, DocumentType.VID, DocumentType.WEB, DocumentType.SCRIPTING]),
                 targetContainer: new PrefetchProxy(sidebarContainer) as any as Doc,
                 lockedPosition: true,
diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
index 6b522f6d1..ca7db2cd4 100644
--- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx
+++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
@@ -261,20 +261,23 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp
             let tr = this._editorView.state.tr;
             const flattened: TextSelection[] = [];
             res.map(r => r.map(h => flattened.push(h)));
+
+            
+            const lastSel = Math.min(flattened.length - 1, this._searchIndex);
+            flattened.forEach((h: TextSelection, ind: number) => tr = tr.addMark(h.from, h.to, ind === lastSel ? activeMark : mark));
+            this._searchIndex = ++this._searchIndex > flattened.length - 1 ? 0 : this._searchIndex;
+            this._editorView.dispatch(tr.setSelection(new TextSelection(tr.doc.resolve(flattened[lastSel].from), tr.doc.resolve(flattened[lastSel].to))).scrollIntoView());
+            
+            console.log(this._searchIndex, length);
             if (this._searchIndex>1){
                 this._searchIndex+=-2;
             }
             else if (this._searchIndex===1){
                 this._searchIndex=length-1;
             }
-            else if (this._searchIndex===0){
+            else if (this._searchIndex===0 && length!==1){
                 this._searchIndex=length-2;
             }
-            
-            const lastSel = Math.min(flattened.length - 1, this._searchIndex);
-            flattened.forEach((h: TextSelection, ind: number) => tr = tr.addMark(h.from, h.to, ind === lastSel ? activeMark : mark));
-            this._searchIndex = ++this._searchIndex > flattened.length - 1 ? 0 : this._searchIndex;
-            this._editorView.dispatch(tr.setSelection(new TextSelection(tr.doc.resolve(flattened[lastSel].from), tr.doc.resolve(flattened[lastSel].to))).scrollIntoView());
             let index = this._searchIndex;
 
             Doc.GetProto(this.dataDoc).searchIndex = index;
diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx
index 37d358b02..d1e1818c2 100644
--- a/src/client/views/search/SearchBox.tsx
+++ b/src/client/views/search/SearchBox.tsx
@@ -315,6 +315,7 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
         console.log(selectedDocs);
         selectedDocs.forEach(async element => {
             const layout: string = StrCast(element.props.Document.layout);
+            console.log(layout);
             //checks if selected view (element) is a collection. if it is, adds to list to search through
             if (layout.indexOf("Collection") > -1) {
                 //makes sure collections aren't added more than once
@@ -391,13 +392,13 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
         this._isSorted=[];
         this._visibleElements = [];
         this._visibleDocuments = [];
-        console.log(this._timeout);
-        
-        if (this._timeout){clearTimeout(this._timeout); this._timeout=undefined};
-        this._timeout= setTimeout(()=>{
-            console.log("Resubmitting search");
-            this.submitSearch();
-        }, 10000);
+        if (StrCast(this.props.Document.searchQuery)){
+            if (this._timeout){clearTimeout(this._timeout); this._timeout=undefined};
+            this._timeout= setTimeout(()=>{
+                console.log("Resubmitting search");
+                this.submitSearch();
+            }, 60000);
+            }
 
         if (query !== "") {
             this._endIndex = 12;
@@ -442,7 +443,7 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
             }
         }
 
-        let bucket = Docs.Create.StackingDocument([],{ _viewType:CollectionViewType.Stacking,title: `default bucket`});
+        let bucket = Docs.Create.StackingDocument([],{ _viewType:CollectionViewType.Stacking, ignoreClick: true, forceActive: true, lockedPosition: true,title: `default bucket`});
         bucket._viewType === CollectionViewType.Stacking;
         bucket._height=185;
         bucket.bucketfield = "results";
@@ -452,7 +453,7 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
         this.bucketcount[0]=0;
         
         if (this.firststring!==""){
-        let firstbucket = Docs.Create.StackingDocument([],{ _viewType:CollectionViewType.Stacking,title: this.firststring });
+        let firstbucket = Docs.Create.StackingDocument([],{ _viewType:CollectionViewType.Stacking, ignoreClick: true, forceActive: true, lockedPosition: true, title: this.firststring });
         firstbucket._height=185;
 
         firstbucket._viewType === CollectionViewType.Stacking;
@@ -465,7 +466,7 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
         }
 
         if (this.secondstring!==""){
-        let secondbucket = Docs.Create.StackingDocument([],{ _viewType:CollectionViewType.Stacking,title: this.secondstring });
+        let secondbucket = Docs.Create.StackingDocument([],{ _viewType:CollectionViewType.Stacking, ignoreClick: true, forceActive: true, lockedPosition: true, title: this.secondstring });
         secondbucket._height=185;
         secondbucket._viewType === CollectionViewType.Stacking;
         secondbucket.bucketfield = this.secondstring;
@@ -475,21 +476,30 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
         this.bucketcount[2]=0;
         }
 
-        let webbucket = Docs.Create.StackingDocument([],{ _viewType:CollectionViewType.Stacking,title: this.secondstring });
+        let webbucket = Docs.Create.StackingDocument([],{ _viewType:CollectionViewType.Stacking, childDropAction: "alias", ignoreClick: true, lockedPosition: true, title: this.secondstring });
         webbucket._height=185;
         webbucket._viewType === CollectionViewType.Stacking;
         webbucket.bucketfield = "webs";
         webbucket.isBucket=true;
+        let old = Cast(this.props.Document.webbucket,Doc) as Doc;
+        let old2=Cast(this.props.Document.bing,Doc) as Doc;
+        if (old){
+            console.log("Cleanup");
+            Doc.RemoveDocFromList(old, this.props.fieldKey,old2);
+        }
         const textDoc = Docs.Create.WebDocument(`https://bing.com/search?q=${this.layoutDoc._searchString}`, {
                     _width: 200,  _nativeHeight: 962, _nativeWidth: 800, isAnnotating: false,
                     title: "bing", UseCors: true
                 });
+        this.props.Document.bing=textDoc;
+        this.props.Document.webbucket = webbucket;
         Doc.AddDocToList(this.dataDoc, this.props.fieldKey, webbucket);
         Doc.AddDocToList(webbucket, this.props.fieldKey, textDoc);
 
 
     }
 
+
     @observable buckets:Doc[]|undefined;
 
     getAllResults = async (query: string) => {
@@ -539,6 +549,7 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
                             const highlight = highlights[doc[Id]];
                             const line = lines.get(doc[Id]) || [];
                             const hlights = highlight ? Object.keys(highlight).map(key => key.substring(0, key.length - 2)) : [];
+                            doc? console.log(Cast(doc.context, Doc)) : null;
                             if (this.findCommonElements(hlights)){
                             }
                             else{
@@ -619,7 +630,7 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
             basicWordStatus: this._basicWordStatus,
             icons: this._icons,
         }
-        return Docs.Create.SearchDocument({ _autoHeight: true, _viewType: CollectionViewType.Stacking , title: StrCast(this.layoutDoc._searchString), filterQuery: filter, searchQuery: StrCast(this.layoutDoc._searchString) });
+        return Docs.Create.SearchDocument({ _autoHeight: true, _viewType: CollectionViewType.Stacking , title: StrCast(this.layoutDoc._searchString), searchQuery: StrCast(this.layoutDoc._searchString) });
     }
 
     @action.bound
-- 
cgit v1.2.3-70-g09d2


From 981f1f164d816e60312d50912acb8de89fbcd912 Mon Sep 17 00:00:00 2001
From: geireann <60007097+geireann@users.noreply.github.com>
Date: Fri, 3 Jul 2020 13:10:44 +0800
Subject: highlight active presentation + UI Changes

---
 src/client/util/DocumentManager.ts                 |   2 +-
 src/client/views/MainView.tsx                      |   4 +-
 src/client/views/nodes/PresBox.scss                |  91 +++++++++++++++-
 src/client/views/nodes/PresBox.tsx                 | 114 ++++++++++++++++++++-
 .../views/presentationview/PresElementBox.scss     |  39 ++++---
 .../views/presentationview/PresElementBox.tsx      |  23 +++--
 6 files changed, 242 insertions(+), 31 deletions(-)

(limited to 'src/client/util')

diff --git a/src/client/util/DocumentManager.ts b/src/client/util/DocumentManager.ts
index fb5d1717e..55ee5b4cf 100644
--- a/src/client/util/DocumentManager.ts
+++ b/src/client/util/DocumentManager.ts
@@ -170,7 +170,7 @@ export class DocumentManager {
                 const targetDocContextView = getFirstDocView(targetDocContext);
                 targetDocContext._scrollY = 0;  // this will force PDFs to activate and load their annotations / allow scrolling
                 if (targetDocContextView) { // we found a context view and aren't forced to create a new one ... focus on the context first..
-                    targetDocContext._viewTransition = "transform 500ms";
+                    targetDocContext._viewTransition = "transform 10000ms";
                     targetDocContextView.props.focus(targetDocContextView.props.Document, willZoom);
 
                     // now find the target document within the context
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index a0ce052f7..d96bcfba9 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -5,7 +5,7 @@ import {
     faQuestionCircle, faArrowLeft, faArrowRight, faArrowDown, faArrowUp, faBolt, faBullseye, faCaretUp, faCat, faCheck, faChevronRight, faClipboard, faClone, faCloudUploadAlt,
     faCommentAlt, faCompressArrowsAlt, faCut, faEllipsisV, faEraser, faExclamation, faFileAlt, faFileAudio, faFilePdf, faFilm, faFilter, faFont, faGlobeAsia, faHighlighter,
     faLongArrowAltRight, faMicrophone, faMousePointer, faMusic, faObjectGroup, faPause, faPen, faPenNib, faPhone, faPlay, faPortrait, faRedoAlt, faStamp, faStickyNote,
-    faThumbtack, faTree, faTv, faUndoAlt, faVideo, faAsterisk, faBrain, faImage, faPaintBrush, faTimes, faEye, faArrowsAlt, faQuoteLeft, faSortAmountDown, faAngleDown, faAngleUp
+    faThumbtack, faTree, faTv, faUndoAlt, faVideo, faAsterisk, faBrain, faImage, faPaintBrush, faTimes, faEye, faArrowsAlt, faQuoteLeft, faSortAmountDown, faAngleDown, faAngleUp, faSearchPlus
 } from '@fortawesome/free-solid-svg-icons';
 import { ANTIMODEMENU_HEIGHT } from './globalCssVariables.scss';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
@@ -142,7 +142,7 @@ export class MainView extends React.Component {
             faQuestionCircle, faArrowLeft, faArrowRight, faArrowDown, faArrowUp, faBolt, faBullseye, faCaretUp, faCat, faCheck, faChevronRight, faClipboard, faClone, faCloudUploadAlt,
             faCommentAlt, faCompressArrowsAlt, faCut, faEllipsisV, faEraser, faExclamation, faFileAlt, faFileAudio, faFilePdf, faFilm, faFilter, faFont, faGlobeAsia, faHighlighter,
             faLongArrowAltRight, faMicrophone, faMousePointer, faMusic, faObjectGroup, faPause, faPen, faPenNib, faPhone, faPlay, faPortrait, faRedoAlt, faStamp, faStickyNote, faTrashAlt, faAngleRight, faBell,
-            faThumbtack, faTree, faTv, faUndoAlt, faVideo, faAsterisk, faBrain, faImage, faPaintBrush, faTimes, faEye, faArrowsAlt, faQuoteLeft, faSortAmountDown, faAngleDown, faAngleUp);
+            faThumbtack, faTree, faTv, faUndoAlt, faVideo, faAsterisk, faBrain, faImage, faPaintBrush, faTimes, faEye, faArrowsAlt, faQuoteLeft, faSortAmountDown, faAngleDown, faAngleUp, faSearchPlus);
         this.initEventListeners();
         this.initAuthenticationRouters();
     }
diff --git a/src/client/views/nodes/PresBox.scss b/src/client/views/nodes/PresBox.scss
index d48000e16..9b040e6fe 100644
--- a/src/client/views/nodes/PresBox.scss
+++ b/src/client/views/nodes/PresBox.scss
@@ -1,5 +1,6 @@
 .presBox-cont {
     position: absolute;
+    display: block;
     pointer-events: inherit;
     z-index: 2;
     box-shadow: #AAAAAA .2vw .2vw .4vw;
@@ -12,11 +13,82 @@
     transition: 0.7s opacity ease;
 
     .presBox-listCont {
-        position: absolute;
+        position: relative;
         height: calc(100% - 25px);
         width: 100%;
+        margin-top: 10px;
+    }
+
+    .presBox-highlight {
+        position: absolute;
+        top: 0;
+        height: 0;
+        width: 100%;
+        margin-top: 10px;
+        background-color: #ffe4b3;
     }
+
+    .presBox-toolbar {
+        position: relative;
+        display: inline-flex;
+        align-items: center;
+        height: 30px;
+        width: 100%;
+        color: white;
+        background-color: #323232;
+
+        .toolbar-button {
+            margin-left: 10px;
+            margin-right: 10px;
+            letter-spacing: 0;
+            display: flex;
+            align-items: center;
+
+            .toolbar-dropdown {
+                margin-left: 5px;
+            }
+
+            .toolbar-transitionTools {
+                display: none;
+            }
+
+            .toolbar-transitionTools.active {
+                position: absolute;
+                display: block;
+                top: 30px;
+                transform: translate(-10px, 0px);
+                border-top: solid 3px grey;
+                background-color: #323232;
+                width: 105px;
+                height: max-content;
+                z-index: 100;
+
+                .toolbar-transitionButtons {
+                    display: block;
+
+                    .toolbar-transition {
+                        display: flex;
+                        font-size: 10;
+                        width: 100;
+                        background-color: rgba(0, 0, 0, 0);
+                        min-width: max-content;
+
+                        .toolbar-icon {
+                            margin-right: 5px;
+                        }
+                    }
+                }
+            }
+        }
+
+        .toolbar-divider {
+            border-left: 1px solid white;
+            height: 80%;
+        }
+    }
+
     .presBox-buttons {
+        position: relative;
         width: 100%;
         background: gray;
         padding-top: 5px;
@@ -24,6 +96,7 @@
         display: grid;
         grid-column-end: 4;
         grid-column-start: 1;
+
         .presBox-viewPicker {
             height: 25;
             position: relative;
@@ -31,10 +104,12 @@
             grid-column: 1/2;
             min-width: 15px;
         }
+
         select {
             background: #323232;
             color: white;
         }
+
         .presBox-button {
             margin-right: 2.5%;
             margin-left: 2.5%;
@@ -44,10 +119,12 @@
             align-items: center;
             background: #323232;
             color: white;
+
             svg {
                 margin: auto;
             }
         }
+
         .collectionViewBaseChrome-viewPicker {
             min-width: 50;
             width: 5%;
@@ -56,17 +133,21 @@
             display: inline-block;
         }
     }
-    .presBox-backward, .presBox-forward {
+
+    .presBox-backward,
+    .presBox-forward {
         width: 25px;
         border-radius: 5px;
-        top:50%;
+        top: 50%;
         position: absolute;
         display: inline-block;
     }
+
     .presBox-backward {
-        left:5;
+        left: 5;
     }
+
     .presBox-forward {
-        right:5;
+        right: 5;
     }
 }
\ No newline at end of file
diff --git a/src/client/views/nodes/PresBox.tsx b/src/client/views/nodes/PresBox.tsx
index 8818d375e..30b1e0058 100644
--- a/src/client/views/nodes/PresBox.tsx
+++ b/src/client/views/nodes/PresBox.tsx
@@ -20,6 +20,7 @@ import { PrefetchProxy } from "../../../fields/Proxy";
 import { ScriptField } from "../../../fields/ScriptField";
 import { Scripting } from "../../util/Scripting";
 import { InkingStroke } from "../InkingStroke";
+import { HighlightSpanKind } from "typescript";
 
 type PresBoxSchema = makeInterface<[typeof documentSchema]>;
 const PresBoxDocument = makeInterface(documentSchema);
@@ -35,7 +36,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
         super(props);
         if (!this.presElement) { // create exactly one presElmentBox template to use by any and all presentations.
             Doc.UserDoc().presElement = new PrefetchProxy(Docs.Create.PresElementBoxDocument({
-                title: "pres element template", backgroundColor: "transparent", _xMargin: 5, _height: 46, isTemplateDoc: true, isTemplateForField: "data"
+                title: "pres element template", backgroundColor: "transparent", _xMargin: 0, _height: 20, isTemplateDoc: true, isTemplateForField: "data"
             }));
             // this script will be called by each presElement to get rendering-specific info that the PresBox knows about but which isn't written to the PresElement
             // this is a design choice -- we could write this data to the presElements which would require a reaction to keep it up to date, and it would prevent
@@ -209,7 +210,23 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
                 this.layoutDoc.presStatus = true;
                 this.startPresentation(index);
             }
-
+            const heights: number[] = [];
+            this.childDocs.forEach(doc => {
+                if (doc.presExpandInlineButton) heights.push(155);
+                else heights.push(58);
+            });
+            let sum: number = 65;
+            for (let i = 0; i < this.itemIndex; i++) {
+                sum += heights[i];
+            }
+            const highlight = document.getElementById("presBox-hightlight");
+            if (this.itemIndex === 0 && highlight) highlight.style.top = "65";
+            else if (highlight) highlight.style.top = sum.toString();
+            if (this.childDocs[this.itemIndex].presExpandInlineButton && highlight) highlight.style.height = "156";
+            else if (highlight) highlight.style.height = "58";
+            console.log(highlight?.style.top);
+            console.log(highlight?.className);
+            console.log(sum);
             this.navigateToElement(this.childDocs[index], fromDoc);
             this.hideIfNotPresented(index);
             this.showAfterPresented(index);
@@ -296,9 +313,76 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
     active = (outsideReaction?: boolean) => ((Doc.GetSelectedTool() === InkTool.None && !this.layoutDoc.isBackground) &&
         (this.layoutDoc.forceActive || this.props.isSelected(outsideReaction) || this._isChildActive || this.props.renderDepth === 0) ? true : false)
 
+
+    @observable private transitionTools: boolean = false;
+    // For toggling transition toolbar
+    @action
+    toggleTransitionTools = () => this.transitionTools = !this.transitionTools
+
+    @undoBatch
+    @action
+    toolbarTest = () => {
+        const presTargetDoc = Cast(this.childDocs[this.itemIndex].presentationTargetDoc, Doc, null);
+        console.log("title: " + presTargetDoc.title);
+        console.log("index: " + this.itemIndex);
+    }
+
+    @observable private activeItem = this.itemIndex ? this.childDocs[this.itemIndex] : null;
+
+
+    /**
+    * The function that is called on click to turn zoom option of docs on/off.
+    */
+    @action
+    onZoomDocumentClick = (e: React.MouseEvent) => {
+        e.stopPropagation();
+        const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null);
+        activeItem.presZoomButton = !activeItem.presZoomButton;
+        if (activeItem.presZoomButton) {
+            activeItem.presNavButton = false;
+        }
+    }
+
+    /**
+     * The function that is called on click to turn navigation option of docs on/off.
+     */
+    @action
+    onNavigateDocumentClick = (e: React.MouseEvent) => {
+        e.stopPropagation();
+        const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null);
+        activeItem.presNavButton = !activeItem.presNavButton;
+        if (activeItem.presNavButton) {
+            activeItem.presZoomButton = false;
+        }
+    }
+
+    /**
+     * The function that is called on click to turn fading document after presented option on/off.
+     * It also makes sure that the option swithches from hide-after to this one, since both
+     * can't coexist.
+     */
+    @action
+    onFadeDocumentAfterPresentedClick = (e: React.MouseEvent) => {
+        e.stopPropagation();
+        const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null);
+        const targetDoc = Cast(activeItem.presentationTargetDoc, Doc, null);
+        activeItem.presFadeButton = !activeItem.presFadeButton;
+        if (!activeItem.presFadeButton) {
+            if (targetDoc) {
+                targetDoc.opacity = 1;
+            }
+        } else {
+            activeItem.presHideAfterButton = false;
+            if (this.rootDoc.presStatus && targetDoc) {
+                targetDoc.opacity = 0.5;
+            }
+        }
+    }
+
+
     render() {
         // console.log("render = " + this.layoutDoc.title + " " + this.layoutDoc.presStatus);
-        // const presOrderedDocs = DocListCast(this.rootDoc.presOrderedDocs);
+        // const presOrderedDocs = DocListCast(activeItem.presOrderedDocs);
         // if (presOrderedDocs.length != this.childDocs.length || presOrderedDocs.some((pd, i) => pd !== this.childDocs[i])) {
         //     this.rootDoc.presOrderedDocs = new List<Doc>(this.childDocs.slice());
         // }
@@ -325,6 +409,30 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
                     <FontAwesomeIcon icon={"arrow-right"} />
                 </div>
             </div>
+            <div className="presBox-highlight" id="presBox-hightlight" />
+            <div className="presBox-toolbar">
+                <div className="toolbar-button"><FontAwesomeIcon icon={"plus"} onClick={this.toolbarTest} /></div>
+                <div className="toolbar-divider" />
+                <div className="toolbar-button"><FontAwesomeIcon icon={"plus"} onClick={this.toolbarTest} /></div>
+                <div className="toolbar-button"><FontAwesomeIcon icon={"object-group"} onClick={this.toolbarTest} /></div>
+                <div className="toolbar-button"><FontAwesomeIcon icon={"eye"} onClick={this.toolbarTest} /></div>
+                <div className="toolbar-divider" />
+                <div className="toolbar-button" onClick={this.toggleTransitionTools}>
+                    Transitions <FontAwesomeIcon className="toolbar-dropdown" icon={"angle-down"} />
+                    <div className={`toolbar-transitionTools ${this.transitionTools ? "active" : ""}`} onPointerDown={e => e.stopPropagation()}>
+                        <div className="toolbar-transitionButtons">
+                            <button title="Zoom" className={`toolbar-transition ${this.activeItem?.presZoomButton ? "active" : ""}`} onClick={this.onZoomDocumentClick}><FontAwesomeIcon className="toolbar-icon" icon={"search-plus"} onPointerDown={e => e.stopPropagation()} />Zoom</button>
+                            <button title="Navigate" className={`toolbar-transition ${this.activeItem?.presNavButton ? "active" : ""}`} onClick={this.onNavigateDocumentClick}><FontAwesomeIcon className="toolbar-icon" icon={"location-arrow"} onPointerDown={e => e.stopPropagation()} />Navigate</button>
+                            <button title="Fade After" className={`toolbar-transition ${this.activeItem?.presFadeButton ? "active" : ""}`} onClick={this.onFadeDocumentAfterPresentedClick}><FontAwesomeIcon className="toolbar-icon" icon={"file-download"} onPointerDown={e => e.stopPropagation()} /> Fade After</button>
+                            {/* <button title="Hide After" className={pbi + (this.rootDoc.presHideAfterButton ? "-selected" : "")} onClick={this.onHideDocumentAfterPresentedClick}><FontAwesomeIcon icon={"file-download"} onPointerDown={e => e.stopPropagation()} /></button> */}
+                            {/* <button title="Hide Before" className={pbi + (this.rootDoc.presHideTillShownButton ? "-selected" : "")} onClick={this.onHideDocumentUntilPressClick}><FontAwesomeIcon icon={"file"} onPointerDown={e => e.stopPropagation()} /></button>
+                            <button title="Group With Up" className={pbi + (this.rootDoc.presGroupButton ? "-selected" : "")} onClick={e => { e.stopPropagation(); this.rootDoc.presGroupButton = !this.rootDoc.presGroupButton; }}><FontAwesomeIcon icon={"arrow-up"} onPointerDown={e => e.stopPropagation()} /></button>
+                            <button title="Progressivize" className={pbi + (this.rootDoc.pres ? "-selected" : "")} onClick={this.progressivize}><FontAwesomeIcon icon={"tasks"} onPointerDown={e => e.stopPropagation()} /></button> */}
+                        </div>
+                    </div>
+                </div>
+                <div className="toolbar-divider" />
+            </div>
             <div className="presBox-listCont" >
                 {mode !== CollectionViewType.Invalid ?
                     <CollectionView {...this.props}
diff --git a/src/client/views/presentationview/PresElementBox.scss b/src/client/views/presentationview/PresElementBox.scss
index e7aacb363..190b2c674 100644
--- a/src/client/views/presentationview/PresElementBox.scss
+++ b/src/client/views/presentationview/PresElementBox.scss
@@ -45,34 +45,44 @@
 }
 
 .presElementBox-buttons {
-    display: flow-root;
-    position: relative;
+    display: grid;
+    grid-template-rows: 15px;
+    top: 15px;
+    left: -20;
+    position: absolute;
     width: 100%;
     height: auto;
 
     .presElementBox-interaction {
-        color: gray;
-        float: left;
-        padding: 0px;
-        width: 20px;
-        height: 20px;
+        display: none;
     }
 
     .presElementBox-interaction-selected {
-        color: white;
+        color: grey;
+        background-color: rgba(0, 0, 0, 0);
         float: left;
         padding: 0px;
         width: 20px;
         height: 20px;
-        border: solid 1px darkgray;
     }
 }
 
-.presElementBox-name {
-    font-size: 12pxππ;
+.presElementBox-number {
+    font-size: 12px;
+    font-weight: 700;
+    left: -15;
     position: absolute;
     display: inline-block;
-    width: calc(100% - 45px);
+    overflow: hidden;
+}
+
+.presElementBox-name {
+    font-size: 13px;
+    position: relative;
+    left: 10px;
+    top: 4px;
+    letter-spacing: normal;
+    width: calc(100% - 60px);
     text-overflow: ellipsis;
     overflow: hidden;
     white-space: pre;
@@ -113,8 +123,8 @@
     position: absolute;
     border-radius: 100%;
     z-index: 300;
-    right: 3px;
-    bottom: 3px;
+    right: 26px;
+    top: 3px;
     width: 20px;
     height: 20px;
     display: flex;
@@ -129,6 +139,7 @@
     bottom: 3px;
     width: 20px;
     height: 20px;
+    z-index: 200;
     display: flex;
     justify-content: center;
     align-items: center;
diff --git a/src/client/views/presentationview/PresElementBox.tsx b/src/client/views/presentationview/PresElementBox.tsx
index bfbb8a18d..561ba7062 100644
--- a/src/client/views/presentationview/PresElementBox.tsx
+++ b/src/client/views/presentationview/PresElementBox.tsx
@@ -164,10 +164,18 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps, PresDoc
      */
     ScreenToLocalListTransform = (xCord: number, yCord: number) => [xCord, yCord];
 
+    @action
+    presExpandDocumentClick = () => {
+        const highlight = document.getElementById("presBox-hightlight");
+        this.rootDoc.presExpandInlineButton = !this.rootDoc.presExpandInlineButton;
+        if (highlight && this.rootDoc.presExpandInlineButton) highlight.style.height = "156";
+        else if (highlight && !this.rootDoc.presExpandInlineButton) highlight.style.height = "58";
+    }
+
     embedHeight = () => Math.min(this.props.PanelWidth() - 20, this.props.PanelHeight() - this.collapsedHeight);
     embedWidth = () => this.props.PanelWidth() - 20;
     /**
-     * The function that is responsible for rendering the a preview or not for this
+     * The function that is responsible for rendering a preview or not for this
      * presentation element.
      */
     @computed get renderEmbeddedInline() {
@@ -214,9 +222,12 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps, PresDoc
                 style={{ outlineWidth: Doc.IsBrushed(this.targetDoc) ? `1px` : "0px", }}
                 onClick={e => { this.props.focus(this.rootDoc); e.stopPropagation(); }}>
                 {treecontainer ? (null) : <>
-                    <strong className="presElementBox-name">
-                        {`${this.indexInPres + 1}. ${this.targetDoc?.title}`}
-                    </strong>
+                    <div className="presElementBox-number">
+                        {`${this.indexInPres + 1}.`}
+                    </div>
+                    <div className="presElementBox-name">
+                        {`${this.targetDoc?.title}`}
+                    </div>
                     <button
                         title="Close"
                         className="presElementBox-closeIcon"
@@ -227,7 +238,7 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps, PresDoc
                         }}>
                         <FontAwesomeIcon icon={"times"} onPointerDown={e => e.stopPropagation()} />
                     </button>
-                    <button title="Expand Inline" className={"presElementBox-expand" + (this.rootDoc.presExpandInlineButton ? "-selected" : "")} onClick={e => { e.stopPropagation(); this.rootDoc.presExpandInlineButton = !this.rootDoc.presExpandInlineButton; }}>
+                    <button title="Expand Inline" className={"presElementBox-expand" + (this.rootDoc.presExpandInlineButton ? "-selected" : "")} onClick={e => { e.stopPropagation(); this.presExpandDocumentClick(); }}>
                         <FontAwesomeIcon icon={(this.rootDoc.presExpandInlineButton ? "angle-up" : "angle-down")} onPointerDown={e => e.stopPropagation()} />
                     </button>
                     <br />
@@ -238,7 +249,7 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps, PresDoc
                     <button title="Hide Before" className={pbi + (this.rootDoc.presHideTillShownButton ? "-selected" : "")} onClick={this.onHideDocumentUntilPressClick}><FontAwesomeIcon icon={"file"} onPointerDown={e => e.stopPropagation()} /></button>
                     <button title="Fade After" className={pbi + (this.rootDoc.presFadeButton ? "-selected" : "")} onClick={this.onFadeDocumentAfterPresentedClick}><FontAwesomeIcon icon={"file-download"} onPointerDown={e => e.stopPropagation()} /></button>
                     <button title="Hide After" className={pbi + (this.rootDoc.presHideAfterButton ? "-selected" : "")} onClick={this.onHideDocumentAfterPresentedClick}><FontAwesomeIcon icon={"file-download"} onPointerDown={e => e.stopPropagation()} /></button>
-                    <button title="Group With Up" className={pbi + (this.rootDoc.presGroupButton ? "-selected" : "")} onClick={e => { e.stopPropagation(); this.rootDoc.presGroupButton = !this.rootDoc.presGroupButton; }}><FontAwesomeIcon icon={"arrow-up"} onPointerDown={e => e.stopPropagation()} /></button>
+                    {/* <button title="Group With Up" className={pbi + (this.rootDoc.presGroupButton ? "-selected" : "")} onClick={e => { e.stopPropagation(); this.rootDoc.presGroupButton = !this.rootDoc.presGroupButton; }}><FontAwesomeIcon icon={"arrow-up"} onPointerDown={e => e.stopPropagation()} /></button> */}
                     <button title="Progressivize" className={pbi + (this.rootDoc.pres ? "-selected" : "")} onClick={this.progressivize}><FontAwesomeIcon icon={"tasks"} onPointerDown={e => e.stopPropagation()} /></button>
                 </div>
                 {this.renderEmbeddedInline}
-- 
cgit v1.2.3-70-g09d2


From 195dde9364bf7b294d74b95e70c8c9a9dd19f891 Mon Sep 17 00:00:00 2001
From: Andy Rickert <andrew_rickert@brown.edu>
Date: Fri, 3 Jul 2020 16:06:07 -0400
Subject: search works with schema, fixed sorting...stil a lot of bugs

---
 src/client/util/CurrentUserUtils.ts                |   4 +-
 .../views/collections/CollectionSchemaView.scss    |   2 +-
 .../views/collections/CollectionSchemaView.tsx     |   4 +
 src/client/views/collections/SchemaTable.tsx       |  14 +-
 src/client/views/search/SearchBox.tsx              | 172 +++------------------
 5 files changed, 35 insertions(+), 161 deletions(-)

(limited to 'src/client/util')

diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index 276ad4c90..c152a4a64 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -42,7 +42,7 @@ export class CurrentUserUtils {
         if (doc["template-button-query"] === undefined) {
             const queryTemplate = Docs.Create.MulticolumnDocument(
                 [
-                    Docs.Create.SearchDocument({ _viewType: CollectionViewType.Stacking, ignoreClick: true, forceActive: true, lockedPosition: true, title: "query", _height: 200 }),
+                    Docs.Create.SearchDocument({ _viewType: CollectionViewType.Schema, ignoreClick: true, forceActive: true, lockedPosition: true, title: "query", _height: 200 }),
                     Docs.Create.FreeformDocument([], { title: "data", _height: 100, _LODdisable: true })
                 ],
                 { _width: 400, _height: 300, title: "queryView", _chromeStatus: "disabled", _xMargin: 3, _yMargin: 3, hideFilterView: true }
@@ -631,7 +631,7 @@ export class CurrentUserUtils {
             doc["tabs-button-search"] = new PrefetchProxy(Docs.Create.ButtonDocument({
                 _width: 50, _height: 25, title: "Search", _fontSize: 10,
                 letterSpacing: "0px", textTransform: "unset", borderRounding: "5px 5px 0px 0px", boxShadow: "3px 3px 0px rgb(34, 34, 34)",
-                sourcePanel: new PrefetchProxy(Docs.Create.SearchDocument({ ignoreClick: true, childDropAction: "alias", lockedPosition: true, _viewType: CollectionViewType.Stacking, title: "sidebar search stack", })) as any as Doc,
+                sourcePanel: new PrefetchProxy(Docs.Create.SearchDocument({ ignoreClick: true, childDropAction: "alias", lockedPosition: true, _viewType: CollectionViewType.Schema, title: "sidebar search stack", })) as any as Doc,
                 searchFileTypes: new List<string>([DocumentType.RTF, DocumentType.IMG, DocumentType.PDF, DocumentType.VID, DocumentType.WEB, DocumentType.SCRIPTING]),
                 targetContainer: new PrefetchProxy(sidebarContainer) as any as Doc,
                 lockedPosition: true,
diff --git a/src/client/views/collections/CollectionSchemaView.scss b/src/client/views/collections/CollectionSchemaView.scss
index 5226a60f1..688099b6c 100644
--- a/src/client/views/collections/CollectionSchemaView.scss
+++ b/src/client/views/collections/CollectionSchemaView.scss
@@ -6,7 +6,7 @@
     border-style: solid;
     border-radius: $border-radius;
     box-sizing: border-box;
-    position: absolute;
+    position: relative;
     top: 0;
     width: 100%;
     height: 100%;
diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx
index 9722f8f26..688313951 100644
--- a/src/client/views/collections/CollectionSchemaView.tsx
+++ b/src/client/views/collections/CollectionSchemaView.tsx
@@ -170,6 +170,10 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) {
     @action
     setColumnSort = (columnField: SchemaHeaderField, descending: boolean | undefined) => {
         const columns = this.columns;
+        columns.forEach(col => {
+            col.setDesc(undefined);
+        })
+
         const index = columns.findIndex(c => c.heading === columnField.heading);
         const column = columns[index];
         column.setDesc(descending);
diff --git a/src/client/views/collections/SchemaTable.tsx b/src/client/views/collections/SchemaTable.tsx
index 695965cb4..5a73e7501 100644
--- a/src/client/views/collections/SchemaTable.tsx
+++ b/src/client/views/collections/SchemaTable.tsx
@@ -128,7 +128,7 @@ export class SchemaTable extends React.Component<SchemaTableProps> {
     }
     @computed get sorted(): SortingRule[] {
         return this.props.columns.reduce((sorted, shf) => {
-            shf.desc && sorted.push({ id: shf.heading, desc: shf.desc });
+            shf.desc !== undefined && sorted.push({ id: shf.heading, desc: shf.desc });
             return sorted;
         }, [] as SortingRule[]);
     }
@@ -209,7 +209,7 @@ export class SchemaTable extends React.Component<SchemaTableProps> {
                 }}>
                 {col.heading}</div>;
 
-            const sortIcon = col.desc === undefined ? "circle" : col.desc === true ? "caret-down" : "caret-up";
+            const sortIcon = col.desc === undefined ? "caret-right" : col.desc === true ? "caret-down" : "caret-up";
 
             const header =
                 <div //className="collectionSchemaView-header"
@@ -217,7 +217,7 @@ export class SchemaTable extends React.Component<SchemaTableProps> {
                     className="collectionSchemaView-menuOptions-wrapper"
                     style={{
                         background: col.color, padding: "2px",
-                        display: "flex"
+                        display: "flex", cursor: "default"
                     }}>
                     <FontAwesomeIcon icon={icon} size="lg" style={{ display: "inline", paddingLeft: "7px" }} />
                     {/* <div className="keys-dropdown"
@@ -225,13 +225,13 @@ export class SchemaTable extends React.Component<SchemaTableProps> {
                     {keysDropdown}
                     {/* </div> */}
                     <div onClick={e => this.changeSorting(col)}
-                        style={{ paddingRight: "6px", display: "inline", zIndex: 1, background: "inherit" }}>
-                        <FontAwesomeIcon icon={sortIcon} size="sm" />
+                        style={{ width: 21, padding: 1, display: "inline", zIndex: 1, background: "inherit" }}>
+                        <FontAwesomeIcon icon={sortIcon} size="lg" />
                     </div>
-                    <div onClick={e => this.props.openHeader(col, e.clientX, e.clientY)}
+                    {/* <div onClick={e => this.props.openHeader(col, e.clientX, e.clientY)}
                         style={{ float: "right", paddingRight: "6px", zIndex: 1, background: "inherit" }}>
                         <FontAwesomeIcon icon={"compass"} size="sm" />
-                    </div>
+                    </div> */}
                 </div>;
 
             return {
diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx
index 5960a0502..d51d1bf0c 100644
--- a/src/client/views/search/SearchBox.tsx
+++ b/src/client/views/search/SearchBox.tsx
@@ -132,21 +132,21 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
 
         this.resultsScrolled = this.resultsScrolled.bind(this);
 
-        new PrefetchProxy(Docs.Create.SearchItemBoxDocument({
-            title: "search item template",
-            backgroundColor: "transparent", _xMargin: 5, _height: 46, isTemplateDoc: true, isTemplateForField: "data"
-        }));
-
-
-        if (!this.searchItemTemplate) { // create exactly one presElmentBox template to use by any and all presentations.
-            Doc.UserDoc().searchItemTemplate = new PrefetchProxy(Docs.Create.SearchItemBoxDocument({ title: "search item template", backgroundColor: "transparent", _xMargin: 5, _height: 46, isTemplateDoc: true, isTemplateForField: "data" }));
-            // this script will be called by each presElement to get rendering-specific info that the PresBox knows about but which isn't written to the PresElement
-            // this is a design choice -- we could write this data to the presElements which would require a reaction to keep it up to date, and it would prevent
-            // the preselement docs from being part of multiple presentations since they would all have the same field, or we'd have to keep per-presentation data
-            // stored on each pres element.  
-            (this.searchItemTemplate as Doc).lookupField = ScriptField.MakeFunction("lookupSearchBoxField(container, field, data)",
-                { field: "string", data: Doc.name, container: Doc.name });
-        }
+        // new PrefetchProxy(Docs.Create.SearchItemBoxDocument({
+        //     title: "search item template",
+        //     backgroundColor: "transparent", _xMargin: 5, _height: 46, isTemplateDoc: true, isTemplateForField: "data"
+        // }));
+
+
+        // if (!this.searchItemTemplate) { // create exactly one presElmentBox template to use by any and all presentations.
+        //     Doc.UserDoc().searchItemTemplate = new PrefetchProxy(Docs.Create.SearchItemBoxDocument({ title: "search item template", backgroundColor: "transparent", _xMargin: 5, _height: 46, isTemplateDoc: true, isTemplateForField: "data" }));
+        //     // this script will be called by each presElement to get rendering-specific info that the PresBox knows about but which isn't written to the PresElement
+        //     // this is a design choice -- we could write this data to the presElements which would require a reaction to keep it up to date, and it would prevent
+        //     // the preselement docs from being part of multiple presentations since they would all have the same field, or we'd have to keep per-presentation data
+        //     // stored on each pres element.  
+        //     (this.searchItemTemplate as Doc).lookupField = ScriptField.MakeFunction("lookupSearchBoxField(container, field, data)",
+        //         { field: "string", data: Doc.name, container: Doc.name });
+        // }
     }
     @observable setupButtons = false;
     componentDidMount = () => {
@@ -422,86 +422,6 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
     @observable secondstring: string = "";
 
     @observable bucketcount: number[] = [];
-
-    @action private makenewbuckets() {
-        console.log("new");
-        let highcount = 0;
-        let secondcount = 0;
-        this.firststring = "";
-        this.secondstring = "";
-        this.buckets = [];
-        this.bucketcount = [];
-        this.dataDoc[this.fieldKey] = new List<Doc>([]);
-        for (var key in this.new_buckets) {
-            if (this.new_buckets[key] > highcount) {
-                secondcount === highcount;
-                this.secondstring = this.firststring;
-                highcount = this.new_buckets[key];
-                this.firststring = key;
-            }
-            else if (this.new_buckets[key] > secondcount) {
-                secondcount = this.new_buckets[key];
-                this.secondstring = key;
-            }
-        }
-
-        let bucket = Docs.Create.StackingDocument([], { _viewType: CollectionViewType.Stacking, ignoreClick: true, forceActive: true, lockedPosition: true, title: `default bucket` });
-        bucket._viewType === CollectionViewType.Stacking;
-        bucket._height = 185;
-        bucket.bucketfield = "results";
-        bucket.isBucket = true;
-        Doc.AddDocToList(this.dataDoc, this.props.fieldKey, bucket);
-        this.buckets!.push(bucket);
-        this.bucketcount[0] = 0;
-
-        if (this.firststring !== "") {
-            let firstbucket = Docs.Create.StackingDocument([], { _viewType: CollectionViewType.Stacking, ignoreClick: true, forceActive: true, lockedPosition: true, title: this.firststring });
-            firstbucket._height = 185;
-
-            firstbucket._viewType === CollectionViewType.Stacking;
-            firstbucket.bucketfield = this.firststring;
-            firstbucket.isBucket = true;
-            Doc.AddDocToList(this.dataDoc, this.props.fieldKey, firstbucket);
-            this.buckets!.push(firstbucket);
-            this.bucketcount[1] = 0;
-
-        }
-
-        if (this.secondstring !== "") {
-            let secondbucket = Docs.Create.StackingDocument([], { _viewType: CollectionViewType.Stacking, ignoreClick: true, forceActive: true, lockedPosition: true, title: this.secondstring });
-            secondbucket._height = 185;
-            secondbucket._viewType === CollectionViewType.Stacking;
-            secondbucket.bucketfield = this.secondstring;
-            secondbucket.isBucket = true;
-            Doc.AddDocToList(this.dataDoc, this.props.fieldKey, secondbucket);
-            this.buckets!.push(secondbucket);
-            this.bucketcount[2] = 0;
-        }
-
-        let webbucket = Docs.Create.StackingDocument([], { _viewType: CollectionViewType.Stacking, childDropAction: "alias", ignoreClick: true, lockedPosition: true, title: this.secondstring });
-        webbucket._height = 185;
-        webbucket._viewType === CollectionViewType.Stacking;
-        webbucket.bucketfield = "webs";
-        webbucket.isBucket = true;
-        let old = Cast(this.props.Document.webbucket, Doc) as Doc;
-        let old2 = Cast(this.props.Document.bing, Doc) as Doc;
-        if (old) {
-            console.log("Cleanup");
-            Doc.RemoveDocFromList(old, this.props.fieldKey, old2);
-        }
-        const textDoc = Docs.Create.WebDocument(`https://bing.com/search?q=${this.layoutDoc._searchString}`, {
-            _width: 200, _nativeHeight: 962, _nativeWidth: 800, isAnnotating: false,
-            title: "bing", UseCors: true
-        });
-        this.props.Document.bing = textDoc;
-        this.props.Document.webbucket = webbucket;
-        Doc.AddDocToList(this.dataDoc, this.props.fieldKey, webbucket);
-        Doc.AddDocToList(webbucket, this.props.fieldKey, textDoc);
-
-
-    }
-
-
     @observable buckets: Doc[] | undefined;
 
     getAllResults = async (query: string) => {
@@ -521,7 +441,6 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
 
     getDataStatus() { return this._deletedDocsStatus; }
 
-
     private NumResults = 25;
     private lockPromise?: Promise<void>;
     getResults = async (query: string) => {
@@ -581,9 +500,7 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
 
                 await this._curRequest;
             }
-            if (this._numTotalResults > 3 && this.expandedBucket === false) {
-                this.makenewbuckets();
-            }
+
             this.resultsScrolled();
             res();
         });
@@ -632,7 +549,7 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
             basicWordStatus: this._basicWordStatus,
             icons: this._icons,
         }
-        return Docs.Create.SearchDocument({ _autoHeight: true, _viewType: CollectionViewType.Stacking, title: StrCast(this.layoutDoc._searchString), searchQuery: StrCast(this.layoutDoc._searchString) });
+        return Docs.Create.SearchDocument({ _autoHeight: true, _viewType: CollectionViewType.Schema, title: StrCast(this.layoutDoc._searchString), searchQuery: StrCast(this.layoutDoc._searchString) });
     }
 
     @action.bound
@@ -759,48 +676,14 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
                             if (i < this._visibleDocuments.length) {
                                 this._visibleDocuments[i] = result[0];
                                 this._isSearch[i] = "search";
-                                if (this._numTotalResults > 3 && this.expandedBucket === false) {
-
-                                    if (StrCast(result[0].type) === this.firststring) {
-                                        if (this.bucketcount[1] < 3) {
-                                            result[0].parent = this.buckets![1];
-                                            Doc.AddDocToList(this.buckets![1], this.props.fieldKey, result[0]);
-                                            this.bucketcount[1] += 1;
-                                        }
-                                    }
-                                    else if (StrCast(result[0].type) === this.secondstring) {
-                                        if (this.bucketcount[2] < 3) {
-                                            result[0].parent = this.buckets![2];
-                                            Doc.AddDocToList(this.buckets![2], this.props.fieldKey, result[0]);
-                                            this.bucketcount[2] += 1;
-                                        }
-                                    }
-                                    else if (this.bucketcount[0] < 3) {
-                                        //Doc.AddDocToList(this.buckets![0], this.props.fieldKey, result[0]);
-                                        //this.bucketcount[0]+=1;
-                                        Doc.AddDocToList(this.dataDoc, this.props.fieldKey, result[0]);
-                                    }
-                                }
-                                else {
-                                    Doc.AddDocToList(this.dataDoc, this.props.fieldKey, result[0]);
-                                }
+                                Doc.AddDocToList(this.dataDoc, this.props.fieldKey, result[0]);
+
                             }
                         }
                     }
                 }
             }
         }
-        if (this._numTotalResults > 3 && this.expandedBucket === false) {
-            if (this.buckets![0]) {
-                this.buckets![0]._height = this.bucketcount[0] * 55 + 25;
-            }
-            if (this.buckets![1]) {
-                this.buckets![1]._height = this.bucketcount[1] * 55 + 25;
-            }
-            if (this.buckets![2]) {
-                this.buckets![2]._height = this.bucketcount[2] * 55 + 25;
-            }
-        }
         if (this._maxSearchIndex >= this._numTotalResults) {
             this._visibleElements.length = this._results.length;
             this._visibleDocuments.length = this._results.length;
@@ -1214,12 +1097,11 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
     }
     @computed get searchItemTemplate() { return Cast(Doc.UserDoc().searchItemTemplate, Doc, null); }
 
-    childLayoutTemplate = () => this.layoutDoc._viewType === CollectionViewType.Stacking ? this.searchItemTemplate : undefined;
     getTransform = () => {
         return this.props.ScreenToLocalTransform().translate(-5, -65);// listBox padding-left and pres-box-cont minHeight
     }
     panelHeight = () => {
-        return this.props.PanelHeight() - 50;
+        return this.props.PanelHeight();
     }
     selectElement = (doc: Doc) => {
         //this.gotoDocument(this.childDocs.indexOf(doc), NumCasst(this.layoutDoc._itemIndex));
@@ -1230,17 +1112,9 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
     }
     //Make id layour document
     render() {
-        if (this.expandedBucket === true) {
-            this.props.Document._gridGap = 5;
-        }
-        else {
-            this.props.Document._gridGap = 10;
-        }
         this.props.Document._searchDoc = true;
-
         return (
             <div style={{ pointerEvents: "all" }} className="searchBox-container">
-
                 <div className="searchBox-bar">
                     <span className="searchBox-barChild searchBox-collection" onPointerDown={SetupDrag(this.collectionRef, () => StrCast(this.layoutDoc._searchString) ? this.startDragCollection() : undefined)} ref={this.collectionRef} title="Drag Results as Collection">
                         <FontAwesomeIcon icon="object-group" size="lg" />
@@ -1263,11 +1137,7 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
                 </div>
                 <CollectionView {...this.props}
                     Document={this.props.Document}
-                    PanelHeight={this.panelHeight}
                     moveDocument={returnFalse}
-                    NativeHeight={() => 400}
-                    childLayoutTemplate={this.childLayoutTemplate}
-                    addDocument={undefined}
                     removeDocument={returnFalse}
                     focus={this.selectElement}
                     ScreenToLocalTransform={Transform.Identity} />
@@ -1284,7 +1154,7 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
 
 Scripting.addGlobal(function lookupSearchBoxField(container: Doc, field: string, data: Doc) {
     // if (field === 'indexInPres') return DocListCast(container[StrCast(container.presentationFieldKey)]).indexOf(data);
-    // if (field === 'presCollapsedHeight') return container._viewType === CollectionViewType.Stacking ? 50 : 46;
+    // if (field === 'presCollapsedHeight') return container._viewType === CollectionViewType.Schema ? 50 : 46;
     // if (field === 'presStatus') return container.presStatus;
     // if (field === '_itemIndex') return container._itemIndex;
     if (field == "query") return container._searchString;
-- 
cgit v1.2.3-70-g09d2


From 58b780563c7fc4a1496f5c676f2d14faddb096e0 Mon Sep 17 00:00:00 2001
From: Melissa Zhang <mzhang19096@gmail.com>
Date: Fri, 3 Jul 2020 17:32:40 -0700
Subject: merge with master

---
 deploy/mobile/image.html                           |   5 +-
 src/client/util/CurrentUserUtils.ts                | 152 ++--
 src/client/util/InteractionUtils.tsx               |   8 +-
 src/client/util/LinkManager.ts                     |   2 +-
 src/client/util/SettingsManager.scss               |  21 +
 src/client/views/AntimodeMenu.scss                 |  31 +
 src/client/views/AntimodeMenu.tsx                  |   2 +-
 src/client/views/DocumentButtonBar.tsx             |   2 +-
 src/client/views/GestureOverlay.scss               |   2 +-
 src/client/views/GestureOverlay.tsx                |  21 +-
 src/client/views/GlobalKeyHandler.ts               |   2 +-
 src/client/views/InkingStroke.tsx                  |   4 +-
 src/client/views/MainView.tsx                      |   6 +-
 .../views/collections/CollectionCarouselView.tsx   |   2 +-
 .../views/collections/CollectionStackingView.scss  |  14 +-
 .../views/collections/CollectionStackingView.tsx   |   2 +-
 src/client/views/collections/CollectionView.tsx    |  21 +-
 .../views/collections/CollectionViewChromes.scss   |   6 +
 .../views/collections/CollectionViewChromes.tsx    |   4 +-
 .../collectionFreeForm/CollectionFreeFormView.tsx  |   7 +-
 .../collectionFreeForm/InkOptionsMenu.scss         |  39 +-
 .../collectionFreeForm/InkOptionsMenu.tsx          |   6 +-
 src/client/views/nodes/AudioBox.scss               | 153 ++--
 src/client/views/nodes/AudioBox.tsx                |   6 +-
 src/client/views/nodes/ColorBox.tsx                |   2 +-
 src/client/views/nodes/DocumentLinksButton.tsx     |   2 +-
 src/client/views/nodes/DocumentView.tsx            |  35 +-
 src/client/views/nodes/ImageBox.tsx                |  11 +-
 src/client/views/nodes/LinkDocPreview.tsx          |   2 +-
 src/client/views/nodes/PDFBox.scss                 | 325 +++++---
 src/client/views/nodes/PDFBox.tsx                  |   9 +-
 src/client/views/nodes/PresBox.scss                |  65 +-
 src/client/views/nodes/RadialMenu.tsx              |   6 +-
 .../nodes/formattedText/FormattedTextBox.scss      | 297 ++++++-
 .../views/nodes/formattedText/FormattedTextBox.tsx |  66 +-
 .../formattedText/FormattedTextBoxComment.tsx      |   4 +-
 .../views/nodes/formattedText/RichTextMenu.tsx     |  42 +-
 .../views/nodes/formattedText/RichTextRules.ts     |   2 +-
 src/client/views/nodes/formattedText/marks_rts.ts  |  20 +-
 .../nodes/formattedText/prosemirrorPatches.js      |  55 ++
 src/client/views/pdf/PDFMenu.scss                  |  19 +
 src/client/views/pdf/PDFMenu.tsx                   |  68 +-
 src/client/views/pdf/PDFViewer.tsx                 |  12 +-
 .../views/presentationview/PresElementBox.scss     |  64 +-
 .../views/presentationview/PresElementBox.tsx      |   2 +-
 src/fields/RichTextUtils.ts                        |   2 +-
 src/mobile/AudioUpload.scss                        |  61 ++
 src/mobile/AudioUpload.tsx                         | 152 ++++
 src/mobile/ImageUpload.scss                        | 130 ++-
 src/mobile/ImageUpload.tsx                         | 227 +++---
 src/mobile/MobileInkOverlay.tsx                    |   4 +-
 src/mobile/MobileInterface.scss                    | 444 ++++++++++-
 src/mobile/MobileInterface.tsx                     | 871 ++++++++++++++-------
 src/mobile/MobileMain.tsx                          |  25 +
 src/mobile/MobileMenu.scss                         |   0
 src/pen-gestures/ndollar.ts                        |   2 +-
 src/server/ApiManagers/PDFManager.ts               |   2 +-
 src/server/index.ts                                |   1 +
 webpack.config.js                                  |  64 +-
 59 files changed, 2791 insertions(+), 820 deletions(-)
 create mode 100644 src/mobile/AudioUpload.scss
 create mode 100644 src/mobile/AudioUpload.tsx
 create mode 100644 src/mobile/MobileMain.tsx
 create mode 100644 src/mobile/MobileMenu.scss

(limited to 'src/client/util')

diff --git a/deploy/mobile/image.html b/deploy/mobile/image.html
index 6424d2a60..d30ad6ac2 100644
--- a/deploy/mobile/image.html
+++ b/deploy/mobile/image.html
@@ -1,15 +1,14 @@
 <html>
 
 <head>
-    <title>Test view</title>
+    <title>Dash Mobile</title>
     <link href="https://fonts.googleapis.com/css?family=Fjalla+One|Hind+Siliguri:300" rel="stylesheet">
 </head>
 
 <body>
     <div id="root">
-        <p>Capture Image: <input type="file" accept="image/*" id="capture">
     </div>
-    <script src="../imageUpload.js"></script>
+    <script src="../mobileInterface.js"></script>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index 40bc24917..4276e04e4 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -54,6 +54,25 @@ export class CurrentUserUtils {
                 removeDropProperties: new List<string>(["dropAction"]), title: "query view", icon: "question-circle"
             });
         }
+        // Prototype for mobile button (not sure if 'Advanced Item Prototypes' is ideal location)
+        if (doc["template-mobile-button"] === undefined) {
+            const queryTemplate = this.mobileButton({
+                title: "NEW MOBILE BUTTON",
+                onClick: undefined,
+            },
+                [this.ficon({
+                    ignoreClick: true,
+                    icon: "mobile",
+                    backgroundColor: "rgba(0,0,0,0)"
+                }),
+                this.mobileTextContainer({},
+                    [this.mobileButtonText({}, "NEW MOBILE BUTTON"), this.mobileButtonInfo({}, "You can customize this button and make it your own.")])]);
+            doc["template-mobile-button"] = CurrentUserUtils.ficon({
+                onDragStart: ScriptField.MakeFunction('getCopy(this.dragFactory, true)'),
+                dragFactory: new PrefetchProxy(queryTemplate) as any as Doc,
+                removeDropProperties: new List<string>(["dropAction"]), title: "mobile button", icon: "mobile"
+            });
+        }
 
         if (doc["template-button-slides"] === undefined) {
             const slideTemplate = Docs.Create.MultirowDocument(
@@ -219,6 +238,7 @@ export class CurrentUserUtils {
             doc["template-button-slides"] as Doc,
             doc["template-button-description"] as Doc,
             doc["template-button-query"] as Doc,
+            doc["template-mobile-button"] as Doc,
             doc["template-button-detail"] as Doc,
             doc["template-button-link"] as Doc,
             doc["template-button-switch"] as Doc];
@@ -343,7 +363,7 @@ export class CurrentUserUtils {
         } else {
             const templateIconsDoc = Cast(doc["template-icons"], Doc, null);
             const requiredTypes = [doc["template-icon-view"] as Doc, doc["template-icon-view-img"] as Doc,
-            doc["template-icon-view-col"] as Doc, doc["template-icon-view-rtf"] as Doc, doc["template-icon-view-pdf"] as Doc];
+            doc["template-icon-view-col"] as Doc, doc["template-icon-view-rtf"] as Doc];
             DocListCastAsync(templateIconsDoc.data).then(async curIcons => {
                 await Promise.all(curIcons!);
                 requiredTypes.map(ntype => Doc.AddDocToList(templateIconsDoc, "data", ntype));
@@ -378,6 +398,9 @@ export class CurrentUserUtils {
         if (doc.emptyWebpage === undefined) {
             doc.emptyWebpage = Docs.Create.WebDocument("", { title: "webpage", _nativeWidth: 850, _nativeHeight: 962, _width: 600, UseCors: true });
         }
+        if (doc.activeMobileMenu === undefined) {
+            this.setupActiveMobileMenu(doc);
+        }
         return [
             { title: "Drag a comparison box", label: "Comp", icon: "columns", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyComparison as Doc },
             { title: "Drag a collection", label: "Col", icon: "folder", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyCollection as Doc },
@@ -391,7 +414,7 @@ export class CurrentUserUtils {
             { title: "Drag a search box", label: "Query", icon: "search", ignoreClick: true, drag: 'Docs.Create.QueryDocument({ _width: 200, title: "an image of a cat" })' },
             { title: "Drag a scripting box", label: "Script", icon: "terminal", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyScript as Doc },
             { title: "Drag an import folder", label: "Load", icon: "cloud-upload-alt", ignoreClick: true, drag: 'Docs.Create.DirectoryImportDocument({ title: "Directory Import", _width: 400, _height: 400 })' },
-            { title: "Drag a mobile view", label: "Phone", icon: "phone", ignoreClick: true, drag: 'Doc.UserDoc().activeMobile' },
+            { title: "Drag a mobile view", label: "Phone", icon: "mobile", click: 'openOnRight(Doc.UserDoc().activeMobileMenu)', drag: 'this.dragFactory', dragFactory: doc.activeMobileMenu as Doc },
             { title: "Drag an instance of the device collection", label: "Buxton", icon: "globe-asia", ignoreClick: true, drag: 'Docs.Create.Buxton()' },
             // { title: "use pen", icon: "pen-nib", click: 'activatePen(this.activeInkPen = sameDocs(this.activeInkPen, this) ? undefined : this)', backgroundColor: "blue", ischecked: `sameDocs(this.activeInkPen,  this)`, activeInkPen: doc },
             // { title: "use highlighter", icon: "highlighter", click: 'activateBrush(this.activeInkPen = sameDocs(this.activeInkPen, this) ? undefined : this,20,this.backgroundColor)', backgroundColor: "yellow", ischecked: `sameDocs(this.activeInkPen, this)`, activeInkPen: doc },
@@ -445,25 +468,72 @@ export class CurrentUserUtils {
         return doc.myItemCreators as Doc;
     }
 
-    static setupMobileButtons(doc: Doc, buttons?: string[]) {
-        const docProtoData: { title: string, icon: string, drag?: string, ignoreClick?: boolean, click?: string, ischecked?: string, activeInkPen?: Doc, backgroundColor?: string, dragFactory?: Doc }[] = [
-            { title: "record", icon: "microphone", ignoreClick: true, click: "FILL" },
-            { title: "use pen", icon: "pen-nib", click: 'activatePen(this.activeInkPen = sameDocs(this.activeInkPen, this) ? undefined : this)', backgroundColor: "blue", ischecked: `sameDocs(this.activeInkPen,  this)`, activeInkPen: doc },
-            { title: "use highlighter", icon: "highlighter", click: 'activateBrush(this.activeInkPen = sameDocs(this.activeInkPen, this) ? undefined : this,20,this.backgroundColor)', backgroundColor: "yellow", ischecked: `sameDocs(this.activeInkPen, this)`, activeInkPen: doc },
-            { title: "use eraser", icon: "eraser", click: 'activateEraser(this.activeInkPen = sameDocs(this.activeInkPen, this) ? undefined : this);', ischecked: `sameDocs(this.activeInkPen, this)`, backgroundColor: "pink", activeInkPen: doc },
-            { title: "use drag", icon: "mouse-pointer", click: 'deactivateInk();this.activeInkPen = this;', ischecked: `sameDocs(this.activeInkPen, this)`, backgroundColor: "white", activeInkPen: doc },
-            // { title: "draw", icon: "pen-nib", click: 'switchMobileView(setupMobileInkingDoc, renderMobileInking, onSwitchMobileInking);', ischecked: `sameDocs(this.activeInkPen, this)`, backgroundColor: "red", activeInkPen: doc },
-            { title: "upload", icon: "upload", click: 'switchMobileView(setupMobileUploadDoc, renderMobileUpload, onSwitchMobileUpload);', backgroundColor: "orange" },
-            // { title: "upload", icon: "upload", click: 'uploadImageMobile();', backgroundColor: "cyan" },
-        ];
-        return docProtoData.filter(d => !buttons || !buttons.includes(d.title)).map(data => Docs.Create.FontIconDocument({
-            _nativeWidth: 100, _nativeHeight: 100, _width: 100, _height: 100, dropAction: data.click ? "copy" : undefined, title: data.title, icon: data.icon, ignoreClick: data.ignoreClick,
-            onDragStart: data.drag ? ScriptField.MakeFunction(data.drag) : undefined, onClick: data.click ? ScriptField.MakeScript(data.click) : undefined,
-            ischecked: data.ischecked ? ComputedField.MakeFunction(data.ischecked) : undefined, activeInkPen: data.activeInkPen,
-            backgroundColor: data.backgroundColor, removeDropProperties: new List<string>(["dropAction"]), dragFactory: data.dragFactory,
+    // Sets up mobile menu if it is undefined creates a new one, otherwise returns existing menu
+    static setupActiveMobileMenu(doc: Doc) {
+        if (doc.activeMobileMenu === undefined) {
+            console.log("undefined");
+            doc.activeMobileMenu = this.setupMobileMenu();
+        }
+        return doc.activeMobileMenu as Doc;
+    }
+
+    // Sets up mobileMenu stacking document
+    static setupMobileMenu() {
+        const menu = new PrefetchProxy(Docs.Create.StackingDocument(this.setupMobileButtons(), {
+            _width: 980, ignoreClick: true, lockedPosition: false, _chromeStatus: "disabled", title: "home", _yMargin: 100
         }));
+        return menu;
+    }
+
+    // SEts up mobile buttons for inside mobile menu
+    static setupMobileButtons(doc?: Doc, buttons?: string[]) {
+        const docProtoData: { title: string, icon: string, drag?: string, ignoreClick?: boolean, click?: string, ischecked?: string, activePen?: Doc, backgroundColor?: string, info: string, dragFactory?: Doc }[] = [
+            { title: "WORKSPACES", icon: "bars", click: 'switchToMobileLibrary()', backgroundColor: "lightgrey", info: "Access your Workspaces from your mobile, and navigate through all of your documents. " },
+            { title: "UPLOAD", icon: "upload", click: 'openMobileUploads()', backgroundColor: "lightgrey", info: "Upload files from your mobile device so they can be accessed on Dash Web." },
+            { title: "MOBILE UPLOAD", icon: "mobile", click: 'switchToMobileUploadCollection()', backgroundColor: "lightgrey", info: "Access the collection of your mobile uploads." },
+            { title: "RECORD", icon: "microphone", click: 'openMobileAudio()', backgroundColor: "lightgrey", info: "Use your phone to record, dictate and then upload audio onto Dash Web." },
+            { title: "PRESENTATION", icon: "desktop", click: 'switchToMobilePresentation()', backgroundColor: "lightgrey", info: "Use your phone as a remote for you presentation." },
+            { title: "SETTINGS", icon: "cog", click: 'openMobileSettings()', backgroundColor: "lightgrey", info: "Change your password, log out, or manage your account security." }
+        ];
+        // returns a list of mobile buttons
+        return docProtoData.filter(d => !buttons || !buttons.includes(d.title)).map(data =>
+            this.mobileButton({
+                title: data.title,
+                lockedPosition: true,
+                onClick: data.click ? ScriptField.MakeScript(data.click) : undefined,
+                _backgroundColor: data.backgroundColor
+            },
+                [this.ficon({ ignoreClick: true, icon: data.icon, backgroundColor: "rgba(0,0,0,0)" }), this.mobileTextContainer({}, [this.mobileButtonText({}, data.title), this.mobileButtonInfo({}, data.info)])])
+        );
     }
 
+    // sets up the main document for the mobile button
+    static mobileButton = (opts: DocumentOptions, docs: Doc[]) => Docs.Create.MulticolumnDocument(docs, {
+        ...opts,
+        dropAction: undefined, removeDropProperties: new List<string>(["dropAction"]), _nativeWidth: 900, _nativeHeight: 250, _width: 900, _height: 250, _yMargin: 15,
+        borderRounding: "5px", boxShadow: "0 0", _chromeStatus: "disabled"
+    }) as any as Doc
+
+    // sets up the text container for the information contained within the mobile button
+    static mobileTextContainer = (opts: DocumentOptions, docs: Doc[]) => Docs.Create.MultirowDocument(docs, {
+        ...opts,
+        dropAction: undefined, removeDropProperties: new List<string>(["dropAction"]), _nativeWidth: 450, _nativeHeight: 250, _width: 450, _height: 250, _yMargin: 25,
+        backgroundColor: "rgba(0,0,0,0)", borderRounding: "0", boxShadow: "0 0", _chromeStatus: "disabled", ignoreClick: true
+    }) as any as Doc
+
+    // Sets up the title of the button
+    static mobileButtonText = (opts: DocumentOptions, buttonTitle: string) => Docs.Create.TextDocument(buttonTitle, {
+        ...opts,
+        dropAction: undefined, title: buttonTitle, _fontSize: 37, _xMargin: 0, _yMargin: 0, ignoreClick: true, _chromeStatus: "disabled", backgroundColor: "rgba(0,0,0,0)"
+    }) as any as Doc
+
+    // Sets up the description of the button
+    static mobileButtonInfo = (opts: DocumentOptions, buttonInfo: string) => Docs.Create.TextDocument(buttonInfo, {
+        ...opts,
+        dropAction: undefined, title: "info", _fontSize: 25, _xMargin: 0, _yMargin: 0, ignoreClick: true, _chromeStatus: "disabled", backgroundColor: "rgba(0,0,0,0)", _dimMagnitude: 2,
+    }) as any as Doc
+
+
     static setupThumbButtons(doc: Doc) {
         const docProtoData: { title: string, icon: string, drag?: string, ignoreClick?: boolean, pointerDown?: string, pointerUp?: string, ischecked?: string, clipboard?: Doc, activeInkPen?: Doc, backgroundColor?: string, dragFactory?: Doc }[] = [
             { title: "use pen", icon: "pen-nib", pointerUp: "resetPen()", pointerDown: 'setPen(2, this.backgroundColor)', backgroundColor: "blue", ischecked: `sameDocs(this.activeInkPen,  this)`, activeInkPen: doc },
@@ -497,31 +567,12 @@ export class CurrentUserUtils {
         return Cast(userDoc.thumbDoc, Doc);
     }
 
-    static setupMobileDoc(userDoc: Doc) {
-        return userDoc.activeMoble ?? Docs.Create.MasonryDocument(CurrentUserUtils.setupMobileButtons(userDoc), {
-            _columnWidth: 100, ignoreClick: true, lockedPosition: true, _chromeStatus: "disabled", title: "buttons", _autoHeight: true, _yMargin: 5
-        });
-    }
-
-    static setupMobileInkingDoc(userDoc: Doc) {
-        return Docs.Create.FreeformDocument([], { title: "Mobile Inking", backgroundColor: "white" });
-    }
-
-    static setupMobileUploadDoc(userDoc: Doc) {
-        // const addButton = Docs.Create.FontIconDocument({ onDragStart: ScriptField.MakeScript('addWebToMobileUpload()'), title: "Add Web Doc to Upload Collection", icon: "plus", backgroundColor: "black" })
-        const webDoc = Docs.Create.WebDocument("https://www.britannica.com/biography/Miles-Davis", {
-            title: "Upload Images From the Web", _chromeStatus: "enabled", lockedPosition: true
-        });
-        const uploadDoc = Docs.Create.StackingDocument([], {
-            title: "Mobile Upload Collection", backgroundColor: "white", lockedPosition: true
-        });
-        return Docs.Create.StackingDocument([webDoc, uploadDoc], {
-            _width: screen.width, lockedPosition: true, _chromeStatus: "disabled", title: "Upload", _autoHeight: true, _yMargin: 80, backgroundColor: "lightgray"
-        });
+    static setupLibrary(userDoc: Doc) {
+        return CurrentUserUtils.setupWorkspaces(userDoc);
     }
 
-    // setup the Creator button which will display the creator panel.  This panel will include the drag creators and the color picker. 
-    // when clicked, this panel will be displayed in the target container (ie, sidebarContainer)  
+    // setup the Creator button which will display the creator panel.  This panel will include the drag creators and the color picker.
+    // when clicked, this panel will be displayed in the target container (ie, sidebarContainer)
     static async setupToolsBtnPanel(doc: Doc, sidebarContainer: Doc) {
         // setup a masonry view of all he creators
         const creatorBtns = await CurrentUserUtils.setupCreatorButtons(doc);
@@ -625,7 +676,7 @@ export class CurrentUserUtils {
         return doc["tabs-button-library"] as Doc;
     }
 
-    // setup the Search button which will display the search panel.  
+    // setup the Search button which will display the search panel.
     static setupSearchBtnPanel(doc: Doc, sidebarContainer: Doc) {
         if (doc["tabs-button-search"] === undefined) {
             doc["tabs-button-search"] = new PrefetchProxy(Docs.Create.ButtonDocument({
@@ -715,12 +766,14 @@ export class CurrentUserUtils {
         }
     }
 
+    // Right sidebar is where mobile uploads are contained
     static setupRightSidebar(doc: Doc) {
         if (doc.rightSidebarCollection === undefined) {
-            doc.rightSidebarCollection = new PrefetchProxy(Docs.Create.StackingDocument([], { title: "Right Sidebar" }));
+            doc.rightSidebarCollection = new PrefetchProxy(Docs.Create.StackingDocument([], { title: "Mobile Uploads" }));
         }
     }
 
+
     static setupClickEditorTemplates(doc: Doc) {
         if (doc["clickFuncs-child"] === undefined) {
             const openInTarget = Docs.Create.ScriptingDocument(ScriptField.MakeScript(
@@ -771,13 +824,14 @@ export class CurrentUserUtils {
         doc.activeArrowEnd = StrCast(doc.activeArrowEnd, "none");
         doc.activeDash = StrCast(doc.activeDash, "0");
         doc.fontSize = NumCast(doc.fontSize, 12);
-        doc["constants-snapThreshold"] = NumCast(doc["constants-snapThreshold"], 10); // 
-        doc["constants-dragThreshold"] = NumCast(doc["constants-dragThreshold"], 4); // 
+        doc["constants-snapThreshold"] = NumCast(doc["constants-snapThreshold"], 10); //
+        doc["constants-dragThreshold"] = NumCast(doc["constants-dragThreshold"], 4); //
         Utils.DRAG_THRESHOLD = NumCast(doc["constants-dragThreshold"]);
         this.setupDefaultIconTemplates(doc);  // creates a set of icon templates triggered by the document deoration icon
         this.setupDocTemplates(doc); // sets up the template menu of templates
         this.setupRightSidebar(doc);  // sets up the right sidebar collection for mobile upload documents and sharing
-        this.setupOverlays(doc);  // documents in overlay layer 
+        this.setupActiveMobileMenu(doc); // sets up the current mobile menu for Dash Mobile
+        this.setupOverlays(doc);  // documents in overlay layer
         this.setupDockedButtons(doc);  // the bottom bar of font icons
         this.setupDefaultPresentation(doc); // presentation that's initially triggered
         await this.setupSidebarButtons(doc); // the pop-out left sidebar of tools/panels
@@ -816,9 +870,5 @@ export class CurrentUserUtils {
     }
 }
 
-Scripting.addGlobal(function setupMobileInkingDoc(userDoc: Doc) { return CurrentUserUtils.setupMobileInkingDoc(userDoc); },
-    "initializes the Mobile inking document", "(userDoc: Doc)");
-Scripting.addGlobal(function setupMobileUploadDoc(userDoc: Doc) { return CurrentUserUtils.setupMobileUploadDoc(userDoc); },
-    "initializes the Mobile upload document", "(userDoc: Doc)");
 Scripting.addGlobal(function createNewWorkspace() { return MainView.Instance.createNewWorkspace(); },
-    "creates a new workspace when called");
\ No newline at end of file
+    "creates a new workspace when called");
diff --git a/src/client/util/InteractionUtils.tsx b/src/client/util/InteractionUtils.tsx
index edeb461e0..02b444cd3 100644
--- a/src/client/util/InteractionUtils.tsx
+++ b/src/client/util/InteractionUtils.tsx
@@ -27,7 +27,7 @@ export namespace InteractionUtils {
     export interface MultiTouchEventDisposer { (): void; }
 
     /**
-     * 
+     *
      * @param element - element to turn into a touch target
      * @param startFunc - event handler, typically Touchable.onTouchStart (classes that inherit touchable can pass in this.onTouchStart)
      */
@@ -278,8 +278,8 @@ export namespace InteractionUtils {
 
     /**
      * Returns euclidean distance between two points
-     * @param pt1 
-     * @param pt2 
+     * @param pt1
+     * @param pt2
      */
     export function TwoPointEuclidist(pt1: React.Touch, pt2: React.Touch): number {
         return Math.sqrt(Math.pow(pt1.clientX - pt2.clientX, 2) + Math.pow(pt1.clientY - pt2.clientY, 2));
@@ -410,4 +410,4 @@ export namespace InteractionUtils {
         //     }
         // }
     }
-}
\ No newline at end of file
+}
diff --git a/src/client/util/LinkManager.ts b/src/client/util/LinkManager.ts
index 9b4dc2630..749fabfcc 100644
--- a/src/client/util/LinkManager.ts
+++ b/src/client/util/LinkManager.ts
@@ -49,7 +49,7 @@ export class LinkManager {
     }
 
     public deleteLink(linkDoc: Doc): boolean {
-        if (LinkManager.Instance.LinkManagerDoc) {
+        if (LinkManager.Instance.LinkManagerDoc && linkDoc instanceof Doc) {
             Doc.RemoveDocFromList(LinkManager.Instance.LinkManagerDoc, "data", linkDoc);
             return true;
         }
diff --git a/src/client/util/SettingsManager.scss b/src/client/util/SettingsManager.scss
index fa2609ca2..13c65042c 100644
--- a/src/client/util/SettingsManager.scss
+++ b/src/client/util/SettingsManager.scss
@@ -133,5 +133,26 @@
 
 
 
+    }
+}
+
+@media only screen and (max-device-width: 480px) {
+    .settings-interface {
+        width: 80vw;
+        height: 400px;
+    }
+
+    .settings-interface .settings-body .settings-content input {
+        font-size: 30;
+    }
+
+    .settings-interface button {
+        width: 100%;
+        font-size: 30px;
+        background: #b2cef8;
+    }
+
+    .settings-interface .settings-heading {
+        font-size: 25;
     }
 }
\ No newline at end of file
diff --git a/src/client/views/AntimodeMenu.scss b/src/client/views/AntimodeMenu.scss
index e56574bb7..be21cec12 100644
--- a/src/client/views/AntimodeMenu.scss
+++ b/src/client/views/AntimodeMenu.scss
@@ -42,4 +42,35 @@
         background-repeat: no-repeat;
         background-position: left center;
     }
+}
+
+@media only screen and (max-device-width: 480px) {
+    .antimodeMenu-cont {
+        height: 100px;
+        width: 100vw;
+
+        &.with-rows {
+            flex-direction: column-reverse;
+        }
+
+        .antimodeMenu-row {
+            display: flex;
+            height: 100%;
+            width: 100%;
+        }
+
+        .antimodeMenu-button {
+            background-color: transparent;
+            width: 100px;
+            height: 100px;
+
+            &.active {
+                background-color: #121212;
+            }
+        }
+
+        .antimodeMenu-button:hover {
+            background-color: #121212;
+        }
+    }
 }
\ No newline at end of file
diff --git a/src/client/views/AntimodeMenu.tsx b/src/client/views/AntimodeMenu.tsx
index a4634103c..cb293dee4 100644
--- a/src/client/views/AntimodeMenu.tsx
+++ b/src/client/views/AntimodeMenu.tsx
@@ -128,7 +128,7 @@ export default abstract class AntimodeMenu extends React.Component {
     }
 
     protected getDragger = () => {
-        return <div className="antimodeMenu-dragger" onPointerDown={this.dragStart} style={{ width: "20px" }} />;
+        return <div className="antimodeMenu-dragger" key="dragger" onPointerDown={this.dragStart} style={{ width: "20px" }} />;
     }
 
     protected getElement(buttons: JSX.Element[]) {
diff --git a/src/client/views/DocumentButtonBar.tsx b/src/client/views/DocumentButtonBar.tsx
index c05ca33fb..40a9d0c45 100644
--- a/src/client/views/DocumentButtonBar.tsx
+++ b/src/client/views/DocumentButtonBar.tsx
@@ -293,4 +293,4 @@ export class DocumentButtonBar extends React.Component<{ views: () => (DocumentV
             </div>
         </div>;
     }
-}
\ No newline at end of file
+}
diff --git a/src/client/views/GestureOverlay.scss b/src/client/views/GestureOverlay.scss
index 107077792..f61f4a05e 100644
--- a/src/client/views/GestureOverlay.scss
+++ b/src/client/views/GestureOverlay.scss
@@ -1,7 +1,7 @@
 .gestureOverlay-cont {
     width: 100vw;
     height: 100vh;
-    position: absolute;
+    position: fixed;
     top: 0;
     left: 0;
     touch-action: none;
diff --git a/src/client/views/GestureOverlay.tsx b/src/client/views/GestureOverlay.tsx
index 85695bbac..487467b2b 100644
--- a/src/client/views/GestureOverlay.tsx
+++ b/src/client/views/GestureOverlay.tsx
@@ -5,7 +5,6 @@ import { Doc } from "../../fields/Doc";
 import { InkData, InkTool } from "../../fields/InkField";
 import { Cast, FieldValue, NumCast } from "../../fields/Types";
 import MobileInkOverlay from "../../mobile/MobileInkOverlay";
-import MobileInterface from "../../mobile/MobileInterface";
 import { GestureUtils } from "../../pen-gestures/GestureUtils";
 import { MobileInkOverlayContent } from "../../server/Message";
 import { emptyFunction, emptyPath, returnEmptyString, returnFalse, returnOne, returnTrue, returnZero, returnEmptyFilter } from "../../Utils";
@@ -112,7 +111,7 @@ export default class GestureOverlay extends Touchable {
     onReactTouchStart = (te: React.TouchEvent) => {
         document.removeEventListener("touchmove", this.onReactHoldTouchMove);
         document.removeEventListener("touchend", this.onReactHoldTouchEnd);
-        if (RadialMenu.Instance._display === true) {
+        if (RadialMenu.Instance?._display === true) {
             te.preventDefault();
             te.stopPropagation();
             RadialMenu.Instance.closeMenu();
@@ -162,8 +161,8 @@ export default class GestureOverlay extends Touchable {
                 // -- radial menu code --
                 this._holdTimer = setTimeout(() => {
                     console.log("hold");
-                    const target = document.elementFromPoint(te.changedTouches.item(0).clientX, te.changedTouches.item(0).clientY);
-                    const pt: any = te.touches[te.touches.length - 1];
+                    const target = document.elementFromPoint(te.changedTouches?.item(0).clientX, te.changedTouches?.item(0).clientY);
+                    const pt: any = te.touches[te.touches?.length - 1];
                     if (nts.nt.length === 1 && pt.radiusX > 1 && pt.radiusY > 1) {
                         target?.dispatchEvent(
                             new CustomEvent<InteractionUtils.MultiTouchEvent<React.TouchEvent>>("dashOnTouchHoldStart",
@@ -580,14 +579,6 @@ export default class GestureOverlay extends Touchable {
             const points = this._points.map(p => ({ X: p.X - B.left, Y: p.Y - B.top }));
             //push first points to so interactionUtil knows pointer is up
             this._points.push({ X: this._points[0].X, Y: this._points[0].Y });
-            if (MobileInterface.Instance && MobileInterface.Instance.drawingInk) {
-                DocServer.Mobile.dispatchGesturePoints({
-                    points: this._points,
-                    bounds: B,
-                    color: ActiveInkColor(),
-                    width: ActiveInkWidth()
-                });
-            }
 
             const initialPoint = this._points[0.];
             const xInGlass = initialPoint.X > (this._thumbX ?? Number.MAX_SAFE_INTEGER) && initialPoint.X < (this._thumbX ?? Number.MAX_SAFE_INTEGER) + (this.height);
@@ -725,7 +716,7 @@ export default class GestureOverlay extends Touchable {
         this._points = [];
         switch (shape) {
             //must push an extra point in the end so InteractionUtils knows pointer is up.
-            //must be (points[0].X,points[0]-1) 
+            //must be (points[0].X,points[0]-1)
             case "rectangle":
                 this._points.push({ X: left, Y: top });
                 this._points.push({ X: right, Y: top });
@@ -912,7 +903,7 @@ export default class GestureOverlay extends Touchable {
     }
 }
 
-// export class 
+// export class
 
 export enum ToolglassTools {
     InkToText = "inktotext",
@@ -949,4 +940,4 @@ Scripting.addGlobal(function resetPen() {
 }, "resets the pen tool");
 Scripting.addGlobal(function createText(text: any, x: any, y: any) {
     GestureOverlay.Instance.dispatchGesture("text", [{ X: x, Y: y }], text);
-}, "creates a text document with inputted text and coordinates", "(text: any, x: any, y: any)");
\ No newline at end of file
+}, "creates a text document with inputted text and coordinates", "(text: any, x: any, y: any)");
diff --git a/src/client/views/GlobalKeyHandler.ts b/src/client/views/GlobalKeyHandler.ts
index c85849adb..ff8380965 100644
--- a/src/client/views/GlobalKeyHandler.ts
+++ b/src/client/views/GlobalKeyHandler.ts
@@ -335,4 +335,4 @@ export default class KeyManager {
         };
     });
 
-}
\ No newline at end of file
+}
diff --git a/src/client/views/InkingStroke.tsx b/src/client/views/InkingStroke.tsx
index c32e76cec..7d6e7e5dd 100644
--- a/src/client/views/InkingStroke.tsx
+++ b/src/client/views/InkingStroke.tsx
@@ -72,8 +72,8 @@ export class InkingStroke extends ViewBoxBaseComponent<FieldViewProps, InkDocume
                     overflow: "visible",
                 }}
                 onContextMenu={() => {
-                    ContextMenu.Instance.addItem({ description: "Analyze Stroke", event: this.analyzeStrokes, icon: "paint-brush" });
-                    ContextMenu.Instance.addItem({ description: "Make Mask", event: this.makeMask, icon: "paint-brush" });
+                    ContextMenu.Instance?.addItem({ description: "Analyze Stroke", event: this.analyzeStrokes, icon: "paint-brush" });
+                    ContextMenu.Instance?.addItem({ description: "Make Mask", event: this.makeMask, icon: "paint-brush" });
                 }}
             ><defs>
                 </defs>
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index f6db1af66..c0edf7032 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -99,7 +99,7 @@ export class MainView extends React.Component {
         window.removeEventListener("keydown", KeyManager.Instance.handle);
         window.addEventListener("keydown", KeyManager.Instance.handle);
         window.addEventListener("paste", KeyManager.Instance.paste as any);
-        document.addEventListener("dash", (e: any) => {  // event used by chrome plugin to tell Dash which document to focus on 
+        document.addEventListener("dash", (e: any) => {  // event used by chrome plugin to tell Dash which document to focus on
             const id = FormattedTextBox.GetDocFromUrl(e.detail);
             DocServer.GetRefField(id).then(doc => {
                 if (doc instanceof Doc) {
@@ -107,6 +107,10 @@ export class MainView extends React.Component {
                 }
             });
         });
+        document.addEventListener("linkComplete", (e: any) => { // event used by Hypothes.is plugin to tell Dash when an annotation has been linked
+            const annotatedUrl = e.details;
+            console.log("This website " + annotatedUrl + " has a linked annotation");
+        });
     }
 
     componentWillUnMount() {
diff --git a/src/client/views/collections/CollectionCarouselView.tsx b/src/client/views/collections/CollectionCarouselView.tsx
index f65a89422..bd0e4fc9a 100644
--- a/src/client/views/collections/CollectionCarouselView.tsx
+++ b/src/client/views/collections/CollectionCarouselView.tsx
@@ -87,7 +87,7 @@ export class CollectionCarouselView extends CollectionSubView(CarouselDocument)
     onContextMenu = (e: React.MouseEvent): void => {
         // need to test if propagation has stopped because GoldenLayout forces a parallel react hierarchy to be created for its top-level layout
         if (!e.isPropagationStopped()) {
-            ContextMenu.Instance.addItem({
+            ContextMenu.Instance?.addItem({
                 description: "Make Hero Image", event: () => {
                     const index = NumCast(this.layoutDoc._itemIndex);
                     (this.dataDoc || Doc.GetProto(this.props.Document)).hero = ObjectField.MakeCopy(this.childLayoutPairs[index].layout.data as ObjectField);
diff --git a/src/client/views/collections/CollectionStackingView.scss b/src/client/views/collections/CollectionStackingView.scss
index 3d8ec2fd5..8fc74a9c6 100644
--- a/src/client/views/collections/CollectionStackingView.scss
+++ b/src/client/views/collections/CollectionStackingView.scss
@@ -33,8 +33,9 @@
     .collectionStackingViewFieldColumn {
         height: max-content;
     }
+
     .collectionStackingViewFieldColumnDragging {
-        height:100%;
+        height: 100%;
     }
 
     .collectionSchemaView-previewDoc {
@@ -425,4 +426,15 @@
     .rc-switch-checked .rc-switch-inner {
         left: 8px;
     }
+}
+
+@media only screen and (max-device-width: 480px) {
+
+    .collectionStackingView .collectionStackingView-columnDragger,
+    .collectionMasonryView .collectionStackingView-columnDragger {
+        width: 0.1;
+        height: 0.1;
+        opacity: 0;
+        font-size: 0;
+    }
 }
\ No newline at end of file
diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx
index 7bdf5e7df..9d8790dda 100644
--- a/src/client/views/collections/CollectionStackingView.tsx
+++ b/src/client/views/collections/CollectionStackingView.tsx
@@ -498,4 +498,4 @@ export class CollectionStackingView extends CollectionSubView(StackingDocument)
                 </div> </div>
         );
     }
-}
\ No newline at end of file
+}
diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx
index 705fbdd34..10ebe571b 100644
--- a/src/client/views/collections/CollectionView.tsx
+++ b/src/client/views/collections/CollectionView.tsx
@@ -180,7 +180,7 @@ export class CollectionView extends Touchable<FieldViewProps & CollectionViewCus
     // this is called with the document that was dragged and the collection to move it into.
     // if the target collection is the same as this collection, then the move will be allowed.
     // otherwise, the document being moved must be able to be removed from its container before
-    // moving it into the target.  
+    // moving it into the target.
     @action.bound
     moveDocument = (doc: Doc | Doc[], targetCollection: Doc | undefined, addDocument: (doc: Doc | Doc[]) => boolean): boolean => {
         if (Doc.AreProtosEqual(this.props.Document, targetCollection)) {
@@ -202,7 +202,7 @@ export class CollectionView extends Touchable<FieldViewProps & CollectionViewCus
 
     showIsTagged = () => {
         return (null);
-        // this section would display an icon in the bototm right of a collection to indicate that all 
+        // this section would display an icon in the bototm right of a collection to indicate that all
         // photos had been processed through Google's content analysis API and Google's tags had been
         // assigned to the documents googlePhotosTags field.
         // const children = DocListCast(this.props.Document[this.props.fieldKey]);
@@ -277,7 +277,8 @@ export class CollectionView extends Touchable<FieldViewProps & CollectionViewCus
     }
 
     onContextMenu = (e: React.MouseEvent): void => {
-        if (!e.isPropagationStopped() && this.props.Document[Id] !== CurrentUserUtils.MainDocId) { // need to test this because GoldenLayout causes a parallel hierarchy in the React DOM for its children and the main document view7
+        const cm = ContextMenu.Instance;
+        if (cm && !e.isPropagationStopped() && this.props.Document[Id] !== CurrentUserUtils.MainDocId) { // need to test this because GoldenLayout causes a parallel hierarchy in the React DOM for its children and the main document view7
             this.setupViewTypes("Add a Perspective...", vtype => {
                 const newRendition = Doc.MakeAlias(this.props.Document);
                 newRendition._viewType = vtype;
@@ -285,7 +286,7 @@ export class CollectionView extends Touchable<FieldViewProps & CollectionViewCus
                 return newRendition;
             }, false);
 
-            const existing = ContextMenu.Instance.findByDescription("Options...");
+            const existing = cm.findByDescription("Options...");
             const layoutItems = existing && "subitems" in existing ? existing.subitems : [];
             layoutItems.push({ description: `${this.props.Document.forceActive ? "Select" : "Force"} Contents Active`, event: () => this.props.Document.forceActive = !this.props.Document.forceActive, icon: "project-diagram" });
             if (this.props.Document.childLayout instanceof Doc) {
@@ -296,9 +297,9 @@ export class CollectionView extends Touchable<FieldViewProps & CollectionViewCus
             }
             layoutItems.push({ description: `${this.props.Document.isInPlaceContainer ? "Unset" : "Set"} inPlace Container`, event: () => this.props.Document.isInPlaceContainer = !this.props.Document.isInPlaceContainer, icon: "project-diagram" });
 
-            !existing && ContextMenu.Instance.addItem({ description: "Options...", subitems: layoutItems, icon: "hand-point-right" });
+            !existing && cm.addItem({ description: "Options...", subitems: layoutItems, icon: "hand-point-right" });
 
-            const existingOnClick = ContextMenu.Instance.findByDescription("OnClick...");
+            const existingOnClick = cm.findByDescription("OnClick...");
             const onClicks = existingOnClick && "subitems" in existingOnClick ? existingOnClick.subitems : [];
             const funcs = [
                 { key: "onChildClick", name: "On Child Clicked" },
@@ -314,13 +315,13 @@ export class CollectionView extends Touchable<FieldViewProps & CollectionViewCus
                     icon: "edit",
                     event: () => this.props.Document[StrCast(childClick.targetScriptKey)] = ObjectField.MakeCopy(ScriptCast(childClick.data)),
                 }));
-            !existingOnClick && ContextMenu.Instance.addItem({ description: "OnClick...", subitems: onClicks, icon: "hand-point-right" });
+            !existingOnClick && cm.addItem({ description: "OnClick...", subitems: onClicks, icon: "hand-point-right" });
 
             if (!Doc.UserDoc().noviceMode) {
-                const more = ContextMenu.Instance.findByDescription("More...");
+                const more = cm.findByDescription("More...");
                 const moreItems = more && "subitems" in more ? more.subitems : [];
                 moreItems.push({ description: "Export Image Hierarchy", icon: "columns", event: () => ImageUtils.ExportHierarchyToFileSystem(this.props.Document) });
-                !more && ContextMenu.Instance.addItem({ description: "More...", subitems: moreItems, icon: "hand-point-right" });
+                !more && cm.addItem({ description: "More...", subitems: moreItems, icon: "hand-point-right" });
             }
         }
     }
@@ -571,5 +572,3 @@ export class CollectionView extends Touchable<FieldViewProps & CollectionViewCus
         </div>);
     }
 }
-
-
diff --git a/src/client/views/collections/CollectionViewChromes.scss b/src/client/views/collections/CollectionViewChromes.scss
index 822e15aed..b1e8d20ad 100644
--- a/src/client/views/collections/CollectionViewChromes.scss
+++ b/src/client/views/collections/CollectionViewChromes.scss
@@ -81,6 +81,12 @@
                 // margin-top: 10px;
             }
 
+            @media only screen and (max-device-width: 480px) {
+                .collectionViewBaseChrome-collapse {
+                    display: none;
+                }
+            }
+
             .collectionViewBaseChrome-template,
             .collectionViewBaseChrome-viewModes {
                 display: grid;
diff --git a/src/client/views/collections/CollectionViewChromes.tsx b/src/client/views/collections/CollectionViewChromes.tsx
index 4e91a2928..7f1fe7649 100644
--- a/src/client/views/collections/CollectionViewChromes.tsx
+++ b/src/client/views/collections/CollectionViewChromes.tsx
@@ -300,7 +300,7 @@ export class CollectionViewBaseChrome extends React.Component<CollectionViewChro
                     onPointerDown={stopPropagation}
                     onChange={this.viewChanged}
                     value={StrCast(this.props.CollectionView.props.Document._viewType)}>
-                    {Object.values(CollectionViewType).map(type => ["invalid", "docking"].includes(type) ? (null) : (
+                    {Object.values(CollectionViewType).map(type => [CollectionViewType.Invalid, CollectionViewType.Docking].includes(type) ? (null) : (
                         <option
                             key={Utils.GenerateGuid()}
                             className="collectionViewBaseChrome-viewOption"
@@ -316,7 +316,7 @@ export class CollectionViewBaseChrome extends React.Component<CollectionViewChro
 
     render() {
         const collapsed = this.props.CollectionView.props.Document._chromeStatus !== "enabled";
-        const scale = Math.min(1, this.props.CollectionView.props.ScreenToLocalTransform().Scale);
+        const scale = Math.min(1, this.props.CollectionView.props.ScreenToLocalTransform()?.Scale);
         return (
             <div className="collectionViewChrome-cont" style={{
                 top: collapsed ? -70 : 0, height: collapsed ? 0 : undefined,
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index 546a4307c..21b0473c9 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -602,7 +602,6 @@ export class CollectionFreeFormView extends CollectionSubView<PanZoomDocument, P
     pan = (e: PointerEvent | React.Touch | { clientX: number, clientY: number }): void => {
         // bcz: theres should be a better way of doing these than referencing these static instances directly
         MarqueeOptionsMenu.Instance?.fadeOut(true);// I think it makes sense for the marquee menu to go away when panned. -syip2
-        PDFMenu.Instance.fadeOut(true);
 
         const [dx, dy] = this.getTransform().transformDirection(e.clientX - this._lastX, e.clientY - this._lastY);
         this.setPan((this.Document._panX || 0) - dx, (this.Document._panY || 0) - dy, undefined, true);
@@ -870,7 +869,7 @@ export class CollectionFreeFormView extends CollectionSubView<PanZoomDocument, P
     focusDocument = (doc: Doc, willZoom: boolean, scale?: number, afterFocus?: () => boolean) => {
         const state = HistoryUtil.getState();
 
-        // TODO This technically isn't correct if type !== "doc", as 
+        // TODO This technically isn't correct if type !== "doc", as
         // currently nothing is done, but we should probably push a new state
         if (state.type === "doc" && this.Document._panX !== undefined && this.Document._panY !== undefined) {
             const init = state.initializers![this.Document[Id]];
@@ -1204,7 +1203,7 @@ export class CollectionFreeFormView extends CollectionSubView<PanZoomDocument, P
     private thumbIdentifier?: number;
 
     onContextMenu = (e: React.MouseEvent) => {
-        if (this.props.annotationsKey) return;
+        if (this.props.annotationsKey || !ContextMenu.Instance) return;
 
         const appearance = ContextMenu.Instance.findByDescription("Appearance...");
         const appearanceItems = appearance && "subitems" in appearance ? appearance.subitems : [];
@@ -1453,4 +1452,4 @@ class CollectionFreeFormViewPannableContents extends React.Component<CollectionF
             {this.props.children()}
         </div>;
     }
-}
\ No newline at end of file
+}
diff --git a/src/client/views/collections/collectionFreeForm/InkOptionsMenu.scss b/src/client/views/collections/collectionFreeForm/InkOptionsMenu.scss
index a9fab4c1e..753de6bef 100644
--- a/src/client/views/collections/collectionFreeForm/InkOptionsMenu.scss
+++ b/src/client/views/collections/collectionFreeForm/InkOptionsMenu.scss
@@ -9,7 +9,6 @@
         height: 100%;
     }
 
-
 }
 
 .sketch-picker {
@@ -36,6 +35,44 @@
         background: #323232;
         display: block;
 
+    }
+}
+
+@media only screen and (max-device-width: 480px) {
+    .antimodeMenu-button {
+        font-size: 50%;
+
+        .color-preview {
+            width: 100%;
+            height: 100%;
+        }
+
+    }
+
+    .sketch-picker {
+        background: #323232;
+
+        .flexbox-fit {
+            background: #323232;
+        }
+    }
+
+    .btn-group {
+        display: grid;
+        grid-template-columns: auto auto;
+        /* Make the buttons appear below each other */
+    }
+
+    .btn2-group {
+        display: block;
+        background: #323232;
+        grid-template-columns: auto;
 
+        /* Make the buttons appear below each other */
+        .antimodeMenu-button {
+            background: #323232;
+            display: block;
+            font-size: 50%;
+        }
     }
 }
\ No newline at end of file
diff --git a/src/client/views/collections/collectionFreeForm/InkOptionsMenu.tsx b/src/client/views/collections/collectionFreeForm/InkOptionsMenu.tsx
index f1032adaa..f47fca6ac 100644
--- a/src/client/views/collections/collectionFreeForm/InkOptionsMenu.tsx
+++ b/src/client/views/collections/collectionFreeForm/InkOptionsMenu.tsx
@@ -20,6 +20,8 @@ import { faBold, faItalic, faChevronLeft, faUnderline, faStrikethrough, faSubscr
 
 library.add(faBold, faItalic, faChevronLeft, faUnderline, faStrikethrough, faSuperscript, faSubscript, faIndent, faEyeDropper, faCaretDown, faPalette, faArrowsAlt, faHighlighter, faLink, faPaintRoller, faBars, faFillDrip, faBrush, faPenNib, faShapes, faArrowLeft, faEllipsisH, faBezierCurve);
 
+
+
 @observer
 export default class InkOptionsMenu extends AntimodeMenu {
     static Instance: InkOptionsMenu;
@@ -42,6 +44,8 @@ export default class InkOptionsMenu extends AntimodeMenu {
     @observable _dashBtn = false;
     @observable _shapeBtn = false;
 
+
+
     constructor(props: Readonly<{}>) {
         super(props);
         InkOptionsMenu.Instance = this;
@@ -325,4 +329,4 @@ Scripting.addGlobal(function activatePen(penBtn: any) {
         Doc.SetSelectedTool(InkTool.None);
         InkOptionsMenu.Instance.fadeOut(true);
     }
-});
\ No newline at end of file
+});
diff --git a/src/client/views/nodes/AudioBox.scss b/src/client/views/nodes/AudioBox.scss
index 53b54d7e4..c959b79f5 100644
--- a/src/client/views/nodes/AudioBox.scss
+++ b/src/client/views/nodes/AudioBox.scss
@@ -1,141 +1,169 @@
-.audiobox-container, .audiobox-container-interactive {
+.audiobox-container,
+.audiobox-container-interactive {
     width: 100%;
     height: 100%;
     position: inherit;
-    display:flex;
+    display: flex;
     pointer-events: all;
-    cursor:default;
+    cursor: default;
+
     .audiobox-buttons {
         display: flex;
         width: 100%;
         align-items: center;
     }
+
     .audiobox-handle {
-        width:20px;
-        height:100%;
-        display:inline-block;
+        width: 20px;
+        height: 100%;
+        display: inline-block;
     }
-    .audiobox-control, .audiobox-control-interactive {
-        top:0;
+
+    .audiobox-control,
+    .audiobox-control-interactive {
+        top: 0;
         max-height: 32px;
         width: 100%;
-        display:inline-block;
+        display: inline-block;
         pointer-events: none;
     }
+
     .audiobox-control-interactive {
         pointer-events: all;
     }
+
     .audiobox-record {
         pointer-events: all;
-        width:100%;
-        height:100%;
+        width: 100%;
+        height: 100%;
         position: relative;
         pointer-events: none;
     }
+
     .audiobox-record-interactive {
         pointer-events: all;
-        width:100%;
-        height:100%;
+        width: 100%;
+        height: 100%;
         position: relative;
     }
+
     .audiobox-controls {
-        width:100%;
-        height:100%;
+        width: 100%;
+        height: 100%;
         position: relative;
         display: flex;
         padding-left: 2px;
+
         .audiobox-player {
-            margin-top:auto;
-            margin-bottom:auto;
-            width:100%;
+            margin-top: auto;
+            margin-bottom: auto;
+            width: 100%;
             height: 80%;
             position: relative;
             padding-right: 5px;
             display: flex;
-            .audiobox-playhead, .audiobox-dictation {
+
+            .audiobox-playhead,
+            .audiobox-dictation {
                 position: relative;
                 margin-top: auto;
                 margin-bottom: auto;
                 width: 25px;
                 padding: 2px;
             }
+
             .audiobox-dictation {
                 align-items: center;
                 display: inherit;
                 background: dimgray;
             }
+
             .audiobox-timeline {
-                position:relative;
-                height:100%;
-                width:100%;
+                position: relative;
+                height: 100%;
+                width: 100%;
                 background: white;
                 border: gray solid 1px;
                 border-radius: 3px;
+
                 .audiobox-current {
                     width: 1px;
-                    height:100%;
+                    height: 100%;
                     background-color: red;
                     position: absolute;
                 }
-                .audiobox-linker, .audiobox-linker-mini {
-                    position:absolute;
-                    width:15px;
-                    min-height:10px;
-                    height:15px;
-                    margin-left:-2.55px;
-                    background:gray;
+
+                .audiobox-linker,
+                .audiobox-linker-mini {
+                    position: absolute;
+                    width: 15px;
+                    min-height: 10px;
+                    height: 15px;
+                    margin-left: -2.55px;
+                    background: gray;
                     border-radius: 100%;
-                    opacity:0.9;
+                    opacity: 0.9;
                     background-color: transparent;
                     box-shadow: black 2px 2px 1px;
+
                     .linkAnchorBox-cont {
                         position: relative !important;
-                        height: 100%  !important;
+                        height: 100% !important;
                         width: 100% !important;
-                        left:unset !important;
-                        top:unset !important;
+                        left: unset !important;
+                        top: unset !important;
                     }
                 }
+
                 .audiobox-linker-mini {
-                    width:8px;
-                    min-height:8px;
-                    height:8px;
+                    width: 8px;
+                    min-height: 8px;
+                    height: 8px;
                     box-shadow: black 1px 1px 1px;
                     margin-left: -1;
                     margin-top: -2;
+
                     .linkAnchorBox-cont {
                         position: relative !important;
-                        height: 100%  !important;
+                        height: 100% !important;
                         width: 100% !important;
-                        left:unset !important;
-                        top:unset !important;
+                        left: unset !important;
+                        top: unset !important;
                     }
                 }
-                .audiobox-linker:hover, .audiobox-linker-mini:hover {
-                    opacity:1;
+
+                .audiobox-linker:hover,
+                .audiobox-linker-mini:hover {
+                    opacity: 1;
                 }
-                .audiobox-marker-container, .audiobox-marker-minicontainer {
-                    position:absolute;
-                    width:10px;
-                    height:90%;
-                    top:2.5%;
-                    background:gray;
+
+                .audiobox-marker-container,
+                .audiobox-marker-minicontainer {
+                    position: absolute;
+                    width: 10px;
+                    height: 90%;
+                    top: 2.5%;
+                    background: gray;
                     border-radius: 5px;
                     box-shadow: black 2px 2px 1px;
+
                     .audiobox-marker {
-                        position:relative;
+                        position: relative;
                         height: calc(100% - 15px);
                         margin-top: 15px;
                     }
+
                     .audio-marker:hover {
                         border: orange 2px solid;
                     }
                 }
+
                 .audiobox-marker-minicontainer {
-                    width:5px;
+                    width: 5px;
                     border-radius: 1px;
+
                     .audiobox-marker {
-                        position:relative;
+                        position: relative;
                         height: calc(100% - 8px);
                         margin-top: 8px;
                     }
@@ -143,4 +171,27 @@
             }
         }
     }
+}
+
+
+@media only screen and (max-device-width: 480px) {
+    .audiobox-dictation {
+        font-size: 5em;
+        display: flex;
+        width: 100;
+        justify-content: center;
+        flex-direction: column;
+        align-items: center;
+    }
+
+    .audiobox-container .audiobox-record,
+    .audiobox-container-interactive .audiobox-record {
+        font-size: 3em;
+    }
+
+    .audiobox-container .audiobox-controls .audiobox-player .audiobox-playhead,
+    .audiobox-container .audiobox-controls .audiobox-player .audiobox-dictation,
+    .audiobox-container-interactive .audiobox-controls .audiobox-player .audiobox-playhead {
+        width: 70px;
+    }
 }
\ No newline at end of file
diff --git a/src/client/views/nodes/AudioBox.tsx b/src/client/views/nodes/AudioBox.tsx
index 1a935d9b0..d5288fff6 100644
--- a/src/client/views/nodes/AudioBox.tsx
+++ b/src/client/views/nodes/AudioBox.tsx
@@ -161,7 +161,7 @@ export class AudioBox extends ViewBoxBaseComponent<FieldViewProps, AudioDocument
         const funcs: ContextMenuProps[] = [];
         funcs.push({ description: (this.layoutDoc.playOnSelect ? "Don't play" : "Play") + " when document selected", event: () => this.layoutDoc.playOnSelect = !this.layoutDoc.playOnSelect, icon: "expand-arrows-alt" });
 
-        ContextMenu.Instance.addItem({ description: "Options...", subitems: funcs, icon: "asterisk" });
+        ContextMenu.Instance?.addItem({ description: "Options...", subitems: funcs, icon: "asterisk" });
     }
 
     stopRecording = action(() => {
@@ -193,7 +193,7 @@ export class AudioBox extends ViewBoxBaseComponent<FieldViewProps, AudioDocument
         const newDoc = Docs.Create.TextDocument("", {
             title: "", _chromeStatus: "disabled",
             x: NumCast(this.props.Document.x), y: NumCast(this.props.Document.y) + NumCast(this.props.Document._height) + 10,
-            _width: NumCast(this.props.Document._width), _height: 3 * NumCast(this.props.Document._height)
+            _width: NumCast(this.props.Document._width), _height: 2 * NumCast(this.props.Document._height)
         });
         Doc.GetProto(newDoc).recordingSource = this.dataDoc;
         Doc.GetProto(newDoc).recordingStart = ComputedField.MakeFunction(`self.recordingSource["${this.props.fieldKey}-recordingStart"]`);
@@ -228,7 +228,7 @@ export class AudioBox extends ViewBoxBaseComponent<FieldViewProps, AudioDocument
             {!this.path ?
                 <div className="audiobox-buttons">
                     <div className="audiobox-dictation" onClick={this.onFile}>
-                        <FontAwesomeIcon style={{ width: "30px", background: this.layoutDoc.playOnSelect ? "yellow" : "dimGray" }} icon="file-alt" size={this.props.PanelHeight() < 36 ? "1x" : "2x"} />
+                        <FontAwesomeIcon style={{ width: "30px", background: this.layoutDoc.playOnSelect ? "yellow" : "rgba(0,0,0,0)" }} icon="file-alt" size={this.props.PanelHeight() < 36 ? "1x" : "2x"} />
                     </div>
                     <button className={`audiobox-record${interactive}`} style={{ backgroundColor: this.audioState === "recording" ? "red" : "black" }}>
                         {this.audioState === "recording" ? "STOP" : "RECORD"}
diff --git a/src/client/views/nodes/ColorBox.tsx b/src/client/views/nodes/ColorBox.tsx
index 137b387c0..b3a9b6fee 100644
--- a/src/client/views/nodes/ColorBox.tsx
+++ b/src/client/views/nodes/ColorBox.tsx
@@ -71,4 +71,4 @@ export class ColorBox extends ViewBoxBaseComponent<FieldViewProps, ColorDocument
             </div>
         </div>;
     }
-} 
\ No newline at end of file
+}
diff --git a/src/client/views/nodes/DocumentLinksButton.tsx b/src/client/views/nodes/DocumentLinksButton.tsx
index 4f4f12521..3940b7a98 100644
--- a/src/client/views/nodes/DocumentLinksButton.tsx
+++ b/src/client/views/nodes/DocumentLinksButton.tsx
@@ -101,4 +101,4 @@ export class DocumentLinksButton extends React.Component<DocumentLinksButtonProp
     render() {
         return this.linkButton;
     }
-}
\ No newline at end of file
+}
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index a0a47ecfd..eecd76566 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -29,7 +29,6 @@ import { SelectionManager } from "../../util/SelectionManager";
 import SharingManager from '../../util/SharingManager';
 import { Transform } from "../../util/Transform";
 import { undoBatch, UndoManager } from "../../util/UndoManager";
-import { CollectionDockingView } from "../collections/CollectionDockingView";
 import { CollectionView, CollectionViewType } from '../collections/CollectionView';
 import { ContextMenu } from "../ContextMenu";
 import { ContextMenuProps } from '../ContextMenuItem';
@@ -42,7 +41,7 @@ import { LinkAnchorBox } from './LinkAnchorBox';
 import { RadialMenu } from './RadialMenu';
 import React = require("react");
 import { DocumentLinksButton } from './DocumentLinksButton';
-import { HypothesisApi } from '../../apis/hypothesis/HypothesisApiUtils';
+import { MobileInterface } from '../../../mobile/MobileInterface';
 
 library.add(fa.faEdit, fa.faTrash, fa.faShare, fa.faDownload, fa.faExpandArrowsAlt, fa.faCompressArrowsAlt, fa.faLayerGroup, fa.faExternalLinkAlt, fa.faAlignCenter, fa.faCaretSquareRight,
     fa.faSquare, fa.faConciergeBell, fa.faWindowRestore, fa.faFolder, fa.faMapPin, fa.faLink, fa.faFingerprint, fa.faCrosshairs, fa.faDesktop, fa.faUnlock, fa.faLock, fa.faLaptopCode, fa.faMale,
@@ -182,10 +181,11 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
         const pt = me.touchEvent.touches[me.touchEvent.touches.length - 1];
         RadialMenu.Instance.openMenu(pt.pageX - 15, pt.pageY - 15);
 
-        RadialMenu.Instance.addItem({ description: "Open Fields", event: () => this.props.addDocTab(Docs.Create.KVPDocument(this.props.Document, { _width: 300, _height: 300 }), "onRight"), icon: "map-pin", selected: -1 });
-        RadialMenu.Instance.addItem({ description: "Delete this document", event: () => { this.props.ContainingCollectionView?.removeDocument(this.props.Document), RadialMenu.Instance.closeMenu(); }, icon: "layer-group", selected: -1 });
-        RadialMenu.Instance.addItem({ description: "Open in a new tab", event: () => this.props.addDocTab(this.props.Document, "onRight"), icon: "trash", selected: -1 });
-        RadialMenu.Instance.addItem({ description: "Pin to Presentation", event: () => this.props.pinToPres(this.props.Document), icon: "folder", selected: -1 });
+        // RadialMenu.Instance.addItem({ description: "Open Fields", event: () => this.props.addDocTab(Docs.Create.KVPDocument(this.props.Document, { _width: 300, _height: 300 }), "onRight"), icon: "map-pin", selected: -1 });
+        RadialMenu.Instance.addItem({ description: "Delete", event: () => { this.props.ContainingCollectionView?.removeDocument(this.props.Document), RadialMenu.Instance.closeMenu(); }, icon: "external-link-square-alt", selected: -1 });
+        // RadialMenu.Instance.addItem({ description: "Open in a new tab", event: () => this.props.addDocTab(this.props.Document, "onRight"), icon: "trash", selected: -1 });
+        RadialMenu.Instance.addItem({ description: "Pin", event: () => this.props.pinToPres(this.props.Document), icon: "map-pin", selected: -1 });
+        RadialMenu.Instance.addItem({ description: "Open", event: () => MobileInterface.Instance.handleClick(this.props.Document), icon: "trash", selected: -1 });
 
         SelectionManager.DeselectAll();
     }
@@ -346,12 +346,12 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
     // depending on the followLinkLocation property of the source (or the link itself as a fallback);
     followLinkClick = async (altKey: boolean, ctrlKey: boolean, shiftKey: boolean) => {
         const batch = UndoManager.StartBatch("follow link click");
-        // open up target if it's not already in view ... 
+        // open up target if it's not already in view ...
         const createViewFunc = (doc: Doc, followLoc: string, finished: Opt<() => void>) => {
             const targetFocusAfterDocFocus = () => {
                 const where = StrCast(this.Document.followLinkLocation) || followLoc;
                 const hackToCallFinishAfterFocus = () => {
-                    finished && setTimeout(finished, 0); // finished() needs to be called right after hackToCallFinishAfterFocus(), but there's no callback for that so we use the hacky timeout.  
+                    finished && setTimeout(finished, 0); // finished() needs to be called right after hackToCallFinishAfterFocus(), but there's no callback for that so we use the hacky timeout.
                     return false; // we must return false here so that the zoom to the document is not reversed.  If it weren't for needing to call finished(), we wouldn't need this function at all since not having it is equivalent to returning false
                 };
                 this.props.addDocTab(doc, where) && this.props.focus(doc, BoolCast(this.Document.followLinkZoom, true), undefined, hackToCallFinishAfterFocus); //  add the target and focus on it.
@@ -725,23 +725,24 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
                 return;
             }
             e.persist();
-            e?.stopPropagation();
+            e.stopPropagation();
 
-            if (Math.abs(this._downX - e.clientX) > 3 || Math.abs(this._downY - e.clientY) > 3 ||
-                e.isDefaultPrevented()) {
-                e.preventDefault();
+            if (Math.abs(this._downX - e?.clientX) > 3 || Math.abs(this._downY - e?.clientY) > 3 ||
+                e?.isDefaultPrevented()) {
+                e?.preventDefault();
                 return;
             }
             e.preventDefault();
         }
 
         const cm = ContextMenu.Instance;
+        if (!cm) return;
 
         cm.addItem({
             description: "make hypothesis link", event: () => {
                 const docUrl = Utils.prepend("/doc/" + this.props.Document[Id]);
                 const docTitle = StrCast(this.layoutDoc.title);
-                document.dispatchEvent(new CustomEvent<{ url: string, title: string }>("hypothesisLink", {
+                document.dispatchEvent(new CustomEvent<{ url: string, title: string }>("linkRequest", {
                     detail: { url: docUrl, title: docTitle },
                     bubbles: true
                 }));
@@ -887,7 +888,7 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
                 // DocumentViews should stop propagation of this event
                 e.stopPropagation();
             }
-            ContextMenu.Instance.displayMenu(e.pageX - 15, e.pageY - 15);
+            cm.displayMenu(e.pageX - 15, e.pageY - 15);
             !SelectionManager.IsSelected(this, true) && SelectionManager.SelectDoc(this, false);
         });
         const path = this.props.LibraryPath.reduce((p: string, d: Doc) => p + "/" + (Doc.AreProtosEqual(d, (Doc.UserDoc()["tabs-button-library"] as Doc).sourcePanel as Doc) ? "" : d.title), "");
@@ -955,7 +956,7 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
         recommendations.documentIconHeight = 150;
         recommendations.sourceDoc = this.props.Document;
         recommendations.sourceDocContext = this.props.ContainingCollectionView!.props.Document;
-        CollectionDockingView.AddRightSplit(recommendations, undefined);
+        this.props.addDocTab(recommendations, "onRight");
 
         // RecommendationsBox.Instance.displayRecommendations(e.pageX + 100, e.pageY);
     }
@@ -987,13 +988,13 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
             body.href = urls[i];
             bodies.push(body);
         }
-        CollectionDockingView.AddRightSplit(Docs.Create.SchemaDocument(headers, bodies, { title: `Showing External Recommendations for "${StrCast(doc.title)}"` }), undefined);
+        this.props.addDocTab(Docs.Create.SchemaDocument(headers, bodies, { title: `Showing External Recommendations for "${StrCast(doc.title)}"` }), "onRight");
         this._showKPQuery = true;
         this._queries = kps.toString();
     }
 
     // does Document set a layout prop
-    // does Document set a layout prop 
+    // does Document set a layout prop
     setsLayoutProp = (prop: string) => this.props.Document[prop] !== this.props.Document["default" + prop[0].toUpperCase() + prop.slice(1)] && this.props.Document["default" + prop[0].toUpperCase() + prop.slice(1)];
     // get the a layout prop by first choosing the prop from Document, then falling back to the layout doc otherwise.
     getLayoutPropStr = (prop: string) => StrCast(this.setsLayoutProp(prop) ? this.props.Document[prop] : this.layoutDoc[prop]);
diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx
index c1c6f6baf..d16aa528c 100644
--- a/src/client/views/nodes/ImageBox.tsx
+++ b/src/client/views/nodes/ImageBox.tsx
@@ -120,7 +120,7 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps, ImageD
                 });
                 const files = await res.json();
                 const url = Utils.prepend(files[0].path);
-                // upload to server with known URL 
+                // upload to server with known URL
                 const audioDoc = Docs.Create.AudioDocument(url, { title: "audio test", _width: 200, _height: 32 });
                 audioDoc.treeViewExpandedView = "layout";
                 const audioAnnos = Cast(this.dataDoc[this.fieldKey + "-audioAnnotations"], listSpec(Doc));
@@ -174,14 +174,14 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps, ImageD
             //     }), icon: "expand-arrows-alt"
             // });
 
-            const existingAnalyze = ContextMenu.Instance.findByDescription("Analyzers...");
+            const existingAnalyze = ContextMenu.Instance?.findByDescription("Analyzers...");
             const modes: ContextMenuProps[] = existingAnalyze && "subitems" in existingAnalyze ? existingAnalyze.subitems : [];
             modes.push({ description: "Generate Tags", event: this.generateMetadata, icon: "tag" });
             modes.push({ description: "Find Faces", event: this.extractFaces, icon: "camera" });
             //modes.push({ description: "Recommend", event: this.extractText, icon: "brain" });
-            !existingAnalyze && ContextMenu.Instance.addItem({ description: "Analyzers...", subitems: modes, icon: "hand-point-right" });
+            !existingAnalyze && ContextMenu.Instance?.addItem({ description: "Analyzers...", subitems: modes, icon: "hand-point-right" });
 
-            ContextMenu.Instance.addItem({ description: "Options...", subitems: funcs, icon: "asterisk" });
+            ContextMenu.Instance?.addItem({ description: "Options...", subitems: funcs, icon: "asterisk" });
         }
     }
 
@@ -236,6 +236,7 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps, ImageD
         if (this._curSuffix === "_m") this._mediumRetryCount++;
         if (this._curSuffix === "_l") this._largeRetryCount++;
     }
+
     @action onError = (error: any) => {
         const timeout = this._curSuffix === "_s" ? this._smallRetryCount : this._curSuffix === "_m" ? this._mediumRetryCount : this._largeRetryCount;
         if (timeout < 5) {
@@ -490,4 +491,4 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps, ImageD
             </CollectionFreeFormView>
         </div >);
     }
-}
\ No newline at end of file
+}
diff --git a/src/client/views/nodes/LinkDocPreview.tsx b/src/client/views/nodes/LinkDocPreview.tsx
index 92b443d3b..e8a08abb5 100644
--- a/src/client/views/nodes/LinkDocPreview.tsx
+++ b/src/client/views/nodes/LinkDocPreview.tsx
@@ -104,4 +104,4 @@ export class LinkDocPreview extends React.Component<Props> {
             {this.targetDocView}
         </div>;
     }
-}
\ No newline at end of file
+}
diff --git a/src/client/views/nodes/PDFBox.scss b/src/client/views/nodes/PDFBox.scss
index c6a83b662..f2ab37984 100644
--- a/src/client/views/nodes/PDFBox.scss
+++ b/src/client/views/nodes/PDFBox.scss
@@ -5,24 +5,26 @@
     height: 100%;
     width: 100%;
     overflow: hidden;
-    cursor:auto;
+    cursor: auto;
     transform-origin: top left;
     z-index: 0;
+
     .pdfBox-ui {
         position: absolute;
-         width: 100%; 
-         height: 100%;
-         z-index: 1;
-         pointer-events: none;
+        width: 100%;
+        height: 100%;
+        z-index: 1;
+        pointer-events: none;
 
-         .pdfBox-pageNums {
+        .pdfBox-pageNums {
             display: flex;
             flex-direction: row;
             height: 25px;
             position: absolute;
             left: 5px;
             top: 5px;
-            .pdfBox-overlayButton-fwd, 
+
+            .pdfBox-overlayButton-fwd,
             .pdfBox-overlayButton-back {
                 background: #121721;
                 height: 25px;
@@ -34,29 +36,29 @@
                 border-radius: 3px;
                 pointer-events: all;
             }
-         }
-
-         .pdfBox-overlayButton {
-             border-bottom-left-radius: 50%;
-             display: flex;
-             justify-content: space-evenly;
-             align-items: center;
-             height: 20px;
-             background: none;
-             padding: 0;
-             position: absolute;
-             pointer-events: all;
-         
-             .pdfBox-overlayButton-arrow {
-                 width: 0;
-                 height: 0;
-                 border-top: 10px solid transparent;
-                 border-bottom: 10px solid transparent;
-                 border-right: 15px solid #121721;
-                 transition: all 0.5s;
-             }
-
-             .pdfBox-overlayButton-iconCont {
+        }
+
+        .pdfBox-overlayButton {
+            border-bottom-left-radius: 50%;
+            display: flex;
+            justify-content: space-evenly;
+            align-items: center;
+            height: 20px;
+            background: none;
+            padding: 0;
+            position: absolute;
+            pointer-events: all;
+
+            .pdfBox-overlayButton-arrow {
+                width: 0;
+                height: 0;
+                border-top: 10px solid transparent;
+                border-bottom: 10px solid transparent;
+                border-right: 15px solid #121721;
+                transition: all 0.5s;
+            }
+
+            .pdfBox-overlayButton-iconCont {
                 background: #121721;
                 height: 20px;
                 width: 25px;
@@ -66,11 +68,11 @@
                 justify-content: center;
                 border-radius: 3px;
                 pointer-events: all;
-             }
+            }
         }
 
-         .pdfBox-nextIcon, 
-         .pdfBox-prevIcon {
+        .pdfBox-nextIcon,
+        .pdfBox-prevIcon {
             background: #121721;
             height: 20px;
             width: 25px;
@@ -81,96 +83,97 @@
             border-radius: 3px;
             pointer-events: all;
             padding: 0px;
-         }
-         
-         .pdfBox-overlayButton:hover {
-             background: none;
-         }
-         
-
-         .pdfBox-settingsCont {
-             position: absolute;
-             right: 0;
-             top: 3;
-             pointer-events: all;
-         
-             .pdfBox-settingsButton {
-                 border-bottom-left-radius: 50%;
-                 display: flex;
-                 justify-content: space-evenly;
-                 align-items: center;
-                 height: 20px;
-                 background: none;
-                 padding: 0;
-         
-                 .pdfBox-settingsButton-arrow {
-                     width: 0;
-                     height: 0;
-                     border-top: 10px solid transparent;
-                     border-bottom: 10px solid transparent;
-                     border-right: 15px solid #121721;
-                     transition: all 0.5s;
-                 }
-         
-                 .pdfBox-settingsButton-iconCont {
-                     background: #121721;
-                     height: 20px;
-                     width: 25px;
-                     display: flex;
-                     justify-content: center;
-                     align-items: center;
-                     margin-left: -2px;
-                     border-radius: 3px;
-                 }
-             }
-         
-             .pdfBox-settingsButton:hover {
-                 background: none;
-             }
-         
-             .pdfBox-settingsFlyout {
-                 position: absolute;
-                 background: #323232;
-                 box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.25);
-                 right: 20px;
-                 border-radius: 7px;
-                 padding: 20px;
-                 display: flex;
-                 flex-direction: column;
-                 font-size: 14px;
-                 transition: all 0.5s;
-         
-                 .pdfBox-settingsFlyout-title {
-                     color: white;
-                 }
-         
-                 .pdfBox-settingsFlyout-kvpInput {
-                     margin-top: 20px;
-                     display: grid;
-                     grid-template-columns: 47.5% 5% 47.5%;
-                 }
-             }
-         }
-         
-         .pdfBox-overlayCont {
-             position: absolute;
-             width: calc(100% - 40px);
-             height: 20px;
-             background: #121721;
-             bottom: 0;
-             display: flex;
-             justify-content: center;
-             align-items: center;
-             overflow: hidden;
-             transition: left .5s;
-             pointer-events: all;
-         
-             .pdfBox-searchBar {
-                 width: 70%;
-                 font-size: 14px;
-             }
-         }
+        }
+
+        .pdfBox-overlayButton:hover {
+            background: none;
+        }
+
+
+        .pdfBox-settingsCont {
+            position: absolute;
+            right: 0;
+            top: 3;
+            pointer-events: all;
+
+            .pdfBox-settingsButton {
+                border-bottom-left-radius: 50%;
+                display: flex;
+                justify-content: space-evenly;
+                align-items: center;
+                height: 20px;
+                background: none;
+                padding: 0;
+
+                .pdfBox-settingsButton-arrow {
+                    width: 0;
+                    height: 0;
+                    border-top: 10px solid transparent;
+                    border-bottom: 10px solid transparent;
+                    border-right: 15px solid #121721;
+                    transition: all 0.5s;
+                }
+
+                .pdfBox-settingsButton-iconCont {
+                    background: #121721;
+                    height: 20px;
+                    width: 25px;
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+                    margin-left: -2px;
+                    border-radius: 3px;
+                }
+            }
+
+            .pdfBox-settingsButton:hover {
+                background: none;
+            }
+
+            .pdfBox-settingsFlyout {
+                position: absolute;
+                background: #323232;
+                box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.25);
+                right: 20px;
+                border-radius: 7px;
+                padding: 20px;
+                display: flex;
+                flex-direction: column;
+                font-size: 14px;
+                transition: all 0.5s;
+
+                .pdfBox-settingsFlyout-title {
+                    color: white;
+                }
+
+                .pdfBox-settingsFlyout-kvpInput {
+                    margin-top: 20px;
+                    display: grid;
+                    grid-template-columns: 47.5% 5% 47.5%;
+                }
+            }
+        }
+
+        .pdfBox-overlayCont {
+            position: absolute;
+            width: calc(100% - 40px);
+            height: 20px;
+            background: #121721;
+            bottom: 0;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            overflow: hidden;
+            transition: left .5s;
+            pointer-events: all;
+
+            .pdfBox-searchBar {
+                width: 70%;
+                font-size: 14px;
+            }
+        }
     }
+
     .pdfBox-title-outer {
         width: 150%;
         height: 100%;
@@ -179,9 +182,9 @@
         z-index: 0;
         background: lightslategray;
         transform-origin: top left;
-        
+
         .pdfBox-title {
-            color:lightgray;
+            color: lightgray;
             margin-top: auto;
             margin-bottom: auto;
             transform-origin: 42% 15%;
@@ -217,4 +220,76 @@
             }
         }
     }
-}
\ No newline at end of file
+}
+
+// CSS adjusted for mobile devices
+@media only screen and (max-device-width: 480px) {
+
+    .pdfBox .pdfBox-ui .pdfBox-settingsCont .pdfBox-settingsButton,
+    .pdfBox-interactive .pdfBox-ui .pdfBox-settingsCont .pdfBox-settingsButton {
+        height: 60px;
+
+        .pdfBox-settingsButton-iconCont {
+            height: 60px;
+            width: 75px;
+            font-size: 30px;
+        }
+
+        .pdfBox-settingsButton-arrow {
+            height: 60;
+            border-top: 30px solid transparent;
+            border-bottom: 30px solid transparent;
+            border-right: 30px solid #121721;
+        }
+    }
+
+
+
+    .pdfBox .pdfBox-ui .pdfBox-settingsCont .pdfBox-settingsFlyout,
+    .pdfBox-interactive .pdfBox-ui .pdfBox-settingsCont .pdfBox-settingsFlyout {
+        font-size: 30px;
+    }
+
+
+
+    .pdfBox .pdfBox-ui .pdfBox-overlayCont,
+    .pdfBox-interactive .pdfBox-ui .pdfBox-overlayCont {
+        height: 60px;
+
+        .pdfBox-searchBar {
+            font-size: 40px;
+        }
+    }
+
+    .pdfBox .pdfBox-ui .pdfBox-overlayButton,
+    .pdfBox-interactive .pdfBox-ui .pdfBox-overlayButton {
+        height: 60px;
+
+        .pdfBox-overlayButton-iconCont {
+            height: 60px;
+            width: 75px;
+            font-size: 30;
+        }
+
+        .pdfBox-overlayButton-arrow {
+            border-top: 30px solid transparent;
+            border-bottom: 30px solid transparent;
+            border-right: 30px solid #121721;
+        }
+    }
+
+    button.pdfBox-search {
+        font-size: 30px;
+        width: 50px;
+        height: 50px;
+    }
+
+    .pdfBox .pdfBox-ui .pdfBox-nextIcon,
+    .pdfBox .pdfBox-ui .pdfBox-prevIcon,
+    .pdfBox-interactive .pdfBox-ui .pdfBox-nextIcon,
+    .pdfBox-interactive .pdfBox-ui .pdfBox-prevIcon {
+        height: 50px;
+        width: 50px;
+        font-size: 30px;
+    }
+}
diff --git a/src/client/views/nodes/PDFBox.tsx b/src/client/views/nodes/PDFBox.tsx
index eb2a85eeb..1c5825a8f 100644
--- a/src/client/views/nodes/PDFBox.tsx
+++ b/src/client/views/nodes/PDFBox.tsx
@@ -157,7 +157,7 @@ export class PDFBox extends ViewBoxAnnotatableComponent<FieldViewProps, PdfDocum
                 <div className="pdfBox-overlayCont" key="cont" onPointerDown={(e) => e.stopPropagation()} style={{ left: `${this._searching ? 0 : 100}%` }}>
                     <button className="pdfBox-overlayButton" title={searchTitle} />
                     <input className="pdfBox-searchBar" placeholder="Search" ref={this._searchRef} onChange={this.searchStringChanged} onKeyDown={e => e.keyCode === KeyCodes.ENTER && this.search(this._searchString, !e.shiftKey)} />
-                    <button title="Search" onClick={e => this.search(this._searchString, !e.shiftKey)}>
+                    <button className="pdfBox-search" title="Search" onClick={e => this.search(this._searchString, !e.shiftKey)}>
                         <FontAwesomeIcon icon="search" size="sm" color="white" /></button>
                     <button className="pdfBox-prevIcon " title="Previous Annotation" onClick={this.prevAnnotation} >
                         <FontAwesomeIcon style={{ color: "white" }} icon={"arrow-up"} size="lg" />
@@ -189,7 +189,7 @@ export class PDFBox extends ViewBoxAnnotatableComponent<FieldViewProps, PdfDocum
                             <FontAwesomeIcon style={{ color: "white" }} icon="cog" size="lg" />
                         </div>
                     </button>
-                    <div className="pdfBox-settingsFlyout" style={{ right: `${this._flyout ? 20 : -600}px` }} >
+                    <div className="pdfBox-settingsFlyout" style={{ right: `${this._flyout ? 20 : -1000}px` }} >
                         <div className="pdfBox-settingsFlyout-title">
                             Annotation View Settings
                         </div>
@@ -229,7 +229,8 @@ export class PDFBox extends ViewBoxAnnotatableComponent<FieldViewProps, PdfDocum
         const classname = "pdfBox" + (this.active() ? "-interactive" : "");
         return <div className={classname} style={{
             width: !this.props.Document._fitWidth ? this.Document._nativeWidth || 0 : `${100 / this.contentScaling}%`,
-            height: !this.props.Document._fitWidth ? this.Document._nativeHeight || 0 : `${100 / this.contentScaling}%`,
+            //height adjusted for mobile (window.screen.width > 600)
+            height: !this.props.Document._fitWidth && (window.screen.width > 600) ? this.Document._nativeHeight || 0 : `${100 / this.contentScaling}%`,
             transform: `scale(${this.contentScaling})`
         }}  >
             <div className="pdfBox-title-outer">
@@ -241,7 +242,7 @@ export class PDFBox extends ViewBoxAnnotatableComponent<FieldViewProps, PdfDocum
     isChildActive = (outsideReaction?: boolean) => this._isChildActive;
     @computed get renderPdfView() {
         const pdfUrl = Cast(this.dataDoc[this.props.fieldKey], PdfField);
-        return <div className={"pdfBox"} onContextMenu={this.specificContextMenu} style={{ height: this.props.Document._scrollTop && !this.Document._fitWidth ? NumCast(this.Document._height) * this.props.PanelWidth() / NumCast(this.Document._width) : undefined }}>
+        return <div className={"pdfBox"} onContextMenu={this.specificContextMenu} style={{ height: this.props.Document._scrollTop && !this.Document._fitWidth && (window.screen.width > 600) ? NumCast(this.Document._height) * this.props.PanelWidth() / NumCast(this.Document._width) : undefined }}>
             <PDFViewer {...this.props} pdf={this._pdf!} url={pdfUrl!.url.pathname} active={this.props.active} loaded={this.loaded}
                 setPdfViewer={this.setPdfViewer} ContainingCollectionView={this.props.ContainingCollectionView}
                 renderDepth={this.props.renderDepth} PanelHeight={this.props.PanelHeight} PanelWidth={this.props.PanelWidth}
diff --git a/src/client/views/nodes/PresBox.scss b/src/client/views/nodes/PresBox.scss
index d48000e16..9f6af1bde 100644
--- a/src/client/views/nodes/PresBox.scss
+++ b/src/client/views/nodes/PresBox.scss
@@ -16,6 +16,7 @@
         height: calc(100% - 25px);
         width: 100%;
     }
+
     .presBox-buttons {
         width: 100%;
         background: gray;
@@ -24,6 +25,7 @@
         display: grid;
         grid-column-end: 4;
         grid-column-start: 1;
+
         .presBox-viewPicker {
             height: 25;
             position: relative;
@@ -31,10 +33,12 @@
             grid-column: 1/2;
             min-width: 15px;
         }
+
         select {
             background: #323232;
             color: white;
         }
+
         .presBox-button {
             margin-right: 2.5%;
             margin-left: 2.5%;
@@ -44,10 +48,12 @@
             align-items: center;
             background: #323232;
             color: white;
+
             svg {
                 margin: auto;
             }
         }
+
         .collectionViewBaseChrome-viewPicker {
             min-width: 50;
             width: 5%;
@@ -56,17 +62,68 @@
             display: inline-block;
         }
     }
-    .presBox-backward, .presBox-forward {
+
+    .presBox-backward,
+    .presBox-forward {
         width: 25px;
         border-radius: 5px;
-        top:50%;
+        top: 50%;
         position: absolute;
         display: inline-block;
     }
+
     .presBox-backward {
-        left:5;
+        left: 5;
     }
+
     .presBox-forward {
-        right:5;
+        right: 5;
+    }
+}
+
+// CSS adjusted for mobile devices
+@media only screen and (max-device-width: 480px) {
+    .presBox-cont .presBox-buttons {
+        position: absolute;
+        top: 70%;
+        left: 50%;
+        transform: translate(-50%, 0);
+        width: max-content;
+        height: 15%;
+        z-index: 2;
+        align-items: center;
+        background: rgba(0, 0, 0, 0);
+        display: inline-flex;
+
+        .presBox-button {
+            margin-top: 5%;
+            height: 250;
+            width: 300;
+            font-size: 100;
+            display: flex;
+            align-items: center;
+            background: #323232;
+            color: white;
+        }
+
+        .presBox-viewPicker {
+            top: -70;
+            left: 2.5%;
+            height: 50;
+            width: 95%;
+            font-size: 30px;
+            position: absolute;
+            min-width: 50px;
+        }
+    }
+
+    .presBox-cont .presBox-listCont {
+        top: 50;
+        height: calc(100% - 80px);
+    }
+
+    .input,
+    .select {
+        font-size: 100%;
     }
 }
\ No newline at end of file
diff --git a/src/client/views/nodes/RadialMenu.tsx b/src/client/views/nodes/RadialMenu.tsx
index ddfdb67b4..a3ac09a11 100644
--- a/src/client/views/nodes/RadialMenu.tsx
+++ b/src/client/views/nodes/RadialMenu.tsx
@@ -1,7 +1,6 @@
 import React = require("react");
 import { action, computed, IReactionDisposer, observable, reaction, runInAction } from "mobx";
 import { observer } from "mobx-react";
-import MobileInterface from "../../../mobile/MobileInterface";
 import "./RadialMenu.scss";
 import { RadialMenuItem, RadialMenuProps } from "./RadialMenuItem";
 
@@ -26,7 +25,6 @@ export class RadialMenu extends React.Component {
 
 
     catchTouch = (te: React.TouchEvent) => {
-        console.log("caught");
         te.stopPropagation();
         te.preventDefault();
     }
@@ -38,7 +36,6 @@ export class RadialMenu extends React.Component {
         this._mouseY = e.clientY;
         this.used = false;
         document.addEventListener("pointermove", this.onPointerMove);
-
     }
 
     @observable
@@ -176,7 +173,6 @@ export class RadialMenu extends React.Component {
 
     @action
     openMenu = (x: number, y: number) => {
-
         this._pageX = x;
         this._pageY = y;
         this._shouldDisplay;
@@ -216,7 +212,7 @@ export class RadialMenu extends React.Component {
 
 
     render() {
-        if (!this._display || MobileInterface.Instance) {
+        if (!this._display) {
             return null;
         }
         const style = this._yRelativeToTop ? { left: this._pageX - 130, top: this._pageY - 130 } :
diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.scss b/src/client/views/nodes/formattedText/FormattedTextBox.scss
index 678494b27..0a094ba6a 100644
--- a/src/client/views/nodes/formattedText/FormattedTextBox.scss
+++ b/src/client/views/nodes/formattedText/FormattedTextBox.scss
@@ -37,6 +37,7 @@
         position: absolute;
     }
 }
+
 .formattedTextBox-outer {
     position: relative;
     overflow: auto;
@@ -72,7 +73,7 @@
     .collectionfreeformview-container {
         position: relative;
     }
-    
+
     >.formattedTextBox-sidebar-handle {
         right: unset;
         left: -5;
@@ -95,7 +96,7 @@
 .formattedTextBox-inner-rounded, .formattedTextBox-inner-rounded-selected,
 .formattedTextBox-inner, .formattedTextBox-inner-selected {
     height: 100%;
-    white-space: pre-wrap; 
+    white-space: pre-wrap;
     .ProseMirror:hover {
         background: rgba(200,200,200,0.8);
     }
@@ -262,19 +263,19 @@ footnote::after {
       border:unset;
       padding:0px;
   }
-  
+
   .prosemirror-links a {
     float: left;
     color: white;
     text-decoration: none;
     border-radius: 3px;
   }
-  
+
   .prosemirror-links a:hover {
     background-color: #eee;
     color: black;
   }
-  
+
   .prosemirror-anchor:hover .prosemirror-links {
     display: grid;
   }
@@ -321,7 +322,7 @@ footnote::after {
     .multi2-ol { counter-reset: multi2; p {display: inline-block; font-family: inherit} font-size: smaller; padding-left: 1.4em;}
     .multi3-ol { counter-reset: multi3; p {display: inline-block; font-family: inherit} font-size: smaller; padding-left: 2em;}
     .multi4-ol { counter-reset: multi4; p {display: inline-block; font-family: inherit} font-size: smaller; padding-left: 3.4em;}
-    
+
     .bullet:before, .bullet1:before, .bullet2:before, .bullet3:before, .bullet4:before, .bullet5:before { transition: 0.5s; display: inline-block; vertical-align: top; margin-left: -1em; width: 1em; content:" " }
 
     .decimal1:before { transition: 0.5s;counter-increment: deci1; display: inline-block; vertical-align: top; margin-left: -1em;   width:  1em;   content: counter(deci1) ". ";  }
@@ -331,7 +332,7 @@ footnote::after {
     .decimal5:before { transition: 0.5s;counter-increment: deci5; display: inline-block; vertical-align: top; margin-left: -2em;   width:  5em;   content: counter(deci1) "."counter(deci2) "."counter(deci3) "."counter(deci4) "."counter(deci5) ". "; }
     .decimal6:before { transition: 0.5s;counter-increment: deci6; display: inline-block; vertical-align: top; margin-left: -2em;   width:  6em;   content: counter(deci1) "."counter(deci2) "."counter(deci3) "."counter(deci4) "."counter(deci5) "."counter(deci6) ". "; }
     .decimal7:before { transition: 0.5s;counter-increment: deci7; display: inline-block; vertical-align: top; margin-left: -2em;   width:  7em;   content: counter(deci1) "."counter(deci2) "."counter(deci3) "."counter(deci4) "."counter(deci5) "."counter(deci6) "."counter(deci7) ". "; }
-    
+
     .multi1:before { transition: 0.5s;counter-increment: multi1; display: inline-block; vertical-align: top; margin-left: -1em;    width: 1.2em;  content: counter(multi1, upper-alpha) ". ";  }
     .multi2:before { transition: 0.5s;counter-increment: multi2; display: inline-block; vertical-align: top; margin-left: -2em;    width:   2em;  content: counter(multi1, upper-alpha) "."counter(multi2, decimal) ". "; }
     .multi3:before { transition: 0.5s;counter-increment: multi3; display: inline-block; vertical-align: top; margin-left: -2.85em; width:2.85em;  content: counter(multi1, upper-alpha) "."counter(multi2, decimal) "."counter(multi3, lower-alpha) ". "; }
@@ -346,4 +347,284 @@ footnote::after {
     .ProseMirror:hover {
         background: unset;
     }
-}
\ No newline at end of file
+}
+
+@media only screen and (max-width: 1000px) {
+    @import "../../globalCssVariables";
+
+    .ProseMirror {
+        width: 100%;
+        height: 100%;
+        min-height: 100%;
+    }
+
+    .ProseMirror:focus {
+        outline: none !important;
+    }
+
+    .formattedTextBox-cont {
+        touch-action: none;
+        cursor: text;
+        background: inherit;
+        padding: 0;
+        border-width: 0px;
+        border-radius: inherit;
+        border-color: $intermediate-color;
+        box-sizing: border-box;
+        background-color: inherit;
+        border-style: solid;
+        overflow-y: auto;
+        overflow-x: hidden;
+        color: initial;
+        max-height: 100%;
+        display: flex;
+        flex-direction: row;
+        transition: opacity 1s;
+
+        .formattedTextBox-dictation {
+            height: 12px;
+            width: 10px;
+            top: 0px;
+            left: 0px;
+            position: absolute;
+        }
+    }
+
+    .formattedTextBox-outer {
+        position: relative;
+        overflow: auto;
+        display: inline-block;
+        width: 100%;
+        height: 100%;
+    }
+
+    .formattedTextBox-sidebar-handle {
+        position: absolute;
+        top: calc(50% - 17.5px);
+        width: 10px;
+        height: 35px;
+        background: lightgray;
+        border-radius: 20px;
+        cursor:grabbing;
+    }
+
+    .formattedTextBox-cont>.formattedTextBox-sidebar-handle {
+        right: 0;
+        left: unset;
+    }
+
+    .formattedTextBox-sidebar,
+    .formattedTextBox-sidebar-inking {
+        border-left: dashed 1px black;
+        height: 100%;
+        display: inline-block;
+        position: absolute;
+        right: 0;
+
+        .collectionfreeformview-container {
+            position: relative;
+        }
+
+        >.formattedTextBox-sidebar-handle {
+            right: unset;
+            left: -5;
+        }
+    }
+
+    .formattedTextBox-sidebar-inking {
+        pointer-events: all;
+    }
+
+    .formattedTextBox-inner-rounded {
+        height: 70%;
+        width: 85%;
+        position: absolute;
+        overflow: auto;
+        top: 15%;
+        left: 10%;
+    }
+
+    .formattedTextBox-inner-rounded,
+    .formattedTextBox-inner {
+        height: 100%;
+        white-space: pre-wrap;
+        hr {
+            display: block;
+            unicode-bidi: isolate;
+            margin-block-start: 0.5em;
+            margin-block-end: 0.5em;
+            margin-inline-start: auto;
+            margin-inline-end: auto;
+            overflow: hidden;
+            border-style: inset;
+            border-width: 1px;
+        }
+    }
+
+    // .menuicon {
+    //     display: inline-block;
+    //     border-right: 1px solid rgba(0, 0, 0, 0.2);
+    //     color: #888;
+    //     line-height: 1;
+    //     padding: 0 7px;
+    //     margin: 1px;
+    //     cursor: pointer;
+    //     text-align: center;
+    //     min-width: 1.4em;
+    // }
+
+    .strong,
+    .heading {
+        font-weight: bold;
+    }
+
+    .em {
+        font-style: italic;
+    }
+
+    .userMarkOpen {
+        background: rgba(255, 255, 0, 0.267);
+        display: inline;
+    }
+
+    .userMark {
+        background: rgba(255, 255, 0, 0.267);
+        font-size: 2px;
+        display: inline-grid;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        width: 10px;
+        min-height: 10px;
+        text-align: center;
+        align-content: center;
+    }
+
+    footnote {
+        display: inline-block;
+        position: relative;
+        cursor: pointer;
+
+        div {
+            padding: 0 !important;
+        }
+    }
+
+    footnote::after {
+        content: counter(prosemirror-footnote);
+        vertical-align: super;
+        font-size: 75%;
+        counter-increment: prosemirror-footnote;
+    }
+
+    .ProseMirror {
+        counter-reset: prosemirror-footnote;
+    }
+
+    .footnote-tooltip {
+        cursor: auto;
+        font-size: 75%;
+        position: absolute;
+        left: -30px;
+        top: calc(100% + 10px);
+        background: silver;
+        padding: 3px;
+        border-radius: 2px;
+        max-width: 100px;
+        min-width: 50px;
+        width: max-content;
+    }
+
+    .prosemirror-attribution {
+        font-size: 8px;
+    }
+
+    .footnote-tooltip::before {
+        border: 5px solid silver;
+        border-top-width: 0px;
+        border-left-color: transparent;
+        border-right-color: transparent;
+        position: absolute;
+        top: -5px;
+        left: 27px;
+        content: " ";
+        height: 0;
+        width: 0;
+    }
+
+
+    .formattedTextBox-inlineComment {
+        position: relative;
+        width: 40px;
+        height: 20px;
+        &::before {
+            content: "→";
+        }
+        &:hover {
+            background: orange;
+        }
+    }
+
+    .formattedTextBox-summarizer {
+        opacity: 0.5;
+        position: relative;
+        width: 40px;
+        height: 20px;
+        &::after {
+            content: "←";
+        }
+    }
+
+    .formattedTextBox-summarizer-collapsed {
+        opacity: 0.5;
+        position: relative;
+        width: 40px;
+        height: 20px;
+        &::after {
+            content: "...";
+        }
+    }
+
+    .ProseMirror {
+        touch-action: none;
+        span {
+            font-family: inherit;
+        }
+
+        ol, ul {
+            counter-reset: deci1 0 multi1 0;
+            padding-left: 1em;
+            font-family: inherit;
+        }
+        ol {
+            margin-left: 1em;
+            font-family: inherit;
+        }
+
+        .decimal1-ol { counter-reset: deci1; p {display: inline; font-family: inherit} margin-left: 0; }
+        .decimal2-ol { counter-reset: deci2; p {display: inline; font-family: inherit} font-size: smaller; padding-left: 1em;}
+        .decimal3-ol { counter-reset: deci3; p {display: inline; font-family: inherit} font-size: smaller; padding-left: 2em;}
+        .decimal4-ol { counter-reset: deci4; p {display: inline; font-family: inherit} font-size: smaller; padding-left: 3em;}
+        .decimal5-ol { counter-reset: deci5; p {display: inline; font-family: inherit} font-size: smaller; }
+        .decimal6-ol { counter-reset: deci6; p {display: inline; font-family: inherit} font-size: smaller; }
+        .decimal7-ol { counter-reset: deci7; p {display: inline; font-family: inherit} font-size: smaller; }
+
+        .multi1-ol { counter-reset: multi1; p {display: inline; font-family: inherit} margin-left: 0;     padding-left: 1.2em }
+        .multi2-ol { counter-reset: multi2; p {display: inline; font-family: inherit} font-size: smaller; padding-left: 1.4em;}
+        .multi3-ol { counter-reset: multi3; p {display: inline; font-family: inherit} font-size: smaller; padding-left: 2em;}
+        .multi4-ol { counter-reset: multi4; p {display: inline; font-family: inherit} font-size: smaller; padding-left: 3.4em;}
+
+        .decimal1:before { transition: 0.5s;counter-increment: deci1; display: inline-block; margin-left: -1em;   width:  1em;   content: counter(deci1) ". ";  }
+        .decimal2:before { transition: 0.5s;counter-increment: deci2; display: inline-block; margin-left: -2.1em; width: 2.1em;  content: counter(deci1) "."counter(deci2) ". ";  }
+        .decimal3:before { transition: 0.5s;counter-increment: deci3; display: inline-block; margin-left: -2.85em;width: 2.85em; content: counter(deci1) "."counter(deci2) "."counter(deci3) ". "; }
+        .decimal4:before { transition: 0.5s;counter-increment: deci4; display: inline-block; margin-left: -3.85em;width: 3.85em; content: counter(deci1) "."counter(deci2) "."counter(deci3) "."counter(deci4) ". "; }
+        .decimal5:before { transition: 0.5s;counter-increment: deci5; display: inline-block; margin-left: -2em;   width:  5em;   content: counter(deci1) "."counter(deci2) "."counter(deci3) "."counter(deci4) "."counter(deci5) ". "; }
+        .decimal6:before { transition: 0.5s;counter-increment: deci6; display: inline-block; margin-left: -2em;   width:  6em;   content: counter(deci1) "."counter(deci2) "."counter(deci3) "."counter(deci4) "."counter(deci5) "."counter(deci6) ". "; }
+        .decimal7:before { transition: 0.5s;counter-increment: deci7; display: inline-block; margin-left: -2em;   width:  7em;   content: counter(deci1) "."counter(deci2) "."counter(deci3) "."counter(deci4) "."counter(deci5) "."counter(deci6) "."counter(deci7) ". "; }
+
+        .multi1:before { transition: 0.5s;counter-increment: multi1; display: inline-block; margin-left: -1em;    width: 1.2em;  content: counter(multi1, upper-alpha) ". ";  }
+        .multi2:before { transition: 0.5s;counter-increment: multi2; display: inline-block; margin-left: -2em;    width:   2em;  content: counter(multi1, upper-alpha) "."counter(multi2, decimal) ". "; }
+        .multi3:before { transition: 0.5s;counter-increment: multi3; display: inline-block; margin-left: -2.85em; width:2.85em;  content: counter(multi1, upper-alpha) "."counter(multi2, decimal) "."counter(multi3, lower-alpha) ". "; }
+        .multi4:before { transition: 0.5s;counter-increment: multi4; display: inline-block; margin-left:   -4.2em;  width: 4.2em;    content: counter(multi1, upper-alpha) "."counter(multi2, decimal) "."counter(multi3, lower-alpha) "."counter(multi4, lower-roman) ". "; }
+    }
+}
diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
index 664141607..69708e7a0 100644
--- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx
+++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
@@ -8,7 +8,7 @@ import { baseKeymap, selectAll } from "prosemirror-commands";
 import { history } from "prosemirror-history";
 import { inputRules } from 'prosemirror-inputrules';
 import { keymap } from "prosemirror-keymap";
-import { Fragment, Mark, Node, Slice } from "prosemirror-model";
+import { Fragment, Mark, Node, Slice, Schema } from "prosemirror-model";
 import { EditorState, NodeSelection, Plugin, TextSelection, Transaction } from "prosemirror-state";
 import { ReplaceStep } from 'prosemirror-transform';
 import { EditorView } from "prosemirror-view";
@@ -16,6 +16,7 @@ import { DateField } from '../../../../fields/DateField';
 import { DataSym, Doc, DocListCast, DocListCastAsync, Field, HeightSym, Opt, WidthSym, AclSym } from "../../../../fields/Doc";
 import { documentSchema } from '../../../../fields/documentSchemas';
 import applyDevTools = require("prosemirror-dev-tools");
+import { removeMarkWithAttrs } from "./prosemirrorPatches";
 import { Id } from '../../../../fields/FieldSymbols';
 import { InkTool } from '../../../../fields/InkField';
 import { PrefetchProxy } from '../../../../fields/Proxy';
@@ -56,7 +57,7 @@ import { DocumentButtonBar } from '../../DocumentButtonBar';
 import { AudioBox } from '../AudioBox';
 import { FieldView, FieldViewProps } from "../FieldView";
 import "./FormattedTextBox.scss";
-import { FormattedTextBoxComment, formattedTextBoxCommentPlugin } from './FormattedTextBoxComment';
+import { FormattedTextBoxComment, formattedTextBoxCommentPlugin, findLinkMark } from './FormattedTextBoxComment';
 import React = require("react");
 
 library.add(faEdit);
@@ -87,6 +88,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp
     private _editorView: Opt<EditorView>;
     private _applyingChange: boolean = false;
     private _searchIndex = 0;
+    private _cachedLinks: Doc[] = [];
     private _undoTyping?: UndoManager.Batch;
     private _disposers: { [name: string]: IReactionDisposer } = {};
     private _dropDisposer?: DragManager.DragDropDisposer;
@@ -141,6 +143,33 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp
 
     public get CurrentDiv(): HTMLDivElement { return this._ref.current!; }
 
+    // removes all hyperlink anchors for the removed linkDoc
+    // TODO: bcz: Argh... if a section of text has multiple anchors, this should just remove the intended one. 
+    // but since removing one anchor from the list of attr anchors isn't implemented, this will end up removing nothing.
+    public RemoveLinkFromDoc(linkDoc?: Doc) {
+        const state = this._editorView?.state;
+        if (state && linkDoc && this._editorView) {
+            var allLinks: any[] = [];
+            state.doc.nodesBetween(0, state.doc.nodeSize - 2, (node: any, pos: number, parent: any) => {
+                const foundMark = findLinkMark(node.marks);
+                const newHrefs = foundMark?.attrs.allLinks.filter((a: any) => a.href.includes(linkDoc[Id])) || [];
+                allLinks = newHrefs.length ? newHrefs : allLinks;
+                return true;
+            });
+            if (allLinks.length) {
+                this._editorView.dispatch(removeMarkWithAttrs(state.tr, 0, state.doc.nodeSize - 2, state.schema.marks.linkAnchor, { allLinks }));
+            }
+        }
+    }
+    // removes all the specified link referneces from the selection. 
+    // NOTE: as above, this won't work correctly if there are marks with overlapping but not exact sets of link references.
+    public RemoveLinkFromSelection(allLinks: { href: string, title: string, linkId: string, targetId: string }[]) {
+        const state = this._editorView?.state;
+        if (state && this._editorView) {
+            this._editorView.dispatch(removeMarkWithAttrs(state.tr, state.selection.from, state.selection.to, state.schema.marks.link, { allLinks }));
+        }
+    }
+
     linkOnDeselect: Map<string, string> = new Map();
 
     doLinkOnDeselect() {
@@ -177,8 +206,8 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp
                     this.linkOnDeselect.set(key, value);
 
                     const id = Utils.GenerateDeterministicGuid(this.dataDoc[Id] + key);
-                    const allHrefs = [{ href: Utils.prepend("/doc/" + id), title: value, targetId: id }];
-                    const link = this._editorView.state.schema.marks.link.create({ allHrefs, location: "onRight", title: value });
+                    const allLinks = [{ href: Utils.prepend("/doc/" + id), title: value, targetId: id }];
+                    const link = this._editorView.state.schema.marks.linkAnchor.create({ allLinks, location: "onRight", title: value });
                     const mval = this._editorView.state.schema.marks.metadataVal.create();
                     const offset = (tx.selection.to === range!.end - 1 ? -1 : 0);
                     tx = tx.addMark(textEndSelection - value.length + offset, textEndSelection, link).addMark(textEndSelection - value.length + offset, textEndSelection, mval);
@@ -246,8 +275,8 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp
             const lastSel = Math.min(flattened.length - 1, this._searchIndex);
             this._searchIndex = ++this._searchIndex > flattened.length - 1 ? 0 : this._searchIndex;
             const alink = DocUtils.MakeLink({ doc: this.rootDoc }, { doc: target }, "automatic")!;
-            const allHrefs = [{ href: Utils.prepend("/doc/" + alink[Id]), title: "a link", targetId: target[Id], linkId: alink[Id] }];
-            const link = this._editorView.state.schema.marks.link.create({ allHrefs, title: "a link", location });
+            const allLinks = [{ href: Utils.prepend("/doc/" + alink[Id]), title: "a link", targetId: target[Id], linkId: alink[Id] }];
+            const link = this._editorView.state.schema.marks.linkAnchor.create({ allLinks, title: "a link", location });
             this._editorView.dispatch(tr.addMark(flattened[lastSel].from, flattened[lastSel].to, link));
         }
     }
@@ -267,7 +296,8 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp
     }
 
     public unhighlightSearchTerms = () => {
-        if (this._editorView && (this._editorView as any).docView) {
+        if (window.screen.width < 600) null;
+        else if (this._editorView && (this._editorView as any).docView) {
             const mark = this._editorView.state.schema.mark(this._editorView.state.schema.marks.search_highlight);
             const activeMark = this._editorView.state.schema.mark(this._editorView.state.schema.marks.search_highlight, { selected: true });
             const end = this._editorView.state.doc.nodeSize - 2;
@@ -614,9 +644,9 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp
             let tr = state.tr.addMark(sel.from, sel.to, splitter);
             sel.from !== sel.to && tr.doc.nodesBetween(sel.from, sel.to, (node: any, pos: number, parent: any) => {
                 if (node.firstChild === null && node.marks.find((m: Mark) => m.type.name === schema.marks.splitter.name)) {
-                    const allHrefs = [{ href, title, targetId, linkId }];
-                    allHrefs.push(...(node.marks.find((m: Mark) => m.type.name === schema.marks.link.name)?.attrs.allHrefs ?? []));
-                    const link = state.schema.marks.link.create({ allHrefs, title, location, linkId });
+                    const allLinks = [{ href, title, targetId, linkId }];
+                    allLinks.push(...(node.marks.find((m: Mark) => m.type.name === schema.marks.linkAnchor.name)?.attrs.allLinks ?? []));
+                    const link = state.schema.marks.linkAnchor.create({ allLinks, title, location, linkId });
                     tr = tr.addMark(pos, pos + node.nodeSize, link);
                 }
             });
@@ -626,6 +656,12 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp
         }
     }
     componentDidMount() {
+        this._cachedLinks = DocListCast(this.Document.links);
+        this._disposers.links = reaction(() => DocListCast(this.Document.links), // if a link is deleted, then remove all hyperlinks that reference it from the text's marks
+            newLinks => {
+                this._cachedLinks.forEach(l => !newLinks.includes(l) && this.RemoveLinkFromDoc(l));
+                this._cachedLinks = newLinks;
+            });
         this._disposers.buttonBar = reaction(
             () => DocumentButtonBar.Instance,
             instance => {
@@ -731,8 +767,8 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp
                         return node.copy(content.frag);
                     }
                     const marks = [...node.marks];
-                    const linkIndex = marks.findIndex(mark => mark.type === editor.state.schema.marks.link);
-                    return linkIndex !== -1 && marks[linkIndex].attrs.allHrefs.find((item: { href: string }) => scrollToLinkID === item.href.replace(/.*\/doc\//, "")) ? node : undefined;
+                    const linkIndex = marks.findIndex(mark => mark.type === editor.state.schema.marks.linkAnchor);
+                    return linkIndex !== -1 && marks[linkIndex].attrs.allLinks.find((item: { href: string }) => scrollToLinkID === item.href.replace(/.*\/doc\//, "")) ? node : undefined;
                 };
 
                 let start = 0;
@@ -914,8 +950,8 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp
             }
             const marks = [...node.marks];
             const linkIndex = marks.findIndex(mark => mark.type.name === "link");
-            const allHrefs = [{ href: Utils.prepend(`/doc/${linkId}`), title, linkId }];
-            const link = view.state.schema.mark(view.state.schema.marks.link, { allHrefs, location: "onRight", title, docref: true });
+            const allLinks = [{ href: Utils.prepend(`/doc/${linkId}`), title, linkId }];
+            const link = view.state.schema.mark(view.state.schema.marks.linkAnchor, { allLinks, location: "onRight", title, docref: true });
             marks.splice(linkIndex === -1 ? 0 : linkIndex, 1, link);
             return node.mark(marks);
         }
@@ -1138,7 +1174,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp
         e.stopPropagation();
 
         const view = this._editorView as any;
-        // this interposes on prosemirror's upHandler to prevent prosemirror's up from invoked multiple times when there 
+        // this interposes on prosemirror's upHandler to prevent prosemirror's up from invoked multiple times when there
         // are nested prosemirrors.  We only want the lowest level prosemirror to be invoked.
         if (view.mouseDown) {
             const originalUpHandler = view.mouseDown.up;
diff --git a/src/client/views/nodes/formattedText/FormattedTextBoxComment.tsx b/src/client/views/nodes/formattedText/FormattedTextBoxComment.tsx
index 90f2c0aa6..4c90b6afd 100644
--- a/src/client/views/nodes/formattedText/FormattedTextBoxComment.tsx
+++ b/src/client/views/nodes/formattedText/FormattedTextBoxComment.tsx
@@ -27,7 +27,7 @@ export function findUserMark(marks: Mark[]): Mark | undefined {
     return marks.find(m => m.attrs.userid);
 }
 export function findLinkMark(marks: Mark[]): Mark | undefined {
-    return marks.find(m => m.type === schema.marks.link);
+    return marks.find(m => m.type === schema.marks.linkAnchor);
 }
 export function findStartOfMark(rpos: ResolvedPos, view: EditorView, finder: (marks: Mark[]) => Mark | undefined) {
     let before = 0;
@@ -182,7 +182,7 @@ export class FormattedTextBoxComment {
             state.doc.nodesBetween(state.selection.from, state.selection.to, (node: any, pos: number, parent: any) => !child && node.marks.length && (child = node));
             child = child || (nbef && state.selection.$from.nodeBefore);
             const mark = child ? findLinkMark(child.marks) : undefined;
-            const href = (!mark?.attrs.docref || naft === nbef) && mark?.attrs.allHrefs.find((item: { href: string }) => item.href)?.href || forceUrl;
+            const href = (!mark?.attrs.docref || naft === nbef) && mark?.attrs.allLinks.find((item: { href: string }) => item.href)?.href || forceUrl;
             if (forceUrl || (href && child && nbef && naft && mark?.attrs.showPreview)) {
                 FormattedTextBoxComment.tooltipText.textContent = "external => " + href;
                 (FormattedTextBoxComment.tooltipText as any).href = href;
diff --git a/src/client/views/nodes/formattedText/RichTextMenu.tsx b/src/client/views/nodes/formattedText/RichTextMenu.tsx
index 0fcddfc43..95d6c9fac 100644
--- a/src/client/views/nodes/formattedText/RichTextMenu.tsx
+++ b/src/client/views/nodes/formattedText/RichTextMenu.tsx
@@ -737,7 +737,7 @@ export default class RichTextMenu extends AntimodeMenu {
         const node = this.view.state.selection.$from.nodeAfter;
         const link = node && node.marks.find(m => m.type.name === "link");
         if (link) {
-            const href = link.attrs.allHrefs.length > 0 ? link.attrs.allHrefs[0].href : undefined;
+            const href = link.attrs.allLinks.length > 0 ? link.attrs.allLinks[0].href : undefined;
             if (href) {
                 if (href.indexOf(Utils.prepend("/doc/")) === 0) {
                     const linkclicked = href.replace(Utils.prepend("/doc/"), "").split("?")[0];
@@ -772,40 +772,28 @@ export default class RichTextMenu extends AntimodeMenu {
     }
 
     deleteLink = () => {
-        if (!this.view) return;
-
-        const node = this.view.state.selection.$from.nodeAfter;
-        const link = node && node.marks.find(m => m.type === this.view!.state.schema.marks.link);
-        const href = link!.attrs.allHrefs.length > 0 ? link!.attrs.allHrefs[0].href : undefined;
-        if (href) {
-            if (href.indexOf(Utils.prepend("/doc/")) === 0) {
-                const linkclicked = href.replace(Utils.prepend("/doc/"), "").split("?")[0];
-                if (linkclicked) {
-                    DocServer.GetRefField(linkclicked).then(async linkDoc => {
-                        if (linkDoc instanceof Doc) {
-                            LinkManager.Instance.deleteLink(linkDoc);
-                            this.view!.dispatch(this.view!.state.tr.removeMark(this.view!.state.selection.from, this.view!.state.selection.to, this.view!.state.schema.marks.link));
-                        }
-                    });
-                }
-            } else {
-                if (node) {
-                    const { tr, schema, selection } = this.view.state;
-                    const extension = this.linkExtend(selection.$anchor, href);
-                    this.view.dispatch(tr.removeMark(extension.from, extension.to, schema.marks.link));
-                }
+        if (this.view) {
+            const link = this.view.state.selection.$from.nodeAfter?.marks.find(m => m.type === this.view!.state.schema.marks.linkAnchor);
+            if (link) {
+                const allLinks = link.attrs.allLinks.slice();
+                this.TextView.RemoveLinkFromSelection(link.attrs.allLinks);
+                // bcz: Argh ... this will remove the link from the document even it's anchored somewhere else in the text which happens if only part of the anchor text was selected.
+                allLinks.filter((aref: any) => aref?.href.indexOf(Utils.prepend("/doc/")) === 0).forEach((aref: any) => {
+                    const linkId = aref.href.replace(Utils.prepend("/doc/"), "").split("?")[0];
+                    linkId && DocServer.GetRefField(linkId).then(linkDoc => LinkManager.Instance.deleteLink(linkDoc as Doc));
+                });
             }
         }
     }
 
     linkExtend($start: ResolvedPos, href: string) {
-        const mark = this.view!.state.schema.marks.link;
+        const mark = this.view!.state.schema.marks.linkAnchor;
 
         let startIndex = $start.index();
         let endIndex = $start.indexAfter();
 
-        while (startIndex > 0 && $start.parent.child(startIndex - 1).marks.filter(m => m.type === mark && m.attrs.allHrefs.find((item: { href: string }) => item.href === href)).length) startIndex--;
-        while (endIndex < $start.parent.childCount && $start.parent.child(endIndex).marks.filter(m => m.type === mark && m.attrs.allHrefs.find((item: { href: string }) => item.href === href)).length) endIndex++;
+        while (startIndex > 0 && $start.parent.child(startIndex - 1).marks.filter(m => m.type === mark && m.attrs.allLinks.find((item: { href: string }) => item.href === href)).length) startIndex--;
+        while (endIndex < $start.parent.childCount && $start.parent.child(endIndex).marks.filter(m => m.type === mark && m.attrs.allLinks.find((item: { href: string }) => item.href === href)).length) endIndex++;
 
         let startPos = $start.start();
         let endPos = startPos;
@@ -933,7 +921,7 @@ interface ButtonDropdownProps {
 }
 
 @observer
-class ButtonDropdown extends React.Component<ButtonDropdownProps> {
+export class ButtonDropdown extends React.Component<ButtonDropdownProps> {
 
     @observable private showDropdown: boolean = false;
     private ref: HTMLDivElement | null = null;
diff --git a/src/client/views/nodes/formattedText/RichTextRules.ts b/src/client/views/nodes/formattedText/RichTextRules.ts
index 612a824fc..ca30dde9d 100644
--- a/src/client/views/nodes/formattedText/RichTextRules.ts
+++ b/src/client/views/nodes/formattedText/RichTextRules.ts
@@ -279,7 +279,7 @@ export class RichTextRules {
                                 DocUtils.Publish(target, docid, returnFalse, returnFalse);
                                 DocUtils.MakeLink({ doc: this.Document }, { doc: target }, "portal to");
                             });
-                            const link = state.schema.marks.link.create({ href: Utils.prepend("/doc/" + docid), location: "onRight", title: docid, targetId: docid });
+                            const link = state.schema.marks.linkAnchor.create({ href: Utils.prepend("/doc/" + docid), location: "onRight", title: docid, targetId: docid });
                             return state.tr.deleteRange(end - 1, end).deleteRange(start, start + 2).addMark(start, end - 3, link);
                         }
                         return state.tr;
diff --git a/src/client/views/nodes/formattedText/marks_rts.ts b/src/client/views/nodes/formattedText/marks_rts.ts
index 54b61aa20..3d7d71b14 100644
--- a/src/client/views/nodes/formattedText/marks_rts.ts
+++ b/src/client/views/nodes/formattedText/marks_rts.ts
@@ -17,12 +17,12 @@ export const marks: { [index: string]: MarkSpec } = {
             return ["div", { className: "dummy" }, 0];
         }
     },
-    // :: MarkSpec A link. Has `href` and `title` attributes. `title`
+    // :: MarkSpec A linkAnchor. The anchor can have multiple links, where each link has an href URL and a title for use in menus and hover (Dash links have linkIDs & targetIDs). `title`
     // defaults to the empty string. Rendered and parsed as an `<a>`
     // element.
-    link: {
+    linkAnchor: {
         attrs: {
-            allHrefs: { default: [] as { href: string, title: string, linkId: string, targetId: string }[] },
+            allLinks: { default: [] as { href: string, title: string, linkId: string, targetId: string }[] },
             showPreview: { default: true },
             location: { default: null },
             title: { default: null },
@@ -31,22 +31,22 @@ export const marks: { [index: string]: MarkSpec } = {
         inclusive: false,
         parseDOM: [{
             tag: "a[href]", getAttrs(dom: any) {
-                return { allHrefs: [{ href: dom.getAttribute("href"), title: dom.getAttribute("title"), linkId: dom.getAttribute("linkids"), targetId: dom.getAttribute("targetids") }], location: dom.getAttribute("location"), };
+                return { allLinks: [{ href: dom.getAttribute("href"), title: dom.getAttribute("title"), linkId: dom.getAttribute("linkids"), targetId: dom.getAttribute("targetids") }], location: dom.getAttribute("location"), };
             }
         }],
         toDOM(node: any) {
-            const targetids = node.attrs.allHrefs.reduce((p: string, item: { href: string, title: string, targetId: string, linkId: string }) => p + " " + item.targetId, "");
-            const linkids = node.attrs.allHrefs.reduce((p: string, item: { href: string, title: string, targetId: string, linkId: string }) => p + " " + item.linkId, "");
+            const targetids = node.attrs.allLinks.reduce((p: string, item: { href: string, title: string, targetId: string, linkId: string }) => p + " " + item.targetId, "");
+            const linkids = node.attrs.allLinks.reduce((p: string, item: { href: string, title: string, targetId: string, linkId: string }) => p + " " + item.linkId, "");
             return node.attrs.docref && node.attrs.title ?
-                ["div", ["span", `"`], ["span", 0], ["span", `"`], ["br"], ["a", { ...node.attrs, href: node.attrs.allHrefs[0].href, class: "prosemirror-attribution" }, node.attrs.title], ["br"]] :
-                node.attrs.allHrefs.length === 1 ?
-                    ["a", { ...node.attrs, class: linkids, targetids, title: `${node.attrs.title}`, href: node.attrs.allHrefs[0].href }, 0] :
+                ["div", ["span", `"`], ["span", 0], ["span", `"`], ["br"], ["a", { ...node.attrs, href: node.attrs.allLinks[0].href, class: "prosemirror-attribution" }, node.attrs.title], ["br"]] :
+                node.attrs.allLinks.length === 1 ?
+                    ["a", { ...node.attrs, class: linkids, targetids, title: `${node.attrs.title}`, href: node.attrs.allLinks[0].href }, 0] :
                     ["div", { class: "prosemirror-anchor" },
                         ["span", { class: "prosemirror-linkBtn" },
                             ["a", { ...node.attrs, class: linkids, targetids, title: `${node.attrs.title}` }, 0],
                             ["input", { class: "prosemirror-hrefoptions" }],
                         ],
-                        ["div", { class: "prosemirror-links" }, ...node.attrs.allHrefs.map((item: { href: string, title: string }) =>
+                        ["div", { class: "prosemirror-links" }, ...node.attrs.allLinks.map((item: { href: string, title: string }) =>
                             ["a", { class: "prosemirror-dropdownlink", href: item.href }, item.title]
                         )]
                     ];
diff --git a/src/client/views/nodes/formattedText/prosemirrorPatches.js b/src/client/views/nodes/formattedText/prosemirrorPatches.js
index 763961958..0969ea4ef 100644
--- a/src/client/views/nodes/formattedText/prosemirrorPatches.js
+++ b/src/client/views/nodes/formattedText/prosemirrorPatches.js
@@ -9,6 +9,7 @@ var prosemirrorModel = require('prosemirror-model');
 exports.liftListItem = liftListItem;
 exports.sinkListItem = sinkListItem;
 exports.wrappingInputRule = wrappingInputRule;
+exports.removeMarkWithAttrs = removeMarkWithAttrs;
 // :: (NodeType) → (state: EditorState, dispatch: ?(tr: Transaction)) → bool
 // Create a command to lift the list item around the selection up into
 // a wrapping list.
@@ -139,3 +140,57 @@ function wrappingInputRule(regexp, nodeType, getAttrs, joinPredicate, customWith
 }
 
 
+// :: ([Mark]) → ?Mark
+// Tests whether there is a mark of this type in the given set.
+function isInSetWithAttrs(mark, set, attrs) {
+    for (var i = 0; i < set.length; i++) {
+        if (set[i].type == mark) {
+            if (Array.from(Object.keys(attrs)).reduce((p, akey) => {
+                return p && JSON.stringify(set[i].attrs[akey]) === JSON.stringify(attrs[akey]);
+            }, true)) {
+                return set[i];
+            }
+        }
+    }
+};
+
+// :: (number, number, ?union<Mark, MarkType>) → this
+// Remove marks from inline nodes between `from` and `to`. When `mark`
+// is a single mark, remove precisely that mark. When it is a mark type,
+// remove all marks of that type. When it is null, remove all marks of
+// any type.
+function removeMarkWithAttrs(tr, from, to, mark, attrs) {
+    if (mark === void 0) mark = null;
+
+    var matched = [], step = 0;
+    tr.doc.nodesBetween(from, to, function (node, pos) {
+        if (!node.isInline) { return }
+        step++;
+        var toRemove = null;
+        if (mark) {
+            if (isInSetWithAttrs(mark, node.marks, attrs)) { toRemove = [mark]; }
+        } else {
+            toRemove = node.marks;
+        }
+        if (toRemove && toRemove.length) {
+            var end = Math.min(pos + node.nodeSize, to);
+            for (var i = 0; i < toRemove.length; i++) {
+                var style = toRemove[i], found$1 = (void 0);
+                for (var j = 0; j < matched.length; j++) {
+                    var m = matched[j];
+                    if (m.step == step - 1 && style.eq(matched[j].style)) { found$1 = m; }
+                }
+                if (found$1) {
+                    found$1.to = end;
+                    found$1.step = step;
+                } else {
+                    matched.push({ style: style, from: Math.max(pos, from), to: end, step: step });
+                }
+            }
+        }
+    });
+    matched.forEach(function (m) { return tr.step(new prosemirrorTransform.RemoveMarkStep(m.from, m.to, m.style)); });
+    return tr
+};
+
+
diff --git a/src/client/views/pdf/PDFMenu.scss b/src/client/views/pdf/PDFMenu.scss
index 3c08ba80d..fa43a99b2 100644
--- a/src/client/views/pdf/PDFMenu.scss
+++ b/src/client/views/pdf/PDFMenu.scss
@@ -3,4 +3,23 @@
     width: 200px;
     padding: 5px;
     grid-template-columns: 90px 20px 90px;
+}
+
+.color-wrapper {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+
+    button.color-button {
+        width: 20px;
+        height: 20px;
+        border-radius: 15px !important;
+        margin: 3px;
+        border: 2px solid transparent !important;
+        padding: 3px;
+
+        &.active {
+            border: 2px solid white;
+        }
+    }
 }
\ No newline at end of file
diff --git a/src/client/views/pdf/PDFMenu.tsx b/src/client/views/pdf/PDFMenu.tsx
index 6dcf5cce6..00c56d73e 100644
--- a/src/client/views/pdf/PDFMenu.tsx
+++ b/src/client/views/pdf/PDFMenu.tsx
@@ -1,22 +1,43 @@
 import React = require("react");
 import "./PDFMenu.scss";
-import { observable, action, } from "mobx";
+import { observable, action, computed, } from "mobx";
 import { observer } from "mobx-react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { unimplementedFunction, returnFalse } from "../../../Utils";
+import { unimplementedFunction, returnFalse, Utils } from "../../../Utils";
 import AntimodeMenu from "../AntimodeMenu";
 import { Doc, Opt } from "../../../fields/Doc";
+import { ColorState } from "react-color";
+import { ButtonDropdown } from "../nodes/formattedText/RichTextMenu";
+
 
 @observer
 export default class PDFMenu extends AntimodeMenu {
     static Instance: PDFMenu;
 
     private _commentCont = React.createRef<HTMLButtonElement>();
+    private _palette = [
+        "rgba(208, 2, 27, 0.8)",
+        "rgba(238, 0, 0, 0.8)",
+        "rgba(245, 166, 35, 0.8)",
+        "rgba(248, 231, 28, 0.8)",
+        "rgba(245, 230, 95, 0.616)",
+        "rgba(139, 87, 42, 0.8)",
+        "rgba(126, 211, 33, 0.8)",
+        "rgba(65, 117, 5, 0.8)",
+        "rgba(144, 19, 254, 0.8)",
+        "rgba(238, 169, 184, 0.8)",
+        "rgba(224, 187, 228, 0.8)",
+        "rgba(225, 223, 211, 0.8)",
+        "rgba(255, 255, 255, 0.8)",
+        "rgba(155, 155, 155, 0.8)",
+        "rgba(0, 0, 0, 0.8)"];
 
     @observable private _keyValue: string = "";
     @observable private _valueValue: string = "";
     @observable private _added: boolean = false;
+    @observable private highlightColor: string = "rgba(245, 230, 95, 0.616)";
 
+    @observable public _colorBtn = false;
     @observable public Highlighting: boolean = false;
     @observable public Status: "pdf" | "annotation" | "" = "";
 
@@ -70,11 +91,47 @@ export default class PDFMenu extends AntimodeMenu {
 
     @action
     highlightClicked = (e: React.MouseEvent) => {
-        if (!this.Highlight("rgba(245, 230, 95, 0.616)") && this.Pinned) { // yellowish highlight color for a marker type highlight
+        if (!this.Highlight(this.highlightColor) && this.Pinned) {
             this.Highlighting = !this.Highlighting;
         }
     }
 
+    @computed get highlighter() {
+        const button =
+            <button className="antimodeMenu-button color-preview-button" title="" key="highilghter-button" onPointerDown={this.highlightClicked}>
+                <FontAwesomeIcon icon="highlighter" size="lg" style={{ transition: "transform 0.1s", transform: this.Highlighting ? "" : "rotate(-45deg)" }} />
+                <div className="color-preview" style={{ backgroundColor: this.highlightColor }}></div>
+            </button>;
+
+        const dropdownContent =
+            <div className="dropdown">
+                <p>Change highlighter color:</p>
+                <div className="color-wrapper">
+                    {this._palette.map(color => {
+                        if (color) {
+                            return this.highlightColor === color ?
+                                <button className="color-button active" key={`active ${color}`} style={{ backgroundColor: color }} onPointerDown={e => this.changeHighlightColor(color, e)}></button> :
+                                <button className="color-button" key={`inactive ${color}`} style={{ backgroundColor: color }} onPointerDown={e => this.changeHighlightColor(color, e)}></button>;
+                        }
+                    })}
+                </div>
+            </div>;
+        return (
+            <ButtonDropdown key={"highlighter"} button={button} dropdownContent={dropdownContent} />
+        );
+    }
+
+    @action
+    changeHighlightColor = (color: string, e: React.PointerEvent) => {
+        const col: ColorState = {
+            hex: color, hsl: { a: 0, h: 0, s: 0, l: 0, source: "" }, hsv: { a: 0, h: 0, s: 0, v: 0, source: "" },
+            rgb: { a: 0, r: 0, b: 0, g: 0, source: "" }, oldHue: 0, source: "",
+        };
+        e.preventDefault();
+        e.stopPropagation();
+        this.highlightColor = Utils.colorString(col);
+    }
+
     deleteClicked = (e: React.PointerEvent) => {
         this.Delete();
     }
@@ -101,12 +158,11 @@ export default class PDFMenu extends AntimodeMenu {
     render() {
         const buttons = this.Status === "pdf" ?
             [
-                <button key="1" className="antimodeMenu-button" title="Click to Highlight" onClick={this.highlightClicked} style={this.Highlighting ? { backgroundColor: "#121212" } : {}}>
-                    <FontAwesomeIcon icon="highlighter" size="lg" style={{ transition: "transform 0.1s", transform: this.Highlighting ? "" : "rotate(-45deg)" }} /></button>,
+                this.highlighter,
                 <button key="2" className="antimodeMenu-button" title="Drag to Annotate" ref={this._commentCont} onPointerDown={this.pointerDown}>
                     <FontAwesomeIcon icon="comment-alt" size="lg" /></button>,
                 <button key="4" className="antimodeMenu-button" title="Pin Menu" onClick={this.togglePin} style={this.Pinned ? { backgroundColor: "#121212" } : {}}>
-                    <FontAwesomeIcon icon="thumbtack" size="lg" style={{ transition: "transform 0.1s", transform: this.Pinned ? "rotate(45deg)" : "" }} /> </button>
+                    <FontAwesomeIcon icon="thumbtack" size="lg" style={{ transition: "transform 0.1s", transform: this.Pinned ? "rotate(45deg)" : "" }} /></button>,
             ] : [
                 <button key="5" className="antimodeMenu-button" title="Delete Anchor" onPointerDown={this.deleteClicked}>
                     <FontAwesomeIcon icon="trash-alt" size="lg" /></button>,
diff --git a/src/client/views/pdf/PDFViewer.tsx b/src/client/views/pdf/PDFViewer.tsx
index 4fdc82388..4e5fdbfbb 100644
--- a/src/client/views/pdf/PDFViewer.tsx
+++ b/src/client/views/pdf/PDFViewer.tsx
@@ -97,7 +97,7 @@ export class PDFViewer extends ViewBoxAnnotatableComponent<IViewerProps, PdfDocu
     @observable private _zoomed = 1;
 
     private _pdfViewer: any;
-    private _retries = 0; // number of times tried to create the PDF viewer 
+    private _retries = 0; // number of times tried to create the PDF viewer
     private _setPreviewCursor: undefined | ((x: number, y: number, drag: boolean) => void);
     private _annotationLayer: React.RefObject<HTMLDivElement> = React.createRef();
     private _reactionDisposer?: IReactionDisposer;
@@ -521,7 +521,7 @@ export class PDFViewer extends ViewBoxAnnotatableComponent<IViewerProps, PdfDocu
         if (this._marqueeing) {
             if (this._marqueeWidth > 10 || this._marqueeHeight > 10) {
                 const marquees = this._mainCont.current!.getElementsByClassName("pdfViewerDash-dragAnnotationBox");
-                if (marquees && marquees.length) { // copy the marquee and convert it to a permanent annotation. 
+                if (marquees && marquees.length) { // copy the marquee and convert it to a permanent annotation.
                     const style = (marquees[0] as HTMLDivElement).style;
                     const copy = document.createElement("div");
                     copy.style.left = style.left;
@@ -691,7 +691,7 @@ export class PDFViewer extends ViewBoxAnnotatableComponent<IViewerProps, PdfDocu
         </div>;
     }
     @computed get pdfViewerDiv() {
-        return <div className={"pdfViewerDash-text" + ((!DocumentDecorations.Instance.Interacting && (this.props.isSelected() || this.props.isChildActive())) ? "-selected" : "")} ref={this._viewer} />;
+        return <div className={"pdfViewerDash-text" + ((!DocumentDecorations.Instance?.Interacting && (this.props.isSelected() || this.props.isChildActive())) ? "-selected" : "")} ref={this._viewer} />;
     }
     @computed get contentScaling() { return this.props.ContentScaling(); }
     @computed get standinViews() {
@@ -713,8 +713,8 @@ export class PDFViewer extends ViewBoxAnnotatableComponent<IViewerProps, PdfDocu
             onScroll={this.onScroll} onWheel={this.onZoomWheel} onPointerDown={this.onPointerDown} onClick={this.onClick}
             style={{
                 overflowX: this._zoomed !== 1 ? "scroll" : undefined,
-                width: !this.props.Document._fitWidth ? NumCast(this.props.Document._nativeWidth) : `${100 / this.contentScaling}%`,
-                height: !this.props.Document._fitWidth ? NumCast(this.props.Document._nativeHeight) : `${100 / this.contentScaling}%`,
+                width: !this.props.Document._fitWidth && (window.screen.width > 600) ? NumCast(this.props.Document._nativeWidth) : `${100 / this.contentScaling}%`,
+                height: !this.props.Document._fitWidth && (window.screen.width > 600) ? NumCast(this.props.Document._nativeHeight) : `${100 / this.contentScaling}%`,
                 transform: `scale(${this.props.ContentScaling()})`
             }}  >
             {this.pdfViewerDiv}
@@ -746,4 +746,4 @@ class PdfViewerMarquee extends React.Component<PdfViewerMarqueeProps> {
             }}>
         </div>;
     }
-}
\ No newline at end of file
+}
diff --git a/src/client/views/presentationview/PresElementBox.scss b/src/client/views/presentationview/PresElementBox.scss
index ccd2e8947..dbe6b0d4f 100644
--- a/src/client/views/presentationview/PresElementBox.scss
+++ b/src/client/views/presentationview/PresElementBox.scss
@@ -13,9 +13,10 @@
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
-    transition: all .1s; 
+    transition: all .1s;
     padding: 0px;
     padding-bottom: 3px;
+
     .documentView-node {
         position: absolute;
         z-index: 1;
@@ -45,7 +46,7 @@
 
 .presElementBox-closeIcon {
     border-radius: 20px;
-    transform:scale(0.7);
+    transform: scale(0.7);
     position: absolute;
     right: 0;
     top: 0;
@@ -58,6 +59,7 @@
     position: relative;
     width: 100%;
     height: auto;
+
     .presElementBox-interaction {
         color: gray;
         float: left;
@@ -65,6 +67,7 @@
         width: 20px;
         height: 20px;
     }
+
     .presElementBox-interaction-selected {
         color: white;
         float: left;
@@ -76,7 +79,7 @@
 }
 
 .presElementBox-name {
-    font-size: 12pxππ;
+    font-size: 12px;
     position: absolute;
     display: inline-block;
     width: calc(100% - 45px);
@@ -90,15 +93,58 @@
     display: flex;
     width: auto;
     justify-content: center;
-    margin:auto;
+    margin: auto;
 }
 
 .presElementBox-embeddedMask {
-    width:100%;
-    height:100%;
+    width: 100%;
+    height: 100%;
     position: absolute;
-    left:0;
-    top:0;
+    left: 0;
+    top: 0;
     background: transparent;
-    z-index:2;
+    z-index: 2;
+}
+
+@media only screen and (max-device-width: 480px) {
+    .presElementBox-buttons {
+        display: inline-flex;
+        position: absolute;
+        top: 0;
+        right: 0;
+        z-index: 3;
+        width: 50%;
+
+        .presElementBox-interaction {
+            width: 50;
+            height: 50;
+        }
+
+        .presElementBox-interaction-selected {
+            width: 50;
+            height: 50;
+        }
+    }
+
+    .presElementBox-item {
+        display: inline-flex;
+        overflow: hidden;
+    }
+
+    .presElementBox-closeIcon {
+        transform: scale(1.5);
+        right: 10;
+        top: 10;
+    }
+
+    .presElementBox-name {
+        font-size: 30px;
+        top: 10px;
+        z-index: 3;
+        width: 50%;
+    }
+
+    .presElementBox-embedded {
+        transform: translate(0, 90px) scale(1.5);
+    }
 }
\ No newline at end of file
diff --git a/src/client/views/presentationview/PresElementBox.tsx b/src/client/views/presentationview/PresElementBox.tsx
index 6b59a0563..6fd3455b6 100644
--- a/src/client/views/presentationview/PresElementBox.tsx
+++ b/src/client/views/presentationview/PresElementBox.tsx
@@ -49,7 +49,7 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps, PresDoc
 
     componentDidMount() {
         this._heightDisposer = reaction(() => [this.rootDoc.presExpandInlineButton, this.collapsedHeight],
-            params => this.layoutDoc._height = NumCast(params[1]) + (Number(params[0]) ? 100 : 0), { fireImmediately: true });
+            params => this.layoutDoc._height = NumCast(params[1]) + (Number(params[0]) ? 200 : 0), { fireImmediately: true });
     }
     componentWillUnmount() {
         this._heightDisposer?.();
diff --git a/src/fields/RichTextUtils.ts b/src/fields/RichTextUtils.ts
index 7c7bf3e12..a590c88c4 100644
--- a/src/fields/RichTextUtils.ts
+++ b/src/fields/RichTextUtils.ts
@@ -392,7 +392,7 @@ export namespace RichTextUtils {
                     const { attrs } = mark;
                     switch (converted) {
                         case "link":
-                            let url = attrs.allHrefs.length ? attrs.allHrefs[0].href : "";
+                            let url = attrs.allLinks.length ? attrs.allLinks[0].href : "";
                             const delimiter = "/doc/";
                             const alreadyShared = "?sharing=true";
                             if (new RegExp(window.location.origin + delimiter).test(url) && !url.endsWith(alreadyShared)) {
diff --git a/src/mobile/AudioUpload.scss b/src/mobile/AudioUpload.scss
new file mode 100644
index 000000000..6e64d9e2e
--- /dev/null
+++ b/src/mobile/AudioUpload.scss
@@ -0,0 +1,61 @@
+@import "../client/views/globalCssVariables.scss";
+
+.audioUpload_cont {
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    align-items: center;
+    margin-top: 10px;
+    height: 400px;
+    width: 600px;
+}
+
+.upload_label {
+    position: relative;
+    font-weight: 700;
+    color: black;
+    background-color: rgba(0, 0, 0, 0);
+    border: solid 3px black;
+    margin: 10px;
+    font-size: 30;
+    height: 70px;
+    width: 60%;
+    display: inline-flex;
+    font-family: sans-serif;
+    text-transform: uppercase;
+    justify-content: center;
+    flex-direction: column;
+    border-radius: 10px;
+}
+
+.restart_label {
+    position: relative;
+    font-weight: 700;
+    color: black;
+    background-color: rgba(0, 0, 0, 0);
+    border: solid 3px black;
+    margin: 10px;
+    font-size: 30;
+    height: 70px;
+    width: 60%;
+    display: inline-flex;
+    font-family: sans-serif;
+    text-transform: uppercase;
+    justify-content: center;
+    flex-direction: column;
+    border-radius: 10px;
+}
+
+.audio-upload {
+    top: 100%;
+    opacity: 0;
+}
+
+.audio-upload.active {
+    top: 0;
+    position: absolute;
+    z-index: 999;
+    height: 100vh;
+    width: 100vw;
+    opacity: 1;
+}
\ No newline at end of file
diff --git a/src/mobile/AudioUpload.tsx b/src/mobile/AudioUpload.tsx
new file mode 100644
index 000000000..590bf8f9d
--- /dev/null
+++ b/src/mobile/AudioUpload.tsx
@@ -0,0 +1,152 @@
+import { Docs } from '../client/documents/Documents';
+import "./ImageUpload.scss";
+import React = require('react');
+import { observer } from 'mobx-react';
+import { observable, action, computed } from 'mobx';
+import { Utils, emptyPath, returnFalse, emptyFunction, returnOne, returnZero, returnTrue, returnEmptyFilter } from '../Utils';
+import { Doc, Opt } from '../fields/Doc';
+import { Cast, FieldValue } from '../fields/Types';
+import { listSpec } from '../fields/Schema';
+import MainViewModal from '../client/views/MainViewModal';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { nullAudio } from '../fields/URLField';
+import { Transform } from '../client/util/Transform';
+import { DocumentView } from '../client/views/nodes/DocumentView';
+import { MobileInterface } from './MobileInterface';
+import { DictationOverlay } from '../client/views/DictationOverlay';
+import RichTextMenu from '../client/views/nodes/formattedText/RichTextMenu';
+import { ContextMenu } from '../client/views/ContextMenu';
+
+@observer
+export class AudioUpload extends React.Component {
+    @observable public _audioCol: Doc = FieldValue(Cast(Docs.Create.FreeformDocument([Cast(Docs.Create.AudioDocument(nullAudio, { title: "mobile audio", _width: 500, _height: 100 }), Doc) as Doc], { title: "mobile audio", _width: 300, _height: 300, _fitToBox: true, boxShadow: "0 0" }), Doc)) as Doc;
+
+    /**
+     * Handles the onclick functionality for the 'Restart' button
+     * Resets the document to its default view
+     */
+    @action
+    clearUpload = () => {
+        for (let i = 1; i < 8; i++) {
+            this.setOpacity(i, "0.2");
+        }
+        this._audioCol = FieldValue(Cast(
+            Docs.Create.FreeformDocument(
+                [Cast(Docs.Create.AudioDocument(nullAudio, {
+                    title: "mobile audio",
+                    _width: 500,
+                    _height: 100
+                }), Doc) as Doc], { title: "mobile audio", _width: 300, _height: 300, _fitToBox: true, boxShadow: "0 0" }), Doc)) as Doc;
+    }
+
+    /** 
+     * Handles the onClick of the 'Close' button
+     * Reset upload interface and toggle audio
+     */
+    closeUpload = () => {
+        this.clearUpload();
+        MobileInterface.Instance.toggleAudio();
+    }
+
+    /**
+     * Handles the on click of the 'Upload' button.
+     * Pushing the audio doc onto Dash Web through the right side bar
+     */
+    uploadAudio = () => {
+        const audioRightSidebar = Cast(Doc.UserDoc().rightSidebarCollection, Doc) as Doc;
+        const audioDoc = this._audioCol;
+        const data = Cast(audioRightSidebar.data, listSpec(Doc));
+        for (let i = 1; i < 8; i++) {
+            setTimeout(() => this.setOpacity(i, "1"), i * 200);
+        }
+        if (data) {
+            data.push(audioDoc);
+        }
+        // Resets uploader after 3 seconds
+        setTimeout(this.clearUpload, 3000);
+    }
+
+    // Returns the upload audio menu
+    private get uploadInterface() {
+        return (
+            <>
+                <ContextMenu />
+                <DictationOverlay />
+                <div style={{ display: "none" }}><RichTextMenu key="rich" /></div>
+                <div className="closeUpload" onClick={() => this.closeUpload()}>
+                    <FontAwesomeIcon icon="window-close" size={"lg"} />
+                </div>
+                <FontAwesomeIcon icon="microphone" size="lg" style={{ fontSize: "130" }} />
+                <div className="audioUpload_cont">
+                    <DocumentView
+                        Document={this._audioCol}
+                        DataDoc={undefined}
+                        LibraryPath={emptyPath}
+                        addDocument={undefined}
+                        addDocTab={returnFalse}
+                        pinToPres={emptyFunction}
+                        rootSelected={returnTrue}
+                        removeDocument={undefined}
+                        docFilters={returnEmptyFilter}
+                        onClick={undefined}
+                        ScreenToLocalTransform={Transform.Identity}
+                        ContentScaling={returnOne}
+                        PanelWidth={() => 600}
+                        PanelHeight={() => 400}
+                        NativeHeight={returnZero}
+                        NativeWidth={returnZero}
+                        renderDepth={0}
+                        focus={emptyFunction}
+                        backgroundColor={() => "rgba(0,0,0,0)"}
+                        parentActive={returnTrue}
+                        whenActiveChanged={emptyFunction}
+                        bringToFront={emptyFunction}
+                        ContainingCollectionView={undefined}
+                        ContainingCollectionDoc={undefined}
+                    />
+                </div>
+                <div className="restart_label" onClick={this.clearUpload}>
+                    Restart
+                </div>
+                <div className="upload_label" onClick={this.uploadAudio}>
+                    Upload
+                </div>
+                <div className="loadingImage">
+                    <div className="loadingSlab" id="slab01" />
+                    <div className="loadingSlab" id="slab02" />
+                    <div className="loadingSlab" id="slab03" />
+                    <div className="loadingSlab" id="slab04" />
+                    <div className="loadingSlab" id="slab05" />
+                    <div className="loadingSlab" id="slab06" />
+                    <div className="loadingSlab" id="slab07" />
+                </div>
+            </>
+        );
+    }
+
+    // Handles the setting of the loading bar
+    setOpacity = (index: number, opacity: string) => {
+        const slab = document.getElementById("slab0" + index);
+        if (slab) {
+            slab.style.opacity = opacity;
+        }
+    }
+
+    @observable private dialogueBoxOpacity = 1;
+    @observable private overlayOpacity = 0.4;
+
+    render() {
+        return (
+            <MainViewModal
+                contents={this.uploadInterface}
+                isDisplayed={true}
+                interactive={true}
+                dialogueBoxDisplayedOpacity={this.dialogueBoxOpacity}
+                overlayDisplayedOpacity={this.overlayOpacity}
+            />
+        );
+    }
+
+}
+
+
diff --git a/src/mobile/ImageUpload.scss b/src/mobile/ImageUpload.scss
index eea69b81c..890258918 100644
--- a/src/mobile/ImageUpload.scss
+++ b/src/mobile/ImageUpload.scss
@@ -5,8 +5,32 @@
     justify-content: center;
     flex-direction: column;
     align-items: center;
-    width: 100vw;
-    height: 100vh;
+    max-width: 400px;
+    min-width: 400px;
+
+    .upload_label {
+        font-weight: 700;
+        color: black;
+        background-color: rgba(0, 0, 0, 0);
+        border: solid 3px black;
+        margin: 10px;
+        font-size: 30;
+        height: 70px;
+        width: 80%;
+        display: flex;
+        font-family: sans-serif;
+        text-transform: uppercase;
+        justify-content: center;
+        flex-direction: column;
+        border-radius: 10px;
+    }
+
+    .file {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        direction: ltr;
+    }
 
     .button_file {
         text-align: center;
@@ -17,18 +41,98 @@
         font-size: 3em;
     }
 
-    .input_file {
-        display: none;
+    .inputfile {
+        width: 0.1px;
+        height: 0.1px;
+        opacity: 0;
+        overflow: hidden;
+        position: absolute;
+        z-index: -1;
     }
 
-    .upload_label,
-    .upload_button {
-        background: $dark-color;
-        font-size: 500%;
-        font-family: $sans-serif;
-        text-align: center;
-        padding: 5vh;
-        margin-bottom: 20px;
-        color: white;
+    .inputfile+label {
+        font-weight: 700;
+        color: black;
+        background-color: rgba(0, 0, 0, 0);
+        border: solid 3px black;
+        margin: 10px;
+        font-size: 30;
+        height: 70px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        margin-top: 30px;
+        width: 80%;
+        display: flex;
+        font-family: sans-serif;
+        text-transform: uppercase;
+        justify-content: center;
+        flex-direction: column;
+        border-radius: 10px;
+    }
+
+    .inputfile.active+label {
+        font-style: italic;
+        color: black;
+        background-color: lightgreen;
+        border: solid 3px darkgreen;
+    }
+
+    .status {
+        font-size: 2em;
     }
+
+}
+
+.image-upload {
+    top: 100%;
+    opacity: 0;
+}
+
+.image-upload.active {
+    top: 0;
+    position: absolute;
+    z-index: 999;
+    height: 100vh;
+    width: 100vw;
+    opacity: 1;
+}
+
+.uploadContainer {
+    top: 40;
+    position: absolute;
+    z-index: 1000;
+    height: 20vh;
+    width: 80vw;
+    opacity: 1;
+}
+
+.closeUpload {
+    position: absolute;
+    border-radius: 10px;
+    top: 3;
+    color: black;
+    font-size: 30;
+    right: 3;
+    z-index: 1002;
+    padding: 0px 3px;
+    background: rgba(0, 0, 0, 0);
+    transition: 0.5s ease all;
+    border: 0px solid;
+}
+
+.loadingImage {
+    display: inline-flex;
+    width: max-content;
+}
+
+.loadingSlab {
+    position: relative;
+    width: 30px;
+    height: 30px;
+    margin: 10;
+    border-radius: 20px;
+    opacity: 0.2;
+    background-color: black;
+    transition: all 2s, opacity 1.5s;
 }
\ No newline at end of file
diff --git a/src/mobile/ImageUpload.tsx b/src/mobile/ImageUpload.tsx
index b15042f9f..5ea626d52 100644
--- a/src/mobile/ImageUpload.tsx
+++ b/src/mobile/ImageUpload.tsx
@@ -1,128 +1,179 @@
-import * as ReactDOM from 'react-dom';
 import * as rp from 'request-promise';
 import { Docs } from '../client/documents/Documents';
 import "./ImageUpload.scss";
 import React = require('react');
 import { DocServer } from '../client/DocServer';
-import { Opt, Doc } from '../fields/Doc';
+import { observer } from 'mobx-react';
+import { observable, action } from 'mobx';
+import { Utils } from '../Utils';
+import { Networking } from '../client/Network';
+import { Doc, Opt } from '../fields/Doc';
 import { Cast } from '../fields/Types';
 import { listSpec } from '../fields/Schema';
 import { List } from '../fields/List';
-import { observer } from 'mobx-react';
-import { observable } from 'mobx';
-import { Utils } from '../Utils';
-import MobileInterface from './MobileInterface';
-import { CurrentUserUtils } from '../client/util/CurrentUserUtils';
-import { resolvedPorts } from '../client/views/Main';
+import MainViewModal from '../client/views/MainViewModal';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { MobileInterface } from './MobileInterface';
+
+export interface ImageUploadProps {
+    Document: Doc; // Target document for upload (upload location)
+}
 
-// const onPointerDown = (e: React.TouchEvent) => {
-//     let imgInput = document.getElementById("input_image_file");
-//     if (imgInput) {
-//         imgInput.click();
-//     }
-// }
 const inputRef = React.createRef<HTMLInputElement>();
 
 @observer
-class Uploader extends React.Component {
+export class Uploader extends React.Component<ImageUploadProps> {
     @observable error: string = "";
-    @observable status: string = "";
+    @observable nm: string = "Choose files"; // Text of 'Choose Files' button
+    @observable process: string = ""; // Current status of upload
 
     onClick = async () => {
-        console.log("uploader click");
         try {
-            this.status = "initializing protos";
+            const col = this.props.Document;
             await Docs.Prototypes.initialize();
             const imgPrev = document.getElementById("img_preview");
+            this.setOpacity(1, "1"); // Slab 1
             if (imgPrev) {
                 const files: FileList | null = inputRef.current!.files;
+                this.setOpacity(2, "1"); // Slab 2
                 if (files && files.length !== 0) {
-                    console.log(files[0]);
-                    const name = files[0].name;
-                    const formData = new FormData();
-                    formData.append("file", files[0]);
-
-                    const upload = window.location.origin + "/uploadFormData";
-                    this.status = "uploading image";
-                    console.log("uploading image", formData);
-                    const res = await fetch(upload, {
-                        method: 'POST',
-                        body: formData
-                    });
-                    this.status = "upload image, getting json";
-                    const json = await res.json();
-                    json.map(async (file: any) => {
-                        const path = window.location.origin + file;
-                        const doc = Docs.Create.ImageDocument(path, { _nativeWidth: 200, _width: 200, title: name });
-
-                        this.status = "getting user document";
-
-                        const res = await rp.get(Utils.prepend("/getUserDocumentId"));
-                        if (!res) {
-                            throw new Error("No user id returned");
-                        }
-                        const field = await DocServer.GetRefField(res);
-                        let pending: Opt<Doc>;
-                        if (field instanceof Doc) {
-                            pending = await Cast(field.rightSidebarCollection, Doc);
-                        }
-                        if (pending) {
-                            this.status = "has pending docs";
-                            const data = await Cast(pending.data, listSpec(Doc));
-                            if (data) {
-                                data.push(doc);
+                    this.process = "Uploading Files";
+                    for (let index = 0; index < files.length; ++index) {
+                        const file = files[index];
+                        const res = await Networking.UploadFilesToServer(file);
+                        this.setOpacity(3, "1"); // Slab 3
+                        // For each item that the user has selected
+                        res.map(async ({ result }) => {
+                            const name = file.name;
+                            if (result instanceof Error) {
+                                return;
+                            }
+                            const path = Utils.prepend(result.accessPaths.agnostic.client);
+                            let doc = null;
+                            // Case 1: File is a video
+                            if (file.type === "video/mp4") {
+                                doc = Docs.Create.VideoDocument(path, { _nativeWidth: 400, _width: 400, title: name });
+                                // Case 2: File is a PDF document
+                            } else if (file.type === "application/pdf") {
+                                doc = Docs.Create.PdfDocument(path, { _nativeWidth: 400, _width: 400, title: name });
+                                // Case 3: File is another document type (most likely Image)
                             } else {
-                                pending.data = new List([doc]);
+                                doc = Docs.Create.ImageDocument(path, { _nativeWidth: 400, _width: 400, title: name });
                             }
-                            this.status = "finished";
-                        }
-                    });
-
-                    // console.log(window.location.origin + file[0])
-
-                    //imgPrev.setAttribute("src", window.location.origin + files[0].name)
+                            this.setOpacity(4, "1"); // Slab 4
+                            const res = await rp.get(Utils.prepend("/getUserDocumentId"));
+                            if (!res) {
+                                throw new Error("No user id returned");
+                            }
+                            const field = await DocServer.GetRefField(res);
+                            let pending: Opt<Doc>;
+                            if (field instanceof Doc) {
+                                pending = col;
+                            }
+                            if (pending) {
+                                const data = await Cast(pending.data, listSpec(Doc));
+                                if (data) data.push(doc);
+                                else pending.data = new List([doc]);
+                                this.setOpacity(5, "1"); // Slab 5
+                                this.process = "File " + (index + 1).toString() + " Uploaded";
+                                this.setOpacity(6, "1"); // Slab 6
+                            }
+                            if ((index + 1) === files.length) {
+                                this.process = "Uploads Completed";
+                                this.setOpacity(7, "1"); // Slab 7
+                            }
+                        });
+                    }
+                    // Case in which the user pressed upload and no files were selected
+                } else {
+                    this.process = "No file selected";
                 }
+                // Three seconds after upload the menu will reset
+                setTimeout(this.clearUpload, 3000);
             }
         } catch (error) {
             this.error = JSON.stringify(error);
         }
     }
 
-    render() {
+    // Updates label after a files is selected (so user knows a file is uploaded)
+    inputLabel = async () => {
+        const files: FileList | null = inputRef.current!.files;
+        await files;
+        if (files && files.length === 1) {
+            this.nm = files[0].name;
+        } else if (files && files.length > 1) {
+            this.nm = files.length.toString() + " files selected";
+        }
+    }
+
+    // Loops through load icons, and resets buttons
+    @action
+    clearUpload = () => {
+        for (let i = 1; i < 8; i++) {
+            this.setOpacity(i, "0.2");
+        }
+        this.nm = "Choose files";
+
+        if (inputRef.current) {
+            inputRef.current.value = "";
+        }
+        this.process = "";
+    }
+
+    // Clears the upload and closes the upload menu
+    closeUpload = () => {
+        this.clearUpload();
+        MobileInterface.Instance.toggleUpload();
+    }
+
+    // Handles the setting of the loading bar
+    setOpacity = (index: number, opacity: string) => {
+        const slab = document.getElementById("slab" + index);
+        if (slab) slab.style.opacity = opacity;
+    }
+
+    // Returns the upload interface for mobile
+    private get uploadInterface() {
         return (
             <div className="imgupload_cont">
-                <label htmlFor="input_image_file" className="upload_label">Choose an Image</label>
-                <input type="file" accept="image/*" className="input_file" id="input_image_file" ref={inputRef}></input>
-                <button onClick={this.onClick} className="upload_button">Upload</button>
+                <div className="closeUpload" onClick={() => this.closeUpload()}>
+                    <FontAwesomeIcon icon="window-close" size={"lg"} />
+                </div>
+                <FontAwesomeIcon icon="upload" size="lg" style={{ fontSize: "130" }} />
+                <input type="file" accept="application/pdf, video/*,image/*" className={`inputFile ${this.nm !== "Choose files" ? "active" : ""}`} id="input_image_file" ref={inputRef} onChange={this.inputLabel} multiple></input>
+                <label className="file" id="label" htmlFor="input_image_file">{this.nm}</label>
+                <div className="upload_label" onClick={this.onClick}>
+                    Upload
+                </div>
                 <img id="img_preview" src=""></img>
-                <p>{this.status}</p>
-                <p>{this.error}</p>
+                <div className="loadingImage">
+                    <div className="loadingSlab" id="slab1" />
+                    <div className="loadingSlab" id="slab2" />
+                    <div className="loadingSlab" id="slab3" />
+                    <div className="loadingSlab" id="slab4" />
+                    <div className="loadingSlab" id="slab5" />
+                    <div className="loadingSlab" id="slab6" />
+                    <div className="loadingSlab" id="slab7" />
+                </div>
+                <p className="status">{this.process}</p>
             </div>
         );
     }
 
-}
+    @observable private dialogueBoxOpacity = 1;
+    @observable private overlayOpacity = 0.4;
 
-
-// DocServer.init(window.location.protocol, window.location.hostname, resolvedPorts.socket, "image upload");
-(async () => {
-    const info = await CurrentUserUtils.loadCurrentUser();
-    DocServer.init(window.location.protocol, window.location.hostname, resolvedPorts.socket, info.email + "mobile");
-    await Docs.Prototypes.initialize();
-    if (info.id !== "__guest__") {
-        // a guest will not have an id registered
-        await CurrentUserUtils.loadUserDocument(info);
+    render() {
+        return (
+            <MainViewModal
+                contents={this.uploadInterface}
+                isDisplayed={true}
+                interactive={true}
+                dialogueBoxDisplayedOpacity={this.dialogueBoxOpacity}
+                overlayDisplayedOpacity={this.overlayOpacity}
+            />
+        );
     }
-    document.getElementById('root')!.addEventListener('wheel', event => {
-        if (event.ctrlKey) {
-            event.preventDefault();
-        }
-    }, true);
-    ReactDOM.render((
-        // <Uploader />
-        <MobileInterface />
-    ),
-        document.getElementById('root')
-    );
+
 }
-)();
\ No newline at end of file
diff --git a/src/mobile/MobileInkOverlay.tsx b/src/mobile/MobileInkOverlay.tsx
index 59c73ed27..d668d134e 100644
--- a/src/mobile/MobileInkOverlay.tsx
+++ b/src/mobile/MobileInkOverlay.tsx
@@ -4,11 +4,9 @@ import { MobileInkOverlayContent, GestureContent, UpdateMobileInkOverlayPosition
 import { observable, action } from "mobx";
 import { GestureUtils } from "../pen-gestures/GestureUtils";
 import "./MobileInkOverlay.scss";
-import { StrCast, Cast } from '../fields/Types';
 import { DragManager } from "../client/util/DragManager";
 import { DocServer } from '../client/DocServer';
-import { Doc, DocListCastAsync } from '../fields/Doc';
-import { listSpec } from '../fields/Schema';
+import { Doc } from '../fields/Doc';
 
 
 @observer
diff --git a/src/mobile/MobileInterface.scss b/src/mobile/MobileInterface.scss
index 4d86e208f..4b32c3da0 100644
--- a/src/mobile/MobileInterface.scss
+++ b/src/mobile/MobileInterface.scss
@@ -1,19 +1,445 @@
-.mobileInterface-inkInterfaceButtons {
-    position: absolute;
+$navbar-height: 120px;
+$pathbar-height: 50px;
+
+@media only screen and (max-device-width: 480px) {
+    * {
+        margin: 0px;
+        padding: 0px;
+        box-sizing: border-box;
+        font-family: sans-serif;
+    }
+}
+
+body {
+    overflow: hidden;
+}
+
+.mobileInterface-container {
+    height: 100%;
+    position: relative;
+    touch-action: none;
+    width: 100%;
+
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+
+// Topbar of Dash Mobile
+.navbar {
+    position: fixed;
     top: 0px;
+    left: 0px;
+    width: 100vw;
+    height: $navbar-height;
+    background-color: whitesmoke;
+    z-index: 150;
+
+    .cover {
+        position: absolute;
+        right: 0px;
+        top: 0px;
+        height: 120px;
+        width: 120px;
+        background-color: whitesmoke;
+        z-index: 200;
+    }
+
+    .toggle-btn {
+        position: absolute;
+        right: 20px;
+        top: 30px;
+        height: 70px;
+        width: 70px;
+        transition: all 400ms ease-in-out 200ms;
+        z-index: 180;
+    }
+
+    .background {
+        position: absolute;
+        right: 0px;
+        top: 0px;
+        height: 120px;
+        width: 120px;
+        //border: 1px solid black;
+    }
+
+    .background.active {
+        background-color: lightgrey;
+    }
+
+    .toggle-btn-home {
+        right: -200px;
+    }
+
+    .header {
+        position: absolute;
+        top: 50%;
+        top: calc(9px + 50%);
+        right: 50%;
+        transform: translate(50%, -50%);
+        font-size: 40;
+        font-weight: 700;
+        text-align: center;
+        user-select: none;
+        text-transform: uppercase;
+        font-family: Arial, Helvetica, sans-serif;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        direction: ltr;
+        width: 600px;
+    }
+
+    .toggle-btn span {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        width: 70%;
+        height: 4px;
+        background: black;
+        transition: all 200ms ease;
+        z-index: 180;
+    }
+
+    .toggle-btn span:nth-child(1) {
+        transition: top 200ms ease-in-out;
+        top: 30%;
+    }
+
+    .toggle-btn span:nth-child(3) {
+        transition: top 200ms ease-in-out;
+        top: 70%;
+    }
+
+    .toggle-btn.active {
+        transition: transform 200ms ease-in-out 200ms;
+        transform: rotate(135deg);
+    }
+
+    .toggle-btn.active span:nth-child(1) {
+        top: 50%;
+    }
+
+    .toggle-btn.active span:nth-child(2) {
+        transform: translate(-50%, -50%) rotate(90deg);
+    }
+
+    .toggle-btn.active span:nth-child(3) {
+        top: 50%;
+    }
+}
+
+.sidebar {
+    position: fixed;
+    top: 120px;
+    opacity: 0;
+    right: -100%;
+    width: 80%;
+    height: calc(80% - (120px));
+    z-index: 101;
+    background-color: whitesmoke;
+    transition: all 400ms ease 50ms;
+    padding: 20px;
+    box-shadow: 0 0 5px 5px grey;
+
+    .item {
+        width: 100%;
+        padding: 13px 12px;
+        border-bottom: 1px solid rgba(200, 200, 200, 0.7);
+        font-family: Arial, Helvetica, sans-serif;
+        font-style: normal;
+        font-weight: normal;
+        user-select: none;
+        display: inline-flex;
+        font-size: 35px;
+        text-transform: uppercase;
+        color: black;
+    }
+
+    .ink:focus {
+        outline: 1px solid blue;
+    }
+
+    .sidebarButtons {
+        top: 80px;
+        position: relative;
+    }
+}
+
+
+
+
+
+
+.blanket {
+    position: fixed;
+    top: 120px;
+    opacity: 0.5;
+    right: -100%;
+    width: 100%;
+    height: calc(100% - (120px));
+    z-index: 101;
+    background-color: grey;
+    padding: 20px;
+}
+
+.blanket.active {
+    position: absolute;
+    right: 0%;
+    z-index: 100;
+}
+
+.home {
+    position: absolute;
+    top: 30px;
+    left: 30px;
+    font-size: 60;
+    user-select: none;
+    text-transform: uppercase;
+    font-family: Arial, Helvetica, sans-serif;
+    z-index: 200;
+}
+
+.item-type {
+    display: inline;
+    text-transform: lowercase;
+    margin-left: 20px;
+    font-size: 35px;
+    font-style: italic;
+    color: rgb(28, 28, 28);
+}
+
+.item-title {
+    max-width: 70%;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.right {
+    margin-left: 20px;
+    z-index: 200;
+}
+
+.open {
+    right: 20px;
+    font-size: 35;
+    position: absolute;
+}
+
+.left {
+    width: 100%;
+    height: 100%;
+}
+
+
+
+.sidebar.active {
+    position: absolute;
+    right: 0%;
+    opacity: 1;
+    z-index: 101;
+}
+
+.back {
+    position: absolute;
+    left: 42px;
+    top: 0;
+    background: #1a1a1a;
+    width: 50px;
+    height: 100%;
     display: flex;
-    justify-content: space-between;
+    justify-content: center;
+    text-align: center;
+    flex-direction: column;
+    align-items: center;
+    border-radius: 10px;
+    font-size: 25px;
+    user-select: none;
+    z-index: 100;
+}
+
+.pathbar {
+    position: fixed;
+    top: 118px;
+    left: 0px;
+    background: #1a1a1a;
+    z-index: 120;
+    border-radius: 0px;
     width: 100%;
-    z-index: 9999;
-    height: 50px;
+    height: 80px;
+    overflow: hidden;
+
+    .pathname {
+        position: relative;
+        font-size: 25;
+        top: 50%;
+        width: 86%;
+        left: 12%;
+        color: whitesmoke;
+        transform: translate(0%, -50%);
+        z-index: 20;
+        font-family: sans-serif;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        direction: rtl;
+        text-align: left;
+        text-transform: uppercase;
+    }
+
+    .scrollmenu {
+        overflow: auto;
+        width: 100%;
+        height: 100%;
+        white-space: nowrap;
+        display: inline-flex;
+    }
 
-    .mobileInterface-button {
+    .hidePath {
+        position: absolute;
         height: 100%;
+        width: 200px;
+        left: 0px;
+        top: 0px;
+        background-image: linear-gradient(to right, #1a1a1a, rgba(0, 0, 0, 0));
+        text-align: center;
+        user-select: none;
+        z-index: 99;
+        pointer-events: none;
+    }
+
+    .pathbarItem {
+        position: relative;
+        display: flex;
+        align-items: center;
+        color: whitesmoke;
+        text-align: center;
+        justify-content: center;
+        user-select: none;
+        transform: translate(100px, 0px);
+        font-size: 30px;
+        padding: 10px;
+        text-transform: uppercase;
+
+        .pathbarText {
+            font-family: sans-serif;
+            text-align: center;
+            height: 50px;
+            padding: 10px;
+            font-size: 30px;
+            border-radius: 10px;
+            text-transform: uppercase;
+            margin-left: 20px;
+            position: relative;
+        }
+
+        .pathIcon {
+            transform: translate(0px, 0px);
+            position: relative;
+        }
     }
 }
 
-.mobileInterface-container {
-    height: 100%;
+
+/**
+* docButton appears at the bottom of mobile document
+* Buttons include: pin to presentation, download, upload, reload
+*/
+.docButton {
     position: relative;
-    touch-action: none;
+    width: 100px;
+    display: flex;
+    height: 100px;
+    font-size: 70px;
+    text-align: center;
+    border: 3px solid black;
+    margin: 20px;
+    z-index: 100;
+    border-radius: 100%;
+    justify-content: center;
+    flex-direction: column;
+    align-items: center;
+}
+
+.docButtonContainer {
+    top: 80%;
+    position: absolute;
+    display: flex;
+    transform: translate(-50%, 0);
+    left: 50%;
+    z-index: 100;
+}
+
+.toolbar {
+    left: 50%;
+    transform: translate(-50%);
+    position: absolute;
+    height: max-content;
+    top: 0px;
+    border-radius: 20px;
+    background-color: lightgrey;
+    opacity: 0;
+    transition: all 400ms ease 50ms;
+}
+
+.toolbar.active {
+    display: inline-block;
+    width: 300px;
+    padding: 5px;
+    opacity: 1;
+    height: max-content;
+    top: -450px;
+}
+
+.colorSelector {
+    position: absolute;
+    top: 550px;
+    left: 280px;
+    transform: translate(-50%, 0);
+    z-index: 100;
+    display: inline-flex;
+    width: max-content;
+    height: max-content;
+    pointer-events: all;
+    font-size: 80px;
+    user-select: none;
+}
+
+// Menu buttons for toggling between list and icon view
+.homeSwitch {
+    position: fixed;
+    top: 212;
+    right: 36px;
+    display: inline-flex;
+    width: max-content;
+    z-index: 99;
+    height: 70px;
+
+    .list {
+        width: 70px;
+        height: 70px;
+        margin: 5;
+        padding: 10;
+        align-items: center;
+        text-align: center;
+        font-size: 50;
+        border-style: solid;
+        border-width: 3;
+        border-color: black;
+        background: whitesmoke;
+        align-self: center;
+        border-radius: 10px;
+    }
+
+    .list.active {
+        color: darkred;
+        border-color: darkred;
+    }
 }
\ No newline at end of file
diff --git a/src/mobile/MobileInterface.tsx b/src/mobile/MobileInterface.tsx
index a50ec103e..fafa94a11 100644
--- a/src/mobile/MobileInterface.tsx
+++ b/src/mobile/MobileInterface.tsx
@@ -1,47 +1,69 @@
-import React = require('react');
+import * as React from "react";
 import { library } from '@fortawesome/fontawesome-svg-core';
-import { faEraser, faHighlighter, faLongArrowAltLeft, faMousePointer, faPenNib } from '@fortawesome/free-solid-svg-icons';
+import {
+    faTasks, faReply, faQuoteLeft, faHandPointLeft, faFolderOpen, faAngleDoubleLeft, faExternalLinkSquareAlt, faMobile, faThLarge, faWindowClose, faEdit, faTrashAlt, faPalette, faAngleRight, faBell, faTrash, faCamera, faExpand, faCaretDown, faCaretLeft, faCaretRight, faCaretSquareDown, faCaretSquareRight, faArrowsAltH, faPlus, faMinus,
+    faTerminal, faToggleOn, faFile as fileSolid, faExternalLinkAlt, faLocationArrow, faSearch, faFileDownload, faStop, faCalculator, faWindowMaximize, faAddressCard,
+    faQuestionCircle, faArrowLeft, faArrowRight, faArrowDown, faArrowUp, faBolt, faBullseye, faCaretUp, faCat, faCheck, faChevronRight, faClipboard, faClone, faCloudUploadAlt,
+    faCommentAlt, faCompressArrowsAlt, faCut, faEllipsisV, faEraser, faExclamation, faFileAlt, faFileAudio, faFilePdf, faFilm, faFilter, faFont, faGlobeAsia, faHighlighter,
+    faLongArrowAltRight, faMicrophone, faMousePointer, faMusic, faObjectGroup, faPause, faPen, faPenNib, faPhone, faPlay, faPortrait, faRedoAlt, faStamp, faStickyNote,
+    faThumbtack, faTree, faTv, faBook, faUndoAlt, faVideo, faAsterisk, faBrain, faImage, faPaintBrush, faTimes, faEye, faHome, faLongArrowAltLeft, faBars, faTh, faChevronLeft,
+    faAlignRight, faAlignLeft
+} from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { action, computed, observable } from 'mobx';
+import { action, computed, observable, reaction, trace, runInAction } from 'mobx';
 import { observer } from 'mobx-react';
-import { DocServer } from '../client/DocServer';
-import { Docs } from '../client/documents/Documents';
-import { DocumentManager } from '../client/util/DocumentManager';
-import RichTextMenu from '../client/views/nodes/formattedText/RichTextMenu';
+import { Doc, DocListCast } from '../fields/Doc';
+import { CurrentUserUtils } from '../client/util/CurrentUserUtils';
+import { emptyFunction, emptyPath, returnFalse, returnOne, returnTrue, returnZero, returnEmptyFilter } from '../Utils';
+import { Docs, DocumentOptions } from '../client/documents/Documents';
 import { Scripting } from '../client/util/Scripting';
-import { Transform } from '../client/util/Transform';
-import { DocumentDecorations } from '../client/views/DocumentDecorations';
-import GestureOverlay from '../client/views/GestureOverlay';
 import { DocumentView } from '../client/views/nodes/DocumentView';
-import { RadialMenu } from '../client/views/nodes/RadialMenu';
-import { PreviewCursor } from '../client/views/PreviewCursor';
-import { Doc, DocListCast, FieldResult } from '../fields/Doc';
-import { Id } from '../fields/FieldSymbols';
+import { Transform } from '../client/util/Transform';
+import "./MobileInterface.scss";
+import "./ImageUpload.scss";
+import "./AudioUpload.scss";
+import SettingsManager from '../client/util/SettingsManager';
+import { Uploader } from "./ImageUpload";
+import { DockedFrameRenderer } from '../client/views/collections/CollectionDockingView';
 import { InkTool } from '../fields/InkField';
-import { listSpec } from '../fields/Schema';
+import GestureOverlay from "../client/views/GestureOverlay";
+import { ScriptField } from "../fields/ScriptField";
+import InkOptionsMenu from "../client/views/collections/collectionFreeForm/InkOptionsMenu";
+import { RadialMenu } from "../client/views/nodes/RadialMenu";
+import { UndoManager } from "../client/util/UndoManager";
+import { List } from "../fields/List";
+import { AudioUpload } from "./AudioUpload";
 import { Cast, FieldValue } from '../fields/Types';
-import { WebField } from "../fields/URLField";
-import { CurrentUserUtils } from '../client/util/CurrentUserUtils';
-import { emptyFunction, emptyPath, returnEmptyString, returnFalse, returnOne, returnTrue, returnZero, returnEmptyFilter } from '../Utils';
-import "./MobileInterface.scss";
-import { CollectionView } from '../client/views/collections/CollectionView';
-import { InkingStroke } from '../client/views/InkingStroke';
+import RichTextMenu from "../client/views/nodes/formattedText/RichTextMenu";
+import { AudioBox } from "../client/views/nodes/AudioBox";
+import { CollectionViewType } from "../client/views/collections/CollectionView";
+import { DocumentType } from "../client/documents/DocumentTypes";
 
-library.add(faLongArrowAltLeft);
+library.add(faTasks, faReply, faQuoteLeft, faHandPointLeft, faFolderOpen, faAngleDoubleLeft, faExternalLinkSquareAlt, faMobile, faThLarge, faWindowClose, faEdit, faTrashAlt, faPalette, faAngleRight, faBell, faTrash, faCamera, faExpand, faCaretDown, faCaretLeft, faCaretRight, faCaretSquareDown, faCaretSquareRight, faArrowsAltH, faPlus, faMinus,
+    faTerminal, faToggleOn, fileSolid, faExternalLinkAlt, faLocationArrow, faSearch, faFileDownload, faStop, faCalculator, faWindowMaximize, faAddressCard,
+    faQuestionCircle, faArrowLeft, faArrowRight, faArrowDown, faArrowUp, faBolt, faBullseye, faCaretUp, faCat, faCheck, faChevronRight, faClipboard, faClone, faCloudUploadAlt,
+    faCommentAlt, faCompressArrowsAlt, faCut, faEllipsisV, faEraser, faExclamation, faFileAlt, faFileAudio, faFilePdf, faFilm, faFilter, faFont, faGlobeAsia, faHighlighter,
+    faLongArrowAltRight, faMicrophone, faMousePointer, faMusic, faObjectGroup, faPause, faPen, faPenNib, faPhone, faPlay, faPortrait, faRedoAlt, faStamp, faStickyNote,
+    faThumbtack, faTree, faTv, faUndoAlt, faBook, faVideo, faAsterisk, faBrain, faImage, faPaintBrush, faTimes, faEye, faHome, faLongArrowAltLeft, faBars, faTh, faChevronLeft,
+    faAlignLeft, faAlignRight);
 
 @observer
-export default class MobileInterface extends React.Component {
-    @observable static Instance: MobileInterface;
-    @computed private get userDoc() { return Doc.UserDoc(); }
-    @computed private get mainContainer() { return this.userDoc ? FieldValue(Cast(this.userDoc.activeMobile, Doc)) : CurrentUserUtils.GuestMobile; }
-    // @observable private currentView: "main" | "ink" | "upload" = "main";
-    private mainDoc: any = CurrentUserUtils.setupMobileDoc(this.userDoc);
-    @observable private renderView?: () => JSX.Element;
+export class MobileInterface extends React.Component {
+    static Instance: MobileInterface;
+    private _library: Doc = CurrentUserUtils.setupLibrary(Doc.UserDoc()); // to access documents in Dash Web
+    private _mainDoc: any = CurrentUserUtils.setupActiveMobileMenu(Doc.UserDoc());
+    @observable private _sidebarActive: boolean = false; //to toggle sidebar display
+    @observable private _imageUploadActive: boolean = false; //to toggle image upload
+    @observable private _audioUploadActive: boolean = false;
+    @observable private _menuListView: boolean = false; //to switch between menu view (list / icon)
+    @observable private _ink: boolean = false; //toggle whether ink is being dispalyed
+    @observable private _homeMenu: boolean = true; // to determine whether currently at home menu
+    @observable private _child: Doc | null = null; // currently selected document
+    @observable private _activeDoc: Doc = this._mainDoc; // doc updated as the active mobile page is updated (initially home menu)
+    @observable private _homeDoc: Doc = this._mainDoc; // home menu as a document
+    @observable private _parents: Array<Doc> = []; // array of parent docs (for pathbar)
 
-    // private inkDoc?: Doc;
-    public drawingInk: boolean = false;
-
-    // private uploadDoc?: Doc;
+    @computed private get mainContainer() { return Doc.UserDoc() ? FieldValue(Cast(Doc.UserDoc().activeMobile, Doc)) : CurrentUserUtils.GuestMobile; }
 
     constructor(props: Readonly<{}>) {
         super(props);
@@ -50,298 +72,613 @@ export default class MobileInterface extends React.Component {
 
     @action
     componentDidMount = () => {
-        library.add(...[faPenNib, faHighlighter, faEraser, faMousePointer]);
+        // if the home menu is in list view -> adjust the menu toggle appropriately
+        this._menuListView = this._homeDoc._viewType === "stacking" ? true : false;
+        Doc.SetSelectedTool(InkTool.None); // ink should intially be set to none
+        Doc.UserDoc().activeMobile = this._homeDoc; // active mobile set to home
+        AudioBox.Enabled = true;
 
-        if (this.userDoc && !this.mainContainer) {
-            this.userDoc.activeMobile = this.mainDoc;
-        }
+        // remove double click to avoid mobile zoom in
+        document.removeEventListener("dblclick", this.onReactDoubleClick);
+        document.addEventListener("dblclick", this.onReactDoubleClick);
     }
 
     @action
-    switchCurrentView = (doc: (userDoc: Doc) => Doc, renderView?: () => JSX.Element, onSwitch?: () => void) => {
-        if (!this.userDoc) return;
+    componentWillUnmount = () => {
+        document.removeEventListener('dblclick', this.onReactDoubleClick);
+    }
+
+    // Prevent zooming in when double tapping the screen
+    onReactDoubleClick = (e: MouseEvent) => {
+        e.stopPropagation();
+    }
 
-        this.userDoc.activeMobile = doc(this.userDoc);
-        onSwitch && onSwitch();
+    // Switch the mobile view to the given doc
+    @action
+    switchCurrentView = (doc: Doc, renderView?: () => JSX.Element, onSwitch?: () => void) => {
+        if (!Doc.UserDoc()) return;
+        if (this._activeDoc === this._homeDoc) {
+            this._parents.push(this._activeDoc);
+            this._homeMenu = false;
+        }
+        this._activeDoc = doc;
+        Doc.UserDoc().activeMobile = doc;
+        onSwitch?.();
 
-        this.renderView = renderView;
+        // Ensures that switching to home is not registed
+        UndoManager.undoStack.length = 0;
+        UndoManager.redoStack.length = 0;
     }
 
-    onSwitchInking = () => {
-        Doc.SetSelectedTool(InkTool.Pen);
-        MobileInterface.Instance.drawingInk = true;
+    // For toggling the hamburger menu
+    @action
+    toggleSidebar = () => {
+        this._sidebarActive = !this._sidebarActive;
 
-        DocServer.Mobile.dispatchOverlayTrigger({
-            enableOverlay: true,
-            width: window.innerWidth,
-            height: window.innerHeight
-        });
+        if (this._ink) {
+            this.onSwitchInking();
+        }
+    }
+    /**
+     * Method called when 'Library' button is pressed on the home screen
+     */
+    switchToLibrary = async () => {
+        this.switchCurrentView(this._library);
+        runInAction(() => this._homeMenu = false);
+        this.toggleSidebar();
     }
 
-    onSwitchUpload = async () => {
-        let width = 300;
-        let height = 300;
-
-        // get width and height of the collection doc
-        if (this.mainContainer) {
-            const data = Cast(this.mainContainer.data, listSpec(Doc));
-            if (data) {
-                const collectionDoc = await data[1]; // this should be the collection doc since the positions should be locked
-                const docView = DocumentManager.Instance.getDocumentView(collectionDoc);
-                if (docView) {
-                    width = docView.nativeWidth ? docView.nativeWidth : 300;
-                    height = docView.nativeHeight ? docView.nativeHeight : 300;
-                }
-            }
+    /**
+     * Back method for navigating through items
+     */
+    @action
+    back = () => {
+        const header = document.getElementById("header") as HTMLElement;
+        const doc = Cast(this._parents.pop(), Doc) as Doc; // Parent document
+        // Case 1: Parent document is 'workspaces'
+        if (doc === Cast(this._library, Doc) as Doc) {
+            this._child = null;
+            this.switchCurrentView(this._library);
+            // Case 2: Parent document is the 'home' menu (root node)
+        } else if (doc === Cast(this._homeDoc, Doc) as Doc) {
+            this._homeMenu = true;
+            this._parents = [];
+            this._child = null;
+            this.switchCurrentView(this._homeDoc);
+            // Case 3: Parent document is any document
+        } else if (doc) {
+            this._child = doc;
+            this.switchCurrentView(doc);
+            this._homeMenu = false;
+            header.textContent = String(doc.title);
         }
-        DocServer.Mobile.dispatchOverlayTrigger({
-            enableOverlay: true,
-            width: width,
-            height: height,
-            text: "Documents uploaded from mobile will show here",
-        });
+        this._ink = false; // turns ink off
     }
 
-    renderDefaultContent = () => {
-        if (this.mainContainer) {
-            return <DocumentView
-                Document={this.mainContainer}
-                DataDoc={undefined}
-                LibraryPath={emptyPath}
-                addDocument={returnFalse}
-                addDocTab={returnFalse}
-                pinToPres={emptyFunction}
-                rootSelected={returnFalse}
-                removeDocument={undefined}
-                onClick={undefined}
-                ScreenToLocalTransform={Transform.Identity}
-                ContentScaling={returnOne}
-                NativeHeight={returnZero}
-                NativeWidth={returnZero}
-                PanelWidth={() => window.screen.width}
-                PanelHeight={() => window.screen.height}
-                renderDepth={0}
-                focus={emptyFunction}
-                backgroundColor={returnEmptyString}
-                parentActive={returnTrue}
-                whenActiveChanged={emptyFunction}
-                bringToFront={emptyFunction}
-                docFilters={returnEmptyFilter}
-                ContainingCollectionView={undefined}
-                ContainingCollectionDoc={undefined} />;
+    /**
+     * Return 'Home", which implies returning to 'Home' menu buttons
+     */
+    @action
+    returnHome = () => {
+        if (!this._homeMenu || this._sidebarActive) {
+            this._homeMenu = true;
+            this._parents = [];
+            this._child = null;
+            this.switchCurrentView(this._homeDoc);
+        }
+        if (this._sidebarActive) {
+            this.toggleSidebar();
         }
-        return "hello";
     }
 
-    onBack = (e: React.MouseEvent) => {
-        this.switchCurrentView((userDoc: Doc) => this.mainDoc);
-        Doc.SetSelectedTool(InkTool.None); // TODO: switch to previous tool
+    /**
+     * Return to primary Workspace in library (Workspaces Doc)
+     */
+    @action
+    returnMain = () => {
+        this._parents = [this._homeDoc];
+        this.switchCurrentView(this._library);
+        this._homeMenu = false;
+        this._child = null;
+    }
+
+    /**
+     * Note: window.innerWidth and window.screen.width compute different values.
+     * window.screen.width is the display size, however window.innerWidth is the
+     * display resolution which computes differently.
+     */
+    returnWidth = () => window.innerWidth; //The windows width
+    returnHeight = () => (window.innerHeight - 300); //Calculating the windows height (-300 to account for topbar)
+    whitebackground = () => "white";
+    /**
+     * DocumentView for graphic display of all documents
+     */
+    @computed get displayWorkspaces() {
+        return !this.mainContainer ? (null) :
+            <div style={{ position: "relative", top: '198px', height: `calc(100% - 350px)`, width: "100%", left: "0%" }}>
+                <DocumentView
+                    Document={this.mainContainer}
+                    DataDoc={undefined}
+                    LibraryPath={emptyPath}
+                    addDocument={returnFalse}
+                    addDocTab={returnFalse}
+                    pinToPres={emptyFunction}
+                    rootSelected={returnFalse}
+                    removeDocument={undefined}
+                    onClick={undefined}
+                    ScreenToLocalTransform={Transform.Identity}
+                    ContentScaling={returnOne}
+                    PanelWidth={this.returnWidth}
+                    PanelHeight={this.returnHeight}
+                    NativeHeight={returnZero}
+                    NativeWidth={returnZero}
+                    renderDepth={0}
+                    focus={emptyFunction}
+                    backgroundColor={this.whitebackground}
+                    parentActive={returnTrue}
+                    whenActiveChanged={emptyFunction}
+                    bringToFront={emptyFunction}
+                    docFilters={returnEmptyFilter}
+                    ContainingCollectionView={undefined}
+                    ContainingCollectionDoc={undefined}
+                />
+            </div>;
+    }
 
-        DocServer.Mobile.dispatchOverlayTrigger({
-            enableOverlay: false,
-            width: window.innerWidth,
-            height: window.innerHeight
+    /**
+     * Handles the click functionality in the library panel.
+     * Navigates to the given doc and updates the sidebar.
+     * @param doc: doc for which the method is called
+     */
+    handleClick = async (doc: Doc) => {
+        runInAction(() => {
+            if (doc.type !== "collection" && this._sidebarActive) {
+                this._parents.push(this._activeDoc);
+                this.switchCurrentView(doc);
+                this._homeMenu = false;
+                this.toggleSidebar();
+            }
+            else {
+                this._parents.push(this._activeDoc);
+                this.switchCurrentView(doc);
+                this._homeMenu = false;
+                this._child = doc;
+            }
         });
+    }
 
-        // this.inkDoc = undefined;
-        this.drawingInk = false;
+    /**
+     * Called when an item in the library is clicked and should
+     * be opened (open icon on RHS of all menu items)
+     * @param doc doc to be opened
+     */
+    @action
+    openFromSidebar = (doc: Doc) => {
+        this._parents.push(this._activeDoc);
+        this.switchCurrentView(doc);
+        this._homeMenu = false;
+        this._child = doc;
+        this.toggleSidebar();
     }
 
-    shiftLeft = (e: React.MouseEvent) => {
-        DocServer.Mobile.dispatchOverlayPositionUpdate({
-            dx: -10
-        });
-        e.preventDefault();
-        e.stopPropagation();
+    // Renders the graphical pathbar
+    renderPathbar = () => {
+        const docPath = [...this._parents, this._activeDoc];
+        const items = docPath.map((doc: Doc, index: any) =>
+            <div className="pathbarItem" key={index}>
+                {index === 0 ? (null) : <FontAwesomeIcon key="icon" className="pathIcon" icon="angle-right" size="lg" />}
+                <div className="pathbarText"
+                    style={{ backgroundColor: this._homeMenu || doc === this._activeDoc ? "rgb(119,17,37)" : undefined }}
+                    onClick={() => this.handlePathClick(doc, index)}>{doc.title}
+                </div>
+            </div>);
+        return (<div className="pathbar">
+            <div className="scrollmenu">
+                {items}
+            </div>
+            {!this._parents.length ? (null) :
+                <div className="back" >
+                    <FontAwesomeIcon onClick={this.back} icon={"chevron-left"} color="white" size={"2x"} />
+                </div>}
+            <div className="hidePath" />
+        </div>);
     }
 
-    shiftRight = (e: React.MouseEvent) => {
-        DocServer.Mobile.dispatchOverlayPositionUpdate({
-            dx: 10
-        });
-        e.preventDefault();
-        e.stopPropagation();
+    // Handles when user clicks on a document in the pathbar
+    @action
+    handlePathClick = (doc: Doc, index: number) => {
+        if (doc === this._library) {
+            this._child = null;
+            this.switchCurrentView(doc);
+            this._parents.length = index;
+        } else if (doc === this._homeDoc) {
+            this.returnHome();
+        } else {
+            this._child = doc;
+            this.switchCurrentView(doc);
+            this._parents.length = index;
+        }
     }
 
-    panelHeight = () => window.innerHeight;
-    panelWidth = () => window.innerWidth;
-    renderInkingContent = () => {
-        console.log("rendering inking content");
-        // TODO: support panning and zooming
-        // TODO: handle moving of ink strokes
-        if (this.mainContainer) {
+    // Renders the contents of the menu and sidebar
+    @computed get renderDefaultContent() {
+        if (this._homeMenu) {
             return (
-                <div className="mobileInterface">
-                    <div className="mobileInterface-inkInterfaceButtons">
-                        <div className="navButtons">
-                            <button className="mobileInterface-button cancel" onClick={this.onBack} title="Cancel drawing">BACK</button>
-                        </div>
-                        <div className="inkSettingButtons">
-                            <button className="mobileInterface-button cancel" onClick={this.onBack} title="Cancel drawing"><FontAwesomeIcon icon="long-arrow-alt-left" /></button>
-                        </div>
-                        <div className="navButtons">
-                            <button className="mobileInterface-button" onClick={this.shiftLeft} title="Shift left">left</button>
-                            <button className="mobileInterface-button" onClick={this.shiftRight} title="Shift right">right</button>
+                <div>
+                    <div className="navbar">
+                        <FontAwesomeIcon className="home" icon="home" onClick={this.returnHome} />
+                        <div className="header" id="header">{this._homeDoc.title}</div>
+                        <div className="cover" id="cover" onClick={e => e.stopPropagation()}></div>
+                        <div className="toggle-btn" id="menuButton" onClick={this.toggleSidebar}>
+                            <span></span>
+                            <span></span>
+                            <span></span>
                         </div>
                     </div>
-                    <CollectionView
-                        Document={this.mainContainer}
-                        DataDoc={undefined}
-                        LibraryPath={emptyPath}
-                        filterAddDocument={returnTrue}
-                        fieldKey={""}
-                        dropAction={"alias"}
-                        bringToFront={emptyFunction}
-                        addDocTab={returnFalse}
-                        pinToPres={emptyFunction}
-                        PanelWidth={this.panelWidth}
-                        PanelHeight={this.panelHeight}
-                        NativeHeight={returnZero}
-                        NativeWidth={returnZero}
-                        focus={emptyFunction}
-                        isSelected={returnFalse}
-                        select={emptyFunction}
-                        active={returnFalse}
-                        ContentScaling={returnOne}
-                        whenActiveChanged={returnFalse}
-                        ScreenToLocalTransform={Transform.Identity}
-                        renderDepth={0}
-                        docFilters={returnEmptyFilter}
-                        ContainingCollectionView={undefined}
-                        ContainingCollectionDoc={undefined}
-                        rootSelected={returnTrue}>
-                    </CollectionView>
+                    {this.renderPathbar()}
                 </div>
             );
         }
+        // stores workspace documents as 'workspaces' variable
+        let workspaces = Cast(Doc.UserDoc().myWorkspaces, Doc) as Doc;
+        if (this._child) {
+            workspaces = this._child;
+        }
+        // returns a list of navbar buttons as 'buttons'
+        const buttons = DocListCast(workspaces.data).map((doc: Doc, index: any) => {
+            if (doc.type !== "ink") {
+                return (
+                    <div
+                        className="item"
+                        key={index}>
+                        <div className="item-title" onClick={() => this.handleClick(doc)}> {doc.title} </div>
+                        <div className="item-type" onClick={() => this.handleClick(doc)}>{doc.type}</div>
+                        <FontAwesomeIcon onClick={() => this.handleClick(doc)} className="right" icon="angle-right" size="lg" style={{ display: `${doc.type === "collection" ? "block" : "none"}` }} />
+                        <FontAwesomeIcon className="open" onClick={() => this.openFromSidebar(doc)} icon="external-link-alt" size="lg" />
+                    </div>
+                );
+            }
+        });
+
+        return (
+            <div>
+                <div className="navbar">
+                    <FontAwesomeIcon className="home" icon="home" onClick={this.returnHome} />
+                    <div className="header" id="header">{this._sidebarActive ? "library" : this._activeDoc.title}</div>
+                    <div className={`toggle-btn ${this._sidebarActive ? "active" : ""}`} onClick={this.toggleSidebar}>
+                        <span></span>
+                        <span></span>
+                        <span></span>
+                    </div>
+                    <div className={`background ${this._sidebarActive ? "active" : ""}`} onClick={this.toggleSidebar}></div>
+                </div>
+                {this.renderPathbar()}
+                <div className={`sidebar ${this._sidebarActive ? "active" : ""}`}>
+                    <div className="sidebarButtons">
+                        {this._child ?
+                            <>
+                                {buttons}
+                                <div
+                                    className="item" key="home"
+                                    onClick={this.returnMain}
+                                    style={{ opacity: 0.7 }}>
+                                    <FontAwesomeIcon className="right" icon="angle-double-left" size="lg" />
+                                    <div className="item-type">Return to workspaces</div>
+                                </div>
+                            </> :
+                            <>
+                                {buttons}
+                                <div
+                                    className="item"
+                                    style={{ opacity: 0.7 }}
+                                    onClick={() => this.createNewWorkspace()}>
+                                    <FontAwesomeIcon className="right" icon="plus" size="lg" />
+                                    <div className="item-type">Create New Workspace</div>
+                                </div>
+                            </>
+                        }
+                    </div>
+                </div>
+                <div className={`blanket ${this._sidebarActive ? "active" : ""}`} onClick={this.toggleSidebar}>
+                </div>
+            </div>
+        );
     }
 
-    upload = async (e: React.MouseEvent) => {
-        if (this.mainContainer) {
-            const data = Cast(this.mainContainer.data, listSpec(Doc));
-            if (data) {
-                const collectionDoc = await data[1]; // this should be the collection doc since the positions should be locked
-                const children = DocListCast(collectionDoc.data);
-                const uploadDoc = children.length === 1 ? children[0] : Docs.Create.StackingDocument(children, {
-                    title: "Mobile Upload Collection", backgroundColor: "white", lockedPosition: true, _width: 300, _height: 300
-                });
-                if (uploadDoc) {
-                    DocServer.Mobile.dispatchMobileDocumentUpload({
-                        docId: uploadDoc[Id],
-                    });
-                }
-            }
-        }
-        e.stopPropagation();
-        e.preventDefault();
+    /**
+     * Handles the 'Create New Workspace' button in the menu (taken from MainView.tsx)
+     */
+    @action
+    createNewWorkspace = async (id?: string) => {
+        const workspaces = Cast(Doc.UserDoc().myWorkspaces, Doc) as Doc;
+        const workspaceCount = DocListCast(workspaces.data).length + 1;
+        const freeformOptions: DocumentOptions = {
+            x: 0,
+            y: 400,
+            title: "Collection " + workspaceCount,
+        };
+        const freeformDoc = CurrentUserUtils.GuestTarget || Docs.Create.FreeformDocument([], freeformOptions);
+        const workspaceDoc = Docs.Create.StandardCollectionDockingDocument([{ doc: freeformDoc, initialWidth: 600, path: [Doc.UserDoc().myCatalog as Doc] }], { title: `Workspace ${workspaceCount}` }, id, "row");
+
+        const toggleTheme = ScriptField.MakeScript(`self.darkScheme = !self.darkScheme`);
+        const toggleComic = ScriptField.MakeScript(`toggleComicMode()`);
+        const cloneWorkspace = ScriptField.MakeScript(`cloneWorkspace()`);
+        workspaceDoc.contextMenuScripts = new List<ScriptField>([toggleTheme!, toggleComic!, cloneWorkspace!]);
+        workspaceDoc.contextMenuLabels = new List<string>(["Toggle Theme Colors", "Toggle Comic Mode", "New Workspace Layout"]);
+
+        Doc.AddDocToList(workspaces, "data", workspaceDoc);
     }
 
-    addWebToCollection = async () => {
-        let url = "https://en.wikipedia.org/wiki/Hedgehog";
-        if (this.mainContainer) {
-            const data = Cast(this.mainContainer.data, listSpec(Doc));
-            if (data) {
-                const webDoc = await data[0];
-                const urlField: FieldResult<WebField> = Cast(webDoc.data, WebField);
-                url = urlField ? urlField.url.toString() : "https://en.wikipedia.org/wiki/Hedgehog";
+    // Button for switching between pen and ink mode
+    @action
+    onSwitchInking = () => {
+        const button = document.getElementById("inkButton") as HTMLElement;
+        button.style.backgroundColor = this._ink ? "white" : "black";
+        button.style.color = this._ink ? "black" : "white";
 
-            }
-        }
-        Docs.Create.WebDocument(url, { _width: 300, _height: 300, title: "Mobile Upload Web Doc" });
-    }
-
-    clearUpload = async () => {
-        if (this.mainContainer) {
-            const data = Cast(this.mainContainer.data, listSpec(Doc));
-            if (data) {
-                const collectionDoc = await data[1];
-                const children = DocListCast(collectionDoc.data);
-                children.forEach(doc => {
-                });
-                // collectionDoc[data] = new List<Doc>();
-            }
+        if (!this._ink) {
+            Doc.SetSelectedTool(InkTool.Pen);
+            this._ink = true;
+        } else {
+            Doc.SetSelectedTool(InkTool.None);
+            this._ink = false;
         }
     }
 
-    renderUploadContent() {
-        if (this.mainContainer) {
+    // The static ink menu that appears at the top
+    @computed get inkMenu() {
+        return this._activeDoc._viewType !== CollectionViewType.Docking || !this._ink ? (null) :
+            <div className="colorSelector">
+                <InkOptionsMenu />
+            </div>;
+    }
+
+    // DocButton that uses UndoManager and handles the opacity change if CanUndo is true
+    @computed get undo() {
+        if (this.mainContainer && this._activeDoc.type === "collection" && this._activeDoc !== this._homeDoc &&
+            this._activeDoc !== Doc.UserDoc().rightSidebarCollection && this._activeDoc.title !== "WORKSPACES") {
             return (
-                <div className="mobileInterface" onDragOver={this.onDragOver}>
-                    <div className="mobileInterface-inkInterfaceButtons">
-                        <button className="mobileInterface-button cancel" onClick={this.onBack} title="Back">BACK</button>
-                        {/* <button className="mobileInterface-button" onClick={this.clearUpload} title="Clear Upload">CLEAR</button> */}
-                        {/* <button className="mobileInterface-button" onClick={this.addWeb} title="Add Web Doc to Upload Collection"></button> */}
-                        <button className="mobileInterface-button" onClick={this.upload} title="Upload">UPLOAD</button>
-                    </div>
-                    <DocumentView
-                        Document={this.mainContainer}
-                        DataDoc={undefined}
-                        LibraryPath={emptyPath}
-                        addDocument={returnFalse}
-                        addDocTab={returnFalse}
-                        pinToPres={emptyFunction}
-                        rootSelected={returnFalse}
-                        removeDocument={undefined}
-                        onClick={undefined}
-                        ScreenToLocalTransform={Transform.Identity}
-                        ContentScaling={returnOne}
-                        NativeHeight={returnZero}
-                        NativeWidth={returnZero}
-                        PanelWidth={() => window.screen.width}
-                        PanelHeight={() => window.screen.height}
-                        renderDepth={0}
-                        focus={emptyFunction}
-                        backgroundColor={returnEmptyString}
-                        parentActive={returnTrue}
-                        whenActiveChanged={emptyFunction}
-                        bringToFront={emptyFunction}
-                        docFilters={returnEmptyFilter}
-                        ContainingCollectionView={undefined}
-                        ContainingCollectionDoc={undefined} />
+                <div className="docButton"
+                    style={{ backgroundColor: "black", color: "white", fontSize: "60", opacity: UndoManager.CanUndo() ? "1" : "0.4", }}
+                    id="undoButton"
+                    title="undo"
+                    onClick={(e: React.MouseEvent) => {
+                        UndoManager.Undo();
+                        e.stopPropagation();
+                    }}>
+                    <FontAwesomeIcon className="documentdecorations-icon" size="sm" icon="undo-alt" />
+                </div>);
+        } else return (null);
+    }
+
+    // DocButton that uses UndoManager and handles the opacity change if CanRedo is true
+    @computed get redo() {
+        if (this.mainContainer && this._activeDoc.type === "collection" && this._activeDoc !== this._homeDoc &&
+            this._activeDoc !== Doc.UserDoc().rightSidebarCollection && this._activeDoc.title !== "WORKSPACES") {
+            return (
+                <div className="docButton"
+                    style={{ backgroundColor: "black", color: "white", fontSize: "60", opacity: UndoManager.CanRedo() ? "1" : "0.4", }}
+                    id="undoButton"
+                    title="redo"
+                    onClick={(e: React.MouseEvent) => {
+                        UndoManager.Redo();
+                        e.stopPropagation();
+                    }}>
+                    <FontAwesomeIcon className="documentdecorations-icon" size="sm" icon="redo-alt" />
+                </div>);
+        } else return (null);
+    }
+
+    // DocButton for switching into ink mode
+    @computed get drawInk() {
+        return !this.mainContainer || this._activeDoc._viewType !== CollectionViewType.Docking ? (null) :
+            <div className="docButton"
+                id="inkButton"
+                title={Doc.isDocPinned(this._activeDoc) ? "Pen on" : "Pen off"}
+                onClick={this.onSwitchInking}>
+                <FontAwesomeIcon className="documentdecorations-icon" size="sm" icon="pen-nib" />
+            </div>;
+    }
+
+    // DocButton: Button that appears on the bottom of the screen to initiate image upload
+    @computed get uploadImageButton() {
+        if (this._activeDoc.type === DocumentType.COL && this._activeDoc !== this._homeDoc && this._activeDoc._viewType !== CollectionViewType.Docking && this._activeDoc.title !== "WORKSPACES") {
+            return <div className="docButton"
+                id="imageButton"
+                title={Doc.isDocPinned(this._activeDoc) ? "Pen on" : "Pen off"}
+                onClick={this.toggleUpload}>
+                <FontAwesomeIcon className="documentdecorations-icon" size="sm" icon="upload" />
+            </div>;
+        } else return (null);
+    }
+
+    // DocButton to download images on the mobile
+    @computed get downloadDocument() {
+        if (this._activeDoc.type === "image" || this._activeDoc.type === "pdf" || this._activeDoc.type === "video") {
+            return <div className="docButton"
+                title={"Download Image"}
+                style={{ backgroundColor: "white", color: "black" }}
+                onClick={e => window.open(this._activeDoc["data-path"]?.toString())}> {/*  daa-path holds the url */}
+                <FontAwesomeIcon className="documentdecorations-icon" size="sm" icon="download" />
+            </div>;
+        } else return (null);
+    }
+
+    // DocButton for pinning images to presentation
+    @computed get pinToPresentation() {
+        // Only making button available if it is an image
+        if (!(this._activeDoc.type === "collection" || this._activeDoc.type === "presentation")) {
+            const isPinned = this._activeDoc && Doc.isDocPinned(this._activeDoc);
+            return <div className="docButton"
+                title={Doc.isDocPinned(this._activeDoc) ? "Unpin from presentation" : "Pin to presentation"}
+                style={{ backgroundColor: isPinned ? "black" : "white", color: isPinned ? "white" : "black" }}
+                onClick={e => DockedFrameRenderer.PinDoc(this._activeDoc, isPinned)}>
+                <FontAwesomeIcon className="documentdecorations-icon" size="sm" icon="map-pin" />
+            </div>;
+        } else return (null);
+    }
+
+    // Buttons for switching the menu between large and small icons
+    @computed get switchMenuView() {
+        return this._activeDoc.title !== this._homeDoc.title ? (null) :
+            <div className="homeSwitch">
+                <div className={`list ${!this._menuListView ? "active" : ""}`} onClick={this.changeToIconView}>
+                    <FontAwesomeIcon size="sm" icon="th-large" />
                 </div>
-            );
+                <div className={`list ${this._menuListView ? "active" : ""}`} onClick={this.changeToListView}>
+                    <FontAwesomeIcon size="sm" icon="bars" />
+                </div>
+            </div>;
+    }
+
+    // Logic for switching the menu into the icons
+    @action
+    changeToIconView = () => {
+        if (this._homeDoc._viewType = "stacking") {
+            this._menuListView = false;
+            this._homeDoc._viewType = "masonry";
+            this._homeDoc.columnWidth = 300;
+            this._homeDoc._columnWidth = 300;
+            const menuButtons = DocListCast(this._homeDoc.data);
+            menuButtons.map(doc => {
+                const buttonData = DocListCast(doc.data);
+                buttonData[1]._nativeWidth = 0.1;
+                buttonData[1]._width = 0.1;
+                buttonData[1]._dimMagnitude = 0;
+                buttonData[1]._opacity = 0;
+                doc._nativeWidth = 400;
+            });
         }
     }
 
+    // Logic for switching the menu into the stacking view
+    @action
+    changeToListView = () => {
+        if (this._homeDoc._viewType = "masonry") {
+            this._homeDoc._viewType = "stacking";
+            this._menuListView = true;
+            const menuButtons = DocListCast(this._homeDoc.data);
+            menuButtons.map(doc => {
+                const buttonData = DocListCast(doc.data);
+                buttonData[1]._nativeWidth = 450;
+                buttonData[1]._dimMagnitude = 2;
+                buttonData[1]._opacity = 1;
+                doc._nativeWidth = 900;
+            });
+        }
+    }
+
+    // For setting up the presentation document for the home menu
+    @action
+    setupDefaultPresentation = () => {
+        const presentation = Cast(Doc.UserDoc().activePresentation, Doc) as Doc;
+
+        if (presentation) {
+            this.switchCurrentView(presentation);
+            this._homeMenu = false;
+        }
+    }
+
+    // For toggling image upload pop up
+    @action
+    toggleUpload = () => this._imageUploadActive = !this._imageUploadActive
+
+    // For toggling audio record and dictate pop up
+    @action
+    toggleAudio = () => this._audioUploadActive = !this._audioUploadActive
+
+    // Button for toggling the upload pop up in a collection
+    @action
+    toggleUploadInCollection = () => {
+        const button = document.getElementById("imageButton") as HTMLElement;
+        button.style.backgroundColor = this._imageUploadActive ? "white" : "black";
+        button.style.color = this._imageUploadActive ? "black" : "white";
+
+        this._imageUploadActive = !this._imageUploadActive;
+    }
+
+    // For closing the image upload pop up
+    @action
+    closeUpload = () => {
+        this._imageUploadActive = false;
+    }
+
+    // Returns the image upload pop up
+    @computed get uploadImage() {
+        const doc = !this._homeMenu ? this._activeDoc : Cast(Doc.UserDoc().rightSidebarCollection, Doc) as Doc;
+        return <Uploader Document={doc} />;
+    }
+
+    // Radial menu can only be used if it is a colleciton and it is not a homeDoc 
+    // (and cannot be used on Workspace to avoid pin to presentation opening on right)
+    @computed get displayRadialMenu() {
+        return this._activeDoc.type === "collection" && this._activeDoc !== this._homeDoc &&
+            this._activeDoc._viewType !== CollectionViewType.Docking ? <RadialMenu /> : (null);
+    }
+
     onDragOver = (e: React.DragEvent) => {
         e.preventDefault();
         e.stopPropagation();
     }
 
+    /**
+     * MENU BUTTON
+     * Switch view from mobile menu to access the mobile uploads
+     * Global function name: openMobileUploads()
+     */
+    @action
+    switchToMobileUploads = () => {
+        const mobileUpload = Cast(Doc.UserDoc().rightSidebarCollection, Doc) as Doc;
+        this.switchCurrentView(mobileUpload);
+        this._homeMenu = false;
+    }
+
     render() {
-        // const content = this.currentView === "main" ? this.mainContent :
-        //     this.currentView === "ink" ? this.inkContent :
-        //         this.currentView === "upload" ? this.uploadContent : <></>;
         return (
             <div className="mobileInterface-container" onDragOver={this.onDragOver}>
-                {/* <DocumentDecorations />
-                <GestureOverlay>
-                    {this.renderView ? this.renderView() : this.renderDefaultContent()}
-                </GestureOverlay> */}
-
-                {/* <DictationOverlay />
-                <SharingManager />
-                <GoogleAuthenticationManager /> */}
-                <DocumentDecorations />
+                <SettingsManager />
+                <div className={`image-upload ${this._imageUploadActive ? "active" : ""}`}>
+                    {this.uploadImage}
+                </div>
+                <div className={`audio-upload ${this._audioUploadActive ? "active" : ""}`}>
+                    <AudioUpload />
+                </div>
+                {this.switchMenuView}
+                {this.inkMenu}
                 <GestureOverlay>
-                    {this.renderView ? this.renderView() : this.renderDefaultContent()}
+                    <div style={{ display: "none" }}><RichTextMenu key="rich" /></div>
+                    <div className="docButtonContainer">
+                        {this.pinToPresentation}
+                        {this.downloadDocument}
+                        {this.undo}
+                        {this.redo}
+                        {this.drawInk}
+                        {this.uploadImageButton}
+                    </div>
+                    {this.displayWorkspaces}
+                    {this.renderDefaultContent}
                 </GestureOverlay>
-                <PreviewCursor />
-                {/* <ContextMenu /> */}
-                <RadialMenu />
-                <RichTextMenu />
-                {/* <PDFMenu />
-                <MarqueeOptionsMenu />
-                <OverlayView /> */}
+                {this.displayRadialMenu}
             </div>
         );
     }
 }
 
-Scripting.addGlobal(function switchMobileView(doc: (userDoc: Doc) => Doc, renderView?: () => JSX.Element, onSwitch?: () => void) { return MobileInterface.Instance.switchCurrentView(doc, renderView, onSwitch); });
-Scripting.addGlobal(function onSwitchMobileInking() { return MobileInterface.Instance.onSwitchInking(); });
-Scripting.addGlobal(function renderMobileInking() { return MobileInterface.Instance.renderInkingContent(); });
-Scripting.addGlobal(function onSwitchMobileUpload() { return MobileInterface.Instance.onSwitchUpload(); });
-Scripting.addGlobal(function renderMobileUpload() { return MobileInterface.Instance.renderUploadContent(); });
-Scripting.addGlobal(function addWebToMobileUpload() { return MobileInterface.Instance.addWebToCollection(); });
 
+//Global functions for mobile menu
+Scripting.addGlobal(function switchToMobileLibrary() { return MobileInterface.Instance.switchToLibrary(); },
+    "opens the library to navigate through workspaces on Dash Mobile");
+Scripting.addGlobal(function openMobileUploads() { return MobileInterface.Instance.toggleUpload(); },
+    "opens the upload files menu for Dash Mobile");
+Scripting.addGlobal(function switchToMobileUploadCollection() { return MobileInterface.Instance.switchToMobileUploads(); },
+    "opens the mobile uploads collection on Dash Mobile");
+Scripting.addGlobal(function openMobileAudio() { return MobileInterface.Instance.toggleAudio(); },
+    "opens the record and dictate menu on Dash Mobile");
+Scripting.addGlobal(function switchToMobilePresentation() { return MobileInterface.Instance.setupDefaultPresentation(); },
+    "opens the presentation on Dash Mobile");
+Scripting.addGlobal(function openMobileSettings() { return SettingsManager.Instance.open(); },
+    "opens settings on Dash Mobile");
+
+// Other global functions for mobile
+Scripting.addGlobal(function switchMobileView(doc: Doc, renderView?: () => JSX.Element, onSwitch?: () => void) { return MobileInterface.Instance.switchCurrentView(doc, renderView, onSwitch); },
+    "changes the active document displayed on the Dash Mobile", "(doc: any)");
diff --git a/src/mobile/MobileMain.tsx b/src/mobile/MobileMain.tsx
new file mode 100644
index 000000000..3d4680d58
--- /dev/null
+++ b/src/mobile/MobileMain.tsx
@@ -0,0 +1,25 @@
+import { MobileInterface } from "./MobileInterface";
+import { Docs } from "../client/documents/Documents";
+import { CurrentUserUtils } from "../client/util/CurrentUserUtils";
+import * as ReactDOM from 'react-dom';
+import * as React from 'react';
+import { DocServer } from "../client/DocServer";
+import { AssignAllExtensions } from "../extensions/General/Extensions";
+
+AssignAllExtensions();
+
+(async () => {
+    const info = await CurrentUserUtils.loadCurrentUser();
+    DocServer.init(window.location.protocol, window.location.hostname, 4321, info.email + " (mobile)");
+    await Docs.Prototypes.initialize();
+    if (info.id !== "__guest__") {
+        // a guest will not have an id registered
+        await CurrentUserUtils.loadUserDocument(info);
+    }
+    document.getElementById('root')!.addEventListener('wheel', event => {
+        if (event.ctrlKey) {
+            event.preventDefault();
+        }
+    }, true);
+    ReactDOM.render(<MobileInterface />, document.getElementById('root'));
+})();
\ No newline at end of file
diff --git a/src/mobile/MobileMenu.scss b/src/mobile/MobileMenu.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/pen-gestures/ndollar.ts b/src/pen-gestures/ndollar.ts
index 9d42035d1..ecd8df3e7 100644
--- a/src/pen-gestures/ndollar.ts
+++ b/src/pen-gestures/ndollar.ts
@@ -552,7 +552,7 @@ function Distance(p1: any, p2: any) // distance between two points
 }
 function CalcStartUnitVector(points: any, index: any) // start angle from points[0] to points[index] normalized as a unit vector
 {
-    const v = new Point(points[index].X - points[0].X, points[index].Y - points[0].Y);
+    const v = new Point(points[index]?.X - points[0]?.X, points[index]?.Y - points[0]?.Y);
     const len = Math.sqrt(v.X * v.X + v.Y * v.Y);
     return new Point(v.X / len, v.Y / len);
 }
diff --git a/src/server/ApiManagers/PDFManager.ts b/src/server/ApiManagers/PDFManager.ts
index e028d628d..2b4212588 100644
--- a/src/server/ApiManagers/PDFManager.ts
+++ b/src/server/ApiManagers/PDFManager.ts
@@ -114,4 +114,4 @@ class NodeCanvasFactory {
         canvasAndContext.canvas = null;
         canvasAndContext.context = null;
     }
-}
\ No newline at end of file
+}
diff --git a/src/server/index.ts b/src/server/index.ts
index 590affd06..083173bb5 100644
--- a/src/server/index.ts
+++ b/src/server/index.ts
@@ -104,6 +104,7 @@ function routeSetter({ isRelease, addSupervisedRoute, logRegistrationOutcome }:
     const serve: PublicHandler = ({ req, res }) => {
         const detector = new mobileDetect(req.headers['user-agent'] || "");
         const filename = detector.mobile() !== null ? 'mobile/image.html' : 'index.html';
+        console.log(detector.is("iPhone"));
         res.sendFile(path.join(__dirname, '../../deploy/' + filename));
     };
 
diff --git a/webpack.config.js b/webpack.config.js
index bd1d3b5a9..a5fe6ad80 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -43,7 +43,7 @@ module.exports = {
         repl: ["./src/debug/Repl.tsx", 'webpack-hot-middleware/client?reload=true'],
         test: ["./src/debug/Test.tsx", 'webpack-hot-middleware/client?reload=true'],
         inkControls: ["./src/mobile/InkControls.tsx", 'webpack-hot-middleware/client?reload=true'],
-        imageUpload: ["./src/mobile/ImageUpload.tsx", 'webpack-hot-middleware/client?reload=true'],
+        mobileInterface: ["./src/mobile/MobileMain.tsx", 'webpack-hot-middleware/client?reload=true'],
     },
     optimization: {
         noEmitOnErrors: true
@@ -66,42 +66,42 @@ module.exports = {
     },
     module: {
         rules: [{
-            test: [/\.tsx?$/],
-            use: [{
-                loader: 'ts-loader',
-                options: {
-                    transpileOnly: true
-                }
-            }]
-        },
-        {
-            test: /\.scss|css$/,
-            use: [{
-                loader: "style-loader"
+                test: [/\.tsx?$/],
+                use: [{
+                    loader: 'ts-loader',
+                    options: {
+                        transpileOnly: true
+                    }
+                }]
             },
             {
-                loader: "css-loader"
+                test: /\.scss|css$/,
+                use: [{
+                        loader: "style-loader"
+                    },
+                    {
+                        loader: "css-loader"
+                    },
+                    {
+                        loader: "sass-loader"
+                    }
+                ]
             },
             {
-                loader: "sass-loader"
+                test: /\.(jpg|png|pdf)$/,
+                use: [{
+                    loader: 'file-loader'
+                }]
+            },
+            {
+                test: /\.(png|jpg|gif)$/i,
+                use: [{
+                    loader: 'url-loader',
+                    options: {
+                        limit: 8192
+                    }
+                }]
             }
-            ]
-        },
-        {
-            test: /\.(jpg|png|pdf)$/,
-            use: [{
-                loader: 'file-loader'
-            }]
-        },
-        {
-            test: /\.(png|jpg|gif)$/i,
-            use: [{
-                loader: 'url-loader',
-                options: {
-                    limit: 8192
-                }
-            }]
-        }
         ]
     },
     plugins,
-- 
cgit v1.2.3-70-g09d2


From 876437db1f7347787badbdd48ac751dba111a752 Mon Sep 17 00:00:00 2001
From: Melissa Zhang <mzhang19096@gmail.com>
Date: Wed, 8 Jul 2020 08:57:21 -0700
Subject: store hypothesis API tokens to database

---
 src/client/util/CurrentUserUtils.ts         |  2 +-
 src/server/ApiManagers/HypothesisManager.ts | 14 ++++-------
 src/server/database.ts                      | 39 ++++++++++++++++++++++++++++-
 3 files changed, 44 insertions(+), 11 deletions(-)

(limited to 'src/client/util')

diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index 8099228c6..cb2a025cb 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -424,7 +424,7 @@ export class CurrentUserUtils {
             { title: "Drag a document previewer", label: "Prev", icon: "expand", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory,true)', dragFactory: doc.emptyDocHolder as Doc },
             { title: "Toggle a Calculator REPL", label: "repl", icon: "calculator", click: 'addOverlayWindow("ScriptingRepl", { x: 300, y: 100, width: 200, height: 200, title: "Scripting REPL" })' },
             { title: "Connect a Google Account", label: "Google Account", icon: "external-link-alt", click: 'GoogleAuthenticationManager.Instance.fetchOrGenerateAccessToken(true)' },
-            { title: "Connect a Hypothesis Account", label: "Hypothesis Account", icon: "heading", click: 'HypothesisAuthenticationManager.Instance.fetchOrGenerateAccessToken(true)' },
+            { title: "Connect a Hypothesis Account", label: "Hypothesis Account", icon: "heading", click: 'HypothesisAuthenticationManager.Instance.fetchAccessToken(true)' },
         ];
 
     }
diff --git a/src/server/ApiManagers/HypothesisManager.ts b/src/server/ApiManagers/HypothesisManager.ts
index 33badbc42..73c707a55 100644
--- a/src/server/ApiManagers/HypothesisManager.ts
+++ b/src/server/ApiManagers/HypothesisManager.ts
@@ -13,11 +13,8 @@ export default class HypothesisManager extends ApiManager {
             method: Method.GET,
             subscription: "/readHypothesisAccessToken",
             secureHandler: async ({ user, res }) => {
-                if (existsSync(serverPathToFile(Directory.hypothesis, user.id))) {
-                    const read = readFileSync(serverPathToFile(Directory.hypothesis, user.id), "base64") || "";
-                    console.log("READ = " + read);
-                    res.send(read);
-                } else res.send("");
+                const credentials = await Database.Auxiliary.HypothesisAccessToken.Fetch(user.id);
+                res.send(credentials?.hypothesisApiKey ?? "");
             }
         });
 
@@ -25,9 +22,8 @@ export default class HypothesisManager extends ApiManager {
             method: Method.POST,
             subscription: "/writeHypothesisAccessToken",
             secureHandler: async ({ user, req, res }) => {
-                const write = req.body.authenticationCode;
-                console.log("WRITE = " + write);
-                res.send(await writeFile(serverPathToFile(Directory.hypothesis, user.id), write, "base64", () => { }));
+                await Database.Auxiliary.HypothesisAccessToken.Write(user.id, req.body.authenticationCode);
+                res.send();
             }
         });
 
@@ -35,7 +31,7 @@ export default class HypothesisManager extends ApiManager {
             method: Method.GET,
             subscription: "/revokeHypothesisAccessToken",
             secureHandler: async ({ user, res }) => {
-                await Database.Auxiliary.GoogleAccessToken.Revoke("dash-hyp-" + user.id);
+                await Database.Auxiliary.HypothesisAccessToken.Revoke(user.id);
                 res.send();
             }
         });
diff --git a/src/server/database.ts b/src/server/database.ts
index 2372cbcf2..7fbab357b 100644
--- a/src/server/database.ts
+++ b/src/server/database.ts
@@ -304,7 +304,8 @@ export namespace Database {
          */
         export enum AuxiliaryCollections {
             GooglePhotosUploadHistory = "uploadedFromGooglePhotos",
-            GoogleAccess = "googleAuthentication"
+            GoogleAccess = "googleAuthentication",
+            HypothesisAccess = "hypothesisAuthentication"
         }
 
         /**
@@ -405,6 +406,42 @@ export namespace Database {
 
         }
 
+        export namespace HypothesisAccessToken {
+            /**
+             * Format stored in database.
+             */
+            interface StoredCredentials {
+                userId: string;
+                hypothesisApiKey: string;
+                _id?: string;
+            }
+
+            /**
+             * Writes the @param enrichedCredentials to the database, associated
+             * with @param userId for later retrieval and updating. 
+             */
+            export const Write = async (userId: string, hypothesisApiKey: string) => {
+                return Instance.insert({ userId, hypothesisApiKey }, AuxiliaryCollections.HypothesisAccess);
+            };
+
+            /**
+             * Retrieves the credentials associaed with @param userId
+             * and optionally removes their database id according to @param removeId. 
+             */
+            export const Fetch = async (userId: string, removeId = true): Promise<Opt<StoredCredentials>> => {
+                return SanitizedSingletonQuery<StoredCredentials>({ userId }, AuxiliaryCollections.HypothesisAccess, removeId);
+            };
+
+            /**
+            * Revokes the credentials associated with @param userId. 
+            */
+            export const Revoke = async (userId: string) => {
+                const entry = await Fetch(userId, false);
+                if (entry) {
+                    Instance.delete({ _id: entry._id }, AuxiliaryCollections.HypothesisAccess);
+                }
+            };
+        }
     }
 
 }
-- 
cgit v1.2.3-70-g09d2


From d995b381343c9f286c80b5c8268e3697c05c2566 Mon Sep 17 00:00:00 2001
From: andy temp <andytemp@Kates-MBP.fios-router.home>
Date: Tue, 21 Jul 2020 18:04:16 -0400
Subject: search bar on topnpm start

---
 src/client/util/CurrentUserUtils.ts          | 13 ++++++++-
 src/client/views/MainView.tsx                | 42 ++++++++++++++++++++++++++++
 src/client/views/collections/SchemaTable.tsx |  2 +-
 3 files changed, 55 insertions(+), 2 deletions(-)

(limited to 'src/client/util')

diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index c152a4a64..582cc2d5c 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -657,7 +657,9 @@ export class CurrentUserUtils {
         const toolsBtn = await CurrentUserUtils.setupToolsBtnPanel(doc, sidebarContainer);
         const libraryBtn = CurrentUserUtils.setupLibraryPanel(doc, sidebarContainer);
         const searchBtn = CurrentUserUtils.setupSearchBtnPanel(doc, sidebarContainer);
-
+        if (doc["search-panel"] === undefined) {
+            doc["search-panel"] = new PrefetchProxy(Docs.Create.SearchDocument({ ignoreClick: true, childDropAction: "alias", lockedPosition: true, _viewType: CollectionViewType.Schema, title: "sidebar search stack", })) as any as Doc;
+    }
         // Finally, setup the list of buttons to display in the sidebar
         if (doc["tabs-buttons"] === undefined) {
             doc["tabs-buttons"] = new PrefetchProxy(Docs.Create.StackingDocument([libraryBtn, searchBtn, toolsBtn], {
@@ -666,6 +668,15 @@ export class CurrentUserUtils {
             }));
             (toolsBtn.onClick as ScriptField).script.run({ this: toolsBtn });
         }
+        
+        
+
+            // new PrefetchProxy(Docs.Create.StackingDocument([libraryBtn, searchBtn, toolsBtn], {
+            //     _width: 500, _height: 80, boxShadow: "0 0", _pivotField: "title", _columnsHideIfEmpty: true, ignoreClick: true, _chromeStatus: "view-mode",
+            //     title: "sidebar btn row stack", backgroundColor: "dimGray",
+            // }));
+        
+
     }
 
     static blist = (opts: DocumentOptions, docs: Doc[]) => new PrefetchProxy(Docs.Create.LinearDocument(docs, {
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index f6db1af66..c65c90afb 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -59,6 +59,7 @@ import { DocumentManager } from '../util/DocumentManager';
 import { DocumentLinksButton } from './nodes/DocumentLinksButton';
 import { LinkMenu } from './linking/LinkMenu';
 import { LinkDocPreview } from './nodes/LinkDocPreview';
+import { SearchBox } from './search/SearchBox';
 
 @observer
 export class MainView extends React.Component {
@@ -79,6 +80,8 @@ export class MainView extends React.Component {
     @computed private get mainContainer() { return this.userDoc ? FieldValue(Cast(this.userDoc.activeWorkspace, Doc)) : CurrentUserUtils.GuestWorkspace; }
     @computed public get mainFreeform(): Opt<Doc> { return (docs => (docs && docs.length > 1) ? docs[1] : undefined)(DocListCast(this.mainContainer!.data)); }
     @computed public get sidebarButtonsDoc() { return Cast(this.userDoc["tabs-buttons"], Doc) as Doc; }
+    @computed public get searchDoc() { return Cast(this.userDoc["search-panel"], Doc) as Doc; }
+
 
     public isPointerDown = false;
 
@@ -300,6 +303,39 @@ export class MainView extends React.Component {
             }
         }
     }
+
+    @computed get search() {
+        return <DocumentView Document={this.searchDoc!}
+            DataDoc={undefined}
+            LibraryPath={emptyPath}
+            addDocument={undefined}
+            addDocTab={this.addDocTabFunc}
+            pinToPres={emptyFunction}
+            rootSelected={returnTrue}
+            onClick={undefined}
+            backgroundColor={this.defaultBackgroundColors}
+            removeDocument={undefined}
+            ScreenToLocalTransform={Transform.Identity}
+            ContentScaling={returnOne}
+            NativeHeight={returnZero}
+            NativeWidth={returnZero}
+            PanelWidth={this.getPWidth}
+            PanelHeight={this.getPHeight}
+            renderDepth={0}
+            focus={emptyFunction}
+            parentActive={returnTrue}
+            whenActiveChanged={emptyFunction}
+            bringToFront={emptyFunction}
+            docFilters={returnEmptyFilter}
+            ContainingCollectionView={undefined}
+            ContainingCollectionDoc={undefined}
+        />;
+    }
+
+
+
+    
+
     @computed get mainDocView() {
         return <DocumentView Document={this.mainContainer!}
             DataDoc={undefined}
@@ -327,6 +363,7 @@ export class MainView extends React.Component {
             ContainingCollectionDoc={undefined}
         />;
     }
+
     @computed get dockingContent() {
         TraceMobx();
         const mainContainer = this.mainContainer;
@@ -461,6 +498,10 @@ export class MainView extends React.Component {
     @computed get mainContent() {
         const sidebar = this.userDoc?.["tabs-panelContainer"];
         return !this.userDoc || !(sidebar instanceof Doc) ? (null) : (
+            <div>
+            <div style={{height:"32px", width:"100%", backgroundColor:"black"}}>
+            {this.search}
+            </div> 
             <div className="mainView-mainContent" style={{
                 color: this.darkScheme ? "rgb(205,205,205)" : "black",
                 height: RichTextMenu.Instance?.Pinned ? `calc(100% - ${ANTIMODEMENU_HEIGHT})` : "100%"
@@ -488,6 +529,7 @@ export class MainView extends React.Component {
                     </div>
                     {this.dockingContent}
                 </div>
+            </div>
             </div>);
     }
 
diff --git a/src/client/views/collections/SchemaTable.tsx b/src/client/views/collections/SchemaTable.tsx
index e9f7e3c68..2b60bef1b 100644
--- a/src/client/views/collections/SchemaTable.tsx
+++ b/src/client/views/collections/SchemaTable.tsx
@@ -219,7 +219,7 @@ export class SchemaTable extends React.Component<SchemaTableProps> {
                         background: col.color, padding: "2px",
                         display: "flex", cursor: "default", height: "100%",
                     }}>
-                    <FontAwesomeIcon icon={icon} size="lg" style={{ display: "inline", paddingLeft: "7px" }} />
+                    <FontAwesomeIcon icon={icon} size="lg" style={{ display: "inline", paddingBottom: "1px", paddingTop:"4px" }} />
                     {/* <div className="keys-dropdown"
                         style={{ display: "inline", zIndex: 1000 }}> */}
                     {keysDropdown}
-- 
cgit v1.2.3-70-g09d2


From fd741cddf64fe1b068b7a1de5bc3840798afe75d Mon Sep 17 00:00:00 2001
From: andy temp <andytemp@Kates-MBP.fios-router.home>
Date: Wed, 22 Jul 2020 14:42:32 -0400
Subject: search results open and close as panel under bar

---
 src/client/util/CurrentUserUtils.ts                |  2 +-
 .../views/collections/CollectionSchemaView.tsx     |  2 +-
 src/client/views/collections/CollectionView.tsx    |  2 +-
 src/client/views/nodes/FieldView.tsx               |  2 ++
 src/client/views/search/SearchBox.scss             |  2 +-
 src/client/views/search/SearchBox.tsx              | 28 ++++++++++++++++++----
 6 files changed, 29 insertions(+), 9 deletions(-)

(limited to 'src/client/util')

diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index 582cc2d5c..f16ef399c 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -658,7 +658,7 @@ export class CurrentUserUtils {
         const libraryBtn = CurrentUserUtils.setupLibraryPanel(doc, sidebarContainer);
         const searchBtn = CurrentUserUtils.setupSearchBtnPanel(doc, sidebarContainer);
         if (doc["search-panel"] === undefined) {
-            doc["search-panel"] = new PrefetchProxy(Docs.Create.SearchDocument({ ignoreClick: true, childDropAction: "alias", lockedPosition: true, _viewType: CollectionViewType.Schema, title: "sidebar search stack", })) as any as Doc;
+            doc["search-panel"] = new PrefetchProxy(Docs.Create.SearchDocument({_width: 500, _height: 400, backgroundColor: "dimGray", ignoreClick: true, childDropAction: "alias", lockedPosition: true, _viewType: CollectionViewType.Schema, title: "sidebar search stack", })) as any as Doc;
     }
         // Finally, setup the list of buttons to display in the sidebar
         if (doc["tabs-buttons"] === undefined) {
diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx
index 50eea5059..be4f7c888 100644
--- a/src/client/views/collections/CollectionSchemaView.tsx
+++ b/src/client/views/collections/CollectionSchemaView.tsx
@@ -631,7 +631,7 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) {
         return <div className="collectionSchemaView-container"
             style={{
                 pointerEvents: !this.props.active() && !SnappingManager.GetIsDragging() ? "none" : undefined,
-                width: this.props.PanelWidth() || "100%", height: this.props.PanelHeight() || "100%"
+                width: this.props.PanelWidth() || "100%", height: this.props.PanelPosition === "absolute" ? this.props.PanelHeight() : this.props.PanelHeight()  || "100%", top: this.props.PanelPosition === "absolute" ? 32 : 0, position: this.props.PanelPosition || "relative",
             }}  >
             <div className="collectionSchemaView-tableContainer"
                 style={{ width: `calc(100% - ${this.previewWidth()}px)` }}
diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx
index 43bfbc913..0178cc2e9 100644
--- a/src/client/views/collections/CollectionView.tsx
+++ b/src/client/views/collections/CollectionView.tsx
@@ -554,7 +554,7 @@ export class CollectionView extends Touchable<FieldViewProps & CollectionViewCus
         return (<div className={"collectionView"} onContextMenu={this.onContextMenu}
             style={{ pointerEvents: this.props.Document.isBackground ? "none" : undefined, boxShadow }}>
             {this.showIsTagged()}
-            <div className="collectionView-facetCont" style={{ width: `calc(100% - ${this.facetWidth()}px)` }}>
+            <div className="collectionView-facetCont" style={{ display: this.props.PanelPosition==="absolute"? "flex" : "", justifyContent: this.props.PanelPosition==="absolute"? "center" : "", width: `calc(100% - ${this.facetWidth()}px)` }}>
                 {this.collectionViewType !== undefined ? this.SubView(this.collectionViewType, props) : (null)}
             </div>
             {this.lightbox(DocListCast(this.props.Document[this.props.fieldKey]).filter(d => d.type === DocumentType.IMG).map(d =>
diff --git a/src/client/views/nodes/FieldView.tsx b/src/client/views/nodes/FieldView.tsx
index 3aabd5d6b..8b83a29b2 100644
--- a/src/client/views/nodes/FieldView.tsx
+++ b/src/client/views/nodes/FieldView.tsx
@@ -48,10 +48,12 @@ export interface FieldViewProps {
     ignoreAutoHeight?: boolean;
     PanelWidth: () => number;
     PanelHeight: () => number;
+    PanelPosition: string;
     NativeHeight: () => number;
     NativeWidth: () => number;
     setVideoBox?: (player: VideoBox) => void;
     ContentScaling: () => number;
+
     ChromeHeight?: () => number;
     childLayoutTemplate?: () => Opt<Doc>;
     highlighting?: string[];
diff --git a/src/client/views/search/SearchBox.scss b/src/client/views/search/SearchBox.scss
index 4d057f782..8cd2f00b4 100644
--- a/src/client/views/search/SearchBox.scss
+++ b/src/client/views/search/SearchBox.scss
@@ -17,7 +17,7 @@
 .searchBox-bar {
     height: 32px;
     display: flex;
-    justify-content: flex-end;
+    justify-content: center;
     align-items: center;
     background-color: black;
     .searchBox-barChild {
diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx
index 884aa6a68..21f476ea4 100644
--- a/src/client/views/search/SearchBox.tsx
+++ b/src/client/views/search/SearchBox.tsx
@@ -199,13 +199,26 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
 
     enter = (e: React.KeyboardEvent) => {
         if (e.key === "Enter") {
-            if (this._icons !== this._allIcons) {
-                runInAction(() => { this.expandedBucket = false });
+            // if (this._icons !== this._allIcons) {
+            //     runInAction(() => { this.expandedBucket = false });
+            // }
+            console.log(StrCast(this.layoutDoc._searchString));
+            if (StrCast(this.layoutDoc._searchString)!==""){
+                console.log("OPEN");
+                runInAction(()=>{this.open=true});
+            }
+            else {
+                console.log("CLOSE");
+                runInAction(()=>{this.open=false});
+
             }
             this.submitSearch();
         }
     }
 
+    @observable open: boolean = false;
+
+
     public static async convertDataUri(imageUri: string, returnedFilename: string) {
         try {
             const posting = Utils.prepend("/uploadURI");
@@ -377,7 +390,6 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
     get fieldFiltersApplied() { return !(this._authorFieldStatus && this._titleFieldStatus); }
 
 
-    @observable expandedBucket: boolean = false;
     @action
     submitSearch = async (reset?: boolean) => {
         this.checkIcons();
@@ -1109,7 +1121,7 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
                     </span> */}
                     <input value={StrCast(this.layoutDoc._searchString)} 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={{ width: this._searchbarOpen ? "500px" : "100px" }} />
+                        style={{ width: this._searchbarOpen ? "200px" : "200px" }} />
                     {/* <button className="searchBox-barChild searchBox-filter" style={{ transform: "none" }} title="Advanced Filtering Options" onClick={() => this.handleFilterChange()}><FontAwesomeIcon icon="ellipsis-v" color="white" /></button> */}
                 </div>
                 <div id={`filterhead${this.props.Document[Id]}`} className="filter-form" style={this._filterOpen && this._numTotalResults > 0 ? { overflow: "visible" } : { overflow: "hidden" }}>
@@ -1123,12 +1135,18 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
                         {this.keyButtons}
                     </div>
                 </div>
+                <div style={{zIndex:2000}}>
                 {this.headerscale > 0 ? <CollectionView {...this.props}
                     Document={this.props.Document}
                     moveDocument={returnFalse}
                     removeDocument={returnFalse}
+                    PanelHeight={this.open===true?()=>200 :()=>0}
+                    PanelWidth={this.open===true? ()=>600 : ()=>0}
+                    PanelPosition={"absolute"}
                     focus={this.selectElement}
-                    ScreenToLocalTransform={Transform.Identity} /> : undefined}
+                    ScreenToLocalTransform={Transform.Identity}
+                     /> : undefined}
+                     </div>
 
                 <div className="searchBox-results" onScroll={this.resultsScrolled} style={{
                     display: this._resultsOpen ? "flex" : "none",
-- 
cgit v1.2.3-70-g09d2


From d4ff3975ee3b72a7869535bf8d9fc78039203aed Mon Sep 17 00:00:00 2001
From: andy temp <andytemp@Kates-MBP.fios-router.home>
Date: Wed, 22 Jul 2020 22:39:44 -0400
Subject: search

---
 src/client/util/CurrentUserUtils.ts                |  2 +-
 src/client/views/EditableView.tsx                  |  5 +-
 src/client/views/MainView.tsx                      | 14 ++++
 .../views/collections/CollectionSchemaCells.tsx    | 10 +--
 .../views/collections/CollectionSchemaHeaders.tsx  | 42 +++++++++-
 .../views/collections/CollectionSchemaView.tsx     |  5 +-
 src/client/views/collections/SchemaTable.tsx       |  6 +-
 src/client/views/nodes/FieldView.tsx               |  4 +-
 src/client/views/search/SearchBox.tsx              | 91 +++++++++++++++++-----
 9 files changed, 135 insertions(+), 44 deletions(-)

(limited to 'src/client/util')

diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index f16ef399c..c7cdf8545 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -658,7 +658,7 @@ export class CurrentUserUtils {
         const libraryBtn = CurrentUserUtils.setupLibraryPanel(doc, sidebarContainer);
         const searchBtn = CurrentUserUtils.setupSearchBtnPanel(doc, sidebarContainer);
         if (doc["search-panel"] === undefined) {
-            doc["search-panel"] = new PrefetchProxy(Docs.Create.SearchDocument({_width: 500, _height: 400, backgroundColor: "dimGray", ignoreClick: true, childDropAction: "alias", lockedPosition: true, _viewType: CollectionViewType.Schema, title: "sidebar search stack", })) as any as Doc;
+            doc["search-panel"] = new PrefetchProxy(Docs.Create.SearchDocument({_width: 500, _height: 400, backgroundColor: "dimGray", ignoreClick: true, childDropAction: "alias", lockedPosition: true, _viewType: CollectionViewType.Schema, _chromeStatus: "disabled", title: "sidebar search stack", })) as any as Doc;
     }
         // Finally, setup the list of buttons to display in the sidebar
         if (doc["tabs-buttons"] === undefined) {
diff --git a/src/client/views/EditableView.tsx b/src/client/views/EditableView.tsx
index 4c2d2f0a9..b78ed6fee 100644
--- a/src/client/views/EditableView.tsx
+++ b/src/client/views/EditableView.tsx
@@ -195,15 +195,13 @@ export class EditableView extends React.Component<EditableProps> {
         if (this.props.positions!==undefined){
         let positions = this.props.positions;
         let length = this.props.search!.length;
-        console.log(contents);
-        console.log(this.props.contents?.valueOf());
+
         // contents = String(this.props.contents.valueOf());
 
         results.push(<span style={{ fontStyle: this.props.fontStyle, fontSize: this.props.fontSize, color: this.props.contents ? "black" : "grey" }}>{contents ? contents.slice(0, this.props.positions![0]) : this.props.placeholder?.valueOf()}</span>);
         positions.forEach((num, cur) => {
             results.push(<span style={{ backgroundColor: "#FFFF00", fontStyle: this.props.fontStyle, fontSize: this.props.fontSize, color: this.props.contents ? "black" : "grey" }}>{contents ? contents.slice(num, num + length) : this.props.placeholder?.valueOf()}</span>);
             let end = 0;
-            console.log
             cur === positions.length-1? end = contents.length: end = positions[cur + 1];
             results.push(<span style={{ fontStyle: this.props.fontStyle, fontSize: this.props.fontSize, color: this.props.contents ? "black" : "grey" }}>{contents ? contents.slice(num + length, end) : this.props.placeholder?.valueOf()}</span>);
         }
@@ -217,7 +215,6 @@ else{
     }
 
     render() {
-        console.log(this.props.highlight === undefined);
         if (this._editing && this.props.GetValue() !== undefined) {
             return this.props.sizeToContent ?
                 <div style={{ display: "grid", minWidth: 100 }}>
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index c65c90afb..fce3707a7 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -156,10 +156,24 @@ export class MainView extends React.Component {
         const targets = document.elementsFromPoint(e.x, e.y);
         if (targets && targets.length && targets[0].className.toString().indexOf("contextMenu") === -1) {
             ContextMenu.Instance.closeMenu();
+            //SearchBox.Instance.closeSearch();
         }
         if (targets && (targets.length && targets[0].className.toString() !== "timeline-menu-desc" && targets[0].className.toString() !== "timeline-menu-item" && targets[0].className.toString() !== "timeline-menu-input")) {
             TimelineMenu.Instance.closeMenu();
         }
+        if (targets && targets.length && SearchBox.Instance._searchbarOpen){
+            let check = false;
+            targets.forEach((thing)=>{
+            if (thing.className.toString()==="collectionSchemaView-table" || thing.className.toString()==="beta") {
+                check=true;
+            }
+        });
+        if (check===false){
+            SearchBox.Instance.closeSearch();
+        }
+    }
+
+
     });
 
     globalPointerUp = () => this.isPointerDown = false;
diff --git a/src/client/views/collections/CollectionSchemaCells.tsx b/src/client/views/collections/CollectionSchemaCells.tsx
index b1c3705ca..11f0edf23 100644
--- a/src/client/views/collections/CollectionSchemaCells.tsx
+++ b/src/client/views/collections/CollectionSchemaCells.tsx
@@ -246,7 +246,6 @@ export class CollectionSchemaCell extends React.Component<CellProps> {
         trace();
         let positions = [];
         if (StrCast(this.props.Document._searchString) !== "") {
-            console.log(StrCast(this.props.Document._searchString));
             const cfield = ComputedField.WithoutComputed(() => FieldValue(props.Document[props.fieldKey]));
             let term = "";
             if (cfield!==undefined){
@@ -262,7 +261,6 @@ export class CollectionSchemaCell extends React.Component<CellProps> {
             }
             let search = StrCast(this.props.Document._searchString)
             let start = term.indexOf(search) as number;
-            console.log(start);
             let tally = 0;
             if (start!==-1){
             positions.push(start);
@@ -277,7 +275,6 @@ export class CollectionSchemaCell extends React.Component<CellProps> {
                 positions.pop();
             }
         }
-        console.log(positions.length);
         return (
             <div className="collectionSchemaView-cellContainer" style={{ cursor: fieldIsDoc ? "grab" : "auto" }} ref={dragRef} onPointerDown={this.onPointerDown} onPointerEnter={onPointerEnter} onPointerLeave={onPointerLeave}>
                 <div className={className} ref={this._focusRef} onPointerDown={onItemDown} tabIndex={-1}>
@@ -299,18 +296,14 @@ export class CollectionSchemaCell extends React.Component<CellProps> {
                                 //     return "0";
                                 // } else {
                                     const cfield = ComputedField.WithoutComputed(() => FieldValue(props.Document[props.fieldKey]));
-                                    console.log(cfield);
                                     if (cfield!==undefined){
                                     if (cfield.Text!==undefined){
-                                        console.log
-                                        return(cfield.Text)
+                                        return(cfield.Text);
                                     }
                                     else if (StrCast(cfield)){
-                                        console.log("strcast");
                                         return StrCast(cfield);
                                     }
                                     else {
-                                        console.log("numcast");
                                         return String(NumCast(cfield));
                                     }
                                 }
@@ -325,7 +318,6 @@ export class CollectionSchemaCell extends React.Component<CellProps> {
                                     return "0";
                                 } else {
                                     const cfield = ComputedField.WithoutComputed(() => FieldValue(props.Document[props.fieldKey]));
-                                    console.log(cfield);
                                     if (type === "number") {
                                         return StrCast(cfield);
                                     }
diff --git a/src/client/views/collections/CollectionSchemaHeaders.tsx b/src/client/views/collections/CollectionSchemaHeaders.tsx
index 4a9bd4aa6..ec8605215 100644
--- a/src/client/views/collections/CollectionSchemaHeaders.tsx
+++ b/src/client/views/collections/CollectionSchemaHeaders.tsx
@@ -9,6 +9,8 @@ import { ColumnType } from "./CollectionSchemaView";
 import { faFile } from "@fortawesome/free-regular-svg-icons";
 import { SchemaHeaderField, PastelSchemaPalette } from "../../../fields/SchemaHeaderField";
 import { undoBatch } from "../../util/UndoManager";
+import { Doc } from "../../../fields/Doc";
+import { StrCast } from "../../../fields/Types";
 const higflyout = require("@hig/flyout");
 export const { anchorPoints } = higflyout;
 export const Flyout = higflyout.default;
@@ -291,6 +293,7 @@ export interface KeysDropdownProps {
     onSelect: (oldKey: string, newKey: string, addnew: boolean, filter?: string) => void;
     setIsEditing: (isEditing: boolean) => void;
     width?: string;
+    docs?: Doc[];
 }
 @observer
 export class KeysDropdown extends React.Component<KeysDropdownProps> {
@@ -309,7 +312,6 @@ export class KeysDropdown extends React.Component<KeysDropdownProps> {
         if (key.slice(0, this._key.length) === this._key && this._key !== key) {
             let filter = key.slice(this._key.length - key.length);
             this.props.onSelect(this._key, this._key, this.props.addNew, filter);
-            console.log("YEE");
         }
         else {
             this.props.onSelect(this._key, key, this.props.addNew);
@@ -319,6 +321,13 @@ export class KeysDropdown extends React.Component<KeysDropdownProps> {
         }
     }
 
+    @action
+    onSelect2 = (key: string): void => {
+        this._searchTerm=this._searchTerm.slice(0,this._key.length) +key;
+        this._isOpen = false;
+
+    }
+
     @undoBatch
     onKeyDown = (e: React.KeyboardEvent): void => {
         //if (this._key !==)
@@ -394,7 +403,35 @@ export class KeysDropdown extends React.Component<KeysDropdownProps> {
         return options;
     }
 
+    renderFilterOptions = (): JSX.Element[] | JSX.Element => {
+        console.log("HEHEHE")
+        if (!this._isOpen) return <></>;
+
+        const keyOptions:string[]=[];
+        console.log(this._searchTerm.slice(this._key.length))
+        let temp = this._searchTerm.slice(this._key.length);
+        this.props.docs?.forEach((doc)=>{
+            let key = StrCast(doc[this._key]);
+            if (keyOptions.includes(key)===false && key.includes(temp)){
+            keyOptions.push(key);
+            }
+        });
+
+
+        const options = keyOptions.map(key => {
+            return <div key={key} className="key-option" style={{
+                border: "1px solid lightgray",
+                width: this.props.width, maxWidth: this.props.width, overflowX: "hidden"
+            }}
+                onPointerDown={e => e.stopPropagation()} onClick={() => { this.onSelect2(key);  }}>{key}</div>;
+        });
+
+        return options;
+    }
+
+
     render() {
+        console.log(this.props.docs);
         return (
             <div className="keys-dropdown" style={{ zIndex: 10, width: this.props.width, maxWidth: this.props.width }}>
                 {this._key === this._searchTerm.slice(0, this._key.length) ?
@@ -414,7 +451,8 @@ export class KeysDropdown extends React.Component<KeysDropdownProps> {
                     width: this.props.width, maxWidth: this.props.width,
                 }}
                     onPointerEnter={this.onPointerEnter} onPointerLeave={this.onPointerOut}>
-                    {this.renderOptions()}
+                    {this._key === this._searchTerm.slice(0, this._key.length) ?
+                    this.renderFilterOptions():this.renderOptions()}
                 </div>
             </div >
         );
diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx
index be4f7c888..0b3d8e20d 100644
--- a/src/client/views/collections/CollectionSchemaView.tsx
+++ b/src/client/views/collections/CollectionSchemaView.tsx
@@ -609,7 +609,6 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) {
 
 
     onKeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => {
-        console.log("yeet2");
     }
     render() {
         TraceMobx();
@@ -631,10 +630,10 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) {
         return <div className="collectionSchemaView-container"
             style={{
                 pointerEvents: !this.props.active() && !SnappingManager.GetIsDragging() ? "none" : undefined,
-                width: this.props.PanelWidth() || "100%", height: this.props.PanelPosition === "absolute" ? this.props.PanelHeight() : this.props.PanelHeight()  || "100%", top: this.props.PanelPosition === "absolute" ? 32 : 0, position: this.props.PanelPosition || "relative",
+                width: this.props.PanelWidth() || "100%", height: this.props.PanelPosition === "absolute" ? this.props.PanelHeight() : this.props.PanelHeight()  || "100%", top: this.props.PanelPosition === "absolute" ? 52 : 0, position: this.props.PanelPosition || "relative",
             }}  >
             <div className="collectionSchemaView-tableContainer"
-                style={{ width: `calc(100% - ${this.previewWidth()}px)` }}
+                style={{ backgroundColor:"white", width: `calc(100% - ${this.previewWidth()}px)` }}
                 onKeyPress={this.onKeyPress}
                 onPointerDown={this.onPointerDown}
                 onWheel={e => this.props.active(true) && e.stopPropagation()}
diff --git a/src/client/views/collections/SchemaTable.tsx b/src/client/views/collections/SchemaTable.tsx
index 2b60bef1b..c820cb661 100644
--- a/src/client/views/collections/SchemaTable.tsx
+++ b/src/client/views/collections/SchemaTable.tsx
@@ -189,7 +189,7 @@ export class SchemaTable extends React.Component<SchemaTableProps> {
                 addNew={false}
                 onSelect={this.props.changeColumns}
                 setIsEditing={this.props.setHeaderIsEditing}
-
+                docs={this.props.childDocs}
                 // try commenting this out
                 width={"100%"}
             />;
@@ -451,10 +451,8 @@ export class SchemaTable extends React.Component<SchemaTableProps> {
         //@ts-ignore
         expandedRowsList.forEach(row => expanded[row] = true);
         const rerender = [...this.textWrappedRows]; // TODO: get component to rerender on text wrap change without needign to console.log :((((
-        let overflow = "auto";
-        StrCast(this.props.Document.type) === "search" ? overflow = "overlay" : "auto";
         return <ReactTable
-            style={{ position: "relative", overflow: overflow }}
+            style={{ position: "relative" }}
             data={children}
             page={0}
             pageSize={children.length}
diff --git a/src/client/views/nodes/FieldView.tsx b/src/client/views/nodes/FieldView.tsx
index 8b83a29b2..732a254fe 100644
--- a/src/client/views/nodes/FieldView.tsx
+++ b/src/client/views/nodes/FieldView.tsx
@@ -46,8 +46,8 @@ export interface FieldViewProps {
     dontRegisterView?: boolean;
     focus: (doc: Doc) => void;
     ignoreAutoHeight?: boolean;
-    PanelWidth: () => number;
-    PanelHeight: () => number;
+    PanelWidth: () => number|string;
+    PanelHeight: () => number|string;
     PanelPosition: string;
     NativeHeight: () => number;
     NativeWidth: () => number;
diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx
index 21f476ea4..ee85375e3 100644
--- a/src/client/views/search/SearchBox.tsx
+++ b/src/client/views/search/SearchBox.tsx
@@ -73,7 +73,7 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
     @computed get _searchString() { return this.layoutDoc.searchQuery; }
     @computed set _searchString(value) { this.layoutDoc.searchQuery = (value); }
     @observable private _resultsOpen: boolean = false;
-    @observable private _searchbarOpen: boolean = false;
+    @observable _searchbarOpen: boolean = false;
     @observable private _results: [Doc, string[], string[]][] = [];
     @observable private _openNoResults: boolean = false;
     @observable private _visibleElements: JSX.Element[] = [];
@@ -183,10 +183,16 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
     @action
     getViews = (doc: Doc) => SearchUtil.GetViewsOfDocument(doc)
 
+
+    @observable newsearchstring: string ="";
     @action.bound
     onChange(e: React.ChangeEvent<HTMLInputElement>) {
-        this.layoutDoc._searchString = e.target.value;
-
+        //this.layoutDoc._searchString = e.target.value;
+        this.newsearchstring= e.target.value;
+        if (e.target.value===""){
+            console.log("CLOSE");
+            runInAction(()=>{this.open=false});
+        }
         this._openNoResults = false;
         this._results = [];
         this._resultsSet.clear();
@@ -199,10 +205,11 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
 
     enter = (e: React.KeyboardEvent) => {
         if (e.key === "Enter") {
+            console.log(this.newsearchstring)
+            this.layoutDoc._searchString=this.newsearchstring;
             // if (this._icons !== this._allIcons) {
             //     runInAction(() => { this.expandedBucket = false });
             // }
-            console.log(StrCast(this.layoutDoc._searchString));
             if (StrCast(this.layoutDoc._searchString)!==""){
                 console.log("OPEN");
                 runInAction(()=>{this.open=true});
@@ -392,11 +399,15 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
 
     @action
     submitSearch = async (reset?: boolean) => {
+        
         this.checkIcons();
         if (reset) {
             this.layoutDoc._searchString = "";
         }
+        this.noresults= false;
         this.dataDoc[this.fieldKey] = new List<Doc>([]);
+        this.headercount=0;
+        this.children=0;
         this.buckets = [];
         this.new_buckets = {};
         const query = StrCast(this.layoutDoc._searchString);
@@ -519,7 +530,7 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
         });
         return this.lockPromise;
     }
-
+    @observable noresults = false;
     collectionRef = React.createRef<HTMLSpanElement>();
     startDragCollection = async () => {
         const res = await this.getAllResults(this.getFinalQuery(StrCast(this.layoutDoc._searchString)));
@@ -591,6 +602,7 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
         this._curRequest = undefined;
     }
 
+    @observable children: number =0;
     @action
     resultsScrolled = (e?: React.UIEvent<HTMLDivElement>) => {
         if (!this._resultsRef.current) return;
@@ -604,11 +616,7 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
         this._endIndex = 30;
         let headers = new Set<string>();
         if ((this._numTotalResults === 0 || this._results.length === 0) && this._openNoResults) {
-            this._visibleElements = [<div className="no-result">No Search Results</div>];
-            //this._visibleDocuments= Docs.Create.
-            let noResult = Docs.Create.TextDocument("", { title: "noResult" })
-            noResult.isBucket = false;
-            Doc.AddDocToList(this.dataDoc, this.props.fieldKey, noResult);
+            this.noresults=true;
             return;
         }
 
@@ -653,6 +661,7 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
                             this._visibleDocuments[i] = result[0];
                             this._isSearch[i] = "search";
                             Doc.AddDocToList(this.dataDoc, this.props.fieldKey, result[0]);
+                            this.children ++;
                         }
                     }
                     else {
@@ -669,6 +678,7 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
                                 this._isSearch[i] = "search";
                                 console.log("WHYYYY");
                                 Doc.AddDocToList(this.dataDoc, this.props.fieldKey, result[0]);
+                                this.children ++;
 
                             }
                         }
@@ -681,6 +691,7 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
         let schemaheaders: SchemaHeaderField[] = [];
         this.headerscale = headers.size;
         headers.forEach((item) => schemaheaders.push(new SchemaHeaderField(item, "#f1efeb")))
+        this.headercount= schemaheaders.length;
         this.props.Document._schemaHeaders = new List<SchemaHeaderField>(schemaheaders);
         if (this._maxSearchIndex >= this._numTotalResults) {
             this._visibleElements.length = this._results.length;
@@ -688,7 +699,7 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
             this._isSearch.length = this._results.length;
         }
     }
-
+    @observable headercount:number=0;
     @observable headerscale: number = 0;
 
     findCommonElements(arr2: string[]) {
@@ -1112,16 +1123,24 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
     }
     //Make id layour document
     render() {
+        this.props.Document._chromeStatus === "disabled";
         this.props.Document._searchDoc = true;
+        //let length = Cast(this.props.Document._schemaHeaders, listSpec(SchemaHeaderField), []).length;
+        let length = this.headercount;
+        length > 3 ? length = 650 : length = length * 205 + 51;
+        let height = this.children;
+        height > 8 ? height = 31+31*8: height = 31*height+ 31; 
         return (
             <div style={{ pointerEvents: "all" }} className="searchBox-container">
                 <div className="searchBox-bar">
                     {/* <span className="searchBox-barChild searchBox-collection" onPointerDown={SetupDrag(this.collectionRef, () => StrCast(this.layoutDoc._searchString) ? this.startDragCollection() : undefined)} ref={this.collectionRef} title="Drag Results as Collection">
                         <FontAwesomeIcon icon="object-group" size="lg" />
                     </span> */}
-                    <input value={StrCast(this.layoutDoc._searchString)} onChange={this.onChange} type="text" placeholder="Search..." id="search-input" ref={this.inputRef}
+                    <div style={{position:"absolute", left:15}}>{Doc.CurrentUserEmail}</div>
+                    <FontAwesomeIcon icon={"search"} size="lg" style={{ position:"relative", left:24, padding:1 }} />
+                    <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={{ width: this._searchbarOpen ? "200px" : "200px" }} />
+                        style={{ paddingLeft:23, width: this._searchbarOpen ? "200px" : "200px" }} />
                     {/* <button className="searchBox-barChild searchBox-filter" style={{ transform: "none" }} title="Advanced Filtering Options" onClick={() => this.handleFilterChange()}><FontAwesomeIcon icon="ellipsis-v" color="white" /></button> */}
                 </div>
                 <div id={`filterhead${this.props.Document[Id]}`} className="filter-form" style={this._filterOpen && this._numTotalResults > 0 ? { overflow: "visible" } : { overflow: "hidden" }}>
@@ -1135,18 +1154,52 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
                         {this.keyButtons}
                     </div>
                 </div>
-                <div style={{zIndex:2000}}>
-                {this.headerscale > 0 ? <CollectionView {...this.props}
+                <div style={{ zIndex:2000}}>
+                {this._searchbarOpen === true ? 
+                <div style={{display:"flex", justifyContent:"center",}}>
+                <div style={{width: this.headercount>0?length: 251,
+                height: 25,
+                borderColor: "#9c9396",
+                border: "1px solid",
+                borderRadius:"0.3em",
+                borderBottom:this.open===false?"1px solid":"none",
+                position: "absolute",
+                background: "rgb(241, 239, 235)",
+                top:29}}>                 
+                    <form className="beta" style={{justifyContent:"space-evenly", display:"flex"}}><label>
+      <input
+        type="radio"
+      />
+      Current collection 
+    </label>
+    <label>
+      <input
+        type="radio"
+      />
+      Workspace
+    </label>
+    <label>
+      <input
+        type="radio"
+      />
+      Database
+    </label></form>           
+                </div>
+
+                {this.noresults===false? <div style={{display:this.open===true? "contents":"none"}}> <CollectionView {...this.props}
                     Document={this.props.Document}
                     moveDocument={returnFalse}
                     removeDocument={returnFalse}
-                    PanelHeight={this.open===true?()=>200 :()=>0}
-                    PanelWidth={this.open===true? ()=>600 : ()=>0}
+                    PanelHeight={this.open===true?()=> height:()=>0}
+                    PanelWidth={this.open===true? ()=>length : ()=>0}
                     PanelPosition={"absolute"}
                     focus={this.selectElement}
                     ScreenToLocalTransform={Transform.Identity}
-                     /> : undefined}
-                     </div>
+                     /></div>: <div style={{display:"flex",justifyContent:"center"}}><div style={{height:200, top:29, width:250, position:"absolute", backgroundColor:"white", display:"flex", justifyContent:"center", alignItems    :"center", border: "black 1px solid", }}>
+                     <div>No search results :(</div>
+                     </div></div>}
+                     </div>: undefined}
+                </div>
 
                 <div className="searchBox-results" onScroll={this.resultsScrolled} style={{
                     display: this._resultsOpen ? "flex" : "none",
-- 
cgit v1.2.3-70-g09d2


From bdb52eb3090cae3f146a6777f18d53f54d1e1d0f Mon Sep 17 00:00:00 2001
From: Geireann Lindfield Roberts <60007097+geireann@users.noreply.github.com>
Date: Tue, 28 Jul 2020 23:48:12 +0800
Subject: scrollProgressivize + viewfinder

---
 src/client/util/DocumentManager.ts                 |   4 +
 src/client/views/.DS_Store                         | Bin 6148 -> 6148 bytes
 .../views/collections/CollectionDockingView.scss   |  62 +++
 .../views/collections/CollectionDockingView.tsx    |  24 ++
 .../collectionFreeForm/CollectionFreeFormView.tsx  |   4 +-
 .../views/nodes/CollectionFreeFormDocumentView.tsx |  42 +-
 src/client/views/nodes/PresBox.scss                | 118 +++++-
 src/client/views/nodes/PresBox.tsx                 | 436 +++++++++++++++------
 .../views/presentationview/PresElementBox.tsx      |   6 +-
 9 files changed, 550 insertions(+), 146 deletions(-)

(limited to 'src/client/util')

diff --git a/src/client/util/DocumentManager.ts b/src/client/util/DocumentManager.ts
index 237ea7675..d18eac374 100644
--- a/src/client/util/DocumentManager.ts
+++ b/src/client/util/DocumentManager.ts
@@ -127,6 +127,10 @@ export class DocumentManager {
         CollectionDockingView.AddRightSplit(doc);
         finished?.();
     }
+    // static openInPlace = (doc: Doc, finished?: () => void) => {
+    //     CollectionDockingView.AddTab(doc);
+    //     finished?.();
+    // }
     public jumpToDocument = async (
         targetDoc: Doc,        // document to display
         willZoom: boolean,     // whether to zoom doc to take up most of screen
diff --git a/src/client/views/.DS_Store b/src/client/views/.DS_Store
index 3717a2923..3ce88292c 100644
Binary files a/src/client/views/.DS_Store and b/src/client/views/.DS_Store differ
diff --git a/src/client/views/collections/CollectionDockingView.scss b/src/client/views/collections/CollectionDockingView.scss
index 1895c06a1..9b14df760 100644
--- a/src/client/views/collections/CollectionDockingView.scss
+++ b/src/client/views/collections/CollectionDockingView.scss
@@ -18,6 +18,68 @@
         }
     }
 }
+
+.miniPres:hover {
+    opacity: 1;
+}
+
+.miniPres {
+    position: absolute;
+    overflow: hidden;
+    right: 10;
+    top: 10;
+    opacity: 0.1;
+    transition: all 0.4s;
+    /* border: solid 1px; */
+    color: white;
+    /* box-shadow: black 0.4vw 0.4vw 0.8vw; */
+    
+    .miniPresOverlay {
+        display: grid;
+        grid-template-columns: auto auto auto auto auto auto auto auto;
+        grid-template-rows: 100%;
+        height: 100%;
+        justify-items: center;
+        align-items: center;
+
+        .miniPres-button-text {
+            display: flex;
+            height: 30;
+            font-weight: 400;
+            min-width: 100%;
+            border-radius: 5px;
+            align-items: center;
+            justify-content: center;
+            transition: all 0.3s;
+        }
+
+        .miniPres-divider {
+            width: 1px;
+            height: 80%;
+            border-right: solid 2px #5a5a5a;
+        }
+
+        .miniPres-button {
+            display: flex;
+            height: 30;
+            min-width: 30;
+            border-radius: 100%;
+            align-items: center;
+            justify-content: center;
+            transition: all 0.3s;
+        }
+
+        .miniPres-button:hover {
+            background-color: #5a5a5a;
+        }
+
+        .miniPres-button-text:hover {
+            background-color: #5a5a5a;
+        }
+    }
+}
+
+
 .lm_title {
     margin-top: 3px;
     border-radius: 5px;
diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx
index 53b2d5254..b82a33bd8 100644
--- a/src/client/views/collections/CollectionDockingView.tsx
+++ b/src/client/views/collections/CollectionDockingView.tsx
@@ -31,6 +31,8 @@ import { SnappingManager } from '../../util/SnappingManager';
 import { CollectionFreeFormView } from './collectionFreeForm/CollectionFreeFormView';
 import { listSpec } from '../../../fields/Schema';
 import { clamp } from 'lodash';
+import { PresBox } from '../nodes/PresBox';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 const _global = (window /* browser */ || global /* node */) as any;
 
 @observer
@@ -838,6 +840,27 @@ export class DockedFrameRenderer extends React.Component<DockedFrameProps> {
             return false;
         }), emptyFunction, emptyFunction);
     }
+    getCurrentFrame = (): number => {
+        const presTargetDoc = Cast(PresBox.Instance.childDocs[PresBox.Instance.itemIndex].presentationTargetDoc, Doc, null);
+        const currentFrame = Cast(presTargetDoc.currentFrame, "number", null);
+        return currentFrame;
+    }
+    renderMiniPres() {
+        return <div className="miniPres" style={{
+            width: 400, height: 50, background: '#323232'
+        }}>
+            <div className="miniPresOverlay" >
+                <div className="miniPres-button" onClick={PresBox.Instance.back}><FontAwesomeIcon icon={"arrow-left"} /></div>
+                <div className="miniPres-button" onClick={() => PresBox.Instance.startOrResetPres(PresBox.Instance.itemIndex)}><FontAwesomeIcon icon={PresBox.Instance.layoutDoc.presStatus === "auto" ? "pause" : "play"} /></div>
+                <div className="miniPres-button" onClick={PresBox.Instance.next}><FontAwesomeIcon icon={"arrow-right"} /></div>
+                <div className="miniPres-divider"></div>
+                <div className="miniPres-button-text">Slide {PresBox.Instance.itemIndex + 1} / {PresBox.Instance.childDocs.length}</div>
+                {/* <div className="miniPres-button-text">{this.getCurrentFrame}</div> */}
+                <div className="miniPres-divider"></div>
+                <div className="miniPres-button-text" onClick={PresBox.Instance.updateMinimize}>EXIT</div>
+            </div>
+        </div>;
+    }
     renderMiniMap() {
         return <div className="miniMap" style={{
             width: this.returnMiniSize(), height: this.returnMiniSize(), background: StrCast(this._document!._backgroundColor,
@@ -920,6 +943,7 @@ export class DockedFrameRenderer extends React.Component<DockedFrameProps> {
                 ContainingCollectionView={undefined}
                 ContainingCollectionDoc={undefined} />
             {document._viewType === CollectionViewType.Freeform && !this._document?.hideMinimap ? this.renderMiniMap() : (null)}
+            {document._viewType === CollectionViewType.Freeform && this._document?.miniPres ? this.renderMiniPres() : (null)}
         </>;
     }
 
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index e22b400c0..79540d19e 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -214,7 +214,7 @@ export class CollectionFreeFormView extends CollectionSubView<PanZoomDocument, P
             const layoutDoc = Doc.Layout(d);
             if (this.Document.currentFrame !== undefined) {
                 const vals = CollectionFreeFormDocumentView.getValues(d, NumCast(d.activeFrame, 1000));
-                CollectionFreeFormDocumentView.setValues(this.Document.currentFrame, d, x + vals.x - dropPos[0], y + vals.y - dropPos[1], vals.opacity);
+                CollectionFreeFormDocumentView.setValues(this.Document.currentFrame, d, x + vals.x - dropPos[0], y + vals.y - dropPos[1], vals.h, vals.w, vals.opacity);
             } else {
                 d.x = x + NumCast(d.x) - dropPos[0];
                 d.y = y + NumCast(d.y) - dropPos[1];
@@ -1405,7 +1405,7 @@ export class CollectionFreeFormView extends CollectionSubView<PanZoomDocument, P
                     centeringShiftY={this.centeringShiftY}
                     presPaths={BoolCast(this.Document.presPathView)}
                     progressivize={BoolCast(this.Document.editProgressivize)}
-                    zoomProgressivize={BoolCast(this.Document.zoomProgressivize)}
+                    zoomProgressivize={BoolCast(this.Document.editZoomProgressivize)}
                     transition={Cast(this.layoutDoc._viewTransition, "string", null)}
                     viewDefDivClick={this.props.viewDefDivClick}
                     zoomScaling={this.zoomScaling} panX={this.panX} panY={this.panY}>
diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
index 480abdaed..5d1db6de2 100644
--- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
+++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
@@ -76,22 +76,30 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF
     public static getValues(doc: Doc, time: number) {
         const timecode = Math.round(time);
         return ({
+            h: Cast(doc["h-indexed"], listSpec("number"), [NumCast(doc._height)]).reduce((p, x, i) => (i <= timecode && x !== undefined) || p === undefined ? x : p, undefined as any as number),
+            w: Cast(doc["w-indexed"], listSpec("number"), [NumCast(doc._width)]).reduce((p, x, i) => (i <= timecode && x !== undefined) || p === undefined ? x : p, undefined as any as number),
             x: Cast(doc["x-indexed"], listSpec("number"), [NumCast(doc.x)]).reduce((p, x, i) => (i <= timecode && x !== undefined) || p === undefined ? x : p, undefined as any as number),
             y: Cast(doc["y-indexed"], listSpec("number"), [NumCast(doc.y)]).reduce((p, y, i) => (i <= timecode && y !== undefined) || p === undefined ? y : p, undefined as any as number),
             opacity: Cast(doc["opacity-indexed"], listSpec("number"), [NumCast(doc.opacity, 1)]).reduce((p, o, i) => i <= timecode || p === undefined ? o : p, undefined as any as number),
         });
     }
 
-    public static setValues(time: number, d: Doc, x?: number, y?: number, opacity?: number) {
+    public static setValues(time: number, d: Doc, x?: number, y?: number, h?: number, w?: number, opacity?: number) {
         const timecode = Math.round(time);
+        const hindexed = Cast(d["h-indexed"], listSpec("number"), []).slice();
+        const windexed = Cast(d["w-indexed"], listSpec("number"), []).slice();
         const xindexed = Cast(d["x-indexed"], listSpec("number"), []).slice();
         const yindexed = Cast(d["y-indexed"], listSpec("number"), []).slice();
         const oindexed = Cast(d["opacity-indexed"], listSpec("number"), []).slice();
         xindexed[timecode] = x as any as number;
         yindexed[timecode] = y as any as number;
+        hindexed[timecode] = h as any as number;
+        windexed[timecode] = w as any as number;
         oindexed[timecode] = opacity as any as number;
         d["x-indexed"] = new List<number>(xindexed);
         d["y-indexed"] = new List<number>(yindexed);
+        d["h-indexed"] = new List<number>(hindexed);
+        d["w-indexed"] = new List<number>(windexed);
         d["opacity-indexed"] = new List<number>(oindexed);
     }
     public static updateKeyframe(docs: Doc[], time: number) {
@@ -99,7 +107,11 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF
         docs.forEach(doc => {
             const xindexed = Cast(doc['x-indexed'], listSpec("number"), null);
             const yindexed = Cast(doc['y-indexed'], listSpec("number"), null);
+            const hindexed = Cast(doc['h-indexed'], listSpec("number"), null);
+            const windexed = Cast(doc['w-indexed'], listSpec("number"), null);
             const opacityindexed = Cast(doc['opacity-indexed'], listSpec("number"), null);
+            hindexed?.length <= timecode + 1 && hindexed.push(undefined as any as number);
+            windexed?.length <= timecode + 1 && windexed.push(undefined as any as number);
             xindexed?.length <= timecode + 1 && xindexed.push(undefined as any as number);
             yindexed?.length <= timecode + 1 && yindexed.push(undefined as any as number);
             opacityindexed?.length <= timecode + 1 && opacityindexed.push(undefined as any as number);
@@ -118,14 +130,24 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF
         const height = new List<number>();
         const top = new List<number>();
         const left = new List<number>();
+        // width.push(100);
+        // height.push(100);
+        // top.push(0);
+        // left.push(0);
         width.push(NumCast(doc.width));
         height.push(NumCast(doc.height));
         top.push(NumCast(doc.height) / -2);
         left.push(NumCast(doc.width) / -2);
-        doc["width-indexed"] = width;
-        doc["height-indexed"] = height;
-        doc["top-indexed"] = top;
-        doc["left-indexed"] = left;
+        doc["viewfinder-width-indexed"] = width;
+        doc["viewfinder-height-indexed"] = height;
+        doc["viewfinder-top-indexed"] = top;
+        doc["viewfinder-left-indexed"] = left;
+    }
+
+    public static setupScroll(doc: Doc, scrollProgressivize: boolean = false) {
+        const scrollList = new List<number>();
+        scrollList.push(NumCast(doc._scrollTop));
+        doc["scroll-indexed"] = scrollList;
     }
 
     public static setupKeyframes(docs: Doc[], timecode: number, progressivize: boolean = false) {
@@ -134,6 +156,8 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF
             const curTimecode = progressivize ? i : timecode;
             const xlist = new List<number>(numberRange(timecode + 1).map(i => undefined) as any as number[]);
             const ylist = new List<number>(numberRange(timecode + 1).map(i => undefined) as any as number[]);
+            const wlist = new List<number>(numberRange(timecode + 1).map(i => undefined) as any as number[]);
+            const hlist = new List<number>(numberRange(timecode + 1).map(i => undefined) as any as number[]);
             const olist = new List<number>(numberRange(timecode + 1).map(t => progressivize && t < (doc.appearFrame ? doc.appearFrame : i) ? 0 : 1));
             let oarray: List<number>;
             console.log(doc.title + "AF: " + doc.appearFrame);
@@ -143,15 +167,21 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF
             oarray.fill(1, NumCast(doc.appearFrame), timecode);
             // oarray.fill(0, 0, NumCast(doc.appearFrame) - 1);
             // oarray.fill(1, NumCast(doc.appearFrame), timecode);
-            console.log(oarray);
+            // console.log(oarray);
+            wlist[curTimecode] = NumCast(doc._width);
+            hlist[curTimecode] = NumCast(doc._height);
             xlist[curTimecode] = NumCast(doc.x);
             ylist[curTimecode] = NumCast(doc.y);
             doc.xArray = xlist;
             doc.yArray = ylist;
             doc["x-indexed"] = xlist;
             doc["y-indexed"] = ylist;
+            doc["w-indexed"] = wlist;
+            doc["h-indexed"] = hlist;
             doc["opacity-indexed"] = oarray;
             doc.activeFrame = ComputedField.MakeFunction("self.context?.currentFrame||0");
+            doc._height = ComputedField.MakeInterpolated("h", "activeFrame");
+            doc._width = ComputedField.MakeInterpolated("w", "activeFrame");
             doc.x = ComputedField.MakeInterpolated("x", "activeFrame");
             doc.y = ComputedField.MakeInterpolated("y", "activeFrame");
             doc.opacity = ComputedField.MakeInterpolated("opacity", "activeFrame");
diff --git a/src/client/views/nodes/PresBox.scss b/src/client/views/nodes/PresBox.scss
index 45bb4293b..b06503472 100644
--- a/src/client/views/nodes/PresBox.scss
+++ b/src/client/views/nodes/PresBox.scss
@@ -441,6 +441,7 @@
     padding-top: 5px;
     padding-bottom: 5px;
     border: solid 1px black;
+    // overflow: auto; 
 
     ::-webkit-scrollbar {
         -webkit-appearance: none;
@@ -450,37 +451,127 @@
 
     ::-webkit-scrollbar-thumb {
         border-radius: 2px;
-        background-color: rgb(101, 164, 220);
     }
 }
 
 .dropdown-play-button {
-    font-size: 10;
-    margin-left: 10;
-    margin-right: 10;
+    font-size: 12;
+    padding-left: 5px;
+    padding-right: 5px;
     padding-top: 5px;
     padding-bottom: 5px;
     text-align: left;
     justify-content: left;
-    border-bottom: solid 1px lightgrey;
+}
+
+.dropdown-play-button:hover {
+    background-color: lightgrey;
+}
+
+.presBox-button-left {
+    position: relative;
+    align-self: flex-start;
+    justify-self: flex-start;
+    width: 80%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 4px;
+    border-bottom-right-radius: 0;
+    border-top-right-radius: 0;
+}
+
+.presBox-button-right {
+    position: relative;
+    text-align: center;
+    border-left: solid 1px darkgrey;
+    width: 20%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 4px;
+    border-bottom-left-radius: 0;
+    border-top-left-radius: 0;
+}
+
+.presBox-button-right.active {
+    background-color: #223063;
+    border: #aedcf6 solid 1px;
+    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.8);
 }
 
 .dropdown-play {
-    top: 32px;
+    right: 0px;
+    top: calc(100% + 2px);
     display: none;
     border-radius: 5px;
     width: max-content;
     min-height: 20px;
     height: max-content;
+    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.8);
     z-index: 200;
-    background-color: #323232;
+    background-color: white;
+    color: black;
     position: absolute;
+    overflow: hidden;
 }
 
 .dropdown-play.active {
     display: block;
 }
 
+.layout-container {
+    overflow-x: scroll;
+    display: flex;
+    width: 100%;
+    /* max-width: 200px; */
+    min-width: 100px;
+    height: 100%;
+    // border: solid 1px;
+    /* display: block; */
+    align-self: center;
+
+    .layout:hover {
+        border: solid 2px #5c9edd;
+    }
+
+    .layout {
+        position: relative;
+        top: 10%;
+        height: 80%;
+        margin-right: 10;
+        min-width: 90px;
+        width: 90px;
+        border: solid black 1px;
+        display: grid;
+        grid-template-rows: 20px 30px;
+        align-items: center;
+        text-align: center;
+
+        .header {
+            font-size: 10;
+            font-weight: 600;
+            width: 70%;
+            height: max-content;
+            align-self: center;
+            justify-self: center;
+            border: solid 0.8px black;
+        }
+
+        .subheader {
+            font-size: 8;
+            font-weight: 400;
+            width: 70%;
+            height: 90%;
+            align-self: center;
+            justify-self: center;
+            border: solid 0.4px black;
+        }
+    }
+}
+
 .presBox-buttons {
     position: relative;
     width: 100%;
@@ -498,15 +589,19 @@
         border-radius: 5px;
         min-width: 15px;
         max-width: 100px;
+        left: 8px;
     }
 
     .presBox-presentPanel {
         display: flex;
         justify-self: end;
         width: 100%;
-
+        max-width: 300px;
+        min-width: 150px;
     }
 
+    
+
     select {
         background: #323232;
         color: white;
@@ -532,6 +627,10 @@
         display: flex;
     }
 
+    .presBox-button.active:hover {
+        background-color: #233163;
+    }
+
     .presBox-button.edit {
         display: flex;
         max-width: 25px;
@@ -542,7 +641,7 @@
         min-width: 100px;
         width: 100px;
         position: absolute;
-        right: 0px;
+        right: 8px;
 
         .present-icon {
             margin-right: 7px;
@@ -557,6 +656,7 @@
         height: 25;
         position: relative;
         display: inline-block;
+        left: 8px;
     }
 }
 
diff --git a/src/client/views/nodes/PresBox.tsx b/src/client/views/nodes/PresBox.tsx
index ac2288944..221f1e6a0 100644
--- a/src/client/views/nodes/PresBox.tsx
+++ b/src/client/views/nodes/PresBox.tsx
@@ -24,11 +24,11 @@ import { HighlightSpanKind } from "typescript";
 import { SearchUtil } from "../../util/SearchUtil";
 import { CollectionFreeFormDocumentView } from "./CollectionFreeFormDocumentView";
 import { child } from "serializr";
-import { Zoom, Fade, Flip, Rotate, Bounce, Roll, LightSpeed } from 'react-reveal';
 import { List } from "../../../fields/List";
 import { Tooltip } from "@material-ui/core";
 import { CollectionFreeFormViewChrome } from "../collections/CollectionMenu";
 import { conformsTo } from "lodash";
+import { translate } from "googleapis/build/src/apis/translate";
 
 type PresBoxSchema = makeInterface<[typeof documentSchema]>;
 const PresBoxDocument = makeInterface(documentSchema);
@@ -72,11 +72,9 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
 
     onPointerOver = () => {
         document.addEventListener("keydown", this.keyEvents, true);
-        // document.addEventListener("keydown", this.keyEvents, false);
     }
 
     onPointerLeave = () => {
-        // document.removeEventListener("keydown", this.keyEvents, false);
         document.removeEventListener("keydown", this.keyEvents, true);
     }
 
@@ -96,18 +94,34 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
             presTargetDoc.currentFrame = curFrame + 1;
             if (presTargetDoc.zoomProgressivize) {
                 const srcContext = Cast(presTargetDoc.context, Doc, null);
-                if (srcContext) {
-                    srcContext._panX = this.checkList(presTargetDoc, presTargetDoc["left-indexed"]);
-                    srcContext._panY = this.checkList(presTargetDoc, presTargetDoc["top-indexed"]);
-                    srcContext._viewScale = this.checkList(presTargetDoc, presTargetDoc["width-indexed"]);
-                }
-                presTargetDoc._panY = this.checkList(presTargetDoc, presTargetDoc["left-indexed"]);
-                const resize = document.getElementById('resizable');
-                if (resize) {
-                    resize.style.width = this.checkList(presTargetDoc, presTargetDoc["width-indexed"]) + 'px';
-                    resize.style.height = this.checkList(presTargetDoc, presTargetDoc["height-indexed"]) + 'px';
-                    resize.style.top = this.checkList(presTargetDoc, presTargetDoc["top-indexed"]) + 'px';
-                    resize.style.left = this.checkList(presTargetDoc, presTargetDoc["left-indexed"]) + 'px';
+                const srcDocView = DocumentManager.Instance.getDocumentView(srcContext);
+                if (srcContext && srcDocView) {
+                    const layoutdoc = Doc.Layout(presTargetDoc);
+                    const panelWidth: number = srcDocView.props.PanelWidth();
+                    const panelHeight: number = srcDocView.props.PanelHeight();
+                    console.log("srcDocView: " + srcDocView.props.PanelWidth());
+                    // console.log("layoutdoc._width: " + layoutdoc._width);
+                    // console.log("srcContext._width: " + srcContext._width);
+                    const newPanX = NumCast(presTargetDoc.x) + NumCast(layoutdoc._width) / 2;
+                    const newPanY = NumCast(presTargetDoc.y) + NumCast(layoutdoc._height) / 2;
+                    // const newPanX = NumCast(presTargetDoc.x) + panelWidth / 2;
+                    // const newPanY = NumCast(presTargetDoc.y) + panelHeight / 2;
+                    let newScale = 0.9 * Math.min(Number(panelWidth) / this.checkList(presTargetDoc, presTargetDoc["viewfinder-width-indexed"]), Number(panelHeight) / this.checkList(presTargetDoc, presTargetDoc["viewfinder-height-indexed"]));
+                    // srcContext._panX = newPanX + (NumCast(presTargetDoc._viewScale) * this.checkList(presTargetDoc, presTargetDoc["viewfinder-left-indexed"]) + NumCast(presTargetDoc._panX) + (this.checkList(presTargetDoc, presTargetDoc["viewfinder-width-indexed"]) / 2));
+                    // srcContext._panY = newPanY + (NumCast(presTargetDoc._viewScale) * this.checkList(presTargetDoc, presTargetDoc["viewfinder-top-indexed"]) + NumCast(presTargetDoc._panY) + (this.checkList(presTargetDoc, presTargetDoc["viewfinder-height-indexed"]) / 2));
+                    srcContext._panX = newPanX + (this.checkList(presTargetDoc, presTargetDoc["viewfinder-left-indexed"]) + NumCast(presTargetDoc._panX) + (this.checkList(presTargetDoc, presTargetDoc["viewfinder-width-indexed"]) / 2));
+                    srcContext._panY = newPanY + (this.checkList(presTargetDoc, presTargetDoc["viewfinder-top-indexed"]) + NumCast(presTargetDoc._panY) + (this.checkList(presTargetDoc, presTargetDoc["viewfinder-height-indexed"]) / 2));
+                    // srcContext._panX = newPanX
+                    // srcContext._panY = newPanY
+                    srcContext._viewScale = newScale;
+                    console.log("X: " + srcContext._panX + ", Y: " + srcContext._panY + ", Scale: " + srcContext._viewScale);
+                    const resize = document.getElementById('resizable');
+                    if (resize) {
+                        resize.style.width = this.checkList(presTargetDoc, presTargetDoc["viewfinder-width-indexed"]) + 'px';
+                        resize.style.height = this.checkList(presTargetDoc, presTargetDoc["viewfinder-height-indexed"]) + 'px';
+                        resize.style.top = this.checkList(presTargetDoc, presTargetDoc["viewfinder-top-indexed"]) + 'px';
+                        resize.style.left = this.checkList(presTargetDoc, presTargetDoc["viewfinder-left-indexed"]) + 'px';
+                    }
                 }
             }
             // Case 2: No more frames in current doc and next slide is defined, therefore move to next slide
@@ -322,8 +336,8 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
         this.updateCurrentPresentation();
         const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null);
         const targetDoc = Cast(activeItem.presentationTargetDoc, Doc, null);
-        if (this._presTimer && this.layoutDoc.presStatus === "auto") {
-            clearInterval(this._presTimer);
+        if (this.layoutDoc.presStatus === "auto") {
+            if (this._presTimer) clearInterval(this._presTimer);
             this.layoutDoc.presStatus = "manual";
         } else {
             this.layoutDoc.presStatus = "auto";
@@ -381,28 +395,48 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
         });
     }
 
-    updateMinimize = action((e: React.ChangeEvent, mode: CollectionViewType) => {
-        if (BoolCast(this.layoutDoc.inOverlay) !== (mode === CollectionViewType.Invalid)) {
-            if (this.layoutDoc.inOverlay) {
+    updateMinimize = async () => {
+        const docToJump = this.childDocs[0];
+        const aliasOf = await DocCastAsync(docToJump.aliasOf);
+        const srcContext = aliasOf && await DocCastAsync(aliasOf.context);
+        if (srcContext) {
+            if (srcContext.miniPres) {
+                document.removeEventListener("keydown", this.keyEvents, true);
+                srcContext.miniPres = false;
                 Doc.RemoveDocFromList((Doc.UserDoc().myOverlayDocuments as Doc), undefined, this.rootDoc);
                 CollectionDockingView.AddRightSplit(this.rootDoc);
                 this.layoutDoc.inOverlay = false;
             } else {
-                const pt = this.props.ScreenToLocalTransform().inverse().transformPoint(0, 0);
-                this.rootDoc.x = pt[0];// 500;//e.clientX + 25;
-                this.rootDoc.y = pt[1];////e.clientY - 25;
+                document.addEventListener("keydown", this.keyEvents, true);
+                srcContext.miniPres = true;
                 this.props.addDocTab?.(this.rootDoc, "close");
                 Doc.AddDocToList((Doc.UserDoc().myOverlayDocuments as Doc), undefined, this.rootDoc);
             }
+
+
         }
-    });
+        // if (srcContext) {
+        //     Doc.RemoveDocFromList((Doc.UserDoc().myOverlayDocuments as Doc), undefined, this.rootDoc);
+        //     CollectionDockingView.AddRightSplit(this.rootDoc);
+        //     this.layoutDoc.inOverlay = false;
+        // }
+        // else {
+        //         const pt = this.props.ScreenToLocalTransform().inverse().transformPoint(0, 0);
+        //         this.rootDoc.x = pt[0];// 500;//e.clientX + 25;
+        //         this.rootDoc.y = pt[1];////e.clientY - 25;
+        //         this.props.addDocTab?.(this.rootDoc, "close");
+        //         Doc.AddDocToList((Doc.UserDoc().myOverlayDocuments as Doc), undefined, this.rootDoc);
+        //     }
+        // }
+    };
 
     @undoBatch
     viewChanged = action((e: React.ChangeEvent) => {
         //@ts-ignore
         const viewType = e.target.selectedOptions[0].value as CollectionViewType;
         viewType === CollectionViewType.Stacking && (this.rootDoc._pivotField = undefined); // pivot field may be set by the user in timeline view (or some other way) -- need to reset it here
-        this.updateMinimize(e, this.rootDoc._viewType = viewType);
+        // this.updateMinimize(this.rootDoc._viewType = viewType);
+        if (viewType === CollectionViewType.Stacking) this.rootDoc._gridGap = 5;
     });
 
     @undoBatch
@@ -411,19 +445,24 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
         const targetDoc = Cast(activeItem.presentationTargetDoc, Doc, null);
         if (movement === 'zoom') {
             activeItem.presZoomButton = !activeItem.presZoomButton;
-            activeItem.presMovement = 'Zoom';
+            if (activeItem.presZoomButton) activeItem.presMovement = 'Zoom';
+            else activeItem.presMovement = 'None';
             activeItem.presNavButton = false;
         } else if (movement === 'nav') {
             activeItem.presZoomButton = false;
-            activeItem.presMovement = 'Pan';
             activeItem.presNavButton = !activeItem.presNavButton;
+            if (activeItem.presNavButton) activeItem.presMovement = 'Pan';
+            else activeItem.presMovement = 'None';
         } else if (movement === 'switch') {
-            activeItem.presMovement = 'Switch';
             targetDoc.presTransition = 0;
+            activeItem.presSwitchButton = !activeItem.presSwitchButton;
+            if (activeItem.presSwitchButton) activeItem.presMovement = 'Switch';
+            else activeItem.presMovement = 'None';
         } else {
             activeItem.presMovement = 'None';
             activeItem.presZoomButton = false;
             activeItem.presNavButton = false;
+            activeItem.presSwitchButton = false;
         }
     });
 
@@ -439,7 +478,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
     childLayoutTemplate = () => this.rootDoc._viewType !== CollectionViewType.Stacking ? undefined : this.presElement;
     removeDocument = (doc: Doc) => Doc.RemoveDocFromList(this.dataDoc, this.fieldKey, doc);
     getTransform = () => this.props.ScreenToLocalTransform().translate(-5, -65);// listBox padding-left and pres-box-cont minHeight
-    panelHeight = () => this.props.PanelHeight() - 20;
+    panelHeight = () => this.props.PanelHeight() - 40;
     active = (outsideReaction?: boolean) => ((Doc.GetSelectedTool() === InkTool.None && !this.layoutDoc.isBackground) &&
         (this.layoutDoc.forceActive || this.props.isSelected(outsideReaction) || this._isChildActive || this.props.renderDepth === 0) ? true : false)
 
@@ -465,9 +504,9 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
     //Regular click
     @action
     selectElement = (doc: Doc) => {
-        this._selectedArray = [];
+        // this._selectedArray = [];
         this.gotoDocument(this.childDocs.indexOf(doc), NumCast(this.itemIndex));
-        this._selectedArray.push(this.childDocs[this.childDocs.indexOf(doc)]);
+        // this._selectedArray.push(this.childDocs[this.childDocs.indexOf(doc)]);
         console.log(this._selectedArray);
     }
 
@@ -508,11 +547,11 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
             // Ctrl-A to select all
         } if ((e.metaKey || e.altKey) && e.keyCode === 65) {
             if (this.layoutDoc.presStatus === "edit") this._selectedArray = this.childDocs;
-            // left / a / up to go back
-        } if (e.keyCode === 37 || 65 || 38) {
+            // left(37) / a(65) / up(38) to go back
+        } if (e.keyCode === 37) {
             if (this.layoutDoc.presStatus !== "edit") this.back();
-            // right / d / down to go to next
-        } if (e.keyCode === 39 || 68 || 40) {
+            // right (39) / d(68) / down(40) to go to next
+        } if (e.keyCode === 39) {
             if (this.layoutDoc.presStatus !== "edit") this.next();
             // spacebar to 'present' or go to next slide
         } if (e.keyCode === 32) {
@@ -526,6 +565,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
     @observable private progressivizeTools: boolean = false;
     @observable private moreInfoTools: boolean = false;
     @observable private playTools: boolean = false;
+    @observable private presentTools: boolean = false;
     @observable private pathBoolean: boolean = false;
     @observable private expandBoolean: boolean = false;
 
@@ -548,6 +588,10 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
     // For toggling the tools for progressivize
     @action toggleProgressivize = () => {
         this.progressivizeTools = !this.progressivizeTools;
+        const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null);
+        const targetDoc = Cast(activeItem.presentationTargetDoc, Doc, null);
+        targetDoc.editZoomProgressivize = false;
+        targetDoc.editProgressivize = false;
         this.transitionTools = false;
         this.newDocumentTools = false;
         this.moreInfoTools = false;
@@ -570,6 +614,16 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
         this.moreInfoTools = false;
     }
 
+    // For toggling the options when the user wants to select play
+    @action togglePresent = () => {
+        this.presentTools = !this.presentTools;
+        this.playTools = false;
+        this.transitionTools = false;
+        this.newDocumentTools = false;
+        this.progressivizeTools = false;
+        this.moreInfoTools = false;
+    }
+
     @action toggleAllDropdowns() {
         this.transitionTools = false;
         this.newDocumentTools = false;
@@ -659,11 +713,9 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
                 strokeDasharray: '10 5',
             }}
             fill="none"
-            // markerStart="url(#square)"
-            // markerEnd="url(#arrow)"
-            marker-start="url(#markerSquare)"
-            marker-mid="url(#markerSquare)"
-            marker-end="url(#markerArrow)"
+            markerStart="url(#markerSquare)"
+            markerMid="url(#markerSquare)"
+            markerEnd="url(#markerArrow)"
         />);
     }
 
@@ -725,6 +777,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
             const transitionThumbLocation = String(-9.48 * Number(transitionSpeed) + 93);
             const durationThumbLocation = String(9.48 * Number(duration));
             const effect = targetDoc.presEffect ? targetDoc.presEffect : 'None';
+            activeItem.presMovement = activeItem.presMovement ? activeItem.presMovement : 'Zoom';
             return (
                 <div className={`presBox-ribbon ${this.transitionTools && this.layoutDoc.presStatus === "edit" ? "active" : ""}`} onClick={e => e.stopPropagation()} onPointerUp={e => e.stopPropagation()} onPointerDown={e => e.stopPropagation()}>
                     <div className="ribbon-box">
@@ -742,8 +795,8 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
                                 <div className={`presBox-dropdownOption ${activeItem.presMovement === 'Switch' ? "active" : ""}`} onPointerDown={e => e.stopPropagation()} onClick={() => this.movementChanged('switch')}>Switch</div>
                             </div>
                         </div>
-                        <input type="range" step="0.1" min="0.1" max="10" value={transitionSpeed} className={`toolbar-slider ${activeItem.presZoomButton || activeItem.presNavButton ? "" : "none"}`} id="toolbar-slider" onChange={(e: React.ChangeEvent<HTMLInputElement>) => { e.stopPropagation(); this.setTransitionTime(e.target.value); }} />
-                        <div className={`slider-headers ${activeItem.presZoomButton || activeItem.presNavButton ? "" : "none"}`}>
+                        <input type="range" step="0.1" min="0.1" max="10" value={transitionSpeed} className={`toolbar-slider ${activeItem.presMovement === 'Pan' || activeItem.presMovement === 'Zoom' ? "" : "none"}`} id="toolbar-slider" onChange={(e: React.ChangeEvent<HTMLInputElement>) => { e.stopPropagation(); this.setTransitionTime(e.target.value); }} />
+                        <div className={`slider-headers ${activeItem.presMovement === 'Pan' || activeItem.presMovement === 'Zoom' ? "" : "none"}`}>
                             <div className={`slider-value ${activeItem.presZoomButton || activeItem.presNavButton ? "" : "none"}`} style={{ left: transitionThumbLocation + '%' }}>{transitionSpeed}s</div>
                             <div className="slider-text">Slow</div>
                             <div className="slider-text"></div>
@@ -784,7 +837,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
                                 <div className={'presBox-dropdownOption'} onPointerDown={e => e.stopPropagation()} onClick={() => targetDoc.presEffect = 'Roll'}>Roll</div>
                             </div>
                         </div>
-                        <div className="effectDirection">
+                        <div className="effectDirection" style={{ display: effect === 'None' ? "none" : "grid" }}>
                             <Tooltip title={<><div className="dash-tooltip">{"Enter from left"}</div></>}><div style={{ gridColumn: 1, gridRow: 2, justifySelf: 'center', color: targetDoc.presEffectDirection === "left" ? "#5a9edd" : "black" }} onClick={() => targetDoc.presEffectDirection = 'left'}><FontAwesomeIcon icon={"angle-right"} /></div></Tooltip>
                             <Tooltip title={<><div className="dash-tooltip">{"Enter from right"}</div></>}><div style={{ gridColumn: 3, gridRow: 2, justifySelf: 'center', color: targetDoc.presEffectDirection === "right" ? "#5a9edd" : "black" }} onClick={() => targetDoc.presEffectDirection = 'right'}><FontAwesomeIcon icon={"angle-left"} /></div></Tooltip>
                             <Tooltip title={<><div className="dash-tooltip">{"Enter from top"}</div></>}><div style={{ gridColumn: 2, gridRow: 1, justifySelf: 'center', color: targetDoc.presEffectDirection === "top" ? "#5a9edd" : "black" }} onClick={() => targetDoc.presEffectDirection = 'top'}><FontAwesomeIcon icon={"angle-down"} /></div></Tooltip>
@@ -863,6 +916,24 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
                             <div title="Freeform" className={'ribbon-button'} style={{ background: type === 'freeform' ? "#000000" : "#f6f6f6" }} onClick={action(() => { type = "freeform"; })}>Freeform</div>
                         </div>
                     </div>
+                    <div className="ribbon-box">
+                        Preset layouts:
+                        <div className="layout-container">
+                            <div className="layout">
+                                <div className="header">HEADER</div>
+                                <div className="subheader">Content goes here</div>
+                            </div>
+                            <div className="layout">
+                                <div className="header" style={{ gridColumn: 1 / 2, gridRow: 1 }}>HEADER</div>
+                                <div className="subheader" style={{ gridColumn: 1, gridRow: 2 }}>Some content</div>
+                                <div className="subheader" style={{ gridColumn: 2, gridRow: 2 }}>Some more content</div>
+                            </div>
+                            <div className="layout">
+                                <div className="header">HEADER</div>
+                                <div className="subheader">Content goes here</div>
+                            </div>
+                        </div>
+                    </div>
                     <div className="ribbon-final-box">
                         <div className="ribbon-final-button" onClick={() => this.createNewSlide(title, type)}>
                             Create New Slide
@@ -877,10 +948,23 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
         return (
             <div className={`dropdown-play ${this.playTools ? "active" : ""}`} onClick={e => e.stopPropagation()} onPointerUp={e => e.stopPropagation()} onPointerDown={e => e.stopPropagation()}>
                 <div className="dropdown-play-button" onClick={() => this.startOrResetPres(this.itemIndex)}>
-                    Start from current slide
+                    Present from current slide
                 </div>
                 <div className="dropdown-play-button" onClick={() => this.startOrResetPres(0)}>
-                    Start from first slide
+                    Present from first slide
+                </div>
+            </div>
+        );
+    }
+
+    @computed get presentDropdown() {
+        return (
+            <div className={`dropdown-play ${this.presentTools ? "active" : ""}`} onClick={e => e.stopPropagation()} onPointerUp={e => e.stopPropagation()} onPointerDown={e => e.stopPropagation()}>
+                <div className="dropdown-play-button" onClick={this.updateMinimize}>
+                    Minimize
+                </div>
+                <div className="dropdown-play-button" onClick={() => this.startOrResetPres(0)}>
+                    Sidebar view
                 </div>
             </div>
         );
@@ -916,10 +1000,10 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
         if (tagDoc.zoomProgressivize) {
             const resize = document.getElementById('resizable');
             if (resize) {
-                resize.style.width = this.checkList(tagDoc, tagDoc["width-indexed"]) + 'px';
-                resize.style.height = this.checkList(tagDoc, tagDoc["height-indexed"]) + 'px';
-                resize.style.top = this.checkList(tagDoc, tagDoc["top-indexed"]) + 'px';
-                resize.style.left = this.checkList(tagDoc, tagDoc["left-indexed"]) + 'px';
+                resize.style.width = this.checkList(tagDoc, tagDoc["viewfinder-width-indexed"]) + 'px';
+                resize.style.height = this.checkList(tagDoc, tagDoc["viewfinder-height-indexed"]) + 'px';
+                resize.style.top = this.checkList(tagDoc, tagDoc["viewfinder-top-indexed"]) + 'px';
+                resize.style.left = this.checkList(tagDoc, tagDoc["viewfinder-left-indexed"]) + 'px';
             }
         }
     }
@@ -938,10 +1022,10 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
         if (tagDoc.zoomProgressivize) {
             const resize = document.getElementById('resizable');
             if (resize) {
-                resize.style.width = this.checkList(tagDoc, tagDoc["width-indexed"]) + 'px';
-                resize.style.height = this.checkList(tagDoc, tagDoc["height-indexed"]) + 'px';
-                resize.style.top = this.checkList(tagDoc, tagDoc["top-indexed"]) + 'px';
-                resize.style.left = this.checkList(tagDoc, tagDoc["left-indexed"]) + 'px';
+                resize.style.width = this.checkList(tagDoc, tagDoc["viewfinder-width-indexed"]) + 'px';
+                resize.style.height = this.checkList(tagDoc, tagDoc["viewfinder-height-indexed"]) + 'px';
+                resize.style.top = this.checkList(tagDoc, tagDoc["viewfinder-top-indexed"]) + 'px';
+                resize.style.left = this.checkList(tagDoc, tagDoc["viewfinder-left-indexed"]) + 'px';
             }
         }
     }
@@ -976,18 +1060,22 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
                             </div>
                         </div>
                         <div className="ribbon-final-box">
-                            <div className="ribbon-doubleButton">
+                            <div className="ribbon-doubleButton" style={{ display: targetDoc.type === "collection" ? "inline-flex" : "none" }}>
                                 <div className="ribbon-button" style={{ backgroundColor: activeItem.presProgressivize ? "#aedef8" : "" }} onClick={this.progressivizeChild}>Child documents</div>
                                 <div className="ribbon-button" style={{ display: activeItem.presProgressivize ? "flex" : "none", backgroundColor: targetDoc.editProgressivize ? "#aedef8" : "" }} onClick={this.editProgressivize}>Edit</div>
                             </div>
-                            <div className="ribbon-doubleButton">
-                                <div className="ribbon-button" onClick={this.progressivizeZoom}>Internal zoom</div>
-                                <div className="ribbon-button" style={{ display: activeItem.zoomProgressivize ? "flex" : "none", backgroundColor: targetDoc.zoomProgressivize ? "#aedef8" : "" }} onClick={this.zoomProgressivize}>Edit</div>
+                            <div className="ribbon-doubleButton" style={{ display: targetDoc.type === "collection" || targetDoc.type === "image" ? "inline-flex" : "none" }}>
+                                <div className="ribbon-button" style={{ backgroundColor: activeItem.zoomProgressivize ? "#aedef8" : "" }} onClick={this.progressivizeZoom}>Internal zoom</div>
+                                <div className="ribbon-button" style={{ display: activeItem.zoomProgressivize ? "flex" : "none", backgroundColor: targetDoc.editZoomProgressivize ? "#aedef8" : "" }} onClick={this.editZoomProgressivize}>Edit</div>
                             </div>
-                            <div className="ribbon-doubleButton">
+                            <div className="ribbon-doubleButton" style={{ display: targetDoc.type === "rtf" ? "inline-flex" : "none" }}>
                                 <div className="ribbon-button" onClick={this.progressivizeText}>Text progressivize</div>
                                 <div className="ribbon-button" style={{ display: activeItem.textProgressivize ? "flex" : "none", backgroundColor: targetDoc.textProgressivize ? "#aedef8" : "" }} onClick={this.textProgressivize}>Edit</div>
                             </div>
+                            <div className="ribbon-doubleButton" style={{ display: targetDoc.type === "pdf" ? "inline-flex" : "none" }}>
+                                <div className="ribbon-button" onClick={this.progressivizeText}>Scroll progressivize</div>
+                                <div className="ribbon-button" style={{ display: activeItem.scrollProgressivize ? "flex" : "none", backgroundColor: targetDoc.editScrollProgressivize ? "#aedef8" : "" }} onClick={this.editScrollProgressivize}>Edit</div>
+                            </div>
                         </div>
                     </div>
                 </div>
@@ -995,30 +1083,59 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
         }
     }
 
-    //Progressivize Zoom
+    //Toggle whether the user edits or not
+    @action
+    editZoomProgressivize = (e: React.MouseEvent) => {
+        const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null);
+        const targetDoc = Cast(activeItem.presentationTargetDoc, Doc, null);
+        if (!targetDoc.editZoomProgressivize) {
+            targetDoc.editZoomProgressivize = true;
+        } else {
+            targetDoc.editZoomProgressivize = false;
+        }
+    }
+
+    //Toggle whether the user edits or not
     @action
-    zoomProgressivize = (e: React.MouseEvent) => {
+    editScrollProgressivize = (e: React.MouseEvent) => {
         const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null);
         const targetDoc = Cast(activeItem.presentationTargetDoc, Doc, null);
-        if (targetDoc?.zoomProgressivize) {
-            targetDoc.zoomProgressivize = false;
+        if (!targetDoc.editScrollProgressivize) {
+            targetDoc.editScrollProgressivize = true;
         } else {
-            targetDoc.zoomProgressivize = true;
+            targetDoc.editScrollProgressivize = false;
         }
     }
 
+    //Progressivize Zoom
+    @action
+    progressivizeScroll = (e: React.MouseEvent) => {
+        e.stopPropagation();
+        const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null);
+        activeItem.scrollProgressivize = !activeItem.scrollProgressivize;
+        const targetDoc = Cast(activeItem.presentationTargetDoc, Doc, null);
+        targetDoc.scrollProgressivize = !targetDoc.zoomProgressivize;
+        CollectionFreeFormDocumentView.setupScroll(targetDoc, true);
+        if (targetDoc.editScrollProgressivize) {
+            targetDoc.editScrollProgressivize = false;
+            targetDoc.currentFrame = 0;
+            targetDoc.lastFrame = 0;
+        }
+    }
+
+    //Progressivize Zoom
     @action
     progressivizeZoom = (e: React.MouseEvent) => {
         e.stopPropagation();
         const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null);
         activeItem.zoomProgressivize = !activeItem.zoomProgressivize;
         const targetDoc = Cast(activeItem.presentationTargetDoc, Doc, null);
-        const docs = DocListCast(targetDoc[Doc.LayoutFieldKey(targetDoc)]);
         targetDoc.zoomProgressivize = !targetDoc.zoomProgressivize;
-        console.log(targetDoc.zoomProgressivize);
-        if (activeItem.zoomProgressivize) {
-            console.log("progressivize");
+        CollectionFreeFormDocumentView.setupZoom(targetDoc, true);
+        if (targetDoc.editZoomProgressivize) {
+            targetDoc.editZoomProgressivize = false;
             targetDoc.currentFrame = 0;
+            targetDoc.lastFrame = 0;
         }
     }
 
@@ -1081,9 +1198,9 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
             targetDoc.editProgressivize = false;
             activeItem.presProgressivize = false;
             targetDoc.presProgressivize = false;
-            docs.forEach((doc, index) => {
-                doc.appearFrame = 0;
-            });
+            // docs.forEach((doc, index) => {
+            //     doc.appearFrame = 0;
+            // });
             targetDoc.currentFrame = 0;
             targetDoc.lastFrame = 0;
         }
@@ -1130,6 +1247,21 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
     private _isDraggingBR = false;
     private _isDraggingBL = false;
     private _isDragging = false;
+    // private _drag = "";
+
+    // onPointerDown = (e: React.PointerEvent): void => {
+    //     e.stopPropagation();
+    //     e.preventDefault();
+    //     if (e.button === 0) {
+    //         this._drag = e.currentTarget.id;
+    //         console.log(this._drag);
+    //     }
+    //     document.removeEventListener("pointermove", this.onPointerMove);
+    //     document.addEventListener("pointermove", this.onPointerMove);
+    //     document.removeEventListener("pointerup", this.onPointerUp);
+    //     document.addEventListener("pointerup", this.onPointerUp);
+    // }
+
 
     //Adds event listener so knows pointer is down and moving
     onPointerMid = (e: React.PointerEvent): void => {
@@ -1203,87 +1335,136 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
     onPointerMove = (e: PointerEvent): void => {
         const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null);
         const targetDoc = Cast(activeItem?.presentationTargetDoc, Doc, null);
+        const tagDocView = DocumentManager.Instance.getDocumentView(targetDoc);
         e.stopPropagation();
         e.preventDefault();
         const doc = document.getElementById('resizable');
-        if (doc) {
+        if (doc && tagDocView) {
+            console.log(tagDocView.props.ScreenToLocalTransform().Scale);
             let height = doc.offsetHeight;
             let width = doc.offsetWidth;
             let top = doc.offsetTop;
             let left = doc.offsetLeft;
+            // const newHeightB = height += (e.movementY * NumCast(targetDoc._viewScale));
+            // const newHeightT = height -= (e.movementY * NumCast(targetDoc._viewScale));
+            // const newWidthR = width += (e.movementX * NumCast(targetDoc._viewScale));
+            // const newWidthL = width -= (e.movementX * NumCast(targetDoc._viewScale));
+            // const newLeft = left += (e.movementX * NumCast(targetDoc._viewScale));
+            // const newTop = top += (e.movementY * NumCast(targetDoc._viewScale));
+            // switch (this._drag) {
+            //     case "": break;
+            //     case "resizer-br":
+            //         doc.style.height = newHeightB + 'px';
+            //         doc.style.width = newWidthR + 'px';
+            //         break;
+            //     case "resizer-bl":
+            //         doc.style.height = newHeightB + 'px';
+            //         doc.style.width = newWidthL + 'px';
+            //         doc.style.left = newLeft + 'px';
+            //         break;
+            //     case "resizer-tr":
+            //         doc.style.width = newWidthR + 'px';
+            //         doc.style.height = newHeightT + 'px';
+            //         doc.style.top = newTop + 'px';
+            //     case "resizer-tl":
+            //         doc.style.width = newWidthL + 'px';
+            //         doc.style.height = newHeightT + 'px';
+            //         doc.style.top = newTop + 'px';
+            //         doc.style.left = newLeft + 'px';
+            //     case "resizable":
+            //         doc.style.top = newTop + 'px';
+            //         doc.style.left = newLeft + 'px';
+            // }
             //Bottom right
             if (this._isDraggingBR) {
-                const newHeight = height += e.movementY;
+                const newHeight = height += (e.movementY * tagDocView.props.ScreenToLocalTransform().Scale);
                 doc.style.height = newHeight + 'px';
-                const newWidth = width += e.movementX;
+                const newWidth = width += (e.movementX * tagDocView.props.ScreenToLocalTransform().Scale);
                 doc.style.width = newWidth + 'px';
                 // Bottom left
             } else if (this._isDraggingBL) {
-                const newHeight = height += e.movementY;
+                const newHeight = height += (e.movementY * tagDocView.props.ScreenToLocalTransform().Scale);
                 doc.style.height = newHeight + 'px';
-                const newWidth = width -= e.movementX;
+                const newWidth = width -= (e.movementX * tagDocView.props.ScreenToLocalTransform().Scale);
                 doc.style.width = newWidth + 'px';
-                const newLeft = left += e.movementX;
+                const newLeft = left += (e.movementX * tagDocView.props.ScreenToLocalTransform().Scale);
                 doc.style.left = newLeft + 'px';
                 // Top right
             } else if (this._isDraggingTR) {
-                const newWidth = width += e.movementX;
+                const newWidth = width += (e.movementX * tagDocView.props.ScreenToLocalTransform().Scale);
                 doc.style.width = newWidth + 'px';
-                const newHeight = height -= e.movementY;
+                const newHeight = height -= (e.movementY * tagDocView.props.ScreenToLocalTransform().Scale);
                 doc.style.height = newHeight + 'px';
-                const newTop = top += e.movementY;
+                const newTop = top += (e.movementY * tagDocView.props.ScreenToLocalTransform().Scale);
                 doc.style.top = newTop + 'px';
                 // Top left
             } else if (this._isDraggingTL) {
-                const newWidth = width -= e.movementX;
+                const newWidth = width -= (e.movementX * tagDocView.props.ScreenToLocalTransform().Scale);
                 doc.style.width = newWidth + 'px';
-                const newHeight = height -= e.movementY;
+                const newHeight = height -= (e.movementY * tagDocView.props.ScreenToLocalTransform().Scale);
                 doc.style.height = newHeight + 'px';
-                const newTop = top += e.movementY;
+                const newTop = top += (e.movementY * tagDocView.props.ScreenToLocalTransform().Scale);
                 doc.style.top = newTop + 'px';
-                const newLeft = left += e.movementX;
+                const newLeft = left += (e.movementX * tagDocView.props.ScreenToLocalTransform().Scale);
                 doc.style.left = newLeft + 'px';
             } else if (this._isDragging) {
-                const newTop = top += e.movementY;
+                const newTop = top += (e.movementY * tagDocView.props.ScreenToLocalTransform().Scale);
                 doc.style.top = newTop + 'px';
-                const newLeft = left += e.movementX;
+                const newLeft = left += (e.movementX * tagDocView.props.ScreenToLocalTransform().Scale);
                 doc.style.left = newLeft + 'px';
             }
-            this.updateList(targetDoc, targetDoc["width-indexed"], width);
-            this.updateList(targetDoc, targetDoc["height-indexed"], height);
-            this.updateList(targetDoc, targetDoc["top-indexed"], top);
-            this.updateList(targetDoc, targetDoc["left-indexed"], left);
+            this.updateList(targetDoc, targetDoc["viewfinder-width-indexed"], width);
+            this.updateList(targetDoc, targetDoc["viewfinder-height-indexed"], height);
+            this.updateList(targetDoc, targetDoc["viewfinder-top-indexed"], top);
+            this.updateList(targetDoc, targetDoc["viewfinder-left-indexed"], left);
         }
     }
 
     @action
     checkList = (doc: Doc, list: any): number => {
         const x: List<number> = list;
-        return x[NumCast(doc.currentFrame)];
+        if (x && x.length >= NumCast(doc.currentFrame) + 1) {
+            return x[NumCast(doc.currentFrame)];
+        } else {
+            x.length = NumCast(doc.currentFrame) + 1;
+            x[NumCast(doc.currentFrame)] = x[NumCast(doc.currentFrame) - 1];
+            return x[NumCast(doc.currentFrame)];
+        }
+
     }
 
     @action
     updateList = (doc: Doc, list: any, val: number) => {
         const x: List<number> = list;
-        x[NumCast(doc.currentFrame)] = val;
-        list = x;
+        if (x && x.length >= NumCast(doc.currentFrame) + 1) {
+            x[NumCast(doc.currentFrame)] = val;
+            list = x;
+        } else {
+            x.length = NumCast(doc.currentFrame) + 1;
+            x[NumCast(doc.currentFrame)] = val;
+            list = x;
+        }
+
     }
 
+    // scale: NumCast(targetDoc._viewScale),
     @computed get zoomProgressivizeContainer() {
         const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null);
         const targetDoc = Cast(activeItem?.presentationTargetDoc, Doc, null);
-        CollectionFreeFormDocumentView.setupZoom(targetDoc, true);
-
-        return (
-            <div id="resizable" className="resizable" onPointerDown={this.onPointerMid} style={{ width: this.checkList(targetDoc, targetDoc["width-indexed"]), height: this.checkList(targetDoc, targetDoc["height-indexed"]), top: this.checkList(targetDoc, targetDoc["top-indexed"]), left: this.checkList(targetDoc, targetDoc["left-indexed"]), position: 'absolute' }}>
-                <div className='resizers'>
-                    <div className='resizer top-left' onPointerDown={this.onPointerTL}></div>
-                    <div className='resizer top-right' onPointerDown={this.onPointerTR}></div>
-                    <div className='resizer bottom-left' onPointerDown={this.onPointerBL}></div>
-                    <div className='resizer bottom-right' onPointerDown={this.onPointerBR}></div>
-                </div>
-            </div>
-        );
+        if (targetDoc.editZoomProgressivize) {
+            return (
+                <>
+                    <div id="resizable" className="resizable" onPointerDown={this.onPointerMid} style={{ width: this.checkList(targetDoc, targetDoc["viewfinder-width-indexed"]), height: this.checkList(targetDoc, targetDoc["viewfinder-height-indexed"]), top: this.checkList(targetDoc, targetDoc["viewfinder-top-indexed"]), left: this.checkList(targetDoc, targetDoc["viewfinder-left-indexed"]), position: 'absolute' }}>
+                        <div className='resizers'>
+                            <div id="resizer-tl" className='resizer top-left' onPointerDown={this.onPointerTL}></div>
+                            <div id="resizer-tr" className='resizer top-right' onPointerDown={this.onPointerTR}></div>
+                            <div id="resizer-bl" className='resizer bottom-left' onPointerDown={this.onPointerBL}></div>
+                            <div id="resizer-br" className='resizer bottom-right' onPointerDown={this.onPointerBR}></div>
+                        </div>
+                    </div>
+                </>
+            );
+        } else return null;
     }
 
     @computed get progressivizeChildDocs() {
@@ -1341,9 +1522,8 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
         return (<div></div>);
     }
 
-    @observable
-    toolbarWidth = (): number => {
-        console.log(this.props.PanelWidth());
+    @computed
+    get toolbarWidth(): number {
         const width = this.props.PanelWidth();
         return width;
     }
@@ -1361,8 +1541,8 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
                     <Tooltip title={<><div className="dash-tooltip">{"View paths"}</div></>}><div className={`toolbar-button ${this.pathBoolean ? "active" : ""}`}>
                         <FontAwesomeIcon icon={"exchange-alt"} onClick={this.viewPaths} />
                     </div></Tooltip>
-                    <Tooltip title={<><div className="dash-tooltip">{this.expandBoolean ? "Expand all" : "Minimize all"}</div></>}>
-                        <div className={`toolbar-button ${this.expandBoolean ? "" : "active"}`} onClick={() => { this.toggleExpand(); this.childDocs.forEach((doc, ind) => { if (this.expandBoolean) doc.presExpandInlineButton = false; else doc.presExpandInlineButton = true; }); }}>
+                    <Tooltip title={<><div className="dash-tooltip">{this.expandBoolean ? "Minimize all" : "Expand all"}</div></>}>
+                        <div className={`toolbar-button ${this.expandBoolean ? "active" : ""}`} onClick={() => { this.toggleExpand(); this.childDocs.forEach((doc, ind) => { if (this.expandBoolean) doc.presExpandInlineButton = true; else doc.presExpandInlineButton = false; }); }}>
                             <FontAwesomeIcon icon={"eye"} />
                         </div>
                     </Tooltip>
@@ -1370,13 +1550,13 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
                     <div className="toolbar-divider" />
                     <Tooltip title={<><div className="dash-tooltip">{"Transitions"}</div></>}><div className={`toolbar-button ${this.transitionTools ? "active" : ""}`} onClick={this.toggleTransitionTools}>
                         <FontAwesomeIcon icon={"rocket"} />
-                        <div style={{ display: this.toolbarWidth() > 380 ? "block" : "none" }} className="toolbar-buttonText">&nbsp; Transitions</div>
+                        <div style={{ display: this.props.PanelWidth() > 430 ? "block" : "none" }} className="toolbar-buttonText">&nbsp; Transitions</div>
                         <FontAwesomeIcon className={`dropdown ${this.transitionTools ? "active" : ""}`} icon={"angle-down"} />
                     </div></Tooltip>
                     <div className="toolbar-divider" />
                     <Tooltip title={<><div className="dash-tooltip">{"Progressivize"}</div></>}><div className={`toolbar-button ${this.progressivizeTools ? "active" : ""}`} onClick={this.toggleProgressivize}>
                         <FontAwesomeIcon icon={"tasks"} />
-                        <div style={{ display: this.toolbarWidth() > 380 ? "block" : "none" }} className="toolbar-buttonText">&nbsp; Progressivize</div>
+                        <div style={{ display: this.props.PanelWidth() > 430 ? "block" : "none" }} className="toolbar-buttonText">&nbsp; Progressivize</div>
                         <FontAwesomeIcon className={`dropdown ${this.progressivizeTools ? "active" : ""}`} icon={"angle-down"} />
                     </div></Tooltip>
                     <div className="toolbar-divider" />
@@ -1401,9 +1581,6 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
                     <div className="toolbar-button" style={{ position: 'absolute', right: 23, transform: 'rotate(45deg)', fontSize: 16 }}>
                         <FontAwesomeIcon className={"toolbar-thumbtack"} icon={"thumbtack"} />
                     </div>
-                    <Fade left when={this.moreInfoTools}>
-                        <h1>uppercase</h1>
-                    </Fade>
                     <div className={`toolbar-button ${this.moreInfoTools ? "active" : ""}`} onClick={this.toggleMoreInfo}>
                         <div className={`toolbar-moreInfo ${this.moreInfoTools ? "active" : ""}`}>
                             <div className="toolbar-moreInfoBall" />
@@ -1425,22 +1602,29 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
                     onPointerDown={e => e.stopPropagation()}
                     onChange={this.viewChanged}
                     value={mode}>
-                    <option onPointerDown={e => e.stopPropagation()} value={CollectionViewType.Invalid}>Min</option>
+                    {/* <option onPointerDown={e => e.stopPropagation()} value={CollectionViewType.Invalid}>Min</option> */}
                     <option onPointerDown={e => e.stopPropagation()} value={CollectionViewType.Stacking}>List</option>
-                    <option onPointerDown={e => e.stopPropagation()} value={CollectionViewType.Time}>Time</option>
+                    {/* <option onPointerDown={e => e.stopPropagation()} value={CollectionViewType.Time}>Time</option> */}
                     <option onPointerDown={e => e.stopPropagation()} value={CollectionViewType.Carousel}>Slides</option>
                 </select>
                 <div className="presBox-presentPanel">
-                    <div className={`presBox-button ${this.layoutDoc.presStatus !== "edit" ? "active" : ""}`} title={"Reset Presentation" + this.layoutDoc.presStatus ? "" : " From Start"} style={{ gridColumn: 2 }} onClick={() => this.startOrResetPres(0)}>
-                        <FontAwesomeIcon icon={"clock"} /> &nbsp;
-                        <FontAwesomeIcon icon={this.layoutDoc.presStatus === "auto" ? "pause" : "play"} />
-                        <div className="toolbar-divider" style={{ marginLeft: 5 }} />
-                        <FontAwesomeIcon onClick={e => { e.stopPropagation; this.togglePlay(); }} className="dropdown" icon={"angle-down"} />
-                        {this.playDropdown}
-                    </div>
-                    <div className={`presBox-button ${this.layoutDoc.presStatus === "edit" ? "present" : ""}`} title="Present" onClick={() => this.layoutDoc.presStatus = "manual"}>
-                        <FontAwesomeIcon className="present-icon" icon={"play-circle"} /> Present
-                    </div>
+                    <span className={`presBox-button ${this.layoutDoc.presStatus !== "edit" ? "active" : ""}`} title={"Reset Presentation" + this.layoutDoc.presStatus ? "" : " From Start"} style={{ minWidth: 60, gridColumn: 2 }}>
+                        <div className="presBox-button-left" onClick={() => this.startOrResetPres(0)}>
+                            <FontAwesomeIcon icon={"clock"} /> &nbsp;
+                            <FontAwesomeIcon icon={this.layoutDoc.presStatus === "auto" ? "pause" : "play"} />
+                        </div>
+                        <div className={`presBox-button-right ${this.playTools ? "active" : ""}`} onClick={e => { e.stopPropagation; this.togglePlay(); }}>
+                            <FontAwesomeIcon className="dropdown" style={{ margin: 0, transform: this.playTools ? 'rotate(180deg)' : 'rotate(0deg)' }} icon={"angle-down"} />
+                            {this.playDropdown}
+                        </div>
+                    </span>
+                    <span className={`presBox-button ${this.layoutDoc.presStatus === "edit" ? "present" : ""}`} title="Present">
+                        <div className="presBox-button-left" onClick={() => this.layoutDoc.presStatus = "manual"}><FontAwesomeIcon icon={"play-circle"} /> &nbsp; Present </div>
+                        <div className={`presBox-button-right ${this.presentTools ? "active" : ""}`} onClick={e => { e.stopPropagation; this.togglePresent(); }}>
+                            <FontAwesomeIcon className="dropdown" style={{ margin: 0, transform: this.presentTools ? 'rotate(180deg)' : 'rotate(0deg)' }} icon={"angle-down"} />
+                            {this.presentDropdown}
+                        </div>
+                    </span>
                     <div className={`presBox-button ${this.layoutDoc.presStatus !== "edit" ? "active" : ""}`} title="Back" onClick={this.back}>
                         <FontAwesomeIcon icon={"arrow-left"} />
                     </div>
diff --git a/src/client/views/presentationview/PresElementBox.tsx b/src/client/views/presentationview/PresElementBox.tsx
index 6c6bad06a..4d1195808 100644
--- a/src/client/views/presentationview/PresElementBox.tsx
+++ b/src/client/views/presentationview/PresElementBox.tsx
@@ -260,11 +260,11 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps, PresDoc
                     <div className="presElementBox-name">
                         {`${this.targetDoc?.title}`}
                     </div>
-                    <Tooltip title={<><div className="dash-tooltip">{"Movement speed"}</div></>}><div className="presElementBox-time">{this.transition}</div></Tooltip>
-                    <Tooltip title={<><div className="dash-tooltip">{"Duration of visibility"}</div></>}><div className="presElementBox-time">{this.duration}</div></Tooltip>
+                    <Tooltip title={<><div className="dash-tooltip">{"Movement speed"}</div></>}><div className="presElementBox-time" style={{ display: PresBox.Instance.toolbarWidth > 300 ? "block" : "none" }}>{this.transition}</div></Tooltip>
+                    <Tooltip title={<><div className="dash-tooltip">{"Duration of visibility"}</div></>}><div className="presElementBox-time" style={{ display: PresBox.Instance.toolbarWidth > 300 ? "block" : "none" }}>{this.duration}</div></Tooltip>
                     <Tooltip title={<><div className="dash-tooltip">{"Remove from presentation"}</div></>}><div
                         className="presElementBox-closeIcon"
-                        onPointerDown={e => e.stopPropagation()}
+                        // onPointerDown={e => e.stopPropagation()}
                         onClick={e => {
                             this.props.removeDocument?.(this.rootDoc);
                             e.stopPropagation();
-- 
cgit v1.2.3-70-g09d2


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

---
 .../apis/HypothesisAuthenticationManager.tsx       | 164 ---------------------
 src/client/apis/hypothesis/HypothesisUtils.ts      |  18 +--
 src/client/util/CurrentUserUtils.ts                |   1 -
 src/client/util/SettingsManager.tsx                |   6 -
 src/client/views/GlobalKeyHandler.ts               |   2 -
 src/client/views/linking/LinkMenuItem.tsx          |   2 +-
 src/server/ApiManagers/HypothesisManager.ts        |  40 -----
 src/server/ApiManagers/UploadManager.ts            |   1 -
 src/server/apis/google/GoogleApiServerUtils.ts     |   1 -
 src/server/database.ts                             |  38 -----
 src/server/index.ts                                |   2 -
 11 files changed, 4 insertions(+), 271 deletions(-)
 delete mode 100644 src/client/apis/HypothesisAuthenticationManager.tsx
 delete mode 100644 src/server/ApiManagers/HypothesisManager.ts

(limited to 'src/client/util')

diff --git a/src/client/apis/HypothesisAuthenticationManager.tsx b/src/client/apis/HypothesisAuthenticationManager.tsx
deleted file mode 100644
index 653f21a7a..000000000
--- a/src/client/apis/HypothesisAuthenticationManager.tsx
+++ /dev/null
@@ -1,164 +0,0 @@
-import { observable, action, reaction, runInAction, IReactionDisposer } from "mobx";
-import { observer } from "mobx-react";
-import * as React from "react";
-import MainViewModal from "../views/MainViewModal";
-import { Opt } from "../../fields/Doc";
-import { Networking } from "../Network";
-import "./HypothesisAuthenticationManager.scss";
-import { Scripting } from "../util/Scripting";
-import { Hypothesis } from "./hypothesis/HypothesisUtils";
-
-const prompt = "Paste authorization code here...";
-
-@observer
-export default class HypothesisAuthenticationManager extends React.Component<{}> {
-    public static Instance: HypothesisAuthenticationManager;
-    private authenticationLink: Opt<string> = undefined;
-    @observable private openState = false;
-    @observable private authenticationCode: Opt<string> = undefined;
-    @observable private showPasteTargetState = false;
-    @observable private success: Opt<boolean> = undefined;
-    @observable private displayLauncher = true;
-    @observable private credentials: { username: string, apiKey: string } | undefined;
-    private disposer: Opt<IReactionDisposer>;
-
-    private set isOpen(value: boolean) {
-        runInAction(() => this.openState = value);
-    }
-
-    private set shouldShowPasteTarget(value: boolean) {
-        runInAction(() => this.showPasteTargetState = value);
-    }
-
-    public cancel() {
-        this.openState && this.resetState(0, 0);
-    }
-
-    public fetchAccessToken = async (displayIfFound = false) => {
-        const jsonResponse = await Networking.FetchFromServer("/readHypothesisAccessToken");
-        const response = jsonResponse !== "" ? JSON.parse(jsonResponse) : undefined;
-        // if this is an authentication url, activate the UI to register the new access token
-        if (!response) {
-            this.isOpen = true;
-            this.authenticationLink = response;
-            return new Promise<string>(async resolve => {
-                this.disposer?.();
-                this.disposer = reaction(
-                    () => this.authenticationCode,
-                    async authenticationCode => {
-                        const userProfile = authenticationCode && await Hypothesis.fetchUser(authenticationCode);
-                        if (userProfile && userProfile.userid !== null) {
-                            this.disposer?.();
-                            const hypothesisUsername = Hypothesis.extractUsername(userProfile.userid); // extract username from profile
-                            Networking.PostToServer("/writeHypothesisAccessToken", { authenticationCode, hypothesisUsername });
-                            runInAction(() => {
-                                this.success = true;
-                                this.credentials = { username: hypothesisUsername, apiKey: authenticationCode! };
-                            });
-                            this.resetState();
-                            resolve(authenticationCode);
-                        }
-                    }
-                );
-            });
-        }
-
-        if (displayIfFound) {
-            runInAction(() => {
-                this.success = true;
-                this.credentials = response;
-            });
-            this.resetState(-1, -1);
-            this.isOpen = true;
-        }
-        return response;
-    }
-
-    resetState = action((visibleForMS: number = 3000, fadesOutInMS: number = 500) => {
-        if (!visibleForMS && !fadesOutInMS) {
-            runInAction(() => {
-                this.isOpen = false;
-                this.success = undefined;
-                this.displayLauncher = true;
-                this.credentials = undefined;
-                this.shouldShowPasteTarget = false;
-                this.authenticationCode = undefined;
-            });
-            return;
-        }
-        this.authenticationCode = undefined;
-        this.displayLauncher = false;
-        this.shouldShowPasteTarget = false;
-        if (visibleForMS > 0 && fadesOutInMS > 0) {
-            setTimeout(action(() => {
-                this.isOpen = false;
-                setTimeout(action(() => {
-                    this.success = undefined;
-                    this.displayLauncher = true;
-                    this.credentials = undefined;
-                }), fadesOutInMS);
-            }), visibleForMS);
-        }
-    });
-
-    constructor(props: {}) {
-        super(props);
-        HypothesisAuthenticationManager.Instance = this;
-    }
-
-    private get renderPrompt() {
-        return (
-            <div className={'authorize-container'}>
-
-                {this.displayLauncher ? <button
-                    className={"dispatch"}
-                    onClick={() => {
-                        this.shouldShowPasteTarget = true;
-                    }}
-                    style={{ marginBottom: this.showPasteTargetState ? 15 : 0 }}
-                >Authorize a Hypothesis account...</button> : (null)}
-                {this.showPasteTargetState ? <input
-                    className={'paste-target'}
-                    onChange={action(e => this.authenticationCode = e.currentTarget.value)}
-                    placeholder={prompt}
-                /> : (null)}
-                {this.credentials ?
-                    <>
-                        <span
-                            className={'welcome'}
-                        >Welcome to Dash, {this.credentials.username}
-                        </span>
-                        <div
-                            className={'disconnect'}
-                            onClick={async () => {
-                                await Networking.FetchFromServer("/revokeHypothesisAccessToken");
-                                this.resetState(0, 0);
-                            }}
-                        >Disconnect Account</div>
-                    </> : (null)}
-            </div>
-        );
-    }
-
-    private get dialogueBoxStyle() {
-        const borderColor = this.success === undefined ? "black" : this.success ? "green" : "red";
-        return { borderColor, transition: "0.2s borderColor ease", zIndex: 1002 };
-    }
-
-    render() {
-        return (
-            <MainViewModal
-                isDisplayed={this.openState}
-                interactive={true}
-                contents={this.renderPrompt}
-                // overlayDisplayedOpacity={0.9}
-                dialogueBoxStyle={this.dialogueBoxStyle}
-                overlayStyle={{ zIndex: 1001 }}
-                closeOnExternalClick={action(() => this.isOpen = false)}
-            />
-        );
-    }
-
-}
-
-Scripting.addGlobal("HypothesisAuthenticationManager", HypothesisAuthenticationManager);
\ No newline at end of file
diff --git a/src/client/apis/hypothesis/HypothesisUtils.ts b/src/client/apis/hypothesis/HypothesisUtils.ts
index 8eaad2905..a9d807976 100644
--- a/src/client/apis/hypothesis/HypothesisUtils.ts
+++ b/src/client/apis/hypothesis/HypothesisUtils.ts
@@ -1,5 +1,4 @@
 import { StrCast, Cast } from "../../../fields/Types";
-import HypothesisAuthenticationManager from "../HypothesisAuthenticationManager";
 import { SearchUtil } from "../../util/SearchUtil";
 import { action } from "mobx";
 import { Doc } from "../../../fields/Doc";
@@ -8,18 +7,6 @@ import { WebField } from "../../../fields/URLField";
 import { DocumentManager } from "../../util/DocumentManager";
 
 export namespace Hypothesis {
-    export const fetchUser = async (apiKey: string) => {
-        const response = await fetch('https://api.hypothes.is/api/profile', {
-            headers: {
-                'Authorization': `Bearer ${apiKey}`,
-            },
-        });
-        if (response.ok) {
-            return response.json();
-        } else {
-            throw new Error('DASH: Error in fetchUser GET request');
-        }
-    };
 
     // Send Hypothes.is client request to edit an annotation to add a Dash hyperlink
     export const makeLink = async (title: string, url: string, annotationId: string) => {
@@ -40,6 +27,7 @@ export namespace Hypothesis {
 
     // Construct an URL which will automatically scroll the web page to a specific annotation's position
     export const makeAnnotationUrl = (annotationId: string, baseUrl: string) => {
+        console.log("baseUrl", baseUrl, annotationId);
         return `${baseUrl}#annotations:${annotationId}`;
     };
 
@@ -58,8 +46,8 @@ export namespace Hypothesis {
                 doc.type === DocumentType.WEB && doc.data
             );
             filteredDocs.forEach(doc => {
-                console.log(Cast(doc.data, WebField)?.url.href);
-                if (uri === Cast(doc.data, WebField)?.url.href) results.push(doc); // TODO check history? imperfect matches?
+                console.log(uri, Cast(doc.data, WebField)?.url.href, uri === Cast(doc.data, WebField)?.url.href);
+                (uri === Cast(doc.data, WebField)?.url.href) && results.push(doc); // TODO check history? imperfect matches?
             });
         }));
 
diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index ff33d35e0..1fe611b12 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -441,7 +441,6 @@ export class CurrentUserUtils {
             { toolTip: "Drag a document previewer", title: "Prev", icon: "expand", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory,true)', dragFactory: doc.emptyDocHolder as Doc },
             { toolTip: "Toggle a Calculator REPL", title: "repl", icon: "calculator", click: 'addOverlayWindow("ScriptingRepl", { x: 300, y: 100, width: 200, height: 200, title: "Scripting REPL" })' },
             { toolTip: "Connect a Google Account", title: "Google Account", icon: "external-link-alt", click: 'GoogleAuthenticationManager.Instance.fetchOrGenerateAccessToken(true)' },
-            { toolTip: "Connect a Hypothesis Account", title: "Hypothesis Account", icon: "heading", click: 'HypothesisAuthenticationManager.Instance.fetchAccessToken(true)' },
         ];
 
     }
diff --git a/src/client/util/SettingsManager.tsx b/src/client/util/SettingsManager.tsx
index 90d59aa51..a9c2d5e15 100644
--- a/src/client/util/SettingsManager.tsx
+++ b/src/client/util/SettingsManager.tsx
@@ -12,7 +12,6 @@ import { CurrentUserUtils } from "./CurrentUserUtils";
 import { Utils } from "../../Utils";
 import { Doc } from "../../fields/Doc";
 import GroupManager from "./GroupManager";
-import HypothesisAuthenticationManager from "../apis/HypothesisAuthenticationManager";
 import GoogleAuthenticationManager from "../apis/GoogleAuthenticationManager";
 import { togglePlaygroundMode } from "../../fields/util";
 
@@ -92,10 +91,6 @@ export default class SettingsManager extends React.Component<{}> {
     googleAuthorize = (event: any) => {
         GoogleAuthenticationManager.Instance.fetchOrGenerateAccessToken(true);
     }
-    @action
-    hypothesisAuthorize = (event: any) => {
-        HypothesisAuthenticationManager.Instance.fetchAccessToken(true);
-    }
 
     @action
     togglePlaygroundMode = () => {
@@ -118,7 +113,6 @@ export default class SettingsManager extends React.Component<{}> {
                         <button onClick={this.noviceToggle} value="data">{`Set ${Doc.UserDoc().noviceMode ? "developer" : "novice"} mode`}</button>
                         <button onClick={this.togglePlaygroundMode}>{`${this.playgroundMode ? "Disable" : "Enable"} playground mode`}</button>
                         <button onClick={this.googleAuthorize} value="data">{`Link to Google`}</button>
-                        <button onClick={this.hypothesisAuthorize} value="data">{`Link to Hypothes.is`}</button>
                         <button onClick={() => GroupManager.Instance.open()}>Manage groups</button>
                         <button onClick={() => window.location.assign(Utils.prepend("/logout"))}>
                             {CurrentUserUtils.GuestWorkspace ? "Exit" : "Log Out"}
diff --git a/src/client/views/GlobalKeyHandler.ts b/src/client/views/GlobalKeyHandler.ts
index 086085db5..e1232e6f8 100644
--- a/src/client/views/GlobalKeyHandler.ts
+++ b/src/client/views/GlobalKeyHandler.ts
@@ -7,7 +7,6 @@ import { List } from "../../fields/List";
 import { ScriptField } from "../../fields/ScriptField";
 import { Cast, PromiseValue } from "../../fields/Types";
 import GoogleAuthenticationManager from "../apis/GoogleAuthenticationManager";
-import HypothesisAuthenticationManager from "../apis/HypothesisAuthenticationManager";
 import { DocServer } from "../DocServer";
 import { DocumentType } from "../documents/DocumentTypes";
 import { DictationManager } from "../util/DictationManager";
@@ -107,7 +106,6 @@ export default class KeyManager {
                 DictationManager.Controls.stop();
                 // RecommendationsBox.Instance.closeMenu();
                 GoogleAuthenticationManager.Instance.cancel();
-                HypothesisAuthenticationManager.Instance.cancel();
                 SharingManager.Instance.close();
                 GroupManager.Instance.close();
                 CollectionFreeFormViewChrome.Instance.clearKeep();
diff --git a/src/client/views/linking/LinkMenuItem.tsx b/src/client/views/linking/LinkMenuItem.tsx
index 079e130ea..8503bcbeb 100644
--- a/src/client/views/linking/LinkMenuItem.tsx
+++ b/src/client/views/linking/LinkMenuItem.tsx
@@ -156,7 +156,7 @@ export class LinkMenuItem extends React.Component<LinkMenuItemProps> {
         const linkDoc = this.props.linkDoc;
 
         if (linkDoc.followLinkLocation === "openExternal" && this.props.destinationDoc.type === DocumentType.WEB) {
-            window.open(Hypothesis.makeAnnotationUrl(StrCast(this.props.linkDoc.annotationId), '_blank'));
+            window.open(Hypothesis.makeAnnotationUrl(StrCast(linkDoc.annotationId), StrCast(linkDoc.annotationUri)), '_blank');
             return;
         }
 
diff --git a/src/server/ApiManagers/HypothesisManager.ts b/src/server/ApiManagers/HypothesisManager.ts
deleted file mode 100644
index 370d02a49..000000000
--- a/src/server/ApiManagers/HypothesisManager.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-import ApiManager, { Registration } from "./ApiManager";
-import { Method, _permission_denied } from "../RouteManager";
-import { GoogleApiServerUtils } from "../apis/google/GoogleApiServerUtils";
-import { Database } from "../database";
-import { writeFile, readFile, readFileSync, existsSync } from "fs";
-import { serverPathToFile, Directory } from "./UploadManager";
-
-export default class HypothesisManager extends ApiManager {
-
-    protected initialize(register: Registration): void {
-
-        register({
-            method: Method.GET,
-            subscription: "/readHypothesisAccessToken",
-            secureHandler: async ({ user, res }) => {
-                const credentials = await Database.Auxiliary.HypothesisAccessToken.Fetch(user.id);
-                res.send(credentials ? { username: credentials.hypothesisUsername, apiKey: credentials.hypothesisApiKey } : "");
-            }
-        });
-
-        register({
-            method: Method.POST,
-            subscription: "/writeHypothesisAccessToken",
-            secureHandler: async ({ user, req, res }) => {
-                await Database.Auxiliary.HypothesisAccessToken.Write(user.id, req.body.authenticationCode, req.body.hypothesisUsername);
-                res.send();
-            }
-        });
-
-        register({
-            method: Method.GET,
-            subscription: "/revokeHypothesisAccessToken",
-            secureHandler: async ({ user, res }) => {
-                await Database.Auxiliary.HypothesisAccessToken.Revoke(user.id);
-                res.send();
-            }
-        });
-
-    }
-}
\ No newline at end of file
diff --git a/src/server/ApiManagers/UploadManager.ts b/src/server/ApiManagers/UploadManager.ts
index 4455d11eb..bd242db5e 100644
--- a/src/server/ApiManagers/UploadManager.ts
+++ b/src/server/ApiManagers/UploadManager.ts
@@ -26,7 +26,6 @@ export enum Directory {
     text = "text",
     pdf_thumbnails = "pdf_thumbnails",
     audio = "audio",
-    hypothesis = "hypothesis"
 }
 
 export function serverPathToFile(directory: Directory, filename: string) {
diff --git a/src/server/apis/google/GoogleApiServerUtils.ts b/src/server/apis/google/GoogleApiServerUtils.ts
index b0157a85f..64bafe7fb 100644
--- a/src/server/apis/google/GoogleApiServerUtils.ts
+++ b/src/server/apis/google/GoogleApiServerUtils.ts
@@ -40,7 +40,6 @@ export namespace GoogleApiServerUtils {
     export enum Service {
         Documents = "Documents",
         Slides = "Slides",
-        Hypothesis = "Hypothesis"
     }
 
     /**
diff --git a/src/server/database.ts b/src/server/database.ts
index 456c1c254..64c5b7e4b 100644
--- a/src/server/database.ts
+++ b/src/server/database.ts
@@ -305,7 +305,6 @@ export namespace Database {
         export enum AuxiliaryCollections {
             GooglePhotosUploadHistory = "uploadedFromGooglePhotos",
             GoogleAccess = "googleAuthentication",
-            HypothesisAccess = "hypothesisAuthentication"
         }
 
         /**
@@ -406,43 +405,6 @@ export namespace Database {
 
         }
 
-        export namespace HypothesisAccessToken {
-            /**
-             * Format stored in database.
-             */
-            interface StoredCredentials {
-                userId: string;
-                hypothesisApiKey: string;
-                hypothesisUsername: string;
-                _id?: string;
-            }
-
-            /**
-             * Writes the @param hypothesisApiKey to the database, associated
-             * with @param userId for later retrieval and updating. 
-             */
-            export const Write = async (userId: string, hypothesisApiKey: string, hypothesisUsername: string) => {
-                return Instance.insert({ userId, hypothesisApiKey, hypothesisUsername }, AuxiliaryCollections.HypothesisAccess);
-            };
-
-            /**
-             * Retrieves the credentials associaed with @param userId
-             * and optionally removes their database id according to @param removeId. 
-             */
-            export const Fetch = async (userId: string, removeId = true): Promise<Opt<StoredCredentials>> => {
-                return SanitizedSingletonQuery<StoredCredentials>({ userId }, AuxiliaryCollections.HypothesisAccess, removeId);
-            };
-
-            /**
-            * Revokes the credentials associated with @param userId. 
-            */
-            export const Revoke = async (userId: string) => {
-                const entry = await Fetch(userId, false);
-                if (entry) {
-                    Instance.delete({ _id: entry._id }, AuxiliaryCollections.HypothesisAccess);
-                }
-            };
-        }
     }
 
 }
diff --git a/src/server/index.ts b/src/server/index.ts
index 9af4b00bc..5c313654c 100644
--- a/src/server/index.ts
+++ b/src/server/index.ts
@@ -18,7 +18,6 @@ import PDFManager from "./ApiManagers/PDFManager";
 import UploadManager from "./ApiManagers/UploadManager";
 import { log_execution } from "./ActionUtilities";
 import GeneralGoogleManager from "./ApiManagers/GeneralGoogleManager";
-import HypothesisManager from "./ApiManagers/HypothesisManager";
 import GooglePhotosManager from "./ApiManagers/GooglePhotosManager";
 import { Logger } from "./ProcessFactory";
 import { yellow } from "colors";
@@ -72,7 +71,6 @@ function routeSetter({ isRelease, addSupervisedRoute, logRegistrationOutcome }:
         new DeleteManager(),
         new UtilManager(),
         new GeneralGoogleManager(),
-        new HypothesisManager(),
         new GooglePhotosManager(),
     ];
 
-- 
cgit v1.2.3-70-g09d2


From 1eb12a6dfadf4caf3868d4d5b373859f5999214f Mon Sep 17 00:00:00 2001
From: Andy Rickert <andrew_rickert@brown.edu>
Date: Fri, 31 Jul 2020 19:35:32 -0400
Subject: bugfix

---
 src/client/util/SearchUtil.ts         | 2 +-
 src/client/views/search/SearchBox.tsx | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

(limited to 'src/client/util')

diff --git a/src/client/util/SearchUtil.ts b/src/client/util/SearchUtil.ts
index 911340ab1..f54e13197 100644
--- a/src/client/util/SearchUtil.ts
+++ b/src/client/util/SearchUtil.ts
@@ -30,7 +30,7 @@ export namespace SearchUtil {
         rows?: number;
         fq?: string;
         allowAliases?: boolean;
-        "facet"?:string;
+        "facet"?: string;
         "facet.field"?: string;
     }
     export function Search(query: string, returnDocs: true, options?: SearchParams): Promise<DocSearchResult>;
diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx
index 72cb3a04e..410e6afa5 100644
--- a/src/client/views/search/SearchBox.tsx
+++ b/src/client/views/search/SearchBox.tsx
@@ -746,7 +746,7 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
                         if (result) {
                             const highlights = Array.from([...Array.from(new Set(result[1]).values())]);
                             let lines = new List<string>(result[2]);
-                            result[0]._height = 46;
+                            console.log(lines);
                             result[0].lines = lines;
                             result[0].highlighting = highlights.join(", ");
                             highlights.forEach((item) => headers.add(item));
@@ -763,7 +763,7 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
                             const highlights = Array.from([...Array.from(new Set(result[1]).values())]);
                             let lines = new List<string>(result[2]);
                             highlights.forEach((item) => headers.add(item));
-                            result[0]._height = 46;
+                            console.log(lines);
                             result[0].lines = lines;
                             result[0].highlighting = highlights.join(", ");
                             if (i < this._visibleDocuments.length) {
-- 
cgit v1.2.3-70-g09d2


From 8303cd6389fe9e3c861d7b429bb4e32d3417a895 Mon Sep 17 00:00:00 2001
From: Geireann Lindfield Roberts <60007097+geireann@users.noreply.github.com>
Date: Mon, 3 Aug 2020 02:58:31 +0800
Subject: Merge remote-tracking branch 'origin/menu_restructure' into
 presentation_updates

---
 package.json                                       |   6 +-
 src/Utils.ts                                       |   4 +-
 src/client/documents/DocumentTypes.ts              |   1 +
 src/client/documents/Documents.ts                  |  12 +
 src/client/util/CurrentUserUtils.ts                | 116 ++-
 src/client/util/GroupMemberView.scss               |   2 +-
 src/client/util/SelectionManager.ts                |   3 +
 src/client/util/SharingManager.tsx                 |   6 +-
 src/client/views/ContextMenuItem.tsx               |   4 +-
 src/client/views/DocumentButtonBar.tsx             |   8 +-
 src/client/views/DocumentDecorations.tsx           |  19 +-
 src/client/views/EditableView.tsx                  |   2 +-
 src/client/views/MainView.scss                     | 135 +++-
 src/client/views/MainView.tsx                      | 393 ++++++----
 src/client/views/PreviewCursor.tsx                 |   6 +-
 src/client/views/PropertiesButtons.scss            | 119 +++
 src/client/views/PropertiesButtons.tsx             | 598 ++++++++++++++
 .../views/collections/CollectionDockingView.scss   |  16 +-
 .../views/collections/CollectionDockingView.tsx    |  20 +-
 src/client/views/collections/CollectionMenu.tsx    |  79 +-
 .../views/collections/CollectionSchemaView.tsx     |   2 +-
 .../views/collections/CollectionStackingView.tsx   |   1 +
 .../CollectionStackingViewFieldColumn.tsx          |   2 +-
 src/client/views/collections/CollectionSubView.tsx |   2 +-
 .../views/collections/CollectionTreeView.tsx       |   7 +-
 src/client/views/collections/CollectionView.scss   |   1 +
 src/client/views/collections/CollectionView.tsx    |  11 +-
 .../views/collections/ParentDocumentSelector.tsx   |   6 +-
 src/client/views/collections/SchemaTable.tsx       |   8 +-
 .../collectionFreeForm/CollectionFreeFormView.tsx  |  12 +-
 .../collectionFreeForm/FormatShapePane.tsx         |  27 +-
 .../collectionFreeForm/PropertiesView.scss         | 620 +++++++++++++++
 .../collectionFreeForm/PropertiesView.tsx          | 858 +++++++++++++++++++++
 src/client/views/linking/LinkMenuItem.tsx          |   3 +-
 .../views/nodes/ContentFittingDocumentView.tsx     |   3 +
 src/client/views/nodes/DocumentContentsView.tsx    |   3 +-
 src/client/views/nodes/DocumentLinksButton.tsx     |   5 +-
 src/client/views/nodes/DocumentView.tsx            |  62 +-
 src/client/views/nodes/FieldView.tsx               |   1 +
 src/client/views/nodes/FontIconBox.scss            |   2 +-
 src/client/views/nodes/MenuIconBox.scss            |  49 ++
 src/client/views/nodes/MenuIconBox.tsx             |  33 +
 src/client/views/nodes/PresBox.tsx                 |  10 +-
 .../views/nodes/formattedText/DashFieldView.tsx    |   2 +-
 .../views/nodes/formattedText/FormattedTextBox.tsx |   4 +-
 .../views/nodes/formattedText/RichTextMenu.tsx     |  41 +-
 src/client/views/nodes/formattedText/nodes_rts.ts  |   8 +-
 src/fields/Doc.ts                                  |   6 +-
 src/server/ActionUtilities.ts                      |  10 +-
 src/server/ApiManagers/UtilManager.ts              |   1 -
 src/server/DashUploadUtils.ts                      |  27 +-
 src/server/GarbageCollector.ts                     |   6 +-
 src/server/MemoryDatabase.ts                       |   5 +-
 src/server/Message.ts                              |   2 +-
 src/server/ProcessFactory.ts                       |   6 +-
 src/server/Recommender.ts                          | 133 ----
 src/server/RouteManager.ts                         |   8 +-
 src/server/Search.ts                               |   2 +-
 src/server/database.ts                             |   8 +-
 src/server/downsize.ts                             |   2 +-
 src/server/index.ts                                |  34 +-
 src/server/server_Initialization.ts                |  38 +-
 src/server/websocket.ts                            |  27 +-
 63 files changed, 3126 insertions(+), 521 deletions(-)
 create mode 100644 src/client/views/PropertiesButtons.scss
 create mode 100644 src/client/views/PropertiesButtons.tsx
 create mode 100644 src/client/views/collections/collectionFreeForm/PropertiesView.scss
 create mode 100644 src/client/views/collections/collectionFreeForm/PropertiesView.tsx
 create mode 100644 src/client/views/nodes/MenuIconBox.scss
 create mode 100644 src/client/views/nodes/MenuIconBox.tsx
 delete mode 100644 src/server/Recommender.ts

(limited to 'src/client/util')

diff --git a/package.json b/package.json
index 11af6b2c6..420765e7c 100644
--- a/package.json
+++ b/package.json
@@ -11,8 +11,8 @@
     },
     "scripts": {
         "start-release": "cross-env RELEASE=true NODE_OPTIONS=--max_old_space_size=4096 ts-node-dev -- src/server/index.ts",
-        "start": "cross-env NODE_OPTIONS=--max_old_space_size=4096 ts-node-dev --transpile-only -- src/server/index.ts",
-        "oldstart": "cross-env NODE_OPTIONS=--max_old_space_size=4096 ts-node-dev -- src/server/index.ts",
+        "start": "cross-env NODE_OPTIONS=--max_old_space_size=4096 ts-node-dev --debug --transpile-only  -- src/server/index.ts",
+        "oldstart": "cross-env NODE_OPTIONS=--max_old_space_size=4096 ts-node-dev --debug -- src/server/index.ts",
         "debug": "cross-env NODE_OPTIONS=--max_old_space_size=8192 ts-node-dev --transpile-only --inspect -- src/server/index.ts",
         "build": "cross-env NODE_OPTIONS=--max_old_space_size=8192 webpack --env production",
         "test": "mocha -r ts-node/register test/**/*.ts",
@@ -260,4 +260,4 @@
         "xoauth2": "^1.2.0",
         "xregexp": "^4.3.0"
     }
-}
+}
\ No newline at end of file
diff --git a/src/Utils.ts b/src/Utils.ts
index a01a94134..0b057dc23 100644
--- a/src/Utils.ts
+++ b/src/Utils.ts
@@ -1,8 +1,8 @@
 import v4 = require('uuid/v4');
 import v5 = require("uuid/v5");
-import { Socket, Room } from 'socket.io';
-import { Message } from './server/Message';
 import { ColorState } from 'react-color';
+import { Socket } from 'socket.io';
+import { Message } from './server/Message';
 
 export namespace Utils {
     export let DRAG_THRESHOLD = 4;
diff --git a/src/client/documents/DocumentTypes.ts b/src/client/documents/DocumentTypes.ts
index 985fcce11..659f78970 100644
--- a/src/client/documents/DocumentTypes.ts
+++ b/src/client/documents/DocumentTypes.ts
@@ -13,6 +13,7 @@ export enum DocumentType {
     INK = "ink",        // ink stroke
     SCREENSHOT = "screenshot",  // view of a desktop application
     FONTICON = "fonticonbox",   // font icon
+    MENUICON = "menuiconbox",
     QUERY = "query",            // search query
     LABEL = "label",            // simple text label
     BUTTON = "button",          // onClick button
diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index 0da93aa7a..01cdb1eee 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -31,6 +31,7 @@ import { ColorBox } from "../views/nodes/ColorBox";
 import { ComparisonBox } from "../views/nodes/ComparisonBox";
 import { DocHolderBox } from "../views/nodes/DocHolderBox";
 import { FontIconBox } from "../views/nodes/FontIconBox";
+import { MenuIconBox } from "../views/nodes/MenuIconBox";
 import { FormattedTextBox } from "../views/nodes/formattedText/FormattedTextBox";
 import { ImageBox } from "../views/nodes/ImageBox";
 import { KeyValueBox } from "../views/nodes/KeyValueBox";
@@ -305,6 +306,13 @@ export namespace Docs {
                 layout: { view: FontIconBox, dataField: defaultDataKey },
                 options: { _width: 40, _height: 40, borderRounding: "100%" },
             }],
+            [DocumentType.MENUICON, {
+                layout: { view: MenuIconBox, dataField: defaultDataKey },
+            }],
+            // [DocumentType.RECOMMENDATION, {
+            //     layout: { view: RecommendationsBox, dataField: defaultDataKey },
+            //     options: { _width: 200, _height: 200 },
+            // }],
             [DocumentType.WEBCAM, {
                 layout: { view: DashWebRTCVideo, dataField: defaultDataKey }
             }],
@@ -791,6 +799,10 @@ export namespace Docs {
             return InstanceFromProto(Prototypes.get(DocumentType.FONTICON), undefined, { hideLinkButton: true, ...(options || {}) });
         }
 
+        export function MenuIconDocument(options?: DocumentOptions) {
+            return InstanceFromProto(Prototypes.get(DocumentType.MENUICON), undefined, { hideLinkButton: true, ...(options || {}) });
+        }
+
         export function PresElementBoxDocument(options?: DocumentOptions) {
             return InstanceFromProto(Prototypes.get(DocumentType.PRESELEMENT), undefined, { ...(options || {}) });
         }
diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index 6d752832a..b37c91c56 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -38,6 +38,16 @@ export class CurrentUserUtils {
     @observable public static GuestWorkspace: Doc | undefined;
     @observable public static GuestMobile: Doc | undefined;
 
+    @observable public static toolsBtn: any | undefined;
+    @observable public static libraryBtn: any | undefined;
+    @observable public static searchBtn: any | undefined;
+
+    @observable public static toolsStack: any | undefined;
+    @observable public static workspaceStack: any | undefined;
+    @observable public static catalogStack: any | undefined;
+    @observable public static closedStack: any | undefined;
+    @observable public static searchStack: any | undefined;
+
     // sets up the default User Templates - slideView, queryView, descriptionView
     static setupUserTemplateButtons(doc: Doc) {
         if (doc["template-button-query"] === undefined) {
@@ -492,6 +502,46 @@ export class CurrentUserUtils {
         return doc.myItemCreators as Doc;
     }
 
+    static menuBtnDescriptions(): {
+        title: string, icon: string, click: string,
+    }[] {
+        return [
+            { title: "Workspace", icon: "desktop", click: 'scriptContext.selectMenu("Workspace")' },
+            { title: "Catalog", icon: "file", click: 'scriptContext.selectMenu("Catalog")' },
+            { title: "Archive", icon: "archive", click: 'scriptContext.selectMenu("Archive")' },
+            { title: "Import", icon: "upload", click: 'scriptContext.selectMenu("Import")' },
+            { title: "Sharing", icon: "users", click: 'scriptContext.selectMenu("Sharing")' },
+            { title: "Tools", icon: "wrench", click: 'scriptContext.selectMenu("Tools")' },
+            { title: "Help", icon: "question-circle", click: 'scriptContext.selectMenu("Help")' },
+            { title: "Settings", icon: "cog", click: 'scriptContext.selectMenu("Settings")' },
+        ];
+    }
+
+    static setupMenuPanel(doc: Doc) {
+        if (doc.menuStack === undefined) {
+            const buttons = CurrentUserUtils.menuBtnDescriptions();
+            const menuBtns = buttons.map(({ title, icon, click }) => Docs.Create.MenuIconDocument({
+                icon,
+                title,
+                _backgroundColor: "black",
+                stayInCollection: true,
+                _width: 60,
+                _height: 60,
+                onClick: ScriptField.MakeScript(click, { scriptContext: "any" }),
+            }));
+
+            doc.menuStack = new PrefetchProxy(Docs.Create.StackingDocument(menuBtns, {
+                title: "menuItemPanel",
+                _backgroundColor: "black",
+                _gridGap: 0,
+                _yMargin: 0,
+                _yPadding: 0, _xMargin: 0, _autoHeight: false, _width: 60, _columnWidth: 60, lockedPosition: true, _chromeStatus: "disabled",
+            }));
+        }
+        return doc.menuStack as Doc;
+    }
+
+
     // Sets up mobile menu if it is undefined creates a new one, otherwise returns existing menu
     static setupActiveMobileMenu(doc: Doc) {
         if (doc.activeMobileMenu === undefined) {
@@ -601,6 +651,8 @@ export class CurrentUserUtils {
         const creatorBtns = await CurrentUserUtils.setupCreatorButtons(doc);
         const templateBtns = CurrentUserUtils.setupUserTemplateButtons(doc);
 
+        doc["tabs-button-tools"] = undefined;
+
         if (doc.myCreators === undefined) {
             doc.myCreators = new PrefetchProxy(Docs.Create.StackingDocument([creatorBtns, templateBtns], {
                 title: "all Creators", _yMargin: 0, _autoHeight: true, _xMargin: 0,
@@ -617,8 +669,11 @@ export class CurrentUserUtils {
 
         if (doc["tabs-button-tools"] === undefined) {
             const toolsStack = new PrefetchProxy(Docs.Create.StackingDocument([doc.myCreators as Doc, doc.myColorPicker as Doc], {
-                _width: 500, lockedPosition: true, _chromeStatus: "disabled", title: "tools stack", forceActive: true
+                _width: 500, lockedPosition: true, _chromeStatus: "disabled", hideFilterView: true, title: "tools stack", forceActive: true
             })) as any as Doc;
+
+            CurrentUserUtils.toolsStack = toolsStack;
+
             doc["tabs-button-tools"] = new PrefetchProxy(Docs.Create.ButtonDocument({
                 _width: 35, _height: 25, title: "Tools", _fontSize: "10pt",
                 letterSpacing: "0px", textTransform: "unset", borderRounding: "5px 5px 0px 0px", boxShadow: "3px 3px 0px rgb(34, 34, 34)",
@@ -627,41 +682,63 @@ export class CurrentUserUtils {
                 dragFactory: toolsStack,
                 removeDropProperties: new List<string>(["lockedPosition"]),
                 stayInCollection: true,
+                hideFilterView: true,
                 targetContainer: new PrefetchProxy(sidebarContainer) as any as Doc,
                 onClick: ScriptField.MakeScript("this.targetContainer.proto = this.sourcePanel"),
             }));
         }
-        (doc["tabs-button-tools"] as Doc).sourcePanel; // prefetch sourcePanel
-        return doc["tabs-button-tools"] as Doc;
+        (doc["tabs-button-tools"] as any as Doc).sourcePanel; // prefetch sourcePanel
+
+        return doc["tabs-button-tools"] as any as Doc;
     }
 
     static setupWorkspaces(doc: Doc) {
         // setup workspaces library item
+        doc.myWorkspaces === undefined;
         if (doc.myWorkspaces === undefined) {
             doc.myWorkspaces = new PrefetchProxy(Docs.Create.TreeDocument([], {
-                title: "WORKSPACES", _height: 100, forceActive: true, boxShadow: "0 0", lockedPosition: true,
+                title: "WORKSPACES", _height: 100, forceActive: true, boxShadow: "0 0", lockedPosition: true, treeViewOpen: true,
             }));
         }
         const newWorkspace = ScriptField.MakeScript(`createNewWorkspace()`);
         (doc.myWorkspaces as Doc).contextMenuScripts = new List<ScriptField>([newWorkspace!]);
         (doc.myWorkspaces as Doc).contextMenuLabels = new List<string>(["Create New Workspace"]);
 
+        const workspaces = doc.myWorkspaces as Doc;
+
+        CurrentUserUtils.workspaceStack = new PrefetchProxy(Docs.Create.TreeDocument([workspaces], {
+            title: " ", _xMargin: 5, _yMargin: 5, _gridGap: 5, forceActive: true, childDropAction: "alias",
+            treeViewTruncateTitleWidth: 150, hideFilterView: true, treeViewPreventOpen: false, treeViewOpen: true,
+            lockedPosition: true, boxShadow: "0 0", dontRegisterChildViews: true, targetDropAction: "same"
+        })) as any as Doc;
+
         return doc.myWorkspaces as Doc;
     }
     static setupCatalog(doc: Doc) {
+        doc.myCatalog === undefined;
         if (doc.myCatalog === undefined) {
             doc.myCatalog = new PrefetchProxy(Docs.Create.SchemaDocument([], [], {
                 title: "CATALOG", _height: 1000, _fitWidth: true, forceActive: true, boxShadow: "0 0", treeViewPreventOpen: false,
-                childDropAction: "alias", targetDropAction: "same", stayInCollection: true,
+                childDropAction: "alias", targetDropAction: "same", stayInCollection: true, treeViewOpen: true,
             }));
         }
+
+        const catalog = doc.myCatalog as Doc;
+
+        CurrentUserUtils.catalogStack = new PrefetchProxy(Docs.Create.TreeDocument([catalog], {
+            title: " ", _xMargin: 5, _yMargin: 5, _gridGap: 5, forceActive: true, childDropAction: "alias",
+            treeViewTruncateTitleWidth: 150, hideFilterView: true, treeViewPreventOpen: false, treeViewOpen: true,
+            lockedPosition: true, boxShadow: "0 0", dontRegisterChildViews: true, targetDropAction: "same"
+        })) as any as Doc;
+
         return doc.myCatalog as Doc;
     }
     static setupRecentlyClosed(doc: Doc) {
         // setup Recently Closed library item
+        doc.myRecentlyClosed === undefined;
         if (doc.myRecentlyClosed === undefined) {
             doc.myRecentlyClosed = new PrefetchProxy(Docs.Create.TreeDocument([], {
-                title: "RECENTLY CLOSED", _height: 75, forceActive: true, boxShadow: "0 0", treeViewPreventOpen: true, stayInCollection: true,
+                title: "RECENTLY CLOSED", _height: 75, forceActive: true, boxShadow: "0 0", treeViewPreventOpen: false, treeViewOpen: true, stayInCollection: true,
             }));
         }
         // this is equivalent to using PrefetchProxies to make sure the recentlyClosed doc is ready
@@ -670,6 +747,14 @@ export class CurrentUserUtils {
         (doc.myRecentlyClosed as Doc).contextMenuScripts = new List<ScriptField>([clearAll!]);
         (doc.myRecentlyClosed as Doc).contextMenuLabels = new List<string>(["Clear All"]);
 
+        const recentlyClosed = doc.myRecentlyClosed as Doc;
+
+        CurrentUserUtils.closedStack = new PrefetchProxy(Docs.Create.TreeDocument([recentlyClosed], {
+            title: " ", _xMargin: 5, _yMargin: 5, _gridGap: 5, forceActive: true, childDropAction: "alias",
+            treeViewTruncateTitleWidth: 150, hideFilterView: true, treeViewPreventOpen: false, treeViewOpen: true,
+            lockedPosition: true, boxShadow: "0 0", dontRegisterChildViews: true, targetDropAction: "same"
+        })) as any as Doc;
+
         return doc.myRecentlyClosed as Doc;
     }
     // setup the Library button which will display the library panel.  This panel includes a collection of workspaces, documents, and recently closed views
@@ -681,7 +766,7 @@ export class CurrentUserUtils {
         if (doc["tabs-button-library"] === undefined) {
             const libraryStack = new PrefetchProxy(Docs.Create.TreeDocument([workspaces, documents, recentlyClosed, doc], {
                 title: "Library", _xMargin: 5, _yMargin: 5, _gridGap: 5, forceActive: true, childDropAction: "alias",
-                treeViewTruncateTitleWidth: 150,
+                treeViewTruncateTitleWidth: 150, hideFilterView: true, treeViewPreventOpen: false,
                 lockedPosition: true, boxShadow: "0 0", dontRegisterChildViews: true, targetDropAction: "same"
             })) as any as Doc;
             doc["tabs-button-library"] = new PrefetchProxy(Docs.Create.ButtonDocument({
@@ -701,6 +786,7 @@ export class CurrentUserUtils {
 
     // setup the Search button which will display the search panel.
     static setupSearchBtnPanel(doc: Doc, sidebarContainer: Doc) {
+        doc["tabs-button-search"] = undefined;
         if (doc["tabs-button-search"] === undefined) {
             doc["tabs-button-search"] = new PrefetchProxy(Docs.Create.ButtonDocument({
                 _width: 50, _height: 25, title: "Search", _fontSize: "10pt",
@@ -711,8 +797,9 @@ export class CurrentUserUtils {
                 lockedPosition: true,
                 onClick: ScriptField.MakeScript("this.targetContainer.proto = this.sourcePanel")
             }));
+            CurrentUserUtils.searchStack = new PrefetchProxy(Docs.Create.QueryDocument({ title: "search stack", })) as any as Doc;
         }
-        return doc["tabs-button-search"] as Doc;
+        return doc["tabs-button-search"] as any as Doc;
     }
 
     static setupSidebarContainer(doc: Doc) {
@@ -728,17 +815,17 @@ export class CurrentUserUtils {
     // setup the list of sidebar mode buttons which determine what is displayed in the sidebar
     static async setupSidebarButtons(doc: Doc) {
         const sidebarContainer = CurrentUserUtils.setupSidebarContainer(doc);
-        const toolsBtn = await CurrentUserUtils.setupToolsBtnPanel(doc, sidebarContainer);
-        const libraryBtn = CurrentUserUtils.setupLibraryPanel(doc, sidebarContainer);
-        const searchBtn = CurrentUserUtils.setupSearchBtnPanel(doc, sidebarContainer);
+        CurrentUserUtils.toolsBtn = await CurrentUserUtils.setupToolsBtnPanel(doc, sidebarContainer);
+        CurrentUserUtils.libraryBtn = CurrentUserUtils.setupLibraryPanel(doc, sidebarContainer);
+        CurrentUserUtils.searchBtn = CurrentUserUtils.setupSearchBtnPanel(doc, sidebarContainer);
 
         // Finally, setup the list of buttons to display in the sidebar
         if (doc["tabs-buttons"] === undefined) {
-            doc["tabs-buttons"] = new PrefetchProxy(Docs.Create.StackingDocument([libraryBtn, searchBtn, toolsBtn], {
+            doc["tabs-buttons"] = new PrefetchProxy(Docs.Create.StackingDocument([CurrentUserUtils.libraryBtn, CurrentUserUtils.searchBtn, CurrentUserUtils.toolsBtn], {
                 _width: 500, _height: 80, boxShadow: "0 0", _pivotField: "title", _columnsHideIfEmpty: true, ignoreClick: true, _chromeStatus: "view-mode",
                 title: "sidebar btn row stack", backgroundColor: "dimGray",
             }));
-            (toolsBtn.onClick as ScriptField).script.run({ this: toolsBtn });
+            (CurrentUserUtils.toolsBtn.onClick as ScriptField).script.run({ this: CurrentUserUtils.toolsBtn });
         }
     }
 
@@ -749,7 +836,7 @@ export class CurrentUserUtils {
     })) as any as Doc
 
     static ficon = (opts: DocumentOptions) => new PrefetchProxy(Docs.Create.FontIconDocument({
-        ...opts, dropAction: "alias", removeDropProperties: new List<string>(["dropAction"]), _nativeWidth: 100, _nativeHeight: 100, _width: 100, _height: 100
+        ...opts, dropAction: "alias", removeDropProperties: new List<string>(["dropAction"]), _nativeWidth: 40, _nativeHeight: 40, _width: 40, _height: 40
     })) as any as Doc
 
     /// sets up the default list of buttons to be shown in the expanding button menu at the bottom of the Dash window
@@ -855,6 +942,7 @@ export class CurrentUserUtils {
         this.setupDocTemplates(doc); // sets up the template menu of templates
         this.setupRightSidebar(doc);  // sets up the right sidebar collection for mobile upload documents and sharing
         this.setupActiveMobileMenu(doc); // sets up the current mobile menu for Dash Mobile
+        this.setupMenuPanel(doc);
         this.setupOverlays(doc);  // documents in overlay layer
         this.setupDockedButtons(doc);  // the bottom bar of font icons
         this.setupDefaultPresentation(doc); // presentation that's initially triggered
diff --git a/src/client/util/GroupMemberView.scss b/src/client/util/GroupMemberView.scss
index 2fc27ed03..2eb164988 100644
--- a/src/client/util/GroupMemberView.scss
+++ b/src/client/util/GroupMemberView.scss
@@ -44,7 +44,7 @@
             background: none;
 
             &:hover {
-                text-overflow: visible;
+                text-overflow: unset;
                 overflow-x: auto;
             }
         }
diff --git a/src/client/util/SelectionManager.ts b/src/client/util/SelectionManager.ts
index 20d881961..05ba00331 100644
--- a/src/client/util/SelectionManager.ts
+++ b/src/client/util/SelectionManager.ts
@@ -12,6 +12,7 @@ export namespace SelectionManager {
 
         @observable IsDragging: boolean = false;
         SelectedDocuments: ObservableMap<DocumentView, boolean> = new ObservableMap();
+
         @action
         SelectDoc(docView: DocumentView, ctrlPressed: boolean): void {
 
@@ -32,6 +33,7 @@ export namespace SelectionManager {
         }
         @action
         DeselectDoc(docView: DocumentView): void {
+
             if (manager.SelectedDocuments.get(docView)) {
                 manager.SelectedDocuments.delete(docView);
                 docView.props.whenActiveChanged(false);
@@ -40,6 +42,7 @@ export namespace SelectionManager {
         }
         @action
         DeselectAll(): void {
+
             Array.from(manager.SelectedDocuments.keys()).map(dv => dv.props.whenActiveChanged(false));
             manager.SelectedDocuments.clear();
             Doc.UserDoc().activeSelection = new List<Doc>([]);
diff --git a/src/client/util/SharingManager.tsx b/src/client/util/SharingManager.tsx
index 5896bdf92..000b3e46c 100644
--- a/src/client/util/SharingManager.tsx
+++ b/src/client/util/SharingManager.tsx
@@ -72,8 +72,6 @@ export default class SharingManager extends React.Component<{}> {
     @observable private showUserOptions: boolean = false; // whether to show individuals as options when sharing (in the react-select component)
     @observable private showGroupOptions: boolean = false; // // whether to show groups as options when sharing (in the react-select component)
 
-
-
     // private get linkVisible() {
     //     return this.sharingDoc ? this.sharingDoc[PublicKey] !== SharingPermissions.None : false;
     // }
@@ -148,7 +146,7 @@ export default class SharingManager extends React.Component<{}> {
         const members: string[] = JSON.parse(StrCast(group.members));
         const users: ValidatedUser[] = this.users.filter(({ user: { email } }) => members.includes(email));
 
-        const target = this.targetDoc!;
+        const target = targetDoc || this.targetDoc!;
         const ACL = `ACL-${StrCast(group.groupName)}`;
 
         target.author === Doc.CurrentUserEmail && distributeAcls(ACL, permission as SharingPermissions, target);
@@ -222,7 +220,7 @@ export default class SharingManager extends React.Component<{}> {
 
     setInternalSharing = (recipient: ValidatedUser, permission: string) => {
         const { user, notificationDoc } = recipient;
-        const target = this.targetDoc!;
+        const target = targetDoc || this.targetDoc!;
         const key = user.email.replace('.', '_');
         const ACL = `ACL-${key}`;
 
diff --git a/src/client/views/ContextMenuItem.tsx b/src/client/views/ContextMenuItem.tsx
index 81432968d..7e233ec04 100644
--- a/src/client/views/ContextMenuItem.tsx
+++ b/src/client/views/ContextMenuItem.tsx
@@ -80,7 +80,7 @@ export class ContextMenuItem extends React.Component<ContextMenuProps & { select
     render() {
         if ("event" in this.props) {
             return (
-                <div className={"contextMenu-item" + (this.props.selected ? " contextMenu-itemSelected" : "")} onClick={this.handleEvent}>
+                <div className={"contextMenu-item" + (this.props.selected ? " contextMenu-itemSelected" : "")} onPointerDown={this.handleEvent}>
                     {this.props.icon ? (
                         <span className="icon-background">
                             <FontAwesomeIcon icon={this.props.icon} size="sm" />
@@ -95,7 +95,7 @@ export class ContextMenuItem extends React.Component<ContextMenuProps & { select
             const where = !this.overItem ? "" : this._overPosY < window.innerHeight / 3 ? "flex-start" : this._overPosY > window.innerHeight * 2 / 3 ? "flex-end" : "center";
             const marginTop = !this.overItem ? "" : this._overPosY < window.innerHeight / 3 ? "20px" : this._overPosY > window.innerHeight * 2 / 3 ? "-20px" : "";
             const submenu = !this.overItem ? (null) :
-                <div className="contextMenu-subMenu-cont" style={{ marginLeft: "25%", left: "0px", marginTop }}>
+                <div className="contextMenu-subMenu-cont" style={{ marginLeft: "90%", left: "0px", marginTop }}>
                     {this._items.map(prop => <ContextMenuItem {...prop} key={prop.description} closeMenu={this.props.closeMenu} />)}
                 </div>;
             if (!("noexpand" in this.props)) {
diff --git a/src/client/views/DocumentButtonBar.tsx b/src/client/views/DocumentButtonBar.tsx
index 6b85616c2..23a3e1684 100644
--- a/src/client/views/DocumentButtonBar.tsx
+++ b/src/client/views/DocumentButtonBar.tsx
@@ -281,7 +281,7 @@ export class DocumentButtonBar extends React.Component<{ views: () => (DocumentV
             {DocumentLinksButton.StartLink ? <div className="documentButtonBar-button">
                 <DocumentLinksButton links={this.view0.allLinks} View={this.view0} AlwaysOn={true} InMenu={true} StartLink={false} />
             </div> : null}
-            <div className="documentButtonBar-button">
+            {/* <div className="documentButtonBar-button">
                 {this.templateButton}
             </div>
             <div className="documentButtonBar-button">
@@ -289,16 +289,16 @@ export class DocumentButtonBar extends React.Component<{ views: () => (DocumentV
             </div>
             <div className="documentButtonBar-button">
                 {this.contextButton}
-            </div>
+            </div> */}
             <div className="documentButtonBar-button">
                 {this.pinButton}
             </div>
-            <div className="documentButtonBar-button" style={{ display: !considerPush ? "none" : "" }}>
+            {/* <div className="documentButtonBar-button" style={{ display: !considerPush ? "none" : "" }}>
                 {this.considerGoogleDocsPush}
             </div>
             <div className="documentButtonBar-button" style={{ display: !considerPull ? "none" : "" }}>
                 {this.considerGoogleDocsPull}
-            </div>
+            </div> */}
         </div>;
     }
 }
diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx
index 7fc4a5c99..dd5303904 100644
--- a/src/client/views/DocumentDecorations.tsx
+++ b/src/client/views/DocumentDecorations.tsx
@@ -1,5 +1,5 @@
 import { IconProp, library } from '@fortawesome/fontawesome-svg-core';
-import { faCaretUp, faFilePdf, faFilm, faImage, faObjectGroup, faStickyNote, faTextHeight, faArrowAltCircleDown, faArrowAltCircleUp, faCheckCircle, faCloudUploadAlt, faLink, faShare, faStopCircle, faSyncAlt, faTag, faTimes, faAngleLeft, faAngleRight, faAngleDoubleLeft, faAngleDoubleRight, faPause } from '@fortawesome/free-solid-svg-icons';
+import { faCaretUp, faFilePdf, faFilm, faImage, faObjectGroup, faStickyNote, faTextHeight, faArrowAltCircleDown, faArrowAltCircleUp, faCheckCircle, faCloudUploadAlt, faLink, faShare, faStopCircle, faSyncAlt, faTag, faTimes, faAngleLeft, faAngleRight, faAngleDoubleLeft, faAngleDoubleRight, faPause, faExternalLinkAlt } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { action, computed, observable, reaction, runInAction, get } from "mobx";
 import { observer } from "mobx-react";
@@ -47,6 +47,7 @@ library.add(faAngleDoubleRight);
 library.add(faAngleLeft);
 library.add(faAngleRight);
 library.add(faPause);
+library.add(faExternalLinkAlt);
 
 @observer
 export class DocumentDecorations extends React.Component<{}, { value: string }> {
@@ -533,12 +534,12 @@ export class DocumentDecorations extends React.Component<{}, { value: string }>
                 const ink = Cast(doc.data, InkField)?.inkData;
                 if (ink) {
                     const newPoints: { X: number, Y: number }[] = [];
-                    for (var i = 0; i < ink.length; i++) {
+                    ink.forEach(i => {
                         // (new x — oldx) + (oldxpoint * newWidt)/oldWidth 
-                        const newX = (doc.x - this._inkDocs[index].x) + (ink[i].X * doc._width) / this._inkDocs[index].width;
-                        const newY = (doc.y - this._inkDocs[index].y) + (ink[i].Y * doc._height) / this._inkDocs[index].height;
+                        const newX = ((doc.x || 0) - this._inkDocs[index].x) + (i.X * (doc._width || 0)) / this._inkDocs[index].width;
+                        const newY = ((doc.y || 0) - this._inkDocs[index].y) + (i.Y * (doc._height || 0)) / this._inkDocs[index].height;
                         newPoints.push({ X: newX, Y: newY });
-                    }
+                    });
                     doc.data = new InkField(newPoints);
 
                 }
@@ -617,9 +618,9 @@ export class DocumentDecorations extends React.Component<{}, { value: string }>
                 </div>}
             </> :
             <>
-                {minimal ? (null) : <Tooltip title={<><div className="dash-tooltip">Show context menu</div></>} placement="top"><div className="documentDecorations-contextMenu" key="menu" onPointerDown={this.onSettingsDown}>
-                    <FontAwesomeIcon size="lg" icon="cog" />
-                </div></Tooltip>}
+                {/* {minimal ? (null) : <Tooltip title={<><div className="dash-tooltip">Show context menu</div></>} placement="top"><div className="documentDecorations-contextMenu" key="menu" onPointerDown={this.onSettingsDown}>
+                    <FontAwesomeIcon size="lg" icon="bars" />
+                </div></Tooltip>} */}
                 <div className="documentDecorations-title" key="title" onPointerDown={this.onTitleDown} >
                     <span style={{ width: "100%", display: "inline-block", cursor: "move" }}>{`${this.selectionTitle}`}</span>
                 </div>
@@ -666,7 +667,7 @@ export class DocumentDecorations extends React.Component<{}, { value: string }>
                                 {"_"}
                             </div></Tooltip>}
                     <Tooltip title={<><div className="dash-tooltip">Open Document In Tab</div></>} placement="top"><div className="documentDecorations-openInTab" onPointerDown={this.onMaximizeDown}>
-                        {SelectionManager.SelectedDocuments().length === 1 ? DocumentDecorations.DocumentIcon(StrCast(seldoc.props.Document.layout, "...")) : "..."}
+                        {SelectionManager.SelectedDocuments().length === 1 ? <FontAwesomeIcon icon="external-link-alt" className="documentView-minimizedIcon" /> : "..."}
                     </div></Tooltip>
                     <div id="documentDecorations-rotation" className="documentDecorations-rotation"
                         onPointerDown={this.onRotateDown}> ⟲ </div>
diff --git a/src/client/views/EditableView.tsx b/src/client/views/EditableView.tsx
index c7b149842..f9d060681 100644
--- a/src/client/views/EditableView.tsx
+++ b/src/client/views/EditableView.tsx
@@ -191,7 +191,7 @@ export class EditableView extends React.Component<EditableProps> {
             return (this.props.contents instanceof ObjectField ? (null) :
                 <div className={`editableView-container-editing${this.props.oneLine ? "-oneLine" : ""}`}
                     ref={this._ref}
-                    style={{ display: this.props.display, minHeight: "20px", height: `${this.props.height ? this.props.height : "auto"}`, maxHeight: `${this.props.maxHeight}` }}
+                    style={{ display: this.props.display, minHeight: "17px", whiteSpace: "nowrap", height: `${this.props.height ? this.props.height : "auto"}`, maxHeight: `${this.props.maxHeight}` }}
                     onClick={this.onClick} placeholder={this.props.placeholder}>
                     <span style={{
                         fontStyle: this.props.fontStyle, fontSize: this.props.fontSize,
diff --git a/src/client/views/MainView.scss b/src/client/views/MainView.scss
index e1ddbc533..054a409df 100644
--- a/src/client/views/MainView.scss
+++ b/src/client/views/MainView.scss
@@ -102,6 +102,44 @@
     user-select: none;
 }
 
+.mainView-propertiesDragger {
+    background-color: rgb(140, 139, 139);
+    height: 55px;
+    width: 15.5px;
+    position: absolute;
+    top: 55%;
+    border: 1px black solid;
+    border-radius: 0;
+    border-top-left-radius: 10px;
+    border-bottom-left-radius: 10px;
+    border-right: unset;
+    z-index: 2;
+
+    .mainView-propertiesDragger-icon {
+        width: 10px;
+        height: 10px;
+        float: left;
+        margin-left: 3px;
+        padding-top: 19px;
+    }
+
+    &:hover {
+        cursor: grab;
+    }
+}
+
+.mainiView-propertiesView {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    position: absolute;
+    right: 0;
+    top: 0;
+    border-left: solid 1px;
+    z-index: 100000;
+    cursor: auto;
+}
+
 .mainView-flyoutContainer {
     display: flex;
     flex-direction: column;
@@ -114,6 +152,75 @@
     }
 }
 
+.mainView-menuPanel {
+
+    width: 60px;
+    background-color: black;
+    height: 100%;
+    //overflow-y: scroll;
+    //overflow-x: hidden;
+
+
+    .mainView-menuPanel-button {
+        padding: 7px;
+        padding-left: 7px;
+        width: 100%;
+
+        .mainView-menuPanel-button-wrap {
+            width: 45px;
+            /* padding: 5px; */
+            touch-action: none;
+            background: black;
+            transform-origin: top left;
+            /* margin-bottom: 5px; */
+            margin-top: 5px;
+            margin-right: 25px;
+            border-radius: 8px;
+
+            &:hover {
+                background: rgb(61, 61, 61);
+                cursor: pointer;
+            }
+        }
+    }
+
+    .mainView-menuPanel-button-label {
+        color: white;
+        margin-left: px;
+        margin-right: 4px;
+        border-radius: 8px;
+        width: 42px;
+        position: relative;
+        text-align: center;
+        font-size: 8px;
+        margin-top: 1px;
+        letter-spacing: normal;
+        padding: 3px;
+        background-color: inherit;
+    }
+
+    .mainView-menuPanel-button-icon {
+        width: auto;
+        height: 35px;
+        padding: 5px;
+    }
+
+    svg {
+        width: 95% !important;
+        height: 95%;
+    }
+}
+
+.mainView-searchPanel {
+    width: 100%;
+    height: 33px;
+    background-color: black;
+    color: white;
+    text-align: center;
+    vertical-align: middle;
+    padding-top: 6px;
+}
+
 .mainView-mainDiv {
     width: 100%;
     height: 100%;
@@ -162,26 +269,44 @@
     display: flex;
     flex-direction: column;
     z-index: 2;
+
+    .mainView-libraryFlyout-close {
+        right: 6;
+        top: 5;
+        position: absolute;
+        margin-right: 6px;
+        z-index: 10;
+        margin-bottom: 10;
+    }
 }
 
 .mainView-expandFlyoutButton {
     position: absolute;
-    top: 100px;
-    right: 30px;
+    top: 120px;
+    right: 55px;
     cursor: pointer;
 }
 
 .mainView-libraryHandle {
-    width: 20px;
+    width: 28px;
     left: calc(100% - 10px);
-    height: 40px;
+    height: 55px;
     top: 50%;
     border: 1px solid black;
-    border-radius: 5px;
+    border-radius: 8px;
     position: absolute;
     z-index: 2;
     touch-action: none;
     cursor: ew-resize;
+
+    .mainView-libraryHandle-icon {
+        width: 10px;
+        height: 10px;
+        float: right;
+        margin-right: 3px;
+        padding-top: 19px;
+    }
+
 }
 
 .mainView-workspace {
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index 58478ce92..54b57a887 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -1,7 +1,6 @@
 import { library } from '@fortawesome/fontawesome-svg-core';
 import { faHireAHelper, faBuffer } from '@fortawesome/free-brands-svg-icons';
 import * as fa from '@fortawesome/free-solid-svg-icons';
-import { ANTIMODEMENU_HEIGHT } from './globalCssVariables.scss';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { action, computed, configure, observable, reaction, runInAction } from 'mobx';
 import { observer } from 'mobx-react';
@@ -12,51 +11,55 @@ import { Doc, DocListCast, Field, Opt } from '../../fields/Doc';
 import { Id } from '../../fields/FieldSymbols';
 import { List } from '../../fields/List';
 import { listSpec } from '../../fields/Schema';
+import { ScriptField } from '../../fields/ScriptField';
 import { BoolCast, Cast, FieldValue, StrCast } from '../../fields/Types';
 import { TraceMobx } from '../../fields/util';
-import { CurrentUserUtils } from '../util/CurrentUserUtils';
-import { emptyFunction, emptyPath, returnFalse, returnOne, returnZero, returnTrue, Utils, returnEmptyFilter } from '../../Utils';
+import { emptyFunction, emptyPath, returnEmptyFilter, returnFalse, returnOne, returnTrue, returnZero, setupMoveUpEvents, Utils } from '../../Utils';
 import GoogleAuthenticationManager from '../apis/GoogleAuthenticationManager';
+import HypothesisAuthenticationManager from '../apis/HypothesisAuthenticationManager';
 import { DocServer } from '../DocServer';
 import { Docs, DocumentOptions } from '../documents/Documents';
 import { DocumentType } from '../documents/DocumentTypes';
+import { CurrentUserUtils } from '../util/CurrentUserUtils';
+import { DocumentManager } from '../util/DocumentManager';
+import GroupManager from '../util/GroupManager';
 import { HistoryUtil } from '../util/History';
-import RichTextMenu from './nodes/formattedText/RichTextMenu';
 import { Scripting } from '../util/Scripting';
+import { SelectionManager } from '../util/SelectionManager';
 import SettingsManager from '../util/SettingsManager';
-import GroupManager from '../util/GroupManager';
 import SharingManager from '../util/SharingManager';
+import { SnappingManager } from '../util/SnappingManager';
 import { Transform } from '../util/Transform';
+import { TimelineMenu } from './animationtimeline/TimelineMenu';
 import { CollectionDockingView } from './collections/CollectionDockingView';
+import FormatShapePane from "./collections/collectionFreeForm/FormatShapePane";
 import MarqueeOptionsMenu from './collections/collectionFreeForm/MarqueeOptionsMenu';
+import { PropertiesView } from './collections/collectionFreeForm/PropertiesView';
 import { CollectionLinearView } from './collections/CollectionLinearView';
+import CollectionMenu from './collections/CollectionMenu';
 import { CollectionView, CollectionViewType } from './collections/CollectionView';
 import { ContextMenu } from './ContextMenu';
 import { DictationOverlay } from './DictationOverlay';
 import { DocumentDecorations } from './DocumentDecorations';
 import GestureOverlay from './GestureOverlay';
+import { ANTIMODEMENU_HEIGHT } from './globalCssVariables.scss';
 import KeyManager from './GlobalKeyHandler';
+import { LinkMenu } from './linking/LinkMenu';
 import "./MainView.scss";
 import { MainViewNotifs } from './MainViewNotifs';
 import { AudioBox } from './nodes/AudioBox';
+import { DocumentLinksButton } from './nodes/DocumentLinksButton';
 import { DocumentView } from './nodes/DocumentView';
+import { FormattedTextBox } from './nodes/formattedText/FormattedTextBox';
+import RichTextMenu from './nodes/formattedText/RichTextMenu';
+import { LinkDescriptionPopup } from './nodes/LinkDescriptionPopup';
+import { LinkDocPreview } from './nodes/LinkDocPreview';
 import { RadialMenu } from './nodes/RadialMenu';
+import { TaskCompletionBox } from './nodes/TaskCompletedBox';
 import { OverlayView } from './OverlayView';
 import PDFMenu from './pdf/PDFMenu';
 import { PreviewCursor } from './PreviewCursor';
-import { ScriptField } from '../../fields/ScriptField';
-import { TimelineMenu } from './animationtimeline/TimelineMenu';
-import { SnappingManager } from '../util/SnappingManager';
-import { FormattedTextBox } from './nodes/formattedText/FormattedTextBox';
-import { DocumentManager } from '../util/DocumentManager';
-import { DocumentLinksButton } from './nodes/DocumentLinksButton';
-import { LinkMenu } from './linking/LinkMenu';
-import { LinkDocPreview } from './nodes/LinkDocPreview';
-import { TaskCompletionBox } from './nodes/TaskCompletedBox';
-import { LinkDescriptionPopup } from './nodes/LinkDescriptionPopup';
-import FormatShapePane from "./collections/collectionFreeForm/FormatShapePane";
-import HypothesisAuthenticationManager from '../apis/HypothesisAuthenticationManager';
-import CollectionMenu from './collections/CollectionMenu';
+import { undoBatch } from '../util/UndoManager';
 
 @observer
 export class MainView extends React.Component {
@@ -69,8 +72,8 @@ export class MainView extends React.Component {
 
     @observable private _panelWidth: number = 0;
     @observable private _panelHeight: number = 0;
-    @observable private _flyoutTranslate: boolean = true;
-    @observable public flyoutWidth: number = 250;
+    @observable private _flyoutTranslate: boolean = false;
+    @observable public flyoutWidth: number = 0;
     private get darkScheme() { return BoolCast(Cast(this.userDoc?.activeWorkspace, Doc, null)?.darkScheme); }
 
     @computed private get userDoc() { return Doc.UserDoc(); }
@@ -78,7 +81,27 @@ export class MainView extends React.Component {
     @computed public get mainFreeform(): Opt<Doc> { return (docs => (docs && docs.length > 1) ? docs[1] : undefined)(DocListCast(this.mainContainer!.data)); }
     @computed public get sidebarButtonsDoc() { return Cast(this.userDoc["tabs-buttons"], Doc) as Doc; }
 
+    @observable public sidebarContent: any = this.userDoc?.["tabs-panelContainer"];
+    @observable public panelContent: string = "none";
+    @observable public showProperties: boolean = false;
     public isPointerDown = false;
+    @computed get selectedDocumentView() {
+        if (SelectionManager.SelectedDocuments().length) {
+            return SelectionManager.SelectedDocuments()[0];
+        } else { return undefined; }
+    }
+
+    @observable _propertiesWidth: number = 0;
+    propertiesWidth = () => Math.max(0, Math.min(this._panelWidth - 50, this._propertiesWidth));
+
+    @computed get propertiesIcon() {
+        if (this.propertiesWidth() < 10) {
+            return "chevron-left";
+        } else {
+            return "chevron-right";
+        }
+    }
+    @observable propertiesDownX: number | undefined;
 
     componentDidMount() {
         DocServer.setPlaygroundFields(["dataTransition", "_viewTransition", "_panX", "_panY", "_viewScale", "_viewType", "_chromeStatus"]); // can play with these fields on someone else's
@@ -148,7 +171,10 @@ export class MainView extends React.Component {
             fa.faEye, fa.faArrowsAlt, fa.faQuoteLeft, fa.faSortAmountDown, fa.faAlignLeft, fa.faAlignCenter, fa.faAlignRight, fa.faHeading, fa.faRulerCombined,
             fa.faFillDrip, fa.faLink, fa.faUnlink, fa.faBold, fa.faItalic, fa.faChevronLeft, fa.faUnderline, fa.faStrikethrough, fa.faSuperscript, fa.faSubscript,
             fa.faIndent, fa.faEyeDropper, fa.faPaintRoller, fa.faBars, fa.faBrush, fa.faShapes, fa.faEllipsisH, fa.faHandPaper, fa.faMap, fa.faUser, faHireAHelper,
-            fa.faBezierCurve, fa.faCircle, fa.faLongArrowAltRight, fa.faPenFancy, fa.faAngleDoubleRight, fa.faAngleUp, fa.faAngleDown, fa.faPlayCircle, fa.faClock,
+            fa.faDesktop, fa.faTrashRestore, fa.faUsers, fa.faWrench, fa.faCog, fa.faMap, fa.faBellSlash, fa.faExpandAlt, fa.faArchive, fa.faBezierCurve, fa.faCircle,
+            fa.faLongArrowAltRight, fa.faPenFancy, fa.faAngleDoubleRight, faBuffer, fa.faExpand, fa.faUndo, fa.faSlidersH);
+        //Pres trail icons (just for the sake of merging)
+        library.add(fa.faAngleUp, fa.faAngleDown, fa.faPlayCircle, fa.faClock,
             fa.faRocket, fa.faExchangeAlt, faBuffer);
         this.initEventListeners();
         this.initAuthenticationRouters();
@@ -211,7 +237,7 @@ export class MainView extends React.Component {
         const freeformOptions: DocumentOptions = {
             x: 0,
             y: 400,
-            _width: this._panelWidth * .7,
+            _width: this._panelWidth * .7 - this.propertiesWidth(),
             _height: this._panelHeight,
             title: "Collection " + workspaceCount,
         };
@@ -277,16 +303,21 @@ export class MainView extends React.Component {
 
     @action
     onResize = (r: any) => {
-        this._panelWidth = r.offset.width;
+        this._panelWidth = r.offset.width;// - this.propertiesWidth();
         this._panelHeight = r.offset.height;
     }
-    getPWidth = () => this._panelWidth;
+
+    @action
+    getPWidth = () => this._panelWidth - this.propertiesWidth()
+
     getPHeight = () => this._panelHeight;
     getContentsHeight = () => this._panelHeight - this._buttonBarHeight;
 
-    defaultBackgroundColors = (doc: Doc) => {
+    defaultBackgroundColors = (doc: Opt<Doc>) => {
+        if (this.panelContent === doc?.title) return "lightgrey";
         if (this.darkScheme) {
             switch (doc?.type) {
+                case DocumentType.MENUICON: return "white";
                 case DocumentType.RTF || DocumentType.LABEL || DocumentType.BUTTON: return "#2d2d2d";
                 case DocumentType.LINK:
                 case DocumentType.COL: {
@@ -296,6 +327,7 @@ export class MainView extends React.Component {
             }
         } else {
             switch (doc?.type) {
+                case DocumentType.MENUICON: return "black";
                 case DocumentType.RTF: return "#f1efeb";
                 case DocumentType.BUTTON:
                 case DocumentType.LABEL: return "lightgray";
@@ -308,7 +340,8 @@ export class MainView extends React.Component {
         }
     }
     @computed get mainDocView() {
-        return <DocumentView Document={this.mainContainer!}
+        return <DocumentView
+            Document={this.mainContainer!}
             DataDoc={undefined}
             LibraryPath={emptyPath}
             addDocument={undefined}
@@ -324,7 +357,6 @@ export class MainView extends React.Component {
             NativeWidth={returnZero}
             PanelWidth={this.getPWidth}
             PanelHeight={this.getPHeight}
-            renderDepth={0}
             focus={emptyFunction}
             parentActive={returnTrue}
             whenActiveChanged={emptyFunction}
@@ -332,103 +364,63 @@ export class MainView extends React.Component {
             docFilters={returnEmptyFilter}
             ContainingCollectionView={undefined}
             ContainingCollectionDoc={undefined}
+            renderDepth={-1}
         />;
     }
     @computed get dockingContent() {
         TraceMobx();
         const mainContainer = this.mainContainer;
         const width = this.flyoutWidth;
-        return <Measure offset onResize={this.onResize}>
-            {({ measureRef }) =>
-                <div ref={measureRef} className="mainContent-div" onDrop={this.onDrop} style={{ width: `calc(100% - ${width}px)` }}>
-                    {!mainContainer ? (null) : this.mainDocView}
-                </div>
-            }
-        </Measure>;
-    }
-
-    _canClick = false;
-    onPointerDown = (e: React.PointerEvent) => {
-        if (this._flyoutTranslate) {
-            this._canClick = true;
-            this._flyoutSizeOnDown = e.clientX;
-            document.removeEventListener("pointermove", this.onPointerMove);
-            document.removeEventListener("pointerup", this.onPointerUp);
-            document.addEventListener("pointermove", this.onPointerMove);
-            document.addEventListener("pointerup", this.onPointerUp);
-            e.stopPropagation();
-            e.preventDefault();
-        }
+        return <div className="mainContent-div" onDrop={this.onDrop} style={{ width: `calc(100% - ${width}px)` }}>
+            {!mainContainer ? (null) : this.mainDocView}
+        </div>;
     }
 
     @action
-    pointerLeaveDragger = () => {
-        if (!this._flyoutTranslate) {
-            this.flyoutWidth = 0;
-            this._flyoutTranslate = true;
-        }
+    onPropertiesPointerDown = (e: React.PointerEvent) => {
+        setupMoveUpEvents(this, e, action((e: PointerEvent, down: number[], delta: number[]) => {
+            this._propertiesWidth = this._panelWidth - e.clientX;
+            return false;
+        }), returnFalse, action(() => this._propertiesWidth = this.propertiesWidth() < 15 ? Math.min(this._panelWidth - 50, 250) : 0), false);
     }
 
     @action
-    onPointerMove = (e: PointerEvent) => {
-        this.flyoutWidth = Math.max(e.clientX, 0);
-        Math.abs(this.flyoutWidth - this._flyoutSizeOnDown) > 6 && (this._canClick = false);
-        this.sidebarButtonsDoc._columnWidth = this.flyoutWidth / 3 - 30;
-    }
-    @action
-    onPointerUp = (e: PointerEvent) => {
-        if (Math.abs(e.clientX - this._flyoutSizeOnDown) < 4 && this._canClick) {
-            this.flyoutWidth = this.flyoutWidth < 15 ? 250 : 0;
-            this.flyoutWidth && (this.sidebarButtonsDoc._columnWidth = this.flyoutWidth / 3 - 30);
+    onFlyoutPointerDown = (e: React.PointerEvent) => {
+        this.panelContent = "none";
+        if (this._flyoutTranslate) {
+            setupMoveUpEvents(this, e, action((e: PointerEvent) => {
+                this.flyoutWidth = Math.max(e.clientX, 0);
+                this.sidebarButtonsDoc._columnWidth = this.flyoutWidth / 3 - 30;
+                return false;
+            }), emptyFunction, action(() => {
+                this.flyoutWidth = this.flyoutWidth < 15 ? 250 : 0;
+                this.flyoutWidth && (this.sidebarButtonsDoc._columnWidth = this.flyoutWidth / 3 - 30);
+            }));
         }
-        document.removeEventListener("pointermove", this.onPointerMove);
-        document.removeEventListener("pointerup", this.onPointerUp);
     }
+
     flyoutWidthFunc = () => this.flyoutWidth;
     addDocTabFunc = (doc: Doc, where: string, libraryPath?: Doc[]): boolean => {
         return where === "close" ? CollectionDockingView.CloseRightSplit(doc) :
             doc.dockingConfig ? this.openWorkspace(doc) :
                 CollectionDockingView.AddRightSplit(doc, libraryPath);
     }
-    sidebarScreenToLocal = () => new Transform(0, (RichTextMenu.Instance.Pinned ? -35 : 0) + (CollectionMenu.Instance.Pinned ? -35 : 0), 1);
+    sidebarScreenToLocal = () => new Transform(0, (CollectionMenu.Instance.Pinned ? -35 : 0), 1);
+    //sidebarScreenToLocal = () => new Transform(0, (RichTextMenu.Instance.Pinned ? -35 : 0) + (CollectionMenu.Instance.Pinned ? -35 : 0), 1);
     mainContainerXf = () => this.sidebarScreenToLocal().translate(0, -this._buttonBarHeight);
 
+    @computed get closePosition() { return 55 + this.flyoutWidth; }
     @computed get flyout() {
-        const sidebarContent = this.userDoc?.["tabs-panelContainer"];
-        if (!(sidebarContent instanceof Doc)) {
-            return (null);
-        }
-        return <div className="mainView-flyoutContainer" >
-            <div className="mainView-tabButtons" style={{ height: `${this._buttonBarHeight - 10/*margin-top*/}px`, backgroundColor: StrCast(this.sidebarButtonsDoc.backgroundColor) }}>
-                <DocumentView
-                    Document={this.sidebarButtonsDoc}
-                    DataDoc={undefined}
-                    LibraryPath={emptyPath}
-                    addDocument={undefined}
-                    rootSelected={returnTrue}
-                    addDocTab={this.addDocTabFunc}
-                    pinToPres={emptyFunction}
-                    removeDocument={undefined}
-                    onClick={undefined}
-                    ScreenToLocalTransform={this.sidebarScreenToLocal}
-                    ContentScaling={returnOne}
-                    NativeHeight={returnZero}
-                    NativeWidth={returnZero}
-                    PanelWidth={this.flyoutWidthFunc}
-                    PanelHeight={this.getPHeight}
-                    renderDepth={0}
-                    focus={emptyFunction}
-                    backgroundColor={this.defaultBackgroundColors}
-                    parentActive={returnTrue}
-                    whenActiveChanged={emptyFunction}
-                    bringToFront={emptyFunction}
-                    docFilters={returnEmptyFilter}
-                    ContainingCollectionView={undefined}
-                    ContainingCollectionDoc={undefined} />
-            </div>
-            <div className="mainView-contentArea" style={{ position: "relative", height: `calc(100% - ${this._buttonBarHeight}px)`, width: "100%", overflow: "visible" }}>
+        if (!this.sidebarContent) return null;
+        return <div className="mainView-libraryFlyout">
+            <div className="mainView-contentArea" style={{ position: "relative", height: `100%`, width: "100%", overflow: "visible" }}>
+                {this.flyoutWidth > 0 ? <div className="mainView-libraryFlyout-close"
+                    onPointerDown={this.closeFlyout}>
+                    <FontAwesomeIcon icon="times" color="black" size="sm" />
+                </div> : null}
+
                 <DocumentView
-                    Document={sidebarContent}
+                    Document={this.sidebarContent}
                     DataDoc={undefined}
                     LibraryPath={emptyPath}
                     addDocument={undefined}
@@ -451,52 +443,162 @@ export class MainView extends React.Component {
                     bringToFront={emptyFunction}
                     docFilters={returnEmptyFilter}
                     ContainingCollectionView={undefined}
-                    ContainingCollectionDoc={undefined} />
-                <div className="buttonContainer" >
-                    <button className="mainView-settings" key="settings" onClick={() => SettingsManager.Instance.open()}>
-                        <FontAwesomeIcon icon="cog" size="lg" />
-                    </button>
-                </div>
+                    ContainingCollectionDoc={undefined}
+                    relative={true}
+                />
             </div>
-            {this.docButtons}
+            {this.docButtons}</div>;
+    }
+
+    @computed get menuPanel() {
+
+        return <div className="mainView-menuPanel">
+            <DocumentView
+                Document={Doc.UserDoc().menuStack as Doc}
+                DataDoc={undefined}
+                LibraryPath={emptyPath}
+                addDocument={undefined}
+                addDocTab={this.addDocTabFunc}
+                pinToPres={emptyFunction}
+                NativeHeight={returnZero}
+                NativeWidth={returnZero}
+                rootSelected={returnTrue}
+                removeDocument={returnFalse}
+                onClick={undefined}
+                ScreenToLocalTransform={this.mainContainerXf}
+                ContentScaling={returnOne}
+                PanelWidth={() => 70}
+                PanelHeight={this.getContentsHeight}
+                renderDepth={0}
+                focus={emptyFunction}
+                backgroundColor={this.defaultBackgroundColors}
+                parentActive={returnTrue}
+                whenActiveChanged={emptyFunction}
+                bringToFront={emptyFunction}
+                docFilters={returnEmptyFilter}
+                ContainingCollectionView={undefined}
+                ContainingCollectionDoc={undefined}
+                relative={true}
+                scriptContext={this}
+            />
+        </div>;
+    }
+
+
+    @action @undoBatch
+    closeFlyout = () => {
+        this.panelContent = "none";
+        this.flyoutWidth = 0;
+    }
+
+    get groupManager() { return GroupManager.Instance; }
+
+    @action @undoBatch
+    selectMenu = (str: string) => {
+        if (this.panelContent === str && this.flyoutWidth !== 0) {
+            this.panelContent = "none";
+            this.flyoutWidth = 0;
+        } else {
+            this.panelContent = str;
+            switch (this.panelContent) {
+                case "Tools": this.sidebarContent.proto = CurrentUserUtils.toolsStack; break;
+                case "Workspace": this.sidebarContent.proto = CurrentUserUtils.workspaceStack; break;
+                case "Catalog": this.sidebarContent.proto = CurrentUserUtils.catalogStack; break;
+                case "Archive": this.sidebarContent.proto = CurrentUserUtils.closedStack; break;
+                case "Settings": this.sidebarContent.proto = SettingsManager.Instance.open(); break;
+                case "Sharing": this.sidebarContent.proto = GroupManager.Instance.open(); break;
+            }
+            if (str === "Settings" || str === "Sharing" || str === "Help") {
+                this.panelContent = "none";
+                this.flyoutWidth = 0;
+            } else {
+                MainView.expandFlyout();
+            }
+        }
+        return true;
+    }
+
+    @action @undoBatch
+    closeProperties = () => {
+        this._propertiesWidth = 0;
+    }
+
+    @computed get propertiesView() {
+        TraceMobx();
+        return <div className="mainView-propertiesView" style={{
+            overflow: this.propertiesWidth() < 15 ? "hidden" : undefined
+        }}>
+            <PropertiesView
+                width={this.propertiesWidth()}
+                height={this._panelHeight}
+                renderDepth={1}
+                ScreenToLocalTransform={Transform.Identity}
+                onDown={this.closeProperties}
+            />
         </div>;
     }
 
+    @computed get mainInnerContent() {
+        const rightFlyout = this.propertiesWidth() - 1;
+        return <>
+            {this.menuPanel}
+            <div style={{ display: "contents", flexDirection: "row", position: "relative" }}>
+                <div className="mainView-flyoutContainer" style={{ width: this.flyoutWidth }}>
+                    {this.flyoutWidth !== 0 ? <div className="mainView-libraryHandle"
+                        onPointerDown={this.onFlyoutPointerDown}
+                        style={{ backgroundColor: this.defaultBackgroundColors(undefined) }}>
+                        <span title="library View Dragger" style={{
+                            width: (this.flyoutWidth !== 0 && this._flyoutTranslate) ? "100%" : "3vw",
+                            //height: (this.flyoutWidth !== 0 && this._flyoutTranslate) ? "100%" : "100vh",
+                            position: (this.flyoutWidth !== 0 && this._flyoutTranslate) ? "absolute" : "fixed",
+                            top: (this.flyoutWidth !== 0 && this._flyoutTranslate) ? "" : "0"
+                        }} />
+                        <div className="mainview-libraryHandle-icon">
+                            <FontAwesomeIcon icon="chevron-left" color="black" size="sm" /> </div>
+                    </div> : null}
+                    <div className="mainView-libraryFlyout" style={{
+                        //transformOrigin: this._flyoutTranslate ? "" : "left center",
+                        transition: this._flyoutTranslate ? "" : "width .5s",
+                        //transform: `scale(${this._flyoutTranslate ? 1 : 0.8})`,
+                        boxShadow: this._flyoutTranslate ? "" : "rgb(156, 147, 150) 0.2vw 0.2vw 0.2vw"
+                    }}>
+                        {this.flyout}
+                        {this.expandButton}
+                    </div>
+                </div>
+                {this.dockingContent}
+                {this.showProperties ? (null) :
+                    <div className="mainView-propertiesDragger" title="Properties View Dragger" onPointerDown={this.onPropertiesPointerDown}
+                        style={{ right: rightFlyout, top: "45%" }}>
+                        <div className="mainView-propertiesDragger-icon">
+                            <FontAwesomeIcon icon={this.propertiesIcon} color="white" size="sm" /> </div>
+                    </div>
+                }
+                {this.propertiesWidth() < 10 ? (null) :
+                    <div style={{ width: this.propertiesWidth() }}> {this.propertiesView} </div>}
+            </div>
+        </>;
+    }
+
     @computed get mainContent() {
-        const sidebar = this.userDoc?.["tabs-panelContainer"];
-        const n = (RichTextMenu.Instance?.Pinned ? 1 : 0) + (CollectionMenu.Instance?.Pinned ? 1 : 0);
+        //const n = (RichTextMenu.Instance?.Pinned ? 1 : 0) + (CollectionMenu.Instance?.Pinned ? 1 : 0);
+        const n = (CollectionMenu.Instance?.Pinned ? 1 : 0);
         const height = `calc(100% - ${n * Number(ANTIMODEMENU_HEIGHT.replace("px", ""))}px)`;
-        return !this.userDoc || !(sidebar instanceof Doc) ? (null) : (
-            <div className="mainView-mainContent" style={{
-                color: this.darkScheme ? "rgb(205,205,205)" : "black",
-                //change to times 2 for both pinned
-                height,
-                width: (FormatShapePane.Instance?.Pinned) ? `calc(100% - 200px)` : "100%"
-            }} >
-                <div style={{ display: "contents", flexDirection: "row", position: "relative" }}>
-                    <div className="mainView-flyoutContainer" onPointerLeave={this.pointerLeaveDragger} style={{ width: this.flyoutWidth }}>
-                        <div className="mainView-libraryHandle" onPointerDown={this.onPointerDown}
-                            style={{ backgroundColor: this.defaultBackgroundColors(sidebar) }}>
-                            <span title="library View Dragger" style={{
-                                width: (this.flyoutWidth !== 0 && this._flyoutTranslate) ? "100%" : "3vw",
-                                //height: (this.flyoutWidth !== 0 && this._flyoutTranslate) ? "100%" : "100vh",
-                                position: (this.flyoutWidth !== 0 && this._flyoutTranslate) ? "absolute" : "fixed",
-                                top: (this.flyoutWidth !== 0 && this._flyoutTranslate) ? "" : "0"
-                            }} />
-                        </div>
-                        <div className="mainView-libraryFlyout" style={{
-                            //transformOrigin: this._flyoutTranslate ? "" : "left center",
-                            transition: this._flyoutTranslate ? "" : "width .5s",
-                            //transform: `scale(${this._flyoutTranslate ? 1 : 0.8})`,
-                            boxShadow: this._flyoutTranslate ? "" : "rgb(156, 147, 150) 0.2vw 0.2vw 0.8vw"
-                        }}>
-                            {this.flyout}
-                            {this.expandButton}
-                        </div>
+        const pinned = FormatShapePane.Instance?.Pinned;
+        const innerContent = this.mainInnerContent;
+        return !this.userDoc ? (null) : (
+            <Measure offset onResize={this.onResize}>
+                {({ measureRef }) =>
+                    <div className="mainView-mainContent" ref={measureRef} style={{
+                        color: this.darkScheme ? "rgb(205,205,205)" : "black",
+                        //change to times 2 for both pinned
+                        height,
+                        width: pinned ? `calc(100% - 200px)` : "100%"
+                    }} >
+                        {innerContent}
                     </div>
-                    {this.dockingContent}
-                </div>
-            </div>);
+                }
+            </Measure>);
     }
 
     public static expandFlyout = action(() => {
@@ -506,7 +608,7 @@ export class MainView extends React.Component {
     });
 
     @computed get expandButton() {
-        return !this._flyoutTranslate ? (<div className="mainView-expandFlyoutButton" title="Re-attach sidebar" onPointerDown={MainView.expandFlyout}><FontAwesomeIcon icon="chevron-right" color="grey" size="lg" /></div>) : (null);
+        return !this._flyoutTranslate ? (<div className="mainView-expandFlyoutButton" title="Re-attach sidebar" onPointerDown={MainView.expandFlyout}></div>) : (null);
     }
 
     addButtonDoc = (doc: Doc | Doc[]) => (doc instanceof Doc ? [doc] : doc).reduce((flg: boolean, doc) => flg && Doc.AddDocToList(Doc.UserDoc().dockedBtns as Doc, "data", doc), true);
@@ -600,8 +702,16 @@ export class MainView extends React.Component {
         </svg>;
     }
 
+    @computed get search() {
+        return <div className="mainView-searchPanel">
+            <div style={{ float: "left", marginLeft: "10px" }}>{Doc.CurrentUserEmail}</div>
+            <div>SEARCH GOES HERE</div>
+        </div>;
+    }
+
     render() {
         return (<div className={"mainView-container" + (this.darkScheme ? "-dark" : "")} ref={this._mainViewRef}>
+
             {this.inkResources}
             <DictationOverlay />
             <SharingManager />
@@ -610,9 +720,10 @@ export class MainView extends React.Component {
             <GoogleAuthenticationManager />
             <HypothesisAuthenticationManager />
             <DocumentDecorations />
+            {/* {this.search} */}
             <CollectionMenu />
             <FormatShapePane />
-            <RichTextMenu key="rich" />
+            <div style={{ display: "none" }}><RichTextMenu key="rich" /></div>
             {LinkDescriptionPopup.descriptionPopup ? <LinkDescriptionPopup /> : null}
             {DocumentLinksButton.EditLink ? <LinkMenu location={DocumentLinksButton.EditLinkLoc} docView={DocumentLinksButton.EditLink} addDocTab={DocumentLinksButton.EditLink.props.addDocTab} changeFlyout={emptyFunction} /> : (null)}
             {LinkDocPreview.LinkInfo ? <LinkDocPreview location={LinkDocPreview.LinkInfo.Location} backgroundColor={this.defaultBackgroundColors}
diff --git a/src/client/views/PreviewCursor.tsx b/src/client/views/PreviewCursor.tsx
index b4116e980..d7034fcfb 100644
--- a/src/client/views/PreviewCursor.tsx
+++ b/src/client/views/PreviewCursor.tsx
@@ -112,10 +112,10 @@ export class PreviewCursor extends React.Component<{}> {
                 } else if (e.clipboardData.items.length) {
                     const batch = UndoManager.StartBatch("collection view drop");
                     const files: File[] = [];
-                    for (let i = 0; i < e.clipboardData.items.length; i++) {
-                        const file = e.clipboardData.items[i].getAsFile();
+                    Array.from(e.clipboardData.items).forEach(item => {
+                        const file = item.getAsFile();
                         file && files.push(file);
-                    }
+                    });
                     const generatedDocuments = await DocUtils.uploadFilesToDocs(files, { x: newPoint[0], y: newPoint[1] });
                     generatedDocuments.forEach(PreviewCursor._addDocument);
                     batch.end();
diff --git a/src/client/views/PropertiesButtons.scss b/src/client/views/PropertiesButtons.scss
new file mode 100644
index 000000000..e099122c4
--- /dev/null
+++ b/src/client/views/PropertiesButtons.scss
@@ -0,0 +1,119 @@
+@import "globalCssVariables";
+
+$linkGap : 3px;
+
+.propertiesButtons-linkFlyout {
+    grid-column: 2/4;
+}
+
+.propertiesButtons-linkButton-empty:hover {
+    background: $main-accent;
+    transform: scale(1.05);
+    cursor: pointer;
+}
+
+.propertiesButtons-linkButton-nonempty:hover {
+    background: $main-accent;
+    transform: scale(1.05);
+    cursor: pointer;
+}
+
+.propertiesButtons-linkButton-empty,
+.propertiesButtons-linkButton-nonempty {
+    height: 30px;
+    width: 30px;
+    border-radius: 5px;
+    opacity: 0.9;
+    pointer-events: auto;
+    background-color: #121721;
+    color: #fcfbf7;
+    text-transform: uppercase;
+    letter-spacing: 2px;
+    font-size: 75%;
+    transition: transform 0.2s;
+    text-align: center;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-right: 10px;
+
+    &:hover {
+        background: $main-accent;
+        transform: scale(1.05);
+        cursor: pointer;
+    }
+}
+
+.propertiesButtons {
+    margin-top: $linkGap;
+    grid-column: 1/4;
+    width: max-content;
+    height: auto;
+    display: flex;
+    flex-direction: row;
+    overflow-x: visible;
+}
+
+.onClickFlyout-editScript {
+    text-align: center;
+    border: 0.5px solid grey;
+    background-color: rgb(230, 230, 230);
+    border-radius: 9px;
+    padding: 4px;
+}
+
+
+.propertiesButtons-button {
+    pointer-events: auto;
+    padding-right: 5px;
+    width: 25px;
+    border-radius: 5px;
+    margin-right: 18px;
+}
+
+.propertiesButtons-linker {
+    height: 30px;
+    width: 30px;
+    text-align: center;
+    border-radius: 5px;
+    pointer-events: auto;
+    color: $dark-color;
+    border: $dark-color 1px solid;
+    transition: 0.2s ease all;
+    margin-right: 5px;
+}
+
+.propertiesButtons-linker:hover {
+    cursor: pointer;
+    transform: scale(1.05);
+}
+
+
+@-moz-keyframes spin {
+    100% {
+        -moz-transform: rotate(360deg);
+    }
+}
+
+@-webkit-keyframes spin {
+    100% {
+        -webkit-transform: rotate(360deg);
+    }
+}
+
+@keyframes spin {
+    100% {
+        -webkit-transform: rotate(360deg);
+        transform: rotate(360deg);
+    }
+}
+
+@keyframes shadow-pulse {
+    0% {
+        box-shadow: 0 0 0 0px rgba(0, 0, 0, 0.8);
+    }
+
+    100% {
+        box-shadow: 0 0 0 10px rgba(0, 255, 0, 0);
+    }
+}
\ No newline at end of file
diff --git a/src/client/views/PropertiesButtons.tsx b/src/client/views/PropertiesButtons.tsx
new file mode 100644
index 000000000..59e7cc7c8
--- /dev/null
+++ b/src/client/views/PropertiesButtons.tsx
@@ -0,0 +1,598 @@
+import { IconProp, library } from '@fortawesome/fontawesome-svg-core';
+import { faArrowAltCircleDown, faArrowAltCircleRight, faArrowAltCircleUp, faCheckCircle, faCloudUploadAlt, faLink, faPhotoVideo, faShare, faStopCircle, faSyncAlt, faTag, faTimes } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { action, computed, observable, runInAction } from "mobx";
+import { observer } from "mobx-react";
+import { Doc, DocListCast } from "../../fields/Doc";
+import { RichTextField } from '../../fields/RichTextField';
+import { Cast, NumCast, BoolCast } from "../../fields/Types";
+import { emptyFunction, setupMoveUpEvents, Utils } from "../../Utils";
+import GoogleAuthenticationManager from '../apis/GoogleAuthenticationManager';
+import { Pulls, Pushes } from '../apis/google_docs/GoogleApiClientUtils';
+import { Docs, DocUtils } from '../documents/Documents';
+import { DragManager } from '../util/DragManager';
+import { CollectionDockingView, DockedFrameRenderer } from './collections/CollectionDockingView';
+import { ParentDocSelector } from './collections/ParentDocumentSelector';
+import './collections/ParentDocumentSelector.scss';
+import './PropertiesButtons.scss';
+import { MetadataEntryMenu } from './MetadataEntryMenu';
+import { DocumentView } from './nodes/DocumentView';
+import { GoogleRef } from "./nodes/formattedText/FormattedTextBox";
+import { TemplateMenu } from "./TemplateMenu";
+import { Template, Templates } from "./Templates";
+import React = require("react");
+import { Tooltip } from '@material-ui/core';
+import { SelectionManager } from '../util/SelectionManager';
+import SharingManager from '../util/SharingManager';
+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';
+const higflyout = require("@hig/flyout");
+export const { anchorPoints } = higflyout;
+export const Flyout = higflyout.default;
+
+library.add(faLink);
+library.add(faTag);
+library.add(faTimes);
+library.add(faArrowAltCircleDown);
+library.add(faArrowAltCircleUp);
+library.add(faArrowAltCircleRight);
+library.add(faStopCircle);
+library.add(faCheckCircle);
+library.add(faCloudUploadAlt);
+library.add(faSyncAlt);
+library.add(faShare);
+library.add(faPhotoVideo);
+
+const cloud: IconProp = "cloud-upload-alt";
+const fetch: IconProp = "sync-alt";
+
+enum UtilityButtonState {
+    Default,
+    OpenRight,
+    OpenExternally
+}
+
+@observer
+export class PropertiesButtons extends React.Component<{}, {}> {
+    private _dragRef = React.createRef<HTMLDivElement>();
+    private _pullAnimating = false;
+    private _pushAnimating = false;
+    private _pullColorAnimating = false;
+
+    @observable private pushIcon: IconProp = "arrow-alt-circle-up";
+    @observable private pullIcon: IconProp = "arrow-alt-circle-down";
+    @observable private pullColor: string = "white";
+    @observable public isAnimatingFetch = false;
+    @observable public isAnimatingPulse = false;
+
+    @observable private openHover: UtilityButtonState = UtilityButtonState.Default;
+
+    @observable public static Instance: PropertiesButtons;
+    public static hasPushedHack = false;
+    public static hasPulledHack = false;
+
+
+    @computed get selectedDocumentView() {
+        if (SelectionManager.SelectedDocuments().length) {
+            return SelectionManager.SelectedDocuments()[0];
+        } else { return undefined; }
+    }
+    @computed get selectedDoc() { return this.selectedDocumentView?.rootDoc; }
+    @computed get dataDoc() { return this.selectedDocumentView?.dataDoc; }
+
+    @computed get onClick() { return this.selectedDoc?.onClickBehavior ? this.selectedDoc?.onClickBehavior : "nothing"; }
+
+    public startPullOutcome = action((success: boolean) => {
+        if (!this._pullAnimating) {
+            this._pullAnimating = true;
+            this.pullIcon = success ? "check-circle" : "stop-circle";
+            setTimeout(() => runInAction(() => {
+                this.pullIcon = "arrow-alt-circle-down";
+                this._pullAnimating = false;
+            }), 1000);
+        }
+    });
+
+    public startPushOutcome = action((success: boolean) => {
+        this.isAnimatingPulse = false;
+        if (!this._pushAnimating) {
+            this._pushAnimating = true;
+            this.pushIcon = success ? "check-circle" : "stop-circle";
+            setTimeout(() => runInAction(() => {
+                this.pushIcon = "arrow-alt-circle-up";
+                this._pushAnimating = false;
+            }), 1000);
+        }
+    });
+
+    public setPullState = action((unchanged: boolean) => {
+        this.isAnimatingFetch = false;
+        if (!this._pullColorAnimating) {
+            this._pullColorAnimating = true;
+            this.pullColor = unchanged ? "lawngreen" : "red";
+            setTimeout(this.clearPullColor, 1000);
+        }
+    });
+
+    private clearPullColor = action(() => {
+        this.pullColor = "white";
+        this._pullColorAnimating = false;
+    });
+
+    @computed
+    get considerGoogleDocsPush() {
+        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>;
+    }
+
+    @computed
+    get considerGoogleDocsPull() {
+        const targetDoc = this.selectedDoc;
+        const dataDoc = targetDoc && Doc.GetProto(targetDoc);
+        const animation = this.isAnimatingFetch ? "spin 0.5s linear infinite" : "none";
+
+        const title = (() => {
+            switch (this.openHover) {
+                default:
+                case UtilityButtonState.Default: return `${!dataDoc?.unchanged ? "Pull from" : "Fetch"} Google Docs`;
+                case UtilityButtonState.OpenRight: return "Open in Right Split";
+                case UtilityButtonState.OpenExternally: return "Open in new Browser Tab";
+            }
+        })();
+
+        return !targetDoc || !dataDoc || !dataDoc[GoogleRef] ? (null) : <Tooltip
+            title={<><div className="dash-tooltip">{title}</div></>}>
+            <div className="propertiesButtons-linker"
+                style={{ backgroundColor: this.pullColor }}
+                onPointerEnter={action(e => {
+                    if (e.altKey) {
+                        this.openHover = UtilityButtonState.OpenExternally;
+                    } else if (e.shiftKey) {
+                        this.openHover = UtilityButtonState.OpenRight;
+                    }
+                })}
+                onPointerLeave={action(() => this.openHover = UtilityButtonState.Default)}
+                onClick={async e => {
+                    const googleDocUrl = `https://docs.google.com/document/d/${dataDoc[GoogleRef]}/edit`;
+                    if (e.shiftKey) {
+                        e.preventDefault();
+                        let googleDoc = await Cast(dataDoc.googleDoc, Doc);
+                        if (!googleDoc) {
+                            const options = { _width: 600, _nativeWidth: 960, _nativeHeight: 800, isAnnotating: false, UseCors: false };
+                            googleDoc = Docs.Create.WebDocument(googleDocUrl, options);
+                            dataDoc.googleDoc = googleDoc;
+                        }
+                        CollectionDockingView.AddRightSplit(googleDoc);
+                    } else if (e.altKey) {
+                        e.preventDefault();
+                        window.open(googleDocUrl);
+                    } else {
+                        this.clearPullColor();
+                        PropertiesButtons.hasPulledHack = false;
+                        targetDoc[Pulls] = NumCast(targetDoc[Pulls]) + 1;
+                        dataDoc.unchanged && runInAction(() => this.isAnimatingFetch = true);
+                    }
+                }}>
+                <FontAwesomeIcon className="documentdecorations-icon" size="sm"
+                    style={{ WebkitAnimation: animation, MozAnimation: animation }}
+                    icon={(() => {
+                        switch (this.openHover) {
+                            default:
+                            case UtilityButtonState.Default: return dataDoc.unchanged === false ? (this.pullIcon as any) : fetch;
+                            case UtilityButtonState.OpenRight: return "arrow-alt-circle-right";
+                            case UtilityButtonState.OpenExternally: return "share";
+                        }
+                    })()}
+                />
+            </div></Tooltip>;
+    }
+    @computed
+    get pinButton() {
+        const targetDoc = this.selectedDoc;
+        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="propertiesButtons-linker"
+                style={{ backgroundColor: isPinned ? "white" : "rgb(37, 43, 51)", color: isPinned ? "black" : "white" }}
+                onClick={e => DockedFrameRenderer.PinDoc(targetDoc, isPinned)}>
+                <FontAwesomeIcon className="documentdecorations-icon" size="sm" icon="map-pin"
+                />
+            </div></Tooltip>;
+    }
+
+    @computed
+    get metadataButton() {
+        //const view0 = this.view0;
+        if (this.selectedDoc) {
+            return <Tooltip title={<><div className="dash-tooltip">Show metadata panel</div></>}>
+                <div className="propertiesButtons-linkFlyout">
+                    <Flyout anchorPoint={anchorPoints.LEFT_TOP}
+                        content={<MetadataEntryMenu docs={[this.selectedDoc]} suggestWithFunction />  /* tfs: @bcz This might need to be the data document? */}>
+                        <div className={"propertiesButtons-linkButton-" + "empty"} onPointerDown={e => e.stopPropagation()} >
+                            {<FontAwesomeIcon className="documentdecorations-icon" icon="tag" size="sm" />}
+                        </div>
+                    </Flyout>
+                </div></Tooltip>;
+        } else {
+            return null;
+        }
+
+    }
+
+    @observable _aliasDown = false;
+    onAliasButtonDown = (e: React.PointerEvent): void => {
+        setupMoveUpEvents(this, e, this.onAliasButtonMoved, emptyFunction, emptyFunction);
+    }
+    onAliasButtonMoved = () => {
+        if (this._dragRef.current) {
+            const dragDocView = this.selectedDocumentView!;
+            const dragData = new DragManager.DocumentDragData([dragDocView.props.Document]);
+            const [left, top] = dragDocView.props.ScreenToLocalTransform().inverse().transformPoint(0, 0);
+            dragData.dropAction = "alias";
+            DragManager.StartDocumentDrag([dragDocView.ContentDiv!], dragData, left, top, {
+                offsetX: dragData.offset[0],
+                offsetY: dragData.offset[1],
+                hideSource: false
+            });
+            return true;
+        }
+        return false;
+    }
+
+    @computed
+    get templateButton() {
+        const docView = this.selectedDocumentView;
+        const templates: Map<Template, boolean> = new Map();
+        const views = [this.selectedDocumentView];
+        Array.from(Object.values(Templates.TemplateList)).map(template =>
+            templates.set(template, views.reduce((checked, doc) => checked || doc?.props.Document["_show" + template.Name] ? true : false, false as boolean)));
+        return !docView ? (null) :
+            <Tooltip title={<><div className="dash-tooltip">Customize layout</div></>}>
+                <div className="propertiesButtons-linkFlyout">
+                    <Flyout anchorPoint={anchorPoints.LEFT_TOP} //onOpen={action(() => this._aliasDown = true)} onClose={action(() => this._aliasDown = false)}
+                        content={<TemplateMenu docViews={views.filter(v => v).map(v => v as DocumentView)} templates={templates} />}>
+                        <div className={"propertiesButtons-linkButton-empty"} >
+                            {<FontAwesomeIcon className="documentdecorations-icon" icon="edit" size="sm" />}
+                        </div>
+                    </Flyout>
+                </div></Tooltip>;
+    }
+
+    onCopy = () => {
+        if (this.selectedDoc && this.selectedDocumentView) {
+            const copy = Doc.MakeCopy(this.selectedDocumentView.props.Document, true);
+            copy.x = NumCast(this.selectedDoc.x) + NumCast(this.selectedDoc._width);
+            copy.y = NumCast(this.selectedDoc.y) + 30;
+            this.selectedDocumentView.props.addDocument?.(copy);
+        }
+    }
+
+    @computed
+    get copyButton() {
+        const targetDoc = this.selectedDoc;
+        return !targetDoc ? (null) : <Tooltip title={<><div className="dash-tooltip">{"Tap or Drag to create an alias"}</div></>}>
+            <div className={"propertiesButtons-linkButton-empty"}
+                ref={this._dragRef}
+                onPointerDown={this.onAliasButtonDown}
+                onClick={this.onCopy}>
+                {<FontAwesomeIcon className="documentdecorations-icon" icon="copy" size="sm" />}
+            </div>
+        </Tooltip>;
+    }
+
+    @action
+    onLock = () => {
+        this.selectedDocumentView?.toggleLockPosition();
+    }
+
+    @computed
+    get lockButton() {
+        const targetDoc = this.selectedDoc;
+        return !targetDoc ? (null) : <Tooltip
+            title={<><div className="dash-tooltip">{this.selectedDoc?.lockedPosition ?
+                "Unlock Position" : "Lock Position"}</div></>}>
+            <div className={"propertiesButtons-linkButton-empty"}
+                onPointerDown={this.onLock} >
+                {<FontAwesomeIcon className="documentdecorations-icon"
+                    icon={BoolCast(this.selectedDoc?.lockedPosition) ? "unlock" : "lock"} size="sm" />}
+            </div>
+        </Tooltip>;
+    }
+
+    @computed
+    get downloadButton() {
+        const targetDoc = this.selectedDoc;
+        return !targetDoc ? (null) : <Tooltip
+            title={<><div className="dash-tooltip">{"Download Document"}</div></>}>
+            <div className={"propertiesButtons-linkButton-empty"}
+                onPointerDown={async () => {
+                    if (this.selectedDocumentView?.props.Document) {
+                        Doc.Zip(this.selectedDocumentView?.props.Document);
+                    }
+                }}>
+                {<FontAwesomeIcon className="propertiesButtons-icon"
+                    icon="download" size="sm" />}
+            </div>
+        </Tooltip>;
+    }
+
+    @computed
+    get deleteButton() {
+        const targetDoc = this.selectedDoc;
+        return !targetDoc ? (null) : <Tooltip
+            title={<><div className="dash-tooltip">{"Delete Document"}</div></>}>
+            <div className={"propertiesButtons-linkButton-empty"}
+                onPointerDown={() => {
+                    this.selectedDocumentView?.props.ContainingCollectionView?.removeDocument(this.selectedDocumentView?.props.Document);
+                }}>
+                {<FontAwesomeIcon className="propertiesButtons-icon"
+                    icon="trash-alt" size="sm" />}
+            </div>
+        </Tooltip>;
+    }
+
+    @computed
+    get sharingButton() {
+        const targetDoc = this.selectedDoc;
+        return !targetDoc ? (null) : <Tooltip
+            title={<><div className="dash-tooltip">{"Share Document"}</div></>}>
+            <div className={"propertiesButtons-linkButton-empty"}
+                onPointerDown={() => {
+                    if (this.selectedDocumentView) {
+                        SharingManager.Instance.open(this.selectedDocumentView);
+                    }
+                }}>
+                {<FontAwesomeIcon className="propertiesButtons-icon"
+                    icon="users" size="sm" />}
+            </div>
+        </Tooltip>;
+    }
+
+    @computed
+    get onClickButton() {
+        if (this.selectedDoc) {
+            return <Tooltip title={<><div className="dash-tooltip">Choose onClick behavior</div></>}>
+                <div className="propertiesButtons-linkFlyout">
+                    <Flyout anchorPoint={anchorPoints.LEFT_TOP}
+                        content={this.onClickFlyout}>
+                        <div className={"propertiesButtons-linkButton-" + "empty"} onPointerDown={e => e.stopPropagation()} >
+                            {<FontAwesomeIcon className="documentdecorations-icon" icon="mouse-pointer" size="sm" />}
+                        </div>
+                    </Flyout>
+                </div></Tooltip>;
+        } else {
+            return null;
+        }
+    }
+
+    @action
+    handleOptionChange = (e: any) => {
+        const value = e.target.value;
+        this.selectedDoc && (this.selectedDoc.onClickBehavior = e.target.value);
+        if (value === "nothing") {
+            this.selectedDocumentView?.noOnClick();
+        } else if (value === "enterPortal") {
+            this.selectedDocumentView?.noOnClick();
+            this.selectedDocumentView?.makeIntoPortal();
+        } else if (value === "toggleDetail") {
+            this.selectedDocumentView?.noOnClick();
+            this.selectedDocumentView?.toggleDetail();
+        } else if (value === "linkInPlace") {
+            this.selectedDocumentView?.noOnClick();
+            this.selectedDocumentView?.toggleFollowLink("inPlace", true, false);
+        } else if (value === "linkOnRight") {
+            this.selectedDocumentView?.noOnClick();
+            this.selectedDocumentView?.toggleFollowLink("onRight", false, false);
+        }
+    }
+
+    @undoBatch @action
+    editOnClickScript = () => {
+        if (this.selectedDoc) {
+            DocUtils.makeCustomViewClicked(this.selectedDoc, undefined, "onClick");
+        }
+    }
+
+    @computed
+    get onClickFlyout() {
+        return <div><form>
+            <div className="radio">
+                <label>
+                    <input type="radio" value="nothing"
+                        checked={this.onClick === 'nothing'}
+                        onChange={this.handleOptionChange} />
+                    Select Document
+                </label>
+            </div>
+            <div className="radio">
+                <label>
+                    <input type="radio" value="enterPortal"
+                        checked={this.onClick === 'enterPortal'}
+                        onChange={this.handleOptionChange} />
+                    Enter Portal
+                </label>
+            </div>
+            <div className="radio">
+                <label>
+                    <input type="radio" value="toggleDetail"
+                        checked={this.onClick === 'toggleDetail'}
+                        onChange={this.handleOptionChange} />
+                    Toggle Detail
+                </label>
+            </div>
+            <div className="radio">
+                <label>
+                    <input type="radio" value="linkInPlace"
+                        checked={this.onClick === 'linkInPlace'}
+                        onChange={this.handleOptionChange} />
+                    Follow Link
+                </label>
+            </div>
+            <div className="radio">
+                <label>
+                    <input type="radio" value="linkOnRight"
+                        checked={this.onClick === 'linkOnRight'}
+                        onChange={this.handleOptionChange} />
+                    Open Link on Right
+                </label>
+            </div>
+        </form>
+            <div onPointerDown={this.editOnClickScript} className="onClickFlyout-editScript"> Edit onClick Script</div>
+        </div>;
+    }
+
+    @computed
+    get googlePhotosButton() {
+        const targetDoc = this.selectedDoc;
+        return !targetDoc ? (null) : <Tooltip
+            title={<><div className="dash-tooltip">{"Export to Google Photos"}</div></>}>
+            <div className={"propertiesButtons-linkButton-empty"}
+                onPointerDown={() => {
+                    if (this.selectedDocumentView) {
+                        GooglePhotos.Export.CollectionToAlbum({ collection: this.selectedDocumentView.Document }).then(console.log);
+                    }
+                }}>
+                {<FontAwesomeIcon className="documentdecorations-icon"
+                    icon="cloud-upload-alt" size="sm" />}
+            </div>
+        </Tooltip>;
+    }
+
+    @computed
+    get clustersButton() {
+        const targetDoc = this.selectedDoc;
+        return !targetDoc ? (null) : <Tooltip
+            title={<><div className="dash-tooltip">{this.selectedDoc?.useClusters ? "Stop Showing Clusters" : "Show Clusters"}</div></>}>
+            <div className={"propertiesButtons-linkButton-empty"}
+                style={{ backgroundColor: this.selectedDoc?.useClusters ? "#a0a0a0" : "" }}
+                onPointerDown={this.changeClusters}>
+                {<FontAwesomeIcon className="documentdecorations-icon"
+                    color={this.selectedDoc?.useClusters ? "black" : "white"}
+                    icon="braille" size="sm" />}
+            </div>
+        </Tooltip>;
+    }
+
+    @action @undoBatch
+    changeFitToBox = () => {
+        this.selectedDoc && (this.selectedDoc._fitToBox = !this.selectedDoc._fitToBox);
+    }
+
+    @action @undoBatch
+    changeClusters = () => {
+        this.selectedDoc && (this.selectedDoc.useClusters = !this.selectedDoc.useClusters);
+    }
+
+    @computed
+    get fitContentButton() {
+        const targetDoc = this.selectedDoc;
+        return !targetDoc ? (null) : <Tooltip
+            title={<><div className="dash-tooltip">{this.selectedDoc?._fitToBox ? "Stop Fitting Content" : "Fit Content"}</div></>}>
+            <div className={"propertiesButtons-linkButton-empty"}
+                style={{ backgroundColor: this.selectedDoc?._fitToBox ? "#a0a0a0" : "" }}
+                onPointerDown={this.changeFitToBox}>
+                {<FontAwesomeIcon className="documentdecorations-icon"
+                    color={this.selectedDoc?._fitToBox ? "black" : "white"}
+                    icon="expand" size="sm" />}
+            </div>
+        </Tooltip>;
+    }
+
+    // @computed
+    // get importButton() {
+    //     const targetDoc = this.selectedDoc;
+    //     return !targetDoc ? (null) : <Tooltip
+    //         title={<><div className="dash-tooltip">{"Import a Document"}</div></>}>
+    //         <div className={"propertiesButtons-linkButton-empty"}
+    //             onPointerDown={() => {
+    //                 if (this.selectedDocumentView) {
+    //                     CollectionFreeFormView.importDocument(100, 100);
+    //                 }
+    //             }}>
+    //             {<FontAwesomeIcon className="documentdecorations-icon"
+    //                 icon="upload" size="sm" />}
+    //         </div>
+    //     </Tooltip>;
+    // }
+
+
+    render() {
+        if (!this.selectedDoc) return (null);
+
+        const isText = this.selectedDoc[Doc.LayoutFieldKey(this.selectedDoc)] instanceof RichTextField;
+        const considerPull = isText && this.considerGoogleDocsPull;
+        const considerPush = isText && this.considerGoogleDocsPush;
+        const isImage = this.selectedDoc[Doc.LayoutFieldKey(this.selectedDoc)] instanceof ImageField;
+        const isCollection = this.selectedDoc.type === DocumentType.COL ? true : false;
+        const isFreeForm = this.selectedDoc._viewType === "freeform" ? true : false;
+
+        return <div><div className="propertiesButtons" style={{ paddingBottom: "5.5px" }}>
+            <div className="propertiesButtons-button">
+                {this.templateButton}
+            </div>
+            {/* <div className="propertiesButtons-button">
+                {this.metadataButton}
+            </div> */}
+            <div className="propertiesButtons-button">
+                {this.pinButton}
+            </div>
+            <div className="propertiesButtons-button">
+                {this.copyButton}
+            </div>
+            <div className="propertiesButtons-button">
+                {this.lockButton}
+            </div>
+            <div className="propertiesButtons-button">
+                {this.downloadButton}
+            </div>
+        </div>
+            <div className="propertiesButtons">
+                <div className="propertiesButtons-button">
+                    {this.deleteButton}
+                </div>
+                <div className="propertiesButtons-button">
+                    {this.onClickButton}
+                </div>
+                <div className="propertiesButtons-button">
+                    {this.sharingButton}
+                </div>
+                <div className="propertiesButtons-button" style={{ display: !considerPush ? "none" : "" }}>
+                    {this.considerGoogleDocsPush}
+                </div>
+                <div className="propertiesButtons-button" style={{ display: !considerPull ? "none" : "" }}>
+                    {this.considerGoogleDocsPull}
+                </div>
+                <div className="propertiesButtons-button" style={{ display: !isImage ? "none" : "" }}>
+                    {this.googlePhotosButton}
+                </div>
+                {/* <div className="propertiesButtons-button" style={{ display: !isCollection ? "none" : "" }}>
+                    {this.importButton}
+                </div> */}
+
+                <div className="propertiesButtons-button" style={{ display: !isFreeForm ? "none" : "" }}>
+                    {this.clustersButton}
+                </div>
+
+                <div className="propertiesButtons-button" style={{ display: !isFreeForm ? "none" : "" }}>
+                    {this.fitContentButton}
+                </div>
+
+            </div>
+        </div>;
+    }
+}
diff --git a/src/client/views/collections/CollectionDockingView.scss b/src/client/views/collections/CollectionDockingView.scss
index 9b14df760..6d93b2ba8 100644
--- a/src/client/views/collections/CollectionDockingView.scss
+++ b/src/client/views/collections/CollectionDockingView.scss
@@ -12,6 +12,7 @@
         width: 100%;
         height: 100%;
         position: absolute;
+
         .miniThumb {
             background: #25252525;
             position: absolute;
@@ -89,6 +90,7 @@
     transform: translate(0px, -3px);
     cursor: grab;
 }
+
 .lm_title.focus-visible {
     cursor: text;
 }
@@ -96,23 +98,25 @@
 .lm_title_wrap {
     overflow: hidden;
     height: 19px;
-    margin-top: -3px;
-    display:inline-block;
+    margin-top: -2px;
+    display: inline-block;
 }
+
 .lm_active .lm_title {
     border: solid 1px lightgray;
 }
+
 .lm_header .lm_tab .lm_close_tab {
     position: absolute;
     text-align: center;
 }
 
 .lm_header .lm_tab {
-    padding-right : 20px;
+    padding-right: 20px;
 }
 
 .lm_popout {
-    display:none;
+    display: none;
 }
 
 .messageCounter {
@@ -135,6 +139,7 @@
     position: absolute;
     top: 0;
     left: 0;
+
     // overflow: hidden;  // bcz: menus don't show up when this is on (e.g., the parentSelectorMenu)
     .collectionDockingView-gear {
         padding-left: 5px;
@@ -142,7 +147,10 @@
         width: 18px;
         display: inline-block;
         margin: auto;
+
+        display: none;
     }
+
     .collectionDockingView-dragAsDocument {
         touch-action: none;
         position: absolute;
diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx
index f658e9816..d685fac4e 100644
--- a/src/client/views/collections/CollectionDockingView.tsx
+++ b/src/client/views/collections/CollectionDockingView.tsx
@@ -1,9 +1,8 @@
 import 'golden-layout/src/css/goldenlayout-base.css';
 import 'golden-layout/src/css/goldenlayout-dark-theme.css';
-import { action, computed, Lambda, observable, reaction, runInAction, trace } from "mobx";
+import { action, computed, Lambda, observable, reaction, runInAction, trace, IReactionDisposer } from "mobx";
 import { observer } from "mobx-react";
 import * as ReactDOM from 'react-dom';
-import Measure from "react-measure";
 import * as GoldenLayout from "../../../client/goldenLayout";
 import { DateField } from '../../../fields/DateField';
 import { Doc, DocListCast, Field, Opt, DataSym } from "../../../fields/Doc";
@@ -507,7 +506,6 @@ export class CollectionDockingView extends React.Component<SubCollectionViewProp
 
             const doc = await DocServer.GetRefField(tab.contentItem.config.props.documentId) as Doc;
             if (doc instanceof Doc) {
-                //tab.titleElement[0].outerHTML = `<input class='lm_title' style="background:black" value='${doc.title}' />`;
                 tab.titleElement[0].onclick = (e: any) => tab.titleElement[0].focus();
                 tab.titleElement[0].onchange = (e: any) => {
                     tab.titleElement[0].size = e.currentTarget.value.length + 1;
@@ -522,6 +520,10 @@ export class CollectionDockingView extends React.Component<SubCollectionViewProp
                 gearSpan.style.paddingLeft = "0px";
                 gearSpan.style.paddingRight = "12px";
                 const stack = tab.contentItem.parent;
+                tab.element[0].onpointerdown = (e: any) => {
+                    const view = DocumentManager.Instance.getDocumentView(doc);
+                    view && SelectionManager.SelectDoc(view, false);
+                };
                 // shifts the focus to this tab when another tab is dragged over it
                 tab.element[0].onmouseenter = (e: any) => {
                     if (!this._isPointerDown || !SnappingManager.GetIsDragging()) return;
@@ -676,10 +678,15 @@ export class DockedFrameRenderer extends React.Component<DockedFrameProps> {
     @observable private _panelHeight = 0;
     @observable private _document: Opt<Doc>;
     @observable private _isActive: boolean = false;
+    _tabReaction: IReactionDisposer | undefined;
 
     get _stack(): any {
         return (this.props as any).glContainer.parent.parent;
     }
+    get _tab(): any {
+        const tab = (this.props as any).glContainer.tab.element[0] as HTMLElement;
+        return tab.getElementsByClassName("lm_title")?.[0];
+    }
     constructor(props: any) {
         super(props);
         DocServer.GetRefField(this.props.documentId).then(action((f: Opt<Field>) => this._document = f as Doc));
@@ -740,9 +747,16 @@ export class DockedFrameRenderer extends React.Component<DockedFrameProps> {
         this.props.glContainer.layoutManager.on("activeContentItemChanged", this.onActiveContentItemChanged);
         this.props.glContainer.on("tab", this.onActiveContentItemChanged);
         this.onActiveContentItemChanged();
+        this._tabReaction = reaction(() => ({ views: SelectionManager.SelectedDocuments(), color: StrCast(this._document?._backgroundColor, "white") }),
+            (data) => {
+                const selected = data.views.some(v => Doc.AreProtosEqual(v.props.Document, this._document));
+                this._tab.style.backgroundColor = selected ? data.color : "";
+            }
+        );
     }
 
     componentWillUnmount() {
+        this._tabReaction?.();
         this.props.glContainer.layoutManager.off("activeContentItemChanged", this.onActiveContentItemChanged);
         this.props.glContainer.off("tab", this.onActiveContentItemChanged);
     }
diff --git a/src/client/views/collections/CollectionMenu.tsx b/src/client/views/collections/CollectionMenu.tsx
index 0ca86172f..fdd1b4e81 100644
--- a/src/client/views/collections/CollectionMenu.tsx
+++ b/src/client/views/collections/CollectionMenu.tsx
@@ -25,6 +25,8 @@ import { SelectionManager } from "../../util/SelectionManager";
 import { DocumentView } from "../nodes/DocumentView";
 import { ColorState } from "react-color";
 import { ObjectField } from "../../../fields/ObjectField";
+import RichTextMenu from "../nodes/formattedText/RichTextMenu";
+import { RichTextField } from "../../../fields/RichTextField";
 import { ScriptField } from "../../../fields/ScriptField";
 import { IconProp } from '@fortawesome/fontawesome-svg-core';
 import { DocUtils } from "../../documents/Documents";
@@ -47,7 +49,7 @@ export default class CollectionMenu extends AntimodeMenu {
 
     componentDidMount() {
         reaction(() => SelectionManager.SelectedDocuments().length && SelectionManager.SelectedDocuments()[0],
-            (doc) => doc && this.SetSelection(doc))
+            (doc) => doc && this.SetSelection(doc));
     }
 
     @action
@@ -160,7 +162,8 @@ 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) : ""; },
     };
 
-    _freeform_commands = [this._viewCommand, this._saveFilterCommand, this._fitContentCommand, this._clusterCommand, this._contentCommand, this._templateCommand, this._narrativeCommand];
+    @computed get _freeform_commands() { return Doc.UserDoc().noviceMode ? [this._viewCommand, this._saveFilterCommand] : [this._viewCommand, this._saveFilterCommand, this._contentCommand, this._templateCommand, this._narrativeCommand]; }
+
     _stacking_commands = [this._contentCommand, this._templateCommand];
     _masonry_commands = [this._contentCommand, this._templateCommand];
     _schema_commands = [this._templateCommand, this._narrativeCommand];
@@ -308,18 +311,32 @@ export class CollectionViewBaseChrome extends React.Component<CollectionMenuProp
         </div>;
     }
 
+    @computed get selectedDocumentView() {
+        if (SelectionManager.SelectedDocuments().length) {
+            return SelectionManager.SelectedDocuments()[0];
+        } else { return undefined; }
+    }
+    @computed get selectedDoc() { return this.selectedDocumentView?.rootDoc; }
+    @computed get isText() {
+        if (this.selectedDoc) {
+            return this.selectedDoc[Doc.LayoutFieldKey(this.selectedDoc)] instanceof RichTextField;
+        }
+        else return false;
+    }
+
     render() {
         return (
             <div className="collectionMenu-cont" >
                 <div className="collectionMenu">
                     <div className="collectionViewBaseChrome">
-                        {this.props.type === CollectionViewType.Invalid || this.props.type === CollectionViewType.Docking ? (null) : this.viewModes}
-                        {this.props.type === CollectionViewType.Docking ? (null) : this.templateChrome}
-                        <div className="collectionViewBaseChrome-viewSpecs" title="filter documents to show" style={{ display: "grid" }}>
+                        {this.props.type === CollectionViewType.Invalid ||
+                            this.props.type === CollectionViewType.Docking || this.isText ? (null) : this.viewModes}
+                        {this.props.type === CollectionViewType.Docking || this.isText ? (null) : this.templateChrome}
+                        {/* <div className="collectionViewBaseChrome-viewSpecs" title="filter documents to show" style={{ display: "grid" }}>
                             <button className={"antimodeMenu-button"} onClick={this.toggleViewSpecs} >
                                 <FontAwesomeIcon icon="filter" size="lg" />
                             </button>
-                        </div>
+                        </div> */}
 
                         {this.props.docView.props.ContainingCollectionDoc?._viewType !== CollectionViewType.Freeform ? (null) : <button className={"antimodeMenu-button"} key="float"
                             style={{ backgroundColor: !this.props.docView.layoutDoc.isAnnotating ? "121212" : undefined, borderRight: "1px solid gray" }}
@@ -356,6 +373,20 @@ export class CollectionFreeFormViewChrome extends React.Component<CollectionMenu
     @computed get childDocs() {
         return DocListCast(this.dataField);
     }
+
+    @computed get selectedDocumentView() {
+        if (SelectionManager.SelectedDocuments().length) {
+            return SelectionManager.SelectedDocuments()[0];
+        } else { return undefined; }
+    }
+    @computed get selectedDoc() { return this.selectedDocumentView?.rootDoc; }
+    @computed get isText() {
+        if (this.selectedDoc) {
+            return this.selectedDoc[Doc.LayoutFieldKey(this.selectedDoc)] instanceof RichTextField;
+        }
+        else return false;
+    }
+
     @undoBatch
     @action
     nextKeyframe = (): void => {
@@ -384,6 +415,7 @@ export class CollectionFreeFormViewChrome extends React.Component<CollectionMenu
     miniMap = (): void => {
         this.document.hideMinimap = !this.document.hideMinimap;
     }
+
     private _palette = ["#D0021B", "#F5A623", "#F8E71C", "#8B572A", "#7ED321", "#417505", "#9013FE", "#4A90E2", "#50E3C2", "#B8E986", "#000000", "#4A4A4A", "#9B9B9B", "#FFFFFF", ""];
     private _width = ["1", "5", "10", "100"];
     // private _draw = ["⎯", "→", "↔︎", "∿", "↝", "↭", "ロ", "O", "∆"];
@@ -523,40 +555,44 @@ export class CollectionFreeFormViewChrome extends React.Component<CollectionMenu
     }
 
     @computed get formatPane() {
-        return <button className="antimodeMenu-button" key="format" title="toggle foramatting pane"
-            onPointerDown={action(e => FormatShapePane.Instance.Pinned = !FormatShapePane.Instance.Pinned)}
-            style={{ backgroundColor: this._fillBtn ? "121212" : "" }}>
-            <FontAwesomeIcon icon="angle-double-right" size="lg" />
-        </button>;
+        // return <button className="antimodeMenu-button" key="format" title="toggle foramatting pane"
+        //     onPointerDown={action(e => FormatShapePane.Instance.Pinned = !FormatShapePane.Instance.Pinned)}
+        //     style={{ backgroundColor: this._fillBtn ? "121212" : "" }}>
+        //     <FontAwesomeIcon icon="angle-double-right" size="lg" />
+        // </button>;
+        return null;
     }
 
     render() {
         return !this.props.docView.layoutDoc ? (null) : <div className="collectionFreeFormMenu-cont">
-            {this.props.docView.props.renderDepth !== 0 ? (null) :
+            {this.props.docView.props.renderDepth !== 0 || this.isText ? (null) :
                 <div key="map" title="mini map" className="backKeyframe" onClick={this.miniMap}>
                     <FontAwesomeIcon icon={"map"} size={"lg"} />
                 </div>
             }
-            <div key="back" title="back frame" className="backKeyframe" onClick={this.prevKeyframe}>
+            {!!!this.isText ? <div key="back" title="back frame" className="backKeyframe" onClick={this.prevKeyframe}>
                 <FontAwesomeIcon icon={"caret-left"} size={"lg"} />
-            </div>
-            <div key="num" title="toggle view all" className="numKeyframe" style={{ backgroundColor: this.document.editing ? "#759c75" : "#c56565" }}
+            </div> : null}
+            {!!!this.isText ? <div key="num" title="toggle view all" className="numKeyframe" style={{ backgroundColor: this.document.editing ? "#759c75" : "#c56565" }}
                 onClick={action(() => this.document.editing = !this.document.editing)} >
                 {NumCast(this.document.currentFrame)}
-            </div>
-            <div key="fwd" title="forward frame" className="fwdKeyframe" onClick={this.nextKeyframe}>
+            </div> : null}
+            {!!!this.isText ? <div key="fwd" title="forward frame" className="fwdKeyframe" onClick={this.nextKeyframe}>
                 <FontAwesomeIcon icon={"caret-right"} size={"lg"} />
-            </div>
+            </div> : null}
 
-            {!this.props.isOverlay || this.document.type !== DocumentType.WEB ? (null) :
+            {!this.props.isOverlay || this.document.type !== DocumentType.WEB || this.isText ? (null) :
                 <button className={"antimodeMenu-button"} key="hypothesis"
-                    style={{ backgroundColor: !this.props.docView.layoutDoc.isAnnotating ? "121212" : undefined, borderRight: "1px solid gray" }}
+                    style={{
+                        backgroundColor: !this.props.docView.layoutDoc.isAnnotating ? "121212" : undefined,
+                        borderRight: "1px solid gray"
+                    }}
                     title="Use Hypothesis"
                     onClick={() => this.props.docView.layoutDoc.isAnnotating = !this.props.docView.layoutDoc.isAnnotating}>
                     <FontAwesomeIcon icon={["fab", "hire-a-helper"]} size={"lg"} />
                 </button>
             }
-            {!this.props.isOverlay || this.props.docView.layoutDoc.isAnnotating ?
+            {(!this.props.isOverlay || this.props.docView.layoutDoc.isAnnotating) && !this.isText ?
                 <>
                     {this.drawButtons}
                     {this.widthPicker}
@@ -566,6 +602,7 @@ export class CollectionFreeFormViewChrome extends React.Component<CollectionMenu
                 </> :
                 (null)
             }
+            {this.isText ? <RichTextMenu key="rich" /> : null}
         </div>;
     }
 }
diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx
index 5553bbbb7..f67e049fd 100644
--- a/src/client/views/collections/CollectionSchemaView.tsx
+++ b/src/client/views/collections/CollectionSchemaView.tsx
@@ -253,7 +253,7 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) {
             <div className="collectionSchema-headerMenu-group">
                 <div onClick={() => this.typesDropdownChange(!this._openTypes)}>
                     <label>Column type:</label>
-                    <FontAwesomeIcon icon={"caret-down"} size="sm" style={{ float: "right" }} />
+                    <FontAwesomeIcon icon={"caret-down"} size="lg" style={{ float: "right" }} />
                 </div>
                 {this._openTypes ? allColumnTypes : justColType}
             </div >
diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx
index 425dc90e4..a104ac011 100644
--- a/src/client/views/collections/CollectionStackingView.tsx
+++ b/src/client/views/collections/CollectionStackingView.tsx
@@ -227,6 +227,7 @@ export class CollectionStackingView extends CollectionSubView(StackingDocument)
             addDocTab={this.addDocTab}
             bringToFront={returnFalse}
             ContentScaling={returnOne}
+            scriptContext={this.props.scriptContext}
             pinToPres={this.props.pinToPres}
         />;
     }
diff --git a/src/client/views/collections/CollectionStackingViewFieldColumn.tsx b/src/client/views/collections/CollectionStackingViewFieldColumn.tsx
index 26d2ee8a3..68c233a16 100644
--- a/src/client/views/collections/CollectionStackingViewFieldColumn.tsx
+++ b/src/client/views/collections/CollectionStackingViewFieldColumn.tsx
@@ -351,7 +351,7 @@ export class CollectionStackingViewFieldColumn extends React.Component<CSVFieldC
             {this.props.parent.Document._columnsHideIfEmpty ? (null) : headingView}
             {
                 this.collapsed ? (null) :
-                    <div style={{ marginTop: 5 }}>
+                    <div>
                         <div key={`${heading}-stack`} className={`collectionStackingView-masonry${singleColumn ? "Single" : "Grid"}`}
                             style={{
                                 padding: singleColumn ? `${columnYMargin}px ${0}px ${style.yMargin}px ${0}px` : `${columnYMargin}px ${0}px`,
diff --git a/src/client/views/collections/CollectionSubView.tsx b/src/client/views/collections/CollectionSubView.tsx
index 9f78c15eb..c90e85271 100644
--- a/src/client/views/collections/CollectionSubView.tsx
+++ b/src/client/views/collections/CollectionSubView.tsx
@@ -296,7 +296,7 @@ export function CollectionSubView<T, X>(schemaCtor: (doc: Doc) => T, moreProps?:
                             const reg = new RegExp(Utils.prepend(""), "g");
                             const modHtml = srcUrl ? html.replace(reg, srcUrl) : html;
                             const htmlDoc = Docs.Create.HtmlDocument(modHtml, { ...options, title: "-web page-", _width: 300, _height: 300 });
-                            Doc.GetProto(htmlDoc)["data-text"] = Doc.GetProto(htmlDoc)["text"] = text;
+                            Doc.GetProto(htmlDoc)["data-text"] = Doc.GetProto(htmlDoc).text = text;
                             this.props.addDocument(htmlDoc);
                             if (srcWeb) {
                                 const focusNode = (SelectionManager.SelectedDocuments()[0].ContentDiv?.getElementsByTagName("iframe")[0].contentDocument?.getSelection()?.focusNode as any);
diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx
index b8996c178..e5c4b9187 100644
--- a/src/client/views/collections/CollectionTreeView.tsx
+++ b/src/client/views/collections/CollectionTreeView.tsx
@@ -90,7 +90,10 @@ class TreeView extends React.Component<TreeViewProps> {
     get displayName() { return "TreeView(" + this.doc.title + ")"; }  // this makes mobx trace() statements more descriptive
     get defaultExpandedView() { return this.childDocs ? this.fieldKey : StrCast(this.doc.defaultExpandedView, this.noviceMode ? "layout" : "fields"); }
     @observable _overrideTreeViewOpen = false; // override of the treeViewOpen field allowing the display state to be independent of the document's state
-    set treeViewOpen(c: boolean) { if (this.props.treeViewPreventOpen) this._overrideTreeViewOpen = c; else this.doc.treeViewOpen = this._overrideTreeViewOpen = c; }
+    set treeViewOpen(c: boolean) {
+        if (this.props.treeViewPreventOpen) this._overrideTreeViewOpen = c;
+        else this.doc.treeViewOpen = this._overrideTreeViewOpen = c;
+    }
     @computed get treeViewOpen() { return (!this.props.treeViewPreventOpen && !this.doc.treeViewPreventOpen && BoolCast(this.doc.treeViewOpen)) || this._overrideTreeViewOpen; }
     @computed get treeViewExpandedView() { return StrCast(this.doc.treeViewExpandedView, this.defaultExpandedView); }
     @computed get MAX_EMBED_HEIGHT() { return NumCast(this.props.containingCollection.maxEmbedHeight, 200); }
@@ -101,7 +104,7 @@ class TreeView extends React.Component<TreeViewProps> {
         const layout = Doc.LayoutField(this.doc) instanceof Doc ? Doc.LayoutField(this.doc) as Doc : undefined;
         return ((this.props.dataDoc ? DocListCast(this.props.dataDoc[field]) : undefined) || // if there's a data doc for an expanded template, use it's data field
             (layout ? DocListCast(layout[field]) : undefined) || // else if there's a layout doc, display it's fields
-            DocListCast(this.doc[field])) as Doc[]; // otherwise use the document's data field
+            DocListCast(this.doc[field])); // otherwise use the document's data field
     }
     @computed get childDocs() { return this.childDocList(this.fieldKey); }
     @computed get childLinks() { return this.childDocList("links"); }
diff --git a/src/client/views/collections/CollectionView.scss b/src/client/views/collections/CollectionView.scss
index b630f9cf8..a5aef86de 100644
--- a/src/client/views/collections/CollectionView.scss
+++ b/src/client/views/collections/CollectionView.scss
@@ -24,6 +24,7 @@
         border-right: unset;
         z-index: 2;
     }
+
     .collectionTimeView-treeView {
         display: flex;
         flex-direction: column;
diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx
index 7e7ea6786..62e8dc26a 100644
--- a/src/client/views/collections/CollectionView.tsx
+++ b/src/client/views/collections/CollectionView.tsx
@@ -78,6 +78,7 @@ export interface CollectionViewCustomProps {
     childLayoutTemplate?: () => Opt<Doc>;  // specify a layout Doc template to use for children of the collection
     childLayoutString?: string;  // specify a layout string to use for children of the collection
     childOpacity?: () => number;
+    hideFilter?: true;
 }
 
 export interface CollectionRenderProps {
@@ -309,7 +310,7 @@ export class CollectionView extends Touchable<FieldViewProps & CollectionViewCus
 
             const options = cm.findByDescription("Options...");
             const optionItems = options && "subitems" in options ? options.subitems : [];
-            optionItems.splice(0, 0, { description: `${this.props.Document.forceActive ? "Select" : "Force"} Contents Active`, event: () => this.props.Document.forceActive = !this.props.Document.forceActive, icon: "project-diagram" });
+            !Doc.UserDoc().noviceMode ? optionItems.splice(0, 0, { description: `${this.props.Document.forceActive ? "Select" : "Force"} Contents Active`, event: () => this.props.Document.forceActive = !this.props.Document.forceActive, icon: "project-diagram" }) : null;
             if (this.props.Document.childLayout instanceof Doc) {
                 optionItems.push({ description: "View Child Layout", event: () => this.props.addDocTab(this.props.Document.childLayout as Doc, "onRight"), icon: "project-diagram" });
             }
@@ -368,7 +369,7 @@ export class CollectionView extends Touchable<FieldViewProps & CollectionViewCus
     get _facetWidth() { return NumCast(this.props.Document._facetWidth); }
     set _facetWidth(value) { this.props.Document._facetWidth = value; }
 
-    bodyPanelWidth = () => this.props.PanelWidth() - this.facetWidth();
+    bodyPanelWidth = () => this.props.PanelWidth();
     facetWidth = () => Math.max(0, Math.min(this.props.PanelWidth() - 25, this._facetWidth));
 
     @computed get dataDoc() {
@@ -490,6 +491,7 @@ export class CollectionView extends Touchable<FieldViewProps & CollectionViewCus
             return false;
         }), returnFalse, action(() => this._facetWidth = this.facetWidth() < 15 ? Math.min(this.props.PanelWidth() - 25, 200) : 0), false);
     }
+
     filterBackground = () => "rgba(105, 105, 105, 0.432)";
     get ignoreFields() { return ["_docFilters", "_docRangeFilters"]; } // this makes the tree view collection ignore these filters (otherwise, the filters would filter themselves)
     @computed get scriptField() {
@@ -559,6 +561,7 @@ export class CollectionView extends Touchable<FieldViewProps & CollectionViewCus
                 </div>
             </div>;
     }
+
     childLayoutTemplate = () => this.props.childLayoutTemplate?.() || Cast(this.props.Document.childLayoutTemplate, Doc, null);
     childLayoutString = this.props.childLayoutString || StrCast(this.props.Document.childLayoutString);
 
@@ -588,11 +591,11 @@ export class CollectionView extends Touchable<FieldViewProps & CollectionViewCus
                         Utils.CorsProxy(Cast(d.data, ImageField)!.url.href) : Cast(d.data, ImageField)!.url.href
                     :
                     ""))}
-            {(!this.props.isSelected() && !this.props.Document.forceActive) || this.props.Document.hideFilterView ? (null) :
+            {/* {(!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%" }} />
             }
-            {this.facetWidth() < 10 ? (null) : this.filterView}
+            {this.facetWidth() < 10 ? (null) : this.filterView}  */}
         </div>);
     }
 }
diff --git a/src/client/views/collections/ParentDocumentSelector.tsx b/src/client/views/collections/ParentDocumentSelector.tsx
index 8c0b8de9d..532dd6abc 100644
--- a/src/client/views/collections/ParentDocumentSelector.tsx
+++ b/src/client/views/collections/ParentDocumentSelector.tsx
@@ -42,14 +42,14 @@ export class SelectorContextMenu extends React.Component<SelectorProps> {
     async fetchDocuments() {
         const aliases = (await SearchUtil.GetAliasesOfDocument(this.props.Document));
         const containerProtoSets = await Promise.all(aliases.map(async alias =>
-            await Promise.all((await SearchUtil.Search("", true, { fq: `data_l:"${alias[Id]}"` })).docs)));
+            ((await SearchUtil.Search("", true, { fq: `data_l:"${alias[Id]}"` })).docs)));
         const containerProtos = containerProtoSets.reduce((p, set) => { set.map(s => p.add(s)); return p; }, new Set<Doc>());
         const containerSets = await Promise.all(Array.from(containerProtos.keys()).map(async container => {
-            return (await SearchUtil.GetAliasesOfDocument(container));
+            return (SearchUtil.GetAliasesOfDocument(container));
         }));
         const containers = containerSets.reduce((p, set) => { set.map(s => p.add(s)); return p; }, new Set<Doc>());
         const doclayoutSets = await Promise.all(Array.from(containers.keys()).map(async (dp) => {
-            return (await SearchUtil.GetAliasesOfDocument(dp));
+            return (SearchUtil.GetAliasesOfDocument(dp));
         }));
         const doclayouts = Array.from(doclayoutSets.reduce((p, set) => { set.map(s => p.add(s)); return p; }, new Set<Doc>()).keys());
         runInAction(() => {
diff --git a/src/client/views/collections/SchemaTable.tsx b/src/client/views/collections/SchemaTable.tsx
index cde795098..7e2840c2c 100644
--- a/src/client/views/collections/SchemaTable.tsx
+++ b/src/client/views/collections/SchemaTable.tsx
@@ -148,7 +148,7 @@ export class SchemaTable extends React.Component<SchemaTableProps> {
     }
 
     @action
-    changeTitleMode = () => this._showTitleDropdown = !this._showTitleDropdown;
+    changeTitleMode = () => this._showTitleDropdown = !this._showTitleDropdown
 
     @computed get borderWidth() { return Number(COLLECTION_BORDER_WIDTH); }
     @computed get tableColumns(): Column<Doc>[] {
@@ -208,7 +208,7 @@ export class SchemaTable extends React.Component<SchemaTableProps> {
                 }}>
                 {col.heading}</div>;
 
-            const sortIcon = col.desc === undefined ? "circle" : col.desc === true ? "caret-down" : "caret-up";
+            const sortIcon = col.desc === undefined ? "caret-right" : col.desc === true ? "caret-down" : "caret-up";
 
             const header =
                 <div //className="collectionSchemaView-header"
@@ -224,12 +224,12 @@ export class SchemaTable extends React.Component<SchemaTableProps> {
                         {keysDropdown}
                     </div>
                     <div onClick={e => this.changeSorting(col)}
-                        style={{ paddingRight: "6px", display: "inline" }}>
+                        style={{ paddingRight: "6px", marginLeft: "4px", display: "inline" }}>
                         <FontAwesomeIcon icon={sortIcon} size="sm" />
                     </div>
                     <div onClick={e => this.props.openHeader(col, e.clientX, e.clientY)}
                         style={{ float: "right", paddingRight: "6px" }}>
-                        <FontAwesomeIcon icon={"compass"} size="sm" />
+                        <FontAwesomeIcon icon={"cog"} size="sm" />
                     </div>
                 </div>;
 
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index 151acb64d..109808956 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -1145,7 +1145,7 @@ export class CollectionFreeFormView extends CollectionSubView<PanZoomDocument, P
     @action
     componentDidMount() {
         super.componentDidMount?.();
-        this._layoutComputeReaction = reaction(() => { TraceMobx(); return this.doLayoutComputation },
+        this._layoutComputeReaction = reaction(() => this.doLayoutComputation,
             (elements) => this._layoutElements = elements || [],
             { fireImmediately: true, name: "doLayout" });
 
@@ -1240,13 +1240,15 @@ export class CollectionFreeFormView extends CollectionSubView<PanZoomDocument, P
         const appearanceItems = appearance && "subitems" in appearance ? appearance.subitems : [];
         appearanceItems.push({ description: "Reset View", event: () => { this.props.Document._panX = this.props.Document._panY = 0; this.props.Document[this.scaleFieldKey] = 1; }, icon: "compress-arrows-alt" });
         appearanceItems.push({ description: `${this.fitToContent ? "Make Zoomable" : "Scale to Window"}`, event: () => this.Document._fitToBox = !this.fitToContent, icon: !this.fitToContent ? "expand-arrows-alt" : "compress-arrows-alt" });
-        appearanceItems.push({ description: "Arrange contents in grid", event: this.layoutDocsInGrid, icon: "table" });
+        !Doc.UserDoc().noviceMode ? appearanceItems.push({ description: "Arrange contents in grid", event: this.layoutDocsInGrid, icon: "table" }) : null;
         !appearance && ContextMenu.Instance.addItem({ description: "Appearance...", subitems: appearanceItems, icon: "eye" });
 
         const viewctrls = ContextMenu.Instance.findByDescription("UI Controls...");
         const viewCtrlItems = viewctrls && "subitems" in viewctrls ? viewctrls.subitems : [];
-        viewCtrlItems.push({ description: (Doc.UserDoc().showSnapLines ? "Hide" : "Show") + " Snap Lines", event: () => Doc.UserDoc().showSnapLines = !Doc.UserDoc().showSnapLines, icon: "compress-arrows-alt" });
-        viewCtrlItems.push({ description: (this.Document.useClusters ? "Hide" : "Show") + " Clusters", event: () => this.updateClusters(!this.Document.useClusters), icon: "braille" });
+
+
+        !Doc.UserDoc().noviceMode ? viewCtrlItems.push({ description: (Doc.UserDoc().showSnapLines ? "Hide" : "Show") + " Snap Lines", event: () => Doc.UserDoc().showSnapLines = !Doc.UserDoc().showSnapLines, icon: "compress-arrows-alt" }) : null;
+        !Doc.UserDoc().noviceMode ? viewCtrlItems.push({ description: (this.Document.useClusters ? "Hide" : "Show") + " Clusters", event: () => this.updateClusters(!this.Document.useClusters), icon: "braille" }) : null;
         !viewctrls && ContextMenu.Instance.addItem({ description: "UI Controls...", subitems: viewCtrlItems, icon: "eye" });
 
         const options = ContextMenu.Instance.findByDescription("Options...");
@@ -1291,7 +1293,7 @@ export class CollectionFreeFormView extends CollectionSubView<PanZoomDocument, P
                         setTimeout(() => {
                             SearchUtil.Search(`{!join from=id to=proto_i}id:link*`, true, {}).then(docs => {
                                 docs.docs.forEach(d => LinkManager.Instance.addLink(d));
-                            })
+                            });
                         }, 2000); // need to give solr some time to update so that this query will find any link docs we've added.
                     }
                 }
diff --git a/src/client/views/collections/collectionFreeForm/FormatShapePane.tsx b/src/client/views/collections/collectionFreeForm/FormatShapePane.tsx
index ddc282e57..6263be261 100644
--- a/src/client/views/collections/collectionFreeForm/FormatShapePane.tsx
+++ b/src/client/views/collections/collectionFreeForm/FormatShapePane.tsx
@@ -13,7 +13,6 @@ import AntimodeMenu from "../../AntimodeMenu";
 import "./FormatShapePane.scss";
 import { undoBatch } from "../../../util/UndoManager";
 import { ColorState, SketchPicker } from 'react-color';
-import { DocumentView } from "../../../views/nodes/DocumentView"
 
 @observer
 export default class FormatShapePane extends AntimodeMenu {
@@ -124,12 +123,12 @@ export default class FormatShapePane extends AntimodeMenu {
                     console.log(ink);
                     if (ink) {
                         const newPoints: { X: number, Y: number }[] = [];
-                        for (var j = 0; j < ink.length; j++) {
+                        ink.forEach(i => {
                             // (new x — oldx) + (oldxpoint * newWidt)/oldWidth 
-                            const newX = (doc.x - oldX) + (ink[j].X * doc._width) / oldWidth;
-                            const newY = (doc.y - oldY) + (ink[j].Y * doc._height) / oldHeight;
+                            const newX = ((doc.x || 0) - oldX) + (i.X * (doc._width || 0)) / oldWidth;
+                            const newY = ((doc.y || 0) - oldY) + (i.Y * (doc._height || 0)) / oldHeight;
                             newPoints.push({ X: newX, Y: newY });
-                        }
+                        });
                         doc.data = new InkField(newPoints);
                     }
                 }
@@ -148,12 +147,12 @@ export default class FormatShapePane extends AntimodeMenu {
                     console.log(ink);
                     if (ink) {
                         const newPoints: { X: number, Y: number }[] = [];
-                        for (var j = 0; j < ink.length; j++) {
+                        ink.forEach(i => {
                             // (new x — oldx) + (oldxpoint * newWidt)/oldWidth 
-                            const newX = (doc.x - oldX) + (ink[j].X * doc._width) / oldWidth;
-                            const newY = (doc.y - oldY) + (ink[j].Y * doc._height) / oldHeight;
+                            const newX = ((doc.x || 0) - oldX) + (i.X * (doc._width || 0)) / oldWidth;
+                            const newY = ((doc.y || 0) - oldY) + (i.Y * (doc._height || 0)) / oldHeight;
                             newPoints.push({ X: newX, Y: newY });
-                        }
+                        });
                         doc.data = new InkField(newPoints);
                     }
                 }
@@ -191,11 +190,11 @@ export default class FormatShapePane extends AntimodeMenu {
                 if (ink) {
 
                     const newPoints: { X: number, Y: number }[] = [];
-                    for (var i = 0; i < ink.length; i++) {
-                        const newX = Math.cos(angle) * (ink[i].X - _centerPoints[index].X) - Math.sin(angle) * (ink[i].Y - _centerPoints[index].Y) + _centerPoints[index].X;
-                        const newY = Math.sin(angle) * (ink[i].X - _centerPoints[index].X) + Math.cos(angle) * (ink[i].Y - _centerPoints[index].Y) + _centerPoints[index].Y;
+                    ink.forEach(i => {
+                        const newX = Math.cos(angle) * (i.X - _centerPoints[index].X) - Math.sin(angle) * (i.Y - _centerPoints[index].Y) + _centerPoints[index].X;
+                        const newY = Math.sin(angle) * (i.X - _centerPoints[index].X) + Math.cos(angle) * (i.Y - _centerPoints[index].Y) + _centerPoints[index].Y;
                         newPoints.push({ X: newX, Y: newY });
-                    }
+                    });
                     doc.data = new InkField(newPoints);
                     const xs = newPoints.map(p => p.X);
                     const ys = newPoints.map(p => p.Y);
@@ -395,12 +394,12 @@ export default class FormatShapePane extends AntimodeMenu {
     @computed get widInput() { return this.inputBox("wid", this.shapeWid, (val: string) => this.shapeWid = val); }
     @computed get rotInput() { return this.inputBoxDuo("rot", this.shapeRot, (val: string) => { this.rotate(Number(val) - Number(this.shapeRot)); this.shapeRot = val; return true; }, "∠:", "rot", this.shapeRot, (val: string) => this.shapeRot = val, ""); }
 
-    @computed get XpsInput() { return this.inputBoxDuo("Xps", this.shapeXps, (val: string) => this.shapeXps = val, "X:", "Yps", this.shapeYps, (val: string) => this.shapeYps = val, "Y:"); }
     @computed get YpsInput() { return this.inputBox("Yps", this.shapeYps, (val: string) => this.shapeYps = val); }
 
     @computed get controlPoints() { return this.controlPointsButton(); }
     @computed get lockRatio() { return this.lockRatioButton(); }
     @computed get rotate90() { return this.rotate90Button(); }
+    @computed get XpsInput() { return this.inputBoxDuo("Xps", this.shapeXps, (val: string) => this.shapeXps = val, "X:", "Yps", this.shapeYps, (val: string) => this.shapeYps = val, "Y:"); }
 
 
     @computed get propertyGroupItems() {
diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.scss b/src/client/views/collections/collectionFreeForm/PropertiesView.scss
new file mode 100644
index 000000000..74f32275a
--- /dev/null
+++ b/src/client/views/collections/collectionFreeForm/PropertiesView.scss
@@ -0,0 +1,620 @@
+.propertiesView {
+
+    background-color: rgb(205, 205, 205);
+    height: 100%;
+    font-family: "Noto Sans";
+    cursor: auto;
+
+    overflow-x: visible;
+    overflow-y: visible;
+
+    .propertiesView-title {
+        background-color: rgb(159, 159, 159);
+        text-align: center;
+        padding-top: 12px;
+        padding-bottom: 12px;
+        display: flex;
+        font-size: 18px;
+        font-weight: bold;
+        justify-content: center;
+
+        .propertiesView-title-icon {
+            width: 20px;
+            height: 20px;
+            padding-left: 38px;
+            margin-top: -5px;
+            right: 19;
+            position: absolute;
+
+            &:hover {
+                color: grey;
+                cursor: pointer;
+            }
+
+        }
+
+    }
+
+    .propertiesView-name {
+        border-bottom: 1px solid black;
+        padding: 8.5px;
+        font-size: 12.5px;
+
+        &:hover {
+            cursor: pointer;
+        }
+    }
+
+    .propertiesView-settings {
+        border-bottom: 1px solid black;
+        //padding: 8.5px;
+        font-size: 12.5px;
+        font-weight: bold;
+
+        .propertiesView-settings-title {
+            font-weight: bold;
+            font-size: 12.5px;
+            padding: 4px;
+            display: flex;
+            color: white;
+            padding-left: 8px;
+            background-color: rgb(51, 51, 51);
+
+            .propertiesView-settings-title-icon {
+                float: right;
+                right: 0;
+                position: absolute;
+                margin-left: 2px;
+                margin-right: 9px;
+
+                &:hover {
+                    cursor: pointer;
+                }
+            }
+        }
+
+        .propertiesView-settings-content {
+            margin-left: 12px;
+            padding-bottom: 10px;
+            padding-top: 8px;
+        }
+
+    }
+
+    .propertiesView-sharing {
+        border-bottom: 1px solid black;
+        //padding: 8.5px;
+
+        .propertiesView-sharing-title {
+            font-weight: bold;
+            font-size: 12.5px;
+            padding: 4px;
+            display: flex;
+            color: white;
+            padding-left: 8px;
+            background-color: rgb(51, 51, 51);
+
+            .propertiesView-sharing-title-icon {
+                float: right;
+                right: 0;
+                position: absolute;
+                margin-left: 2px;
+                margin-right: 9px;
+
+                &:hover {
+                    cursor: pointer;
+                }
+            }
+        }
+
+        .propertiesView-sharing-content {
+            font-size: 10px;
+            padding: 10px;
+            margin-left: 5px;
+        }
+    }
+
+    .propertiesView-appearance {
+        border-bottom: 1px solid black;
+        //padding: 8.5px;
+
+        .propertiesView-appearance-title {
+            font-weight: bold;
+            font-size: 12.5px;
+            padding: 4px;
+            display: flex;
+            color: white;
+            padding-left: 8px;
+            background-color: rgb(51, 51, 51);
+
+            .propertiesView-appearance-title-icon {
+                float: right;
+                right: 0;
+                position: absolute;
+                margin-left: 2px;
+                margin-right: 9px;
+
+                &:hover {
+                    cursor: pointer;
+                }
+            }
+        }
+
+        .propertiesView-appearance-content {
+            font-size: 10px;
+            padding: 10px;
+            margin-left: 5px;
+        }
+    }
+
+    .propertiesView-transform {
+        border-bottom: 1px solid black;
+        //padding: 8.5px;
+
+        .propertiesView-transform-title {
+            font-weight: bold;
+            font-size: 12.5px;
+            padding: 4px;
+            display: flex;
+            color: white;
+            padding-left: 8px;
+            background-color: rgb(51, 51, 51);
+
+            .propertiesView-transform-title-icon {
+                float: right;
+                right: 0;
+                position: absolute;
+                margin-left: 2px;
+                margin-right: 9px;
+
+                &:hover {
+                    cursor: pointer;
+                }
+            }
+        }
+
+        .propertiesView-transform-content {
+            font-size: 10px;
+            padding: 10px;
+            margin-left: 5px;
+        }
+    }
+
+    .notify-button {
+        padding: 2px;
+        width: 12px;
+        height: 12px;
+        background-color: black;
+        border-radius: 10px;
+        padding-left: 2px;
+        padding-right: 2px;
+        margin-top: 2px;
+        margin-left: 3px;
+
+        .notify-button-icon {
+            width: 6px;
+            height: 6.5px;
+            margin-left: .5px;
+        }
+
+        &:hover {
+            background-color: rgb(158, 158, 158);
+            cursor: pointer;
+        }
+    }
+
+    .expansion-button-icon {
+        width: 11px;
+        height: 11px;
+        color: black;
+        margin-left: 27px;
+
+        &:hover {
+            color: rgb(131, 131, 131);
+            cursor: pointer;
+        }
+    }
+
+    .propertiesView-sharingTable {
+
+        border: 1px solid black;
+        padding: 5px;
+        border-radius: 6px;
+        /* width: 170px; */
+        margin-right: 10px;
+        background-color: #ececec;
+        max-height: 130px;
+        overflow-y: scroll;
+
+        .propertiesView-sharingTable-item {
+
+            display: flex;
+            padding: 3px;
+            align-items: center;
+            border-bottom: 0.5px solid grey;
+
+            &:hover .propertiesView-sharingTable-item-name {
+                overflow-x: unset;
+                white-space: unset;
+                overflow-wrap: break-word;
+            }
+
+            .propertiesView-sharingTable-item-name {
+                font-weight: bold;
+                width: 80px;
+                overflow-x: hidden;
+                display: inline-block;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+            }
+
+            .propertiesView-sharingTable-item-permission {
+                display: flex;
+                right: 34;
+                float: right;
+                position: absolute;
+
+                .permissions-select {
+                    z-index: 1;
+                    border: none;
+                    background-color: inherit;
+                    width: 75px;
+                    text-align: justify; // for Edge
+                    text-align-last: end;
+
+                    &:hover {
+                        cursor: pointer;
+                    }
+                }
+            }
+
+            &:last-child {
+                border-bottom: none;
+            }
+        }
+    }
+
+    .propertiesView-fields {
+        border-bottom: 1px solid black;
+        //padding: 8.5px;
+
+        .propertiesView-fields-title {
+            font-weight: bold;
+            font-size: 12.5px;
+            padding: 4px;
+            display: flex;
+            color: white;
+            padding-left: 8px;
+            background-color: rgb(51, 51, 51);
+
+            .propertiesView-fields-title-name {
+                font-size: 12.5px;
+                font-weight: bold;
+                white-space: nowrap;
+                width: 35px;
+                display: flex;
+            }
+
+            .propertiesView-fields-title-icon {
+                float: right;
+                right: 0;
+                position: absolute;
+                margin-left: 2px;
+                margin-right: 9px;
+
+                &:hover {
+                    cursor: pointer;
+                }
+            }
+        }
+
+        .propertiesView-fields-checkbox {
+            float: right;
+            height: 20px;
+            margin-top: -9px;
+
+            .propertiesView-fields-checkbox-text {
+                font-size: 7px;
+                margin-top: -10px;
+                margin-left: 6px;
+            }
+        }
+
+        .propertiesView-fields-content {
+            font-size: 10px;
+            margin-left: 2px;
+            padding: 10px;
+
+            &:hover {
+                cursor: pointer;
+            }
+        }
+    }
+
+    .field {
+        display: flex;
+        font-size: 7px;
+        background-color: #e8e8e8;
+        padding-right: 3px;
+        border: 0.5px solid grey;
+        border-radius: 5px;
+        padding-left: 3px;
+    }
+
+    .uneditable-field {
+        display: flex;
+        overflow-y: visible;
+        margin-bottom: 2px;
+
+        &:hover {
+            cursor: auto;
+        }
+    }
+
+    .propertiesView-layout {
+
+        .propertiesView-layout-title {
+            font-weight: bold;
+            font-size: 12.5px;
+            padding: 4px;
+            display: flex;
+            color: white;
+            padding-left: 8px;
+            background-color: rgb(51, 51, 51);
+
+            .propertiesView-layout-title-icon {
+                float: right;
+                right: 0;
+                position: absolute;
+                margin-left: 2px;
+                margin-right: 9px;
+
+                &:hover {
+                    cursor: pointer;
+                }
+            }
+        }
+
+        .propertiesView-layout-content {
+            overflow: hidden;
+            padding: 10px;
+        }
+
+    }
+}
+
+.inking-button {
+
+    display: flex;
+
+    .inking-button-points {
+        background-color: #333333;
+        padding: 7px;
+        border-radius: 7px;
+        margin-right: 32px;
+        width: 32;
+        height: 32;
+        padding-top: 9px;
+        margin-left: 18px;
+
+        &:hover {
+            background: rgb(131, 131, 131);
+            transform: scale(1.05);
+            cursor: pointer;
+        }
+    }
+
+    .inking-button-lock {
+        background-color: #333333;
+        padding: 7px;
+        border-radius: 7px;
+        margin-right: 32px;
+        width: 32;
+        height: 32;
+        padding-top: 9px;
+        padding-left: 10px;
+
+        &:hover {
+            background: rgb(131, 131, 131);
+            transform: scale(1.05);
+            cursor: pointer;
+        }
+    }
+
+    .inking-button-rotate {
+        background-color: #333333;
+        padding: 7px;
+        border-radius: 7px;
+        width: 32;
+        height: 32;
+        padding-top: 9px;
+        padding-left: 10px;
+
+        &:hover {
+            background: rgb(131, 131, 131);
+            transform: scale(1.05);
+            cursor: pointer;
+        }
+    }
+}
+
+.inputBox-duo {
+    display: flex;
+}
+
+.inputBox {
+
+    margin-top: 10px;
+    display: flex;
+    height: 19px;
+    margin-right: 15px;
+
+    .inputBox-title {
+        font-size: 12px;
+        padding-right: 5px;
+    }
+
+    .inputBox-input {
+        font-size: 10px;
+        width: 50px;
+        margin-right: 1px;
+        border-radius: 3px;
+
+        &:hover {
+            cursor: pointer;
+        }
+    }
+
+    .inputBox-button {
+
+        .inputBox-button-up {
+            background-color: #333333;
+            height: 9px;
+            padding-left: 3px;
+            padding-right: 3px;
+            padding-top: 1px;
+            padding-bottom: 1px;
+            border-radius: 1.5px;
+
+            &:hover {
+                background: rgb(131, 131, 131);
+                transform: scale(1.05);
+                cursor: pointer;
+            }
+        }
+
+        .inputBox-button-down {
+            background-color: #333333;
+            height: 9px;
+            padding-left: 3px;
+            padding-right: 3px;
+            padding-top: 1px;
+            padding-bottom: 1px;
+            border-radius: 1.5px;
+
+            &:hover {
+                background: rgb(131, 131, 131);
+                transform: scale(1.05);
+                cursor: pointer;
+            }
+        }
+
+    }
+}
+
+.color-palette {
+    width: 160px;
+    height: 360;
+}
+
+.strokeAndFill {
+    display: flex;
+    margin-top: 10px;
+
+    .fill {
+        margin-right: 40px;
+        display: flex;
+        padding-bottom: 7px;
+        margin-left: 35px;
+
+        .fill-title {
+            font-size: 12px;
+            margin-right: 2px;
+        }
+
+        .fill-button {
+            padding-top: 2px;
+            margin-top: -1px;
+        }
+    }
+
+    .stroke {
+        display: flex;
+
+        .stroke-title {
+            font-size: 12px;
+        }
+
+        .stroke-button {
+            padding-top: 2px;
+            margin-left: 2px;
+            margin-top: -1px;
+        }
+    }
+}
+
+.widthAndDash {
+
+    .width {
+        .width-top {
+            display: flex;
+
+            .width-title {
+                font-size: 12;
+                margin-right: 20px;
+                margin-left: 35px;
+                text-align: center;
+            }
+
+            .width-input {
+                margin-right: 30px;
+                margin-top: -10px;
+            }
+        }
+
+        .width-range {
+            margin-right: 1px;
+            margin-bottom: 6;
+        }
+    }
+
+    .arrows {
+
+        display: flex;
+        margin-bottom: 3px;
+
+        .arrows-head {
+
+            display: flex;
+            margin-right: 35px;
+
+            .arrows-head-title {
+                font-size: 10;
+            }
+
+            .arrows-head-input {
+                margin-left: 6px;
+                margin-top: 2px;
+            }
+        }
+
+        .arrows-tail {
+            display: flex;
+
+            .arrows-tail-title {
+                font-size: 10;
+            }
+
+            .arrows-tail-input {
+                margin-left: 6px;
+                margin-top: 2px;
+            }
+        }
+    }
+
+    .dashed {
+
+        display: flex;
+        margin-left: 74px;
+        margin-bottom: 6px;
+
+        .dashed-title {
+            font-size: 10;
+        }
+
+        .dashed-input {
+            margin-left: 6px;
+            margin-top: 2px;
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx
new file mode 100644
index 000000000..35c7fd425
--- /dev/null
+++ b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx
@@ -0,0 +1,858 @@
+import React = require("react");
+import { observer } from "mobx-react";
+import "./PropertiesView.scss";
+import { observable, action, computed, runInAction } from "mobx";
+import { Doc, Field, DocListCast, WidthSym, HeightSym, AclSym, AclPrivate, AclReadonly, AclAddonly, AclEdit, AclAdmin, Opt } from "../../../../fields/Doc";
+import { DocumentView } from "../../nodes/DocumentView";
+import { ComputedField } from "../../../../fields/ScriptField";
+import { EditableView } from "../../EditableView";
+import { KeyValueBox } from "../../nodes/KeyValueBox";
+import { Cast, NumCast, StrCast } from "../../../../fields/Types";
+import { listSpec } from "../../../../fields/Schema";
+import { ContentFittingDocumentView } from "../../nodes/ContentFittingDocumentView";
+import { returnFalse, returnOne, emptyFunction, emptyPath, returnTrue, returnZero, returnEmptyFilter, Utils } from "../../../../Utils";
+import { Id } from "../../../../fields/FieldSymbols";
+import { Transform } from "../../../util/Transform";
+import { PropertiesButtons } from "../../PropertiesButtons";
+import { SelectionManager } from "../../../util/SelectionManager";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { Tooltip, Checkbox, Divider } from "@material-ui/core";
+import SharingManager from "../../../util/SharingManager";
+import { DocumentType } from "../../../documents/DocumentTypes";
+import FormatShapePane from "./FormatShapePane";
+import { SharingPermissions, GetEffectiveAcl } from "../../../../fields/util";
+import { InkField } from "../../../../fields/InkField";
+import { undoBatch } from "../../../util/UndoManager";
+import { ColorState, SketchPicker } from "react-color";
+import AntimodeMenu from "../../AntimodeMenu";
+import "./FormatShapePane.scss";
+import { discovery_v1 } from "googleapis";
+import { PresBox } from "../../nodes/PresBox";
+import { DocumentManager } from "../../../util/DocumentManager";
+
+
+interface PropertiesViewProps {
+    width: number;
+    height: number;
+    renderDepth: number;
+    ScreenToLocalTransform: () => Transform;
+    onDown: (event: any) => void;
+}
+
+@observer
+export class PropertiesView extends React.Component<PropertiesViewProps> {
+
+    @computed get MAX_EMBED_HEIGHT() { return 200; }
+
+    @computed get selectedDocumentView() {
+        if (SelectionManager.SelectedDocuments().length) {
+            return SelectionManager.SelectedDocuments()[0];
+        } else if (PresBox.Instance) {
+            const presSlide = PresBox.Instance._selectedArray[0];
+            const view = DocumentManager.Instance.getDocumentView(presSlide);
+            if (view) return view;
+        } else { return undefined; }
+    }
+    @computed get selectedDoc() { return this.selectedDocumentView?.rootDoc; }
+    @computed get dataDoc() { return this.selectedDocumentView?.dataDoc; }
+
+    @observable layoutFields: boolean = false;
+
+    @observable openActions: boolean = true;
+    @observable openSharing: boolean = true;
+    @observable openFields: boolean = true;
+    @observable openLayout: boolean = true;
+    @observable openAppearance: boolean = true;
+    @observable openTransform: boolean = true;
+
+    @computed get isInk() { return this.selectedDoc?.type === DocumentType.INK; }
+
+    @action
+    rtfWidth = () => {
+        if (this.selectedDoc) {
+            return Math.min(this.selectedDoc?.[WidthSym](), this.props.width - 20);
+        } else {
+            return 0;
+        }
+    }
+    @action
+    rtfHeight = () => {
+        if (this.selectedDoc) {
+            return this.rtfWidth() <= this.selectedDoc?.[WidthSym]() ? Math.min(this.selectedDoc?.[HeightSym](), this.MAX_EMBED_HEIGHT) : this.MAX_EMBED_HEIGHT;
+        } else {
+            return 0;
+        }
+    }
+
+    @action
+    docWidth = () => {
+        if (this.selectedDoc) {
+            const layoutDoc = this.selectedDoc;
+            const aspect = NumCast(layoutDoc._nativeHeight, layoutDoc._fitWidth ? 0 : layoutDoc[HeightSym]()) / NumCast(layoutDoc._nativeWidth, layoutDoc._fitWidth ? 1 : layoutDoc[WidthSym]());
+            if (aspect) return Math.min(layoutDoc[WidthSym](), Math.min(this.MAX_EMBED_HEIGHT / aspect, this.props.width - 20));
+            return NumCast(layoutDoc._nativeWidth) ? Math.min(layoutDoc[WidthSym](), this.props.width - 20) : this.props.width - 20;
+        } else {
+            return 0;
+        }
+    }
+
+    @action
+    docHeight = () => {
+        if (this.selectedDoc && this.dataDoc) {
+            const layoutDoc = this.selectedDoc;
+            return Math.max(70, Math.min(this.MAX_EMBED_HEIGHT, (() => {
+                const aspect = NumCast(layoutDoc._nativeHeight, layoutDoc._fitWidth ? 0 : layoutDoc[HeightSym]()) / NumCast(layoutDoc._nativeWidth, layoutDoc._fitWidth ? 1 : layoutDoc[WidthSym]());
+                if (aspect) return this.docWidth() * aspect;
+                return layoutDoc._fitWidth ? (!this.dataDoc._nativeHeight ? NumCast(this.props.height) :
+                    Math.min(this.docWidth() * NumCast(layoutDoc.scrollHeight, NumCast(layoutDoc._nativeHeight)) / NumCast(layoutDoc._nativeWidth,
+                        NumCast(this.props.height)))) :
+                    NumCast(layoutDoc._height) ? NumCast(layoutDoc._height) : 50;
+            })()));
+        } else {
+            return 0;
+        }
+    }
+
+    @computed get expandedField() {
+        if (this.dataDoc && this.selectedDoc) {
+            const ids: { [key: string]: string } = {};
+            const doc = this.layoutFields ? Doc.Layout(this.selectedDoc) : this.dataDoc;
+            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()) {
+                const contents = doc[key];
+                if (key[0] === "#") {
+                    rows.push(<div style={{ display: "flex", overflowY: "visible", marginBottom: "2px" }} key={key}>
+                        <span style={{ fontWeight: "bold", whiteSpace: "nowrap" }}>{key}</span>
+                    &nbsp;
+                </div>);
+                } else {
+                    let contentElement: (JSX.Element | null)[] | JSX.Element = [];
+                    contentElement = <EditableView key="editableView"
+                        contents={contents !== undefined ? Field.toString(contents as Field) : "null"}
+                        height={13}
+                        fontSize={10}
+                        GetValue={() => Field.toKeyValueString(doc, key)}
+                        SetValue={(value: string) => KeyValueBox.SetField(doc, key, value, true)}
+                    />;
+                    rows.push(<div style={{ display: "flex", overflowY: "visible", marginBottom: "-1px" }} key={key}>
+                        <span style={{ fontWeight: "bold", whiteSpace: "nowrap" }}>{key + ":"}</span>
+                        &nbsp;
+                        {contentElement}
+                    </div>);
+                }
+            }
+            rows.push(<div className="field" key={"newKeyValue"} style={{ marginTop: "3px" }}>
+                <EditableView
+                    key="editableView"
+                    contents={"add key:value or #tags"}
+                    height={13}
+                    fontSize={10}
+                    GetValue={() => ""}
+                    SetValue={this.setKeyValue} />
+            </div>);
+            return rows;
+        }
+    }
+
+    @computed get noviceFields() {
+        if (this.dataDoc && this.selectedDoc) {
+            const ids: { [key: string]: string } = {};
+            const doc = this.dataDoc;
+            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[0] === "#" || key === "author" || key === "creationDate" || key.indexOf("lastModified") !== -1) {
+                    const contents = doc[key];
+                    if (key[0] === "#") {
+                        rows.push(<div className="uneditable-field" key={key}>
+                            <span style={{ fontWeight: "bold", whiteSpace: "nowrap" }}>{key}</span>
+                    &nbsp;
+                </div>);
+                    } else {
+                        const value = Field.toString(contents as Field);
+                        if (key === "author" || key === "creationDate" || key.indexOf("lastModified") !== -1) {
+                            rows.push(<div className="uneditable-field" key={key}>
+                                <span style={{ fontWeight: "bold", whiteSpace: "nowrap" }}>{key + ": "}</span>
+                                <div style={{ whiteSpace: "nowrap", overflowX: "hidden" }}>{value}</div>
+                            </div>);
+                        } else {
+                            let contentElement: (JSX.Element | null)[] | JSX.Element = [];
+                            contentElement = <EditableView key="editableView"
+                                contents={contents !== undefined ? Field.toString(contents as Field) : "null"}
+                                height={13}
+                                fontSize={10}
+                                GetValue={() => Field.toKeyValueString(doc, key)}
+                                SetValue={(value: string) => KeyValueBox.SetField(doc, key, value, true)}
+                            />;
+
+                            rows.push(<div style={{ display: "flex", overflowY: "visible", marginBottom: "-1px" }} key={key}>
+                                <span style={{ fontWeight: "bold", whiteSpace: "nowrap" }}>{key + ":"}</span>
+                            &nbsp;
+                            {contentElement}
+                            </div>);
+                        }
+                    }
+                }
+            }
+            rows.push(<div className="field" key={"newKeyValue"} style={{ marginTop: "3px" }}>
+                <EditableView
+                    key="editableView"
+                    contents={"add key:value or #tags"}
+                    height={13}
+                    fontSize={10}
+                    GetValue={() => ""}
+                    SetValue={this.setKeyValue} />
+            </div>);
+            return rows;
+        }
+    }
+
+
+    setKeyValue = (value: string) => {
+        if (this.selectedDoc && this.dataDoc) {
+            const doc = this.layoutFields ? Doc.Layout(this.selectedDoc) : this.dataDoc;
+            if (value.indexOf(":") !== -1) {
+                const newVal = value[0].toUpperCase() + value.substring(1, value.length);
+                KeyValueBox.SetField(doc, newVal.substring(0, newVal.indexOf(":")), newVal.substring(newVal.indexOf(":") + 1, newVal.length), true);
+                return true;
+            } else if (value[0] === "#") {
+                const newVal = value + `:'${value}'`;
+                KeyValueBox.SetField(doc, newVal.substring(0, newVal.indexOf(":")), newVal.substring(newVal.indexOf(":") + 1, newVal.length), true);
+                return true;
+            }
+        }
+        return false;
+    }
+
+    @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]}>
+                <ContentFittingDocumentView
+                    Document={layoutDoc}
+                    DataDoc={this.dataDoc}
+                    LibraryPath={emptyPath}
+                    renderDepth={this.props.renderDepth + 1}
+                    rootSelected={returnFalse}
+                    treeViewDoc={undefined}
+                    backgroundColor={() => "lightgrey"}
+                    fitToBox={false}
+                    FreezeDimensions={true}
+                    NativeWidth={layoutDoc.type ===
+                        StrCast(Doc.LayoutField(layoutDoc)).includes("FormattedTextBox") ? this.rtfWidth : returnZero}
+                    NativeHeight={layoutDoc.type ===
+                        StrCast(Doc.LayoutField(layoutDoc)).includes("FormattedTextBox") ? this.rtfHeight : returnZero}
+                    PanelWidth={panelWidth}
+                    PanelHeight={panelHeight}
+                    focus={returnFalse}
+                    ScreenToLocalTransform={this.props.ScreenToLocalTransform}
+                    docFilters={returnEmptyFilter}
+                    ContainingCollectionDoc={undefined}
+                    ContainingCollectionView={undefined}
+                    addDocument={returnFalse}
+                    moveDocument={undefined}
+                    removeDocument={returnFalse}
+                    parentActive={() => false}
+                    whenActiveChanged={emptyFunction}
+                    addDocTab={returnFalse}
+                    pinToPres={emptyFunction}
+                    bringToFront={returnFalse}
+                    ContentScaling={returnOne}
+                    dontRegisterView={true}
+                />
+            </div>;
+        } else {
+            return null;
+        }
+    }
+
+    getPermissionsSelect(user: string) {
+        return <select className="permissions-select"
+            onChange={e => SharingManager.Instance.shareFromPropertiesSidebar(user, e.currentTarget.value as SharingPermissions, this.selectedDoc!)}>
+            {Object.values(SharingPermissions).map(permission => {
+                return (
+                    <option key={permission} value={permission} selected={this.selectedDoc![`ACL-${user.replace(".", "_")}`] === permission}>
+                        {permission}
+                    </option>);
+            })}
+        </select>;
+    }
+
+    @computed get notifyIcon() {
+        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>
+        </Tooltip>;
+    }
+
+    @computed get expansionIcon() {
+        return <Tooltip title={<><div className="dash-tooltip">{"Show more permissions"}</div></>}>
+            <div className="expansion-button" onPointerDown={() => {
+                if (this.selectedDocumentView) {
+                    SharingManager.Instance.open(this.selectedDocumentView);
+                }
+            }}>
+                <FontAwesomeIcon className="expansion-button-icon" icon="ellipsis-h" color="black" size="sm" />
+            </div>
+        </Tooltip>;
+    }
+
+    sharingItem(name: string, effectiveAcl: symbol, permission?: string) {
+        return <div className="propertiesView-sharingTable-item">
+            <div className="propertiesView-sharingTable-item-name" style={{ width: name !== "Me" ? "70px" : "80px" }}> {name} </div>
+            {name !== "Me" ? this.notifyIcon : null}
+            <div className="propertiesView-sharingTable-item-permission">
+                {effectiveAcl === AclAdmin && permission !== "Owner" ? this.getPermissionsSelect(name) : permission}
+                {permission === "Owner" ? this.expansionIcon : null}
+            </div>
+        </div>;
+    }
+
+    @computed get sharingTable() {
+        const AclMap = new Map<symbol, string>([
+            [AclPrivate, SharingPermissions.None],
+            [AclReadonly, SharingPermissions.View],
+            [AclAddonly, SharingPermissions.Add],
+            [AclEdit, SharingPermissions.Edit],
+            [AclAdmin, SharingPermissions.Admin]
+        ]);
+
+        const effectiveAcl = GetEffectiveAcl(this.selectedDoc!);
+        const tableEntries = [];
+
+        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) tableEntries.push(this.sharingItem(name, effectiveAcl, AclMap.get(value)!));
+            }
+        }
+
+        tableEntries.unshift(this.sharingItem("Me", effectiveAcl, Doc.CurrentUserEmail === this.selectedDoc!.author ? "Owner" : StrCast(this.selectedDoc![`ACL-${Doc.CurrentUserEmail.replace(".", "_")}`])));
+        if (Doc.CurrentUserEmail !== this.selectedDoc!.author) tableEntries.unshift(this.sharingItem(StrCast(this.selectedDoc!.author), effectiveAcl, "Owner"));
+
+        return <div className="propertiesView-sharingTable">
+            {tableEntries}
+        </div>;
+    }
+
+    @computed get fieldsCheckbox() {
+        return <Checkbox
+            color="primary"
+            onChange={this.toggleCheckbox}
+            checked={this.layoutFields}
+        />;
+    }
+
+    @action
+    toggleCheckbox = () => {
+        this.layoutFields = !this.layoutFields;
+    }
+
+    @computed get editableTitle() {
+        return <EditableView
+            key="editableView"
+            contents={StrCast(this.selectedDoc?.title)}
+            height={25}
+            fontSize={14}
+            GetValue={() => StrCast(this.selectedDoc?.title)}
+            SetValue={this.setTitle} />;
+    }
+
+    @action
+    setTitle = (value: string) => {
+        if (this.dataDoc) {
+            this.selectedDoc && (this.selectedDoc.title = value);
+            KeyValueBox.SetField(this.dataDoc, "title", value, true);
+            return true;
+        }
+        return false;
+    }
+
+
+
+
+
+
+
+
+
+    @undoBatch
+    @action
+    rotate = (angle: number) => {
+        const _centerPoints: { X: number, Y: number }[] = [];
+        if (this.selectedDoc) {
+            const doc = this.selectedDoc;
+            if (doc.type === DocumentType.INK && doc.x && doc.y && doc._width && doc._height && doc.data) {
+                const ink = Cast(doc.data, InkField)?.inkData;
+                if (ink) {
+                    const xs = ink.map(p => p.X);
+                    const ys = ink.map(p => p.Y);
+                    const left = Math.min(...xs);
+                    const top = Math.min(...ys);
+                    const right = Math.max(...xs);
+                    const bottom = Math.max(...ys);
+                    _centerPoints.push({ X: left, Y: top });
+                }
+            }
+
+            var index = 0;
+            if (doc.type === DocumentType.INK && doc.x && doc.y && doc._width && doc._height && doc.data) {
+                doc.rotation = Number(doc.rotation) + Number(angle);
+                const ink = Cast(doc.data, InkField)?.inkData;
+                if (ink) {
+
+                    const newPoints: { X: number, Y: number }[] = [];
+                    for (var i = 0; i < ink.length; i++) {
+                        const newX = Math.cos(angle) * (ink[i].X - _centerPoints[index].X) - Math.sin(angle) * (ink[i].Y - _centerPoints[index].Y) + _centerPoints[index].X;
+                        const newY = Math.sin(angle) * (ink[i].X - _centerPoints[index].X) + Math.cos(angle) * (ink[i].Y - _centerPoints[index].Y) + _centerPoints[index].Y;
+                        newPoints.push({ X: newX, Y: newY });
+                    }
+                    doc.data = new InkField(newPoints);
+                    const xs = newPoints.map(p => p.X);
+                    const ys = newPoints.map(p => p.Y);
+                    const left = Math.min(...xs);
+                    const top = Math.min(...ys);
+                    const right = Math.max(...xs);
+                    const bottom = Math.max(...ys);
+
+                    doc._height = (bottom - top);
+                    doc._width = (right - left);
+                }
+                index++;
+            }
+        }
+    }
+
+    @observable _controlBtn: boolean = false;
+    @observable _lock: boolean = false;
+
+    @computed
+    get controlPointsButton() {
+        return <div className="inking-button">
+            <Tooltip title={<><div className="dash-tooltip">{"Edit points"}</div></>}>
+                <div className="inking-button-points" onPointerDown={action(() => this._controlBtn = !this._controlBtn)} style={{ backgroundColor: this._controlBtn ? "black" : "" }}>
+                    <FontAwesomeIcon icon="bezier-curve" color="white" size="lg" />
+                </div>
+            </Tooltip>
+            <Tooltip title={<><div className="dash-tooltip">{this._lock ? "Unlock points" : "Lock points"}</div></>}>
+                <div className="inking-button-lock" onPointerDown={action(() => this._lock = !this._lock)} >
+                    <FontAwesomeIcon icon={this._lock ? "unlock" : "lock"} color="white" size="lg" />
+                </div>
+            </Tooltip>
+            <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>
+            </Tooltip>
+        </div>;
+    }
+
+    inputBox = (key: string, value: any, setter: (val: string) => {}, title: string) => {
+        return <div className="inputBox"
+            style={{
+                marginRight: title === "X:" ? "19px" : "",
+                marginLeft: title === "∠:" ? "39px" : ""
+            }}>
+            <div className="inputBox-title"> {title} </div>
+            <input className="inputBox-input"
+                type="text" value={value}
+                onChange={e => setter(e.target.value)} />
+            <div className="inputBox-button">
+                <div className="inputBox-button-up" key="up2"
+                    onPointerDown={undoBatch(action(() => this.upDownButtons("up", key)))} >
+                    <FontAwesomeIcon icon="caret-up" color="white" size="sm" />
+                </div>
+                <div className="inputbox-Button-down" key="down2"
+                    onPointerDown={undoBatch(action(() => this.upDownButtons("down", key)))} >
+                    <FontAwesomeIcon icon="caret-down" color="white" size="sm" />
+                </div>
+            </div>
+        </div>;
+    }
+
+    inputBoxDuo = (key: string, value: any, setter: (val: string) => {}, title1: string, key2: string, value2: any, setter2: (val: string) => {}, title2: string) => {
+        return <div className="inputBox-duo">
+            {this.inputBox(key, value, setter, title1)}
+            {title2 === "" ? (null) : this.inputBox(key2, value2, setter2, title2)}
+        </div>;
+    }
+
+    @action
+    upDownButtons = (dirs: string, field: string) => {
+        switch (field) {
+            case "rot": this.rotate((dirs === "up" ? .1 : -.1)); break;
+            // case "rot": this.selectedInk?.forEach(i => i.rootDoc.rotation = NumCast(i.rootDoc.rotation) + (dirs === "up" ? 0.1 : -0.1)); break;
+            case "Xps": this.selectedDoc && (this.selectedDoc.x = NumCast(this.selectedDoc?.x) + (dirs === "up" ? 10 : -10)); break;
+            case "Yps": this.selectedDoc && (this.selectedDoc.y = NumCast(this.selectedDoc?.y) + (dirs === "up" ? 10 : -10)); break;
+            case "stk": this.selectedDoc && (this.selectedDoc.strokeWidth = NumCast(this.selectedDoc?.strokeWidth) + (dirs === "up" ? .1 : -.1)); break;
+            case "wid":
+                const oldWidth = NumCast(this.selectedDoc?._width);
+                const oldHeight = NumCast(this.selectedDoc?._height);
+                const oldX = NumCast(this.selectedDoc?.x);
+                const oldY = NumCast(this.selectedDoc?.y);
+                this.selectedDoc && (this.selectedDoc._width = oldWidth + (dirs === "up" ? 10 : - 10));
+                this._lock && this.selectedDoc && (this.selectedDoc._height = (NumCast(this.selectedDoc?._width) / oldWidth * NumCast(this.selectedDoc?._height)));
+                const doc = this.selectedDoc;
+                if (doc?.type === DocumentType.INK && doc.x && doc.y && doc._height && doc._width) {
+                    console.log(doc.x, doc.y, doc._height, doc._width);
+                    const ink = Cast(doc.data, InkField)?.inkData;
+                    console.log(ink);
+                    if (ink) {
+                        const newPoints: { X: number, Y: number }[] = [];
+                        for (var j = 0; j < ink.length; j++) {
+                            // (new x — oldx) + (oldxpoint * newWidt)/oldWidth 
+                            const newX = (NumCast(doc.x) - oldX) + (ink[j].X * NumCast(doc._width)) / oldWidth;
+                            const newY = (NumCast(doc.y) - oldY) + (ink[j].Y * NumCast(doc._height)) / oldHeight;
+                            newPoints.push({ X: newX, Y: newY });
+                        }
+                        doc.data = new InkField(newPoints);
+                    }
+                }
+                break;
+            case "hgt":
+                const oWidth = NumCast(this.selectedDoc?._width);
+                const oHeight = NumCast(this.selectedDoc?._height);
+                const oX = NumCast(this.selectedDoc?.x);
+                const oY = NumCast(this.selectedDoc?.y);
+                this.selectedDoc && (this.selectedDoc._height = oHeight + (dirs === "up" ? 10 : - 10));
+                this._lock && this.selectedDoc && (this.selectedDoc._width = (NumCast(this.selectedDoc?._height) / oHeight * NumCast(this.selectedDoc?._width)));
+                const docu = this.selectedDoc;
+                if (docu?.type === DocumentType.INK && docu.x && docu.y && docu._height && docu._width) {
+                    console.log(docu.x, docu.y, docu._height, docu._width);
+                    const ink = Cast(docu.data, InkField)?.inkData;
+                    console.log(ink);
+                    if (ink) {
+                        const newPoints: { X: number, Y: number }[] = [];
+                        for (var j = 0; j < ink.length; j++) {
+                            // (new x — oldx) + (oldxpoint * newWidt)/oldWidth 
+                            const newX = (NumCast(docu.x) - oX) + (ink[j].X * NumCast(docu._width)) / oWidth;
+                            const newY = (NumCast(docu.y) - oY) + (ink[j].Y * NumCast(docu._height)) / oHeight;
+                            newPoints.push({ X: newX, Y: newY });
+                        }
+                        docu.data = new InkField(newPoints);
+                    }
+                }
+                break;
+        }
+    }
+
+    getField(key: string) {
+        //if (this.selectedDoc) {
+        return Field.toString(this.selectedDoc[key] as Field);
+        // } else {
+        //     return undefined as Opt<string>;
+        // }
+    }
+
+    @computed get shapeXps() { return this.getField("x"); }
+    @computed get shapeYps() { return this.getField("y"); }
+    @computed get shapeRot() { return this.getField("rotation"); }
+    @computed get shapeHgt() { return this.getField("_height"); }
+    @computed get shapeWid() { return this.getField("_width"); }
+    set shapeXps(value) { this.selectedDoc && (this.selectedDoc.x = Number(value)); }
+    set shapeYps(value) { this.selectedDoc && (this.selectedDoc.y = Number(value)); }
+    set shapeRot(value) { this.selectedDoc && (this.selectedDoc.rotation = Number(value)); }
+    set shapeWid(value) {
+        const oldWidth = NumCast(this.selectedDoc?._width);
+        this.selectedDoc && (this.selectedDoc._width = Number(value));
+        this._lock && this.selectedDoc && (this.selectedDoc._height = (NumCast(this.selectedDoc?._width) * NumCast(this.selectedDoc?._height)) / oldWidth);
+    }
+    set shapeHgt(value) {
+        const oldHeight = NumCast(this.selectedDoc?._height);
+        this.selectedDoc && (this.selectedDoc._height = Number(value));
+        this._lock && this.selectedDoc && (this.selectedDoc._width = (NumCast(this.selectedDoc?._height) * NumCast(this.selectedDoc?._width)) / oldHeight);
+    }
+
+    @computed get hgtInput() { return this.inputBoxDuo("hgt", this.shapeHgt, (val: string) => this.shapeHgt = val, "H:", "wid", this.shapeWid, (val: string) => this.shapeWid = val, "W:"); }
+    @computed get XpsInput() { return this.inputBoxDuo("Xps", this.shapeXps, (val: string) => this.shapeXps = val, "X:", "Yps", this.shapeYps, (val: string) => this.shapeYps = val, "Y:"); }
+    @computed get rotInput() { return this.inputBoxDuo("rot", this.shapeRot, (val: string) => { this.rotate(Number(val) - Number(this.shapeRot)); this.shapeRot = val; return true; }, "∠:", "rot", this.shapeRot, (val: string) => this.shapeRot = val, ""); }
+
+    @observable private _fillBtn = false;
+    @observable private _lineBtn = false;
+
+    private _lastFill = "#D0021B";
+    private _lastLine = "#D0021B";
+    private _lastDash: any = "2";
+
+    @computed get colorFil() { const ccol = this.getField("fillColor") || ""; ccol && (this._lastFill = ccol); return ccol; }
+    @computed get colorStk() { const ccol = this.getField("color") || ""; ccol && (this._lastLine = ccol); return ccol; }
+    set colorFil(value) { value && (this._lastFill = value); this.selectedDoc && (this.selectedDoc.fillColor = value ? value : undefined); }
+    set colorStk(value) { value && (this._lastLine = value); this.selectedDoc && (this.selectedDoc.color = value ? value : undefined); }
+
+    colorButton(value: string, setter: () => {}) {
+        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, position: "fixed" }}>☒</p> : ""}
+        </div>;
+    }
+
+    @undoBatch
+    @action
+    switchStk = (color: ColorState) => {
+        const val = String(color.hex);
+        this.colorStk = val;
+        return true;
+    }
+    @undoBatch
+    @action
+    switchFil = (color: ColorState) => {
+        const val = String(color.hex);
+        this.colorFil = val;
+        return true;
+    }
+
+    colorPicker(setter: (color: string) => {}, type: string) {
+        return <SketchPicker onChange={type === "stk" ? this.switchStk : this.switchFil}
+            presetColors={['#D0021B', '#F5A623', '#F8E71C', '#8B572A', '#7ED321', '#417505',
+                '#9013FE', '#4A90E2', '#50E3C2', '#B8E986', '#000000', '#4A4A4A', '#9B9B9B',
+                '#FFFFFF', '#f1efeb', 'transparent']}
+            color={type === "stk" ? this.colorStk : this.colorFil} />;
+    }
+
+    @computed get fillButton() { return this.colorButton(this.colorFil, () => { this._fillBtn = !this._fillBtn; this._lineBtn = false; return true; }); }
+    @computed get lineButton() { return this.colorButton(this.colorStk, () => { this._lineBtn = !this._lineBtn; this._fillBtn = false; return true; }); }
+
+    @computed get fillPicker() { return this.colorPicker((color: string) => this.colorFil = color, "fil"); }
+    @computed get linePicker() { return this.colorPicker((color: string) => this.colorStk = color, "stk"); }
+
+    @computed get strokeAndFill() {
+        return <div>
+            <div key="fill" className="strokeAndFill">
+                <div className="fill">
+                    <div className="fill-title">Fill:</div>
+                    <div className="fill-button">{this.fillButton}</div>
+                </div>
+                <div className="stroke">
+                    <div className="stroke-title"> Stroke: </div>
+                    <div className="stroke-button">{this.lineButton}</div>
+                </div>
+            </div>
+            {this._fillBtn ? this.fillPicker : ""}
+            {this._lineBtn ? this.linePicker : ""}
+        </div>;
+    }
+
+    @computed get solidStk() { return this.selectedDoc?.color && (!this.selectedDoc?.strokeDash || this.selectedDoc?.strokeDash === "0") ? true : false; }
+    @computed get dashdStk() { return this.selectedDoc?.strokeDash || ""; }
+    @computed get unStrokd() { return this.selectedDoc?.color ? true : false; }
+    @computed get widthStk() { return this.getField("strokeWidth") || "1"; }
+    @computed get markHead() { return this.getField("strokeStartMarker") || ""; }
+    @computed get markTail() { return this.getField("strokeEndMarker") || ""; }
+    set solidStk(value) { this.dashdStk = ""; this.unStrokd = !value; }
+    set dashdStk(value) {
+        value && (this._lastDash = value) && (this.unStrokd = false);
+        this.selectedDoc && (this.selectedDoc.strokeDash = value ? this._lastDash : undefined);
+    }
+    set widthStk(value) { this.selectedDoc && (this.selectedDoc.strokeWidth = Number(value)); }
+    set unStrokd(value) { this.colorStk = value ? "" : this._lastLine; }
+    set markHead(value) { this.selectedDoc && (this.selectedDoc.strokeStartMarker = value); }
+    set markTail(value) { this.selectedDoc && (this.selectedDoc.strokeEndMarker = value); }
+
+
+    @computed get stkInput() { return this.regInput("stk", this.widthStk, (val: string) => this.widthStk = val); }
+
+
+    regInput = (key: string, value: any, setter: (val: string) => {}) => {
+        return <div className="inputBox">
+            <input className="inputBox-input"
+                type="text" value={value}
+                onChange={e => setter(e.target.value)} />
+            <div className="inputBox-button">
+                <div className="inputBox-button-up" key="up2"
+                    onPointerDown={undoBatch(action(() => this.upDownButtons("up", key)))} >
+                    <FontAwesomeIcon icon="caret-up" color="white" size="sm" />
+                </div>
+                <div className="inputbox-Button-down" key="down2"
+                    onPointerDown={undoBatch(action(() => this.upDownButtons("down", key)))} >
+                    <FontAwesomeIcon icon="caret-down" color="white" size="sm" />
+                </div>
+            </div>
+        </div>;
+    }
+
+    @computed get widthAndDash() {
+        return <div className="widthAndDash">
+            <div className="width">
+                <div className="width-top">
+                    <div className="width-title">Width:</div>
+                    <div className="width-input">{this.stkInput}</div>
+                </div>
+                <input className="width-range" type="range"
+                    defaultValue={Number(this.widthStk)} min={1} max={100}
+                    onChange={undoBatch(action((e) => this.widthStk = e.target.value))} />
+            </div>
+
+            <div className="arrows">
+                <div className="arrows-head">
+                    <div className="arrows-head-title" >Arrow Head: </div>
+                    <input key="markHead" className="arrows-head-input" type="checkbox"
+                        checked={this.markHead !== ""}
+                        onChange={undoBatch(action(() => this.markHead = this.markHead ? "" : "arrow"))} />
+                </div>
+                <div className="arrows-tail">
+                    <div className="arrows-tail-title" >Arrow End: </div>
+                    <input key="markTail" className="arrows-tail-input" type="checkbox"
+                        checked={this.markTail !== ""}
+                        onChange={undoBatch(action(() => this.markTail = this.markTail ? "" : "arrow"))} />
+                </div>
+            </div>
+            <div className="dashed">
+                <div className="dashed-title">Dash:</div>
+                <input key="markHead" className="dashed-input"
+                    type="checkbox" checked={this.dashdStk === "2"}
+                    onChange={this.changeDash} />
+            </div>
+        </div>;
+    }
+
+    @undoBatch @action
+    changeDash = () => {
+        const dash = this.dashdStk;
+        if (dash === "2") {
+            this.dashdStk = "0";
+        } else {
+            this.dashdStk = "2";
+        }
+    }
+
+    @computed get appearanceEditor() {
+        return <div className="appearance-editor">
+            {this.widthAndDash}
+            {this.strokeAndFill}
+        </div>;
+    }
+
+    @computed get transformEditor() {
+        return <div className="transform-editor">
+            {this.controlPointsButton}
+            {this.hgtInput}
+            {this.XpsInput}
+            {this.rotInput}
+        </div>;
+    }
+
+    render() {
+
+        if (!this.selectedDoc) {
+            return <div className="propertiesView" style={{ width: this.props.width }}>
+                <div className="propertiesView-title" style={{ width: this.props.width, paddingLeft: 6 }}>
+                    No Document Selected
+            </div> </div>;
+        }
+
+        const novice = Doc.UserDoc().noviceMode;
+
+        return <div className="propertiesView" style={{ width: this.props.width }} >
+            <div className="propertiesView-title" style={{ width: this.props.width }}>
+                Properties
+                <div className="propertiesView-title-icon" onPointerDown={this.props.onDown}>
+                    <FontAwesomeIcon icon="times" color="black" size="sm" />
+                </div>
+            </div>
+            <div className="propertiesView-name">
+                {this.editableTitle}
+            </div>
+            <div className="propertiesView-settings">
+                <div className="propertiesView-settings-title"
+                    onPointerDown={() => runInAction(() => { this.openActions = !this.openActions; })}
+                    style={{ backgroundColor: this.openActions ? "black" : "" }}>
+                    Actions
+                    <div className="propertiesView-settings-title-icon">
+                        <FontAwesomeIcon icon={this.openActions ? "caret-down" : "caret-right"} size="lg" color="white" />
+                    </div>
+                </div>
+                {this.openActions ? <div className="propertiesView-settings-content">
+                    <PropertiesButtons />
+                </div> : null}
+            </div>
+            <div className="propertiesView-sharing">
+                <div className="propertiesView-sharing-title"
+                    onPointerDown={() => runInAction(() => { this.openSharing = !this.openSharing; })}
+                    style={{ backgroundColor: this.openSharing ? "black" : "" }}>
+                    Sharing {"&"} Permissions
+                    <div className="propertiesView-sharing-title-icon">
+                        <FontAwesomeIcon icon={this.openSharing ? "caret-down" : "caret-right"} size="lg" color="white" />
+                    </div>
+                </div>
+                {this.openSharing ? <div className="propertiesView-sharing-content">
+                    {this.sharingTable}
+                </div> : null}
+            </div>
+
+
+
+
+            {this.isInk ? <div className="propertiesView-appearance">
+                <div className="propertiesView-appearance-title"
+                    onPointerDown={() => runInAction(() => { this.openAppearance = !this.openAppearance; })}
+                    style={{ backgroundColor: this.openAppearance ? "black" : "" }}>
+                    Appearance
+                    <div className="propertiesView-appearance-title-icon">
+                        <FontAwesomeIcon icon={this.openAppearance ? "caret-down" : "caret-right"} size="lg" color="white" />
+                    </div>
+                </div>
+                {this.openAppearance ? <div className="propertiesView-appearance-content">
+                    {this.appearanceEditor}
+                </div> : null}
+            </div> : null}
+
+            {this.isInk ? <div className="propertiesView-transform">
+                <div className="propertiesView-transform-title"
+                    onPointerDown={() => runInAction(() => { this.openTransform = !this.openTransform; })}
+                    style={{ backgroundColor: this.openTransform ? "black" : "" }}>
+                    Transform
+                    <div className="propertiesView-transform-title-icon">
+                        <FontAwesomeIcon icon={this.openTransform ? "caret-down" : "caret-right"} size="lg" color="white" />
+                    </div>
+                </div>
+                {this.openTransform ? <div className="propertiesView-transform-content">
+                    {this.transformEditor}
+                </div> : null}
+            </div> : null}
+
+
+
+
+
+            <div className="propertiesView-fields">
+                <div className="propertiesView-fields-title"
+                    onPointerDown={() => runInAction(() => { this.openFields = !this.openFields; })}
+                    style={{ backgroundColor: this.openFields ? "black" : "" }}>
+                    <div className="propertiesView-fields-title-name">
+                        Fields {"&"} Tags
+                        <div className="propertiesView-fields-title-icon">
+                            <FontAwesomeIcon icon={this.openFields ? "caret-down" : "caret-right"} size="lg" color="white" />
+                        </div>
+                    </div>
+                </div>
+                {!novice && this.openFields ? <div className="propertiesView-fields-checkbox">
+                    {this.fieldsCheckbox}
+                    <div className="propertiesView-fields-checkbox-text">Layout</div>
+                </div> : null}
+                {this.openFields ?
+                    <div className="propertiesView-fields-content">
+                        {novice ? this.noviceFields : this.expandedField}
+                    </div> : null}
+            </div>
+            <div className="propertiesView-layout">
+                <div className="propertiesView-layout-title"
+                    onPointerDown={() => runInAction(() => { this.openLayout = !this.openLayout; })}
+                    style={{ backgroundColor: this.openLayout ? "black" : "" }}>
+                    Layout
+                    <div className="propertiesView-layout-title-icon"
+                        onPointerDown={() => runInAction(() => { this.openLayout = !this.openLayout; })}>
+                        <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}
+            </div>
+        </div>;
+    }
+} 
\ No newline at end of file
diff --git a/src/client/views/linking/LinkMenuItem.tsx b/src/client/views/linking/LinkMenuItem.tsx
index d1c839c3b..0aabf5319 100644
--- a/src/client/views/linking/LinkMenuItem.tsx
+++ b/src/client/views/linking/LinkMenuItem.tsx
@@ -182,7 +182,7 @@ export class LinkMenuItem extends React.Component<LinkMenuItemProps> {
         switch (this.props.destinationDoc.type) {
             case DocumentType.IMG: destinationIcon = "image"; break;
             case DocumentType.COMPARISON: destinationIcon = "columns"; break;
-            case DocumentType.RTF: destinationIcon = "font"; break;
+            case DocumentType.RTF: destinationIcon = "sticky-note"; break;
             case DocumentType.COL: destinationIcon = "folder"; break;
             case DocumentType.WEB: destinationIcon = "globe-asia"; break;
             case DocumentType.SCREENSHOT: destinationIcon = "photo-video"; break;
@@ -196,6 +196,7 @@ export class LinkMenuItem extends React.Component<LinkMenuItemProps> {
             case DocumentType.DOCHOLDER: destinationIcon = "expand"; break;
             case DocumentType.VID: destinationIcon = "video"; break;
             case DocumentType.INK: destinationIcon = "pen-nib"; break;
+            case DocumentType.PDF: destinationIcon = "file"; break;
             default: destinationIcon = "question"; break;
         }
 
diff --git a/src/client/views/nodes/ContentFittingDocumentView.tsx b/src/client/views/nodes/ContentFittingDocumentView.tsx
index 6081def5d..f7e253f42 100644
--- a/src/client/views/nodes/ContentFittingDocumentView.tsx
+++ b/src/client/views/nodes/ContentFittingDocumentView.tsx
@@ -78,6 +78,9 @@ export class ContentFittingDocumentView extends React.Component<DocumentViewProp
 
     render() {
         TraceMobx();
+        if (this.props.Document.title === "Archive") {
+            console.log("");
+        }
         return (<div className="contentFittingDocumentView" style={{
             width: Math.abs(this.centeringYOffset) > 0.001 ? "auto" : this.props.PanelWidth(),
             height: Math.abs(this.centeringOffset) > 0.0001 ? "auto" : this.props.PanelHeight(),
diff --git a/src/client/views/nodes/DocumentContentsView.tsx b/src/client/views/nodes/DocumentContentsView.tsx
index e8173d103..e3f258b8d 100644
--- a/src/client/views/nodes/DocumentContentsView.tsx
+++ b/src/client/views/nodes/DocumentContentsView.tsx
@@ -18,6 +18,7 @@ import { DocHolderBox } from "./DocHolderBox";
 import { DocumentViewProps } from "./DocumentView";
 import "./DocumentView.scss";
 import { FontIconBox } from "./FontIconBox";
+import { MenuIconBox } from "./MenuIconBox";
 import { FieldView, FieldViewProps } from "./FieldView";
 import { FormattedTextBox } from "./formattedText/FormattedTextBox";
 import { ImageBox } from "./ImageBox";
@@ -189,7 +190,7 @@ export class DocumentContentsView extends React.Component<DocumentViewProps & {
                 blacklistedAttrs={[]}
                 renderInWrapper={false}
                 components={{
-                    FormattedTextBox, ImageBox, DirectoryImportBox, FontIconBox, LabelBox, SliderBox, FieldView,
+                    FormattedTextBox, ImageBox, DirectoryImportBox, FontIconBox, MenuIconBox, LabelBox, SliderBox, FieldView,
                     CollectionFreeFormView, CollectionDockingView, CollectionSchemaView, CollectionView, WebBox, KeyValueBox,
                     PDFBox, VideoBox, AudioBox, PresBox, YoutubeBox, PresElementBox, QueryBox,
                     ColorBox, DashWebRTCVideo, LinkAnchorBox, InkingStroke, DocHolderBox, LinkBox, ScriptingBox,
diff --git a/src/client/views/nodes/DocumentLinksButton.tsx b/src/client/views/nodes/DocumentLinksButton.tsx
index 3b91ac6b5..198a90225 100644
--- a/src/client/views/nodes/DocumentLinksButton.tsx
+++ b/src/client/views/nodes/DocumentLinksButton.tsx
@@ -198,8 +198,11 @@ export class DocumentLinksButton extends React.Component<DocumentLinksButtonProp
             // }))} 
             >
 
+                {/* {this.props.InMenu ? this.props.StartLink ? <FontAwesomeIcon className="documentdecorations-icon" icon="link" size="sm" /> :
+                    <FontAwesomeIcon className="documentdecorations-icon" icon="hand-paper" size="sm" /> : links.length} */}
+
                 {this.props.InMenu ? this.props.StartLink ? <FontAwesomeIcon className="documentdecorations-icon" icon="link" size="sm" /> :
-                    <FontAwesomeIcon className="documentdecorations-icon" icon="hand-paper" size="sm" /> : links.length}
+                    link : links.length}
 
             </div>
             {DocumentLinksButton.StartLink && this.props.InMenu && !!!this.props.StartLink && DocumentLinksButton.StartLink !== this.props.View ? <div className={"documentLinksButton-endLink"}
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index b3bfadf4f..22a2bb8fe 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -94,6 +94,8 @@ export interface DocumentViewProps {
     layoutKey?: string;
     radialMenu?: String[];
     display?: string;
+    relative?: boolean;
+    scriptContext?: any;
 }
 
 @observer
@@ -287,7 +289,7 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
     }
 
     onClick = action((e: React.MouseEvent | React.PointerEvent) => {
-        if (!e.nativeEvent.cancelBubble && !this.Document.ignoreClick &&
+        if (!e.nativeEvent.cancelBubble && !this.Document.ignoreClick && this.props.renderDepth >= 0 &&
             (Math.abs(e.clientX - this._downX) < Utils.DRAG_THRESHOLD && Math.abs(e.clientY - this._downY) < Utils.DRAG_THRESHOLD)) {
             let stopPropagate = true;
             let preventDefault = true;
@@ -319,10 +321,11 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
                 const func = () => this.onClickHandler.script.run({
                     this: this.layoutDoc,
                     self: this.rootDoc,
+                    scriptContext: this.props.scriptContext,
                     thisContainer: this.props.ContainingCollectionDoc,
                     shiftKey: e.shiftKey
                 }, console.log);
-                if (this.props.Document !== Doc.UserDoc()["dockedBtn-undo"] && this.props.Document !== Doc.UserDoc()["dockedBtn-redo"]) {
+                if (!Doc.AreProtosEqual(this.props.Document, Doc.UserDoc()["dockedBtn-undo"] as Doc) && !Doc.AreProtosEqual(this.props.Document, Doc.UserDoc()["dockedBtn-redo"] as Doc)) {
                     UndoManager.RunInBatch(func, "on click");
                 } else func();
             } else if (this.Document["onClick-rawScript"] && !StrCast(Doc.LayoutField(this.layoutDoc))?.includes("ScriptingBox")) {// bcz: hack? don't edit a script if you're clicking on a scripting box itself
@@ -584,6 +587,18 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
         }
     }
 
+
+    @undoBatch
+    noOnClick = (): void => {
+        this.Document.ignoreClick = false;
+        this.Document.isLinkButton = false;
+    }
+
+    @undoBatch
+    toggleDetail = (): void => {
+        this.Document.onClick = ScriptField.MakeScript(`toggleDetail(self, "${this.Document.layoutKey}")`);
+    }
+
     @undoBatch @action
     drop = async (e: Event, de: DragManager.DropEvent) => {
         if (this.props.Document === Doc.UserDoc().activeWorkspace) {
@@ -660,6 +675,14 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
         }
     }
 
+    @action
+    onCopy = () => {
+        const copy = Doc.MakeCopy(this.props.Document, true);
+        copy.x = NumCast(this.props.Document.x) + NumCast(this.props.Document._width);
+        copy.y = NumCast(this.props.Document.y) + 30;
+        this.props.addDocument?.(copy);
+    }
+
     @action
     onContextMenu = async (e: React.MouseEvent | Touch): Promise<void> => {
         // the touch onContextMenu is button 0, the pointer onContextMenu is button 2
@@ -704,14 +727,14 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
         const existingOnClick = cm.findByDescription("OnClick...");
         const onClicks: ContextMenuProps[] = existingOnClick && "subitems" in existingOnClick ? existingOnClick.subitems : [];
         onClicks.push({ description: "Enter Portal", event: this.makeIntoPortal, icon: "window-restore" });
-        onClicks.push({ description: "Toggle Detail", event: () => this.Document.onClick = ScriptField.MakeScript(`toggleDetail(self, "${this.Document.layoutKey}")`), icon: "window-restore" });
+        onClicks.push({ description: "Toggle Detail", event: () => this.Document.onClick = ScriptField.MakeScript(`toggleDetail(self, "${this.Document.layoutKey}")`), icon: "concierge-bell" });
         onClicks.push({ description: this.Document.ignoreClick ? "Select" : "Do Nothing", event: () => this.Document.ignoreClick = !this.Document.ignoreClick, icon: this.Document.ignoreClick ? "unlock" : "lock" });
-        onClicks.push({ description: this.Document.isLinkButton ? "Remove Follow Behavior" : "Follow Link in Place", event: () => this.toggleFollowLink("inPlace", true, false), icon: "concierge-bell" });
-        !this.Document.isLinkButton && onClicks.push({ description: "Follow Link on Right", event: () => this.toggleFollowLink("onRight", false, false), icon: "concierge-bell" });
-        onClicks.push({ description: this.Document.isLinkButton || this.onClickHandler ? "Remove Click Behavior" : "Follow Link", event: () => this.toggleFollowLink(undefined, false, false), icon: "concierge-bell" });
-        onClicks.push({ description: (this.Document.isPushpin ? "Remove" : "Make") + " Pushpin", event: () => this.toggleFollowLink(undefined, false, true), icon: "snowflake" });
-        onClicks.push({ description: "Edit onClick Script", event: () => UndoManager.RunInBatch(() => DocUtils.makeCustomViewClicked(this.props.Document, undefined, "onClick"), "edit onClick"), icon: "edit" });
-        !existingOnClick && cm.addItem({ description: "OnClick...", noexpand: true, addDivider: true, subitems: onClicks, icon: "hand-point-right" });
+        onClicks.push({ description: this.Document.isLinkButton ? "Remove Follow Behavior" : "Follow Link in Place", event: () => this.toggleFollowLink("inPlace", true, false), icon: "link" });
+        !this.Document.isLinkButton && onClicks.push({ description: "Follow Link on Right", event: () => this.toggleFollowLink("onRight", false, false), icon: "link" });
+        onClicks.push({ description: this.Document.isLinkButton || this.onClickHandler ? "Remove Click Behavior" : "Follow Link", event: () => this.toggleFollowLink(undefined, false, false), icon: "link" });
+        onClicks.push({ description: (this.Document.isPushpin ? "Remove" : "Make") + " Pushpin", event: () => this.toggleFollowLink(undefined, false, true), icon: "map-pin" });
+        onClicks.push({ description: "Edit onClick Script", event: () => UndoManager.RunInBatch(() => DocUtils.makeCustomViewClicked(this.props.Document, undefined, "onClick"), "edit onClick"), icon: "terminal" });
+        !existingOnClick && cm.addItem({ description: "OnClick...", noexpand: true, addDivider: true, subitems: onClicks, icon: "mouse-pointer" });
 
         const funcs: ContextMenuProps[] = [];
         if (this.layoutDoc.onDragStart) {
@@ -724,6 +747,9 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
         const more = cm.findByDescription("More...");
         const moreItems = more && "subitems" in more ? more.subitems : [];
         moreItems.push({ description: "Download document", icon: "download", event: async () => Doc.Zip(this.props.Document) });
+        moreItems.push({ description: "Share", event: () => SharingManager.Instance.open(this), icon: "users" });
+        //moreItems.push({ description: this.Document.lockedPosition ? "Unlock Position" : "Lock Position", event: this.toggleLockPosition, icon: BoolCast(this.Document.lockedPosition) ? "unlock" : "lock" });
+        moreItems.push({ description: "Create an Alias", event: () => this.onCopy(), icon: "copy" });
         if (!Doc.UserDoc().noviceMode) {
             moreItems.push({ description: "Make View of Metadata Field", event: () => Doc.MakeMetadataFieldTemplate(this.props.Document, this.props.DataDoc), icon: "concierge-bell" });
             moreItems.push({ description: `${this.Document._chromeStatus !== "disabled" ? "Hide" : "Show"} Chrome`, event: () => this.Document._chromeStatus = (this.Document._chromeStatus !== "disabled" ? "disabled" : "enabled"), icon: "project-diagram" });
@@ -735,16 +761,18 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
             }
             moreItems.push({ description: "Copy ID", event: () => Utils.CopyText(Utils.prepend("/doc/" + this.props.Document[Id])), icon: "fingerprint" });
         }
+        //GetEffectiveAcl(this.props.Document) === AclEdit && moreItems.push({ description: "Delete", event: this.deleteClicked, icon: "trash" });
+
         const effectiveAcl = GetEffectiveAcl(this.props.Document);
         (effectiveAcl === AclEdit || effectiveAcl === AclAdmin) && moreItems.push({ description: "Delete", event: this.deleteClicked, icon: "trash" });
-        moreItems.push({ description: "Share", event: () => SharingManager.Instance.open(this), icon: "external-link-alt" });
+
         !more && cm.addItem({ description: "More...", subitems: moreItems, icon: "hand-point-right" });
         cm.moveAfter(cm.findByDescription("More...")!, cm.findByDescription("OnClick...")!);
 
         const help = cm.findByDescription("Help...");
         const helpItems: ContextMenuProps[] = help && "subitems" in help ? help.subitems : [];
+        !Doc.UserDoc().novice && helpItems.push({ description: "Show Fields ", event: () => this.props.addDocTab(Docs.Create.KVPDocument(this.props.Document, { _width: 300, _height: 300 }), "onRight"), icon: "layer-group" });
         helpItems.push({ description: "Text Shortcuts Ctrl+/", event: () => this.props.addDocTab(Docs.Create.PdfDocument(Utils.prepend("/assets/cheat-sheet.pdf"), { _width: 300, _height: 300 }), "onRight"), icon: "keyboard" });
-        helpItems.push({ description: "Show Fields ", event: () => this.props.addDocTab(Docs.Create.KVPDocument(this.props.Document, { _width: 300, _height: 300 }), "onRight"), icon: "layer-group" });
         helpItems.push({ description: "Print Document in Console", event: () => console.log(this.props.Document), icon: "hand-point-right" });
         cm.addItem({ description: "Help...", noexpand: true, subitems: helpItems, icon: "question" });
 
@@ -786,8 +814,9 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
     childScaling = () => (this.layoutDoc._fitWidth ? this.props.PanelWidth() / this.nativeWidth : this.props.ContentScaling());
     @computed.struct get linkOffset() { return [-15, 0]; }
     @computed get contents() {
+        const pos = this.props.relative ? "relative " : "absolute";
         TraceMobx();
-        return (<div style={{ position: "absolute", width: "100%", height: "100%" }}>
+        return (<div style={{ width: "100%", height: "100%" }}>
             <DocumentContentsView key={1}
                 docFilters={this.props.docFilters}
                 ContainingCollectionView={this.props.ContainingCollectionView}
@@ -823,6 +852,7 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
                 ChromeHeight={this.chromeHeight}
                 isSelected={this.isSelected}
                 select={this.select}
+                scriptContext={this.props.scriptContext}
                 onClick={this.onClickFunc}
                 layoutKey={this.finalLayoutKey} />
             {this.layoutDoc.hideAllLinks ? (null) : this.allAnchors}
@@ -877,8 +907,12 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
     }
     @computed get innards() {
         TraceMobx();
+        const pos = this.props.relative ? "relative" : undefined;
         if (this.props.treeViewDoc && !this.props.LayoutTemplateString?.includes("LinkAnchorBox")) {  // this happens when the document is a tree view label (but not an anchor dot)
-            return <div className="documentView-treeView" style={{ maxWidth: this.props.PanelWidth() || undefined }}>
+            return <div className="documentView-treeView" style={{
+                maxWidth: this.props.PanelWidth() || undefined,
+                position: pos
+            }}>
                 {StrCast(this.props.Document.title)}
                 {this.allAnchors}
             </div>;
@@ -1003,7 +1037,7 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
                 background: finalColor,
                 opacity: finalOpacity,
                 fontFamily: StrCast(this.Document._fontFamily, "inherit"),
-                fontSize: Cast(this.Document._fontSize, "string", null)
+                fontSize: Cast(this.Document._fontSize, "string", null),
             }}>
             {this.onClickHandler && this.props.ContainingCollectionView?.props.Document._viewType === CollectionViewType.Time ? <>
                 {this.innards}
diff --git a/src/client/views/nodes/FieldView.tsx b/src/client/views/nodes/FieldView.tsx
index 5d5bc1d73..1b4151bd8 100644
--- a/src/client/views/nodes/FieldView.tsx
+++ b/src/client/views/nodes/FieldView.tsx
@@ -61,6 +61,7 @@ export interface FieldViewProps {
     color?: string;
     xMargin?: number;
     yMargin?: number;
+    scriptContext?: any;
 }
 
 @observer
diff --git a/src/client/views/nodes/FontIconBox.scss b/src/client/views/nodes/FontIconBox.scss
index 5b85d8b0b..69c835318 100644
--- a/src/client/views/nodes/FontIconBox.scss
+++ b/src/client/views/nodes/FontIconBox.scss
@@ -16,7 +16,7 @@
         position: absolute;
         text-align: center;
         font-size: 8px;
-        margin-top:4px;
+        //margin-top:4px;
         letter-spacing: normal;
         left: 0;
         overflow: hidden;
diff --git a/src/client/views/nodes/MenuIconBox.scss b/src/client/views/nodes/MenuIconBox.scss
new file mode 100644
index 000000000..1b72f5a8f
--- /dev/null
+++ b/src/client/views/nodes/MenuIconBox.scss
@@ -0,0 +1,49 @@
+.menuButton {
+    //padding: 7px;
+    padding-left: 7px;
+    width: 100%;
+    width: 60px;
+    height: 70px;
+
+    .menuButton-wrap {
+        width: 45px;
+        /* padding: 5px; */
+        touch-action: none;
+        background: black;
+        transform-origin: top left;
+        /* margin-bottom: 5px; */
+        margin-top: 5px;
+        margin-right: 25px;
+        border-radius: 8px;
+
+        &:hover {
+            background: rgb(61, 61, 61);
+            cursor: pointer;
+        }
+    }
+
+    .menuButton-label {
+        color: white;
+        margin-right: 4px;
+        border-radius: 8px;
+        width: 42px;
+        position: relative;
+        text-align: center;
+        font-size: 8px;
+        margin-top: 1px;
+        letter-spacing: normal;
+        padding: 3px;
+        background-color: inherit;
+    }
+
+    .menuButton-icon {
+        width: auto;
+        height: 35px;
+        padding: 5px;
+    }
+
+    svg {
+        width: 95% !important;
+        height: 95%;
+    }
+}
\ No newline at end of file
diff --git a/src/client/views/nodes/MenuIconBox.tsx b/src/client/views/nodes/MenuIconBox.tsx
new file mode 100644
index 000000000..0aa7b327e
--- /dev/null
+++ b/src/client/views/nodes/MenuIconBox.tsx
@@ -0,0 +1,33 @@
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { observer } from 'mobx-react';
+import * as React from 'react';
+import { createSchema, makeInterface } from '../../../fields/Schema';
+import { StrCast } from '../../../fields/Types';
+import { DocComponent } from '../DocComponent';
+import { FieldView, FieldViewProps } from './FieldView';
+import './MenuIconBox.scss';
+const MenuIconSchema = createSchema({
+    icon: "string"
+});
+
+type MenuIconDocument = makeInterface<[typeof MenuIconSchema]>;
+const MenuIconDocument = makeInterface(MenuIconSchema);
+@observer
+export class MenuIconBox extends DocComponent<FieldViewProps, MenuIconDocument>(MenuIconDocument) {
+    public static LayoutString(fieldKey: string) { return FieldView.LayoutString(MenuIconBox, fieldKey); }
+    _ref: React.RefObject<HTMLButtonElement> = React.createRef();
+
+    render() {
+
+        const color = this.props.backgroundColor?.(this.props.Document) === "lightgrey" ? "black" : "white";
+        const menuBTN = <div className="menuButton" style={{ backgroundColor: this.props.backgroundColor?.(this.props.Document) }}>
+            <div className="menuButton-wrap"
+                style={{ backgroundColor: this.props.backgroundColor?.(this.props.Document) }} >
+                <FontAwesomeIcon className="menuButton-icon" icon={StrCast(this.dataDoc.icon, "user") as any} color={color} size="lg" />
+                <div className="menuButton-label" style={{ color: color }}> {this.dataDoc.title} </div>
+            </div>
+        </div>;
+
+        return menuBTN;
+    }
+}
\ No newline at end of file
diff --git a/src/client/views/nodes/PresBox.tsx b/src/client/views/nodes/PresBox.tsx
index c04c6c409..97f223c02 100644
--- a/src/client/views/nodes/PresBox.tsx
+++ b/src/client/views/nodes/PresBox.tsx
@@ -32,6 +32,7 @@ import { conformsTo } from "lodash";
 import { translate } from "googleapis/build/src/apis/translate";
 import { DragManager, dropActionType } from "../../util/DragManager";
 import { actionAsync } from "mobx-utils";
+import { SelectionManager } from "../../util/SelectionManager";
 
 type PresBoxSchema = makeInterface<[typeof documentSchema]>;
 const PresBoxDocument = makeInterface(documentSchema);
@@ -260,7 +261,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
         const targetDoc = Cast(activeItem.presentationTargetDoc, Doc, null);
         const srcContext = await DocCastAsync(targetDoc.context);
         const presCollection = Cast(this.layoutDoc.presCollection, Doc, null);
-        const collectionDocView = presCollection ? DocumentManager.Instance.getDocumentView(presCollection) : undefined;
+        const collectionDocView = presCollection ? await DocumentManager.Instance.getDocumentView(presCollection) : undefined;
         if (this.itemIndex >= 0) {
             if (targetDoc) {
                 if (srcContext) this.layoutDoc.presCollection = srcContext;
@@ -496,6 +497,8 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
     selectElement = (doc: Doc) => {
         // this._selectedArray = [];
         this.gotoDocument(this.childDocs.indexOf(doc), NumCast(this.itemIndex));
+        const view = DocumentManager.Instance.getDocumentView(doc);
+        view && SelectionManager.SelectDoc(view, false);
         // this._selectedArray.push(this.childDocs[this.childDocs.indexOf(doc)]);
         // console.log(this._selectedArray);
     }
@@ -504,8 +507,9 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
     @action
     multiSelect = (doc: Doc, ref: HTMLElement) => {
         this._selectedArray.push(this.childDocs[this.childDocs.indexOf(doc)]);
-        const ele = ref.getElementsByClassName("stacking");
         this._eleArray.push(ref);
+        const view = DocumentManager.Instance.getDocumentView(doc);
+        view && SelectionManager.SelectDoc(view, true);
     }
 
     //Shift click
@@ -517,6 +521,8 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
             for (let i = Math.min(this.itemIndex, this.childDocs.indexOf(doc)); i <= Math.max(this.itemIndex, this.childDocs.indexOf(doc)); i++) {
                 this._selectedArray.push(this.childDocs[i]);
                 this._eleArray.push(ref);
+                const view = DocumentManager.Instance.getDocumentView(doc);
+                view && SelectionManager.SelectDoc(view, true);
             }
         }
     }
diff --git a/src/client/views/nodes/formattedText/DashFieldView.tsx b/src/client/views/nodes/formattedText/DashFieldView.tsx
index 958a37568..8ae71c035 100644
--- a/src/client/views/nodes/formattedText/DashFieldView.tsx
+++ b/src/client/views/nodes/formattedText/DashFieldView.tsx
@@ -190,7 +190,7 @@ export class DashFieldViewInternal extends React.Component<IDashFieldViewInterna
             }
             list.map(c => c.heading).indexOf(this._fieldKey) === -1 && list.push(new SchemaHeaderField(this._fieldKey, "#f1efeb"));
             list.map(c => c.heading).indexOf("text") === -1 && list.push(new SchemaHeaderField("text", "#f1efeb"));
-            alias._pivotField = this._fieldKey;
+            alias._pivotField = this._fieldKey.startsWith("#") ? "#" : this._fieldKey;
             this.props.tbox.props.addDocTab(alias, "onRight");
         }
     }
diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
index 627c6e363..fc65f34eb 100644
--- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx
+++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
@@ -1267,7 +1267,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp
         this.doLinkOnDeselect();
 
         // move the richtextmenu offscreen
-        if (!RichTextMenu.Instance.Pinned) RichTextMenu.Instance.delayHide();
+        //if (!RichTextMenu.Instance.Pinned) RichTextMenu.Instance.delayHide();
     }
 
     _lastTimedMark: Mark | undefined = undefined;
@@ -1346,7 +1346,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp
     @computed get sidebarColor() { return StrCast(this.layoutDoc[this.props.fieldKey + "-backgroundColor"], StrCast(this.layoutDoc[this.props.fieldKey + "-backgroundColor"], "transparent")); }
     render() {
         TraceMobx();
-        const scale = this.props.ContentScaling() * NumCast(this.layoutDoc._viewScale, 1);
+        const scale = this.props.hideOnLeave ? 1 : this.props.ContentScaling() * NumCast(this.layoutDoc._viewScale, 1);
         const rounded = StrCast(this.layoutDoc.borderRounding) === "100%" ? "-rounded" : "";
         const interactive = Doc.GetSelectedTool() === InkTool.None && !this.layoutDoc.isBackground;
         setTimeout(() => this._editorView && RichTextMenu.Instance.updateFromDash(this._editorView, undefined, this.props), this.props.isSelected() ? 10 : 0); // need to make sure that we update a text box that is selected after updating the one that was deselected
diff --git a/src/client/views/nodes/formattedText/RichTextMenu.tsx b/src/client/views/nodes/formattedText/RichTextMenu.tsx
index 7ccbfa051..f76707a79 100644
--- a/src/client/views/nodes/formattedText/RichTextMenu.tsx
+++ b/src/client/views/nodes/formattedText/RichTextMenu.tsx
@@ -77,7 +77,8 @@ export default class RichTextMenu extends AntimodeMenu {
         super(props);
         RichTextMenu.Instance = this;
         this._canFade = false;
-        this.Pinned = BoolCast(Doc.UserDoc()["menuRichText-pinned"]);
+        //this.Pinned = BoolCast(Doc.UserDoc()["menuRichText-pinned"]);
+        this.Pinned = true;
 
         this.fontSizeOptions = [
             { mark: schema.marks.pFontSize.create({ fontSize: 7 }), title: "Set font size", label: "7pt", command: this.changeFontSize },
@@ -529,7 +530,7 @@ export default class RichTextMenu extends AntimodeMenu {
 
     indentParagraph(state: EditorState<any>, dispatch: any) {
         var tr = state.tr;
-        let headin = false;
+        const heading = false;
         state.doc.nodesBetween(state.selection.from, state.selection.to, (node, pos, parent, index) => {
             if (node.type === schema.nodes.paragraph || node.type === schema.nodes.heading) {
                 const nodeval = node.attrs.indent ? Number(node.attrs.indent) : undefined;
@@ -539,7 +540,7 @@ export default class RichTextMenu extends AntimodeMenu {
             }
             return true;
         });
-        !headin && dispatch?.(tr);
+        !heading && dispatch?.(tr);
         return true;
     }
 
@@ -920,16 +921,22 @@ export default class RichTextMenu extends AntimodeMenu {
     render() {
         TraceMobx();
         const row1 = <div className="antimodeMenu-row" key="row 1" style={{ display: this.collapsed ? "none" : undefined }}>{[
-            !this.collapsed ? this.getDragger() : (null),
-            !this.Pinned ? (null) : <div key="frag1"> {[
-                this.createButton("bold", "Bold", this.boldActive, toggleMark(schema.marks.strong)),
-                this.createButton("italic", "Italic", this.italicsActive, toggleMark(schema.marks.em)),
-                this.createButton("underline", "Underline", this.underlineActive, toggleMark(schema.marks.underline)),
-                this.createButton("strikethrough", "Strikethrough", this.strikethroughActive, toggleMark(schema.marks.strikethrough)),
-                this.createButton("superscript", "Superscript", this.superscriptActive, toggleMark(schema.marks.superscript)),
-                this.createButton("subscript", "Subscript", this.subscriptActive, toggleMark(schema.marks.subscript)),
-                <div className="richTextMenu-divider" key="divider" />
-            ]}</div>,
+            //!this.collapsed ? this.getDragger() : (null),
+            // !this.Pinned ? (null) : <div key="frag1"> {[
+            //     this.createButton("bold", "Bold", this.boldActive, toggleMark(schema.marks.strong)),
+            //     this.createButton("italic", "Italic", this.italicsActive, toggleMark(schema.marks.em)),
+            //     this.createButton("underline", "Underline", this.underlineActive, toggleMark(schema.marks.underline)),
+            //     this.createButton("strikethrough", "Strikethrough", this.strikethroughActive, toggleMark(schema.marks.strikethrough)),
+            //     this.createButton("superscript", "Superscript", this.superscriptActive, toggleMark(schema.marks.superscript)),
+            //     this.createButton("subscript", "Subscript", this.subscriptActive, toggleMark(schema.marks.subscript)),
+            //     <div className="richTextMenu-divider" key="divider" />
+            // ]}</div>,
+            this.createButton("bold", "Bold", this.boldActive, toggleMark(schema.marks.strong)),
+            this.createButton("italic", "Italic", this.italicsActive, toggleMark(schema.marks.em)),
+            this.createButton("underline", "Underline", this.underlineActive, toggleMark(schema.marks.underline)),
+            this.createButton("strikethrough", "Strikethrough", this.strikethroughActive, toggleMark(schema.marks.strikethrough)),
+            this.createButton("superscript", "Superscript", this.superscriptActive, toggleMark(schema.marks.superscript)),
+            this.createButton("subscript", "Subscript", this.subscriptActive, toggleMark(schema.marks.subscript)),
             this.createColorButton(),
             this.createHighlighterButton(),
             this.createLinkButton(),
@@ -957,16 +964,16 @@ export default class RichTextMenu extends AntimodeMenu {
                 this.createButton("minus", "Horizontal Rule", undefined, this.insertHorizontalRule),
                 <div className="richTextMenu-divider" key="divider 5" />,]}
             </div>
-            <div key="collapser">
-                {/* <div key="collapser">
+            {/* <div key="collapser">
+                {<div key="collapser">
                     <button className="antimodeMenu-button" key="collapse menu" title="Collapse menu" onClick={this.toggleCollapse} style={{ backgroundColor: this.collapsed ? "#121212" : "", width: 25 }}>
                         <FontAwesomeIcon icon="chevron-left" size="lg" style={{ transitionProperty: "transform", transitionDuration: "0.3s", transform: `rotate(${this.collapsed ? 180 : 0}deg)` }} />
                     </button>
-                </div> */}
+                </div> }
                 <button className="antimodeMenu-button" key="pin menu" title="Pin menu" onClick={this.toggleMenuPin} style={{ backgroundColor: this.Pinned ? "#121212" : "", display: this.collapsed ? "none" : undefined }}>
                     <FontAwesomeIcon icon="thumbtack" size="lg" style={{ transitionProperty: "transform", transitionDuration: "0.1s", transform: `rotate(${this.Pinned ? 45 : 0}deg)` }} />
                 </button>
-            </div>
+            </div> */}
         </div>;
 
         return (
diff --git a/src/client/views/nodes/formattedText/nodes_rts.ts b/src/client/views/nodes/formattedText/nodes_rts.ts
index 0eca6d753..1616500f6 100644
--- a/src/client/views/nodes/formattedText/nodes_rts.ts
+++ b/src/client/views/nodes/formattedText/nodes_rts.ts
@@ -79,14 +79,14 @@ export const nodes: { [index: string]: NodeSpec } = {
         { tag: "h5", attrs: { level: 5 } },
         { tag: "h6", attrs: { level: 6 } }],
         toDOM(node) {
-            var dom = toParagraphDOM(node) as any;
-            var level = node.attrs.level || 1;
+            const dom = toParagraphDOM(node) as any;
+            const level = node.attrs.level || 1;
             dom[0] = 'h' + level;
             return dom;
         },
         getAttrs(dom: any) {
-            var attrs = getParagraphNodeAttrs(dom) as any;
-            var level = Number(dom.nodeName.substring(1)) || 1;
+            const attrs = getParagraphNodeAttrs(dom) as any;
+            const level = Number(dom.nodeName.substring(1)) || 1;
             attrs.level = level;
             return attrs;
         }
diff --git a/src/fields/Doc.ts b/src/fields/Doc.ts
index 43e74ff61..85fc63074 100644
--- a/src/fields/Doc.ts
+++ b/src/fields/Doc.ts
@@ -528,10 +528,10 @@ export namespace Doc {
             const cfield = ComputedField.WithoutComputed(() => FieldValue(doc[key]));
             const field = ProxyField.WithoutProxy(() => doc[key]);
             const copyObjectField = async (field: ObjectField) => {
-                const list = await Cast(doc[key], listSpec(Doc));
+                const list = Cast(doc[key], listSpec(Doc));
                 const docs = list && (await DocListCastAsync(list))?.filter(d => d instanceof Doc);
                 if (docs !== undefined && docs.length) {
-                    const clones = await Promise.all(docs.map(async d => await Doc.makeClone(d as Doc, cloneMap, rtfs, exclusions, dontCreate)));
+                    const clones = await Promise.all(docs.map(async d => Doc.makeClone(d, cloneMap, rtfs, exclusions, dontCreate)));
                     !dontCreate && assignKey(new List<Doc>(clones));
                 } else if (doc[key] instanceof Doc) {
                     assignKey(key.includes("layout[") ? undefined : key.startsWith("layout") ? doc[key] as Doc : await Doc.makeClone(doc[key] as Doc, cloneMap, rtfs, exclusions, dontCreate)); // reference documents except copy documents that are expanded teplate fields 
@@ -625,7 +625,7 @@ export namespace Doc {
         Array.from(map.entries()).forEach(f => docs[f[0]] = f[1]);
         const docString = JSON.stringify({ id: doc[Id], docs }, replacer);
 
-        var zip = new JSZip();
+        const zip = new JSZip();
 
         zip.file(doc.title + ".json", docString);
 
diff --git a/src/server/ActionUtilities.ts b/src/server/ActionUtilities.ts
index 60f66c878..fd9bc0c83 100644
--- a/src/server/ActionUtilities.ts
+++ b/src/server/ActionUtilities.ts
@@ -1,11 +1,11 @@
-import { readFile, writeFile, exists, mkdir, unlink, createWriteStream } from 'fs';
-import { ExecOptions } from 'shelljs';
 import { exec } from 'child_process';
-import * as path from 'path';
-import * as rimraf from "rimraf";
-import { yellow, Color } from 'colors';
+import { Color, yellow } from 'colors';
+import { createWriteStream, exists, mkdir, readFile, unlink, writeFile } from 'fs';
 import * as nodemailer from "nodemailer";
 import { MailOptions } from "nodemailer/lib/json-transport";
+import * as path from 'path';
+import * as rimraf from "rimraf";
+import { ExecOptions } from 'shelljs';
 import Mail = require('nodemailer/lib/mailer');
 
 const projectRoot = path.resolve(__dirname, "../../");
diff --git a/src/server/ApiManagers/UtilManager.ts b/src/server/ApiManagers/UtilManager.ts
index e2cd88726..e657866ce 100644
--- a/src/server/ApiManagers/UtilManager.ts
+++ b/src/server/ApiManagers/UtilManager.ts
@@ -6,7 +6,6 @@ import { exec } from 'child_process';
 
 // const recommender = new Recommender();
 // recommender.testModel();
-import executeImport from "../../scraping/buxton/final/BuxtonImporter";
 
 export default class UtilManager extends ApiManager {
 
diff --git a/src/server/DashUploadUtils.ts b/src/server/DashUploadUtils.ts
index 2bf4c1956..890fb6f6d 100644
--- a/src/server/DashUploadUtils.ts
+++ b/src/server/DashUploadUtils.ts
@@ -1,23 +1,22 @@
-import { unlinkSync, createWriteStream, readFileSync, rename, writeFile, existsSync } from 'fs';
-import { Utils } from '../Utils';
-import * as path from 'path';
-import * as sharp from 'sharp';
-import request = require('request-promise');
+import { red } from 'colors';
 import { ExifImage } from 'exif';
-import { Opt } from '../fields/Doc';
-import { AcceptibleMedia, Upload } from './SharedMediaTypes';
-import { filesDirectory, publicDirectory } from '.';
 import { File } from 'formidable';
+import { createWriteStream, existsSync, readFileSync, rename, unlinkSync, writeFile } from 'fs';
+import * as path from 'path';
 import { basename } from "path";
-import { createIfNotExists } from './ActionUtilities';
+import * as sharp from 'sharp';
+import { Stream } from 'stream';
+import { filesDirectory, publicDirectory } from '.';
+import { Opt } from '../fields/Doc';
 import { ParsedPDF } from "../server/PdfTypes";
+import { Utils } from '../Utils';
+import { createIfNotExists } from './ActionUtilities';
+import { clientPathToFile, Directory, pathToDirectory, serverPathToFile } from './ApiManagers/UploadManager';
+import { resolvedServerUrl } from "./server_Initialization";
+import { AcceptibleMedia, Upload } from './SharedMediaTypes';
+import request = require('request-promise');
 const parse = require('pdf-parse');
-import { Directory, serverPathToFile, clientPathToFile, pathToDirectory } from './ApiManagers/UploadManager';
-import { red } from 'colors';
-import { Stream } from 'stream';
-import { resolvedPorts } from './server_Initialization';
 const requestImageSize = require("../client/util/request-image-size");
-import { resolvedServerUrl } from "./server_Initialization";
 
 export enum SizeSuffix {
     Small = "_s",
diff --git a/src/server/GarbageCollector.ts b/src/server/GarbageCollector.ts
index 24745cbb4..a9a3b0481 100644
--- a/src/server/GarbageCollector.ts
+++ b/src/server/GarbageCollector.ts
@@ -1,9 +1,9 @@
-import { Database } from './database';
-
-import * as path from 'path';
 import * as fs from 'fs';
+import * as path from 'path';
+import { Database } from './database';
 import { Search } from './Search';
 
+
 function addDoc(doc: any, ids: string[], files: { [name: string]: string[] }) {
     for (const key in doc) {
         if (!doc.hasOwnProperty(key)) {
diff --git a/src/server/MemoryDatabase.ts b/src/server/MemoryDatabase.ts
index 1f1d702d9..7f477327e 100644
--- a/src/server/MemoryDatabase.ts
+++ b/src/server/MemoryDatabase.ts
@@ -1,6 +1,7 @@
-import { IDatabase, DocumentsCollection } from './IDatabase';
-import { Transferable } from './Message';
+import { DH_CHECK_P_NOT_SAFE_PRIME } from 'constants';
 import * as mongodb from 'mongodb';
+import { DocumentsCollection, IDatabase } from './IDatabase';
+import { Transferable } from './Message';
 
 export class MemoryDatabase implements IDatabase {
 
diff --git a/src/server/Message.ts b/src/server/Message.ts
index ff0381fd3..59b24cd82 100644
--- a/src/server/Message.ts
+++ b/src/server/Message.ts
@@ -1,6 +1,6 @@
-import { Utils } from "../Utils";
 import { Point } from "../pen-gestures/ndollar";
 import { AnalysisResult, ImportResults } from "../scraping/buxton/final/BuxtonImporter";
+import { Utils } from "../Utils";
 
 export class Message<T> {
     private _name: string;
diff --git a/src/server/ProcessFactory.ts b/src/server/ProcessFactory.ts
index acb8b3a99..63682368f 100644
--- a/src/server/ProcessFactory.ts
+++ b/src/server/ProcessFactory.ts
@@ -1,8 +1,8 @@
-import { existsSync, mkdirSync } from "fs";
-import { pathFromRoot, fileDescriptorFromStream } from './ActionUtilities';
-import rimraf = require("rimraf");
 import { ChildProcess, spawn, StdioOptions } from "child_process";
+import { existsSync, mkdirSync } from "fs";
 import { Stream } from "stream";
+import { fileDescriptorFromStream, pathFromRoot } from './ActionUtilities';
+import rimraf = require("rimraf");
 
 export namespace ProcessFactory {
 
diff --git a/src/server/Recommender.ts b/src/server/Recommender.ts
deleted file mode 100644
index 935ec3871..000000000
--- a/src/server/Recommender.ts
+++ /dev/null
@@ -1,133 +0,0 @@
-// //import { Doc } from "../fields/Doc";
-// //import { StrCast } from "../fields/Types";
-// //import { List } from "../fields/List";
-// //import { CognitiveServices } from "../client/cognitive_services/CognitiveServices";
-
-// // var w2v = require('word2vec');
-// var assert = require('assert');
-// var arxivapi = require('arxiv-api-node');
-// import requestPromise = require("request-promise");
-// import * as use from '@tensorflow-models/universal-sentence-encoder';
-// import { Tensor } from "@tensorflow/tfjs-core/dist/tensor";
-// require('@tensorflow/tfjs-node');
-
-// //http://gnuwin32.sourceforge.net/packages/make.htm
-
-// export class Recommender {
-
-//     private _model: any;
-//     static Instance: Recommender;
-//     private dimension: number = 0;
-//     private choice: string = ""; // Tensorflow or Word2Vec
-
-//     constructor() {
-//         Recommender.Instance = this;
-//     }
-
-//     /***
-//      * Loads pre-trained model from TF
-//      */
-
-//     public async loadTFModel() {
-//         let self = this;
-//         return new Promise(res => {
-//             use.load().then(model => {
-//                 self.choice = "TF";
-//                 self._model = model;
-//                 self.dimension = 512;
-//                 res(model);
-//             });
-//         }
-
-//         );
-//     }
-
-//     /***
-//      * Loads pre-trained model from word2vec
-//      */
-
-//     // private loadModel(): Promise<any> {
-//     //     let self = this;
-//     //     return new Promise(res => {
-//     //         w2v.loadModel("./node_modules/word2vec/examples/fixtures/vectors.txt", function (err: any, model: any) {
-//     //             self.choice = "WV";
-//     //             self._model = model;
-//     //             self.dimension = model.size;
-//     //             res(model);
-//     //         });
-//     //     });
-//     // }
-
-//     /***
-//      * Testing
-//      */
-
-//     public async testModel() {
-//         if (!this._model) {
-//             await this.loadTFModel();
-//         }
-//         if (this._model) {
-//             if (this.choice === "WV") {
-//                 let similarity = this._model.similarity('father', 'mother');
-//             }
-//             else if (this.choice === "TF") {
-//                 const model = this._model as use.UniversalSentenceEncoder;
-//                 // Embed an array of sentences.
-//                 const sentences = [
-//                     'Hello.',
-//                     'How are you?'
-//                 ];
-//                 const embeddings = await this.vectorize(sentences);
-//                 if (embeddings) embeddings.print(true /*verbose*/);
-//                 // model.embed(sentences).then(embeddings => {
-//                 //     // `embeddings` is a 2D tensor consisting of the 512-dimensional embeddings for each sentence.
-//                 //     // So in this example `embeddings` has the shape [2, 512].
-//                 //     embeddings.print(true /* verbose */);
-//                 // });
-//             }
-//         }
-//         else {
-//             console.log("model not found :(");
-//         }
-//     }
-
-//     /***
-//      * Uses model to convert words to vectors
-//      */
-
-//     public async vectorize(text: string[]): Promise<Tensor | undefined> {
-//         if (!this._model) {
-//             await this.loadTFModel();
-//         }
-//         if (this._model) {
-//             if (this.choice === "WV") {
-//                 let word_vecs = this._model.getVectors(text);
-//                 return word_vecs;
-//             }
-//             else if (this.choice === "TF") {
-//                 const model = this._model as use.UniversalSentenceEncoder;
-//                 return new Promise<Tensor>(res => {
-//                     model.embed(text).then(embeddings => {
-//                         res(embeddings);
-//                     });
-//                 });
-
-//             }
-//         }
-//     }
-
-//     // public async trainModel() {
-//     //     w2v.word2vec("./node_modules/word2vec/examples/eng_news-typical_2016_1M-sentences.txt", './node_modules/word2vec/examples/my_phrases.txt', {
-//     //         cbow: 1,
-//     //         size: 200,
-//     //         window: 8,
-//     //         negative: 25,
-//     //         hs: 0,
-//     //         sample: 1e-4,
-//     //         threads: 20,
-//     //         iter: 200,
-//     //         minCount: 2
-//     //     });
-//     // }
-
-// }
diff --git a/src/server/RouteManager.ts b/src/server/RouteManager.ts
index 1a2340afc..78b75d6be 100644
--- a/src/server/RouteManager.ts
+++ b/src/server/RouteManager.ts
@@ -1,8 +1,8 @@
-import RouteSubscriber from "./RouteSubscriber";
-import { DashUserModel } from "./authentication/DashUserModel";
-import { Request, Response, Express } from 'express';
-import { cyan, red, green } from 'colors';
+import { cyan, green, red } from 'colors';
+import { Express, Request, Response } from 'express';
 import { AdminPriviliges } from ".";
+import { DashUserModel } from "./authentication/DashUserModel";
+import RouteSubscriber from "./RouteSubscriber";
 
 export enum Method {
     GET,
diff --git a/src/server/Search.ts b/src/server/Search.ts
index 21064e520..decd1f5b1 100644
--- a/src/server/Search.ts
+++ b/src/server/Search.ts
@@ -1,5 +1,5 @@
-import * as rp from 'request-promise';
 import { red } from 'colors';
+import * as rp from 'request-promise';
 
 const pathTo = (relative: string) => `http://localhost:8983/solr/dash/${relative}`;
 
diff --git a/src/server/database.ts b/src/server/database.ts
index 2372cbcf2..b7aa77f5d 100644
--- a/src/server/database.ts
+++ b/src/server/database.ts
@@ -1,11 +1,11 @@
 import * as mongodb from 'mongodb';
-import { Transferable } from './Message';
+import * as mongoose from 'mongoose';
 import { Opt } from '../fields/Doc';
-import { Utils, emptyFunction } from '../Utils';
+import { emptyFunction, Utils } from '../Utils';
 import { GoogleApiServerUtils } from './apis/google/GoogleApiServerUtils';
-import { IDatabase, DocumentsCollection } from './IDatabase';
+import { DocumentsCollection, IDatabase } from './IDatabase';
 import { MemoryDatabase } from './MemoryDatabase';
-import * as mongoose from 'mongoose';
+import { Transferable } from './Message';
 import { Upload } from './SharedMediaTypes';
 
 export namespace Database {
diff --git a/src/server/downsize.ts b/src/server/downsize.ts
index 5cd709fa3..382994e2d 100644
--- a/src/server/downsize.ts
+++ b/src/server/downsize.ts
@@ -1,5 +1,5 @@
-import * as sharp from 'sharp';
 import * as fs from 'fs';
+import * as sharp from 'sharp';
 
 const folder = "./src/server/public/files/";
 const pngTypes = ["png", "PNG"];
diff --git a/src/server/index.ts b/src/server/index.ts
index 9af4b00bc..9185e3c5e 100644
--- a/src/server/index.ts
+++ b/src/server/index.ts
@@ -1,29 +1,29 @@
 require('dotenv').config();
-import { GoogleApiServerUtils } from "./apis/google/GoogleApiServerUtils";
+import { yellow } from "colors";
 import * as mobileDetect from 'mobile-detect';
 import * as path from 'path';
-import { Database } from './database';
-import { DashUploadUtils } from './DashUploadUtils';
-import RouteSubscriber from './RouteSubscriber';
-import initializeServer, { resolvedPorts } from './server_Initialization';
-import RouteManager, { Method, _success, _permission_denied, _error, _invalid, PublicHandler } from './RouteManager';
 import * as qs from 'query-string';
-import UtilManager from './ApiManagers/UtilManager';
-import { SearchManager } from './ApiManagers/SearchManager';
-import UserManager from './ApiManagers/UserManager';
-import DownloadManager from './ApiManagers/DownloadManager';
-import { GoogleCredentialsLoader, SSL } from './apis/google/CredentialsLoader';
-import DeleteManager from "./ApiManagers/DeleteManager";
-import PDFManager from "./ApiManagers/PDFManager";
-import UploadManager from "./ApiManagers/UploadManager";
 import { log_execution } from "./ActionUtilities";
+import DeleteManager from "./ApiManagers/DeleteManager";
+import DownloadManager from './ApiManagers/DownloadManager';
 import GeneralGoogleManager from "./ApiManagers/GeneralGoogleManager";
-import HypothesisManager from "./ApiManagers/HypothesisManager";
 import GooglePhotosManager from "./ApiManagers/GooglePhotosManager";
-import { Logger } from "./ProcessFactory";
-import { yellow } from "colors";
+import HypothesisManager from "./ApiManagers/HypothesisManager";
+import PDFManager from "./ApiManagers/PDFManager";
+import { SearchManager } from './ApiManagers/SearchManager';
 import SessionManager from "./ApiManagers/SessionManager";
+import UploadManager from "./ApiManagers/UploadManager";
+import UserManager from './ApiManagers/UserManager';
+import UtilManager from './ApiManagers/UtilManager';
+import { GoogleCredentialsLoader, SSL } from './apis/google/CredentialsLoader';
+import { GoogleApiServerUtils } from "./apis/google/GoogleApiServerUtils";
 import { AppliedSessionAgent } from "./DashSession/Session/agents/applied_session_agent";
+import { DashUploadUtils } from './DashUploadUtils';
+import { Database } from './database';
+import { Logger } from "./ProcessFactory";
+import RouteManager, { Method, PublicHandler } from './RouteManager';
+import RouteSubscriber from './RouteSubscriber';
+import initializeServer, { resolvedPorts } from './server_Initialization';
 
 export const AdminPriviliges: Map<string, boolean> = new Map();
 export const onWindows = process.platform === "win32";
diff --git a/src/server/server_Initialization.ts b/src/server/server_Initialization.ts
index 744d4547b..e40f2b8e5 100644
--- a/src/server/server_Initialization.ts
+++ b/src/server/server_Initialization.ts
@@ -1,31 +1,31 @@
+import * as bodyParser from 'body-parser';
+import { blue, yellow } from 'colors';
+import * as cookieParser from 'cookie-parser';
+import * as cors from "cors";
 import * as express from 'express';
-import * as expressValidator from 'express-validator';
 import * as session from 'express-session';
+import * as expressValidator from 'express-validator';
+import * as fs from 'fs';
+import { Server as HttpServer } from "http";
+import { createServer, Server as HttpsServer } from "https";
 import * as passport from 'passport';
-import * as bodyParser from 'body-parser';
-import * as cookieParser from 'cookie-parser';
-import expressFlash = require('express-flash');
-import flash = require('connect-flash');
-import { Database } from './database';
-import { getForgot, getLogin, getLogout, getReset, getSignup, postForgot, postLogin, postReset, postSignup } from './authentication/AuthenticationManager';
-const MongoStore = require('connect-mongo')(session);
-import RouteManager from './RouteManager';
-import { WebSocket } from './websocket';
+import * as request from 'request';
 import * as webpack from 'webpack';
-const config = require('../../webpack.config');
-const compiler = webpack(config);
 import * as wdm from 'webpack-dev-middleware';
 import * as whm from 'webpack-hot-middleware';
-import * as fs from 'fs';
-import * as request from 'request';
-import RouteSubscriber from './RouteSubscriber';
 import { publicDirectory } from '.';
 import { logPort } from './ActionUtilities';
-import { blue, yellow } from 'colors';
-import * as cors from "cors";
-import { createServer, Server as HttpsServer } from "https";
-import { Server as HttpServer } from "http";
 import { SSL } from './apis/google/CredentialsLoader';
+import { getForgot, getLogin, getLogout, getReset, getSignup, postForgot, postLogin, postReset, postSignup } from './authentication/AuthenticationManager';
+import { Database } from './database';
+import RouteManager from './RouteManager';
+import RouteSubscriber from './RouteSubscriber';
+import { WebSocket } from './websocket';
+import expressFlash = require('express-flash');
+import flash = require('connect-flash');
+const MongoStore = require('connect-mongo')(session);
+const config = require('../../webpack.config');
+const compiler = webpack(config);
 
 /* RouteSetter is a wrapper around the server that prevents the server
    from being exposed. */
diff --git a/src/server/websocket.ts b/src/server/websocket.ts
index f63a35e43..d5f89a750 100644
--- a/src/server/websocket.ts
+++ b/src/server/websocket.ts
@@ -1,21 +1,20 @@
-import * as fs from 'fs';
-import { logPort } from './ActionUtilities';
-import { Utils } from "../Utils";
-import { MessageStore, Transferable, Types, Diff, YoutubeQueryInput, YoutubeQueryTypes, GestureContent, MobileInkOverlayContent, UpdateMobileInkOverlayPositionContent, MobileDocumentUploadContent, RoomMessage } from "./Message";
-import { Client } from "./Client";
-import { Socket } from "socket.io";
-import { Database } from "./database";
-import { Search } from "./Search";
-import * as sio from 'socket.io';
-import YoutubeApi from "./apis/youtube/youtubeApiSample";
-import { GoogleCredentialsLoader, SSL } from "./apis/google/CredentialsLoader";
-import { timeMap } from "./ApiManagers/UserManager";
 import { green } from "colors";
+import * as express from "express";
+import { createServer, Server } from "https";
 import { networkInterfaces } from "os";
+import * as sio from 'socket.io';
+import { Socket } from "socket.io";
 import executeImport from "../scraping/buxton/final/BuxtonImporter";
+import { Utils } from "../Utils";
+import { logPort } from './ActionUtilities';
+import { timeMap } from "./ApiManagers/UserManager";
+import { GoogleCredentialsLoader, SSL } from "./apis/google/CredentialsLoader";
+import YoutubeApi from "./apis/youtube/youtubeApiSample";
+import { Client } from "./Client";
+import { Database } from "./database";
 import { DocumentsCollection } from "./IDatabase";
-import { createServer, Server } from "https";
-import * as express from "express";
+import { Diff, GestureContent, MessageStore, MobileDocumentUploadContent, MobileInkOverlayContent, Transferable, Types, UpdateMobileInkOverlayPositionContent, YoutubeQueryInput, YoutubeQueryTypes } from "./Message";
+import { Search } from "./Search";
 import { resolvedPorts } from './server_Initialization';
 
 export namespace WebSocket {
-- 
cgit v1.2.3-70-g09d2


From b3991f16b8e91bc19b5df5430efe3a71b9ad2ac7 Mon Sep 17 00:00:00 2001
From: usodhi <61431818+usodhi@users.noreply.github.com>
Date: Mon, 3 Aug 2020 10:19:25 +0530
Subject: prevented repopulating users while populating users

---
 src/client/util/GroupManager.tsx   | 34 ++++++++++++++++++--------------
 src/client/util/SharingManager.tsx | 40 ++++++++++++++++++++------------------
 2 files changed, 40 insertions(+), 34 deletions(-)

(limited to 'src/client/util')

diff --git a/src/client/util/GroupManager.tsx b/src/client/util/GroupManager.tsx
index 5215ea35f..448e5dc54 100644
--- a/src/client/util/GroupManager.tsx
+++ b/src/client/util/GroupManager.tsx
@@ -42,6 +42,7 @@ export default class GroupManager extends React.Component<{}> {
     private currentUserGroups: string[] = []; // the list of groups the current user is a member of
     @observable private buttonColour: "#979797" | "black" = "#979797";
     @observable private groupSort: "ascending" | "descending" | "none" = "none";
+    private populating: boolean = false;
 
 
 
@@ -62,21 +63,24 @@ export default class GroupManager extends React.Component<{}> {
      * Fetches the list of users stored on the database.
      */
     populateUsers = async () => {
-        runInAction(() => this.users = []);
-        const userList = await RequestPromise.get(Utils.prepend("/getUsers"));
-        const raw = JSON.parse(userList) as User[];
-        const evaluating = raw.map(async user => {
-            const userDocument = await DocServer.GetRefField(user.userDocumentId);
-            if (userDocument instanceof Doc) {
-                const notificationDoc = await Cast(userDocument.rightSidebarCollection, Doc);
-                runInAction(() => {
-                    if (notificationDoc instanceof Doc) {
-                        this.users.push(user.email);
-                    }
-                });
-            }
-        });
-        return Promise.all(evaluating);
+        if (!this.populating) {
+            this.populating = true;
+            runInAction(() => this.users = []);
+            const userList = await RequestPromise.get(Utils.prepend("/getUsers"));
+            const raw = JSON.parse(userList) as User[];
+            const evaluating = raw.map(async user => {
+                const userDocument = await DocServer.GetRefField(user.userDocumentId);
+                if (userDocument instanceof Doc) {
+                    const notificationDoc = await Cast(userDocument.rightSidebarCollection, Doc);
+                    runInAction(() => {
+                        if (notificationDoc instanceof Doc) {
+                            this.users.push(user.email);
+                        }
+                    });
+                }
+            });
+            return Promise.all(evaluating).then(() => this.populating = false);
+        }
     }
 
     /**
diff --git a/src/client/util/SharingManager.tsx b/src/client/util/SharingManager.tsx
index 892fb6d6d..6393170fa 100644
--- a/src/client/util/SharingManager.tsx
+++ b/src/client/util/SharingManager.tsx
@@ -71,8 +71,7 @@ export default class SharingManager extends React.Component<{}> {
     // if both showUserOptions and showGroupOptions are false then both are displayed
     @observable private showUserOptions: boolean = false; // whether to show individuals as options when sharing (in the react-select component)
     @observable private showGroupOptions: boolean = false; // // whether to show groups as options when sharing (in the react-select component)
-
-
+    private populating: boolean = false;
 
     // private get linkVisible() {
     //     return this.sharingDoc ? this.sharingDoc[PublicKey] !== SharingPermissions.None : false;
@@ -119,24 +118,27 @@ export default class SharingManager extends React.Component<{}> {
      * Populates the list of validated users (this.users) by adding registered users which have a rightSidebarCollection.
      */
     populateUsers = async () => {
-        runInAction(() => this.users = []);
-        const userList = await RequestPromise.get(Utils.prepend("/getUsers"));
-        const raw = JSON.parse(userList) as User[];
-        const evaluating = raw.map(async user => {
-            const isCandidate = user.email !== Doc.CurrentUserEmail;
-            if (isCandidate) {
-                const userDocument = await DocServer.GetRefField(user.userDocumentId);
-                if (userDocument instanceof Doc) {
-                    const notificationDoc = await Cast(userDocument.rightSidebarCollection, Doc);
-                    runInAction(() => {
-                        if (notificationDoc instanceof Doc) {
-                            this.users.push({ user, notificationDoc });
-                        }
-                    });
+        if (!this.populating) {
+            this.populating = true;
+            runInAction(() => this.users = []);
+            const userList = await RequestPromise.get(Utils.prepend("/getUsers"));
+            const raw = JSON.parse(userList) as User[];
+            const evaluating = raw.map(async user => {
+                const isCandidate = user.email !== Doc.CurrentUserEmail;
+                if (isCandidate) {
+                    const userDocument = await DocServer.GetRefField(user.userDocumentId);
+                    if (userDocument instanceof Doc) {
+                        const notificationDoc = await Cast(userDocument.rightSidebarCollection, Doc);
+                        runInAction(() => {
+                            if (notificationDoc instanceof Doc) {
+                                this.users.push({ user, notificationDoc });
+                            }
+                        });
+                    }
                 }
-            }
-        });
-        return Promise.all(evaluating);
+            });
+            return Promise.all(evaluating).then(() => this.populating = false);
+        }
     }
 
     /**
-- 
cgit v1.2.3-70-g09d2


From d83959572d55510755f9d6b9e0b456b4b1ad5148 Mon Sep 17 00:00:00 2001
From: usodhi <61431818+usodhi@users.noreply.github.com>
Date: Mon, 3 Aug 2020 11:33:49 +0530
Subject: popup fades on close

---
 src/client/util/GroupManager.tsx   | 11 +++++------
 src/client/util/SharingManager.tsx |  2 +-
 2 files changed, 6 insertions(+), 7 deletions(-)

(limited to 'src/client/util')

diff --git a/src/client/util/GroupManager.tsx b/src/client/util/GroupManager.tsx
index 448e5dc54..b13d8cf5f 100644
--- a/src/client/util/GroupManager.tsx
+++ b/src/client/util/GroupManager.tsx
@@ -124,6 +124,7 @@ export default class GroupManager extends React.Component<{}> {
         this.currentGroup = undefined;
         // this.users = [];
         this.createGroupModalOpen = false;
+        TaskCompletionBox.taskCompleted = false;
     }
 
     /**
@@ -136,7 +137,6 @@ export default class GroupManager extends React.Component<{}> {
     /**
      * @returns a list of all group documents.
      */
-    // private ?
     getAllGroups(): Doc[] {
         const groupDoc = this.GroupManagerDoc;
         return groupDoc ? DocListCast(groupDoc.data) : [];
@@ -146,7 +146,6 @@ export default class GroupManager extends React.Component<{}> {
      * @returns a group document based on the group name.
      * @param groupName 
      */
-    // private?
     getGroup(groupName: string): Doc | undefined {
         const groupDoc = this.getAllGroups().find(group => group.groupName === groupName);
         return groupDoc;
@@ -213,8 +212,6 @@ export default class GroupManager extends React.Component<{}> {
     deleteGroup(group: Doc): boolean {
         if (group) {
             if (this.GroupManagerDoc && this.hasEditAccess(group)) {
-                // TODO look at this later
-                // SharingManager.Instance.setInternalGroupSharing(group, "Not Shared");
                 Doc.RemoveDocFromList(this.GroupManagerDoc, "data", group);
                 SharingManager.Instance.removeGroup(group);
                 const members: string[] = JSON.parse(StrCast(group.members));
@@ -315,7 +312,9 @@ export default class GroupManager extends React.Component<{}> {
             <div className="group-create">
                 <div className="group-heading" style={{ marginBottom: 0 }}>
                     <p><b>New Group</b></p>
-                    <div className={"close-button"} onClick={action(() => this.createGroupModalOpen = false)}>
+                    <div className={"close-button"} onClick={action(() => {
+                        this.createGroupModalOpen = false; TaskCompletionBox.taskCompleted = false;
+                    })}>
                         <FontAwesomeIcon icon={fa.faTimes} color={"black"} size={"lg"} />
                     </div>
                 </div>
@@ -367,7 +366,7 @@ export default class GroupManager extends React.Component<{}> {
                 interactive={true}
                 contents={contents}
                 dialogueBoxStyle={{ width: "90%", height: "70%" }}
-                closeOnExternalClick={action(() => this.createGroupModalOpen = false)}
+                closeOnExternalClick={action(() => { this.createGroupModalOpen = false; TaskCompletionBox.taskCompleted = false; })}
             />
         );
     }
diff --git a/src/client/util/SharingManager.tsx b/src/client/util/SharingManager.tsx
index a3c0a88fa..d2891a772 100644
--- a/src/client/util/SharingManager.tsx
+++ b/src/client/util/SharingManager.tsx
@@ -94,7 +94,7 @@ export default class SharingManager extends React.Component<{}> {
     public close = action(() => {
         this.isOpen = false;
         this.selectedUsers = null; // resets the list of users and seleected users (in the react-select component)
-
+        TaskCompletionBox.taskCompleted = false;
         setTimeout(action(() => {
             // this.copied = false;
             DictationOverlay.Instance.hasActiveModal = false;
-- 
cgit v1.2.3-70-g09d2


From 2331b3a271cc53390d281fa16a553467a3d7a7de Mon Sep 17 00:00:00 2001
From: usodhi <61431818+usodhi@users.noreply.github.com>
Date: Mon, 3 Aug 2020 19:21:40 +0530
Subject: minor changes

---
 src/client/util/GroupManager.tsx   |  2 +-
 src/client/util/SharingManager.tsx | 47 ++++++++++++--------------------------
 2 files changed, 16 insertions(+), 33 deletions(-)

(limited to 'src/client/util')

diff --git a/src/client/util/GroupManager.tsx b/src/client/util/GroupManager.tsx
index b13d8cf5f..c750be1c8 100644
--- a/src/client/util/GroupManager.tsx
+++ b/src/client/util/GroupManager.tsx
@@ -92,7 +92,6 @@ export default class GroupManager extends React.Component<{}> {
                 const members: string[] = JSON.parse(StrCast(group.members));
                 if (members.includes(Doc.CurrentUserEmail)) this.currentUserGroups.push(StrCast(group.groupName));
             });
-
             setGroups(this.currentUserGroups);
         });
     }
@@ -322,6 +321,7 @@ export default class GroupManager extends React.Component<{}> {
                     className="group-input"
                     ref={this.inputRef}
                     onKeyDown={this.handleKeyDown}
+                    autoFocus
                     type="text"
                     placeholder="Group name"
                     onChange={action(() => this.buttonColour = this.inputRef.current?.value ? "black" : "#979797")} />
diff --git a/src/client/util/SharingManager.tsx b/src/client/util/SharingManager.tsx
index d2891a772..30bed9cb9 100644
--- a/src/client/util/SharingManager.tsx
+++ b/src/client/util/SharingManager.tsx
@@ -1,7 +1,7 @@
 import { observable, runInAction, action } from "mobx";
 import * as React from "react";
 import MainViewModal from "../views/MainViewModal";
-import { Doc, Opt, DocListCastAsync, AclAdmin, DataSym, AclPrivate } from "../../fields/Doc";
+import { Doc, Opt, AclAdmin, AclPrivate, DocListCast } from "../../fields/Doc";
 import { DocServer } from "../DocServer";
 import { Cast, StrCast } from "../../fields/Types";
 import * as RequestPromise from "request-promise";
@@ -156,13 +156,11 @@ export default class SharingManager extends React.Component<{}> {
         target.author === Doc.CurrentUserEmail && distributeAcls(ACL, permission as SharingPermissions, target);
 
         // if documents have been shared, add the target to that list if it doesn't already exist, otherwise create a new list with the target
-        group.docsShared ? DocListCastAsync(group.docsShared).then(resolved => Doc.IndexOf(target, resolved!) === -1 && (group.docsShared as List<Doc>).push(target)) : group.docsShared = new List<Doc>([target]);
+        group.docsShared ? Doc.IndexOf(target, DocListCast(group.docsShared)) === -1 && (group.docsShared as List<Doc>).push(target) : group.docsShared = new List<Doc>([target]);
 
         users.forEach(({ notificationDoc }) => {
-            DocListCastAsync(notificationDoc[storage]).then(resolved => {
-                if (permission !== SharingPermissions.None) Doc.IndexOf(target, resolved!) === -1 && Doc.AddDocToList(notificationDoc, storage, target); // add the target to the notificationDoc if it hasn't already been added
-                else Doc.IndexOf(target, resolved!) !== -1 && Doc.RemoveDocFromList(notificationDoc, storage, target); // remove the target from the list if it already exists
-            });
+            if (permission !== SharingPermissions.None) Doc.IndexOf(target, DocListCast(notificationDoc[storage])) === -1 && Doc.AddDocToList(notificationDoc, storage, target); // add the target to the notificationDoc if it hasn't already been added
+            else Doc.IndexOf(target, DocListCast(notificationDoc[storage])) !== -1 && Doc.RemoveDocFromList(notificationDoc, storage, target); // remove the target from the list if it already exists
         });
     }
 
@@ -174,13 +172,7 @@ export default class SharingManager extends React.Component<{}> {
     shareWithAddedMember = (group: Doc, emailId: string) => {
         const user: ValidatedUser = this.users.find(({ user: { email } }) => email === emailId)!;
 
-        if (group.docsShared) {
-            DocListCastAsync(group.docsShared).then(docsShared => {
-                docsShared?.forEach(doc => {
-                    DocListCastAsync(user.notificationDoc[storage]).then(resolved => Doc.IndexOf(doc, resolved!) === -1 && Doc.AddDocToList(user.notificationDoc, storage, doc)); // add the doc if it isn't already in the list
-                });
-            });
-        }
+        if (group.docsShared) DocListCast(group.docsShared).forEach(doc => Doc.IndexOf(doc, DocListCast(user.notificationDoc[storage])) === -1 && Doc.AddDocToList(user.notificationDoc, storage, doc));
     }
 
     /**
@@ -192,10 +184,8 @@ export default class SharingManager extends React.Component<{}> {
         const user: ValidatedUser = this.users.find(({ user: { email } }) => email === emailId)!;
 
         if (group.docsShared) {
-            DocListCastAsync(group.docsShared).then(docsShared => {
-                docsShared?.forEach(doc => {
-                    DocListCastAsync(user.notificationDoc[storage]).then(resolved => Doc.IndexOf(doc, resolved!) !== -1 && Doc.RemoveDocFromList(user.notificationDoc, storage, doc)); // remove the doc only if it is in the list
-                });
+            DocListCast(group.docsShared).forEach(doc => {
+                Doc.IndexOf(doc, DocListCast(user.notificationDoc[storage])) !== -1 && Doc.RemoveDocFromList(user.notificationDoc, storage, doc); // remove the doc only if it is in the list
             });
         }
     }
@@ -206,18 +196,15 @@ export default class SharingManager extends React.Component<{}> {
      */
     removeGroup = (group: Doc) => {
         if (group.docsShared) {
-            DocListCastAsync(group.docsShared).then(resolved => {
-                resolved?.forEach(doc => {
-                    const ACL = `ACL-${StrCast(group.groupName)}`;
-
-                    distributeAcls(ACL, SharingPermissions.None, doc);
+            DocListCast(group.docsShared).forEach(doc => {
+                const ACL = `ACL-${StrCast(group.groupName)}`;
 
-                    const members: string[] = JSON.parse(StrCast(group.members));
-                    const users: ValidatedUser[] = this.users.filter(({ user: { email } }) => members.includes(email));
+                distributeAcls(ACL, SharingPermissions.None, doc);
 
-                    users.forEach(({ notificationDoc }) => Doc.RemoveDocFromList(notificationDoc, storage, doc));
-                });
+                const members: string[] = JSON.parse(StrCast(group.members));
+                const users: ValidatedUser[] = this.users.filter(({ user: { email } }) => members.includes(email));
 
+                users.forEach(({ notificationDoc }) => Doc.RemoveDocFromList(notificationDoc, storage, doc));
             });
         }
     }
@@ -231,14 +218,10 @@ export default class SharingManager extends React.Component<{}> {
         target.author === Doc.CurrentUserEmail && distributeAcls(ACL, permission as SharingPermissions, target);
 
         if (permission !== SharingPermissions.None) {
-            DocListCastAsync(notificationDoc[storage]).then(resolved => {
-                Doc.IndexOf(target, resolved!) === -1 && Doc.AddDocToList(notificationDoc, storage, target);
-            });
+            Doc.IndexOf(target, DocListCast(notificationDoc[storage])) === -1 && Doc.AddDocToList(notificationDoc, storage, target);
         }
         else {
-            DocListCastAsync(notificationDoc[storage]).then(resolved => {
-                Doc.IndexOf(target, resolved!) !== -1 && Doc.RemoveDocFromList(notificationDoc, storage, target);
-            });
+            Doc.IndexOf(target, DocListCast(notificationDoc[storage])) !== -1 && Doc.RemoveDocFromList(notificationDoc, storage, target);
         }
     }
 
-- 
cgit v1.2.3-70-g09d2


From 3bbabb64695650fc632fdf88286094f457adb838 Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Mon, 3 Aug 2020 23:50:22 -0400
Subject: starting to cleanup search

---
 src/client/util/CurrentUserUtils.ts                | 33 ++--------
 src/client/util/SearchUtil.ts                      |  1 -
 src/client/views/MainView.tsx                      | 70 ----------------------
 .../views/collections/CollectionSchemaCells.tsx    |  9 ---
 .../views/collections/CollectionSchemaHeaders.tsx  | 10 ----
 .../views/collections/CollectionSchemaView.tsx     | 24 +++-----
 src/client/views/collections/CollectionSubView.tsx |  3 -
 src/client/views/nodes/LabelBox.tsx                |  1 -
 src/client/views/nodes/WebBox.tsx                  |  2 +-
 src/client/views/pdf/PDFViewer.tsx                 |  3 -
 10 files changed, 16 insertions(+), 140 deletions(-)

(limited to 'src/client/util')

diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index 12e48ae13..048b5fe76 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -414,9 +414,9 @@ export class CurrentUserUtils {
             doc.emptyButton = Docs.Create.ButtonDocument({ _width: 150, _height: 50, _xPadding: 10, _yPadding: 10, title: "Button" });
         }
         if (doc.emptyDocHolder === undefined) {
-            // doc.emptyDocHolder = Docs.Create.DocumentDocument(
-            //     ComputedField.MakeFunction("selectedDocs(this,this.excludeCollections,[_last_])?.[0]") as any,
-            //     { _width: 250, _height: 250, title: "container" });
+            doc.emptyDocHolder = Docs.Create.DocumentDocument(
+                ComputedField.MakeFunction("selectedDocs(this,this.excludeCollections,[_last_])?.[0]") as any,
+                { _width: 250, _height: 250, title: "container" });
         }
         if (doc.emptyWebpage === undefined) {
             doc.emptyWebpage = Docs.Create.WebDocument("", { title: "webpage", _nativeWidth: 850, _nativeHeight: 962, _width: 600, UseCors: true });
@@ -647,7 +647,7 @@ export class CurrentUserUtils {
 
     // setup the Creator button which will display the creator panel.  This panel will include the drag creators and the color picker.
     // when clicked, this panel will be displayed in the target container (ie, sidebarContainer)
-    static async setupToolsBtnPanel(doc: Doc, sidebarContainer: Doc) {
+    static async setupToolsBtnPanel(doc: Doc) {
         // setup a masonry view of all he creators
         const creatorBtns = await CurrentUserUtils.setupCreatorButtons(doc);
         const templateBtns = CurrentUserUtils.setupUserTemplateButtons(doc);
@@ -746,20 +746,7 @@ export class CurrentUserUtils {
         }
     }
 
-    // setup the Search button which will display the search panel.
-    static setupSearchBtnPanel(doc: Doc, sidebarContainer: Doc) {
-        if (doc["tabs-button-search"] === undefined) {
-            doc["tabs-button-search"] = new PrefetchProxy(Docs.Create.ButtonDocument({
-                _width: 50, _height: 25, title: "Search", _fontSize: "10pt",
-                letterSpacing: "0px", textTransform: "unset", borderRounding: "5px 5px 0px 0px", boxShadow: "3px 3px 0px rgb(34, 34, 34)",
-                sourcePanel: new PrefetchProxy(Docs.Create.SearchDocument({ ignoreClick: true, childDropAction: "alias", lockedPosition: true, _viewType: CollectionViewType.Schema, title: "sidebar search stack", })) as any as Doc,
-                searchFileTypes: new List<string>([DocumentType.RTF, DocumentType.IMG, DocumentType.PDF, DocumentType.VID, DocumentType.WEB, DocumentType.SCRIPTING]),
-                targetContainer: new PrefetchProxy(sidebarContainer) as any as Doc,
-                lockedPosition: true,
-                onClick: ScriptField.MakeScript("this.targetContainer.proto = this.sourcePanel")
-            }));
-        }
-    }
+
     static setupUserDoc(doc: Doc) {
         if (doc["sidebar-userDoc"] === undefined) {
             doc.treeViewOpen = true;
@@ -784,15 +771,7 @@ export class CurrentUserUtils {
 
     // setup the list of sidebar mode buttons which determine what is displayed in the sidebar
     static async setupSidebarButtons(doc: Doc) {
-        const sidebarContainer = CurrentUserUtils.setupSidebarContainer(doc);
-        const toolsBtn = await CurrentUserUtils.setupToolsBtnPanel(doc, sidebarContainer);
-        const searchBtn = CurrentUserUtils.setupSearchBtnPanel(doc, sidebarContainer);
-        if (doc["search-panel"] === undefined) {
-            doc["search-panel"] = new PrefetchProxy(Docs.Create.SearchDocument({ _width: 500, _height: 400, backgroundColor: "dimGray", ignoreClick: true, childDropAction: "alias", lockedPosition: true, _viewType: CollectionViewType.Schema, _chromeStatus: "disabled", title: "sidebar search stack", })) as any as Doc;
-        }
-
-
-        await CurrentUserUtils.setupToolsBtnPanel(doc, sidebarContainer);
+        await CurrentUserUtils.setupToolsBtnPanel(doc);
         CurrentUserUtils.setupWorkspaces(doc);
         CurrentUserUtils.setupCatalog(doc);
         CurrentUserUtils.setupRecentlyClosed(doc);
diff --git a/src/client/util/SearchUtil.ts b/src/client/util/SearchUtil.ts
index f54e13197..7b2c601fe 100644
--- a/src/client/util/SearchUtil.ts
+++ b/src/client/util/SearchUtil.ts
@@ -4,7 +4,6 @@ import { Doc } from '../../fields/Doc';
 import { Id } from '../../fields/FieldSymbols';
 import { Utils } from '../../Utils';
 import { DocumentType } from '../documents/DocumentTypes';
-import { StringMap } from 'libxmljs';
 
 export namespace SearchUtil {
     export type HighlightingResult = { [id: string]: { [key: string]: string[] } };
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index 03f624038..923036eae 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -80,7 +80,6 @@ export class MainView extends React.Component {
     @computed private get userDoc() { return Doc.UserDoc(); }
     @computed private get mainContainer() { return this.userDoc ? FieldValue(Cast(this.userDoc.activeWorkspace, Doc)) : CurrentUserUtils.GuestWorkspace; }
     @computed public get mainFreeform(): Opt<Doc> { return (docs => (docs && docs.length > 1) ? docs[1] : undefined)(DocListCast(this.mainContainer!.data)); }
-    @computed public get sidebarButtonsDoc() { return Cast(this.userDoc["tabs-buttons"], Doc) as Doc; }
     @computed public get searchDoc() { return Cast(this.userDoc["search-panel"], Doc) as Doc; }
 
 
@@ -356,38 +355,6 @@ export class MainView extends React.Component {
         }
     }
 
-    // @computed get search() {
-    //     return <DocumentView Document={this.searchDoc!}
-    //         DataDoc={undefined}
-    //         LibraryPath={emptyPath}
-    //         addDocument={undefined}
-    //         addDocTab={this.addDocTabFunc}
-    //         pinToPres={emptyFunction}
-    //         rootSelected={returnTrue}
-    //         onClick={undefined}
-    //         backgroundColor={this.defaultBackgroundColors}
-    //         removeDocument={undefined}
-    //         ScreenToLocalTransform={Transform.Identity}
-    //         ContentScaling={returnOne}
-    //         NativeHeight={returnZero}
-    //         NativeWidth={returnZero}
-    //         PanelWidth={this.getPWidth}
-    //         PanelHeight={this.getPHeight}
-    //         renderDepth={0}
-    //         focus={emptyFunction}
-    //         parentActive={returnTrue}
-    //         whenActiveChanged={emptyFunction}
-    //         bringToFront={emptyFunction}
-    //         docFilters={returnEmptyFilter}
-    //         ContainingCollectionView={undefined}
-    //         ContainingCollectionDoc={undefined}
-    //     />;
-    // }
-
-
-
-
-
     @computed get mainDocView() {
         return <DocumentView
             Document={this.mainContainer!}
@@ -640,45 +607,8 @@ export class MainView extends React.Component {
     }
 
     @computed get mainContent() {
-        //const n = (RichTextMenu.Instance?.Pinned ? 1 : 0) + (CollectionMenu.Instance?.Pinned ? 1 : 0);
         const n = (CollectionMenu.Instance?.Pinned ? 1 : 0);
         const height = `calc(100% - ${n * Number(ANTIMODEMENU_HEIGHT.replace("px", ""))}px)`;
-        // return !this.userDoc || !(sidebar instanceof Doc) ? (null) : (
-        //     <div>
-        //         <div style={{ height: "32px", width: "100%", backgroundColor: "black" }}>
-        //             {this.search}
-        //         </div>
-        //         <div className="mainView-mainContent" style={{
-        //             color: this.darkScheme ? "rgb(205,205,205)" : "black",
-        //             //change to times 2 for both pinned
-        //             height,
-        //             width: (FormatShapePane.Instance?.Pinned) ? `calc(100% - 200px)` : "100%"
-        //         }} >
-        //             <div style={{ display: "contents", flexDirection: "row", position: "relative" }}>
-        //                 <div className="mainView-flyoutContainer" onPointerLeave={this.pointerLeaveDragger} style={{ width: this.flyoutWidth }}>
-        //                     <div className="mainView-libraryHandle" onPointerDown={this.onPointerDown}
-        //                         style={{ backgroundColor: this.defaultBackgroundColors(sidebar) }}>
-        //                         <span title="library View Dragger" style={{
-        //                             width: (this.flyoutWidth !== 0 && this._flyoutTranslate) ? "100%" : "3vw",
-        //                             //height: (this.flyoutWidth !== 0 && this._flyoutTranslate) ? "100%" : "100vh",
-        //                             position: (this.flyoutWidth !== 0 && this._flyoutTranslate) ? "absolute" : "fixed",
-        //                             top: (this.flyoutWidth !== 0 && this._flyoutTranslate) ? "" : "0"
-        //                         }} />
-        //                     </div>
-        //                     <div className="mainView-libraryFlyout" style={{
-        //                         //transformOrigin: this._flyoutTranslate ? "" : "left center",
-        //                         transition: this._flyoutTranslate ? "" : "width .5s",
-        //                         //transform: `scale(${this._flyoutTranslate ? 1 : 0.8})`,
-        //                         boxShadow: this._flyoutTranslate ? "" : "rgb(156, 147, 150) 0.2vw 0.2vw 0.8vw"
-        //                     }}>
-        //                         {this.flyout}
-        //                         {this.expandButton}
-        //                     </div>
-        //                 </div>
-        //                 {this.dockingContent}
-        //             </div>
-        //         </div>
-        //     </div>);
         const pinned = FormatShapePane.Instance?.Pinned;
         const innerContent = this.mainInnerContent;
         return !this.userDoc ? (null) : (
diff --git a/src/client/views/collections/CollectionSchemaCells.tsx b/src/client/views/collections/CollectionSchemaCells.tsx
index e50f95dca..ecd20eb06 100644
--- a/src/client/views/collections/CollectionSchemaCells.tsx
+++ b/src/client/views/collections/CollectionSchemaCells.tsx
@@ -32,7 +32,6 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import DatePicker from "react-datepicker";
 import "react-datepicker/dist/react-datepicker.css";
 import { DateField } from "../../../fields/DateField";
-import { indexOf } from "lodash";
 const path = require('path');
 
 library.add(faExpand);
@@ -292,9 +291,6 @@ export class CollectionSchemaCell extends React.Component<CellProps> {
                             maxHeight={Number(MAX_ROW_HEIGHT)}
                             placeholder={"enter value"}
                             bing={() => {
-                                // if (type === "number" && (contents === 0 || contents === "0")) {
-                                //     return "0";
-                                // } else {
                                 const cfield = ComputedField.WithoutComputed(() => FieldValue(props.Document[props.fieldKey]));
                                 if (cfield !== undefined) {
                                     if (cfield.Text !== undefined) {
@@ -307,11 +303,6 @@ export class CollectionSchemaCell extends React.Component<CellProps> {
                                         return String(NumCast(cfield));
                                     }
                                 }
-                                // console.log(cfield.Text);
-                                // console.log(StrCast(cfield));
-                                // return StrCast(cfield);
-                                // }
-
                             }}
                             GetValue={() => {
                                 if (type === "number" && (contents === 0 || contents === "0")) {
diff --git a/src/client/views/collections/CollectionSchemaHeaders.tsx b/src/client/views/collections/CollectionSchemaHeaders.tsx
index a979f9838..5d7ab2c61 100644
--- a/src/client/views/collections/CollectionSchemaHeaders.tsx
+++ b/src/client/views/collections/CollectionSchemaHeaders.tsx
@@ -78,14 +78,6 @@ export class CollectionSchemaAddColumnHeader extends React.Component<AddColumnHe
 
 
 
-
-
-
-
-
-
-
-
 export interface ColumnMenuProps {
     columnField: SchemaHeaderField;
     // keyValue: string;
@@ -330,8 +322,6 @@ export class KeysDropdown extends React.Component<KeysDropdownProps> {
 
     @undoBatch
     onKeyDown = (e: React.KeyboardEvent): void => {
-        //if (this._key !==)
-
         if (e.key === "Enter") {
             const keyOptions = this._searchTerm === "" ? this.props.possibleKeys : this.props.possibleKeys.filter(key => key.toUpperCase().indexOf(this._searchTerm.toUpperCase()) > -1);
             if (keyOptions.length) {
diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx
index b93a7f7b8..869be2b03 100644
--- a/src/client/views/collections/CollectionSchemaView.tsx
+++ b/src/client/views/collections/CollectionSchemaView.tsx
@@ -4,27 +4,26 @@ import { faCog, faPlus, faSortDown, faSortUp, faTable } from '@fortawesome/free-
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { action, computed, observable, untracked } from "mobx";
 import { observer } from "mobx-react";
+import Measure from "react-measure";
 import { Resize } from "react-table";
 import "react-table/react-table.css";
-import { Doc, DocCastAsync } from "../../../fields/Doc";
+import { Doc } from "../../../fields/Doc";
 import { List } from "../../../fields/List";
 import { listSpec } from "../../../fields/Schema";
-import { SchemaHeaderField, PastelSchemaPalette } from "../../../fields/SchemaHeaderField";
-import { Cast, NumCast, StrCast } from "../../../fields/Types";
-import { Docs, DocumentOptions } from "../../documents/Documents";
+import { PastelSchemaPalette, SchemaHeaderField } from "../../../fields/SchemaHeaderField";
+import { Cast, NumCast } from "../../../fields/Types";
+import { TraceMobx } from "../../../fields/util";
+import { emptyFunction, returnFalse, returnOne, returnZero, setupMoveUpEvents } from "../../../Utils";
+import { SnappingManager } from "../../util/SnappingManager";
 import { Transform } from "../../util/Transform";
 import { undoBatch } from "../../util/UndoManager";
 import { COLLECTION_BORDER_WIDTH } from '../../views/globalCssVariables.scss';
 import '../DocumentDecorations.scss';
+import { ContentFittingDocumentView } from "../nodes/ContentFittingDocumentView";
 import { KeysDropdown } from "./CollectionSchemaHeaders";
 import "./CollectionSchemaView.scss";
 import { CollectionSubView } from "./CollectionSubView";
-import { ContentFittingDocumentView } from "../nodes/ContentFittingDocumentView";
-import { setupMoveUpEvents, emptyFunction, returnZero, returnOne, returnFalse } from "../../../Utils";
-import { SnappingManager } from "../../util/SnappingManager";
-import Measure from "react-measure";
 import { SchemaTable } from "./SchemaTable";
-import { TraceMobx } from "../../../fields/util";
 
 library.add(faCog, faPlus, faSortUp, faSortDown);
 library.add(faTable);
@@ -170,9 +169,7 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) {
     @action
     setColumnSort = (columnField: SchemaHeaderField, descending: boolean | undefined) => {
         const columns = this.columns;
-        columns.forEach(col => {
-            col.setDesc(undefined);
-        })
+        columns.forEach(col => col.setDesc(undefined));
 
         const index = columns.findIndex(c => c.heading === columnField.heading);
         const column = columns[index];
@@ -330,8 +327,6 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) {
                     columns[index] = column;
                     this.columns = columns;
                     if (filter) {
-                        console.log(newKey);
-                        console.log(filter);
                         Doc.setDocFilter(this.props.Document, newKey, filter, "match");
                         if (this.props.Document.selectedDoc !== undefined) {
                             let doc = Cast(this.props.Document.selectedDoc, Doc) as Doc;
@@ -462,7 +457,6 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) {
                 this.props.select(false);
             }
         }
-        console.log("yeeeet");
     }
 
     @computed
diff --git a/src/client/views/collections/CollectionSubView.tsx b/src/client/views/collections/CollectionSubView.tsx
index ab28e1904..88241f519 100644
--- a/src/client/views/collections/CollectionSubView.tsx
+++ b/src/client/views/collections/CollectionSubView.tsx
@@ -130,10 +130,7 @@ export function CollectionSubView<T, X>(schemaCtor: (doc: Doc) => T, moreProps?:
             let childDocs = viewSpecScript ? docs.filter(d => viewSpecScript.script.run({ doc: d }, console.log).result) : docs;
 
             const searchDocs = DocListCast(this.props.Document._searchDocs);
-            console.log(this.props.Document);
-            console.log(searchDocs);
             if (searchDocs !== undefined && searchDocs.length > 0) {
-                console.log("yes");
                 childDocs = searchDocs;
             }
             const docFilters = this.docFilters();
diff --git a/src/client/views/nodes/LabelBox.tsx b/src/client/views/nodes/LabelBox.tsx
index 983470f9d..302d66cc5 100644
--- a/src/client/views/nodes/LabelBox.tsx
+++ b/src/client/views/nodes/LabelBox.tsx
@@ -69,7 +69,6 @@ export class LabelBox extends ViewBoxBaseComponent<FieldViewProps, LabelDocument
         const params = Cast(this.paramsDoc["onClick-paramFieldKeys"], listSpec("string"), []);
         const missingParams = params?.filter(p => !this.paramsDoc[p]);
         params?.map(p => DocListCast(this.paramsDoc[p])); // bcz: really hacky form of prefetching ... 
-        console.log(this.backColor);
         return (
             <div className="labelBox-outerDiv" onClick={() => runInAction(() => { this.clicked = !this.clicked; this.clicked ? this.backColor = StrCast(this.layoutDoc.hovercolor) : this.backColor = "unset" })} onMouseLeave={() => runInAction(() => { !this.clicked ? this.backColor = "unset" : null })}
                 onMouseOver={() => runInAction(() => { this.backColor = StrCast(this.layoutDoc.hovercolor); })} ref={this.createDropTarget} onContextMenu={this.specificContextMenu}
diff --git a/src/client/views/nodes/WebBox.tsx b/src/client/views/nodes/WebBox.tsx
index 1313bded7..646a94aa7 100644
--- a/src/client/views/nodes/WebBox.tsx
+++ b/src/client/views/nodes/WebBox.tsx
@@ -139,7 +139,7 @@ export class WebBox extends ViewBoxAnnotatableComponent<FieldViewProps, WebDocum
         } else if (field?.url) {
             const result = await WebRequest.get(Utils.CorsProxy(field.url.href));
             if (result) {
-                this.props.Document.text = htmlToText.fromString(result.content);
+                this.dataDoc.text = htmlToText.fromString(result.content);
             }
         }
     }
diff --git a/src/client/views/pdf/PDFViewer.tsx b/src/client/views/pdf/PDFViewer.tsx
index 7ab2876da..7f31931a9 100644
--- a/src/client/views/pdf/PDFViewer.tsx
+++ b/src/client/views/pdf/PDFViewer.tsx
@@ -329,10 +329,7 @@ export class PDFViewer extends ViewBoxAnnotatableComponent<IViewerProps, PdfDocu
     }
     @action
     prevAnnotation = () => {
-        console.log(this.Index);
         this.Index = Math.max(this.Index - 1, 0);
-        console.log(this.Index);
-        console.log(this.allAnnotations);
         this.scrollToAnnotation(this.allAnnotations.sort((a, b) => NumCast(a.y) - NumCast(b.y))[this.Index]);
     }
 
-- 
cgit v1.2.3-70-g09d2


From 13c85ceb6637e5dbecbc1a9be3dd5915b3e4b95d Mon Sep 17 00:00:00 2001
From: usodhi <61431818+usodhi@users.noreply.github.com>
Date: Tue, 4 Aug 2020 17:32:13 +0530
Subject: owner's acl set when sharing menu opened

---
 src/client/util/SharingManager.tsx |  7 +++++--
 src/client/views/DocComponent.tsx  | 11 +++++------
 2 files changed, 10 insertions(+), 8 deletions(-)

(limited to 'src/client/util')

diff --git a/src/client/util/SharingManager.tsx b/src/client/util/SharingManager.tsx
index adfc8c2bf..97f94692d 100644
--- a/src/client/util/SharingManager.tsx
+++ b/src/client/util/SharingManager.tsx
@@ -88,7 +88,7 @@ export default class SharingManager extends React.Component<{}> {
             this.isOpen = true;
             this.permissions = SharingPermissions.Edit;
         });
-
+        this.targetDoc!.author === Doc.CurrentUserEmail && !this.targetDoc![`ACL-${Doc.CurrentUserEmail.replace(".", "_")}`] && distributeAcls(`ACL-${Doc.CurrentUserEmail.replace(".", "_")}`, SharingPermissions.Admin, this.targetDoc!);
     }
 
     public close = action(() => {
@@ -221,7 +221,10 @@ export default class SharingManager extends React.Component<{}> {
         const key = user.email.replace('.', '_');
         const ACL = `ACL-${key}`;
 
-        target.author === Doc.CurrentUserEmail && distributeAcls(ACL, permission as SharingPermissions, target);
+
+        if (target.author === Doc.CurrentUserEmail) {
+            distributeAcls(ACL, permission as SharingPermissions, target);
+        }
 
         if (permission !== SharingPermissions.None) {
             Doc.IndexOf(target, DocListCast(notificationDoc[storage])) === -1 && Doc.AddDocToList(notificationDoc, storage, target);
diff --git a/src/client/views/DocComponent.tsx b/src/client/views/DocComponent.tsx
index 34144d3eb..831c246d1 100644
--- a/src/client/views/DocComponent.tsx
+++ b/src/client/views/DocComponent.tsx
@@ -1,4 +1,4 @@
-import { Doc, Opt, DataSym, AclReadonly, AclAddonly, AclPrivate, AclEdit, AclSym, DocListCastAsync, DocListCast } from '../../fields/Doc';
+import { Doc, Opt, DataSym, AclReadonly, AclAddonly, AclPrivate, AclEdit, AclSym, DocListCastAsync, DocListCast, AclAdmin } from '../../fields/Doc';
 import { Touchable } from './Touchable';
 import { computed, action, observable } from 'mobx';
 import { Cast, BoolCast, ScriptCast } from '../../fields/Types';
@@ -7,7 +7,7 @@ import { InteractionUtils } from '../util/InteractionUtils';
 import { List } from '../../fields/List';
 import { DateField } from '../../fields/DateField';
 import { ScriptField } from '../../fields/ScriptField';
-import { GetEffectiveAcl, SharingPermissions } from '../../fields/util';
+import { GetEffectiveAcl, SharingPermissions, distributeAcls } from '../../fields/util';
 
 
 ///  DocComponent returns a generic React base class used by views that don't have 'fieldKey' props (e.g.,CollectionFreeFormDocumentView, DocumentView)
@@ -96,7 +96,8 @@ export function ViewBoxAnnotatableComponent<P extends ViewBoxAnnotatableProps, T
             [AclPrivate, SharingPermissions.None],
             [AclReadonly, SharingPermissions.View],
             [AclAddonly, SharingPermissions.Add],
-            [AclEdit, SharingPermissions.Edit]
+            [AclEdit, SharingPermissions.Edit],
+            [AclAdmin, SharingPermissions.Admin]
         ]);
 
         lookupField = (field: string) => ScriptCast((this.layoutDoc as any).lookupField)?.script.run({ self: this.layoutDoc, data: this.rootDoc, field: field }).result;
@@ -156,10 +157,8 @@ export function ViewBoxAnnotatableComponent<P extends ViewBoxAnnotatableProps, T
                 else {
                     if (this.props.Document[AclSym]) {
                         added.forEach(d => {
-                            const dataDoc = d[DataSym];
-                            dataDoc[AclSym] = d[AclSym] = this.props.Document[AclSym];
                             for (const [key, value] of Object.entries(this.props.Document[AclSym])) {
-                                dataDoc[key] = d[key] = this.AclMap.get(value);
+                                distributeAcls(key, this.AclMap.get(value) as SharingPermissions, d, true);
                             }
                         });
                     }
-- 
cgit v1.2.3-70-g09d2


From 58a322592f13bb37c369957b0141f53469d0d100 Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Tue, 4 Aug 2020 10:59:28 -0400
Subject: moved filter to an icon

---
 src/client/util/CurrentUserUtils.ts   |  3 +++
 src/client/views/search/SearchBox.tsx | 45 ++++++++++++++++-------------------
 2 files changed, 23 insertions(+), 25 deletions(-)

(limited to 'src/client/util')

diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index 048b5fe76..4b2f8d0f6 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -894,6 +894,9 @@ export class CurrentUserUtils {
         doc["constants-snapThreshold"] = NumCast(doc["constants-snapThreshold"], 10); //
         doc["constants-dragThreshold"] = NumCast(doc["constants-dragThreshold"], 4); //
         Utils.DRAG_THRESHOLD = NumCast(doc["constants-dragThreshold"]);
+        if (doc["search-panel"] === undefined) {
+            doc["search-panel"] = new PrefetchProxy(Docs.Create.SearchDocument({ _width: 500, _height: 400, backgroundColor: "dimGray", ignoreClick: true, childDropAction: "alias", lockedPosition: true, _viewType: CollectionViewType.Schema, _chromeStatus: "disabled", title: "sidebar search stack", })) as any as Doc;
+        }
         this.setupDefaultIconTemplates(doc);  // creates a set of icon templates triggered by the document deoration icon
         this.setupDocTemplates(doc); // sets up the template menu of templates
         this.setupRightSidebar(doc);  // sets up the right sidebar collection for mobile upload documents and sharing
diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx
index 3b93b028e..2cb910f8b 100644
--- a/src/client/views/search/SearchBox.tsx
+++ b/src/client/views/search/SearchBox.tsx
@@ -1036,11 +1036,28 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
                     <div style={{ position: "absolute", left: 15 }}>{Doc.CurrentUserEmail}</div>
                     <div style={{ display: "flex", alignItems: "center" }}>
                         <FontAwesomeIcon onPointerDown={SetupDrag(this.collectionRef, () => StrCast(this.layoutDoc._searchString) ? this.startDragCollection() : undefined)} icon={"search"} size="lg"
-                            style={{ color: "black", left: 24, padding: 1, position: "relative" }} />
-
+                            style={{ color: "black", padding: 1, left: 35, position: "relative" }} />
+
+                        <FontAwesomeIcon icon={"filter"} size="lg"
+                            style={{ 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.scale;
+                                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) {
+                                    this.currentSelectedCollection.props.Document._searchDocs = new List<Doc>([]);
+                                    this.currentSelectedCollection.props.Document._docFilters = undefined;
+                                    this.props.Document.selectedDoc = undefined;
+                                }
+                            }
+                            )} />
                         <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, color: "black", height: 20, width: 200 }} />
+                            style={{ padding: 1, paddingLeft: 20, paddingRight: 20, color: "black", height: 20, width: 250 }} />
                         <div style={{
                             height: 25,
                             paddingLeft: "4px",
@@ -1050,28 +1067,6 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
                             borderBottom: this.open === false ? "1px solid" : "none",
                         }}>
                             <form className="beta" style={{ justifyContent: "space-evenly", display: "flex" }}>
-                                <div className="checkbox" style={{ margin: 0 }}>
-                                    <label style={{ fontSize: 12, marginTop: 6 }}>
-                                        <input style={{ marginLeft: -16, marginTop: -1, color: this.scale == false ? "black" : "grey" }} checked={this.filter === true} onChange={() => {
-                                            runInAction(() => {
-                                                if (this.scale === false) {
-                                                    this.filter = !this.filter;
-                                                    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) {
-                                                        this.currentSelectedCollection.props.Document._searchDocs = new List<Doc>([]);
-                                                        this.currentSelectedCollection.props.Document._docFilters = undefined;
-                                                        this.props.Document.selectedDoc = undefined;
-                                                    }
-                                                }
-                                            })
-                                        }} type="checkbox"></input>
-                                            Filter
-                                        </label>
-                                </div>
                                 <div style={{ display: "contents" }}>
                                     <div className="radio" style={{ margin: 0 }}>
                                         <label style={{ fontSize: 12, marginTop: 6 }} >
-- 
cgit v1.2.3-70-g09d2


From a877769b004eb7cd3563167562b084cf64dc8b65 Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Tue, 4 Aug 2020 14:49:23 -0400
Subject: fixed initializiing sidebar in currentuserutils.

---
 src/client/util/CurrentUserUtils.ts | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

(limited to 'src/client/util')

diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index 84cd4823b..ebef07e38 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -778,6 +778,7 @@ export class CurrentUserUtils {
         CurrentUserUtils.setupCatalog(doc);
         CurrentUserUtils.setupRecentlyClosed(doc);
         CurrentUserUtils.setupUserDoc(doc);
+        this.setupSidebarContainer(doc);
     }
 
     static blist = (opts: DocumentOptions, docs: Doc[]) => new PrefetchProxy(Docs.Create.LinearDocument(docs, {
@@ -825,9 +826,9 @@ export class CurrentUserUtils {
     }
 
     // Right sidebar is where mobile uploads are contained
-    static setupRightSidebar(doc: Doc) {
+    static setupSharingSidebar(doc: Doc) {
         if (doc["sidebar-sharing"] === undefined) {
-            doc["sidebar-sharing"] = new PrefetchProxy(Docs.Create.StackingDocument([], { title: "Mobile Uploads" }));
+            doc["sidebar-sharing"] = new PrefetchProxy(Docs.Create.StackingDocument([], { title: "Sharing Sidebar" }));
         }
     }
 
@@ -901,7 +902,7 @@ export class CurrentUserUtils {
         }
         this.setupDefaultIconTemplates(doc);  // creates a set of icon templates triggered by the document deoration icon
         this.setupDocTemplates(doc); // sets up the template menu of templates
-        this.setupRightSidebar(doc);  // sets up the right sidebar collection for mobile upload documents and sharing
+        this.setupSharingSidebar(doc);  // sets up the right sidebar collection for mobile upload documents and sharing
         this.setupActiveMobileMenu(doc); // sets up the current mobile menu for Dash Mobile
         this.setupMenuPanel(doc);
         this.setupOverlays(doc);  // documents in overlay layer
-- 
cgit v1.2.3-70-g09d2


From 993645831cd5d908f8778e0cef6ae23e80169cf3 Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Tue, 4 Aug 2020 14:58:18 -0400
Subject: fixed stackingview to use layoutDoc not props.Document

---
 src/client/util/CurrentUserUtils.ts                     | 2 +-
 src/client/views/collections/CollectionStackingView.tsx | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

(limited to 'src/client/util')

diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index ebef07e38..ab9d74391 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -773,12 +773,12 @@ export class CurrentUserUtils {
 
     // setup the list of sidebar mode buttons which determine what is displayed in the sidebar
     static async setupSidebarButtons(doc: Doc) {
+        this.setupSidebarContainer(doc);
         await CurrentUserUtils.setupToolsBtnPanel(doc);
         CurrentUserUtils.setupWorkspaces(doc);
         CurrentUserUtils.setupCatalog(doc);
         CurrentUserUtils.setupRecentlyClosed(doc);
         CurrentUserUtils.setupUserDoc(doc);
-        this.setupSidebarContainer(doc);
     }
 
     static blist = (opts: DocumentOptions, docs: Doc[]) => new PrefetchProxy(Docs.Create.LinearDocument(docs, {
diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx
index 1892f61f7..1a3aa8589 100644
--- a/src/client/views/collections/CollectionStackingView.tsx
+++ b/src/client/views/collections/CollectionStackingView.tsx
@@ -46,10 +46,10 @@ export class CollectionStackingView extends CollectionSubView(StackingDocument)
     @computed get columnHeaders() { return Cast(this.layoutDoc._columnHeaders, listSpec(SchemaHeaderField)); }
     @computed get pivotField() { return StrCast(this.layoutDoc._pivotField); }
     @computed get filteredChildren() { return this.childLayoutPairs.filter(pair => pair.layout instanceof Doc && !pair.layout.hidden).map(pair => pair.layout); }
-    @computed get xMargin() { return NumCast(this.props.Document._xMargin, 2 * Math.min(this.gridGap, .05 * this.props.PanelWidth())); }
-    @computed get yMargin() { return Math.max(this.props.Document._showTitle && !this.props.Document._showTitleHover ? 30 : 0, NumCast(this.props.Document._yMargin, 0)); } // 2 * this.gridGap)); }
-    @computed get gridGap() { return NumCast(this.props.Document._gridGap, 10); }
-    @computed get isStackingView() { return BoolCast(this.props.Document.singleColumn, true); }
+    @computed get xMargin() { return NumCast(this.layoutDoc._xMargin, 2 * Math.min(this.gridGap, .05 * this.props.PanelWidth())); }
+    @computed get yMargin() { return Math.max(this.layoutDoc._showTitle && !this.props.Document._showTitleHover ? 30 : 0, NumCast(this.props.Document._yMargin, 0)); } // 2 * this.gridGap)); }
+    @computed get gridGap() { return NumCast(this.layoutDoc._gridGap, 10); }
+    @computed get isStackingView() { return BoolCast(this.layoutDoc.singleColumn, true); }
     @computed get searchDoc() { return BoolCast(this.props.Document._searchDoc, false); }
     @computed get numGroupColumns() { return this.isStackingView ? Math.max(1, this.Sections.size + (this.showAddAGroup ? 1 : 0)) : 1; }
     @computed get showAddAGroup() { return (this.pivotField && (this.layoutDoc._chromeStatus !== 'view-mode' && this.layoutDoc._chromeStatus !== 'disabled')); }
-- 
cgit v1.2.3-70-g09d2


From 982f66c87ed30ee179d6ec5ada10a4ccaab0522e Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Tue, 4 Aug 2020 15:38:19 -0400
Subject: more search cleanup

---
 src/client/util/CurrentUserUtils.ts                     | 12 +++++++++---
 src/client/views/DocComponent.tsx                       |  1 -
 src/client/views/GlobalKeyHandler.ts                    |  2 --
 src/client/views/collections/CollectionStackingView.tsx |  1 -
 src/client/views/collections/CollectionSubView.tsx      |  4 +---
 5 files changed, 10 insertions(+), 10 deletions(-)

(limited to 'src/client/util')

diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index ab9d74391..dc83134fa 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -509,6 +509,14 @@ export class CurrentUserUtils {
         ];
     }
 
+    static setupSearchPanel(doc: Doc) {
+        if (doc["search-panel"] === undefined) {
+            doc["search-panel"] = new PrefetchProxy(Docs.Create.SearchDocument({
+                _width: 500, _height: 400, backgroundColor: "dimGray", ignoreClick: true,
+                childDropAction: "alias", lockedPosition: true, _viewType: CollectionViewType.Schema, _chromeStatus: "disabled", title: "sidebar search stack",
+            })) as any as Doc;
+        }
+    }
     static setupMenuPanel(doc: Doc) {
         if (doc.menuStack === undefined) {
             const menuBtns = CurrentUserUtils.menuBtnDescriptions().map(({ title, icon, click }) =>
@@ -897,14 +905,12 @@ export class CurrentUserUtils {
         doc["constants-snapThreshold"] = NumCast(doc["constants-snapThreshold"], 10); //
         doc["constants-dragThreshold"] = NumCast(doc["constants-dragThreshold"], 4); //
         Utils.DRAG_THRESHOLD = NumCast(doc["constants-dragThreshold"]);
-        if (doc["search-panel"] === undefined) {
-            doc["search-panel"] = new PrefetchProxy(Docs.Create.SearchDocument({ _width: 500, _height: 400, backgroundColor: "dimGray", ignoreClick: true, childDropAction: "alias", lockedPosition: true, _viewType: CollectionViewType.Schema, _chromeStatus: "disabled", title: "sidebar search stack", })) as any as Doc;
-        }
         this.setupDefaultIconTemplates(doc);  // creates a set of icon templates triggered by the document deoration icon
         this.setupDocTemplates(doc); // sets up the template menu of templates
         this.setupSharingSidebar(doc);  // sets up the right sidebar collection for mobile upload documents and sharing
         this.setupActiveMobileMenu(doc); // sets up the current mobile menu for Dash Mobile
         this.setupMenuPanel(doc);
+        this.setupSearchPanel(doc);
         this.setupOverlays(doc);  // documents in overlay layer
         this.setupDockedButtons(doc);  // the bottom bar of font icons
         this.setupDefaultPresentation(doc); // presentation that's initially triggered
diff --git a/src/client/views/DocComponent.tsx b/src/client/views/DocComponent.tsx
index 451bb8065..149586c67 100644
--- a/src/client/views/DocComponent.tsx
+++ b/src/client/views/DocComponent.tsx
@@ -170,7 +170,6 @@ export function ViewBoxAnnotatableComponent<P extends ViewBoxAnnotatableProps, T
                         added.map(doc => doc.context = this.props.Document);
                         (targetDataDoc[this.annotationKey] as List<Doc>).push(...added);
                         targetDataDoc[this.annotationKey + "-lastModified"] = new DateField(new Date(Date.now()));
-                        targetDataDoc["lastModified"] = new DateField(new Date(Date.now()));
 
                     }
                 }
diff --git a/src/client/views/GlobalKeyHandler.ts b/src/client/views/GlobalKeyHandler.ts
index 49ddc7374..c9f95a538 100644
--- a/src/client/views/GlobalKeyHandler.ts
+++ b/src/client/views/GlobalKeyHandler.ts
@@ -320,8 +320,6 @@ export default class KeyManager {
                             undoBatch(() => {
                                 targetDataDoc[fieldKey] = new List<Doc>([...docList, ...added]);
                                 targetDataDoc[fieldKey + "-lastModified"] = new DateField(new Date(Date.now()));
-                                targetDataDoc["lastModified"] = new DateField(new Date(Date.now()));
-
                             })();
                         }
                     }
diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx
index 559365361..cca78cf9f 100644
--- a/src/client/views/collections/CollectionStackingView.tsx
+++ b/src/client/views/collections/CollectionStackingView.tsx
@@ -76,7 +76,6 @@ export class CollectionStackingView extends CollectionSubView(StackingDocument)
             const dxf = () => this.getDocTransform(d, dref.current!);
             this._docXfs.push({ dxf, width, height });
             const rowSpan = Math.ceil((height() + this.gridGap) / this.gridGap);
-
             const style = this.isStackingView ? { width: width(), marginTop: i ? this.gridGap : 0, height: height() } : { gridRowEnd: `span ${rowSpan}` };
             return <div className={`collectionStackingView-${this.isStackingView ? "columnDoc" : "masonryDoc"}`} key={d[Id]} ref={dref} style={style} >
                 {this.getDisplayDoc(d, (!d.isTemplateDoc && !d.isTemplateForField && !d.PARAMS) ? undefined : this.props.DataDoc, dxf, width)}
diff --git a/src/client/views/collections/CollectionSubView.tsx b/src/client/views/collections/CollectionSubView.tsx
index 6f075be92..64b23ce18 100644
--- a/src/client/views/collections/CollectionSubView.tsx
+++ b/src/client/views/collections/CollectionSubView.tsx
@@ -127,7 +127,7 @@ export function CollectionSubView<T, X>(schemaCtor: (doc: Doc) => T, moreProps?:
             }
 
             const docs = rawdocs.filter(d => !(d instanceof Promise)).map(d => d as Doc);
-            const viewSpecScript = Cast(this.props.Document.viewSpecScript, ScriptField);
+            const viewSpecScript = ScriptCast(this.props.Document.viewSpecScript);
             const docRangeFilters = this.props.ignoreFields?.includes("_docRangeFilters") ? [] : Cast(this.props.Document._docRangeFilters, listSpec("string"), []);
 
             return this.props.Document.dontRegisterView ? docs : DocUtils.FilterDocs(docs, this.docFilters(), docRangeFilters, viewSpecScript);
@@ -436,5 +436,3 @@ import { CollectionView, CollectionViewType } from "./CollectionView";
 import { SelectionManager } from "../../util/SelectionManager";
 import { OverlayView } from "../OverlayView";
 import { setTimeout } from "timers";
-import { raw } from "serializr";
-
-- 
cgit v1.2.3-70-g09d2


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

---
 src/client/util/SettingsManager.scss | 276 ++++++++++++++++++++++++++++-------
 src/client/util/SettingsManager.tsx  | 220 +++++++++++++++++++++++-----
 src/client/views/MainViewModal.tsx   |  10 +-
 3 files changed, 414 insertions(+), 92 deletions(-)

(limited to 'src/client/util')

diff --git a/src/client/util/SettingsManager.scss b/src/client/util/SettingsManager.scss
index 6923fe879..075879198 100644
--- a/src/client/util/SettingsManager.scss
+++ b/src/client/util/SettingsManager.scss
@@ -1,7 +1,7 @@
 @import "../views/globalCssVariables";
 
 .settings-interface {
-    background-color: whitesmoke !important;
+    //background-color: whitesmoke !important;
     color: grey;
     width: 450px;
     height: 300px;
@@ -22,24 +22,166 @@
     }
 }
 
+.settings-title {
+    font-size: 25px;
+    font-weight: bold;
+    padding-right: 15px;
+    color: black;
+}
+
+.settings-section {
+    display: flex;
+    border-bottom: 1px solid grey;
+    padding-bottom: 8px;
+    padding-top: 6px;
+
+    .settings-section-title {
+        font-size: 16;
+        font-weight: bold;
+        text-align: left;
+        color: black;
+        width: 80;
+        margin-right: 50px;
+    }
+
+    &:last-child {
+        border-bottom: none;
+    }
+}
+
+
+.password-content {
+    display: flex;
+
+    .password-content-inputs {
+        width: 100;
+
+        .password-inputs {
+            border: none;
+            margin-bottom: 8px;
+            width: 180;
+            color: black;
+            border-radius: 5px;
+        }
+    }
+
+    .password-content-buttons {
+        margin-left: 84px;
+        width: 100;
+
+        .password-submit {
+            margin-left: 85px;
+        }
+
+        .password-forgot {
+            margin-left: 65px;
+            margin-top: -20px;
+            white-space: nowrap;
+        }
+    }
+}
+
+.accounts-content {
+    display: flex;
+}
+
+.modes-content {
+    display: flex;
+
+    .modes-select {
+        width: 170px;
+        margin-right: 65px;
+        color: black;
+        border-radius: 5px;
+    }
+
+    .modes-playground {
+        display: flex;
+
+        .playground-check {
+            margin-right: 5px;
+        }
+
+        .playground-text {
+            color: black;
+        }
+    }
+}
+
+.colorFlyout {
+    margin-top: 2px;
+    margin-right: 25px;
+
+    .colorFlyout-button {
+        width: 20px;
+        height: 20px;
+        border: 0.5px solid black;
+        border-radius: 5px;
+    }
+}
+
+.preferences-content {
+    display: flex;
+    margin-top: 4px;
+
+    .preferences-color {
+        display: flex;
+
+        .preferences-color-text {
+            color: black;
+            font-size: 11;
+            margin-top: 4;
+            margin-right: 4;
+        }
+    }
+
+    .preferences-font {
+        display: flex;
+
+        .preferences-font-text {
+            color: black;
+            font-size: 11;
+            margin-top: 4;
+            margin-right: 4;
+        }
+
+        .font-select {
+            width: 100px;
+            color: black;
+            font-size: 9;
+            margin-right: 6;
+            border-radius: 5px;
+        }
+
+        .size-select {
+            width: 60px;
+            color: black;
+            font-size: 9;
+            border-radius: 5px;
+        }
+    }
+}
+
 .settings-interface {
     display: flex;
     flex-direction: column;
 
     button {
-        width: 100%;
+        width: auto;
         align-self: center;
         background: #252b33;
-        margin-top: 4px;
+        margin-right: 15px;
+
+        //margin-top: 4px;
 
         &:hover {
             background: $main-accent;
         }
     }
 
-    .delete-button {
-        background: rgb(227, 86, 86);
-    }
+    // .delete-button {
+    //     background: rgb(227, 86, 86);
+    // }
 
     .close-button {
         position: absolute;
@@ -48,57 +190,89 @@
         cursor: pointer;
     }
 
-    .settings-heading {
-        letter-spacing: .5em;
-    }
+    // .settings-heading {
+    //     letter-spacing: .5em;
+    // }
 
+    .settings-content {
+        background: #e4e4e4;
+        border-radius: 6px;
+        padding: 10px;
+        width: 560px;
+    }
 
-    .settings-body {
+    .settings-top {
         display: flex;
-        justify-content: space-between;
-        margin-top: -10;
+        margin-bottom: 10px;
+    }
 
-        .settings-type {
-            display: flex;
-            flex-direction: column;
-            flex-basis: 45%;
+    // .settings-body {
+    //     display: flex;
+    //     justify-content: space-between;
+    //     margin-top: -10;
 
-        }
+    //     .settings-type {
+    //         display: flex;
+    //         flex-direction: column;
+    //         flex-basis: 45%;
 
-        .settings-content {
-            padding-left: 1em;
-            padding-right: 1em;
-            display: flex;
-            flex-direction: column;
-            flex-basis: 70%;
-            justify-content: space-around;
-            text-align: left;
-
-            ::placeholder {
-                color: $intermediate-color;
-            }
-
-            input {
-                border-radius: 5px;
-                border: none;
-                padding: 4px;
-                min-width: 100%;
-                margin: 2px 0;
-            }
-
-            .error-text {
-                color: #C40233;
-            }
-
-            .success-text {
-                color: #009F6B;
-            }
-
-            p {
-                padding: 0 0 .1em .2em;
-            }
+    //     }
 
-        }
+    //     .settings-content {
+    //         background: whitesmoke;
+    //         border-radius: 6px;
+
+    //         // padding-left: 1em;
+    //         // padding-right: 1em;
+    //         // display: flex;
+    //         // flex-direction: column;
+    //         // flex-basis: 70%;
+    //         // justify-content: space-around;
+    //         // text-align: left;
+
+    //         ::placeholder {
+    //             color: $intermediate-color;
+    //         }
+
+    //         input {
+    //             border-radius: 5px;
+    //             border: none;
+    //             padding: 4px;
+    //             min-width: 100%;
+    //             margin: 2px 0;
+    //         }
+
+    //         .error-text {
+    //             color: #C40233;
+    //         }
+
+    //         .success-text {
+    //             color: #009F6B;
+    //         }
+
+    //         p {
+    //             padding: 0 0 .1em .2em;
+    //         }
+
+    //     }
+    // }
+
+    .error-text {
+        color: #C40233;
+        width: 300;
+        margin-left: -20;
+        font-size: 10;
+        margin-bottom: 4;
+        margin-top: -3;
+    }
+
+    .success-text {
+        width: 300;
+        margin-left: -20;
+        font-size: 10;
+        margin-bottom: 4;
+        margin-top: -3;
+        color: #009F6B;
     }
 
     .focus-span {
@@ -138,8 +312,6 @@
             color: black;
         }
 
-
-
     }
 }
 
diff --git a/src/client/util/SettingsManager.tsx b/src/client/util/SettingsManager.tsx
index 6276fae96..9282559e2 100644
--- a/src/client/util/SettingsManager.tsx
+++ b/src/client/util/SettingsManager.tsx
@@ -15,6 +15,12 @@ import GroupManager from "./GroupManager";
 import HypothesisAuthenticationManager from "../apis/HypothesisAuthenticationManager";
 import GoogleAuthenticationManager from "../apis/GoogleAuthenticationManager";
 import { DocServer } from "../DocServer";
+import { BoolCast } from "../../fields/Types";
+import { undoBatch } from "./UndoManager";
+import { ColorState, SketchPicker } from "react-color";
+const higflyout = require("@hig/flyout");
+export const { anchorPoints } = higflyout;
+export const Flyout = higflyout.default;
 
 library.add(fa.faTimes);
 
@@ -33,6 +39,9 @@ export default class SettingsManager extends React.Component<{}> {
     private new_password_ref = React.createRef<HTMLInputElement>();
     private new_confirm_ref = React.createRef<HTMLInputElement>();
 
+
+    @observable private backgroundColor = "white";
+
     public open = action(() => {
         SelectionManager.DeselectAll();
         this.isOpen = true;
@@ -107,50 +116,183 @@ export default class SettingsManager extends React.Component<{}> {
         addStyleSheetRule(SettingsManager._settingsStyle, "lm_header", { background: "pink !important" });
     }
 
+    @action
+    changeMode = (e: any) => {
+        if (e.currentTarget.value === "Novice") {
+            Doc.UserDoc().noviceMode = true;
+        } else {
+            Doc.UserDoc().noviceMode = false;
+        }
+    }
+
+    @action @undoBatch
+    switchColor = (color: ColorState) => {
+        const val = String(color.hex);
+        this.backgroundColor = val;
+        return true;
+    }
+
     private get settingsInterface() {
-        return (
-            <div className={"settings-interface"}>
-                <div className="settings-heading">
-                    <h1>settings</h1>
-                    <div className={"close-button"} onClick={this.close}>
-                        <FontAwesomeIcon icon={fa.faTimes} color="black" size={"lg"} />
-                    </div>
+
+        const oldSettings = <div className={"settings-interface"}>
+            <div className="settings-heading">
+                <h1>Settings</h1>
+                <div className={"close-button"} onClick={this.close}>
+                    <FontAwesomeIcon icon={fa.faTimes} color="black" size={"lg"} />
+                </div>
+            </div>
+            <div className="settings-body">
+                <div className="settings-type">
+                    <button onClick={this.onClick} value="password">reset password</button>
+                    <button onClick={this.noviceToggle} value="data">{`Set ${Doc.UserDoc().noviceMode ? "developer" : "novice"} mode`}</button>
+                    <button onClick={this.togglePlaygroundMode}>{`${this.playgroundMode ? "Disable" : "Enable"} playground mode`}</button>
+                    <button onClick={this.googleAuthorize} value="data">{`Link to Google`}</button>
+                    <button onClick={this.hypothesisAuthorize} value="data">{`Link to Hypothes.is`}</button>
+                    <button onClick={() => GroupManager.Instance.open()}>Manage groups</button>
+                    <button onClick={() => window.location.assign(Utils.prepend("/logout"))}>
+                        {CurrentUserUtils.GuestWorkspace ? "Exit" : "Log Out"}
+                    </button>
                 </div>
-                <div className="settings-body">
-                    <div className="settings-type">
-                        <button onClick={this.onClick} value="password">reset password</button>
-                        <button onClick={this.noviceToggle} value="data">{`Set ${Doc.UserDoc().noviceMode ? "developer" : "novice"} mode`}</button>
-                        <button onClick={this.togglePlaygroundMode}>{`${this.playgroundMode ? "Disable" : "Enable"} playground mode`}</button>
-                        <button onClick={this.googleAuthorize} value="data">{`Link to Google`}</button>
-                        <button onClick={this.hypothesisAuthorize} value="data">{`Link to Hypothes.is`}</button>
-                        <button onClick={() => GroupManager.Instance.open()}>Manage groups</button>
-                        <button onClick={() => window.location.assign(Utils.prepend("/logout"))}>
-                            {CurrentUserUtils.GuestWorkspace ? "Exit" : "Log Out"}
-                        </button>
+                {this.settingsContent === "password" ?
+                    <div className="settings-content">
+                        <input placeholder="current password" ref={this.curr_password_ref} />
+                        <input placeholder="new password" ref={this.new_password_ref} />
+                        <input placeholder="confirm new password" ref={this.new_confirm_ref} />
+                        {this.errorText ? <div className="error-text">{this.errorText}</div> : undefined}
+                        {this.successText ? <div className="success-text">{this.successText}</div> : undefined}
+                        <button onClick={this.dispatchRequest}>submit</button>
+                        <a style={{ marginLeft: 65, marginTop: -20 }} href="/forgotPassword">forgot password?</a>
+
+                    </div>
+                    : undefined}
+                {this.settingsContent === "data" ?
+                    <div className="settings-content">
+                        <p>WARNING: <br />
+                        THIS WILL ERASE ALL YOUR CURRENT DOCUMENTS STORED ON DASH. IF YOU WISH TO PROCEED, CLICK THE BUTTON BELOW.</p>
+                        <button className="delete-button">DELETE</button>
+                    </div>
+                    : undefined}
+            </div>
+
+        </div>;
+
+
+        const passwordContent = <div className="password-content">
+            <div className="password-content-inputs">
+                <input className="password-inputs" placeholder="current password" ref={this.curr_password_ref} />
+                <input className="password-inputs" placeholder="new password" ref={this.new_password_ref} />
+                <input className="password-inputs" placeholder="confirm new password" ref={this.new_confirm_ref} />
+            </div>
+            <div className="password-content-buttons">
+                {this.errorText ? <div className="error-text">{this.errorText}</div> : undefined}
+                {this.successText ? <div className="success-text">{this.successText}</div> : undefined}
+                <button className="password-submit" onClick={this.dispatchRequest}>submit</button>
+                <a className="password-forgot" style={{ marginLeft: 65, marginTop: -20 }}
+                    href="/forgotPassword">forgot password?</a>
+            </div>
+        </div>;
+
+        const modesContent = <div className="modes-content">
+            <select className="modes-select"
+                onChange={e => this.changeMode(e)}>
+                <option key={"Novice"} value={"Novice"} selected={BoolCast(Doc.UserDoc().noviceMode)}>
+                    Novice
+                </option>
+                <option key={"Developer"} value={"Developer"} selected={!BoolCast(Doc.UserDoc().noviceMode)}>
+                    Developer
+                </option>
+            </select>
+            <div className="modes-playground">
+                <input className="playground-check" type="checkbox"
+                    checked={this.playgroundMode}
+                    onChange={undoBatch(action(() => this.togglePlaygroundMode()))}
+                /><div className="playground-text">Playground Mode</div>
+            </div>
+        </div>;
+
+        const accountsContent = <div className="accounts-content">
+            <button onClick={this.googleAuthorize} value="data">{`Link to Google`}</button>
+            <button onClick={this.hypothesisAuthorize} value="data">{`Link to Hypothes.is`}</button>
+            <button onClick={() => GroupManager.Instance.open()}>Manage groups</button>
+        </div>;
+
+        const colorBox = <SketchPicker onChange={this.switchColor}
+            presetColors={['#D0021B', '#F5A623', '#F8E71C', '#8B572A', '#7ED321', '#417505',
+                '#9013FE', '#4A90E2', '#50E3C2', '#B8E986', '#000000', '#4A4A4A', '#9B9B9B',
+                '#FFFFFF', '#f1efeb', 'transparent']}
+            color={this.backgroundColor} />;
+
+        const colorFlyout = <div className="colorFlyout">
+            <Flyout anchorPoint={anchorPoints.LEFT_TOP}
+                content={colorBox}>
+                <div>
+                    <div className="colorFlyout-button" style={{ backgroundColor: this.backgroundColor }}
+                        onPointerDown={e => e.stopPropagation()} >
+                        <FontAwesomeIcon icon="palette" size="sm" color={this.backgroundColor} />
                     </div>
-                    {this.settingsContent === "password" ?
-                        <div className="settings-content">
-                            <input placeholder="current password" ref={this.curr_password_ref} />
-                            <input placeholder="new password" ref={this.new_password_ref} />
-                            <input placeholder="confirm new password" ref={this.new_confirm_ref} />
-                            {this.errorText ? <div className="error-text">{this.errorText}</div> : undefined}
-                            {this.successText ? <div className="success-text">{this.successText}</div> : undefined}
-                            <button onClick={this.dispatchRequest}>submit</button>
-                            <a style={{ marginLeft: 65, marginTop: -20 }} href="/forgotPassword">forgot password?</a>
-
-                        </div>
-                        : undefined}
-                    {this.settingsContent === "data" ?
-                        <div className="settings-content">
-                            <p>WARNING: <br />
-                                THIS WILL ERASE ALL YOUR CURRENT DOCUMENTS STORED ON DASH. IF YOU WISH TO PROCEED, CLICK THE BUTTON BELOW.</p>
-                            <button className="delete-button">DELETE</button>
-                        </div>
-                        : undefined}
                 </div>
+            </Flyout>
+        </div>;
 
+        const preferencesContent = <div className="preferences-content">
+            <div className="preferences-color">
+                <div className="preferences-color-text">Background Color</div> {colorFlyout}
             </div>
-        );
+            <div className="preferences-font">
+                <div className="preferences-font-text">Default Font</div>
+                <select className="font-select"
+                    onChange={e => this.changeMode(e)}>
+                    <option key={"Times New Roman"} value={"Times New Roman"} selected={BoolCast(Doc.UserDoc().noviceMode)}>
+                        Times New Roman
+                    </option>
+                    <option key={"Georgia"} value={"Georgia"} selected={!BoolCast(Doc.UserDoc().noviceMode)}>
+                        Georgia
+                    </option>
+                    <option key={"Georgia"} value={"Georgia"} selected={!BoolCast(Doc.UserDoc().noviceMode)}>
+                        Georgia
+                    </option>
+                </select>
+                <select className="size-select"
+                    onChange={e => this.changeMode(e)}>
+                    <option key={"5px"} value={"5px"} selected={BoolCast(Doc.UserDoc().noviceMode)}>
+                        5px
+                    </option>
+                    <option key={"8px"} value={"8px"} selected={!BoolCast(Doc.UserDoc().noviceMode)}>
+                        8px
+                    </option>
+                </select>
+            </div>
+        </div>;
+
+        return (<div className="settings-interface">
+            <div className="settings-top">
+                <div className="settings-title">Settings</div>
+                <button onClick={() => window.location.assign(Utils.prepend("/logout"))}>
+                    {CurrentUserUtils.GuestWorkspace ? "Exit" : "Log Out"}
+                </button>
+                <div className="close-button" onClick={this.close}>
+                    <FontAwesomeIcon icon={fa.faTimes} color="black" size={"lg"} />
+                </div>
+            </div>
+            <div className="settings-content">
+                <div className="settings-section">
+                    <div className="settings-section-title">Password</div>
+                    <div className="settings-section-context">{passwordContent}</div>
+                </div>
+                <div className="settings-section">
+                    <div className="settings-section-title">Modes</div>
+                    <div className="settings-section-context">{modesContent}</div>
+                </div>
+                <div className="settings-section">
+                    <div className="settings-section-title">Accounts</div>
+                    <div className="settings-section-context">{accountsContent}</div>
+                </div>
+                <div className="settings-section" style={{ paddingBottom: 4 }}>
+                    <div className="settings-section-title">Preferences</div>
+                    <div className="settings-section-context">{preferencesContent}</div>
+                </div>
+            </div>
+        </div>);
     }
 
     render() {
@@ -160,6 +302,8 @@ export default class SettingsManager extends React.Component<{}> {
                 isDisplayed={this.isOpen}
                 interactive={true}
                 closeOnExternalClick={this.close}
+                width={600}
+                height={340}
             />
         );
     }
diff --git a/src/client/views/MainViewModal.tsx b/src/client/views/MainViewModal.tsx
index 66ea2dbf8..c7b752b60 100644
--- a/src/client/views/MainViewModal.tsx
+++ b/src/client/views/MainViewModal.tsx
@@ -10,6 +10,8 @@ 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)
 }
 
@@ -21,13 +23,17 @@ export default class MainViewModal extends React.Component<MainViewOverlayProps>
         const dialogueOpacity = p.dialogueBoxDisplayedOpacity || 1;
         const overlayOpacity = p.overlayDisplayedOpacity || 0.4;
         return !p.isDisplayed ? (null) : (
-            <div style={{ pointerEvents: p.isDisplayed && p.interactive ? "all" : "none" }}>
+            <div style={{
+                pointerEvents: p.isDisplayed && p.interactive ? "all" : "none"
+            }}>
                 <div
                     className={"dialogue-box"}
                     style={{
                         borderColor: "black",
                         ...(p.dialogueBoxStyle || {}),
-                        opacity: p.isDisplayed ? dialogueOpacity : 0
+                        opacity: p.isDisplayed ? dialogueOpacity : 0,
+                        width: this.props.width ? this.props.width : "auto",
+                        height: this.props.height ? this.props.height : "auto"
                     }}
                 >{p.contents}</div>
                 <div
-- 
cgit v1.2.3-70-g09d2


From e83fd812ed3798a7e7c22ad132a2f9e8dccaa76c Mon Sep 17 00:00:00 2001
From: Andy Rickert <andrew_rickert@brown.edu>
Date: Tue, 4 Aug 2020 22:05:30 -0400
Subject: changes

---
 src/client/documents/Documents.ts                  |  14 +-
 src/client/util/CurrentUserUtils.ts                |  12 +-
 src/client/views/SearchDocBox.tsx                  | 428 ----------------
 .../views/collections/CollectionSchemaCells.tsx    |  84 +++-
 .../views/collections/CollectionSchemaHeaders.tsx  |   8 +-
 .../views/collections/CollectionSchemaView.scss    |   2 +-
 src/client/views/collections/CollectionSubView.tsx |  53 +-
 src/client/views/collections/SchemaTable.tsx       |  47 +-
 .../collectionFreeForm/PropertiesView.tsx          |   2 +-
 src/client/views/nodes/DocumentContentsView.tsx    |   3 +-
 src/client/views/nodes/LabelBox.tsx                |   2 +-
 .../views/nodes/formattedText/FormattedTextBox.tsx |   1 -
 src/client/views/search/SearchBox.tsx              | 419 +++++-----------
 src/client/views/search/SearchItem.scss            | 186 -------
 src/client/views/search/SearchItem.tsx             | 556 ---------------------
 15 files changed, 300 insertions(+), 1517 deletions(-)
 delete mode 100644 src/client/views/SearchDocBox.tsx
 delete mode 100644 src/client/views/search/SearchItem.scss
 delete mode 100644 src/client/views/search/SearchItem.tsx

(limited to 'src/client/util')

diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index e6eaaad60..b809a73b7 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -22,8 +22,7 @@ import { LinkManager } from "../util/LinkManager";
 import { Scripting } from "../util/Scripting";
 import { UndoManager } from "../util/UndoManager";
 import { DocumentType } from "./DocumentTypes";
-import { SearchItem } from "../views/search/SearchItem";
-import { SearchBox, filterData } from "../views/search/SearchBox";
+import { SearchBox } from "../views/search/SearchBox";
 import { CollectionDockingView } from "../views/collections/CollectionDockingView";
 import { CollectionView, CollectionViewType } from "../views/collections/CollectionView";
 import { ContextMenu } from "../views/ContextMenu";
@@ -48,7 +47,6 @@ import { VideoBox } from "../views/nodes/VideoBox";
 import { WebBox } from "../views/nodes/WebBox";
 import { PresElementBox } from "../views/presentationview/PresElementBox";
 import { DashWebRTCVideo } from "../views/webcam/DashWebRTCVideo";
-import { DocumentType } from "./DocumentTypes";
 import { Networking } from "../Network";
 import { Upload } from "../../server/SharedMediaTypes";
 const path = require('path');
@@ -191,8 +189,7 @@ export interface DocumentOptions {
     flexDirection?: "unset" | "row" | "column" | "row-reverse" | "column-reverse";
     selectedIndex?: number;
     syntaxColor?: string; // can be applied to text for syntax highlighting all matches in the text
-    searchQuery?: string, // for quersyBox
-    filterQuery?: filterData,
+    searchQuery?: string; // for quersyBox
     linearViewIsExpanded?: boolean; // is linear view expanded
     border?: string; //for searchbox
     hovercolor?: string;
@@ -316,9 +313,6 @@ export namespace Docs {
             [DocumentType.PRESELEMENT, {
                 layout: { view: PresElementBox, dataField: defaultDataKey }
             }],
-            [DocumentType.SEARCHITEM, {
-                layout: { view: SearchItem, dataField: defaultDataKey }
-            }],
             [DocumentType.INK, {
                 layout: { view: InkingStroke, dataField: defaultDataKey },
                 options: { backgroundColor: "transparent" }
@@ -803,10 +797,6 @@ export namespace Docs {
             return InstanceFromProto(Prototypes.get(DocumentType.PRESELEMENT), undefined, { ...(options || {}) });
         }
 
-        export function SearchItemBoxDocument(options?: DocumentOptions) {
-            return InstanceFromProto(Prototypes.get(DocumentType.SEARCHITEM), undefined, { ...(options || {}) });
-        }
-
         export function DockDocument(documents: Array<Doc>, config: string, options: DocumentOptions, id?: string) {
             const inst = InstanceFromProto(Prototypes.get(DocumentType.COL), new List(documents), { ...options, _viewType: CollectionViewType.Docking, dockingConfig: config }, id);
             Doc.GetProto(inst).data = new List<Doc>(documents);
diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index 84cd4823b..cd8c09a0e 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -543,7 +543,7 @@ export class CurrentUserUtils {
                     btn.color = "white";
                     btn._backgroundColor = "";
                 }));
-            })
+            });
         });
         return doc.menuStack as Doc;
     }
@@ -761,16 +761,6 @@ export class CurrentUserUtils {
         }
     }
 
-    static setupSidebarContainer(doc: Doc) {
-        if (doc["sidebar"] === undefined) {
-            const sidebarContainer = new Doc();
-            sidebarContainer._chromeStatus = "disabled";
-            sidebarContainer.onClick = ScriptField.MakeScript("freezeSidebar()");
-            doc["sidebar"] = new PrefetchProxy(sidebarContainer);
-        }
-        return doc["sidebar"] as Doc;
-    }
-
     // setup the list of sidebar mode buttons which determine what is displayed in the sidebar
     static async setupSidebarButtons(doc: Doc) {
         await CurrentUserUtils.setupToolsBtnPanel(doc);
diff --git a/src/client/views/SearchDocBox.tsx b/src/client/views/SearchDocBox.tsx
deleted file mode 100644
index 084f952a3..000000000
--- a/src/client/views/SearchDocBox.tsx
+++ /dev/null
@@ -1,428 +0,0 @@
-import { library } from "@fortawesome/fontawesome-svg-core";
-import { faBullseye, faLink } from "@fortawesome/free-solid-svg-icons";
-import { action, computed, observable, runInAction } from "mobx";
-import { observer } from "mobx-react";
-//import "./SearchBoxDoc.scss";
-import { Doc, DocListCast } from "../../fields/Doc";
-import { Id } from "../../fields/FieldSymbols";
-import { BoolCast, Cast, NumCast, StrCast } from "../../fields/Types";
-import { returnFalse, returnZero } from "../../Utils";
-import { Docs } from "../documents/Documents";
-import { SearchUtil } from "../util/SearchUtil";
-import { EditableView } from "./EditableView";
-import { ContentFittingDocumentView } from "./nodes/ContentFittingDocumentView";
-import { FieldView, FieldViewProps } from "./nodes/FieldView";
-import { FilterBox } from "./search/FilterBox";
-import { SearchItem } from "./search/SearchItem";
-import React = require("react");
-
-export interface RecProps {
-    documents: { preview: Doc, similarity: number }[];
-    node: Doc;
-
-}
-
-library.add(faBullseye, faLink);
-export const keyPlaceholder = "Query";
-
-@observer
-export class SearchDocBox extends React.Component<FieldViewProps> {
-
-    public static LayoutString(fieldKey: string) { return FieldView.LayoutString(SearchDocBox, fieldKey); }
-
-    // @observable private _display: boolean = false;
-    @observable private _pageX: number = 0;
-    @observable private _pageY: number = 0;
-    @observable private _width: number = 0;
-    @observable private _height: number = 0;
-    @observable.shallow private _docViews: JSX.Element[] = [];
-    // @observable private _documents: { preview: Doc, score: number }[] = [];
-    private previewDocs: Doc[] = [];
-
-    constructor(props: FieldViewProps) {
-        super(props);
-        this.editingMetadata = this.editingMetadata || false;
-        //SearchBox.Instance = this;
-        this.resultsScrolled = this.resultsScrolled.bind(this);
-    }
-
-
-    @computed
-    private get editingMetadata() {
-        return BoolCast(this.props.Document.editingMetadata);
-    }
-
-    private set editingMetadata(value: boolean) {
-        this.props.Document.editingMetadata = value;
-    }
-
-    static readonly buffer = 20;
-
-    componentDidMount() {
-        runInAction(() => {
-            this.query = StrCast(this.props.Document.searchText);
-            this.content = (Docs.Create.TreeDocument(DocListCast(Doc.GetProto(this.props.Document).data), { _width: 200, _height: 400, _chromeStatus: "disabled", title: `Search Docs:` + this.query }));
-
-        });
-        if (this.inputRef.current) {
-            this.inputRef.current.focus();
-            runInAction(() => {
-                this._searchbarOpen = true;
-            });
-        }
-    }
-
-    @observable
-    private content: Doc | undefined;
-
-    @action
-    updateKey = async (newKey: string) => {
-        this.query = newKey;
-        if (newKey.length > 1) {
-            const newdocs = await this.getAllResults(this.query);
-            const things = newdocs.docs;
-            runInAction(() => {
-                this.content = Docs.Create.TreeDocument(things, { _width: 200, _height: 400, _chromeStatus: "disabled", title: `Search Docs:` + this.query });
-            });
-        }
-
-
-        //this.keyRef.current && this.keyRef.current.setIsFocused(false);
-        //this.query.length === 0 && (this.query = keyPlaceholder);
-        return true;
-    }
-
-    @computed
-    public get query() {
-        return StrCast(this.props.Document.query);
-    }
-
-    public set query(value: string) {
-        this.props.Document.query = value;
-    }
-
-    @observable private _searchString: string = "";
-    @observable private _resultsOpen: boolean = false;
-    @observable private _searchbarOpen: boolean = false;
-    @observable private _results: [Doc, string[], string[]][] = [];
-    private _resultsSet = new Map<Doc, number>();
-    @observable private _openNoResults: boolean = false;
-    @observable private _visibleElements: JSX.Element[] = [];
-
-    private resultsRef = React.createRef<HTMLDivElement>();
-    public inputRef = React.createRef<HTMLInputElement>();
-
-    private _isSearch: ("search" | "placeholder" | undefined)[] = [];
-    private _numTotalResults = -1;
-    private _endIndex = -1;
-
-
-    private _maxSearchIndex: number = 0;
-    private _curRequest?: Promise<any> = undefined;
-
-    @action
-    getViews = async (doc: Doc) => {
-        const results = await SearchUtil.GetViewsOfDocument(doc);
-        let toReturn: Doc[] = [];
-        await runInAction(() => {
-            toReturn = results;
-        });
-        return toReturn;
-    }
-
-    @action.bound
-    onChange(e: React.ChangeEvent<HTMLInputElement>) {
-        this._searchString = e.target.value;
-
-        this._openNoResults = false;
-        this._results = [];
-        this._resultsSet.clear();
-        this._visibleElements = [];
-        this._numTotalResults = -1;
-        this._endIndex = -1;
-        this._curRequest = undefined;
-        this._maxSearchIndex = 0;
-    }
-
-    enter = async (e: React.KeyboardEvent) => {
-        if (e.key === "Enter") {
-            const newdocs = await this.getAllResults(this.query);
-            this.content = Docs.Create.TreeDocument(newdocs.docs, { _width: 200, _height: 400, _chromeStatus: "disabled", title: `Search Docs: "Results"` });
-        }
-    }
-
-
-    @action
-    submitSearch = async () => {
-        let query = this._searchString;
-        query = FilterBox.Instance.getFinalQuery(query);
-        this._results = [];
-        this._resultsSet.clear();
-        this._isSearch = [];
-        this._visibleElements = [];
-        FilterBox.Instance.closeFilter();
-
-        //if there is no query there should be no result
-        if (query === "") {
-            return;
-        }
-        else {
-            this._endIndex = 12;
-            this._maxSearchIndex = 0;
-            this._numTotalResults = -1;
-            await this.getResults(query);
-        }
-
-        runInAction(() => {
-            this._resultsOpen = true;
-            this._searchbarOpen = true;
-            this._openNoResults = true;
-            this.resultsScrolled();
-        });
-    }
-
-    getAllResults = async (query: string) => {
-        return SearchUtil.Search(query, true, { fq: this.filterQuery, start: 0, rows: 10000000 });
-    }
-
-    private get filterQuery() {
-        const types = FilterBox.Instance.filterTypes;
-        const includeDeleted = FilterBox.Instance.getDataStatus();
-        return "NOT baseProto_b:true" + (includeDeleted ? "" : " AND NOT deleted_b:true") + (types ? ` AND (${types.map(type => `({!join from=id to=proto_i}type_t:"${type}" AND NOT type_t:*) OR type_t:"${type}" OR type_t:"extension"`).join(" ")})` : "");
-    }
-
-
-    private NumResults = 25;
-    private lockPromise?: Promise<void>;
-    getResults = async (query: string) => {
-        if (this.lockPromise) {
-            await this.lockPromise;
-        }
-        this.lockPromise = new Promise(async res => {
-            while (this._results.length <= this._endIndex && (this._numTotalResults === -1 || this._maxSearchIndex < this._numTotalResults)) {
-                this._curRequest = SearchUtil.Search(query, true, { fq: this.filterQuery, start: this._maxSearchIndex, rows: this.NumResults, hl: true, "hl.fl": "*" }).then(action(async (res: SearchUtil.DocSearchResult) => {
-
-                    // happens at the beginning
-                    if (res.numFound !== this._numTotalResults && this._numTotalResults === -1) {
-                        this._numTotalResults = res.numFound;
-                    }
-
-                    const highlighting = res.highlighting || {};
-                    const highlightList = res.docs.map(doc => highlighting[doc[Id]]);
-                    const lines = new Map<string, string[]>();
-                    res.docs.map((doc, i) => lines.set(doc[Id], res.lines[i]));
-                    const docs = await Promise.all(res.docs.map(async doc => (await Cast(doc.extendsDoc, Doc)) || doc));
-                    const highlights: typeof res.highlighting = {};
-                    docs.forEach((doc, index) => highlights[doc[Id]] = highlightList[index]);
-                    const filteredDocs = FilterBox.Instance.filterDocsByType(docs);
-                    runInAction(() => {
-                        // this._results.push(...filteredDocs);
-                        filteredDocs.forEach(doc => {
-                            const index = this._resultsSet.get(doc);
-                            const highlight = highlights[doc[Id]];
-                            const line = lines.get(doc[Id]) || [];
-                            const hlights = highlight ? Object.keys(highlight).map(key => key.substring(0, key.length - 2)) : [];
-                            if (index === undefined) {
-                                this._resultsSet.set(doc, this._results.length);
-                                this._results.push([doc, hlights, line]);
-                            } else {
-                                this._results[index][1].push(...hlights);
-                                this._results[index][2].push(...line);
-                            }
-                        });
-                    });
-
-                    this._curRequest = undefined;
-                }));
-                this._maxSearchIndex += this.NumResults;
-
-                await this._curRequest;
-            }
-            this.resultsScrolled();
-            res();
-        });
-        return this.lockPromise;
-    }
-
-    collectionRef = React.createRef<HTMLSpanElement>();
-    startDragCollection = async () => {
-        const res = await this.getAllResults(FilterBox.Instance.getFinalQuery(this._searchString));
-        const filtered = FilterBox.Instance.filterDocsByType(res.docs);
-        const docs = filtered.map(doc => {
-            const isProto = Doc.GetT(doc, "isPrototype", "boolean", true);
-            if (isProto) {
-                return Doc.MakeDelegate(doc);
-            } else {
-                return Doc.MakeAlias(doc);
-            }
-        });
-        let x = 0;
-        let y = 0;
-        for (const doc of docs.map(d => Doc.Layout(d))) {
-            doc.x = x;
-            doc.y = y;
-            const size = 200;
-            const aspect = NumCast(doc._nativeHeight) / NumCast(doc._nativeWidth, 1);
-            if (aspect > 1) {
-                doc._height = size;
-                doc._width = size / aspect;
-            } else if (aspect > 0) {
-                doc._width = size;
-                doc._height = size * aspect;
-            } else {
-                doc._width = size;
-                doc._height = size;
-            }
-            x += 250;
-            if (x > 1000) {
-                x = 0;
-                y += 300;
-            }
-        }
-        //return Docs.Create.TreeDocument(docs, { _width: 200, _height: 400, backgroundColor: "grey", title: `Search Docs: "${this._searchString}"` });
-        return Docs.Create.QueryDocument({ _width: 200, _height: 400, searchText: this._searchString, title: `Query Docs: "${this._searchString}"` });
-    }
-
-    @action.bound
-    openSearch(e: React.SyntheticEvent) {
-        e.stopPropagation();
-        this._openNoResults = false;
-        FilterBox.Instance.closeFilter();
-        this._resultsOpen = true;
-        this._searchbarOpen = true;
-        FilterBox.Instance._pointerTime = e.timeStamp;
-    }
-
-    @action.bound
-    closeSearch = () => {
-        FilterBox.Instance.closeFilter();
-        this.closeResults();
-        this._searchbarOpen = false;
-    }
-
-    @action.bound
-    closeResults() {
-        this._resultsOpen = false;
-        this._results = [];
-        this._resultsSet.clear();
-        this._visibleElements = [];
-        this._numTotalResults = -1;
-        this._endIndex = -1;
-        this._curRequest = undefined;
-    }
-
-    @action
-    resultsScrolled = (e?: React.UIEvent<HTMLDivElement>) => {
-        if (!this.resultsRef.current) return;
-        const scrollY = e ? e.currentTarget.scrollTop : this.resultsRef.current ? this.resultsRef.current.scrollTop : 0;
-        const itemHght = 53;
-        const startIndex = Math.floor(Math.max(0, scrollY / itemHght));
-        const endIndex = Math.ceil(Math.min(this._numTotalResults - 1, startIndex + (this.resultsRef.current.getBoundingClientRect().height / itemHght)));
-
-        this._endIndex = endIndex === -1 ? 12 : endIndex;
-
-        if ((this._numTotalResults === 0 || this._results.length === 0) && this._openNoResults) {
-            this._visibleElements = [<div className="no-result">No Search Results</div>];
-            return;
-        }
-
-        if (this._numTotalResults <= this._maxSearchIndex) {
-            this._numTotalResults = this._results.length;
-        }
-
-        // only hit right at the beginning
-        // visibleElements is all of the elements (even the ones you can't see)
-        else if (this._visibleElements.length !== this._numTotalResults) {
-            // undefined until a searchitem is put in there
-            this._visibleElements = Array<JSX.Element>(this._numTotalResults === -1 ? 0 : this._numTotalResults);
-            // indicates if things are placeholders
-            this._isSearch = Array<undefined>(this._numTotalResults === -1 ? 0 : this._numTotalResults);
-        }
-
-        for (let i = 0; i < this._numTotalResults; i++) {
-            //if the index is out of the window then put a placeholder in
-            //should ones that have already been found get set to placeholders?
-            if (i < startIndex || i > endIndex) {
-                if (this._isSearch[i] !== "placeholder") {
-                    this._isSearch[i] = "placeholder";
-                    this._visibleElements[i] = <div className="searchBox-placeholder" key={`searchBox-placeholder-${i}`}>Loading...</div>;
-                }
-            }
-            else {
-                if (this._isSearch[i] !== "search") {
-                    let result: [Doc, string[], string[]] | undefined = undefined;
-                    if (i >= this._results.length) {
-                        this.getResults(this._searchString);
-                        if (i < this._results.length) result = this._results[i];
-                        if (result) {
-                            const highlights = Array.from([...Array.from(new Set(result[1]).values())]);
-                            this._visibleElements[i] = <SearchItem doc={result[0]} query={this._searchString} key={result[0][Id]} lines={result[2]} highlighting={highlights} />;
-                            this._isSearch[i] = "search";
-                        }
-                    }
-                    else {
-                        result = this._results[i];
-                        if (result) {
-                            const highlights = Array.from([...Array.from(new Set(result[1]).values())]);
-                            this._visibleElements[i] = <SearchItem doc={result[0]} query={this._searchString} key={result[0][Id]} lines={result[2]} highlighting={highlights} />;
-                            this._isSearch[i] = "search";
-                        }
-                    }
-                }
-            }
-        }
-        if (this._maxSearchIndex >= this._numTotalResults) {
-            this._visibleElements.length = this._results.length;
-            this._isSearch.length = this._results.length;
-        }
-    }
-
-    @computed
-    get resFull() { return this._numTotalResults <= 8; }
-
-    @computed
-    get resultHeight() { return this._numTotalResults * 70; }
-
-    render() {
-        const isEditing = this.editingMetadata;
-        return !this.content ? (null) : (
-            <div style={{ pointerEvents: "all" }}>
-                <ContentFittingDocumentView {...this.props}
-                    Document={this.content}
-                    rootSelected={returnFalse}
-                    bringToFront={returnFalse}
-                    ContainingCollectionDoc={undefined}
-                    ContainingCollectionView={undefined}
-                    NativeWidth={returnZero}
-                    NativeHeight={returnZero}
-                    parentActive={this.props.active}
-                    ScreenToLocalTransform={this.props.ScreenToLocalTransform}>
-                </ContentFittingDocumentView>
-                <div
-                    style={{
-                        position: "absolute",
-                        right: 0,
-                        width: 20,
-                        height: 20,
-                        background: "black",
-                        pointerEvents: "all",
-                        opacity: 1,
-                        transition: "0.4s opacity ease",
-                        zIndex: 99,
-                        top: 0,
-                    }}
-                    title={"Add Metadata"}
-                    onClick={action(() => this.editingMetadata = !this.editingMetadata)}
-                />
-                <div className="editableclass" onKeyPress={this.enter} style={{ opacity: isEditing ? 1 : 0, pointerEvents: isEditing ? "auto" : "none", transition: "0.4s opacity ease", position: "absolute", top: 0, left: 0, height: 20, width: "-webkit-fill-available" }}>
-                    <EditableView
-                        contents={this.query}
-                        SetValue={this.updateKey}
-                        GetValue={() => ""}
-                    />
-                </div>
-            </div >
-        );
-    }
-
-}
\ No newline at end of file
diff --git a/src/client/views/collections/CollectionSchemaCells.tsx b/src/client/views/collections/CollectionSchemaCells.tsx
index ecd20eb06..6e19bb029 100644
--- a/src/client/views/collections/CollectionSchemaCells.tsx
+++ b/src/client/views/collections/CollectionSchemaCells.tsx
@@ -242,7 +242,7 @@ export class CollectionSchemaCell extends React.Component<CellProps> {
         //     </div>
         // );   
         trace();
-        let positions = [];
+        const positions = [];
         if (StrCast(this.props.Document._searchString) !== "") {
             const cfield = ComputedField.WithoutComputed(() => FieldValue(props.Document[props.fieldKey]));
             let term = "";
@@ -257,7 +257,7 @@ export class CollectionSchemaCell extends React.Component<CellProps> {
                     term = String(NumCast(cfield));
                 }
             }
-            let search = StrCast(this.props.Document._searchString)
+            let search = StrCast(this.props.Document._searchString);
             let start = term.indexOf(search) as number;
             let tally = 0;
             if (start !== -1) {
@@ -873,3 +873,83 @@ export class CollectionSchemaCheckboxCell extends CollectionSchemaCell {
         );
     }
 }
+
+
+@observer
+export class CollectionSchemaButtons extends CollectionSchemaCell {
+
+    render() {
+        // const reference = React.createRef<HTMLDivElement>();
+        // const onItemDown = (e: React.PointerEvent) => {
+        //     (!this.props.CollectionView || !this.props.CollectionView.props.isSelected() ? undefined :
+        //         SetupDrag(reference, () => this._document, this.props.moveDocument, this.props.Document.schemaDoc ? "copy" : undefined)(e));
+        // };
+        let doc = this.props.rowProps.original;
+        let buttons = <div style={{
+            paddingTop: 8,
+            paddingLeft: 3,
+        }}><button onClick={() => {
+            console.log(doc);
+            console.log(doc.searchMatch);
+            doc.searchMatch = false;
+            console.log(doc.searchMatch);
+            setTimeout(() => doc.searchMatch = true, 0);
+            console.log(doc.searchMatch);
+            doc.searchIndex = NumCast(doc.searchIndex);
+        }} style={{ padding: 2, left: 77 }}>
+                <FontAwesomeIcon icon="arrow-up" size="sm" />
+            </button>
+            <button onClick={() => {
+                {
+                    console.log(doc);
+                    console.log(doc.searchMatch2);
+                    doc.searchMatch2 = false;
+                    console.log(doc.searchMatch2);
+                    setTimeout(() => doc.searchMatch2 = true, 0);
+                    console.log(doc.searchMatch2);
+                    doc.searchIndex = NumCast(doc.searchIndex);
+                }
+            }} style={{ padding: 2 }}>
+                <FontAwesomeIcon icon="arrow-down" size="sm" />
+            </button></div>;
+        const type = StrCast(doc.type);
+        console.log(StrCast(doc.type));
+        if (type === "pdf") {
+            buttons = <div><button
+                style={{
+                    position: "relative",
+                    height: 30,
+                    width: 28,
+                    left: 1,
+                }}
+
+                onClick={() => {
+                    console.log(doc);
+                    console.log(doc.searchMatch);
+                    doc.searchMatch = false;
+                    console.log(doc.searchMatch);
+                    setTimeout(() => doc.searchMatch = true, 0);
+                    console.log(doc.searchMatch);
+                    doc.searchIndex = NumCast(doc.searchIndex);
+                }}>
+                <FontAwesomeIcon icon="arrow-down" size="sm" />
+            </button></div >
+        }
+        else if (type !== "rtf") {
+            console.log("sad");
+            buttons = undefined;
+        }
+
+        if (BoolCast(this.props.Document._searchDoc) === true) {
+
+        }
+        else {
+            buttons = undefined;
+        }
+
+        return (
+            <div> {buttons}</div>
+        );
+    }
+}
+
diff --git a/src/client/views/collections/CollectionSchemaHeaders.tsx b/src/client/views/collections/CollectionSchemaHeaders.tsx
index 5d7ab2c61..e65adcf76 100644
--- a/src/client/views/collections/CollectionSchemaHeaders.tsx
+++ b/src/client/views/collections/CollectionSchemaHeaders.tsx
@@ -302,7 +302,7 @@ export class KeysDropdown extends React.Component<KeysDropdownProps> {
     @action
     onSelect = (key: string): void => {
         if (key.slice(0, this._key.length) === this._key && this._key !== key) {
-            let filter = key.slice(this._key.length - key.length);
+            const filter = key.slice(this._key.length - key.length);
             this.props.onSelect(this._key, this._key, this.props.addNew, filter);
         }
         else {
@@ -395,12 +395,10 @@ export class KeysDropdown extends React.Component<KeysDropdownProps> {
 
     renderFilterOptions = (): JSX.Element[] | JSX.Element => {
         if (!this._isOpen) return <></>;
-
         const keyOptions: string[] = [];
-        console.log(this._searchTerm.slice(this._key.length))
-        let temp = this._searchTerm.slice(this._key.length);
+        const temp = this._searchTerm.slice(this._key.length);
         this.props.docs?.forEach((doc) => {
-            let key = StrCast(doc[this._key]);
+            const key = StrCast(doc[this._key]);
             if (keyOptions.includes(key) === false && key.includes(temp)) {
                 keyOptions.push(key);
             }
diff --git a/src/client/views/collections/CollectionSchemaView.scss b/src/client/views/collections/CollectionSchemaView.scss
index 93878d799..2dcd6d6c0 100644
--- a/src/client/views/collections/CollectionSchemaView.scss
+++ b/src/client/views/collections/CollectionSchemaView.scss
@@ -93,7 +93,7 @@
     }
 
     .rt-tbody {
-        width: calc(100% - 2px);
+        width: 100%;
         direction: rtl;
         overflow: visible;
     }
diff --git a/src/client/views/collections/CollectionSubView.tsx b/src/client/views/collections/CollectionSubView.tsx
index 88241f519..bf3129a8a 100644
--- a/src/client/views/collections/CollectionSubView.tsx
+++ b/src/client/views/collections/CollectionSubView.tsx
@@ -130,9 +130,60 @@ export function CollectionSubView<T, X>(schemaCtor: (doc: Doc) => T, moreProps?:
             let childDocs = viewSpecScript ? docs.filter(d => viewSpecScript.script.run({ doc: d }, console.log).result) : docs;
 
             const searchDocs = DocListCast(this.props.Document._searchDocs);
+            // if (searchDocs !== undefined && searchDocs.length > 0) {
+            //     let newdocs: Doc[] = [];
+            //     childDocs.forEach((el) => {
+            //         searchDocs.includes(el) ? newdocs.push(el) : undefined;
+            //     });
+            //     childDocs = newdocs;
+            // }
+
+            let docsforFilter: Doc[] = childDocs;
             if (searchDocs !== undefined && searchDocs.length > 0) {
-                childDocs = searchDocs;
+                docsforFilter = [];
+                // let newdocs: Doc[] = [];
+                // let newarray: Doc[] = [];
+                //while (childDocs.length > 0) {
+                //newarray = [];
+                childDocs.forEach((d) => {
+                    if (d.data !== undefined) {
+                        console.log(d);
+                        let newdocs = DocListCast(d.data);
+                        if (newdocs.length > 0) {
+                            let vibecheck = false;
+
+                            let newarray: Doc[] = [];
+
+                            while (newdocs.length > 0) {
+                                newarray = [];
+                                newdocs.forEach((t) => {
+                                    if (d.data !== undefined) {
+                                        let newdocs = DocListCast(t.data);
+                                        newdocs.forEach((newdoc) => {
+                                            newarray.push(newdoc);
+                                        });
+                                    }
+                                    if (searchDocs.includes(t)) {
+                                        vibecheck = true;
+                                    }
+                                });
+                                newdocs = newarray;
+                            }
+                            if (vibecheck === true) {
+                                docsforFilter.push(d);
+                            }
+                        }
+                    }
+                    if (searchDocs.includes(d)) {
+                        docsforFilter.push(d);
+                    }
+                });
+                //childDocs = newarray;
+                //}
             }
+            childDocs = docsforFilter;
+
+
             const docFilters = this.docFilters();
             const docRangeFilters = this.props.ignoreFields?.includes("_docRangeFilters") ? [] : Cast(this.props.Document._docRangeFilters, listSpec("string"), []);
 
diff --git a/src/client/views/collections/SchemaTable.tsx b/src/client/views/collections/SchemaTable.tsx
index 9d02807fd..8b7717ad1 100644
--- a/src/client/views/collections/SchemaTable.tsx
+++ b/src/client/views/collections/SchemaTable.tsx
@@ -19,7 +19,7 @@ import { undoBatch } from "../../util/UndoManager";
 import { COLLECTION_BORDER_WIDTH } from '../../views/globalCssVariables.scss';
 import { ContextMenu } from "../ContextMenu";
 import '../DocumentDecorations.scss';
-import { CellProps, CollectionSchemaCell, CollectionSchemaCheckboxCell, CollectionSchemaDocCell, CollectionSchemaNumberCell, CollectionSchemaStringCell, CollectionSchemaImageCell, CollectionSchemaListCell, CollectionSchemaDateCell } from "./CollectionSchemaCells";
+import { CellProps, CollectionSchemaCell, CollectionSchemaCheckboxCell, CollectionSchemaDocCell, CollectionSchemaNumberCell, CollectionSchemaStringCell, CollectionSchemaImageCell, CollectionSchemaListCell, CollectionSchemaDateCell, CollectionSchemaButtons } from "./CollectionSchemaCells";
 import { CollectionSchemaAddColumnHeader, KeysDropdown } from "./CollectionSchemaHeaders";
 import { MovableColumn, MovableRow } from "./CollectionSchemaMovableTableHOC";
 import "./CollectionSchemaView.scss";
@@ -160,7 +160,7 @@ export class SchemaTable extends React.Component<SchemaTableProps> {
         const focusedCol = this._focusedCell.col;
         const isEditable = !this.props.headerIsEditing;
 
-        if (this.childDocs.reduce((found, doc) => found || doc.type === "collection", false)) {
+        if (this.childDocs.reduce((found, doc) => found || doc.type === "nnnnn", false)) {
             columns.push(
                 {
                     expander: true,
@@ -283,12 +283,34 @@ export class SchemaTable extends React.Component<SchemaTableProps> {
             Header: <CollectionSchemaAddColumnHeader createColumn={this.createColumn} />,
             accessor: (doc: Doc) => 0,
             id: "add",
-            Cell: (rowProps: CellInfo) => <div> <button onClick={(e) => this.nextHighlight(e, this.props.Document)} style={{ padding: 2, left: 77 }}>
-                <FontAwesomeIcon icon="arrow-up" size="sm" />
-            </button>
-                <button onClick={(e) => this.nextHighlight2(e, this.props.Document)} style={{ padding: 2, left: 87 }}>
-                    <FontAwesomeIcon icon="arrow-down" size="sm" />
-                </button></div>,
+            Cell: (rowProps: CellInfo) => {
+                const rowIndex = rowProps.index;
+                const columnIndex = this.props.columns.map(c => c.heading).indexOf(rowProps.column.id!);
+                const isFocused = focusedRow === rowIndex && focusedCol === columnIndex && tableIsFocused;
+                const props: CellProps = {
+                    row: rowIndex,
+                    col: columnIndex,
+                    rowProps: rowProps,
+                    isFocused: isFocused,
+                    changeFocusedCellByIndex: this.changeFocusedCellByIndex,
+                    CollectionView: this.props.CollectionView,
+                    ContainingCollection: this.props.ContainingCollectionView,
+                    Document: this.props.Document,
+                    fieldKey: this.props.fieldKey,
+                    renderDepth: this.props.renderDepth,
+                    addDocTab: this.props.addDocTab,
+                    pinToPres: this.props.pinToPres,
+                    moveDocument: this.props.moveDocument,
+                    setIsEditing: this.setCellIsEditing,
+                    isEditable: isEditable,
+                    setPreviewDoc: this.props.setPreviewDoc,
+                    setComputed: this.setComputed,
+                    getField: this.getField,
+                    showDoc: this.showDoc,
+                };
+
+                return <CollectionSchemaButtons {...props} />;
+            },
             width: 28,
             resizable: false
         });
@@ -301,16 +323,17 @@ export class SchemaTable extends React.Component<SchemaTableProps> {
     nextHighlight = (e: React.MouseEvent, doc: Doc) => {
         e.preventDefault();
         e.stopPropagation();
-
         doc.searchMatch = false;
+        console.log(doc.searchMatch);
         setTimeout(() => doc.searchMatch = true, 0);
+        console.log(doc.searchMatch);
+
         doc.searchIndex = NumCast(doc.searchIndex);
     }
 
     @action
-    nextHighlight2 = (e: React.MouseEvent, doc: Doc) => {
-        e.preventDefault();
-        e.stopPropagation();
+    nextHighlight2 = (doc: Doc) => {
+
         doc.searchMatch2 = false;
         setTimeout(() => doc.searchMatch2 = true, 0);
         doc.searchIndex = NumCast(doc.searchIndex);
diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx
index f5e0cd077..031dbf884 100644
--- a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx
+++ b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx
@@ -539,7 +539,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
 
     getField(key: string) {
         //if (this.selectedDoc) {
-        return Field.toString(this.selectedDoc[key] as Field);
+        return Field.toString(this.selectedDoc![key] as Field);
         // } else {
         //     return undefined as Opt<string>;
         // }
diff --git a/src/client/views/nodes/DocumentContentsView.tsx b/src/client/views/nodes/DocumentContentsView.tsx
index c724ba50b..1282bbee5 100644
--- a/src/client/views/nodes/DocumentContentsView.tsx
+++ b/src/client/views/nodes/DocumentContentsView.tsx
@@ -25,7 +25,6 @@ import { KeyValueBox } from "./KeyValueBox";
 import { PDFBox } from "./PDFBox";
 import { PresBox } from "./PresBox";
 import { SearchBox } from "../search/SearchBox";
-import { SearchItem } from "../search/SearchItem"
 import { ColorBox } from "./ColorBox";
 import { DashWebRTCVideo } from "../webcam/DashWebRTCVideo";
 import { LinkAnchorBox } from "./LinkAnchorBox";
@@ -192,7 +191,7 @@ export class DocumentContentsView extends React.Component<DocumentViewProps & {
                 components={{
                     FormattedTextBox, ImageBox, DirectoryImportBox, FontIconBox, LabelBox, SliderBox, FieldView,
                     CollectionFreeFormView, CollectionDockingView, CollectionSchemaView, CollectionView, WebBox, KeyValueBox,
-                    PDFBox, VideoBox, AudioBox, PresBox, YoutubeBox, PresElementBox, SearchBox, SearchItem,
+                    PDFBox, VideoBox, AudioBox, PresBox, YoutubeBox, PresElementBox, SearchBox,
                     ColorBox, DashWebRTCVideo, LinkAnchorBox, InkingStroke, DocHolderBox, LinkBox, ScriptingBox,
                     ScreenshotBox, HTMLtag, ComparisonBox
                 }}
diff --git a/src/client/views/nodes/LabelBox.tsx b/src/client/views/nodes/LabelBox.tsx
index 302d66cc5..10a164158 100644
--- a/src/client/views/nodes/LabelBox.tsx
+++ b/src/client/views/nodes/LabelBox.tsx
@@ -70,7 +70,7 @@ export class LabelBox extends ViewBoxBaseComponent<FieldViewProps, LabelDocument
         const missingParams = params?.filter(p => !this.paramsDoc[p]);
         params?.map(p => DocListCast(this.paramsDoc[p])); // bcz: really hacky form of prefetching ... 
         return (
-            <div className="labelBox-outerDiv" onClick={() => runInAction(() => { this.clicked = !this.clicked; this.clicked ? this.backColor = StrCast(this.layoutDoc.hovercolor) : this.backColor = "unset" })} onMouseLeave={() => runInAction(() => { !this.clicked ? this.backColor = "unset" : null })}
+            <div className="labelBox-outerDiv" onClick={() => runInAction(() => { this.clicked = !this.clicked; this.clicked ? this.backColor = StrCast(this.layoutDoc.hovercolor) : this.backColor = "unset"; })} onMouseLeave={() => runInAction(() => { !this.clicked ? this.backColor = "unset" : null; })}
                 onMouseOver={() => runInAction(() => { this.backColor = StrCast(this.layoutDoc.hovercolor); })} ref={this.createDropTarget} onContextMenu={this.specificContextMenu}
                 style={{ boxShadow: this.layoutDoc.opacity ? StrCast(this.layoutDoc.boxShadow) : "" }}>
                 <div className="labelBox-mainButton" style={{
diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
index 79cf5c5fd..b21596493 100644
--- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx
+++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
@@ -309,7 +309,6 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp
             this._searchIndex = ++this._searchIndex > flattened.length - 1 ? 0 : this._searchIndex;
             this._editorView.dispatch(tr.setSelection(new TextSelection(tr.doc.resolve(flattened[lastSel].from), tr.doc.resolve(flattened[lastSel].to))).scrollIntoView());
 
-            console.log(this._searchIndex, length);
             if (this._searchIndex > 1) {
                 this._searchIndex += -2;
             }
diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx
index b76955815..acdd8d047 100644
--- a/src/client/views/search/SearchBox.tsx
+++ b/src/client/views/search/SearchBox.tsx
@@ -39,14 +39,6 @@ export enum Keys {
     TEXT = "text"
 }
 
-export interface filterData {
-    deletedDocsStatus: boolean;
-    authorFieldStatus: boolean;
-    titleFieldStatus: boolean;
-    basicWordStatus: boolean;
-    icons: string[];
-}
-
 type SearchBoxDocument = makeInterface<[typeof documentSchema, typeof searchSchema]>;
 const SearchBoxDocument = makeInterface(documentSchema, searchSchema);
 
@@ -89,55 +81,16 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
     @observable private newAssign: boolean = true;
 
     constructor(props: any) {
-
         super(props);
         SearchBox.Instance = this;
-        if (!_scriptingGlobals.hasOwnProperty("handleNodeChange")) {
-            Scripting.addGlobal(this.handleNodeChange);
-        }
-        if (!_scriptingGlobals.hasOwnProperty("handleKeyChange")) {
-            Scripting.addGlobal(this.handleKeyChange);
-        }
-        if (!_scriptingGlobals.hasOwnProperty("handleWordQueryChange")) {
-            Scripting.addGlobal(this.handleWordQueryChange);
-        }
-        if (!_scriptingGlobals.hasOwnProperty("updateIcon")) {
-            Scripting.addGlobal(this.updateIcon);
-        }
-        if (!_scriptingGlobals.hasOwnProperty("updateTitleStatus")) {
-            Scripting.addGlobal(this.updateTitleStatus);
-        }
-        if (!_scriptingGlobals.hasOwnProperty("updateAuthorStatus")) {
-            Scripting.addGlobal(this.updateAuthorStatus);
-        }
-        if (!_scriptingGlobals.hasOwnProperty("updateDeletedStatus")) {
-            Scripting.addGlobal(this.updateDeletedStatus);
-        }
-
-
         this.resultsScrolled = this.resultsScrolled.bind(this);
 
-        // new PrefetchProxy(Docs.Create.SearchItemBoxDocument({
-        //     title: "search item template",
-        //     backgroundColor: "transparent", _xMargin: 5, _height: 46, isTemplateDoc: true, isTemplateForField: "data"
-        // }));
-
-
-        // if (!this.searchItemTemplate) { // create exactly one presElmentBox template to use by any and all presentations.
-        //     Doc.UserDoc().searchItemTemplate = new PrefetchProxy(Docs.Create.SearchItemBoxDocument({ title: "search item template", backgroundColor: "transparent", _xMargin: 5, _height: 46, isTemplateDoc: true, isTemplateForField: "data" }));
-        //     // this script will be called by each presElement to get rendering-specific info that the PresBox knows about but which isn't written to the PresElement
-        //     // this is a design choice -- we could write this data to the presElements which would require a reaction to keep it up to date, and it would prevent
-        //     // the preselement docs from being part of multiple presentations since they would all have the same field, or we'd have to keep per-presentation data
-        //     // stored on each pres element.  
-        //     (this.searchItemTemplate as Doc).lookupField = ScriptField.MakeFunction("lookupSearchBoxField(container, field, data)",
-        //         { field: "string", data: Doc.name, container: Doc.name });
-        // }
     }
     @observable setupButtons = false;
     componentDidMount = () => {
-        if (this.setupButtons == false) {
+        if (this.setupButtons === false) {
 
-            runInAction(() => this.setupButtons == true);
+            runInAction(() => this.setupButtons = true);
         }
         if (this.inputRef.current) {
             this.inputRef.current.focus();
@@ -163,7 +116,7 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
 
 
     @action
-    getViews = (doc: Doc) => SearchUtil.GetViewsOfDocument(doc)
+    getViews = (doc: Doc) => SearchUtil.GetViewsOfDocument(doc);
 
 
     @observable newsearchstring: string = "";
@@ -203,9 +156,7 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
     enter = (e: React.KeyboardEvent) => {
         if (e.key === "Enter") {
             this.layoutDoc._searchString = this.newsearchstring;
-            // if (this._icons !== this._allIcons) {
-            //     runInAction(() => { this.expandedBucket = false });
-            // }
+
             if (StrCast(this.layoutDoc._searchString) !== "") {
                 console.log("OPEN");
                 runInAction(() => { this.open = true });
@@ -213,11 +164,8 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
             else {
                 console.log("CLOSE");
                 runInAction(() => { this.open = false });
-
             }
             this.submitSearch();
-
-
         }
     }
 
@@ -365,46 +313,58 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
                 this.props.Document.selectedDoc = selectedCollection.props.Document;
             }
             let docs = DocListCast(selectedCollection.dataDoc[Doc.LayoutFieldKey(selectedCollection.dataDoc)]);
-            let found: [Doc, string[], string[]][] = [];
-            let docsforFilter: Doc[] = []
+            const found: [Doc, string[], string[]][] = [];
+            const docsforFilter: Doc[] = []
             let newarray: Doc[] = [];
 
             while (docs.length > 0) {
                 newarray = [];
                 docs.forEach((d) => {
-                    if (d.data != undefined) {
+                    if (d.data !== undefined) {
                         let newdocs = DocListCast(d.data);
                         newdocs.forEach((newdoc) => {
                             newarray.push(newdoc);
 
                         });
                     }
-
-
-                    let hlights: string[] = [];
-
+                    const hlights: string[] = [];
                     const protos = Doc.GetAllPrototypes(d);
-                    let proto = protos[protos.length - 1];
                     protos.forEach(proto => {
                         Object.keys(proto).forEach(key => {
-                            // console.log(key, d[key]);
                             if (StrCast(d[key]).includes(query) && !hlights.includes(key)) {
                                 hlights.push(key);
                             }
-                        })
+                        });
                     });
                     if (hlights.length > 0) {
                         found.push([d, hlights, []]);
                         docsforFilter.push(d);
-                    };
+                    }
                 });
                 docs = newarray;
             }
             this._results = found;
             this.docsforfilter = docsforFilter;
             if (this.filter === true) {
-                console.log(docsforFilter);
                 selectedCollection.props.Document._searchDocs = new List<Doc>(docsforFilter);
+                docs = DocListCast(selectedCollection.dataDoc[Doc.LayoutFieldKey(selectedCollection.dataDoc)]);
+                while (docs.length > 0) {
+                    console.log("HIT");
+                    newarray = [];
+                    docs.forEach((d) => {
+                        if (d.data !== undefined) {
+                            console.log(d._searchDocs);
+                            d._searchDocs = new List<Doc>(docsforFilter);
+                            console.log(d);
+                            console.log(d._searchDocs);
+                            let newdocs = DocListCast(d.data);
+                            newdocs.forEach((newdoc) => {
+                                newarray.push(newdoc);
+                            });
+                        }
+                    });
+                    docs = newarray;
+                }
             }
             this._numTotalResults = found.length;
         }
@@ -468,7 +428,6 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
 
     @action
     submitSearch = async (reset?: boolean) => {
-        this.checkIcons();
         if (reset) {
             this.layoutDoc._searchString = "";
         }
@@ -644,13 +603,6 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
                 y += 300;
             }
         }
-        const filter: filterData = {
-            deletedDocsStatus: this._deletedDocsStatus,
-            authorFieldStatus: this._authorFieldStatus,
-            titleFieldStatus: this._titleFieldStatus,
-            basicWordStatus: this._basicWordStatus,
-            icons: this._icons,
-        }
         return Docs.Create.SearchDocument({ _autoHeight: true, _viewType: CollectionViewType.Schema, title: StrCast(this.layoutDoc._searchString), searchQuery: StrCast(this.layoutDoc._searchString) });
     }
 
@@ -693,7 +645,7 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
         const endIndex = 30;
         //this._endIndex = endIndex === -1 ? 12 : endIndex;
         this._endIndex = 30;
-        let headers = new Set<string>(["title", "author", "text", "lastModified"]);
+        const headers = new Set<string>(["title", "author", "lastModified", "text"]);
         if ((this._numTotalResults === 0 || this._results.length === 0) && this._openNoResults) {
             if (this.noresults === "") {
                 this.noresults = "No search results :(";
@@ -734,7 +686,7 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
                         if (i < this._results.length) result = this._results[i];
                         if (result) {
                             const highlights = Array.from([...Array.from(new Set(result[1]).values())]);
-                            let lines = new List<string>(result[2]);
+                            const lines = new List<string>(result[2]);
                             console.log(lines);
                             result[0].lines = lines;
                             result[0].highlighting = highlights.join(", ");
@@ -751,7 +703,7 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
                         result = this._results[i];
                         if (result) {
                             const highlights = Array.from([...Array.from(new Set(result[1]).values())]);
-                            let lines = new List<string>(result[2]);
+                            const lines = new List<string>(result[2]);
                             highlights.forEach((item) => headers.add(item));
                             console.log(lines);
                             result[0].lines = lines;
@@ -769,9 +721,9 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
                 }
             }
         }
-        let schemaheaders: SchemaHeaderField[] = [];
+        const schemaheaders: SchemaHeaderField[] = [];
         this.headerscale = headers.size;
-        headers.forEach((item) => schemaheaders.push(new SchemaHeaderField(item, "#f1efeb")))
+        headers.forEach((item) => schemaheaders.push(new SchemaHeaderField(item, "#f1efeb")));
         this.headercount = schemaheaders.length;
         this.props.Document._schemaHeaders = new List<SchemaHeaderField>(schemaheaders);
         if (this._maxSearchIndex >= this._numTotalResults) {
@@ -784,8 +736,8 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
     @observable headerscale: number = 0;
 
     findCommonElements(arr2: string[]) {
-        let arr1 = ["layout", "data"];
-        return arr1.some(item => arr2.includes(item))
+        const arr1 = ["layout", "data"];
+        return arr1.some(item => arr2.includes(item));
     }
 
     @computed
@@ -794,210 +746,10 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
     @computed
     get resultHeight() { return this._numTotalResults * 70; }
 
-    //if true, any keywords can be used. if false, all keywords are required.
-    @action.bound
-    handleWordQueryChange = async () => {
-        this._collectionStatus = !this._collectionStatus;
-        if (this._collectionStatus) {
-            let doc = await Cast(this.props.Document.keywords, Doc)
-            doc!.backgroundColor = "grey";
-
-        }
-        else {
-            let doc = await Cast(this.props.Document.keywords, Doc)
-            doc!.backgroundColor = "black";
-        }
-    }
-
-    @action.bound
-    handleNodeChange = async () => {
-        this._nodeStatus = !this._nodeStatus;
-
-        if (this._nodeStatus) {
-            this.expandSection(`node${this.props.Document[Id]}`);
-            let doc = await Cast(this.props.Document.nodes, Doc)
-            doc!.backgroundColor = "grey";
-
-        }
-        else {
-            this.collapseSection(`node${this.props.Document[Id]}`);
-            let doc = await Cast(this.props.Document.nodes, Doc)
-            doc!.backgroundColor = "black";
-        }
-    }
-
-    @action.bound
-    handleKeyChange = async () => {
-        this._keyStatus = !this._keyStatus;
-        if (this._keyStatus) {
-            this.expandSection(`key${this.props.Document[Id]}`);
-            let doc = await Cast(this.props.Document.keys, Doc)
-            doc!.backgroundColor = "grey";
-        }
-        else {
-            this.collapseSection(`key${this.props.Document[Id]}`);
-            let doc = await Cast(this.props.Document.keys, Doc)
-            doc!.backgroundColor = "black";
-        }
-    }
-
-    @action.bound
-    handleFilterChange = () => {
-        this._filterOpen = !this._filterOpen;
-        if (this._filterOpen) {
-            this.expandSection(`filterhead${this.props.Document[Id]}`);
-            document.getElementById(`filterhead${this.props.Document[Id]}`)!.style.padding = "5";
-            console.log(this.props.Document[Id])
-        }
-        else {
-            this.collapseSection(`filterhead${this.props.Document[Id]}`);
-
-
-        }
-    }
-
-    @computed
-    get menuHeight() {
-        return document.getElementById("hi")?.clientHeight;
-    }
-
-
-    collapseSection(thing: string) {
-        const id = this.props.Document[Id];
-        const element = document.getElementById(thing)!;
-        // get the height of the element's inner content, regardless of its actual size
-        const sectionHeight = element.scrollHeight;
-
-        // temporarily disable all css transitions
-        const elementTransition = element.style.transition;
-        element.style.transition = '';
-
-        // on the next frame (as soon as the previous style change has taken effect),
-        // explicitly set the element's height to its current pixel height, so we 
-        // aren't transitioning out of 'auto'
-        requestAnimationFrame(function () {
-            element.style.height = sectionHeight + 'px';
-            element.style.transition = elementTransition;
-
-            // on the next frame (as soon as the previous style change has taken effect),
-            // have the element transition to height: 0
-            requestAnimationFrame(function () {
-                element.style.height = 0 + 'px';
-                thing === `filterhead${id}` ? document.getElementById(`filterhead${id}`)!.style.padding = "0" : null;
-            });
-        });
-
-        // mark the section as "currently collapsed"
-        element.setAttribute('data-collapsed', 'true');
-    }
-
-    expandSection(thing: string) {
-        const element = document.getElementById(thing)!;
-        // get the height of the element's inner content, regardless of its actual size
-        const sectionHeight = element.scrollHeight;
-
-        // have the element transition to the height of its inner content
-        element.style.height = sectionHeight + 'px';
-
-        // when the next css transition finishes (which should be the one we just triggered)
-        element.addEventListener('transitionend', function handler(e) {
-            // remove this event listener so it only gets triggered once
-            element.removeEventListener('transitionend', handler);
-
-            // remove "height" from the element's inline styles, so it can return to its initial value
-            element.style.height = "auto";
-            //element.style.height = undefined;
-        });
-
-        // mark the section as "currently not collapsed"
-        element.setAttribute('data-collapsed', 'false');
-
-    }
-
-    autoset(thing: string) {
-        const element = document.getElementById(thing)!;
-        element.removeEventListener('transitionend', function (e) { });
-
-        // remove "height" from the element's inline styles, so it can return to its initial value
-        element.style.height = "auto";
-        //element.style.height = undefined;
-    }
-
-    @action.bound
-    updateTitleStatus = async () => {
-        this._titleFieldStatus = !this._titleFieldStatus;
-        if (this._titleFieldStatus) {
-            let doc = await Cast(this.props.Document.title, Doc)
-            doc!.backgroundColor = "grey";
-        }
-        else {
-            let doc = await Cast(this.props.Document.title, Doc)
-            doc!.backgroundColor = "black";
-        }
-    }
-
-    @action.bound
-    updateAuthorStatus = async () => {
-        this._authorFieldStatus = !this._authorFieldStatus;
-        if (this._authorFieldStatus) {
-            let doc = await Cast(this.props.Document.author, Doc)
-            doc!.backgroundColor = "grey";
-        }
-        else {
-            let doc = await Cast(this.props.Document.author, Doc)
-            doc!.backgroundColor = "black";
-        }
-    }
-
-    @action.bound
-    updateDeletedStatus = async () => {
-        this._deletedDocsStatus = !this._deletedDocsStatus;
-        if (this._deletedDocsStatus) {
-            let doc = await Cast(this.props.Document.deleted, Doc)
-            doc!.backgroundColor = "grey";
-        }
-        else {
-            let doc = await Cast(this.props.Document.deleted, Doc)
-            doc!.backgroundColor = "black";
-        }
-    }
-
     addButtonDoc = (doc: Doc) => Doc.AddDocToList(CurrentUserUtils.UserDocument.expandingButtons as Doc, "data", doc);
     remButtonDoc = (doc: Doc) => Doc.RemoveDocFromList(CurrentUserUtils.UserDocument.expandingButtons as Doc, "data", doc);
     moveButtonDoc = (doc: Doc, targetCollection: Doc | undefined, addDocument: (document: Doc) => boolean) => this.remButtonDoc(doc) && addDocument(doc);
 
-    @action.bound
-    updateIcon = async (icon: string) => {
-        if (this._icons.includes(icon)) {
-            _.pull(this._icons, icon);
-            let cap = icon.charAt(0).toUpperCase() + icon.slice(1)
-            console.log(cap);
-            let doc = await Cast(this.props.Document[cap], Doc)
-            doc!.backgroundColor = "black";
-        }
-        else {
-            this._icons.push(icon);
-            let cap = icon.charAt(0).toUpperCase() + icon.slice(1)
-            let doc = await Cast(this.props.Document[cap], Doc)
-            doc!.backgroundColor = "grey";
-        }
-    }
-
-    @action.bound
-    checkIcons = async () => {
-        for (let i = 0; i < this._allIcons.length; i++) {
-
-            let cap = this._allIcons[i].charAt(0).toUpperCase() + this._allIcons[i].slice(1)
-            let doc = await Cast(this.props.Document[cap], Doc)
-            if (this._icons.includes(this._allIcons[i])) {
-                doc!.backgroundColor = "grey";
-            }
-            else {
-                doc!.backgroundColor = "black";
-            }
-        }
-    }
-
     @computed get searchItemTemplate() { return Cast(Doc.UserDoc().searchItemTemplate, Doc, null); }
 
     getTransform = () => {
@@ -1016,16 +768,15 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
 
     @observable filter = false;
 
-
     //Make id layour document
     render() {
         this.props.Document._chromeStatus === "disabled";
         this.props.Document._searchDoc = true;
-        let cols = Cast(this.props.Document._schemaHeaders, listSpec(SchemaHeaderField), []).length;
+        const cols = Cast(this.props.Document._schemaHeaders, listSpec(SchemaHeaderField), []).length;
         let length = 0;
         cols > 5 ? length = 1076 : length = cols * 205 + 51;
         let height = 0;
-        let rows = this.children;
+        const rows = this.children;
         rows > 8 ? height = 31 + 31 * 8 : height = 31 * rows + 31;
         return (
             <div style={{ pointerEvents: "all" }} className="searchBox-container">
@@ -1045,10 +796,52 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
                                 this.filter = !this.filter && !this.scale;
                                 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) {
+                                        console.log("HIT");
+                                        newarray = [];
+                                        docs.forEach((d) => {
+                                            if (d.data !== undefined) {
+                                                console.log(d._searchDocs);
+                                                d._searchDocs = new List<Doc>(this.docsforfilter);
+                                                console.log(d);
+                                                console.log(d._searchDocs);
+                                                let newdocs = DocListCast(d.data);
+                                                newdocs.forEach((newdoc) => {
+                                                    newarray.push(newdoc);
+                                                });
+                                            }
+                                        });
+                                        docs = newarray;
+                                    }
+
                                     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) {
+                                        console.log("HIT");
+                                        newarray = [];
+                                        docs.forEach((d) => {
+                                            if (d.data !== undefined) {
+                                                console.log(d._searchDocs);
+                                                d._searchDocs = new List<Doc>();
+                                                console.log(d);
+                                                console.log(d._searchDocs);
+                                                let newdocs = DocListCast(d.data);
+                                                newdocs.forEach((newdoc) => {
+                                                    newarray.push(newdoc);
+                                                });
+                                            }
+                                        });
+                                        docs = newarray;
+                                    }
+
                                     this.currentSelectedCollection.props.Document._searchDocs = new List<Doc>([]);
                                     this.currentSelectedCollection.props.Document._docFilters = undefined;
                                     this.props.Document.selectedDoc = undefined;
@@ -1075,12 +868,32 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
                                                     this.scale = !this.scale;
                                                     this.dataDoc[this.fieldKey] = new List<Doc>([]);
                                                     if (this.currentSelectedCollection !== undefined) {
+                                                        let newarray: Doc[] = [];
+                                                        let docs: Doc[] = [];
+                                                        docs = DocListCast(this.currentSelectedCollection.dataDoc[Doc.LayoutFieldKey(this.currentSelectedCollection.dataDoc)]);
+                                                        while (docs.length > 0) {
+                                                            console.log("HIT");
+                                                            newarray = [];
+                                                            docs.forEach((d) => {
+                                                                if (d.data !== undefined) {
+                                                                    console.log(d._searchDocs);
+                                                                    d._searchDocs = new List<Doc>();
+                                                                    console.log(d);
+                                                                    console.log(d._searchDocs);
+                                                                    let newdocs = DocListCast(d.data);
+                                                                    newdocs.forEach((newdoc) => {
+                                                                        newarray.push(newdoc);
+                                                                    });
+                                                                }
+                                                            });
+                                                            docs = newarray;
+                                                        }
                                                         this.currentSelectedCollection.props.Document._docFilters = undefined;
                                                         this.currentSelectedCollection.props.Document._searchDocs = undefined;
                                                         this.currentSelectedCollection = undefined;
                                                     }
                                                     this.submitSearch();
-                                                })
+                                                });
                                             }} />
                                         Collection
                                     </label>
@@ -1093,12 +906,32 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
                                                     this.dataDoc[this.fieldKey] = new List<Doc>([]);
                                                     this.filter = false;
                                                     if (this.currentSelectedCollection !== undefined) {
+                                                        let newarray: Doc[] = [];
+                                                        let docs: Doc[] = [];
+                                                        docs = DocListCast(this.currentSelectedCollection.dataDoc[Doc.LayoutFieldKey(this.currentSelectedCollection.dataDoc)]);
+                                                        while (docs.length > 0) {
+                                                            console.log("HIT");
+                                                            newarray = [];
+                                                            docs.forEach((d) => {
+                                                                if (d.data !== undefined) {
+                                                                    console.log(d._searchDocs);
+                                                                    d._searchDocs = new List<Doc>();
+                                                                    console.log(d);
+                                                                    console.log(d._searchDocs);
+                                                                    let newdocs = DocListCast(d.data);
+                                                                    newdocs.forEach((newdoc) => {
+                                                                        newarray.push(newdoc);
+                                                                    });
+                                                                }
+                                                            });
+                                                            docs = newarray;
+                                                        }
                                                         this.currentSelectedCollection.props.Document._docFilters = undefined;
                                                         this.currentSelectedCollection.props.Document._searchDocs = undefined;
                                                         this.currentSelectedCollection = undefined;
                                                     }
                                                     this.submitSearch();
-                                                })
+                                                });
                                             }} />
                                             DB
                                     </label>
@@ -1140,13 +973,3 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
         );
     }
 }
-
-Scripting.addGlobal(function lookupSearchBoxField(container: Doc, field: string, data: Doc) {
-    // if (field === 'indexInPres') return DocListCast(container[StrCast(container.presentationFieldKey)]).indexOf(data);
-    // if (field === 'presCollapsedHeight') return container._viewType === CollectionViewType.Schema ? 50 : 46;
-    // if (field === 'presStatus') return container.presStatus;
-    // if (field === '_itemIndex') return container._itemIndex;
-    if (field == "query") return container._searchString;
-    return undefined;
-});
-
diff --git a/src/client/views/search/SearchItem.scss b/src/client/views/search/SearchItem.scss
deleted file mode 100644
index 5ce022d41..000000000
--- a/src/client/views/search/SearchItem.scss
+++ /dev/null
@@ -1,186 +0,0 @@
-@import "../globalCssVariables";
-
-.searchItem-overview {
-    display: flex;
-    flex-direction: reverse;
-    justify-content: flex-end;
-    z-index: 0;
-}
-
-.searchBox-placeholder,
-.searchItem-overview .searchItem {
-    width: 100%;
-    background: $light-color-secondary;
-    padding: 8px;
-    min-height: 46px;
-    height:46px;
-    max-height: 150px;
-    height: auto;
-    z-index: 0;
-    display: flex;
-    overflow: visible;
-    box-shadow: rgb(156, 147, 150) 0.2vw 0.2vw 0.8vw;
-
-    .searchItem-body {
-        display: flex;
-        flex-direction: row;
-        width: 100%;
-
-        .searchItem-title-container {
-            width: 100%;
-            overflow: hidden;
-
-            .searchItem-title {
-                text-transform: uppercase;
-                text-align: left;
-                width: 100%;
-                font-weight: bold;
-            }
-        }
-
-        .searchItem-info {
-            display: flex;
-            justify-content: flex-end;
-
-            .icon-icons {
-                width: 50px
-            }
-
-            .icon-live {
-                width: 175px;
-                height: 0px;
-            }
-
-            .icon-icons {
-                height:auto;
-            }
-            .icon-icons,
-            .icon-live {
-                margin: auto;
-                overflow: visible;
-
-                .searchItem-type {
-                    display: inline-block;
-                    width: 100%;
-                    position: absolute;
-                    justify-content: center;
-                    align-items: center;
-                    position: relative;
-                    margin-right: 5px;
-                }
-
-                .pdfBox-cont {
-                    overflow: hidden;
-
-                    img {
-                        width: 100% !important;
-                        height: auto !important;
-                    }
-                }
-
-                .searchItem-type:hover+.searchItem-label {
-                    opacity: 1;
-                }
-
-                .searchItem-label {
-                    font-size: 10;
-                    position: relative;
-                    right: 0px;
-                    text-transform: capitalize;
-                    opacity: 0;
-                    -webkit-transition: opacity 0.2s ease-in-out;
-                    -moz-transition: opacity 0.2s ease-in-out;
-                    -o-transition: opacity 0.2s ease-in-out;
-                    transition: opacity 0.2s ease-in-out;
-                }
-            }
-
-            .icon-live:hover {
-                .pdfBox-cont {
-                    img {
-                        width: 100% !important;
-                    }
-                }
-            }
-        }
-
-        .searchItem-info:hover {
-            width: 60%;
-        }
-    }
-}
-
-.searchItem:hover~.searchBox-instances,
-.searchBox-instances:hover,
-.searchBox-instances:active {
-    opacity: 1;
-    background: $lighter-alt-accent;
-}
-
-.searchItem:hover {
-    transition: all 0.2s;
-    background: $lighter-alt-accent;
-}
-
-.searchItem-highlighting {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: pre;
-}
-
-.searchBox-instances {
-    opacity: 1;
-    width:40px;
-    height:40px;
-    background: gray;
-    transition: all 0.2s ease;
-    color: black;
-    overflow: hidden;
-    right:-100;
-    display:inline-block;
-}
-
-
-.searchItem-overview:hover {
-    z-index: 1;
-}
-
-.searchBox-placeholder {
-    min-height: 46px;
-    margin-left: 150px;
-    width: calc(100% - 150px);
-    text-transform: uppercase;
-    text-align: left;
-    font-weight: bold;
-}
-
-.collection {
-    display: flex;
-}
-
-.collection-item {
-    width: 35px;
-}
-
-.bucket-title{
-    width:auto;
-    padding: 5px;
-    height: auto;
-    top: -18;
-    z-index: 55;
-    position: absolute;
-}
-
-.bucket-expand{
-    bottom: 0;
-    position: absolute;
-    width: 100%;
-    height: 15;
-    transform:none;
-    .bucket-expand:hover{
-        transform:none;
-    }
-    button:hover{
-        transform:none;
-    }
-}
\ No newline at end of file
diff --git a/src/client/views/search/SearchItem.tsx b/src/client/views/search/SearchItem.tsx
deleted file mode 100644
index b61ed450f..000000000
--- a/src/client/views/search/SearchItem.tsx
+++ /dev/null
@@ -1,556 +0,0 @@
-import React = require("react");
-import { library } from '@fortawesome/fontawesome-svg-core';
-import { faCaretUp, faChartBar, faFile, faFilePdf, faFilm, faFingerprint, faGlobeAsia, faImage, faLink, faMusic, faObjectGroup, faStickyNote } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { action, computed, observable, runInAction, IReactionDisposer, reaction } from "mobx";
-import { observer } from "mobx-react";
-import { Doc, DocCastAsync } from "../../../fields/Doc";
-import { Id } from "../../../fields/FieldSymbols";
-import { Cast, NumCast, StrCast } from "../../../fields/Types";
-import { emptyFunction, emptyPath, returnFalse, Utils, returnTrue, returnOne, returnZero, returnEmptyString, returnEmptyFilter } from "../../../Utils";
-import { DocumentType } from "../../documents/DocumentTypes";
-import { DocumentManager } from "../../util/DocumentManager";
-import { DragManager, SetupDrag } from "../../util/DragManager";
-import { SearchUtil } from "../../util/SearchUtil";
-import { Transform } from "../../util/Transform";
-import { SEARCH_THUMBNAIL_SIZE } from "../../views/globalCssVariables.scss";
-import { CollectionDockingView } from "../collections/CollectionDockingView";
-import { CollectionViewType, CollectionView } from "../collections/CollectionView";
-import { ParentDocSelector } from "../collections/ParentDocumentSelector";
-import { ContextMenu } from "../ContextMenu";
-import { ContentFittingDocumentView } from "../nodes/ContentFittingDocumentView";
-import { SearchBox } from "./SearchBox";
-import "./SearchItem.scss";
-import "./SelectorContextMenu.scss";
-import { FieldViewProps, FieldView } from "../nodes/FieldView";
-import { ViewBoxBaseComponent } from "../DocComponent";
-import { makeInterface, createSchema, listSpec } from "../../../fields/Schema";
-import { documentSchema } from "../../../fields/documentSchemas";
-import { PrefetchProxy } from "../../../fields/Proxy";
-import { Docs } from "../../documents/Documents";
-import { ScriptField } from "../../../fields/ScriptField";
-import { CollectionStackingView } from "../collections/CollectionStackingView";
-
-export interface SearchItemProps {
-    doc: Doc;
-    query: string;
-    highlighting: string[];
-    lines: string[];
-}
-
-library.add(faCaretUp);
-library.add(faObjectGroup);
-library.add(faStickyNote);
-library.add(faFile);
-library.add(faFilePdf);
-library.add(faFilm);
-library.add(faMusic);
-library.add(faLink);
-library.add(faChartBar);
-library.add(faGlobeAsia, faFingerprint);
-
-@observer
-export class SelectorContextMenu extends React.Component<SearchItemProps> {
-    @observable private _docs: { col: Doc, target: Doc }[] = [];
-    @observable private _otherDocs: { col: Doc, target: Doc }[] = [];
-
-    constructor(props: SearchItemProps) {
-        super(props);
-        this.fetchDocuments();
-    }
-
-    async fetchDocuments() {
-        const aliases = (await SearchUtil.GetViewsOfDocument(this.props.doc)).filter(doc => doc !== this.props.doc);
-        const { docs } = await SearchUtil.Search("", true, { fq: `data_l:"${this.props.doc[Id]}"` });
-        const map: Map<Doc, Doc> = new Map;
-        const allDocs = await Promise.all(aliases.map(doc => SearchUtil.Search("", true, { fq: `data_l:"${doc[Id]}"` }).then(result => result.docs)));
-        allDocs.forEach((docs, index) => docs.forEach(doc => map.set(doc, aliases[index])));
-        docs.forEach(doc => map.delete(doc));
-        runInAction(() => {
-            this._docs = docs.filter(doc => !Doc.AreProtosEqual(doc, CollectionDockingView.Instance.props.Document)).map(doc => ({ col: doc, target: this.props.doc }));
-            this._otherDocs = Array.from(map.entries()).filter(entry => !Doc.AreProtosEqual(entry[0], CollectionDockingView.Instance.props.Document)).map(([col, target]) => ({ col, target }));
-
-        });
-    }
-
-    getOnClick({ col, target }: { col: Doc, target: Doc }) {
-        return () => {
-            col = Doc.IsPrototype(col) ? Doc.MakeDelegate(col) : col;
-            if (col._viewType === CollectionViewType.Freeform) {
-                const newPanX = NumCast(target.x) + NumCast(target._width) / 2;
-                const newPanY = NumCast(target.y) + NumCast(target._height) / 2;
-                col._panX = newPanX;
-                col._panY = newPanY;
-            }
-            CollectionDockingView.AddRightSplit(col);
-        };
-    }
-    render() {
-        return (
-            <div className="parents">
-                <p className="contexts">Contexts:</p>
-                {[...this._docs, ...this._otherDocs].map(doc => {
-                    const item = React.createRef<HTMLDivElement>();
-                    return <div className="collection" key={doc.col[Id] + doc.target[Id]} ref={item}>
-                        <div className="collection-item" onPointerDown={
-                            SetupDrag(item, () => doc.col, undefined, undefined, () => SearchBox.Instance.closeSearch())}>
-                            <FontAwesomeIcon icon={faStickyNote} />
-                        </div>
-                        <a onClick={this.getOnClick(doc)}>{doc.col.title}</a>
-                    </div>;
-                })}
-            </div>
-        );
-    }
-}
-
-export interface LinkMenuProps {
-    doc1: Doc;
-    doc2: Doc;
-}
-
-@observer
-export class LinkContextMenu extends React.Component<LinkMenuProps> {
-
-    highlightDoc = (doc: Doc) => () => Doc.BrushDoc(doc);
-
-    unHighlightDoc = (doc: Doc) => () => Doc.UnBrushDoc(doc);
-
-    getOnClick = (col: Doc) => () => CollectionDockingView.AddRightSplit(col);
-
-    render() {
-        return (
-            <div className="parents">
-                <p className="contexts">Anchors:</p>
-                <div className="collection"><a onMouseEnter={this.highlightDoc(this.props.doc1)} onMouseLeave={this.unHighlightDoc(this.props.doc1)} onClick={this.getOnClick(this.props.doc1)}>Doc 1: {this.props.doc2.title}</a></div>
-                <div><a onMouseEnter={this.highlightDoc(this.props.doc2)} onMouseLeave={this.unHighlightDoc(this.props.doc2)} onClick={this.getOnClick(this.props.doc2)}>Doc 2: {this.props.doc1.title}</a></div>
-            </div>
-        );
-    }
-
-}
-
-
-type SearchSchema = makeInterface<[typeof documentSchema]>;
-
-export const SearchSchema = createSchema({
-    targetDoc: Doc,
-});
-
-const SearchDocument = makeInterface(documentSchema);
-
-
-
-@observer
-export class SearchItem extends ViewBoxBaseComponent<FieldViewProps, SearchSchema>(SearchDocument) {
-
-    public static LayoutString(fieldKey: string) { return FieldView.LayoutString(SearchItem, fieldKey); }
-
-    constructor(props: any) {
-        super(props);
-        //this.rootDoc._viewType= CollectionViewType.Stacking;
-        this.props.Document._height = 46;
-        if (!this.searchItemTemplate) { // create exactly one presElmentBox template to use by any and all presentations.
-            Doc.UserDoc().searchItemTemplate = new PrefetchProxy(Docs.Create.SearchItemBoxDocument({ title: "search item template", backgroundColor: "transparent", _xMargin: 5, _height: 46, isTemplateDoc: true, isTemplateForField: "data" }));
-            // this script will be called by each presElement to get rendering-specific info that the PresBox knows about but which isn't written to the PresElement
-            // this is a design choice -- we could write this data to the presElements which would require a reaction to keep it up to date, and it would prevent
-            // the preselement docs from being part of multiple presentations since they would all have the same field, or we'd have to keep per-presentation data
-            // stored on each pres element.  
-            (this.searchItemTemplate as Doc).lookupField = ScriptField.MakeFunction("lookupSearchBoxField(container, field, data)",
-                { field: "string", data: Doc.name, container: Doc.name });
-        }
-
-    }
-
-    @observable _selected: boolean = false;
-
-    onClick = () => {
-        DocumentManager.Instance.jumpToDocument(this.rootDoc, false);
-    }
-    @observable _useIcons = true;
-    @observable _displayDim = 50;
-
-    @computed get query() { return StrCast(this.lookupField("query")); }
-
-    private _oldHeight: number = 46;
-
-    componentDidMount() {
-        let parent: Doc | undefined = undefined;
-        let height = 0;
-        if (this.rootDoc.parent) {
-            parent = Cast(this.rootDoc.parent, Doc, null);
-            if (parent !== undefined) {
-                height = (NumCast(parent._height));
-            }
-        }
-
-        this._reactionDisposer2 = reaction(
-            () => this._useIcons,
-            el => {
-                if (this.rootDoc.parent) {
-                    parent = Cast(this.rootDoc.parent, Doc, null) as Doc;
-                    height = (NumCast(parent._height));
-                };
-                console.log(height);
-                console.log(this._oldHeight);
-                setTimeout(() => {
-                    this._mainRef.current?.getBoundingClientRect() ? this.props.Document._height = this._mainRef.current?.getBoundingClientRect().height : null;
-                    parent !== undefined ? this._mainRef.current?.getBoundingClientRect() ? parent._height = -this._oldHeight + height + this._mainRef.current?.getBoundingClientRect().height : null : null;
-                    this._mainRef.current?.getBoundingClientRect() ? this._oldHeight = this._mainRef.current?.getBoundingClientRect().height : null;
-                    // this._oldHeight 55? this._oldHeight =55:null;
-                }, 1);
-            }
-        );
-
-        this._reactionDisposer3 = reaction(
-            () => this._displayLines,
-            el => {
-                if (this.rootDoc.parent) {
-                    parent = Cast(this.rootDoc.parent, Doc, null) as Doc;
-                    height = (NumCast(parent._height));
-                };
-                setTimeout(() => {
-                    this._mainRef.current?.getBoundingClientRect() ? this.props.Document._height = this._mainRef.current?.getBoundingClientRect().height : null;
-                    parent !== undefined ? this._mainRef.current?.getBoundingClientRect() ? parent._height = -this._oldHeight + height + this._mainRef.current?.getBoundingClientRect().height : null : null;
-                    this._mainRef.current?.getBoundingClientRect() ? this._oldHeight = this._mainRef.current?.getBoundingClientRect().height : null;
-                }, 1);
-            }
-        );
-
-        Doc.SetSearchQuery(this.query);
-        this.rootDoc.searchMatch = true;
-    }
-    componentWillUnmount() {
-        this.rootDoc.searchMatch = undefined;
-        this._reactionDisposer2 && this._reactionDisposer2();
-        this._reactionDisposer3 && this._reactionDisposer3();
-
-    }
-
-
-
-    private _reactionDisposer2?: IReactionDisposer;
-    private _reactionDisposer3?: IReactionDisposer;
-
-
-
-    @computed get highlightPos() { return NumCast(this.rootDoc.searchIndex) }
-
-    @action
-    public DocumentIcon() {
-        const layoutresult = StrCast(this.rootDoc.type);
-        if (!this._useIcons) {
-            const returnXDimension = () => this._useIcons ? 50 : Number(SEARCH_THUMBNAIL_SIZE);
-            const returnYDimension = () => this._displayDim;
-            const docview = <div
-                onPointerDown={action(() => {
-                    this._useIcons = !this._useIcons;
-                    this._displayDim = this._useIcons ? 50 : Number(SEARCH_THUMBNAIL_SIZE);
-                })}
-                onPointerEnter={action(() => this._displayDim = this._useIcons ? 50 : Number(SEARCH_THUMBNAIL_SIZE))} >
-                <ContentFittingDocumentView
-                    Document={this.rootDoc}
-                    LibraryPath={emptyPath}
-                    rootSelected={returnFalse}
-                    fitToBox={StrCast(this.rootDoc.type).indexOf(DocumentType.COL) !== -1}
-                    addDocument={returnFalse}
-                    removeDocument={returnFalse}
-                    addDocTab={returnFalse}
-                    pinToPres={returnFalse}
-                    docFilters={returnEmptyFilter}
-                    ContainingCollectionDoc={undefined}
-                    ContainingCollectionView={undefined}
-                    ScreenToLocalTransform={Transform.Identity}
-                    renderDepth={1}
-                    PanelWidth={returnXDimension}
-                    PanelHeight={returnYDimension}
-                    NativeWidth={returnZero}
-                    NativeHeight={returnZero}
-                    focus={emptyFunction}
-                    moveDocument={returnFalse}
-                    parentActive={returnFalse}
-                    whenActiveChanged={returnFalse}
-                    bringToFront={returnFalse}
-                    ContentScaling={returnOne}
-                />
-            </div>;
-            return docview;
-        }
-        const button = layoutresult.indexOf(DocumentType.PDF) !== -1 ? faFilePdf :
-            layoutresult.indexOf(DocumentType.IMG) !== -1 ? faImage :
-                layoutresult.indexOf(DocumentType.RTF) !== -1 ? faStickyNote :
-                    layoutresult.indexOf(DocumentType.VID) !== -1 ? faFilm :
-                        layoutresult.indexOf(DocumentType.COL) !== -1 ? faObjectGroup :
-                            layoutresult.indexOf(DocumentType.AUDIO) !== -1 ? faMusic :
-                                layoutresult.indexOf(DocumentType.LINK) !== -1 ? faLink :
-                                    layoutresult.indexOf(DocumentType.WEB) !== -1 ? faGlobeAsia :
-                                        faCaretUp;
-        return <div><div onClick={action(() => { this._useIcons = false; this._displayDim = Number(SEARCH_THUMBNAIL_SIZE); })} >
-            <FontAwesomeIcon icon={button} size="2x" />
-        </div>
-            <div className="searchItem-label">{this.rootDoc.type ? this.rootDoc.type : "Other"}</div>
-        </div>
-            ;
-    }
-
-    collectionRef = React.createRef<HTMLDivElement>();
-
-    @action
-    pointerDown = (e: React.PointerEvent) => { e.preventDefault(); e.button === 0 && SearchBox.Instance.openSearch(e); }
-
-    @action
-    nextHighlight = (e: React.MouseEvent) => {
-        e.preventDefault();
-        e.stopPropagation();
-        //e.button === 0 && SearchBox.Instance.openSearch(e);
-
-        this.rootDoc!.searchMatch = false;
-        setTimeout(() => this.rootDoc!.searchMatch = true, 0);
-        this.rootDoc.searchIndex = NumCast(this.rootDoc.searchIndex);
-        this.length = NumCast(this.rootDoc!.length);
-    }
-
-    @action
-    nextHighlight2 = (e: React.MouseEvent) => {
-        e.preventDefault();
-        e.stopPropagation();
-
-        //e.button === 0 && SearchBox.Instance.openSearch(e);
-
-        this.rootDoc!.searchMatch2 = false;
-        setTimeout(() => this.rootDoc!.searchMatch2 = true, 0);
-        this.rootDoc.searchIndex = NumCast(this.rootDoc.searchIndex);
-
-        this.length = NumCast(this.rootDoc!.length);
-    }
-
-    @observable length: number | undefined = 0;
-
-    highlightDoc = (e: React.PointerEvent) => {
-        if (this.rootDoc!.type === DocumentType.LINK) {
-            if (this.rootDoc!.anchor1 && this.rootDoc!.anchor2) {
-
-                const doc1 = Cast(this.rootDoc!.anchor1, Doc, null);
-                const doc2 = Cast(this.rootDoc!.anchor2, Doc, null);
-                Doc.BrushDoc(doc1);
-                Doc.BrushDoc(doc2);
-            }
-        } else {
-            Doc.BrushDoc(this.rootDoc!);
-        }
-        e.stopPropagation();
-    }
-
-    unHighlightDoc = (e: React.PointerEvent) => {
-        if (this.rootDoc!.type === DocumentType.LINK) {
-            if (this.rootDoc!.anchor1 && this.rootDoc!.anchor2) {
-
-                const doc1 = Cast(this.rootDoc!.anchor1, Doc, null);
-                const doc2 = Cast(this.rootDoc!.anchor2, Doc, null);
-                Doc.UnBrushDoc(doc1);
-                Doc.UnBrushDoc(doc2);
-            }
-        } else {
-            Doc.UnBrushDoc(this.rootDoc!);
-        }
-    }
-
-    onContextMenu = (e: React.MouseEvent) => {
-        e.preventDefault();
-        e.stopPropagation();
-        ContextMenu.Instance.clearItems();
-        ContextMenu.Instance.addItem({
-            description: "Copy ID", event: () => {
-                Utils.CopyText(StrCast(this.rootDoc[Id]));
-            },
-            icon: "fingerprint"
-        });
-        ContextMenu.Instance.displayMenu(e.clientX, e.clientY);
-    }
-
-    _downX = 0;
-    _downY = 0;
-    _target: any;
-    onPointerDown = (e: React.PointerEvent<HTMLDivElement>) => {
-        this._downX = e.clientX;
-        this._downY = e.clientY;
-        e.stopPropagation();
-        this._target = e.currentTarget;
-        document.removeEventListener("pointermove", this.onPointerMoved);
-        document.removeEventListener("pointerup", this.onPointerUp);
-        document.addEventListener("pointermove", this.onPointerMoved);
-        document.addEventListener("pointerup", this.onPointerUp);
-    }
-    onPointerMoved = (e: PointerEvent) => {
-        if (Math.abs(e.clientX - this._downX) > Utils.DRAG_THRESHOLD ||
-            Math.abs(e.clientY - this._downY) > Utils.DRAG_THRESHOLD) {
-            document.removeEventListener("pointermove", this.onPointerMoved);
-            document.removeEventListener("pointerup", this.onPointerUp);
-            const doc = Doc.IsPrototype(this.rootDoc) ? Doc.MakeDelegate(this.rootDoc) : this.rootDoc;
-            DragManager.StartDocumentDrag([this._target], new DragManager.DocumentDragData([doc]), e.clientX, e.clientY);
-        }
-    }
-    onPointerUp = (e: PointerEvent) => {
-        document.removeEventListener("pointermove", this.onPointerMoved);
-        document.removeEventListener("pointerup", this.onPointerUp);
-    }
-
-    @computed
-    get contextButton() {
-        return <ParentDocSelector Document={this.rootDoc} addDocTab={(doc, where) => CollectionDockingView.AddRightSplit(doc)} />;
-    }
-
-    @computed get searchElementDoc() { return this.rootDoc; }
-    // @computed get targetDoc() { return this.searchElementDoc?.targetDoc as Doc; }
-
-    @computed get searchItemTemplate() { return Cast(Doc.UserDoc().searchItemTemplate, Doc, null); }
-    childLayoutTemplate = () => this.layoutDoc._viewType === CollectionViewType.Stacking ? this.searchItemTemplate : undefined;
-    getTransform = () => {
-        return this.props.ScreenToLocalTransform().translate(-5, -65);// listBox padding-left and pres-box-cont minHeight
-    }
-    panelHeight = () => {
-        return this.props.PanelHeight();
-    }
-    selectElement = (doc: Doc) => {
-        //this.gotoDocument(this.childDocs.indexOf(doc), NumCast(this.layoutDoc._itemIndex));
-    }
-
-    newsearch() {
-        runInAction(() => {
-            if (StrCast(this.rootDoc.bucketfield) !== "results") {
-                SearchBox.Instance._icons = [StrCast(this.rootDoc.bucketfield)];
-                SearchBox.Instance._icons = SearchBox.Instance._icons;
-            }
-            else {
-                SearchBox.Instance._icons = SearchBox.Instance._allIcons;
-            }
-            SearchBox.Instance.submitSearch();
-        })
-    }
-
-    @action
-    returnLines() {
-        if ((Cast(this.rootDoc.lines, listSpec("string")))!.length > 1) {
-            if (!this._displayLines) {
-                console.log(Cast(this.rootDoc.lines, listSpec("string")));
-                return <div style={{ width: 10 }}
-                    onPointerDown={action(() => {
-                        this._displayLines = !this._displayLines;
-                        //this._displayDim = this._useIcons ? 50 : Number(SEARCH_THUMBNAIL_SIZE);
-                    })}
-                //onPointerEnter={action(() => this._displayDim = this._useIcons ? 50 : Number(SEARCH_THUMBNAIL_SIZE))}
-                >
-                    {Cast(this.rootDoc.lines, listSpec("string"))!.filter((m, i) => i).map((l, i) => <div style={{ overflow: "visible" }} id={i.toString()} className="searchItem-highlighting">{l}</div>)}
-                </div>;;
-            }
-        }
-    }
-
-    //this._displayDim = Number(SEARCH_THUMBNAIL_SIZE); 
-
-    @observable _displayLines: boolean = true;
-
-    returnButtons() {
-        return <div>
-            <div onClick={action(() => {
-                this.rootDoc!.type === DocumentType.PDF ? this._displayLines = !this._displayLines : null;
-            })}>
-                {this.rootDoc!.type === DocumentType.PDF ? "Expand Lines" : null}
-                {NumCast(this.rootDoc!.length) > 1 ? `Instance ${NumCast(this.rootDoc.searchIndex) === 0 ? NumCast(this.rootDoc.length) : NumCast(this.rootDoc.searchIndex)} of ${NumCast(this.rootDoc.length)}` : null}
-                <button onClick={this.nextHighlight} style={{ padding: 2, position: "absolute", left: 77 }}>
-                    <FontAwesomeIcon icon="arrow-up" size="sm" />
-                </button>
-                <button onClick={this.nextHighlight2} style={{ padding: 2, position: "absolute", left: 87 }}>
-                    <FontAwesomeIcon icon="arrow-down" size="sm" />
-                </button>
-            </div>
-            <div>
-                <div style={{ background: "lightgrey" }}>
-                    {this.returnLines()}
-                </div>
-            </div>
-        </div>
-    }
-
-    private _mainRef: React.RefObject<HTMLDivElement> = React.createRef();
-
-
-    render() {
-        const doc1 = Cast(this.rootDoc!.anchor1, Doc);
-        const doc2 = Cast(this.rootDoc!.anchor2, Doc);
-        if (StrCast(this.rootDoc.bucketfield) === "webs") {
-            this.props.Document._viewType = CollectionViewType.Stacking;
-            this.props.Document._chromeStatus = 'disabled';
-            this.props.Document._height = this.rootDoc._height;
-            return <div>
-                <CollectionView {...this.props}
-                    Document={this.props.Document}
-                    PanelHeight={this.panelHeight}
-                    whenActiveChanged={emptyFunction}
-                    onClick={undefined}
-                    moveDocument={returnFalse}
-                    childLayoutTemplate={undefined}
-                    addDocument={undefined}
-                    removeDocument={returnFalse}
-                    focus={this.selectElement}
-                    ScreenToLocalTransform={this.getTransform} />
-            </div>
-        }
-        if (this.rootDoc.isBucket === true) {
-            this.props.Document._viewType = CollectionViewType.Stacking;
-            this.props.Document._chromeStatus = 'disabled';
-            this.props.Document._height = this.rootDoc._height;
-
-            return <div>
-                <CollectionView {...this.props}
-                    Document={this.props.Document}
-                    PanelHeight={this.panelHeight}
-                    whenActiveChanged={emptyFunction}
-                    onClick={undefined}
-                    moveDocument={returnFalse}
-                    childLayoutTemplate={this.childLayoutTemplate}
-                    addDocument={undefined}
-                    removeDocument={returnFalse}
-                    focus={this.selectElement}
-                    ScreenToLocalTransform={this.getTransform} />
-                <button onClick={() => this.newsearch()} className="bucket-expand" style={{ transform: "none", fontSize: "100%", textTransform: "none", background: "lightgray", color: "black", bottom: 8, marginBottom: -2, paddingTop: 2, fontFamily: "Arial, sans-serif" }}>See all {StrCast(this.rootDoc.bucketfield)}...
-            </button>
-            </div>
-        }
-        else if (this.rootDoc.isBucket === false) {
-            this.props.Document._chromeStatus = 'disabled';
-            return <div className="searchItem">
-                <div className="searchItem-body" >
-                    <div className="searchItem-title-container">
-                        <div className="searchItem-title" style={{ height: "10px", overflow: "hidden", textOverflow: "ellipsis" }}>No Search Results</div>
-                    </div>
-                </div>
-            </div>
-        }
-        else {
-            return <div className="searchItem-overview" onPointerDown={this.pointerDown} onContextMenu={this.onContextMenu}>
-                <div ref={this._mainRef} className="searchItem" onPointerEnter={this.highlightDoc} onPointerLeave={this.unHighlightDoc}>
-                    <div className="searchItem-body" onClick={this.onClick}>
-                        <div className="searchItem-title-container">
-                            <div className="searchItem-title" style={{ height: "10px", overflow: "hidden", textOverflow: "ellipsis" }}>{StrCast(this.rootDoc.title)}</div>
-                            <div className="searchItem-highlighting">
-                                {this.rootDoc.highlighting ? StrCast(this.rootDoc.highlighting).length ? "Matched fields:" + StrCast(this.rootDoc.highlighting) : Cast(this.rootDoc.lines, listSpec("string"))!.length ? Cast(this.rootDoc.lines, listSpec("string"))![0] : "" : null}</div>
-                            <div className={`icon-${this._displayLines ? "q" : "a"}`}>
-                                {NumCast(this.rootDoc.length) > 1 || this.rootDoc!.type === DocumentType.PDF ? this.returnButtons() : null}
-                            </div>
-                        </div>
-                    </div>
-                    <div className="searchItem-info" style={{ width: this._useIcons ? "30px" : "100%" }}>
-                        <div className={`icon-${this._useIcons ? "icons" : "live"}`}>
-                            <div className="searchItem-type" title="Click to Preview" onPointerDown={this.onPointerDown}>{this.DocumentIcon()}</div>
-                        </div>
-                    </div>
-                    {/* <div className="searchItem-context" title="Drag as document">
-                    {(doc1 instanceof Doc && doc2 instanceof Doc) && this.rootDoc!.type === DocumentType.LINK ? <LinkContextMenu doc1={doc1} doc2={doc2} /> :
-                        this.contextButton}
-                </div> */}
-                </div>
-            </div>;
-        }
-    }
-} 
\ No newline at end of file
-- 
cgit v1.2.3-70-g09d2


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

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

(limited to 'src/client/util')

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


From 0566852022c17a12d521ebf1f280f748fe34c602 Mon Sep 17 00:00:00 2001
From: usodhi <61431818+usodhi@users.noreply.github.com>
Date: Wed, 5 Aug 2020 10:00:57 +0530
Subject: comments + carets

---
 src/client/util/GroupManager.scss   |  1 +
 src/client/util/GroupManager.tsx    |  7 +++--
 src/client/util/SharingManager.scss |  1 +
 src/client/util/SharingManager.tsx  | 58 +++++++++++++++++++++++++++++--------
 4 files changed, 53 insertions(+), 14 deletions(-)

(limited to 'src/client/util')

diff --git a/src/client/util/GroupManager.scss b/src/client/util/GroupManager.scss
index 51e4fa9e2..9438bdd72 100644
--- a/src/client/util/GroupManager.scss
+++ b/src/client/util/GroupManager.scss
@@ -92,6 +92,7 @@
         .sort-groups {
             text-align: left;
             margin-left: 5;
+            width: 50px;
             cursor: pointer;
         }
 
diff --git a/src/client/util/GroupManager.tsx b/src/client/util/GroupManager.tsx
index 45c26d87a..277e96a89 100644
--- a/src/client/util/GroupManager.tsx
+++ b/src/client/util/GroupManager.tsx
@@ -18,7 +18,7 @@ import { setGroups } from "../../fields/util";
 import { DocServer } from "../DocServer";
 import { TaskCompletionBox } from "../views/nodes/TaskCompletedBox";
 
-library.add(fa.faPlus, fa.faTimes, fa.faInfoCircle);
+library.add(fa.faPlus, fa.faTimes, fa.faInfoCircle, fa.faCaretUp, fa.faCaretRight, fa.faCaretDown);
 
 /**
  * Interface for options for the react-select component
@@ -408,7 +408,10 @@ export default class GroupManager extends React.Component<{}> {
                     <div
                         className="sort-groups"
                         onClick={action(() => this.groupSort = this.groupSort === "ascending" ? "descending" : this.groupSort === "descending" ? "none" : "ascending")}>
-                        Name {this.groupSort === "ascending" ? "↑" : this.groupSort === "descending" ? "↓" : ""}
+                        Name {this.groupSort === "ascending" ? <FontAwesomeIcon icon={fa.faCaretUp} size={"xs"} />
+                            : this.groupSort === "descending" ? <FontAwesomeIcon icon={fa.faCaretDown} size={"xs"} />
+                                : <FontAwesomeIcon icon={fa.faCaretRight} size={"xs"} />
+                        }
                     </div>
                     <div className="group-body">
                         {groups.map(group =>
diff --git a/src/client/util/SharingManager.scss b/src/client/util/SharingManager.scss
index 8da80ef52..7912db74d 100644
--- a/src/client/util/SharingManager.scss
+++ b/src/client/util/SharingManager.scss
@@ -84,6 +84,7 @@
                 .user-sort {
                     text-align: left;
                     margin-left: 10;
+                    width: 100px;
                     cursor: pointer;
                 }
 
diff --git a/src/client/util/SharingManager.tsx b/src/client/util/SharingManager.tsx
index 97f94692d..d50a132f8 100644
--- a/src/client/util/SharingManager.tsx
+++ b/src/client/util/SharingManager.tsx
@@ -21,6 +21,10 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { List } from "../../fields/List";
 import { distributeAcls, SharingPermissions, GetEffectiveAcl } from "../../fields/util";
 import { TaskCompletionBox } from "../views/nodes/TaskCompletedBox";
+import { library } from "@fortawesome/fontawesome-svg-core";
+
+library.add(fa.faInfoCircle, fa.faCaretUp, fa.faCaretRight, fa.faCaretDown);
+
 
 export interface User {
     email: string;
@@ -215,6 +219,9 @@ export default class SharingManager extends React.Component<{}> {
         }
     }
 
+    /**
+     * Shares the document with a user.
+     */
     setInternalSharing = (recipient: ValidatedUser, permission: string, targetDoc?: Doc) => {
         const { user, notificationDoc } = recipient;
         const target = targetDoc || this.targetDoc!;
@@ -222,9 +229,7 @@ export default class SharingManager extends React.Component<{}> {
         const ACL = `ACL-${key}`;
 
 
-        if (target.author === Doc.CurrentUserEmail) {
-            distributeAcls(ACL, permission as SharingPermissions, target);
-        }
+        target.author === Doc.CurrentUserEmail && distributeAcls(ACL, permission as SharingPermissions, target);
 
         if (permission !== SharingPermissions.None) {
             Doc.IndexOf(target, DocListCast(notificationDoc[storage])) === -1 && Doc.AddDocToList(notificationDoc, storage, target);
@@ -258,14 +263,17 @@ export default class SharingManager extends React.Component<{}> {
     //     }
     // });
 
+    /**
+     * Returns the SharingPermissions (Admin, Can Edit etc) access that's used to share
+     */
     private get sharingOptions() {
-        return Object.values(SharingPermissions).map(permission => {
-            return (
-                <option key={permission} value={permission} selected={permission === SharingPermissions.Edit}>
+        return Object.values(SharingPermissions).map(permission =>
+            (
+                <option key={permission} value={permission}>
                     {permission}
                 </option>
-            );
-        });
+            )
+        );
     }
 
     private focusOn = (contents: string) => {
@@ -298,16 +306,25 @@ export default class SharingManager extends React.Component<{}> {
         );
     }
 
+    /**
+     * Handles changes in the users selected in react-select
+     */
     @action
     handleUsersChange = (selectedOptions: any) => {
         this.selectedUsers = selectedOptions as UserOptions[];
     }
 
+    /**
+     * Handles changes in the permission chosen to share with someone with
+     */
     @action
     handlePermissionsChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
         this.permissions = event.currentTarget.value as SharingPermissions;
     }
 
+    /**
+     * Calls the relevant method for sharing, displays the popup, and resets the relevant variables.
+     */
     @action
     share = () => {
         if (this.selectedUsers) {
@@ -331,18 +348,27 @@ export default class SharingManager extends React.Component<{}> {
         }
     }
 
+    /**
+     * Sorting algorithm to sort users.
+     */
     sortUsers = (u1: ValidatedUser, u2: ValidatedUser) => {
         const { email: e1 } = u1.user;
         const { email: e2 } = u2.user;
         return e1 < e2 ? -1 : e1 === e2 ? 0 : 1;
     }
 
+    /**
+     * Sorting algorithm to sort groups.
+     */
     sortGroups = (group1: Doc, group2: Doc) => {
         const g1 = StrCast(group1.groupName);
         const g2 = StrCast(group2.groupName);
         return g1 < g2 ? -1 : g1 === g2 ? 0 : 1;
     }
 
+    /**
+     * @returns the main interface of the SharingManager.
+     */
     private get sharingInterface() {
         const groupList = GroupManager.Instance?.getAllGroups() || [];
 
@@ -351,8 +377,8 @@ export default class SharingManager extends React.Component<{}> {
         const sortedGroups = groupList.slice().sort(this.sortGroups)
             .map(({ groupName }) => ({ label: StrCast(groupName), value: groupType + StrCast(groupName) }));
 
+        // the next block handles the users shown (individuals/groups/both)
         const options: GroupedOptions[] = [];
-
         if (GroupManager.Instance) {
             if ((this.showUserOptions && this.showGroupOptions) || (!this.showUserOptions && !this.showGroupOptions)) {
                 options.push({
@@ -383,6 +409,7 @@ export default class SharingManager extends React.Component<{}> {
 
         const effectiveAcl = this.targetDoc ? GetEffectiveAcl(this.targetDoc) : AclPrivate;
 
+        // the list of users shared with
         const userListContents: (JSX.Element | null)[] = users.map(({ user, notificationDoc }) => {
             const userKey = user.email.replace('.', '_');
             const permissions = StrCast(this.targetDoc?.[`ACL-${userKey}`]);
@@ -412,6 +439,7 @@ export default class SharingManager extends React.Component<{}> {
             );
         });
 
+        // the owner of the doc and the current user are placed at the top of the user list.
         userListContents.unshift(
             (
                 <div
@@ -442,6 +470,7 @@ export default class SharingManager extends React.Component<{}> {
                 ) : null
         );
 
+        // the list of groups shared with
         const groupListContents = groups.map(group => {
             const permissions = StrCast(this.targetDoc?.[`ACL-${StrCast(group.groupName)}`]);
 
@@ -467,6 +496,7 @@ export default class SharingManager extends React.Component<{}> {
             );
         });
 
+        // don't display the group list if all groups are null
         const displayGroupList = !groupListContents?.every(group => group === null);
 
         return (
@@ -528,7 +558,7 @@ export default class SharingManager extends React.Component<{}> {
                                     })
                                 }}
                             />
-                            <select className="permissions-select" onChange={this.handlePermissionsChange}>
+                            <select className="permissions-select" onChange={this.handlePermissionsChange} value={this.permissions}>
                                 {this.sharingOptions}
                             </select>
                             <button ref={this.shareDocumentButtonRef} className="share-button" onClick={this.share}>
@@ -546,7 +576,9 @@ export default class SharingManager extends React.Component<{}> {
                             <div
                                 className="user-sort"
                                 onClick={action(() => this.individualSort = this.individualSort === "ascending" ? "descending" : this.individualSort === "descending" ? "none" : "ascending")}>
-                                Individuals {this.individualSort === "ascending" ? "↑" : this.individualSort === "descending" ? "↓" : ""} {/* → */}
+                                Individuals {this.individualSort === "ascending" ? <FontAwesomeIcon icon={fa.faCaretUp} size={"xs"} />
+                                    : this.individualSort === "descending" ? <FontAwesomeIcon icon={fa.faCaretDown} size={"xs"} />
+                                        : <FontAwesomeIcon icon={fa.faCaretRight} size={"xs"} />}
                             </div>
                             <div className={"users-list"} style={{ display: "block" }}>{/*200*/}
                                 {userListContents}
@@ -556,7 +588,9 @@ export default class SharingManager extends React.Component<{}> {
                             <div
                                 className="user-sort"
                                 onClick={action(() => this.groupSort = this.groupSort === "ascending" ? "descending" : this.groupSort === "descending" ? "none" : "ascending")}>
-                                Groups {this.groupSort === "ascending" ? "↑" : this.groupSort === "descending" ? "↓" : ""} {/* → */}
+                                Groups {this.groupSort === "ascending" ? <FontAwesomeIcon icon={fa.faCaretUp} size={"xs"} />
+                                    : this.groupSort === "descending" ? <FontAwesomeIcon icon={fa.faCaretDown} size={"xs"} />
+                                        : <FontAwesomeIcon icon={fa.faCaretRight} size={"xs"} />}
 
                             </div>
                             <div className={"groups-list"} style={{ display: !displayGroupList ? "flex" : "block" }}>{/*200*/}
-- 
cgit v1.2.3-70-g09d2


From 85fee2871fcbfba90ca9ce3ba4a1842e85e41f9f Mon Sep 17 00:00:00 2001
From: Andy Rickert <andrew_rickert@brown.edu>
Date: Wed, 5 Aug 2020 01:17:28 -0400
Subject:  lint

---
 src/client/util/CurrentUserUtils.ts                |   1 -
 src/client/views/EditableView.tsx                  |   4 +-
 src/client/views/MainView.tsx                      |   9 +-
 .../views/collections/CollectionSchemaCells.tsx    |  11 +-
 src/client/views/collections/CollectionSubView.tsx |   4 +-
 src/client/views/linking/LinkMenuItem.tsx          |   1 -
 src/client/views/nodes/DocumentLinksButton.tsx     |   2 +-
 .../views/nodes/formattedText/FormattedTextBox.tsx |   3 +-
 .../views/nodes/formattedText/RichTextMenu.tsx     |   3 +-
 src/client/views/search/FieldFilters.scss          |  12 -
 src/client/views/search/FieldFilters.tsx           |  41 --
 src/client/views/search/FilterBox.scss             | 178 ---------
 src/client/views/search/FilterBox.tsx              | 431 ---------------------
 src/server/websocket.ts                            |   8 +-
 14 files changed, 25 insertions(+), 683 deletions(-)
 delete mode 100644 src/client/views/search/FieldFilters.scss
 delete mode 100644 src/client/views/search/FieldFilters.tsx
 delete mode 100644 src/client/views/search/FilterBox.scss
 delete mode 100644 src/client/views/search/FilterBox.tsx

(limited to 'src/client/util')

diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index ea701ec33..53d187aa0 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -771,7 +771,6 @@ export class CurrentUserUtils {
 
     // setup the list of sidebar mode buttons which determine what is displayed in the sidebar
     static async setupSidebarButtons(doc: Doc) {
-        this.setupSidebarContainer(doc);
         await CurrentUserUtils.setupToolsBtnPanel(doc);
         CurrentUserUtils.setupWorkspaces(doc);
         CurrentUserUtils.setupCatalog(doc);
diff --git a/src/client/views/EditableView.tsx b/src/client/views/EditableView.tsx
index a5628d5ee..ec3e754fb 100644
--- a/src/client/views/EditableView.tsx
+++ b/src/client/views/EditableView.tsx
@@ -197,11 +197,11 @@ export class EditableView extends React.Component<EditableProps> {
 
                 // contents = String(this.props.contents.valueOf());
 
-                results.push(<span style={{ fontStyle: this.props.fontStyle, fontSize: this.props.fontSize, color: this.props.contents ? "black" : "grey" }}>{contents ? contents.slice(0, this.props.positions![0]) : this.props.placeholder?.valueOf()}</span>);
+                results.push(<span style={{ fontStyle: this.props.fontStyle, fontSize: this.props.fontSize, color: this.props.contents ? "black" : "grey" }}>{contents ? contents.slice(0, this.props.positions[0]) : this.props.placeholder?.valueOf()}</span>);
                 positions.forEach((num, cur) => {
                     results.push(<span style={{ backgroundColor: "#FFFF00", fontStyle: this.props.fontStyle, fontSize: this.props.fontSize, color: this.props.contents ? "black" : "grey" }}>{contents ? contents.slice(num, num + length) : this.props.placeholder?.valueOf()}</span>);
                     let end = 0;
-                    cur === positions.length - 1 ? end = contents!.length : end = positions[cur + 1];
+                    cur === positions.length - 1 ? end = contents.length : end = positions[cur + 1];
                     results.push(<span style={{ fontStyle: this.props.fontStyle, fontSize: this.props.fontSize, color: this.props.contents ? "black" : "grey" }}>{contents ? contents.slice(num + length, end) : this.props.placeholder?.valueOf()}</span>);
                 }
                 );
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index 119fa3451..1b2dd1c44 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -82,8 +82,8 @@ export class MainView extends React.Component {
     @computed public get mainFreeform(): Opt<Doc> { return (docs => (docs && docs.length > 1) ? docs[1] : undefined)(DocListCast(this.mainContainer!.data)); }
     @computed public get searchDoc() { return Cast(this.userDoc["search-panel"], Doc) as Doc; }
 
-
-    @observable public sidebarContent: any = this.userDoc?.["sidebar"];
+    sidebar: string = "sidebar";
+    @observable public sidebarContent: any = this.userDoc?.[this.sidebar];
     @observable public panelContent: string = "none";
     @observable public showProperties: boolean = false;
     public isPointerDown = false;
@@ -193,8 +193,9 @@ export class MainView extends React.Component {
         }
         if (targets && targets.length && SearchBox.Instance._searchbarOpen) {
             let check = false;
+            const icon = "icon";
             targets.forEach((thing) => {
-                if (thing.className.toString() === "collectionSchemaView-table" || (thing as any)?.dataset["icon"] === "filter" || thing.className.toString() === "beta" || thing.className.toString() === "collectionSchemaView-menuOptions-wrapper") {
+                if (thing.className.toString() === "collectionSchemaView-table" || (thing as any)?.dataset[icon] === "filter" || thing.className.toString() === "beta" || thing.className.toString() === "collectionSchemaView-menuOptions-wrapper") {
                     check = true;
                 }
             });
@@ -731,7 +732,7 @@ export class MainView extends React.Component {
     @computed get search() {
         return <div className="mainView-searchPanel">
             {/* <div style={{ float: "left", marginLeft: "10px" }}>{Doc.CurrentUserEmail}</div> */}
-            <div><DocumentView Document={this.searchDoc!}
+            <div><DocumentView Document={this.searchDoc}
                 DataDoc={undefined}
                 LibraryPath={emptyPath}
                 addDocument={undefined}
diff --git a/src/client/views/collections/CollectionSchemaCells.tsx b/src/client/views/collections/CollectionSchemaCells.tsx
index 7a80f4484..98b7b7739 100644
--- a/src/client/views/collections/CollectionSchemaCells.tsx
+++ b/src/client/views/collections/CollectionSchemaCells.tsx
@@ -32,6 +32,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import DatePicker from "react-datepicker";
 import "react-datepicker/dist/react-datepicker.css";
 import { DateField } from "../../../fields/DateField";
+import { RichTextField } from "../../../fields/RichTextField";
 const path = require('path');
 
 library.add(faExpand);
@@ -292,8 +293,11 @@ export class CollectionSchemaCell extends React.Component<CellProps> {
                             bing={() => {
                                 const cfield = ComputedField.WithoutComputed(() => FieldValue(props.Document[props.fieldKey]));
                                 if (cfield !== undefined) {
-                                    if (cfield.Text !== undefined) {
-                                        return (cfield.Text);
+                                    console.log(typeof (cfield));
+                                    // if (typeof(cfield)===RichTextField)
+                                    const a = cfield as RichTextField;
+                                    if (a.Text !== undefined) {
+                                        return (a.Text);
                                     }
                                     else if (StrCast(cfield)) {
                                         return StrCast(cfield);
@@ -884,7 +888,8 @@ export class CollectionSchemaButtons extends CollectionSchemaCell {
         //         SetupDrag(reference, () => this._document, this.props.moveDocument, this.props.Document.schemaDoc ? "copy" : undefined)(e));
         // };
         const doc = this.props.rowProps.original;
-        let buttons = <div style={{
+        let buttons: JSX.Element | undefined = undefined;
+        buttons = <div style={{
             paddingTop: 8,
             paddingLeft: 3,
         }}><button onClick={() => {
diff --git a/src/client/views/collections/CollectionSubView.tsx b/src/client/views/collections/CollectionSubView.tsx
index b896518ed..4025e25f9 100644
--- a/src/client/views/collections/CollectionSubView.tsx
+++ b/src/client/views/collections/CollectionSubView.tsx
@@ -151,10 +151,8 @@ export function CollectionSubView<T, X>(schemaCtor: (doc: Doc) => T, moreProps?:
                         console.log(d);
                         let newdocs = DocListCast(d.data);
                         if (newdocs.length > 0) {
-                            let vibecheck = false;
-
+                            let vibecheck: boolean | undefined = undefined;
                             let newarray: Doc[] = [];
-
                             while (newdocs.length > 0) {
                                 newarray = [];
                                 newdocs.forEach((t) => {
diff --git a/src/client/views/linking/LinkMenuItem.tsx b/src/client/views/linking/LinkMenuItem.tsx
index 6feb0a398..f4aed94e7 100644
--- a/src/client/views/linking/LinkMenuItem.tsx
+++ b/src/client/views/linking/LinkMenuItem.tsx
@@ -191,7 +191,6 @@ export class LinkMenuItem extends React.Component<LinkMenuItemProps> {
             case DocumentType.AUDIO: destinationIcon = "microphone"; break;
             case DocumentType.BUTTON: destinationIcon = "bolt"; break;
             case DocumentType.PRES: destinationIcon = "tv"; break;
-            case DocumentType.QUERY: destinationIcon = "search"; break;
             case DocumentType.SCRIPTING: destinationIcon = "terminal"; break;
             case DocumentType.IMPORT: destinationIcon = "cloud-upload-alt"; break;
             case DocumentType.DOCHOLDER: destinationIcon = "expand"; break;
diff --git a/src/client/views/nodes/DocumentLinksButton.tsx b/src/client/views/nodes/DocumentLinksButton.tsx
index 4713ce447..025669b41 100644
--- a/src/client/views/nodes/DocumentLinksButton.tsx
+++ b/src/client/views/nodes/DocumentLinksButton.tsx
@@ -125,7 +125,7 @@ export class DocumentLinksButton extends React.Component<DocumentLinksButtonProp
         } else if (this.props.InMenu && !this.props.StartLink && DocumentLinksButton.StartLink && DocumentLinksButton.StartLink !== this.props.View) {
             const linkDoc = DocUtils.MakeLink({ doc: DocumentLinksButton.StartLink.props.Document }, { doc: this.props.View.props.Document }, "long drag");
             // this notifies any of the subviews that a document is made so that they can make finer-grained hyperlinks ().  see note above in onLInkButtonMoved
-            DocumentLinksButton.StartLink!._link = this.props.View._link = linkDoc;
+            DocumentLinksButton.StartLink._link = this.props.View._link = linkDoc;
             setTimeout(action(() => DocumentLinksButton.StartLink!._link = this.props.View._link = undefined), 0);
             LinkManager.currentLink = linkDoc;
             if (linkDoc) {
diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
index ab29f6889..a1f576029 100644
--- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx
+++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
@@ -236,7 +236,8 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp
             if (effectiveAcl === AclEdit || effectiveAcl === AclAdmin) {
                 if (!this._applyingChange && json.replace(/"selection":.*/, "") !== curProto?.Data.replace(/"selection":.*/, "")) {
                     this._applyingChange = true;
-                    (curText !== Cast(this.dataDoc[this.fieldKey], RichTextField)?.Text) && (this.dataDoc[this.props.fieldKey + "-lastModified"] = new DateField(new Date(Date.now()))) && (this.dataDoc["lastModified"] = new DateField(new Date(Date.now())));
+                    const lastmodified = "lastmodified";
+                    (curText !== Cast(this.dataDoc[this.fieldKey], RichTextField)?.Text) && (this.dataDoc[this.props.fieldKey + "-lastModified"] = new DateField(new Date(Date.now()))) && (this.dataDoc[lastmodified] = new DateField(new Date(Date.now())));
                     if ((!curTemp && !curProto) || curText || curLayout?.Data.includes("dash")) { // if no template, or there's text that didn't come from the layout template, write it to the document. (if this is driven by a template, then this overwrites the template text which is intended)
                         if (json.replace(/"selection":.*/, "") !== curLayout?.Data.replace(/"selection":.*/, "")) {
                             !curText && tx.storedMarks?.map(m => m.type.name === "pFontSize" && (Doc.UserDoc().fontSize = this.layoutDoc._fontSize = m.attrs.fontSize));
diff --git a/src/client/views/nodes/formattedText/RichTextMenu.tsx b/src/client/views/nodes/formattedText/RichTextMenu.tsx
index 6e268be48..5af07c15d 100644
--- a/src/client/views/nodes/formattedText/RichTextMenu.tsx
+++ b/src/client/views/nodes/formattedText/RichTextMenu.tsx
@@ -903,8 +903,9 @@ export default class RichTextMenu extends AntimodeMenu {
             ref_node = pos.nodeBefore;
         }
         if (pos.nodeAfter !== null && pos.nodeAfter !== undefined) {
-            if (!pos.nodeBefore || this.view.state.selection.$from.pos !== this.view.state.selection.$to.pos)
+            if (!pos.nodeBefore || this.view.state.selection.$from.pos !== this.view.state.selection.$to.pos) {
                 ref_node = pos.nodeAfter;
+            }
         }
         if (!ref_node && pos.pos > 0) {
             let skip = false;
diff --git a/src/client/views/search/FieldFilters.scss b/src/client/views/search/FieldFilters.scss
deleted file mode 100644
index e1d0d8df5..000000000
--- a/src/client/views/search/FieldFilters.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-.field-filters {
-    width: 100%;
-    display: grid;
-    // grid-template-columns: 18% 20% 60%;
-    grid-template-columns: 20% 25% 60%;
-}
-
-.field-filters-required {
-    width: 100%;
-    display: grid;
-    grid-template-columns: 50% 50%;
-}
\ No newline at end of file
diff --git a/src/client/views/search/FieldFilters.tsx b/src/client/views/search/FieldFilters.tsx
deleted file mode 100644
index 7a33282d2..000000000
--- a/src/client/views/search/FieldFilters.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import * as React from 'react';
-import { observable } from 'mobx';
-import { CheckBox } from './CheckBox';
-import { Keys } from './FilterBox';
-import "./FieldFilters.scss";
-
-export interface FieldFilterProps {
-    titleFieldStatus: boolean;
-    dataFieldStatus: boolean;
-    authorFieldStatus: boolean;
-    updateTitleStatus(stat: boolean): void;
-    updateAuthorStatus(stat: boolean): void;
-    updateDataStatus(stat: boolean): void;
-}
-
-export class FieldFilters extends React.Component<FieldFilterProps> {
-
-    static Instance: FieldFilters;
-
-    @observable public _resetBoolean = false;
-    @observable public _resetCounter: number = 0;
-
-    constructor(props: FieldFilterProps) {
-        super(props);
-        FieldFilters.Instance = this;
-    }
-
-    resetFieldFilters() {
-        this._resetBoolean = true;
-    }
-
-    render() {
-        return (
-            <div className="field-filters">
-                <CheckBox default={true} numCount={3} parent={this} originalStatus={this.props.titleFieldStatus} updateStatus={this.props.updateTitleStatus} title={Keys.TITLE} />
-                <CheckBox default={true} numCount={3} parent={this} originalStatus={this.props.authorFieldStatus} updateStatus={this.props.updateAuthorStatus} title={Keys.AUTHOR} />
-                <CheckBox default={false} numCount={3} parent={this} originalStatus={this.props.dataFieldStatus} updateStatus={this.props.updateDataStatus} title={"Deleted Docs"} />
-            </div>
-        );
-    }
-}
\ No newline at end of file
diff --git a/src/client/views/search/FilterBox.scss b/src/client/views/search/FilterBox.scss
deleted file mode 100644
index 094ea9cc5..000000000
--- a/src/client/views/search/FilterBox.scss
+++ /dev/null
@@ -1,178 +0,0 @@
-@import "../globalCssVariables";
-@import "./NaviconButton.scss";
-
-.filter-form {
-    padding: 25px;
-    width: 440px;
-    position: relative;
-    right: 1px;
-    color: grey;
-    flex-direction: column;
-    display: inline-block;
-    transform-origin: top;
-    overflow: auto;
-    border-bottom: solid black 3px;
-
-    .top-filter-header {
-
-        #header {
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            font-size: 13;
-            width: 80%;
-        }
-
-        .close-icon {
-            width: 20%;
-            opacity: .6;
-            position: relative;
-            display: block;
-
-            .line {
-                display: block;
-                background: $alt-accent;
-                width: 20;
-                height: 3;
-                position: absolute;
-                right: 0;
-                border-radius: ($height-line / 2);
-
-                &.line-1 {
-                    transform: rotate(45deg);
-                    top: 45%;
-                }
-
-                &.line-2 {
-                    transform: rotate(-45deg);
-                    top: 45%;
-                }
-            }
-        }
-
-        .close-icon:hover {
-            opacity: 1;
-        }
-
-    }
-
-    .filter-options {
-
-        .filter-div {
-            margin-top: 10px;
-            margin-bottom: 10px;
-            display: inline-block;
-            width: 100%;
-            border-color: rgba(178, 206, 248, .2); // $darker-alt-accent
-            border-top-style: solid;
-
-            .filter-header {
-                display: flex;
-                align-items: center;
-                margin-bottom: 10px;
-                letter-spacing: 2px;
-
-                .filter-title {
-                    font-size: 13;
-                    text-transform: uppercase;
-                    margin-top: 10px;
-                    margin-bottom: 10px;
-                    -webkit-transition: all 0.2s ease-in-out;
-                    -moz-transition: all 0.2s ease-in-out;
-                    -o-transition: all 0.2s ease-in-out;
-                    transition: all 0.2s ease-in-out;
-                }
-            }
-
-            .filter-header:hover .filter-title {
-                transform: scale(1.05);
-            }
-
-            .filter-panel {
-                max-height: 0px;
-                width: 100%;
-                overflow: hidden;
-                opacity: 0;
-                transform-origin: top;
-                -webkit-transition: all 0.2s ease-in-out;
-                -moz-transition: all 0.2s ease-in-out;
-                -o-transition: all 0.2s ease-in-out;
-                transition: all 0.2s ease-in-out;
-                text-align: center;
-            }
-        }
-    }
-
-    .filter-buttons {
-        border-color: rgba(178, 206, 248, .2); // $darker-alt-accent
-        border-top-style: solid;
-        padding-top: 10px;
-    }
-}
-
-.active-filters {
-    display: flex;
-    flex-direction: row-reverse;
-    justify-content: flex-end;
-    width: 100%;
-    margin-right: 30px;
-    position: relative;
-
-    .active-icon {
-        max-width: 40px;
-        flex: initial;
-
-        &.icon {
-            width: 40px;
-            text-align: center;
-            margin-bottom: 5px;
-            position: absolute;
-        }
-
-        &.container {
-            display: flex;
-            flex-direction: column;
-            width: 40px;
-        }
-
-        &.description {
-            text-align: center;
-            top: 40px;
-            position: absolute;
-            width: 40px;
-            font-size: 9px;
-            opacity: 0;
-            -webkit-transition: all 0.2s ease-in-out;
-            -moz-transition: all 0.2s ease-in-out;
-            -o-transition: all 0.2s ease-in-out;
-            transition: all 0.2s ease-in-out;
-        }
-
-        &.icon:hover+.description {
-            opacity: 1;
-        }
-    }
-
-    .col-icon {
-        height: 35px;
-        margin-left: 5px;
-        width: 35px;
-        background-color: black;
-        color: white;
-        border-radius: 50%;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-
-        .save-filter,
-        .reset-filter,
-        .all-filter {
-            background-color: gray;
-        }
-
-        .save-filter:hover,
-        .reset-filter:hover,
-        .all-filter:hover {
-            background-color: $darker-alt-accent;
-        }
-    }
-}
\ No newline at end of file
diff --git a/src/client/views/search/FilterBox.tsx b/src/client/views/search/FilterBox.tsx
deleted file mode 100644
index eb61f9a14..000000000
--- a/src/client/views/search/FilterBox.tsx
+++ /dev/null
@@ -1,431 +0,0 @@
-import * as React from 'react';
-import { observer } from 'mobx-react';
-import { observable, action } from 'mobx';
-import "./SearchBox.scss";
-import { faTimes, faCheckCircle, faObjectGroup } from '@fortawesome/free-solid-svg-icons';
-import { library } from '@fortawesome/fontawesome-svg-core';
-import { Doc } from '../../../fields/Doc';
-import { Id } from '../../../fields/FieldSymbols';
-import { DocumentType } from "../../documents/DocumentTypes";
-import { Cast, StrCast } from '../../../fields/Types';
-import * as _ from "lodash";
-import { IconBar } from './IconBar';
-import { FieldFilters } from './FieldFilters';
-import { SelectionManager } from '../../util/SelectionManager';
-import { DocumentView } from '../nodes/DocumentView';
-import { CollectionFilters } from './CollectionFilters';
-import * as $ from 'jquery';
-import "./FilterBox.scss";
-import { SearchBox } from './SearchBox';
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-
-library.add(faTimes);
-library.add(faCheckCircle);
-library.add(faObjectGroup);
-
-export enum Keys {
-    TITLE = "title",
-    AUTHOR = "author",
-    DATA = "data"
-}
-
-@observer
-export class FilterBox extends React.Component {
-
-    static Instance: FilterBox;
-    public _allIcons: string[] = [DocumentType.AUDIO, DocumentType.COL, DocumentType.IMG, DocumentType.LINK, DocumentType.PDF, DocumentType.RTF, DocumentType.VID, DocumentType.WEB];
-
-    //if true, any keywords can be used. if false, all keywords are required.
-    //this also serves as an indicator if the word status filter is applied
-    @observable private _basicWordStatus: boolean = true;
-    @observable private _filterOpen: boolean = false;
-    //if icons = all icons, then no icon filter is applied
-    @observable private _icons: string[] = this._allIcons;
-    //if all of these are true, no key filter is applied
-    @observable private _anyKeywordStatus: boolean = true;
-    @observable private _allKeywordStatus: boolean = true;
-    @observable private _titleFieldStatus: boolean = true;
-    @observable private _authorFieldStatus: boolean = true;
-    @observable private _dataFieldStatus: boolean = true;
-    //this also serves as an indicator if the collection status filter is applied
-    @observable public _deletedDocsStatus: boolean = false;
-    @observable private _collectionStatus = false;
-    @observable private _collectionSelfStatus = true;
-    @observable private _collectionParentStatus = true;
-    @observable private _wordStatusOpen: boolean = false;
-    @observable private _typeOpen: boolean = false;
-    @observable private _colOpen: boolean = false;
-    @observable private _fieldOpen: boolean = false;
-    public _pointerTime: number = -1;
-
-    constructor(props: Readonly<{}>) {
-        super(props);
-        FilterBox.Instance = this;
-    }
-    setupAccordion() {
-        $('document').ready(function () {
-            const acc = document.getElementsByClassName('filter-header');
-            // tslint:disable-next-line: prefer-for-of
-            for (let i = 0; i < acc.length; i++) {
-                acc[i].addEventListener("click", function (this: HTMLElement) {
-                    this.classList.toggle("active");
-
-                    const panel = this.nextElementSibling as HTMLElement;
-                    if (panel.style.maxHeight) {
-                        panel.style.overflow = "hidden";
-                        panel.style.maxHeight = "";
-                        panel.style.opacity = "0";
-                    } else {
-                        setTimeout(() => {
-                            panel.style.overflow = "visible";
-                        }, 200);
-                        setTimeout(() => {
-                            panel.style.opacity = "1";
-                        }, 50);
-                        panel.style.maxHeight = panel.scrollHeight + "px";
-
-                    }
-                });
-
-                const el = acc[i] as HTMLElement;
-                el.click();
-            }
-        });
-    }
-
-    @action.bound
-    minimizeAll() {
-        $('document').ready(function () {
-            const acc = document.getElementsByClassName('filter-header');
-
-            // tslint:disable-next-line: prefer-for-of
-            for (var i = 0; i < acc.length; i++) {
-                const classList = acc[i].classList;
-                if (classList.contains("active")) {
-                    acc[i].classList.toggle("active");
-                    const panel = acc[i].nextElementSibling as HTMLElement;
-                    panel.style.overflow = "hidden";
-                    panel.style.maxHeight = "";
-                }
-            }
-        });
-    }
-
-    @action.bound
-    resetFilters = () => {
-        this._basicWordStatus = true;
-        IconBar.Instance.selectAll();
-        FieldFilters.Instance.resetFieldFilters();
-    }
-
-    basicRequireWords(query: string): string {
-        const oldWords = query.split(" ");
-        const newWords: string[] = [];
-        oldWords.forEach(word => {
-            const newWrd = "+" + word;
-            newWords.push(newWrd);
-        });
-        query = newWords.join(" ");
-
-        return query;
-    }
-
-    basicFieldFilters(query: string, type: string): string {
-        const oldWords = query.split(" ");
-        let mod = "";
-
-        if (type === Keys.AUTHOR) {
-            mod = " author_t:";
-        } if (type === Keys.DATA) {
-            //TODO
-        } if (type === Keys.TITLE) {
-            mod = " title_t:";
-        }
-
-        const newWords: string[] = [];
-        oldWords.forEach(word => {
-            const newWrd = mod + word;
-            newWords.push(newWrd);
-        });
-
-        query = newWords.join(" ");
-
-        return query;
-    }
-
-    applyBasicFieldFilters(query: string) {
-        let finalQuery = "";
-
-        if (this._titleFieldStatus) {
-            finalQuery = finalQuery + this.basicFieldFilters(query, Keys.TITLE);
-        }
-        if (this._authorFieldStatus) {
-            finalQuery = finalQuery + this.basicFieldFilters(query, Keys.AUTHOR);
-        }
-        if (this._deletedDocsStatus) {
-            finalQuery = finalQuery + this.basicFieldFilters(query, Keys.DATA);
-        }
-        return finalQuery;
-    }
-
-    get fieldFiltersApplied() { return !(this._authorFieldStatus && this._titleFieldStatus); }
-
-    //TODO: basically all of this
-    //gets all of the collections of all the docviews that are selected
-    //if a collection is the only thing selected, search only in that collection (not its container)
-    getCurCollections(): Doc[] {
-        const selectedDocs: DocumentView[] = SelectionManager.SelectedDocuments();
-        const collections: Doc[] = [];
-
-        selectedDocs.forEach(async element => {
-            const layout: string = StrCast(element.props.Document.layout);
-            //checks if selected view (element) is a collection. if it is, adds to list to search through
-            if (layout.indexOf("Collection") > -1) {
-                //makes sure collections aren't added more than once
-                if (!collections.includes(element.props.Document)) {
-                    collections.push(element.props.Document);
-                }
-            }
-            //makes sure collections aren't added more than once
-            if (element.props.ContainingCollectionDoc && !collections.includes(element.props.ContainingCollectionDoc)) {
-                collections.push(element.props.ContainingCollectionDoc);
-            }
-        });
-
-        return collections;
-    }
-
-    getFinalQuery(query: string): string {
-        //alters the query so it looks in the correct fields
-        //if this is true, then not all of the field boxes are checked
-        //TODO: data
-        if (this.fieldFiltersApplied) {
-            query = this.applyBasicFieldFilters(query);
-            query = query.replace(/\s+/g, ' ').trim();
-        }
-
-        //alters the query based on if all words or any words are required
-        //if this._wordstatus is false, all words are required and a + is added before each
-        if (!this._basicWordStatus) {
-            query = this.basicRequireWords(query);
-            query = query.replace(/\s+/g, ' ').trim();
-        }
-
-        //if should be searched in a specific collection
-        if (this._collectionStatus) {
-            query = this.addCollectionFilter(query);
-            query = query.replace(/\s+/g, ' ').trim();
-        }
-        return query;
-    }
-
-    addCollectionFilter(query: string): string {
-        const collections: Doc[] = this.getCurCollections();
-        const oldWords = query.split(" ");
-
-        const collectionString: string[] = [];
-        collections.forEach(doc => {
-            const proto = doc.proto;
-            const protoId = (proto || doc)[Id];
-            const colString: string = "{!join from=data_l to=id}id:" + protoId + " ";
-            collectionString.push(colString);
-        });
-
-        let finalColString = collectionString.join(" ");
-        finalColString = finalColString.trim();
-        return "+(" + finalColString + ")" + query;
-    }
-
-    get filterTypes() {
-        return this._icons.length === 9 ? undefined : this._icons;
-    }
-
-    @action
-    filterDocsByType(docs: Doc[]) {
-        if (this._icons.length === 9) {
-            return docs;
-        }
-        const finalDocs: Doc[] = [];
-        docs.forEach(doc => {
-            const layoutresult = Cast(doc.type, "string");
-            if (layoutresult && this._icons.includes(layoutresult)) {
-                finalDocs.push(doc);
-            }
-        });
-        return finalDocs;
-    }
-
-    getABCicon() {
-        return (
-            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 87.8 87.8" height="35">
-                <path d="M25.4 47.9c-1.3 1.3-1.9 2.8-1.9 4.8 0 3.8 2.3 6.1 6.1 6.1 5.1 0 8-3.3 9-6.2 0.2-0.7 0.4-1.4 0.4-2.1v-6.1c-0.1 0-0.1 0-0.2 0C32.2 44.5 27.7 45.6 25.4 47.9z" />
-                <path d="M64.5 28.6c-2.2 0-4.1 1.5-4.7 3.8l0 0.2c-0.1 0.3-0.1 0.7-0.1 1.1v3.3c0 0.4 0.1 0.8 0.2 1.1 0.6 2.2 2.4 3.6 4.6 3.6 3.2 0 5.2-2.6 5.2-6.7C69.5 31.8 68 28.6 64.5 28.6z" />
-                <path d="M43.9 0C19.7 0 0 19.7 0 43.9s19.7 43.9 43.9 43.9 43.9-19.6 43.9-43.9S68.1 0 43.9 0zM40.1 65.5l-0.5-4c-3 3.1-7.4 4.9-12.1 4.9 -6.8 0-13.6-4.4-13.6-12.8 0-4 1.3-7.4 4-10 4.1-4.1 11.1-6.2 20.8-6.3 0-5.5-2.9-8.4-8.3-8.4 -3.6 0-7.4 1.1-10.2 2.9l-1.1 0.7 -2.4-6.9 0.7-0.4c3.7-2.4 8.9-3.8 14.1-3.8 10.9 0 16.7 6.2 16.7 17.9V54.6c0 4.1 0.2 7.2 0.7 9.7L49 65.5H40.1zM65.5 67.5c1.8 0 3-0.5 4-0.9l0.5-0.2 0.8 3.4 -0.3 0.2c-1 0.5-3 1.1-5.5 1.1 -5.8 0-9.7-4-9.7-9.9 0-6.1 4.3-10.3 10.4-10.3 2.1 0 4 0.5 4.9 1l0.3 0.2 -1 3.5 -0.5-0.3c-0.7-0.4-1.8-0.8-3.7-0.8 -3.7 0-6.1 2.6-6.1 6.6C59.5 64.8 61.9 67.5 65.5 67.5zM65 45.3c-2.5 0-4.5-0.9-5.9-2.7l-0.1 2.3h-3.8l0-0.5c0.1-1.2 0.2-3.1 0.2-4.8V16.7h4.3v10.8c1.4-1.6 3.5-2.5 6-2.5 2.2 0 4.1 0.8 5.5 2.3 1.8 1.8 2.8 4.5 2.8 7.7C73.8 42.1 69.3 45.3 65 45.3z" />
-            </svg>
-        );
-    }
-
-    getTypeIcon() {
-        return (
-            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 87.8 87.8" height="35">
-                <path d="M43.9 0C19.7 0 0 19.7 0 43.9s19.7 43.9 43.9 43.9 43.9-19.6 43.9-43.9S68.1 0 43.9 0zM43.9 12.2c4.1 0 7.5 3.4 7.5 7.5 0 4.1-3.4 7.5-7.5 7.5 -4.1 0-7.5-3.4-7.5-7.5C36.4 15.5 39.7 12.2 43.9 12.2zM11.9 50.4l7.5-13 7.5 13H11.9zM47.6 75.7h-7.5l-3.7-6.5 3.8-6.5h7.5l3.8 6.5L47.6 75.7zM70.7 70.7c-0.2 0.2-0.4 0.3-0.7 0.3s-0.5-0.1-0.7-0.3l-25.4-25.4 -25.4 25.4c-0.2 0.2-0.4 0.3-0.7 0.3s-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1 0-1.4l25.4-25.4 -25.4-25.4c-0.4-0.4-0.4-1 0-1.4s1-0.4 1.4 0l25.4 25.4 25.4-25.4c0.4-0.4 1-0.4 1.4 0s0.4 1 0 1.4l-25.4 25.4 25.4 25.4C71.1 69.7 71.1 70.3 70.7 70.7zM61.4 51.4v-15h15v15H61.4z" />
-            </svg>
-        );
-    }
-
-    getKeyIcon() {
-        return (
-            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 87.8 87.8" height="35">
-                <path d="M38.5 32.4c0 3.4-2.7 6.1-6.1 6.1 -3.4 0-6.1-2.7-6.1-6.1 0-3.4 2.8-6.1 6.1-6.1C35.8 26.3 38.5 29 38.5 32.4zM87.8 43.9c0 24.2-19.6 43.9-43.9 43.9S0 68.1 0 43.9C0 19.7 19.7 0 43.9 0S87.8 19.7 87.8 43.9zM66.8 60.3L50.2 43.7c-0.5-0.5-0.6-1.2-0.4-1.8 2.4-5.6 1.1-12.1-3.2-16.5 -5.9-5.8-15.4-5.8-21.2 0l0 0c-4.3 4.3-5.6 10.8-3.2 16.5 3.2 7.6 12 11.2 19.7 8 0.6-0.3 1.4-0.1 1.8 0.4l3.1 3.1h3.9c1.2 0 2.2 1 2.2 2.2v3.6h3.6c1.2 0 2.2 1 2.2 2.2v4l1.6 1.6h6.5V60.3z" />
-            </svg>
-        );
-    }
-
-    getColIcon() {
-        return (
-            <div className="col-icon">
-                <FontAwesomeIcon icon={faObjectGroup} size="lg" />
-            </div>
-        );
-    }
-
-    @action.bound
-    openFilter = () => {
-        this._filterOpen = !this._filterOpen;
-        SearchBox.Instance.closeResults();
-        this.setupAccordion();
-    }
-
-    //if true, any keywords can be used. if false, all keywords are required.
-    @action.bound
-    handleWordQueryChange = () => {
-        this._basicWordStatus = !this._basicWordStatus;
-    }
-
-    @action.bound
-    updateIcon(newArray: string[]) { this._icons = newArray; }
-
-    @action.bound
-    getIcons(): string[] { return this._icons; }
-
-    stopProp = (e: React.PointerEvent) => {
-        e.stopPropagation();
-        this._pointerTime = e.timeStamp;
-    }
-
-    @action.bound
-    public closeFilter() {
-        this._filterOpen = false;
-    }
-
-    @action.bound
-    updateAnyKeywordStatus(newStat: boolean) { this._anyKeywordStatus = newStat; }
-
-    @action.bound
-    updateAllKeywordStatus(newStat: boolean) { this._allKeywordStatus = newStat; }
-
-    @action.bound
-    updateTitleStatus(newStat: boolean) { this._titleFieldStatus = newStat; }
-
-    @action.bound
-    updateAuthorStatus(newStat: boolean) { this._authorFieldStatus = newStat; }
-
-    @action.bound
-    updateDataStatus(newStat: boolean) { this._deletedDocsStatus = newStat; }
-
-    @action.bound
-    updateCollectionStatus(newStat: boolean) { this._collectionStatus = newStat; }
-
-    @action.bound
-    updateSelfCollectionStatus(newStat: boolean) { this._collectionSelfStatus = newStat; }
-
-    @action.bound
-    updateParentCollectionStatus(newStat: boolean) { this._collectionParentStatus = newStat; }
-
-    getAnyKeywordStatus() { return this._anyKeywordStatus; }
-    getAllKeywordStatus() { return this._allKeywordStatus; }
-    getCollectionStatus() { return this._collectionStatus; }
-    getSelfCollectionStatus() { return this._collectionSelfStatus; }
-    getParentCollectionStatus() { return this._collectionParentStatus; }
-    getTitleStatus() { return this._titleFieldStatus; }
-    getAuthorStatus() { return this._authorFieldStatus; }
-    getDataStatus() { return this._deletedDocsStatus; }
-
-    getActiveFilters() {
-        return (
-            <div className="active-filters">
-                {!this._basicWordStatus ? <div className="active-icon container">
-                    <div className="active-icon icon">{this.getABCicon()}</div>
-                    <div className="active-icon description">Required Words Applied</div>
-                </div> : undefined}
-                {!(this._icons.length === 9) ? <div className="active-icon container">
-                    <div className="active-icon icon">{this.getTypeIcon()}</div>
-                    <div className="active-icon description">Type Filters Applied</div>
-                </div> : undefined}
-                {!(this._authorFieldStatus && this._dataFieldStatus && this._titleFieldStatus) ?
-                    <div className="active-icon container">
-                        <div className="active-icon icon">{this.getKeyIcon()}</div>
-                        <div className="active-icon description">Field Filters Applied</div>
-                    </div> : undefined}
-                {this._collectionStatus ? <div className="active-icon container">
-                    <div className="active-icon icon">{this.getColIcon()}</div>
-                    <div className="active-icon description">Collection Filters Active</div>
-                </div> : undefined}
-            </div>
-        );
-    }
-
-    // Useful queries:
-    // Delegates of a document: {!join from=id to=proto_i}id:{protoId}
-    // Documents in a collection: {!join from=data_l to=id}id:{collectionProtoId} //id of collections prototype
-    render() {
-        return (
-            <div>
-                <div style={{ display: "flex", flexDirection: "row-reverse" }}>
-                    <SearchBox />
-                    {/* {this.getActiveFilters()} */}
-                </div>
-                {this._filterOpen ? (
-                    <div className="filter-form" onPointerDown={this.stopProp} id="filter-form" style={this._filterOpen ? { display: "flex", background: "black" } : { display: "none" }}>
-                        <div className="top-filter-header" style={{ display: "flex", width: "100%" }}>
-                            <div id="header">Filter Search Results</div>
-                            <div style={{ marginLeft: "auto" }}></div>
-                            <div className="close-icon" onClick={this.closeFilter}>
-                                <span className="line line-1"></span>
-                                <span className="line line-2"></span></div>
-                        </div>
-                        <div className="filter-options">
-                            <div className="filter-div">
-                                <div className="filter-header">
-                                    <div className='filter-title words'>Required words</div>
-                                </div>
-                                <div className="filter-panel" >
-                                    <button className="all-filter" onClick={this.handleWordQueryChange}>Include All Keywords</button>
-                                </div>
-                            </div>
-                            <div className="filter-div">
-                                <div className="filter-header">
-                                    <div className="filter-title icon">Filter by type of node</div>
-                                </div>
-                                <div className="filter-panel"><IconBar /></div>
-                            </div>
-                            <div className="filter-div">
-                                <div className="filter-header">
-                                    <div className="filter-title field">Filter by Basic Keys</div>
-                                </div>
-                                <div className="filter-panel"><FieldFilters
-                                    titleFieldStatus={this._titleFieldStatus} dataFieldStatus={this._deletedDocsStatus} authorFieldStatus={this._authorFieldStatus}
-                                    updateAuthorStatus={this.updateAuthorStatus} updateDataStatus={this.updateDataStatus} updateTitleStatus={this.updateTitleStatus} /> </div>
-                            </div>
-                        </div>
-                        <div className="filter-buttons" style={{ display: "flex", justifyContent: "space-around" }}>
-                            <button className="save-filter" >Save Filters</button>
-                            <button className="reset-filter" onClick={this.resetFilters}>Reset Filters</button>
-                        </div>
-                    </div>
-                ) :
-                    undefined}
-            </div>
-        );
-    }
-}
\ No newline at end of file
diff --git a/src/server/websocket.ts b/src/server/websocket.ts
index cdce41a3a..2c8ec090a 100644
--- a/src/server/websocket.ts
+++ b/src/server/websocket.ts
@@ -286,16 +286,16 @@ export namespace WebSocket {
             dynfield = true;
             const val = docfield[key];
             key = key.substring(7);
-            if (key==="_height"){
-                Object.values(suffixMap).forEach(suf => {update[key] = { set: null };});
+            if (key === "_height") {
+                Object.values(suffixMap).forEach(suf => { update[key] = { set: null }; });
             }
             else {
-            Object.values(suffixMap).forEach(suf => {update[key + getSuffix(suf)] = { set: null };});
+                Object.values(suffixMap).forEach(suf => { update[key + getSuffix(suf)] = { set: null }; });
             }
             const term = ToSearchTerm(val);
             if (term !== undefined) {
                 const { suffix, value } = term;
-                if (key==="_height"){
+                if (key === "_height") {
                     update[key] = { set: value };
                 }
                 update[key + suffix] = { set: value };
-- 
cgit v1.2.3-70-g09d2


From 2b8fd3bbc922fdb9b82ed5cabe6308b37077fb9e Mon Sep 17 00:00:00 2001
From: usodhi <61431818+usodhi@users.noreply.github.com>
Date: Wed, 5 Aug 2020 13:23:47 +0530
Subject: comments and minor changes

---
 src/client/util/CurrentUserUtils.ts                   |  2 +-
 src/client/views/MainView.tsx                         |  2 +-
 .../collections/collectionFreeForm/PropertiesView.tsx | 19 +++++++++++++++++++
 src/client/views/nodes/DocumentView.tsx               |  4 ++--
 4 files changed, 23 insertions(+), 4 deletions(-)

(limited to 'src/client/util')

diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index 8023df8b4..aceab9dd2 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -824,7 +824,7 @@ export class CurrentUserUtils {
     // Right sidebar is where mobile uploads are contained
     static setupRightSidebar(doc: Doc) {
         if (doc["sidebar-sharing"] === undefined) {
-            doc["sidebar-sharing"] = new PrefetchProxy(Docs.Create.StackingDocument([], { title: "Mobile Uploads" }));
+            doc["sidebar-sharing"] = new PrefetchProxy(Docs.Create.StackingDocument([], { title: "Shared Documents", childDropAction: "alias" }));
         }
     }
 
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index 66545ea1f..61520bc36 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -408,7 +408,7 @@ export class MainView extends React.Component {
     }
     sidebarScreenToLocal = () => new Transform(0, (CollectionMenu.Instance.Pinned ? -35 : 0), 1);
     //sidebarScreenToLocal = () => new Transform(0, (RichTextMenu.Instance.Pinned ? -35 : 0) + (CollectionMenu.Instance.Pinned ? -35 : 0), 1);
-    mainContainerXf = () => this.sidebarScreenToLocal().translate(0, -this._buttonBarHeight);
+    mainContainerXf = () => this.sidebarScreenToLocal().translate(-55, 0);
 
     @computed get closePosition() { return 55 + this.flyoutWidth; }
     @computed get flyout() {
diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx
index f5e0cd077..31962837c 100644
--- a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx
+++ b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx
@@ -266,11 +266,17 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
         }
     }
 
+    /**
+     * Handles the changing of a user's permissions from the permissions panel.
+     */
     @undoBatch
     changePermissions = (e: any, user: string) => {
         SharingManager.Instance.shareFromPropertiesSidebar(user, e.currentTarget.value as SharingPermissions, this.selectedDoc!);
     }
 
+    /**
+     * @returns the options for the permissions dropdown.
+     */
     getPermissionsSelect(user: string) {
         return <select className="permissions-select"
             onChange={e => this.changePermissions(e, user)}>
@@ -283,6 +289,9 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
         </select>;
     }
 
+    /**
+     * @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></>}>
             <div className="notify-button">
@@ -291,6 +300,9 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
         </Tooltip>;
     }
 
+    /**
+     * ... 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></>}>
             <div className="expansion-button" onPointerDown={() => {
@@ -303,6 +315,9 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
         </Tooltip>;
     }
 
+    /**
+     * @returns a row of the permissions panel
+     */
     sharingItem(name: string, effectiveAcl: symbol, permission?: string) {
         return <div className="propertiesView-sharingTable-item">
             <div className="propertiesView-sharingTable-item-name" style={{ width: name !== "Me" ? "85px" : "80px" }}> {name} </div>
@@ -314,6 +329,9 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
         </div>;
     }
 
+    /**
+     * @returns the sharing and permissiosn panel.
+     */
     @computed get sharingTable() {
         const AclMap = new Map<symbol, string>([
             [AclPrivate, SharingPermissions.None],
@@ -333,6 +351,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
             }
         }
 
+        // shifts the current user and the owner to the top of the doc.
         tableEntries.unshift(this.sharingItem("Me", effectiveAcl, Doc.CurrentUserEmail === this.selectedDoc!.author ? "Owner" : StrCast(this.selectedDoc![`ACL-${Doc.CurrentUserEmail.replace(".", "_")}`])));
         if (Doc.CurrentUserEmail !== this.selectedDoc!.author) tableEntries.unshift(this.sharingItem(StrCast(this.selectedDoc!.author), effectiveAcl, "Owner"));
 
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 81738f234..60075d5cf 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -179,7 +179,8 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
         RadialMenu.Instance.openMenu(pt.pageX - 15, pt.pageY - 15);
 
         // RadialMenu.Instance.addItem({ description: "Open Fields", event: () => this.props.addDocTab(Docs.Create.KVPDocument(this.props.Document, { _width: 300, _height: 300 }), "onRight"), icon: "map-pin", selected: -1 });
-        RadialMenu.Instance.addItem({ description: "Delete", event: () => { this.props.ContainingCollectionView?.removeDocument(this.props.Document), RadialMenu.Instance.closeMenu(); }, icon: "external-link-square-alt", selected: -1 });
+        const effectiveAcl = GetEffectiveAcl(this.props.Document);
+        (effectiveAcl === AclEdit || effectiveAcl === AclAdmin) && RadialMenu.Instance.addItem({ description: "Delete", event: () => { this.props.ContainingCollectionView?.removeDocument(this.props.Document), RadialMenu.Instance.closeMenu(); }, icon: "external-link-square-alt", selected: -1 });
         // RadialMenu.Instance.addItem({ description: "Open in a new tab", event: () => this.props.addDocTab(this.props.Document, "onRight"), icon: "trash", selected: -1 });
         RadialMenu.Instance.addItem({ description: "Pin", event: () => this.props.pinToPres(this.props.Document), icon: "map-pin", selected: -1 });
         RadialMenu.Instance.addItem({ description: "Open", event: () => MobileInterface.Instance.handleClick(this.props.Document), icon: "trash", selected: -1 });
@@ -762,7 +763,6 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
             moreItems.push({ description: "Copy ID", event: () => Utils.CopyText(Utils.prepend("/doc/" + this.props.Document[Id])), icon: "fingerprint" });
             Doc.AreProtosEqual(this.props.Document, Doc.UserDoc()) && moreItems.push({ description: "Toggle Always Show Link End", event: () => Doc.UserDoc()["documentLinksButton-hideEnd"] = !Doc.UserDoc()["documentLinksButton-hideEnd"], icon: "eye" });
         }
-        //GetEffectiveAcl(this.props.Document) === AclEdit && moreItems.push({ description: "Delete", event: this.deleteClicked, icon: "trash" });
 
         const effectiveAcl = GetEffectiveAcl(this.props.Document);
         (effectiveAcl === AclEdit || effectiveAcl === AclAdmin) && moreItems.push({ description: "Delete", event: this.deleteClicked, icon: "trash" });
-- 
cgit v1.2.3-70-g09d2


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

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

(limited to 'src/client/util')

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


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

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

(limited to 'src/client/util')

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


From 1c01a1579f279237e364b230d42518aa678e3dcf Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Wed, 5 Aug 2020 18:05:09 -0400
Subject: restored function lost in merge

---
 src/client/util/CurrentUserUtils.ts | 11 +++++++++++
 1 file changed, 11 insertions(+)

(limited to 'src/client/util')

diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index 70a4ceb68..ba97b9fe0 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -769,8 +769,19 @@ export class CurrentUserUtils {
         }
     }
 
+    static setupSidebarContainer(doc: Doc) {
+        if (doc["sidebar"] === undefined) {
+            const sidebarContainer = new Doc();
+            sidebarContainer._chromeStatus = "disabled";
+            sidebarContainer.onClick = ScriptField.MakeScript("freezeSidebar()");
+            doc["sidebar"] = new PrefetchProxy(sidebarContainer);
+        }
+        return doc["sidebar"] as Doc;
+    }
+
     // setup the list of sidebar mode buttons which determine what is displayed in the sidebar
     static async setupSidebarButtons(doc: Doc) {
+        CurrentUserUtils.setupSidebarContainer(doc);
         await CurrentUserUtils.setupToolsBtnPanel(doc);
         CurrentUserUtils.setupWorkspaces(doc);
         CurrentUserUtils.setupCatalog(doc);
-- 
cgit v1.2.3-70-g09d2


From cc905d329c88d7bdf9b7324a4f02ab92906ba7c8 Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Wed, 5 Aug 2020 22:20:49 -0400
Subject: cleanup of presentation code pre-merge.

---
 src/client/documents/Documents.ts                  |  4 --
 src/client/util/CurrentUserUtils.ts                |  8 ++--
 src/client/views/InkingStroke.tsx                  |  6 +--
 src/client/views/MainView.tsx                      |  2 +-
 .../CollectionStackingViewFieldColumn.tsx          |  3 +-
 .../views/collections/CollectionTreeView.tsx       |  1 -
 .../collectionFreeForm/PropertiesView.tsx          |  4 +-
 src/client/views/nodes/AudioBox.tsx                |  1 -
 .../views/nodes/CollectionFreeFormDocumentView.tsx | 11 +----
 src/client/views/nodes/DocumentLinksButton.tsx     |  2 +-
 src/client/views/nodes/PresBox.tsx                 | 49 ++++++++++------------
 .../views/nodes/formattedText/FormattedTextBox.tsx | 17 ++++----
 .../views/nodes/formattedText/RichTextMenu.tsx     |  3 +-
 .../views/presentationview/PresElementBox.tsx      |  2 +-
 14 files changed, 46 insertions(+), 67 deletions(-)

(limited to 'src/client/util')

diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index 57fcf3a00..959aeac41 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -801,10 +801,6 @@ export namespace Docs {
             return InstanceFromProto(Prototypes.get(DocumentType.FONTICON), undefined, { hideLinkButton: true, ...(options || {}) });
         }
 
-        export function MenuIconDocument(options?: DocumentOptions) {
-            return InstanceFromProto(Prototypes.get(DocumentType.MENUICON), undefined, { hideLinkButton: true, ...(options || {}) });
-        }
-
         export function PresElementBoxDocument(options?: DocumentOptions) {
             return InstanceFromProto(Prototypes.get(DocumentType.PRESELEMENT), undefined, { ...(options || {}) });
         }
diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index 8023df8b4..4e59434b5 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -546,7 +546,7 @@ export class CurrentUserUtils {
                     btn.color = "white";
                     btn._backgroundColor = "";
                 }));
-            })
+            });
         });
         return doc.menuStack as Doc;
     }
@@ -763,13 +763,13 @@ export class CurrentUserUtils {
     }
 
     static setupSidebarContainer(doc: Doc) {
-        if (doc["sidebar"] === undefined) {
+        if (doc.sidebar === undefined) {
             const sidebarContainer = new Doc();
             sidebarContainer._chromeStatus = "disabled";
             sidebarContainer.onClick = ScriptField.MakeScript("freezeSidebar()");
-            doc["sidebar"] = new PrefetchProxy(sidebarContainer);
+            doc.sidebar = new PrefetchProxy(sidebarContainer);
         }
-        return doc["sidebar"] as Doc;
+        return doc.sidebar as Doc;
     }
 
     // setup the list of sidebar mode buttons which determine what is displayed in the sidebar
diff --git a/src/client/views/InkingStroke.tsx b/src/client/views/InkingStroke.tsx
index 6c5eda256..4a77728b6 100644
--- a/src/client/views/InkingStroke.tsx
+++ b/src/client/views/InkingStroke.tsx
@@ -115,9 +115,9 @@ export class InkingStroke extends ViewBoxBaseComponent<FieldViewProps, InkDocume
             StrCast(this.layoutDoc.strokeBezier), StrCast(this.layoutDoc.fillColor, "transparent"),
             "none", "none", "0", scaleX, scaleY, "", this.props.active() ? "visiblepainted" : "none", false, true);
 
-        var controlPoints: { X: number, Y: number, I: number }[] = [];
-        var handlePoints: { X: number, Y: number, I: number, dot1: number, dot2: number }[] = [];
-        var handleLine: { X1: number, Y1: number, X2: number, Y2: number, X3: number, Y3: number, dot1: number, dot2: number }[] = [];
+        const controlPoints: { X: number, Y: number, I: number }[] = [];
+        const handlePoints: { X: number, Y: number, I: number, dot1: number, dot2: number }[] = [];
+        const handleLine: { X1: number, Y1: number, X2: number, Y2: number, X3: number, Y3: number, dot1: number, dot2: number }[] = [];
         if (data.length >= 4) {
             for (var i = 0; i <= data.length - 4; i += 4) {
                 controlPoints.push({ X: data[i].X, Y: data[i].Y, I: i });
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index 138ff226f..7f50dda72 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -80,7 +80,7 @@ export class MainView extends React.Component {
     @computed private get mainContainer() { return this.userDoc ? FieldValue(Cast(this.userDoc.activeWorkspace, Doc)) : CurrentUserUtils.GuestWorkspace; }
     @computed public get mainFreeform(): Opt<Doc> { return (docs => (docs && docs.length > 1) ? docs[1] : undefined)(DocListCast(this.mainContainer!.data)); }
 
-    @observable public sidebarContent: any = this.userDoc?.["sidebar"];
+    @observable public sidebarContent: any = this.userDoc?.sidebar;
     @observable public panelContent: string = "none";
     @observable public showProperties: boolean = false;
     public isPointerDown = false;
diff --git a/src/client/views/collections/CollectionStackingViewFieldColumn.tsx b/src/client/views/collections/CollectionStackingViewFieldColumn.tsx
index 68c233a16..fbc4e1552 100644
--- a/src/client/views/collections/CollectionStackingViewFieldColumn.tsx
+++ b/src/client/views/collections/CollectionStackingViewFieldColumn.tsx
@@ -12,6 +12,7 @@ import { NumCast, StrCast, Cast } from "../../../fields/Types";
 import { ImageField } from "../../../fields/URLField";
 import { TraceMobx } from "../../../fields/util";
 import { Docs, DocUtils } from "../../documents/Documents";
+import { DocumentType } from "../../documents/DocumentTypes";
 import { DragManager } from "../../util/DragManager";
 import { Transform } from "../../util/Transform";
 import { undoBatch } from "../../util/UndoManager";
@@ -366,7 +367,7 @@ export class CollectionStackingViewFieldColumn extends React.Component<CSVFieldC
                             {this.props.parent.children(this.props.docList, uniqueHeadings.length)}
                             {singleColumn ? (null) : this.props.parent.columnDragger}
                         </div>
-                        {(chromeStatus !== 'view-mode' && chromeStatus !== 'disabled' && type !== 'presentation') ?
+                        {(chromeStatus !== 'view-mode' && chromeStatus !== 'disabled' && type !== DocumentType.PRES) ?
                             <div key={`${heading}-add-document`} className="collectionStackingView-addDocumentButton"
                                 style={{ width: style.columnWidth / style.numGroupColumns }}>
                                 <EditableView {...newEditableViewProps} menuCallback={this.menuCallback} />
diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx
index 8ec855c7c..3c7471d7c 100644
--- a/src/client/views/collections/CollectionTreeView.tsx
+++ b/src/client/views/collections/CollectionTreeView.tsx
@@ -133,7 +133,6 @@ class TreeView extends React.Component<TreeViewProps> {
     }
 
     protected createTreeDropTarget = (ele: HTMLDivElement) => {
-        console.log("ele");
         this._treedropDisposer?.();
         ele && (this._treedropDisposer = DragManager.MakeDropTarget(ele, this.treeDrop.bind(this), undefined, this.preTreeDrop.bind(this)), this.doc);
     }
diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx
index 2b0a00498..dcbf8e989 100644
--- a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx
+++ b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx
@@ -552,7 +552,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
 
     getField(key: string) {
         //if (this.selectedDoc) {
-        return Field.toString(this.selectedDoc[key] as Field);
+        return Field.toString(this?.[key] as Field);
         // } else {
         //     return undefined as Opt<string>;
         // }
@@ -698,7 +698,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
                 <input className="width-range" type="range"
                     defaultValue={Number(this.widthStk)} min={1} max={100}
                     onChange={(action((e) => this.widthStk = e.target.value))}
-                    onMouseDown={(e) => { this._widthUndo = UndoManager.StartBatch("width undo");; }}
+                    onMouseDown={(e) => { this._widthUndo = UndoManager.StartBatch("width undo"); }}
                     onMouseUp={(e) => { this._widthUndo?.end(); this._widthUndo = undefined; }}
                 />
             </div>
diff --git a/src/client/views/nodes/AudioBox.tsx b/src/client/views/nodes/AudioBox.tsx
index dba92faae..2396e6973 100644
--- a/src/client/views/nodes/AudioBox.tsx
+++ b/src/client/views/nodes/AudioBox.tsx
@@ -21,7 +21,6 @@ import { Docs, DocUtils } from "../../documents/Documents";
 import { ComputedField } from "../../../fields/ScriptField";
 import { Networking } from "../../Network";
 import { LinkAnchorBox } from "./LinkAnchorBox";
-import { signedCookie } from "cookie-parser";
 
 // testing testing 
 
diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
index 35ed6c5a5..42a42ddf1 100644
--- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
+++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
@@ -18,8 +18,6 @@ import { DocumentType } from "../../documents/DocumentTypes";
 import { Zoom, Fade, Flip, Rotate, Bounce, Roll, LightSpeed } from 'react-reveal';
 import { PresBox } from "./PresBox";
 import { InkingStroke } from "../InkingStroke";
-import { PDFViewer } from "../pdf/PDFViewer";
-import { PDFBox } from "./PDFBox";
 
 export interface CollectionFreeFormDocumentViewProps extends DocumentViewProps {
     dataProvider?: (doc: Doc, replica: string) => { x: number, y: number, zIndex?: number, opacity?: number, highlight?: boolean, z: number, transition?: string } | undefined;
@@ -119,7 +117,6 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF
     }
 
     public static updateScrollframe(doc: Doc, time: number) {
-        let _pdfViewer: PDFViewer | undefined;
         const timecode = Math.round(time);
         const scrollIndexed = Cast(doc['scroll-indexed'], listSpec("number"), null);
         scrollIndexed?.length <= timecode + 1 && scrollIndexed.push(undefined as any as number);
@@ -191,15 +188,11 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF
             const wlist = new List<number>(numberRange(timecode + 1).map(i => undefined) as any as number[]);
             const hlist = new List<number>(numberRange(timecode + 1).map(i => undefined) as any as number[]);
             const olist = new List<number>(numberRange(timecode + 1).map(t => progressivize && t < (doc.appearFrame ? doc.appearFrame : i) ? 0 : 1));
-            let oarray: List<number>;
-            console.log(doc.title + "AF: " + doc.appearFrame);
-            console.log("timecode: " + timecode);
-            oarray = olist;
+            const oarray = olist;
             oarray.fill(0, 0, NumCast(doc.appearFrame) - 1);
             oarray.fill(1, NumCast(doc.appearFrame), timecode);
             // oarray.fill(0, 0, NumCast(doc.appearFrame) - 1);
-            // oarray.fill(1, NumCast(doc.appearFrame), timecode);
-            // console.log(oarray);
+            // oarray.fill(1, NumCast(doc.appearFrame), timecode);\
             wlist[curTimecode] = NumCast(doc._width);
             hlist[curTimecode] = NumCast(doc._height);
             xlist[curTimecode] = NumCast(doc.x);
diff --git a/src/client/views/nodes/DocumentLinksButton.tsx b/src/client/views/nodes/DocumentLinksButton.tsx
index 4713ce447..025669b41 100644
--- a/src/client/views/nodes/DocumentLinksButton.tsx
+++ b/src/client/views/nodes/DocumentLinksButton.tsx
@@ -125,7 +125,7 @@ export class DocumentLinksButton extends React.Component<DocumentLinksButtonProp
         } else if (this.props.InMenu && !this.props.StartLink && DocumentLinksButton.StartLink && DocumentLinksButton.StartLink !== this.props.View) {
             const linkDoc = DocUtils.MakeLink({ doc: DocumentLinksButton.StartLink.props.Document }, { doc: this.props.View.props.Document }, "long drag");
             // this notifies any of the subviews that a document is made so that they can make finer-grained hyperlinks ().  see note above in onLInkButtonMoved
-            DocumentLinksButton.StartLink!._link = this.props.View._link = linkDoc;
+            DocumentLinksButton.StartLink._link = this.props.View._link = linkDoc;
             setTimeout(action(() => DocumentLinksButton.StartLink!._link = this.props.View._link = undefined), 0);
             LinkManager.currentLink = linkDoc;
             if (linkDoc) {
diff --git a/src/client/views/nodes/PresBox.tsx b/src/client/views/nodes/PresBox.tsx
index 1caefdc57..ccf1fb8e3 100644
--- a/src/client/views/nodes/PresBox.tsx
+++ b/src/client/views/nodes/PresBox.tsx
@@ -129,7 +129,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
                 const nextChildDocs = DocListCast(nextTagDoc[Doc.LayoutFieldKey(presTargetDoc)]);
                 nextChildDocs.forEach((doc, i) => {
                     doc.opacity = 1;
-                })
+                });
             }
             const nextSelected = this.itemIndex + 1;
             this.gotoDocument(nextSelected, this.itemIndex);
@@ -158,28 +158,24 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
         const vfHeight: number = this.checkList(presTargetDoc, presTargetDoc["viewfinder-height-indexed"]);
         // Case 1: document that is not a Golden Layout tab
         if (srcContext) {
-            console.log("CASE 1");
             const srcDocView = DocumentManager.Instance.getDocumentView(srcContext);
             if (srcDocView) {
                 const layoutdoc = Doc.Layout(presTargetDoc);
                 const panelWidth: number = srcDocView.props.PanelWidth();
                 const panelHeight: number = srcDocView.props.PanelHeight();
-                console.log("srcDocView: " + srcDocView.props.PanelWidth());
                 const newPanX = NumCast(presTargetDoc.x) + NumCast(layoutdoc._width) / 2;
                 const newPanY = NumCast(presTargetDoc.y) + NumCast(layoutdoc._height) / 2;
-                let newScale = 0.9 * Math.min(Number(panelWidth) / vfWidth, Number(panelHeight) / vfHeight);
+                const newScale = 0.9 * Math.min(Number(panelWidth) / vfWidth, Number(panelHeight) / vfHeight);
                 srcContext._panX = newPanX + (vfLeft + (vfWidth / 2));
                 srcContext._panY = newPanY + (vfTop + (vfHeight / 2));
                 srcContext._viewScale = newScale;
-                console.log("X: " + srcContext._panX + ", Y: " + srcContext._panY + ", Scale: " + srcContext._viewScale);
             }
         }
         // Case 2: document is the containing collection
         if (docView && !srcContext) {
-            console.log("CASE 2");
             const panelWidth: number = docView.props.PanelWidth();
             const panelHeight: number = docView.props.PanelHeight();
-            let newScale = 0.9 * Math.min(Number(panelWidth) / vfWidth, Number(panelHeight) / vfHeight);
+            const newScale = 0.9 * Math.min(Number(panelWidth) / vfWidth, Number(panelHeight) / vfHeight);
             presTargetDoc._panX = vfLeft + (vfWidth / 2);
             presTargetDoc._panY = vfTop + (vfWidth / 2);
             presTargetDoc._viewScale = newScale;
@@ -791,7 +787,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
                                 <div className="ribbon-button" style={{ display: "flex", backgroundColor: targetDoc.editProgressivize ? "#aedef8" : "" }} onClick={this.editProgressivize}>Start manually</div>
                             </div>
                             <div className="ribbon-doubleButton" style={{ display: "flex" }}>
-                                <div className="ribbon-button" style={{ backgroundColor: activeItem.openDocument ? "#aedef8" : "" }} onClick={() => { activeItem.openDocument = !activeItem.openDocument }}>Open document</div>
+                                <div className="ribbon-button" style={{ backgroundColor: activeItem.openDocument ? "#aedef8" : "" }} onClick={() => activeItem.openDocument = !activeItem.openDocument}>Open document</div>
                             </div>
                             <div className="ribbon-doubleButton" style={{ display: targetDoc.type === DocumentType.WEB ? "inline-flex" : "none" }}>
                                 <div className="ribbon-button" onClick={this.progressivizeText}>Store original website</div>
@@ -808,15 +804,15 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
             <div>
                 <div className={'presBox-toolbar-dropdown'} style={{ display: this.newDocumentTools && this.layoutDoc.presStatus === "edit" ? "inline-flex" : "none" }} onClick={e => e.stopPropagation()} onPointerUp={e => e.stopPropagation()} onPointerDown={e => e.stopPropagation()}>
                     <div className="layout-container" style={{ height: 'max-content' }}>
-                        <div className="layout" style={{ border: this.layout === 'blank' ? 'solid 2px #5b9ddd' : '' }} onClick={() => runInAction(() => { this.layout = 'blank'; this.createNewSlide(this.layout); })} />
-                        <div className="layout" style={{ border: this.layout === 'title' ? 'solid 2px #5b9ddd' : '' }} onClick={() => runInAction(() => { this.layout = 'title'; this.createNewSlide(this.layout); })}>
+                        <div className="layout" style={{ border: this.layout === 'blank' ? 'solid 2px #5b9ddd' : '' }} onClick={action(() => { this.layout = 'blank'; this.createNewSlide(this.layout); })} />
+                        <div className="layout" style={{ border: this.layout === 'title' ? 'solid 2px #5b9ddd' : '' }} onClick={action(() => { this.layout = 'title'; this.createNewSlide(this.layout); })}>
                             <div className="title">Title</div>
                             <div className="subtitle">Subtitle</div>
                         </div>
-                        <div className="layout" style={{ border: this.layout === 'header' ? 'solid 2px #5b9ddd' : '' }} onClick={() => runInAction(() => { this.layout = 'header'; this.createNewSlide(this.layout); })}>
+                        <div className="layout" style={{ border: this.layout === 'header' ? 'solid 2px #5b9ddd' : '' }} onClick={action(() => { this.layout = 'header'; this.createNewSlide(this.layout); })}>
                             <div className="title" style={{ alignSelf: 'center', fontSize: 10 }}>Section header</div>
                         </div>
-                        <div className="layout" style={{ border: this.layout === 'content' ? 'solid 2px #5b9ddd' : '' }} onClick={() => runInAction(() => { this.layout = 'content'; this.createNewSlide(this.layout); })}>
+                        <div className="layout" style={{ border: this.layout === 'content' ? 'solid 2px #5b9ddd' : '' }} onClick={action(() => { this.layout = 'content'; this.createNewSlide(this.layout); })}>
                             <div className="title" style={{ alignSelf: 'center' }}>Title</div>
                             <div className="content">Text goes here</div>
                         </div>
@@ -845,39 +841,39 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
                         {/* <div className="dropdown-textInput"> */}
                         <input className="ribbon-textInput" placeholder="..." type="text" name="fname" ref={this.inputRef} onChange={(e) => {
                             e.stopPropagation();
-                            runInAction(() => { (this.title = e.target.value) });
+                            runInAction(() => this.title = e.target.value);
                         }}></input>
                         {/* </div> */}
                     </div>
                     <div className="ribbon-box">
                         Choose type:
                         <div className="ribbon-doubleButton">
-                            <div title="Text" className={'ribbon-button'} style={{ background: this.addFreeform ? "" : "#aedef8" }} onClick={() => runInAction(() => { this.addFreeform = !this.addFreeform })}>Text</div>
-                            <div title="Freeform" className={'ribbon-button'} style={{ background: this.addFreeform ? "#aedef8" : "" }} onClick={() => runInAction(() => { this.addFreeform = !this.addFreeform })}>Freeform</div>
+                            <div title="Text" className={'ribbon-button'} style={{ background: this.addFreeform ? "" : "#aedef8" }} onClick={action(() => this.addFreeform = !this.addFreeform)}>Text</div>
+                            <div title="Freeform" className={'ribbon-button'} style={{ background: this.addFreeform ? "#aedef8" : "" }} onClick={action(() => this.addFreeform = !this.addFreeform)}>Freeform</div>
                         </div>
                     </div>
                     <div className="ribbon-box" style={{ display: this.addFreeform ? "grid" : "none" }}>
                         Preset layouts:
                         <div className="layout-container" style={{ height: this.openLayouts ? 'max-content' : '75px' }}>
-                            <div className="layout" style={{ border: this.layout === 'blank' ? 'solid 2px #5b9ddd' : '' }} onClick={() => runInAction(() => { this.layout = 'blank' })} />
-                            <div className="layout" style={{ border: this.layout === 'title' ? 'solid 2px #5b9ddd' : '' }} onClick={() => runInAction(() => { this.layout = 'title' })}>
+                            <div className="layout" style={{ border: this.layout === 'blank' ? 'solid 2px #5b9ddd' : '' }} onClick={action(() => this.layout = 'blank')} />
+                            <div className="layout" style={{ border: this.layout === 'title' ? 'solid 2px #5b9ddd' : '' }} onClick={action(() => this.layout = 'title')}>
                                 <div className="title">Title</div>
                                 <div className="subtitle">Subtitle</div>
                             </div>
-                            <div className="layout" style={{ border: this.layout === 'header' ? 'solid 2px #5b9ddd' : '' }} onClick={() => runInAction(() => { this.layout = 'header' })}>
+                            <div className="layout" style={{ border: this.layout === 'header' ? 'solid 2px #5b9ddd' : '' }} onClick={action(() => this.layout = 'header')}>
                                 <div className="title" style={{ alignSelf: 'center', fontSize: 10 }}>Section header</div>
                             </div>
-                            <div className="layout" style={{ border: this.layout === 'content' ? 'solid 2px #5b9ddd' : '' }} onClick={() => runInAction(() => { this.layout = 'content' })}>
+                            <div className="layout" style={{ border: this.layout === 'content' ? 'solid 2px #5b9ddd' : '' }} onClick={action(() => this.layout = 'content')}>
                                 <div className="title" style={{ alignSelf: 'center' }}>Title</div>
                                 <div className="content">Text goes here</div>
                             </div>
-                            <div className="layout" style={{ border: this.layout === 'twoColumns' ? 'solid 2px #5b9ddd' : '' }} onClick={() => runInAction(() => { this.layout = 'twoColumns' })}>
+                            <div className="layout" style={{ border: this.layout === 'twoColumns' ? 'solid 2px #5b9ddd' : '' }} onClick={action(() => this.layout = 'twoColumns')}>
                                 <div className="title" style={{ alignSelf: 'center', gridColumn: '1/3' }}>Title</div>
                                 <div className="content" style={{ gridColumn: 1, gridRow: 2 }}>Column one text</div>
                                 <div className="content" style={{ gridColumn: 2, gridRow: 2 }}>Column two text</div>
                             </div>
                         </div>
-                        <div className="open-layout" onClick={() => runInAction(() => { this.openLayouts = !this.openLayouts })}>
+                        <div className="open-layout" onClick={action(() => this.openLayouts = !this.openLayouts)}>
                             <FontAwesomeIcon style={{ transition: 'all 0.3s', transform: this.openLayouts ? 'rotate(180deg)' : 'rotate(0deg)' }} icon={"caret-down"} size={"lg"} />
                         </div>
                     </div>
@@ -974,10 +970,10 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
     }
 
     // For toggling the options when the user wants to select play
-    @action togglePlay = () => { this.playTools = !this.playTools; }
+    @action togglePlay = () => { this.playTools = !this.playTools; };
 
     // For toggling the options when the user wants to select play
-    @action togglePresent = () => { this.presentTools = !this.presentTools; }
+    @action togglePresent = () => { this.presentTools = !this.presentTools; };
 
     // Case in which the document has keyframes to navigate to next key frame
     @undoBatch
@@ -1381,9 +1377,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
         if (doc && tagDocView) {
 
             const scale = tagDocView.childScaling();
-            console.log("childScaling: " + scale);
             const scale2 = tagDocView.props.ScreenToLocalTransform().Scale;
-            console.log("ScreenToLocal...Scale: " + scale2);
             let height = doc.offsetHeight;
             let width = doc.offsetWidth;
             let top = doc.offsetTop;
@@ -1544,7 +1538,6 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
     @undoBatch
     @action
     prevAppearFrame = (doc: Doc, i: number): void => {
-        console.log("prev");
         const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null);
         const targetDoc = Cast(activeItem?.presentationTargetDoc, Doc, null);
         const appearFrame = Cast(doc.appearFrame, "number", null);
@@ -1595,7 +1588,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
         if (activeItem) {
             return (
                 <>
-                    <Tooltip title={<><div className="dash-tooltip">{"Add new slide"}</div></>}><div className={`toolbar-button ${this.newDocumentTools ? "active" : ""}`} onClick={() => runInAction(() => { this.newDocumentTools = !this.newDocumentTools; })}><FontAwesomeIcon icon={"plus"} />
+                    <Tooltip title={<><div className="dash-tooltip">{"Add new slide"}</div></>}><div className={`toolbar-button ${this.newDocumentTools ? "active" : ""}`} onClick={action(() => this.newDocumentTools = !this.newDocumentTools)}><FontAwesomeIcon icon={"plus"} />
                         <FontAwesomeIcon className={`dropdown ${this.newDocumentTools ? "active" : ""}`} icon={"angle-down"} />
                     </div></Tooltip>
                     <div className="toolbar-divider" />
@@ -1636,7 +1629,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
         } else {
             return (
                 <>
-                    <Tooltip title={<><div className="dash-tooltip">{"Add new slide"}</div></>}><div className={`toolbar-button ${this.newDocumentTools ? "active" : ""}`} onClick={() => runInAction(() => { this.newDocumentTools = !this.newDocumentTools; })}>
+                    <Tooltip title={<><div className="dash-tooltip">{"Add new slide"}</div></>}><div className={`toolbar-button ${this.newDocumentTools ? "active" : ""}`} onClick={action(() => this.newDocumentTools = !this.newDocumentTools)}>
                         <FontAwesomeIcon icon={"plus"} />
                         <FontAwesomeIcon className={`dropdown ${this.newDocumentTools ? "active" : ""}`} icon={"angle-down"} />
                     </div></Tooltip>
diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
index 76d23ddfe..ab1de5529 100644
--- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx
+++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
@@ -577,20 +577,19 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp
         const xLoc: number = (nestDepth * 20);
         const width: number = 390 - xLoc;
         const height: number = 55 - (nestDepth * 5);
-        for (let i = 0; i < list.length; i++) {
-            const mainBullets: number = Number(list[i].getAttribute("data-bulletstyle"));
+        Array.from(list).forEach(listItem => {
+            const mainBullets: number = Number(listItem.getAttribute("data-bulletstyle"));
             if (mainBullets === nestDepth) {
-                if (list[i].childElementCount > 1) {
+                if (listItem.childElementCount > 1) {
                     b++;
                     nestCount++;
                     count = before ? count + nestCount + "." : nestCount + ".";
                     yLoc += height;
-                    const text = list[i].getElementsByTagName("p")[0].innerText;
+                    const text = listItem.getElementsByTagName("p")[0].innerText;
                     const length = text.length;
-                    console.log(yLoc);
                     const bullet1 = Docs.Create.TextDocument(count + " " + text, { title: "Slide text", _width: width, _height: height, x: xLoc, y: 10 + (yLoc), _fontSize: fontSize, backgroundColor: "rgba(0,0,0,0)", appearFrame: d ? d : b });
                     mainBulletList.push(bullet1);
-                    const newList = this.recursiveProgressivize(nestDepth + 1, list[i].getElementsByTagName("li"), b, yLoc, count);
+                    const newList = this.recursiveProgressivize(nestDepth + 1, listItem.getElementsByTagName("li"), b, yLoc, count);
                     mainBulletList.push.apply(mainBulletList, newList);
                     b += newList.length;
                     yLoc += newList.length * (55 - ((nestDepth + 1) * 5));
@@ -599,15 +598,13 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp
                     nestCount++;
                     count = before ? count + nestCount + "." : nestCount + ".";
                     yLoc += height;
-                    const text = list[i].innerText;
+                    const text = listItem.innerText;
                     const length = text.length;
-                    console.log(yLoc);
                     const bullet1 = Docs.Create.TextDocument(count + " " + text, { title: "Slide text", _width: width, _height: height, x: xLoc, y: 10 + (yLoc), _fontSize: fontSize, backgroundColor: "rgba(0,0,0,0)", appearFrame: d ? d : b });
                     mainBulletList.push(bullet1);
                 }
             }
-        }
-        console.log("b: " + b);
+        });
         return mainBulletList;
     }
 
diff --git a/src/client/views/nodes/formattedText/RichTextMenu.tsx b/src/client/views/nodes/formattedText/RichTextMenu.tsx
index 6e268be48..5af07c15d 100644
--- a/src/client/views/nodes/formattedText/RichTextMenu.tsx
+++ b/src/client/views/nodes/formattedText/RichTextMenu.tsx
@@ -903,8 +903,9 @@ export default class RichTextMenu extends AntimodeMenu {
             ref_node = pos.nodeBefore;
         }
         if (pos.nodeAfter !== null && pos.nodeAfter !== undefined) {
-            if (!pos.nodeBefore || this.view.state.selection.$from.pos !== this.view.state.selection.$to.pos)
+            if (!pos.nodeBefore || this.view.state.selection.$from.pos !== this.view.state.selection.$to.pos) {
                 ref_node = pos.nodeAfter;
+            }
         }
         if (!ref_node && pos.pos > 0) {
             let skip = false;
diff --git a/src/client/views/presentationview/PresElementBox.tsx b/src/client/views/presentationview/PresElementBox.tsx
index e035ed0b8..11ffde9dd 100644
--- a/src/client/views/presentationview/PresElementBox.tsx
+++ b/src/client/views/presentationview/PresElementBox.tsx
@@ -259,7 +259,7 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps, PresDoc
         const dragData = new DragManager.DocumentDragData(PresBox.Instance.sortArray().map(doc => doc));
         // let value = this.getValue(this._heading);
         // value = typeof value === "string" ? `"${value}"` : value;
-        let dragItem: HTMLElement[] = [];
+        const dragItem: HTMLElement[] = [];
         PresBox.Instance._dragArray.map(ele => {
             const drag = ele;
             drag.style.backgroundColor = "#d5dce2";
-- 
cgit v1.2.3-70-g09d2


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

---
 src/client/util/SettingsManager.scss | 30 +++++++++++++-
 src/client/util/SettingsManager.tsx  | 78 +++++++++++++++++++++++++++---------
 2 files changed, 87 insertions(+), 21 deletions(-)

(limited to 'src/client/util')

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


From 557bcff59aaec470b045a01600b0c2a6e785c730 Mon Sep 17 00:00:00 2001
From: geireann <60007097+geireann@users.noreply.github.com>
Date: Thu, 6 Aug 2020 18:05:24 +0800
Subject: ui changes and commenting code

also removed _viewTransition and backgroundColor...
---
 src/client/util/DocumentManager.ts                 |   6 +-
 src/client/views/.DS_Store                         | Bin 6148 -> 6148 bytes
 src/client/views/PropertiesButtons.tsx             |   4 +-
 src/client/views/nodes/PresBox.scss                |  47 +-
 src/client/views/nodes/PresBox.tsx                 | 485 +++++++++++----------
 .../views/presentationview/PresElementBox.scss     |   8 +-
 .../views/presentationview/PresElementBox.tsx      |  10 +-
 7 files changed, 292 insertions(+), 268 deletions(-)

(limited to 'src/client/util')

diff --git a/src/client/util/DocumentManager.ts b/src/client/util/DocumentManager.ts
index d18eac374..523dbfca0 100644
--- a/src/client/util/DocumentManager.ts
+++ b/src/client/util/DocumentManager.ts
@@ -127,10 +127,6 @@ export class DocumentManager {
         CollectionDockingView.AddRightSplit(doc);
         finished?.();
     }
-    // static openInPlace = (doc: Doc, finished?: () => void) => {
-    //     CollectionDockingView.AddTab(doc);
-    //     finished?.();
-    // }
     public jumpToDocument = async (
         targetDoc: Doc,        // document to display
         willZoom: boolean,     // whether to zoom doc to take up most of screen
@@ -180,7 +176,7 @@ export class DocumentManager {
                 const targetDocContextView = getFirstDocView(targetDocContext);
                 targetDocContext._scrollY = 0;  // this will force PDFs to activate and load their annotations / allow scrolling
                 if (targetDocContextView) { // we found a context view and aren't forced to create a new one ... focus on the context first..
-                    targetDocContext._viewTransition = "transform 10000ms";
+                    targetDocContext._viewTransition = "transform 500ms";
                     targetDocContextView.props.focus(targetDocContextView.props.Document, willZoom);
 
                     // now find the target document within the context
diff --git a/src/client/views/.DS_Store b/src/client/views/.DS_Store
index 3ce88292c..7a8c419ee 100644
Binary files a/src/client/views/.DS_Store and b/src/client/views/.DS_Store differ
diff --git a/src/client/views/PropertiesButtons.tsx b/src/client/views/PropertiesButtons.tsx
index 002abc5a3..3392371de 100644
--- a/src/client/views/PropertiesButtons.tsx
+++ b/src/client/views/PropertiesButtons.tsx
@@ -242,7 +242,7 @@ export class PropertiesButtons extends React.Component<{}, {}> {
             const y = targetDoc._panY;
             const scale = targetDoc._viewScale;
         }
-        return !targetDoc ? (null) : <Tooltip title={<><div className="dash-tooltip">{"Pin with this view"}</div></>}>
+        return !targetDoc ? (null) : <Tooltip title={<><div className="dash-tooltip">{"Pin with this view"}</div></>} placement="top">
             <>
                 <div className="propertiesButtons-linker"
                     style={{ backgroundColor: "black", color: "white" }}
@@ -259,7 +259,7 @@ export class PropertiesButtons extends React.Component<{}, {}> {
                             activeDoc.presPinViewScale = scale;
                         }
                     }}>
-                    <FontAwesomeIcon className="documentdecorations-icon" size="sm" icon="map-pin" />
+                    <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>
                 <div className="propertiesButtons-title" style={{ backgroundColor: "black", color: "white" }}>{"View"}</div>
diff --git a/src/client/views/nodes/PresBox.scss b/src/client/views/nodes/PresBox.scss
index 8ce71935c..d5389da35 100644
--- a/src/client/views/nodes/PresBox.scss
+++ b/src/client/views/nodes/PresBox.scss
@@ -1,3 +1,7 @@
+$light-blue: #AEDDF8;
+$dark-blue: #5B9FDD;
+$light-background: #ececec;
+
 .presBox-cont {
     position: absolute;
     display: block;
@@ -20,10 +24,6 @@
         margin-top: 3px;
     }
 
-    .presBox-toolbar {
-        display: none;
-    }
-
     .presBox-toolbar-dropdown {
         border-radius: 5px;
         background-color: white;
@@ -40,7 +40,7 @@
         font-size: 13;
     }
 
-    .presBox-toolbar.active {
+    .presBox-toolbar {
         position: relative;
         display: inline-flex;
         align-items: center;
@@ -59,7 +59,7 @@
         }
 
         .toolbar-button.active {
-            color: #AEDDF8;
+            color: $light-blue;
         }
 
         .toolbar-transitionButtons {
@@ -85,7 +85,6 @@
         display: flex;
         width: max-content;
         height: 25px;
-        /* background-color: pink; */
         justify-content: center;
         transform: rotate(90deg);
         align-items: center;
@@ -120,7 +119,7 @@
 
 .dropdown.active {
     transform: rotate(180deg);
-    color: #AEDDF8;
+    color: $light-blue;
     opacity: 0.8;
 }
 
@@ -128,10 +127,7 @@
     position: relative;
     display: inline;
     font-family: Roboto;
-    /* background-color: white; */
     color: black;
-    width: 100%;
-    height: max-content;
     z-index: 100;
     transition: 0.7s;
 
@@ -157,7 +153,6 @@
         margin-left: 5px;
         margin-top: 5px;
         margin-bottom: 5px;
-        /* border-radius: 5px; */
         margin-right: 5px;
         width: max-content;
         justify-content: center;
@@ -176,7 +171,7 @@
     //     margin-top: 5px;
     //     width: 100%;
     //     max-width: 200px;
-        
+
     // }
 
     // .toolbar-slider:focus {
@@ -235,20 +230,20 @@
         .toolbar-slider:focus {
             outline: none;
         }
-        
+
         .toolbar-slider::-webkit-slider-runnable-track {
-          height: 10px;
-          -webkit-appearance: none;
-          margin-top: -1px;
+            height: 10px;
+            -webkit-appearance: none;
+            margin-top: -1px;
         }
-        
+
         .toolbar-slider::-webkit-slider-thumb {
-          width: 10px;
-          -webkit-appearance: none;
-          height: 10px;
-          cursor: ew-resize;
-          background: #5b9ddd;
-          box-shadow: -100vw 0 0 100vw #aedef8;
+            width: 10px;
+            -webkit-appearance: none;
+            height: 10px;
+            cursor: ew-resize;
+            background: #5b9ddd;
+            box-shadow: -100vw 0 0 100vw #aedef8;
         }
     }
 
@@ -751,7 +746,7 @@
         min-width: 150px;
     }
 
-    
+
 
     select {
         background: #323232;
@@ -796,7 +791,7 @@
         }
     }
 
-        
+
     .miniPresOverlay {
         background-color: #323232;
         color: white;
diff --git a/src/client/views/nodes/PresBox.tsx b/src/client/views/nodes/PresBox.tsx
index c3b920b26..5d4cde382 100644
--- a/src/client/views/nodes/PresBox.tsx
+++ b/src/client/views/nodes/PresBox.tsx
@@ -20,17 +20,10 @@ import { Docs, DocUtils } from "../../documents/Documents";
 import { PrefetchProxy } from "../../../fields/Proxy";
 import { ScriptField } from "../../../fields/ScriptField";
 import { Scripting } from "../../util/Scripting";
-import { InkingStroke } from "../InkingStroke";
-import { HighlightSpanKind } from "typescript";
-import { SearchUtil } from "../../util/SearchUtil";
 import { CollectionFreeFormDocumentView } from "./CollectionFreeFormDocumentView";
-import { child } from "serializr";
 import { List } from "../../../fields/List";
 import { Tooltip } from "@material-ui/core";
 import { CollectionFreeFormViewChrome } from "../collections/CollectionMenu";
-import { conformsTo } from "lodash";
-import { translate } from "googleapis/build/src/apis/translate";
-import { DragManager, dropActionType } from "../../util/DragManager";
 import { actionAsync } from "mobx-utils";
 import { SelectionManager } from "../../util/SelectionManager";
 import { AudioBox } from "./AudioBox";
@@ -41,9 +34,26 @@ const PresBoxDocument = makeInterface(documentSchema);
 @observer
 export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>(PresBoxDocument) {
     public static LayoutString(fieldKey: string) { return FieldView.LayoutString(PresBox, fieldKey); }
-    private treedropDisposer?: DragManager.DragDropDisposer;
     static Instance: PresBox;
+
     @observable _isChildActive = false;
+    @observable _moveOnFromAudio: boolean = false;
+    @observable _presTimer!: NodeJS.Timeout;
+
+    @observable _selectedArray: Doc[] = [];
+    @observable _sortedSelectedArray: Doc[] = [];
+    @observable _eleArray: HTMLElement[] = [];
+    @observable _dragArray: HTMLElement[] = [];
+
+    @observable private transitionTools: boolean = false;
+    @observable private newDocumentTools: boolean = false;
+    @observable private progressivizeTools: boolean = false;
+    @observable private moreInfoTools: boolean = false;
+    @observable private playTools: boolean = false;
+    @observable private presentTools: boolean = false;
+    @observable private pathBoolean: boolean = false;
+    @observable private expandBoolean: boolean = false;
+
     @computed get childDocs() { return DocListCast(this.dataDoc[this.fieldKey]); }
     @computed get itemIndex() { return NumCast(this.rootDoc._itemIndex); }
     @computed get presElement() { return Cast(Doc.UserDoc().presElement, Doc, null); }
@@ -65,18 +75,12 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
     }
 
 
-
     componentDidMount() {
         this.rootDoc.presBox = this.rootDoc;
         this.rootDoc._forceRenderEngine = "timeline";
         this.rootDoc._replacedChrome = "replaced";
         this.layoutDoc.presStatus = "edit";
         this.layoutDoc._gridGap = 5;
-        // document.addEventListener("keydown", this.keyEvents, false);
-    }
-
-    componentWillUnmount() {
-        this.treedropDisposer?.();
     }
 
     onPointerOver = () => {
@@ -91,8 +95,9 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
         Doc.UserDoc().activePresentation = this.rootDoc;
     }
 
-    @observable _moveOnFromAudio: boolean = false;
-
+    /**
+     * Called when the user moves to the next slide in the presentation trail.
+     */
     @undoBatch
     @action
     next = () => {
@@ -137,6 +142,11 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
         }
     }
 
+    /**
+     * Called when the user moves back
+     * Design choice: If there are frames within the presentation, moving back will not
+     * got back through the frames but instead directly to the next point in the presentation.
+     */
     @undoBatch
     @action
     back = () => {
@@ -149,6 +159,93 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
         }
     }
 
+    //The function that is called when a document is clicked or reached through next or back.
+    //it'll also execute the necessary actions if presentation is playing.
+    public gotoDocument = action((index: number, fromDoc: number) => {
+        this.updateCurrentPresentation();
+        Doc.UnBrushAllDocs();
+        if (index >= 0 && index < this.childDocs.length) {
+            this.rootDoc._itemIndex = index;
+            const presTargetDoc = Cast(this.childDocs[this.itemIndex].presentationTargetDoc, Doc, null);
+            if (presTargetDoc?.lastFrame !== undefined) {
+                presTargetDoc.currentFrame = 0;
+            }
+            this.navigateToElement(this.childDocs[index]); //Handles movement to element
+            this._selectedArray = [this.childDocs[index]]; //Update selected array
+            this.onHideDocument(); //Handles hide after/before
+        }
+    });
+
+    /**
+     * This method makes sure that cursor navigates to the element that
+     * has the option open and last in the group. 
+     * Design choice: If the next document is not in presCollection or 
+     * presCollection itself then if there is a presCollection it will add
+     * a new tab. If presCollection is undefined it will open the document
+     * on the right. 
+     */
+    navigateToElement = async (curDoc: Doc) => {
+        const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null);
+        const targetDoc = Cast(activeItem.presentationTargetDoc, Doc, null);
+        const srcContext = await DocCastAsync(targetDoc.context);
+        const presCollection = Cast(this.layoutDoc.presCollection, Doc, null);
+        const collectionDocView = presCollection ? await DocumentManager.Instance.getDocumentView(presCollection) : undefined;
+        this.turnOffEdit();
+
+        if (this.itemIndex >= 0) {
+            if (targetDoc) {
+                if (srcContext) this.layoutDoc.presCollection = srcContext;
+            } else if (targetDoc) this.layoutDoc.presCollection = targetDoc;
+        }
+        if (collectionDocView) {
+            if (srcContext && srcContext !== presCollection) {
+                // Case 1: new srcContext inside of current collection so add a new tab to the current pres collection
+                collectionDocView.props.addDocTab(srcContext, "inPlace");
+            }
+        }
+        this.updateCurrentPresentation();
+        const docToJump = curDoc;
+        const willZoom = false;
+
+        //docToJump stayed same meaning, it was not in the group or was the last element in the group
+        if (targetDoc.zoomProgressivize && this.rootDoc.presStatus !== 'edit') {
+            this.zoomProgressivizeNext(targetDoc);
+        } else if (docToJump === curDoc) {
+            //checking if curDoc has navigation open
+            if (curDoc.presNavButton && targetDoc) {
+                await DocumentManager.Instance.jumpToDocument(targetDoc, false, undefined, srcContext);
+            } else if (curDoc.presZoomButton && targetDoc) {
+                //awaiting jump so that new scale can be found, since jumping is async
+                await DocumentManager.Instance.jumpToDocument(targetDoc, true, undefined, srcContext);
+            }
+        } else {
+            //awaiting jump so that new scale can be found, since jumping is async
+            targetDoc && await DocumentManager.Instance.jumpToDocument(targetDoc, willZoom, undefined, srcContext);
+        }
+        // After navigating to the document, if it is added as a presPinView then it will
+        // adjust the pan and scale to that of the pinView when it was added.
+        // TODO: Add option to remove presPinView 
+        if (activeItem.presPinView) {
+            targetDoc._panX = activeItem.presPinViewX;
+            targetDoc._panY = activeItem.presPinViewY;
+            targetDoc._viewScale = activeItem.presPinViewScale;
+        }
+        // If openDocument is selected then it should open the document for the user
+        if (collectionDocView && activeItem.openDocument) {
+            collectionDocView.props.addDocTab(activeItem, "inPlace");
+        }
+        // If website and has presWebsite data associated then on click it should
+        // go back to that specific website
+        // TODO: Add progressivize for navigating web (storing websites for given frames)
+        if (targetDoc.presWebsiteData) {
+            targetDoc.data = targetDoc.presWebsiteData;
+        }
+    }
+
+    /**
+     * Uses the viewfinder to progressivize through the different views of a single collection.
+     * @param presTargetDoc: document for which internal zoom is used
+     */
     zoomProgressivizeNext = (presTargetDoc: Doc) => {
         const srcContext = Cast(presTargetDoc.context, Doc, null);
         const docView = DocumentManager.Instance.getDocumentView(presTargetDoc);
@@ -190,6 +287,10 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
     }
 
 
+    /**
+     * For 'Hide Before' and 'Hide After' buttons making sure that
+     * they are hidden each time the presentation is updated.
+     */
     @action
     onHideDocument = () => {
         this.childDocs.forEach((doc, index) => {
@@ -213,97 +314,11 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
         });
     }
 
-    /**
-     * This method makes sure that cursor navigates to the element that
-     * has the option open and last in the group. If not in the group, and it has
-     * the option open, navigates to that element.
-     */
-    navigateToElement = async (curDoc: Doc) => {
-        const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null);
-        const targetDoc = Cast(activeItem.presentationTargetDoc, Doc, null);
-        const srcContext = await DocCastAsync(targetDoc.context);
-        const presCollection = Cast(this.layoutDoc.presCollection, Doc, null);
-        const collectionDocView = presCollection ? await DocumentManager.Instance.getDocumentView(presCollection) : undefined;
-        this.turnOffEdit();
-
-        if (this.itemIndex >= 0) {
-            if (targetDoc) {
-                if (srcContext) this.layoutDoc.presCollection = srcContext;
-            } else if (targetDoc) this.layoutDoc.presCollection = targetDoc;
-        }
-        if (collectionDocView) {
-            if (srcContext && srcContext !== presCollection) {
-                // Case 1: new srcContext inside of current collection so add a new tab to the current pres collection
-                collectionDocView.props.addDocTab(srcContext, "inPlace");
-            }
-        }
-        // else if (srcContext) {
-        //     console.log("Case 2: srcContext - not open and collection containing this document exists, so open collection that contains it and then await zooming in on document");
-        //     this.props.addDocTab(srcContext, "onRight");
-        // } else if (!srcContext) {
-        //     console.log("Case 3: !srcContext - no collection containing this document, therefore open document itself on right");
-        //     this.props.addDocTab(targetDoc, "onRight");
-        // }
-        this.updateCurrentPresentation();
-        const docToJump = curDoc;
-        const willZoom = false;
-
-        //docToJump stayed same meaning, it was not in the group or was the last element in the group
-        if (targetDoc.zoomProgressivize && this.rootDoc.presStatus !== 'edit') {
-            this.zoomProgressivizeNext(targetDoc);
-        } else if (docToJump === curDoc) {
-            //checking if curDoc has navigation open
-            if (curDoc.presNavButton && targetDoc) {
-                await DocumentManager.Instance.jumpToDocument(targetDoc, false, undefined, srcContext);
-            } else if (curDoc.presZoomButton && targetDoc) {
-                //awaiting jump so that new scale can be found, since jumping is async
-                await DocumentManager.Instance.jumpToDocument(targetDoc, true, undefined, srcContext);
-            }
-        } else {
-            //awaiting jump so that new scale can be found, since jumping is async
-            targetDoc && await DocumentManager.Instance.jumpToDocument(targetDoc, willZoom, undefined, srcContext);
-        }
-        if (activeItem.presPinView) {
-            targetDoc._panX = activeItem.presPinViewX;
-            targetDoc._panY = activeItem.presPinViewY;
-            targetDoc._viewScale = activeItem.presPinViewScale;
-        }
-        if (collectionDocView && activeItem.openDocument) {
-            collectionDocView.props.addDocTab(activeItem, "inPlace");
-        }
-        if (targetDoc.presWebsiteData) {
-            targetDoc.data = targetDoc.presWebsiteData;
-        }
-    }
-
-    //The function that is called when a document is clicked or reached through next or back.
-    //it'll also execute the necessary actions if presentation is playing.
-    public gotoDocument = action((index: number, fromDoc: number) => {
-        this.updateCurrentPresentation();
-        Doc.UnBrushAllDocs();
-        if (index >= 0 && index < this.childDocs.length) {
-            this.rootDoc._itemIndex = index;
-            const presTargetDoc = Cast(this.childDocs[this.itemIndex].presentationTargetDoc, Doc, null);
-            if (presTargetDoc?.lastFrame !== undefined) {
-                presTargetDoc.currentFrame = 0;
-            }
-            this.navigateToElement(this.childDocs[index]);
-            this._selectedArray = [this.childDocs[index]];
-            // this.hideIfNotPresented(index);
-            // this.showAfterPresented(index);
-            // this.hideDocumentInPres();
-            this.onHideDocument();
-            // this.onHideAfterPresClick();
-        }
-    });
-
-
-    @observable _presTimer!: NodeJS.Timeout;
 
-    //The function that starts or resets presentaton functionally, depending on status flag.
+    //The function that starts or resets presentaton functionally, depending on presStatus of the layoutDoc
     @undoBatch
     @action
-    startOrResetPres = (startSlide: number) => {
+    startPres = (startSlide: number) => {
         this.updateCurrentPresentation();
         const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null);
         const targetDoc = Cast(activeItem.presentationTargetDoc, Doc, null);
@@ -326,15 +341,20 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
 
     //The function that resets the presentation by removing every action done by it. It also
     //stops the presentaton.
+    // TODO: Ensure resetPresentation is called when the presentation is closed
     resetPresentation = () => {
         this.updateCurrentPresentation();
-        this.childDocs.forEach(doc => (doc.presentationTargetDoc as Doc).opacity = 1);
         this.rootDoc._itemIndex = 0;
-        // this.layoutDoc.presStatus = false;
     }
 
-    //The function that starts the presentation, also checking if actions should be applied
-    //directly at start.
+    @action togglePath = () => this.pathBoolean = !this.pathBoolean;
+    @action toggleExpand = () => this.expandBoolean = !this.expandBoolean;
+
+    /**
+     * The function that starts the presentation at the given index, also checking if actions should be applied
+     * directly at start.
+     * @param startIndex: index that the presentation will start at
+     */
     startPresentation = (startIndex: number) => {
         this.updateCurrentPresentation();
         this.childDocs.map(doc => {
@@ -348,6 +368,10 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
         });
     }
 
+    /**
+     * The method called to open the presentation as a minimized view
+     * TODO: Look at old updateMinimize and compare...
+     */
     updateMinimize = () => {
         const srcContext = Cast(this.rootDoc.presCollection, Doc, null);
         this.turnOffEdit();
@@ -364,39 +388,52 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
         }
     }
 
+    /**
+     * Called when the user changes the view type
+     * Either 'List' (stacking) or 'Slides' (carousel)
+     */
     @undoBatch
     viewChanged = action((e: React.ChangeEvent) => {
         //@ts-ignore
         const viewType = e.target.selectedOptions[0].value as CollectionViewType;
-        viewType === CollectionViewType.Stacking && (this.rootDoc._pivotField = undefined); // pivot field may be set by the user in timeline view (or some other way) -- need to reset it here
+        // pivot field may be set by the user in timeline view (or some other way) -- need to reset it here
+        viewType === CollectionViewType.Stacking && (this.rootDoc._pivotField = undefined);
         this.rootDoc._viewType = viewType;
         if (viewType === CollectionViewType.Stacking) this.layoutDoc._gridGap = 5;
     });
 
+    /**
+     * When the movement dropdown is changes
+     */
     @undoBatch
     movementChanged = action((movement: string) => {
         const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null);
         const targetDoc = Cast(activeItem.presentationTargetDoc, Doc, null);
-        if (movement === 'zoom') {
-            activeItem.presZoomButton = !activeItem.presZoomButton;
-            if (activeItem.presZoomButton) activeItem.presMovement = 'Zoom';
-            else activeItem.presMovement = 'None';
-            activeItem.presNavButton = false;
-        } else if (movement === 'nav') {
-            activeItem.presZoomButton = false;
-            activeItem.presNavButton = !activeItem.presNavButton;
-            if (activeItem.presNavButton) activeItem.presMovement = 'Pan';
-            else activeItem.presMovement = 'None';
-        } else if (movement === 'switch') {
-            targetDoc.presTransition = 0;
-            activeItem.presSwitchButton = !activeItem.presSwitchButton;
-            if (activeItem.presSwitchButton) activeItem.presMovement = 'Jump cut';
-            else activeItem.presMovement = 'None';
-        } else {
-            activeItem.presMovement = 'None';
-            activeItem.presZoomButton = false;
-            activeItem.presNavButton = false;
-            activeItem.presSwitchButton = false;
+        switch (movement) {
+            case 'zoom': //Pan and zoom
+                activeItem.presZoomButton = !activeItem.presZoomButton;
+                if (activeItem.presZoomButton) activeItem.presMovement = 'Zoom';
+                else activeItem.presMovement = 'None';
+                activeItem.presNavButton = false;
+                break;
+            case 'pan': //Pan
+                activeItem.presZoomButton = false;
+                activeItem.presNavButton = !activeItem.presNavButton;
+                if (activeItem.presNavButton) activeItem.presMovement = 'Pan';
+                else activeItem.presMovement = 'None';
+                break;
+            case 'jump': //Jump Cut
+                targetDoc.presTransition = 0;
+                activeItem.presSwitchButton = !activeItem.presSwitchButton;
+                if (activeItem.presSwitchButton) activeItem.presMovement = 'Jump cut';
+                else activeItem.presMovement = 'None';
+                break;
+            case 'none': default:
+                activeItem.presMovement = 'None';
+                activeItem.presZoomButton = false;
+                activeItem.presNavButton = false;
+                activeItem.presSwitchButton = false;
+                break;
         }
     });
 
@@ -421,13 +458,9 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
     active = (outsideReaction?: boolean) => ((Doc.GetSelectedTool() === InkTool.None && !this.layoutDoc.isBackground) &&
         (this.layoutDoc.forceActive || this.props.isSelected(outsideReaction) || this._isChildActive || this.props.renderDepth === 0) ? true : false)
 
-    // KEYS
-    @observable _selectedArray: Doc[] = [];
-    @observable _sortedSelectedArray: Doc[] = [];
-    @observable _eleArray: HTMLElement[] = [];
-    @observable _dragArray: HTMLElement[] = [];
-
-    //TODO: Update to radix / quick sort
+    /**
+     * For sorting the array so that the order is maintained when it is dropped.
+     */
     @action
     sortArray = (): Doc[] => {
         const sort: Doc[] = this._selectedArray;
@@ -439,6 +472,9 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
         return sort;
     }
 
+    /**
+     * Method to get the list of selected items in the order in which they have been selected
+     */
     @computed get listOfSelected() {
         const list = this._selectedArray.map((doc: Doc, index: any) => {
             const activeItem = Cast(doc, Doc, null);
@@ -478,6 +514,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
         }
     }
 
+    // Key events when the minimized player is active
     @action
     minimizeEvents = (e: KeyboardEvent) => {
         e.stopPropagation();
@@ -491,7 +528,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
         }
     }
 
-    //Esc click
+    // Key for when the presentaiton is active (according to Selection Manager)
     @action
     keyEvents = (e: KeyboardEvent) => {
         e.stopPropagation();
@@ -507,7 +544,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
         } if (e.keyCode === 39) { // right (39) / d(68) / down(40) to go to next
             if (this.layoutDoc.presStatus !== "edit") this.next();
         } if (e.keyCode === 32) { // spacebar to 'present' or autoplay
-            if (this.layoutDoc.presStatus !== "edit") this.startOrResetPres(0);
+            if (this.layoutDoc.presStatus !== "edit") this.startPres(0);
             else this.layoutDoc.presStatus = "manual";
         }
         if (e.keyCode === 8) { // delete selected items
@@ -519,15 +556,9 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
         }
     }
 
-    @observable private transitionTools: boolean = false;
-    @observable private newDocumentTools: boolean = false;
-    @observable private progressivizeTools: boolean = false;
-    @observable private moreInfoTools: boolean = false;
-    @observable private playTools: boolean = false;
-    @observable private presentTools: boolean = false;
-    @observable private pathBoolean: boolean = false;
-    @observable private expandBoolean: boolean = false;
-
+    /**
+     * 
+     */
     @undoBatch
     @action
     viewPaths = async () => {
@@ -551,16 +582,19 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
         const fit = srcContext?._fitToBox;
     }
 
+    // Adds the index in the pres path graphically
     @computed get order() {
         const order: JSX.Element[] = [];
         this.childDocs.forEach((doc, index) => {
             const targetDoc = Cast(doc.presentationTargetDoc, Doc, null);
             const srcContext = Cast(targetDoc.context, Doc, null);
+            // Case A: Document is contained within the colleciton
             if (this.rootDoc.presCollection === srcContext) {
                 order.push(
                     <div className="pathOrder" style={{ top: NumCast(targetDoc.y), left: NumCast(targetDoc.x) }}>
                         <div className="pathOrder-frame">{index + 1}</div>
                     </div>);
+                // Case B: Document is not inside of the collection
             } else {
                 order.push(
                     <div className="pathOrder" style={{ top: 0, left: 0 }}>
@@ -571,6 +605,14 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
         return order;
     }
 
+    /**
+     * Method called for viewing paths which adds a single line with
+     * points at the center of each document added.
+     * Design choice: When this is called it sets _fitToBox as true so the
+     * user can have an overview of all of the documents in the collection.
+     * (Design needed for when documents in presentation trail are in another
+     * collection)
+     */
     @computed get paths() {
         let pathPoints = "";
         this.childDocs.forEach((doc, index) => {
@@ -601,9 +643,6 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
         />);
     }
 
-    @action togglePath = () => this.pathBoolean = !this.pathBoolean;
-    @action toggleExpand = () => this.expandBoolean = !this.expandBoolean;
-
     /**
      * The function that is called on click to turn fading document after presented option on/off.
      * It also makes sure that the option swithches from hide-after to this one, since both
@@ -627,13 +666,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
         }
     }
 
-    // WHAT IS THIS?
-    @action
-    dropdownToggle = (menu: string) => {
-        const dropMenu = document.getElementById('presBox' + menu + 'Dropdown');
-        if (dropMenu) dropMenu.style.display === 'none' ? dropMenu.style.display = 'block' : dropMenu.style.display = 'none';
-    }
-
+    // Converts seconds to ms and updates presTransition
     setTransitionTime = (number: String) => {
         const timeInMS = Number(number) * 1000;
         const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null);
@@ -641,6 +674,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
         if (targetDoc) targetDoc.presTransition = timeInMS;
     }
 
+    // Converts seconds to ms and updates presDuration
     setDurationTime = (number: String) => {
         const timeInMS = Number(number) * 1000;
         const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null);
@@ -648,6 +682,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
         if (targetDoc) targetDoc.presDuration = timeInMS;
     }
 
+
     @computed get transitionDropdown() {
         const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null);
         const targetDoc = Cast(activeItem?.presentationTargetDoc, Doc, null);
@@ -660,17 +695,14 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
                 <div className={`presBox-ribbon ${this.transitionTools && this.layoutDoc.presStatus === "edit" ? "active" : ""}`} onClick={e => e.stopPropagation()} onPointerUp={e => e.stopPropagation()} onPointerDown={e => e.stopPropagation()}>
                     <div className="ribbon-box">
                         Movement
-                        <div className="presBox-dropdown"
-                            onPointerDown={e => e.stopPropagation()}
-                        // onClick={() => this.dropdownToggle('Movement')}
-                        >
+                        <div className="presBox-dropdown" onPointerDown={e => e.stopPropagation()}>
                             {activeItem.presMovement}
                             <FontAwesomeIcon className='presBox-dropdownIcon' style={{ gridColumn: 2 }} icon={"angle-down"} />
                             <div className={'presBox-dropdownOptions'} id={'presBoxMovementDropdown'} onClick={e => e.stopPropagation()}>
                                 <div className={`presBox-dropdownOption ${activeItem.presMovement === 'None' ? "active" : ""}`} onPointerDown={e => e.stopPropagation()} onClick={() => this.movementChanged('none')}>None</div>
                                 <div className={`presBox-dropdownOption ${activeItem.presMovement === 'Zoom' ? "active" : ""}`} onPointerDown={e => e.stopPropagation()} onClick={() => this.movementChanged('zoom')}>Pan and Zoom</div>
-                                <div className={`presBox-dropdownOption ${activeItem.presMovement === 'Pan' ? "active" : ""}`} onPointerDown={e => e.stopPropagation()} onClick={() => this.movementChanged('nav')}>Pan</div>
-                                <div className={`presBox-dropdownOption ${activeItem.presMovement === 'Jump cut' ? "active" : ""}`} onPointerDown={e => e.stopPropagation()} onClick={() => this.movementChanged('switch')}>Jump cut</div>
+                                <div className={`presBox-dropdownOption ${activeItem.presMovement === 'Pan' ? "active" : ""}`} onPointerDown={e => e.stopPropagation()} onClick={() => this.movementChanged('pan')}>Pan</div>
+                                <div className={`presBox-dropdownOption ${activeItem.presMovement === 'Jump cut' ? "active" : ""}`} onPointerDown={e => e.stopPropagation()} onClick={() => this.movementChanged('jump')}>Jump cut</div>
                             </div>
                         </div>
                         <div className="ribbon-doubleButton" style={{ display: activeItem.presMovement === 'Pan' || activeItem.presMovement === 'Zoom' ? "inline-flex" : "none" }}>
@@ -783,8 +815,8 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
                     <div className={'presBox-ribbon'} onClick={e => e.stopPropagation()} onPointerUp={e => e.stopPropagation()} onPointerDown={e => e.stopPropagation()}>
                         <div className="ribbon-box">
                             <div className="ribbon-doubleButton" style={{ display: targetDoc.type === DocumentType.VID || targetDoc.type === DocumentType.AUDIO ? "inline-flex" : "none" }}>
-                                <div className="ribbon-button" style={{ backgroundColor: activeItem.presProgressivize ? "#aedef8" : "" }} onClick={this.progressivizeChild}>Start automatically</div>
-                                <div className="ribbon-button" style={{ display: "flex", backgroundColor: targetDoc.editProgressivize ? "#aedef8" : "" }} onClick={this.editProgressivize}>Start manually</div>
+                                <div className="ribbon-button" style={{ backgroundColor: activeItem.playAuto ? "#aedef8" : "" }} onClick={() => activeItem.playAuto = !activeItem.playAuto}>Play automatically</div>
+                                <div className="ribbon-button" style={{ display: "flex", backgroundColor: targetDoc.playAuto ? "" : "#aedef8" }} onClick={() => activeItem.playAuto = !activeItem.playAuto}>Play on next</div>
                             </div>
                             <div className="ribbon-doubleButton" style={{ display: "flex" }}>
                                 <div className="ribbon-button" style={{ backgroundColor: activeItem.openDocument ? "#aedef8" : "" }} onClick={() => activeItem.openDocument = !activeItem.openDocument}>Open document</div>
@@ -838,12 +870,10 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
                 <div className={"presBox-ribbon"} onClick={e => e.stopPropagation()} onPointerUp={e => e.stopPropagation()} onPointerDown={e => e.stopPropagation()}>
                     <div className="ribbon-box">
                         Slide Title: <br></br>
-                        {/* <div className="dropdown-textInput"> */}
                         <input className="ribbon-textInput" placeholder="..." type="text" name="fname" ref={this.inputRef} onChange={(e) => {
                             e.stopPropagation();
                             runInAction(() => this.title = e.target.value);
                         }}></input>
-                        {/* </div> */}
                     </div>
                     <div className="ribbon-box">
                         Choose type:
@@ -941,40 +971,20 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
         return doc;
     }
 
-    // Dropdown that appears for autoplay
-    @computed get playDropdown() {
-        return (
-            <div className={`dropdown-play ${this.playTools ? "active" : ""}`} onClick={e => e.stopPropagation()} onPointerUp={e => e.stopPropagation()} onPointerDown={e => e.stopPropagation()}>
-                <div className="dropdown-play-button" onClick={() => this.startOrResetPres(this.itemIndex)}>
-                    Present from current slide
-                </div>
-                <div className="dropdown-play-button" onClick={() => this.startOrResetPres(0)}>
-                    Present from first slide
-                </div>
-            </div>
-        );
-    }
-
     // Dropdown that appears when the user wants to begin presenting (either minimize or sidebar view)
     @computed get presentDropdown() {
         return (
             <div className={`dropdown-play ${this.presentTools ? "active" : ""}`} onClick={e => e.stopPropagation()} onPointerUp={e => e.stopPropagation()} onPointerDown={e => e.stopPropagation()}>
-                <div className="dropdown-play-button" onClick={this.updateMinimize}>
+                <div className="dropdown-play-button" onClick={(action(() => { this.updateMinimize; this.layoutDoc.presStatus = "manual"; this.turnOffEdit(); }))}>
                     Minimize
                 </div>
-                <div className="dropdown-play-button" onClick={() => { this.startOrResetPres(0); this.turnOffEdit(); }}>
+                <div className="dropdown-play-button" onClick={(action(() => { this.layoutDoc.presStatus = "manual"; this.turnOffEdit(); }))}>
                     Sidebar view
                 </div>
             </div>
         );
     }
 
-    // For toggling the options when the user wants to select play
-    @action togglePlay = () => { this.playTools = !this.playTools; };
-
-    // For toggling the options when the user wants to select play
-    @action togglePresent = () => { this.presentTools = !this.presentTools; };
-
     // Case in which the document has keyframes to navigate to next key frame
     @undoBatch
     @action
@@ -986,10 +996,6 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
             CollectionFreeFormDocumentView.setupScroll(tagDoc, 0);
             CollectionFreeFormDocumentView.setupKeyframes(childDocs, 0);
         }
-        // let lastFrame: number = 0;
-        // childDocs.forEach((doc) => {
-        //     if (NumCast(doc.appearFrame) > lastFrame) lastFrame = NumCast(doc.appearFrame);
-        // });
         CollectionFreeFormDocumentView.updateScrollframe(tagDoc, currentFrame);
         CollectionFreeFormDocumentView.updateKeyframe(childDocs, currentFrame || 0);
         tagDoc.currentFrame = Math.max(0, (currentFrame || 0) + 1);
@@ -1027,6 +1033,9 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
         }
     }
 
+    /**
+     * Returns the collection type as a string for headers
+     */
     @computed get stringType(): string {
         const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null);
         const targetDoc = Cast(activeItem?.presentationTargetDoc, Doc, null);
@@ -1587,7 +1596,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
         const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null);
         if (activeItem) {
             return (
-                <>
+                <div id="toolbarContainer" className={'presBox-toolbar'} style={{ display: this.layoutDoc.presStatus !== 'auto' && this.layoutDoc.presStatus !== 'manual' ? "inline-flex" : "none" }}>
                     <Tooltip title={<><div className="dash-tooltip">{"Add new slide"}</div></>}><div className={`toolbar-button ${this.newDocumentTools ? "active" : ""}`} onClick={action(() => this.newDocumentTools = !this.newDocumentTools)}><FontAwesomeIcon icon={"plus"} />
                         <FontAwesomeIcon className={`dropdown ${this.newDocumentTools ? "active" : ""}`} icon={"angle-down"} />
                     </div></Tooltip>
@@ -1624,7 +1633,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
                             <div className="toolbar-moreInfoBall" />
                         </div>
                     </div> */}
-                </>
+                </div>
             );
         } else {
             return (
@@ -1648,13 +1657,14 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
         }
     }
 
-    render() {
-        this.childDocs.slice(); // needed to insure that the childDocs are loaded for looking up fields
+    /**
+     * Top panel containes:
+     * viewPicker: The option to choose between List and Slides view for the presentaiton trail
+     * presentPanel: The button to start the presentation / open minimized view of the presentation
+     */
+    @computed get topPanel() {
         const mode = StrCast(this.rootDoc._viewType) as CollectionViewType;
-        // const addDocument = (doc: Doc | Doc[], relativeTo?: Doc, before?: boolean) => {
-        //     return add(doc, relativeTo ? relativeTo : docs[i], before !== undefined ? before : false);
-        // };
-        return <div onPointerOver={this.onPointerOver} onPointerLeave={this.onPointerLeave} className="presBox-cont" style={{ minWidth: this.layoutDoc.inOverlay ? 240 : undefined }} >
+        return (
             <div className="presBox-buttons" style={{ display: this.rootDoc._chromeStatus === "disabled" ? "none" : undefined }}>
                 <select className="presBox-viewPicker"
                     style={{ display: this.layoutDoc.presStatus === "edit" ? "block" : "none" }}
@@ -1666,36 +1676,61 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
                 </select>
                 <div className="presBox-presentPanel">
                     <span className={`presBox-button ${this.layoutDoc.presStatus === "edit" ? "present" : ""}`}>
-                        <div className="presBox-button-left" onClick={() => this.layoutDoc.presStatus = "manual"}><FontAwesomeIcon icon={"play-circle"} /> <div style={{ display: this.props.PanelWidth() > 200 ? "inline-flex" : "none" }}>&nbsp; Present </div></div>
-                        <div className={`presBox-button-right ${this.presentTools ? "active" : ""}`} onClick={e => { e.stopPropagation; this.togglePresent(); }}>
+                        <div className="presBox-button-left" onClick={() => this.layoutDoc.presStatus = "manual"}>
+                            <FontAwesomeIcon icon={"play-circle"} />
+                            <div style={{ display: this.props.PanelWidth() > 200 ? "inline-flex" : "none" }}>&nbsp; Present</div>
+                        </div>
+                        <div className={`presBox-button-right ${this.presentTools ? "active" : ""}`} onClick={e => { e.stopPropagation; this.presentTools = !this.presentTools; }}>
                             <FontAwesomeIcon className="dropdown" style={{ margin: 0, transform: this.presentTools ? 'rotate(180deg)' : 'rotate(0deg)' }} icon={"angle-down"} />
                             {this.presentDropdown}
                         </div>
                     </span>
-                    <div className="miniPresOverlay" style={{ display: this.layoutDoc.presStatus !== "edit" ? "inline-flex" : "none" }}>
-                        {/* <span className={`presBox-button ${this.layoutDoc.presStatus !== "edit" ? "active" : ""}`}>
-                            <div className="presBox-button-left" onClick={() => this.startOrResetPres(0)}>
-                                <FontAwesomeIcon icon={"clock"} /> &nbsp;
-                                <FontAwesomeIcon icon={this.layoutDoc.presStatus === "auto" ? "pause" : "play"} />
-                            </div>
-                            <div className={`presBox-button-right ${this.playTools ? "active" : ""}`} onClick={e => { e.stopPropagation; this.togglePlay(); }}>
-                                <FontAwesomeIcon className="dropdown" style={{ margin: 0, transform: this.playTools ? 'rotate(180deg)' : 'rotate(0deg)' }} icon={"angle-down"} />
-                                {this.playDropdown}
-                            </div>
-                        </span> */}
-                        <div className="miniPres-button" onClick={this.back}><FontAwesomeIcon icon={"arrow-left"} /></div>
-                        <div className="miniPres-button" onClick={() => this.startOrResetPres(this.itemIndex)}><FontAwesomeIcon icon={PresBox.Instance.layoutDoc.presStatus === "auto" ? "pause" : "play"} /></div>
-                        <div className="miniPres-button" onClick={this.next}><FontAwesomeIcon icon={"arrow-right"} /></div>
-                        <div className="miniPres-divider"></div>
-                        <div className="miniPres-button-text">Slide {this.itemIndex + 1} / {this.childDocs.length}</div>
-                        <div className="miniPres-divider"></div>
-                        <div className="miniPres-button" onClick={() => this.layoutDoc.presStatus = "edit"}>
-                            <FontAwesomeIcon icon={"times"} />
-                        </div>
-                    </div>
+                    {this.playButtons}
+                </div>
+            </div>
+        );
+    }
+
+    @computed get playButtons() {
+        const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null);
+        const targetDoc = Cast(activeItem?.presentationTargetDoc, Doc, null);
+        // Case 1: There are still other frames and should go through all frames before going to next slide
+        return (<div className="miniPresOverlay" style={{ display: this.layoutDoc.presStatus !== "edit" ? "inline-flex" : "none" }}>
+            {/* <span className={`presBox-button ${this.layoutDoc.presStatus !== "edit" ? "active" : ""}`}>
+                <div className="presBox-button-left" onClick={() => this.startPres(0)}>
+                    <FontAwesomeIcon icon={"clock"} /> &nbsp;
+                    <FontAwesomeIcon icon={this.layoutDoc.presStatus === "auto" ? "pause" : "play"} />
+                </div>
+                <div className={`presBox-button-right ${this.playTools ? "active" : ""}`} onClick={e => { e.stopPropagation; this.togglePlay(); }}>
+                    <FontAwesomeIcon className="dropdown" style={{ margin: 0, transform: this.playTools ? 'rotate(180deg)' : 'rotate(0deg)' }} icon={"angle-down"} />
+                    {this.playDropdown}
                 </div>
+            </span> */}
+            <div className="miniPres-button" onClick={this.back}><FontAwesomeIcon icon={"arrow-left"} /></div>
+            <div className="miniPres-button" onClick={() => this.startPres(this.itemIndex)}><FontAwesomeIcon icon={PresBox.Instance.layoutDoc.presStatus === "auto" ? "pause" : "play"} /></div>
+            <div className="miniPres-button" onClick={this.next}><FontAwesomeIcon icon={"arrow-right"} /></div>
+            <div className="miniPres-divider"></div>
+            <div className="miniPres-button-text" style={{ display: this.props.PanelWidth() > 250 ? "inline-flex" : "none" }}>
+                Slide {this.itemIndex + 1} / {this.childDocs.length}
+                {targetDoc ? <div className="miniPres-button-frame" style={{ display: targetDoc.lastFrame !== undefined && targetDoc.lastFrame >= 0 ? "inline-flex" : "none" }}>
+                    <div>{targetDoc.currentFrame}</div>
+                    <div>{targetDoc.lastFrame}</div>
+                </div> : null}
             </div>
-            <div id="toolbarContainer" className={`presBox-toolbar ${this.layoutDoc.presStatus === "edit" ? "active" : ""}`}> {this.toolbar} </div>
+            <div className="miniPres-divider"></div>
+            <div className="miniPres-button" onClick={() => this.layoutDoc.presStatus = "edit"}>
+                <FontAwesomeIcon icon={"times"} />
+            </div>
+        </div>);
+    }
+
+    render() {
+        // needed to insure that the childDocs are loaded for looking up fields
+        this.childDocs.slice();
+        const mode = StrCast(this.rootDoc._viewType) as CollectionViewType;
+        return <div onPointerOver={this.onPointerOver} onPointerLeave={this.onPointerLeave} className="presBox-cont" style={{ minWidth: this.layoutDoc.inOverlay ? 240 : undefined }} >
+            {this.topPanel}
+            {this.toolbar}
             {this.newDocumentToolbarDropdown}
             <div className="presBox-listCont">
                 {mode !== CollectionViewType.Invalid ?
diff --git a/src/client/views/presentationview/PresElementBox.scss b/src/client/views/presentationview/PresElementBox.scss
index fa70b2a41..3d730d7ac 100644
--- a/src/client/views/presentationview/PresElementBox.scss
+++ b/src/client/views/presentationview/PresElementBox.scss
@@ -1,3 +1,7 @@
+$light-blue: #AEDDF8;
+$dark-blue: #5B9FDD;
+$light-background: #ececec;
+
 .presElementBox-item {
     display: grid;
     grid-template-columns: max-content max-content max-content;
@@ -26,7 +30,7 @@
         z-index: -1;
         width: calc(100% + 200px);
         height: calc(100% + 8px);
-        background-color: #AEDDF8;
+        background-color: $light-blue;
     }
 
     .presElementBox-highlightTop {
@@ -69,7 +73,7 @@
 .presElementBox-active {
     color: black;
     border-radius: 6px;
-    border: solid 2px #5B9FDD;
+    border: solid 2px $dark-blue;
 }
 
 .presElementBox-buttons {
diff --git a/src/client/views/presentationview/PresElementBox.tsx b/src/client/views/presentationview/PresElementBox.tsx
index 11ffde9dd..092fd1fd3 100644
--- a/src/client/views/presentationview/PresElementBox.tsx
+++ b/src/client/views/presentationview/PresElementBox.tsx
@@ -189,7 +189,7 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps, PresDoc
                     DataDoc={this.targetDoc[DataSym] !== this.targetDoc && this.targetDoc[DataSym]}
                     LibraryPath={emptyPath}
                     fitToBox={true}
-                    backgroundColor={() => "darkgrey"}
+                    backgroundColor={this.props.backgroundColor}
                     rootSelected={returnTrue}
                     addDocument={returnFalse}
                     removeDocument={returnFalse}
@@ -254,11 +254,8 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps, PresDoc
     }
 
     startDrag = (e: PointerEvent, down: number[], delta: number[]) => {
-        // const ele: HTMLElement[] = PresBox.Instance._eleArray.map(doc => doc);
         const activeItem = this.rootDoc;
         const dragData = new DragManager.DocumentDragData(PresBox.Instance.sortArray().map(doc => doc));
-        // let value = this.getValue(this._heading);
-        // value = typeof value === "string" ? `"${value}"` : value;
         const dragItem: HTMLElement[] = [];
         PresBox.Instance._dragArray.map(ele => {
             const drag = ele;
@@ -337,7 +334,6 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps, PresDoc
                     <Tooltip title={<><div className="dash-tooltip">{"Duration"}</div></>}><div className="presElementBox-time" style={{ display: PresBox.Instance.toolbarWidth > 300 ? "block" : "none" }}>{this.duration}</div></Tooltip>
                     <Tooltip title={<><div className="dash-tooltip">{"Remove from presentation"}</div></>}><div
                         className="presElementBox-closeIcon"
-                        // onPointerDown={e => e.stopPropagation()}
                         onClick={e => {
                             this.props.removeDocument?.(this.rootDoc);
                             e.stopPropagation();
@@ -363,6 +359,4 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps, PresDoc
             </div>
         );
     }
-}
-
-// this.layoutDoc.title !== "pres element template"
\ No newline at end of file
+}
\ No newline at end of file
-- 
cgit v1.2.3-70-g09d2


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

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

(limited to 'src/client/util')

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 0416c6d82f7c63ddef636e587f612108e978d8eb Mon Sep 17 00:00:00 2001
From: Melissa Zhang <mzhang19096@gmail.com>
Date: Thu, 6 Aug 2020 13:13:34 -0700
Subject: change WebDocument proportions/width for consistency across drag &
 drop and new document toolbar

---
 src/client/util/CurrentUserUtils.ts                | 2 +-
 src/client/views/collections/CollectionSubView.tsx | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

(limited to 'src/client/util')

diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index 1f140e145..61edf8fe4 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -421,7 +421,7 @@ export class CurrentUserUtils {
                 { _width: 250, _height: 250, title: "container" });
         }
         if (doc.emptyWebpage === undefined) {
-            doc.emptyWebpage = Docs.Create.WebDocument("", { title: "webpage", _nativeWidth: 850, _nativeHeight: 962, _width: 600, UseCors: true });
+            doc.emptyWebpage = Docs.Create.WebDocument("", { title: "webpage", _nativeWidth: 850, _nativeHeight: 962, _width: 400, UseCors: true });
         }
         if (doc.activeMobileMenu === undefined) {
             this.setupActiveMobileMenu(doc);
diff --git a/src/client/views/collections/CollectionSubView.tsx b/src/client/views/collections/CollectionSubView.tsx
index 4025e25f9..0e40cd21c 100644
--- a/src/client/views/collections/CollectionSubView.tsx
+++ b/src/client/views/collections/CollectionSubView.tsx
@@ -407,8 +407,8 @@ export function CollectionSubView<T, X>(schemaCtor: (doc: Doc) => T, moreProps?:
                     title: uriList,
                     _width: 400,
                     _height: 315,
-                    _nativeWidth: 600,
-                    _nativeHeight: 472.5
+                    _nativeWidth: 850,
+                    _nativeHeight: 962
                 }));
                 return;
             }
-- 
cgit v1.2.3-70-g09d2


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

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

(limited to 'src/client/util')

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


From ea3a2d51e130b1ea5954d9bb13658d25d8eac975 Mon Sep 17 00:00:00 2001
From: anika-ahluwalia <anika.ahluwalia@gmail.com>
Date: Fri, 7 Aug 2020 01:23:00 -0500
Subject: trying novice buttons

---
 src/client/documents/Documents.ts      |  1 -
 src/client/util/CurrentUserUtils.ts    | 71 +++++++++++++++++++++++++++-------
 src/client/views/nodes/FontIconBox.tsx |  2 +-
 3 files changed, 57 insertions(+), 17 deletions(-)

(limited to 'src/client/util')

diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index 50b7368d3..a06b4a581 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -205,7 +205,6 @@ export interface DocumentOptions {
     audioEnd?: number;         // the time frame where the audio should stop playing  
     border?: string; //for searchbox
     hovercolor?: string;
-    developerFeature?: boolean;
 }
 
 class EmptyBox {
diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index c5d3fffc7..b1c98e549 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -385,10 +385,9 @@ export class CurrentUserUtils {
         return doc["template-icons"] as Doc;
     }
 
-    static creatorBtnDescriptors(doc: Doc): {
+    static creatorBtnDescriptors(doc: Doc, novice: boolean): {
         title: string, toolTip: string, icon: string, drag?: string, ignoreClick?: boolean,
         click?: string, ischecked?: string, activeInkPen?: Doc, backgroundColor?: string, dragFactory?: Doc, hidden?: any,
-        developerFeature?: boolean
     }[] {
         if (doc.emptyPresentation === undefined) {
             doc.emptyPresentation = Docs.Create.PresDocument(new List<Doc>(),
@@ -461,7 +460,6 @@ export class CurrentUserUtils {
             toolTip: "Drag a screengrabber", title: "Grab",
             icon: "photo-video", click: 'openOnRight(getCopy(this.dragFactory, true))',
             drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyScreenshot as Doc,
-            developerFeature: true,
         };
         const audio = {
             toolTip: "Drag a audio recorder", title: "Audio",
@@ -482,35 +480,35 @@ export class CurrentUserUtils {
         const search = {
             toolTip: "Drag a search box", title: "Query", icon: "search",
             click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)',
-            dragFactory: doc.emptySearch as Doc, developerFeature: true,
+            dragFactory: doc.emptySearch as Doc,
         };
         const script = {
             toolTip: "Drag a scripting box", title: "Script",
             icon: "terminal", click: 'openOnRight(getCopy(this.dragFactory, true))',
             drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyScript as Doc,
-            developerFeature: true,
         };
         const mobile = {
             toolTip: "Drag a mobile view", title: "Phone",
             icon: "mobile", click: 'openOnRight(Doc.UserDoc().activeMobileMenu)',
             drag: 'this.dragFactory', dragFactory: doc.activeMobileMenu as Doc,
-            developerFeature: true,
         };
         const preview = {
             toolTip: "Drag a document previewer", title: "Prev",
             icon: "expand", click: 'openOnRight(getCopy(this.dragFactory, true))',
             drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyDocHolder as Doc,
-            developerFeature: true,
         };
         const repl = {
             toolTip: "Toggle a Calculator REPL", title: "repl",
             icon: "calculator",
             click: 'addOverlayWindow("ScriptingRepl", { x: 300, y: 100, width: 200, height: 200, title: "Scripting REPL" })',
-            developerFeature: true,
         };
 
         // novice : [collection, web, compare, audio, button, pres] 
-        return [collection, web, compare, screen, audio, button, pres, search, script, preview, repl];
+        if (novice) {
+            return [collection, web, compare, audio, button, pres];
+        } else {
+            return [collection, web, compare, screen, audio, button, pres, search, script, preview, repl];
+        }
 
     }
 
@@ -525,10 +523,9 @@ export class CurrentUserUtils {
                 alreadyCreatedButtons = dragDocs.map(d => StrCast(d.title));
             }
         }
-        const buttons = CurrentUserUtils.creatorBtnDescriptors(doc).filter(d => !alreadyCreatedButtons?.includes(d.title));
+        const buttons = CurrentUserUtils.creatorBtnDescriptors(doc, true).filter(d => !alreadyCreatedButtons?.includes(d.title));
         const creatorBtns = buttons.map(({ title, toolTip, icon, ignoreClick, drag,
-            click, ischecked, activeInkPen, backgroundColor, dragFactory,
-            developerFeature }) => Docs.Create.FontIconDocument({
+            click, ischecked, activeInkPen, backgroundColor, dragFactory }) => Docs.Create.FontIconDocument({
                 _nativeWidth: 50, _nativeHeight: 50, _width: 50, _height: 50,
                 icon,
                 title,
@@ -542,12 +539,55 @@ export class CurrentUserUtils {
                 backgroundColor,
                 removeDropProperties: new List<string>(["dropAction"]),
                 dragFactory,
-                developerFeature,
             }));
 
         if (dragCreatorSet === undefined) {
             doc.myItemCreators = new PrefetchProxy(Docs.Create.MasonryDocument(creatorBtns, {
-                title: "Basic Item Creators", _showTitle: "title", _xMargin: 0,
+                title: "Basic Item Creators",
+                hidden: ComputedField.MakeFunction("!self.target.noviceMode") as any,
+                _showTitle: "title", _xMargin: 0,
+                _autoHeight: true, _width: 500, _columnWidth: 35, ignoreClick: true, lockedPosition: true, _chromeStatus: "disabled",
+                dropConverter: ScriptField.MakeScript("convertToButtons(dragData)", { dragData: DragManager.DocumentDragData.name }),
+            }));
+        } else {
+            creatorBtns.forEach(nb => Doc.AddDocToList(doc.myItemCreators as Doc, "data", nb));
+        }
+        return doc.myItemCreators as Doc;
+    }
+
+    static async setupDevCreatorButtons(doc: Doc) {
+        let alreadyCreatedButtons: string[] = [];
+        const dragCreatorSet = await Cast(doc.myItemCreators, Doc, null);
+        if (dragCreatorSet) {
+            const dragCreators = await Cast(dragCreatorSet.data, listSpec(Doc));
+            if (dragCreators) {
+                const dragDocs = await Promise.all(dragCreators);
+                alreadyCreatedButtons = dragDocs.map(d => StrCast(d.title));
+            }
+        }
+        const buttons = CurrentUserUtils.creatorBtnDescriptors(doc, false).filter(d => !alreadyCreatedButtons?.includes(d.title));
+        const creatorBtns = buttons.map(({ title, toolTip, icon, ignoreClick, drag,
+            click, ischecked, activeInkPen, backgroundColor, dragFactory }) => Docs.Create.FontIconDocument({
+                _nativeWidth: 50, _nativeHeight: 50, _width: 50, _height: 50,
+                icon,
+                title,
+                toolTip,
+                ignoreClick,
+                dropAction: "copy",
+                onDragStart: drag ? ScriptField.MakeFunction(drag) : undefined,
+                onClick: click ? ScriptField.MakeScript(click) : undefined,
+                ischecked: ischecked ? ComputedField.MakeFunction(ischecked) : undefined,
+                activeInkPen,
+                backgroundColor,
+                removeDropProperties: new List<string>(["dropAction"]),
+                dragFactory,
+            }));
+
+        if (dragCreatorSet === undefined) {
+            doc.myItemCreators = new PrefetchProxy(Docs.Create.MasonryDocument(creatorBtns, {
+                title: "Basic Item Creators",
+                hidden: ComputedField.MakeFunction("self.target.noviceMode") as any,
+                _showTitle: "title", _xMargin: 0,
                 _autoHeight: true, _width: 500, _columnWidth: 35, ignoreClick: true, lockedPosition: true, _chromeStatus: "disabled",
                 dropConverter: ScriptField.MakeScript("convertToButtons(dragData)", { dragData: DragManager.DocumentDragData.name }),
             }));
@@ -724,12 +764,13 @@ export class CurrentUserUtils {
     static async setupToolsBtnPanel(doc: Doc) {
         // setup a masonry view of all he creators
         const creatorBtns = await CurrentUserUtils.setupCreatorButtons(doc);
+        const devBtns = await CurrentUserUtils.setupDevCreatorButtons(doc);
         const templateBtns = CurrentUserUtils.setupUserTemplateButtons(doc);
 
         doc["tabs-button-tools"] = undefined;
 
         if (doc.myCreators === undefined) {
-            doc.myCreators = new PrefetchProxy(Docs.Create.StackingDocument([creatorBtns, templateBtns], {
+            doc.myCreators = new PrefetchProxy(Docs.Create.StackingDocument([creatorBtns, devBtns, templateBtns], {
                 title: "all Creators", _yMargin: 0, _autoHeight: true, _xMargin: 0,
                 _width: 500, ignoreClick: true, lockedPosition: true, _chromeStatus: "disabled",
             }));
diff --git a/src/client/views/nodes/FontIconBox.tsx b/src/client/views/nodes/FontIconBox.tsx
index 95faabb48..a6b1678b5 100644
--- a/src/client/views/nodes/FontIconBox.tsx
+++ b/src/client/views/nodes/FontIconBox.tsx
@@ -74,7 +74,7 @@ export class FontIconBox extends DocComponent<FieldViewProps, FontIconDocument>(
                 {!label ? (null) : <div className="fontIconBox-label" style={{ color, backgroundColor }}> {label} </div>}
             </div>
         </button>;
-        return (this.layoutDoc.developerFeature && Doc.UserDoc().noviceMode) ? (null) : !this.layoutDoc.toolTip ? button :
+        return !this.layoutDoc.toolTip ? button :
             <Tooltip title={<div className="dash-tooltip">{StrCast(this.layoutDoc.toolTip)}</div>}>
                 {button}
             </Tooltip>;
-- 
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/util')

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 ed064aa7e98868809a0be711b070cef7adef186e Mon Sep 17 00:00:00 2001
From: usodhi <61431818+usodhi@users.noreply.github.com>
Date: Fri, 7 Aug 2020 17:54:51 +0530
Subject: minor changes + attempt to move around the notifs button

---
 src/client/util/GroupManager.tsx                                 | 2 +-
 src/client/views/MainView.tsx                                    | 2 +-
 src/client/views/MainViewNotifs.tsx                              | 9 +++++----
 src/client/views/collections/CollectionStackingView.tsx          | 7 ++++++-
 .../views/collections/collectionFreeForm/PropertiesView.tsx      | 4 ++--
 5 files changed, 15 insertions(+), 9 deletions(-)

(limited to 'src/client/util')

diff --git a/src/client/util/GroupManager.tsx b/src/client/util/GroupManager.tsx
index 277e96a89..d03989675 100644
--- a/src/client/util/GroupManager.tsx
+++ b/src/client/util/GroupManager.tsx
@@ -366,7 +366,7 @@ export default class GroupManager extends React.Component<{}> {
                 interactive={true}
                 contents={contents}
                 dialogueBoxStyle={{ width: "90%", height: "70%" }}
-                closeOnExternalClick={action(() => { this.createGroupModalOpen = false; TaskCompletionBox.taskCompleted = false; })}
+                closeOnExternalClick={action(() => { this.createGroupModalOpen = false; this.selectedUsers = null; TaskCompletionBox.taskCompleted = false; })}
             />
         );
     }
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index b6058db7a..583bd983d 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -437,7 +437,7 @@ export class MainView extends React.Component {
     }
     sidebarScreenToLocal = () => new Transform(0, (CollectionMenu.Instance.Pinned ? -35 : 0), 1);
     //sidebarScreenToLocal = () => new Transform(0, (RichTextMenu.Instance.Pinned ? -35 : 0) + (CollectionMenu.Instance.Pinned ? -35 : 0), 1);
-    mainContainerXf = () => this.sidebarScreenToLocal().translate(-55, 0);
+    mainContainerXf = () => this.sidebarScreenToLocal().translate(-55, -this._buttonBarHeight);
 
     @computed get closePosition() { return 55 + this.flyoutWidth; }
     @computed get flyout() {
diff --git a/src/client/views/MainViewNotifs.tsx b/src/client/views/MainViewNotifs.tsx
index ce47e1cf1..89006ebc8 100644
--- a/src/client/views/MainViewNotifs.tsx
+++ b/src/client/views/MainViewNotifs.tsx
@@ -1,12 +1,13 @@
-import { action, computed, observable } from 'mobx';
+import { observable } from 'mobx';
 import { observer } from 'mobx-react';
 import "normalize.css";
 import * as React from 'react';
 import { Doc, DocListCast, Opt } from '../../fields/Doc';
-import { emptyFunction, returnFalse, setupMoveUpEvents } from '../../Utils';
-import { SetupDrag, DragManager } from '../util/DragManager';
+import { returnFalse, setupMoveUpEvents } from '../../Utils';
+import { DragManager } from '../util/DragManager';
 import "./MainViewNotifs.scss";
 import { MainView } from './MainView';
+import { NumCast } from '../../fields/Types';
 
 
 @observer
@@ -27,7 +28,7 @@ export class MainViewNotifs extends React.Component {
 
     render() {
         const length = MainViewNotifs.NotifsCol ? DocListCast(MainViewNotifs.NotifsCol.data).length : 0;
-        return <div className="mainNotifs-container" style={{ width: 15, height: 15 }} ref={this._notifsRef}>
+        return <div className="mainNotifs-container" style={{ width: 15, height: 15, top: 12 + NumCast(MainViewNotifs.NotifsCol?.position) * 60 }} ref={this._notifsRef}>
             <button className="mainNotifs-badge" style={length > 0 ? { "display": "initial" } : { "display": "none" }}
                 onPointerDown={this.onPointerDown} >
                 {length}
diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx
index fe3d57bdb..b27af66ba 100644
--- a/src/client/views/collections/CollectionStackingView.tsx
+++ b/src/client/views/collections/CollectionStackingView.tsx
@@ -4,7 +4,7 @@ import { CursorProperty } from "csstype";
 import { action, computed, IReactionDisposer, observable, reaction, runInAction } from "mobx";
 import { observer } from "mobx-react";
 import Switch from 'rc-switch';
-import { DataSym, Doc, HeightSym, WidthSym } from "../../../fields/Doc";
+import { DataSym, Doc, HeightSym, WidthSym, DocListCastAsync } from "../../../fields/Doc";
 import { collectionSchema, documentSchema } from "../../../fields/documentSchemas";
 import { Id } from "../../../fields/FieldSymbols";
 import { List } from "../../../fields/List";
@@ -28,6 +28,7 @@ import { CollectionViewType } from "./CollectionView";
 import { SnappingManager } from "../../util/SnappingManager";
 import { CollectionFreeFormDocumentView } from "../nodes/CollectionFreeFormDocumentView";
 import { DocUtils } from "../../documents/Documents";
+import { MainViewNotifs } from "../MainViewNotifs";
 const _global = (window /* browser */ || global /* node */) as any;
 
 type StackingDocument = makeInterface<[typeof collectionSchema, typeof documentSchema]>;
@@ -298,6 +299,10 @@ export class CollectionStackingView extends CollectionSubView(StackingDocument)
                             const srcInd = docs.indexOf(doc);
                             docs.splice(srcInd, 1);
                             docs.splice((targInd > srcInd ? targInd - 1 : targInd) + plusOne, 0, doc);
+                            DocListCastAsync(docs).then(resolvedDocs => {
+                                const pos = resolvedDocs?.findIndex(shareDoc => shareDoc.icon === "users") || 0; // hopefully find out if the sharing doc has been moved
+                                if (MainViewNotifs.NotifsCol && pos !== -1) MainViewNotifs.NotifsCol.position = pos;
+                            });
                         } else if (i < (newDocs.length / 2)) { //glr: for some reason dragged documents are duplicated
                             if (targInd === -1) targInd = docs.length;
                             else targInd = docs.indexOf(newDocs[0]) + 1;
diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx
index 1a8ee3ea1..516160acc 100644
--- a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx
+++ b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx
@@ -959,9 +959,9 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
                     <div className="propertiesView-name">
                         {this.editableTitle}
                         <div className="propertiesView-presSelected">
-                            {PresBox.Instance?._selectedArray.length} selected
+                            {PresBox.Instance._selectedArray.length} selected
                             <div className="propertiesView-selectedList">
-                                {PresBox.Instance?.listOfSelected}
+                                {PresBox.Instance.listOfSelected}
                             </div>
                         </div>
                     </div>
-- 
cgit v1.2.3-70-g09d2


From b02cfed890d9d95a8f45bbc93d688bd3311dd387 Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Fri, 7 Aug 2020 08:37:02 -0400
Subject: tweaked noviceMode script to use non-generic variables & added
 ScriptField cache to avoid multiple scripts.

---
 src/client/util/CurrentUserUtils.ts | 12 ++++++------
 src/fields/ScriptField.ts           |  4 ++++
 2 files changed, 10 insertions(+), 6 deletions(-)

(limited to 'src/client/util')

diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index 0ed03cebe..c205acb99 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -248,8 +248,8 @@ export class CurrentUserUtils {
         if (doc["template-buttons"] === undefined) {
             doc["template-buttons"] = new PrefetchProxy(Docs.Create.MasonryDocument(requiredTypes, {
                 title: "Advanced Item Prototypes", _xMargin: 0, _showTitle: "title",
-                hidden: ComputedField.MakeFunction("self.target.noviceMode") as any,
-                target: doc,
+                hidden: ComputedField.MakeFunction("self.userDoc.noviceMode") as any,
+                userDoc: doc,
                 _autoHeight: true, _width: 500, _columnWidth: 35, ignoreClick: true, lockedPosition: true, _chromeStatus: "disabled",
                 dropConverter: ScriptField.MakeScript("convertToButtons(dragData)", { dragData: DragManager.DocumentDragData.name }),
             }));
@@ -479,8 +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")
+            userDoc: noviceMode ? undefined as any : doc,
+            hidden: noviceMode ? undefined as any : ComputedField.MakeFunction("self.userDoc.noviceMode")
         }));
 
         if (dragCreatorSet === undefined) {
@@ -534,8 +534,8 @@ export class CurrentUserUtils {
                     onClick: ScriptField.MakeScript(click, { scriptContext: "any" }),
                 }));
             const userDoc = menuBtns[menuBtns.length - 1];
-            userDoc.target = doc;
-            userDoc.hidden = ComputedField.MakeFunction("self.target.noviceMode");
+            userDoc.userDoc = doc;
+            userDoc.hidden = ComputedField.MakeFunction("self.userDoc.noviceMode");
 
             doc.menuStack = new PrefetchProxy(Docs.Create.StackingDocument(menuBtns, {
                 title: "menuItemPanel",
diff --git a/src/fields/ScriptField.ts b/src/fields/ScriptField.ts
index f55483a5b..4cc3a7cc7 100644
--- a/src/fields/ScriptField.ts
+++ b/src/fields/ScriptField.ts
@@ -53,6 +53,9 @@ async function deserializeScript(script: ScriptField) {
     if (script.script.originalScript === 'convertToButtons(dragData)') {
         return (script as any).script = (ScriptField.ConvertToButtons ?? (ScriptField.ConvertToButtons = ComputedField.MakeFunction('convertToButtons(dragData)', { dragData: "DocumentDragData" })))?.script;
     }
+    if (script.script.originalScript === 'self.userDoc.noviceMode') {
+        return (script as any).script = (ScriptField.NoviceMode ?? (ScriptField.NoviceMode = ComputedField.MakeFunction('self.userDoc.noviceMode')))?.script;
+    }
     const captures: ProxyField<Doc> = (script as any).captures;
     if (captures) {
         const doc = (await captures.value())!;
@@ -85,6 +88,7 @@ export class ScriptField extends ObjectField {
     public static OpenOnRight: Opt<ScriptField>;
     public static DeiconifyView: Opt<ScriptField>;
     public static ConvertToButtons: Opt<ScriptField>;
+    public static NoviceMode: Opt<ScriptField>;
     constructor(script: CompiledScript, setterscript?: CompiledScript) {
         super();
 
-- 
cgit v1.2.3-70-g09d2


From 5c3e84b8dc22ee630e4612f594635b56b5a7ee9a Mon Sep 17 00:00:00 2001
From: anika-ahluwalia <anika.ahluwalia@gmail.com>
Date: Fri, 7 Aug 2020 10:52:01 -0500
Subject: reverting back

---
 src/client/util/CurrentUserUtils.ts | 55 +++----------------------------------
 1 file changed, 4 insertions(+), 51 deletions(-)

(limited to 'src/client/util')

diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index b1c98e549..fdca2b0da 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -385,7 +385,7 @@ export class CurrentUserUtils {
         return doc["template-icons"] as Doc;
     }
 
-    static creatorBtnDescriptors(doc: Doc, novice: boolean): {
+    static creatorBtnDescriptors(doc: Doc): {
         title: string, toolTip: string, icon: string, drag?: string, ignoreClick?: boolean,
         click?: string, ischecked?: string, activeInkPen?: Doc, backgroundColor?: string, dragFactory?: Doc, hidden?: any,
     }[] {
@@ -504,11 +504,7 @@ export class CurrentUserUtils {
         };
 
         // novice : [collection, web, compare, audio, button, pres] 
-        if (novice) {
-            return [collection, web, compare, audio, button, pres];
-        } else {
-            return [collection, web, compare, screen, audio, button, pres, search, script, preview, repl];
-        }
+        return [collection, web, compare, screen, audio, button, pres, search, script, preview, repl];
 
     }
 
@@ -523,7 +519,7 @@ export class CurrentUserUtils {
                 alreadyCreatedButtons = dragDocs.map(d => StrCast(d.title));
             }
         }
-        const buttons = CurrentUserUtils.creatorBtnDescriptors(doc, true).filter(d => !alreadyCreatedButtons?.includes(d.title));
+        const buttons = CurrentUserUtils.creatorBtnDescriptors(doc).filter(d => !alreadyCreatedButtons?.includes(d.title));
         const creatorBtns = buttons.map(({ title, toolTip, icon, ignoreClick, drag,
             click, ischecked, activeInkPen, backgroundColor, dragFactory }) => Docs.Create.FontIconDocument({
                 _nativeWidth: 50, _nativeHeight: 50, _width: 50, _height: 50,
@@ -555,48 +551,6 @@ export class CurrentUserUtils {
         return doc.myItemCreators as Doc;
     }
 
-    static async setupDevCreatorButtons(doc: Doc) {
-        let alreadyCreatedButtons: string[] = [];
-        const dragCreatorSet = await Cast(doc.myItemCreators, Doc, null);
-        if (dragCreatorSet) {
-            const dragCreators = await Cast(dragCreatorSet.data, listSpec(Doc));
-            if (dragCreators) {
-                const dragDocs = await Promise.all(dragCreators);
-                alreadyCreatedButtons = dragDocs.map(d => StrCast(d.title));
-            }
-        }
-        const buttons = CurrentUserUtils.creatorBtnDescriptors(doc, false).filter(d => !alreadyCreatedButtons?.includes(d.title));
-        const creatorBtns = buttons.map(({ title, toolTip, icon, ignoreClick, drag,
-            click, ischecked, activeInkPen, backgroundColor, dragFactory }) => Docs.Create.FontIconDocument({
-                _nativeWidth: 50, _nativeHeight: 50, _width: 50, _height: 50,
-                icon,
-                title,
-                toolTip,
-                ignoreClick,
-                dropAction: "copy",
-                onDragStart: drag ? ScriptField.MakeFunction(drag) : undefined,
-                onClick: click ? ScriptField.MakeScript(click) : undefined,
-                ischecked: ischecked ? ComputedField.MakeFunction(ischecked) : undefined,
-                activeInkPen,
-                backgroundColor,
-                removeDropProperties: new List<string>(["dropAction"]),
-                dragFactory,
-            }));
-
-        if (dragCreatorSet === undefined) {
-            doc.myItemCreators = new PrefetchProxy(Docs.Create.MasonryDocument(creatorBtns, {
-                title: "Basic Item Creators",
-                hidden: ComputedField.MakeFunction("self.target.noviceMode") as any,
-                _showTitle: "title", _xMargin: 0,
-                _autoHeight: true, _width: 500, _columnWidth: 35, ignoreClick: true, lockedPosition: true, _chromeStatus: "disabled",
-                dropConverter: ScriptField.MakeScript("convertToButtons(dragData)", { dragData: DragManager.DocumentDragData.name }),
-            }));
-        } else {
-            creatorBtns.forEach(nb => Doc.AddDocToList(doc.myItemCreators as Doc, "data", nb));
-        }
-        return doc.myItemCreators as Doc;
-    }
-
     static menuBtnDescriptions(): {
         title: string, icon: string, click: string,
     }[] {
@@ -764,13 +718,12 @@ export class CurrentUserUtils {
     static async setupToolsBtnPanel(doc: Doc) {
         // setup a masonry view of all he creators
         const creatorBtns = await CurrentUserUtils.setupCreatorButtons(doc);
-        const devBtns = await CurrentUserUtils.setupDevCreatorButtons(doc);
         const templateBtns = CurrentUserUtils.setupUserTemplateButtons(doc);
 
         doc["tabs-button-tools"] = undefined;
 
         if (doc.myCreators === undefined) {
-            doc.myCreators = new PrefetchProxy(Docs.Create.StackingDocument([creatorBtns, devBtns, templateBtns], {
+            doc.myCreators = new PrefetchProxy(Docs.Create.StackingDocument([creatorBtns, templateBtns], {
                 title: "all Creators", _yMargin: 0, _autoHeight: true, _xMargin: 0,
                 _width: 500, ignoreClick: true, lockedPosition: true, _chromeStatus: "disabled",
             }));
-- 
cgit v1.2.3-70-g09d2


From 362eb4d830c23a40c0813e7aae21e6bf6c5292b3 Mon Sep 17 00:00:00 2001
From: anika-ahluwalia <anika.ahluwalia@gmail.com>
Date: Fri, 7 Aug 2020 11:09:51 -0500
Subject: merge fix

---
 src/client/util/CurrentUserUtils.ts | 107 +++++++++---------------------------
 1 file changed, 25 insertions(+), 82 deletions(-)

(limited to 'src/client/util')

diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index ccd0b4ef3..c205acb99 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -426,85 +426,30 @@ export class CurrentUserUtils {
         if (doc.activeMobileMenu === undefined) {
             this.setupActiveMobileMenu(doc);
         }
-
-        // { title: "Drag an instance of the device collection", title: "Buxton", icon: "globe-asia", ignoreClick: true, drag: 'Docs.Create.Buxton()' },
-        // { title: "use pen", icon: "pen-nib", click: 'activatePen(this.activeInkPen = sameDocs(this.activeInkPen, this) ? undefined : this)', backgroundColor: "blue", ischecked: `sameDocs(this.activeInkPen,  this)`, activeInkPen: doc },
-        // { title: "use highlighter", icon: "highlighter", click: 'activateBrush(this.activeInkPen = sameDocs(this.activeInkPen, this) ? undefined : this,20,this.backgroundColor)', backgroundColor: "yellow", ischecked: `sameDocs(this.activeInkPen, this)`, activeInkPen: doc },
-        // { title: "use stamp", icon: "stamp", click: 'activateStamp(this.activeInkPen = sameDocs(this.activeInkPen, this) ? undefined : this)', backgroundColor: "orange", ischecked: `sameDocs(this.activeInkPen, this)`, activeInkPen: doc },
-        // { title: "use eraser", icon: "eraser", click: 'activateEraser(this.activeInkPen = sameDocs(this.activeInkPen, this) ? undefined : this);', ischecked: `sameDocs(this.activeInkPen, this)`, backgroundColor: "pink", activeInkPen: doc },
-        // { title: "use drag", icon: "mouse-pointer", click: 'deactivateInk();this.activeInkPen = this;', ischecked: `sameDocs(this.activeInkPen, this)`, backgroundColor: "white", activeInkPen: doc },
-        // { title: "Drag an import folder", title: "Load", icon: "cloud-upload-alt", ignoreClick: true, drag: 'Docs.Create.DirectoryImportDocument({ title: "Directory Import", _width: 400, _height: 400 })' },
-        //  { title: "Drag a webcam", title: "Cam", icon: "video", ignoreClick: true, drag: 'Docs.Create.WebCamDocument("", { _width: 400, _height: 400, title: "a test cam" })' },
-
-        const collection = {
-            toolTip: "Drag a collection", title: "Col",
-            icon: "folder", click: 'openOnRight(getCopy(this.dragFactory, true))',
-            drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyCollection as Doc
-        };
-        const web = {
-            toolTip: "Drag a web page", title: "Web",
-            icon: "globe-asia", click: 'openOnRight(getCopy(this.dragFactory, true))',
-            drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyWebpage as Doc
-        };
-        const cat = {
-            toolTip: "Drag a cat image", title: "Image",
-            icon: "cat", click: 'openOnRight(getCopy(this.dragFactory, true))',
-            drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyImage as Doc
-        };
-        const compare = {
-            toolTip: "Drag a comparison box", title: "Compare",
-            icon: "columns", click: 'openOnRight(getCopy(this.dragFactory, true))',
-            drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyComparison as Doc
-        }
-        const screen = {
-            toolTip: "Drag a screengrabber", title: "Grab",
-            icon: "photo-video", click: 'openOnRight(getCopy(this.dragFactory, true))',
-            drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyScreenshot as Doc,
-        };
-        const audio = {
-            toolTip: "Drag a audio recorder", title: "Audio",
-            icon: "microphone", click: 'openOnRight(getCopy(this.dragFactory, true))',
-            drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyAudio as Doc
-        };
-        const button = {
-            toolTip: "Drag a button", title: "Button",
-            icon: "bolt", click: 'openOnRight(getCopy(this.dragFactory, true))',
-            drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyButton as Doc
-        };
-        const pres = {
-            toolTip: "Drag a presentation view", title: "Pres", icon: "tv",
-            click: 'openOnRight(Doc.UserDoc().activePresentation = getCopy(this.dragFactory, true))',
-            drag: `Doc.UserDoc().activePresentation = getCopy(this.dragFactory, true)`,
-            dragFactory: doc.emptyPresentation as Doc
-        };
-        const search = {
-            toolTip: "Drag a search box", title: "Query", icon: "search",
-            click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)',
-            dragFactory: doc.emptySearch as Doc,
-        };
-        const script = {
-            toolTip: "Drag a scripting box", title: "Script",
-            icon: "terminal", click: 'openOnRight(getCopy(this.dragFactory, true))',
-            drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyScript as Doc,
-        };
-        const mobile = {
-            toolTip: "Drag a mobile view", title: "Phone",
-            icon: "mobile", click: 'openOnRight(Doc.UserDoc().activeMobileMenu)',
-            drag: 'this.dragFactory', dragFactory: doc.activeMobileMenu as Doc,
-        };
-        const preview = {
-            toolTip: "Drag a document previewer", title: "Prev",
-            icon: "expand", click: 'openOnRight(getCopy(this.dragFactory, true))',
-            drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyDocHolder as Doc,
-        };
-        const repl = {
-            toolTip: "Toggle a Calculator REPL", title: "repl",
-            icon: "calculator",
-            click: 'addOverlayWindow("ScriptingRepl", { x: 300, y: 100, width: 200, height: 200, title: "Scripting REPL" })',
-        };
-
-        // novice : [collection, web, compare, audio, button, pres] 
-        return [collection, web, compare, screen, audio, button, pres, search, script, preview, repl];
+        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, 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, 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, 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, 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 })' },
+            { toolTip: "Drag a mobile view", title: "Phone", icon: "mobile", click: 'openOnRight(Doc.UserDoc().activeMobileMenu)', drag: 'this.dragFactory', dragFactory: doc.activeMobileMenu as Doc },
+            // { title: "Drag an instance of the device collection", title: "Buxton", icon: "globe-asia", ignoreClick: true, drag: 'Docs.Create.Buxton()' },
+            // { title: "use pen", icon: "pen-nib", click: 'activatePen(this.activeInkPen = sameDocs(this.activeInkPen, this) ? undefined : this)', backgroundColor: "blue", ischecked: `sameDocs(this.activeInkPen,  this)`, activeInkPen: doc },
+            // { title: "use highlighter", icon: "highlighter", click: 'activateBrush(this.activeInkPen = sameDocs(this.activeInkPen, this) ? undefined : this,20,this.backgroundColor)', backgroundColor: "yellow", ischecked: `sameDocs(this.activeInkPen, this)`, activeInkPen: doc },
+            // { title: "use stamp", icon: "stamp", click: 'activateStamp(this.activeInkPen = sameDocs(this.activeInkPen, this) ? undefined : this)', backgroundColor: "orange", ischecked: `sameDocs(this.activeInkPen, this)`, activeInkPen: doc },
+            // { title: "use eraser", icon: "eraser", click: 'activateEraser(this.activeInkPen = sameDocs(this.activeInkPen, this) ? undefined : this);', ischecked: `sameDocs(this.activeInkPen, this)`, backgroundColor: "pink", activeInkPen: doc },
+            // { title: "use drag", icon: "mouse-pointer", click: 'deactivateInk();this.activeInkPen = this;', ischecked: `sameDocs(this.activeInkPen, this)`, backgroundColor: "white", activeInkPen: doc },
+            { toolTip: "Drag a document previewer", title: "Prev", icon: "expand", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyDocHolder as Doc },
+            { toolTip: "Toggle a Calculator REPL", title: "repl", icon: "calculator", click: 'addOverlayWindow("ScriptingRepl", { x: 300, y: 100, width: 200, height: 200, title: "Scripting REPL" })' },
+        ];
 
     }
 
@@ -540,9 +485,7 @@ export class CurrentUserUtils {
 
         if (dragCreatorSet === undefined) {
             doc.myItemCreators = new PrefetchProxy(Docs.Create.MasonryDocument(creatorBtns, {
-                title: "Basic Item Creators",
-                hidden: ComputedField.MakeFunction("!self.target.noviceMode") as any,
-                _showTitle: "title", _xMargin: 0,
+                title: "Basic Item Creators", _showTitle: "title", _xMargin: 0,
                 _autoHeight: true, _width: 500, _columnWidth: 35, ignoreClick: true, lockedPosition: true, _chromeStatus: "disabled",
                 dropConverter: ScriptField.MakeScript("convertToButtons(dragData)", { dragData: DragManager.DocumentDragData.name }),
             }));
-- 
cgit v1.2.3-70-g09d2


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

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

(limited to 'src/client/util')

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


From 47e3170534393ab9e4140c18b32110f83753d817 Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Fri, 7 Aug 2020 23:24:35 -0400
Subject: removed greyed out submit password button.

---
 src/client/util/SettingsManager.scss | 23 -----------------------
 1 file changed, 23 deletions(-)

(limited to 'src/client/util')

diff --git a/src/client/util/SettingsManager.scss b/src/client/util/SettingsManager.scss
index 22473e836..ca27cfa3c 100644
--- a/src/client/util/SettingsManager.scss
+++ b/src/client/util/SettingsManager.scss
@@ -39,29 +39,6 @@
     left: 235;
 }
 
-.grey-submit {
-    width: 71.1875px;
-    align-self: center;
-    background: #75787c;
-    outline: none;
-    border-radius: 5px;
-    border: 0px;
-    color: #fcfbf7;
-    text-transform: uppercase;
-    letter-spacing: 2px;
-    font-size: 75%;
-    padding: 10px;
-    transition: transform 0.2s;
-    margin: 2px;
-    margin-left: 85px;
-    height: 32px;
-
-    &:hover {
-        cursor: not-allowed;
-    }
-
-}
-
 .settings-section {
     display: flex;
     border-bottom: 1px solid grey;
-- 
cgit v1.2.3-70-g09d2


From 9a2221a65c56841a9d9cba57a1b260999a5f9f4d Mon Sep 17 00:00:00 2001
From: anika-ahluwalia <anika.ahluwalia@gmail.com>
Date: Sat, 8 Aug 2020 00:15:35 -0500
Subject: fixing multiple undo bugs

---
 src/client/util/CurrentUserUtils.ts                |  2 +-
 src/client/util/SettingsManager.tsx                |  2 +-
 .../collectionFreeForm/MarqueeOptionsMenu.tsx      | 62 ++++++++++++----------
 .../collections/collectionFreeForm/MarqueeView.tsx |  3 +-
 4 files changed, 38 insertions(+), 31 deletions(-)

(limited to 'src/client/util')

diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index c205acb99..45d8da911 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -436,7 +436,7 @@ export class CurrentUserUtils {
             { 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, noviceMode: true },
+            { toolTip: "Drag a presentation view", title: "Present", 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 })' },
diff --git a/src/client/util/SettingsManager.tsx b/src/client/util/SettingsManager.tsx
index 1a419b7c6..61112c694 100644
--- a/src/client/util/SettingsManager.tsx
+++ b/src/client/util/SettingsManager.tsx
@@ -138,7 +138,7 @@ export default class SettingsManager extends React.Component<{}> {
         Doc.UserDoc().fontSize = e.currentTarget.value;
     }
 
-    @action @undoBatch
+    @undoBatch @action
     switchColor = (color: ColorState) => {
         const val = String(color.hex);
         Doc.UserDoc().defaultColor = val;
diff --git a/src/client/views/collections/collectionFreeForm/MarqueeOptionsMenu.tsx b/src/client/views/collections/collectionFreeForm/MarqueeOptionsMenu.tsx
index db4b674b5..d27ca7c3a 100644
--- a/src/client/views/collections/collectionFreeForm/MarqueeOptionsMenu.tsx
+++ b/src/client/views/collections/collectionFreeForm/MarqueeOptionsMenu.tsx
@@ -3,6 +3,8 @@ import AntimodeMenu from "../../AntimodeMenu";
 import { observer } from "mobx-react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { unimplementedFunction } from "../../../../Utils";
+import { undoBatch } from "../../../util/UndoManager";
+import { Tooltip } from "@material-ui/core";
 
 @observer
 export default class MarqueeOptionsMenu extends AntimodeMenu {
@@ -23,34 +25,38 @@ export default class MarqueeOptionsMenu extends AntimodeMenu {
 
     render() {
         const buttons = [
-            <button
-                className="antimodeMenu-button"
-                title="Create a Collection"
-                key="group"
-                onPointerDown={this.createCollection}>
-                <FontAwesomeIcon icon="object-group" size="lg" />
-            </button>,
-            <button
-                className="antimodeMenu-button"
-                title="Summarize Documents"
-                key="summarize"
-                onPointerDown={this.summarize}>
-                <FontAwesomeIcon icon="compress-arrows-alt" size="lg" />
-            </button>,
-            <button
-                className="antimodeMenu-button"
-                title="Delete Documents"
-                key="delete"
-                onPointerDown={this.delete}>
-                <FontAwesomeIcon icon="trash-alt" size="lg" />
-            </button>,
-            <button
-                className="antimodeMenu-button"
-                title="Change to Text"
-                key="inkToText"
-                onPointerDown={this.inkToText}>
-                <FontAwesomeIcon icon="font" size="lg" />
-            </button>,
+            <Tooltip title={<><div className="dash-tooltip">Create a Collection</div></>} placement="bottom">
+                <button
+                    className="antimodeMenu-button"
+                    key="group"
+                    onPointerDown={this.createCollection}>
+                    <FontAwesomeIcon icon="object-group" size="lg" />
+                </button>
+            </Tooltip>,
+            <Tooltip title={<><div className="dash-tooltip">Summarize Documents</div></>} placement="bottom">
+                <button
+                    className="antimodeMenu-button"
+                    key="summarize"
+                    onPointerDown={this.summarize}>
+                    <FontAwesomeIcon icon="compress-arrows-alt" size="lg" />
+                </button>
+            </Tooltip>,
+            <Tooltip title={<><div className="dash-tooltip">Delete Documents</div></>} placement="bottom">
+                <button
+                    className="antimodeMenu-button"
+                    key="delete"
+                    onPointerDown={this.delete}>
+                    <FontAwesomeIcon icon="trash-alt" size="lg" />
+                </button>
+            </Tooltip>,
+            <Tooltip title={<><div className="dash-tooltip">Change to Text</div></>} placement="bottom">
+                <button
+                    className="antimodeMenu-button"
+                    key="inkToText"
+                    onPointerDown={this.inkToText}>
+                    <FontAwesomeIcon icon="font" size="lg" />
+                </button>
+            </Tooltip>,
         ];
         return this.getElement(buttons);
     }
diff --git a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
index 88fe03efd..55614a8c2 100644
--- a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
+++ b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
@@ -390,8 +390,9 @@ export class MarqueeView extends React.Component<SubCollectionViewProps & Marque
         this.hideMarquee();
     }
 
-    @action
+    @undoBatch @action
     collection = (e: KeyboardEvent | React.PointerEvent | undefined) => {
+        console.log("CREATE");
         const bounds = this.Bounds;
         const selected = this.marqueeSelect(false);
         if (e instanceof KeyboardEvent ? e.key === "c" : true) {
-- 
cgit v1.2.3-70-g09d2


From 1733759b776f0596c3a8561d2c735a4b7c7d54d3 Mon Sep 17 00:00:00 2001
From: Melissa Zhang <mzhang19096@gmail.com>
Date: Sat, 8 Aug 2020 15:37:26 -0700
Subject: move HypothesisUtils.ts to Utils folder

---
 src/client/apis/hypothesis/HypothesisUtils.ts      | 170 ---------------------
 src/client/util/HypothesisUtils.ts                 | 170 +++++++++++++++++++++
 src/client/views/MainView.tsx                      |   2 +-
 src/client/views/collections/CollectionSubView.tsx |   2 +-
 src/client/views/linking/LinkMenuItem.tsx          |   2 +-
 src/client/views/nodes/DocumentLinksButton.tsx     |   2 +-
 6 files changed, 174 insertions(+), 174 deletions(-)
 delete mode 100644 src/client/apis/hypothesis/HypothesisUtils.ts
 create mode 100644 src/client/util/HypothesisUtils.ts

(limited to 'src/client/util')

diff --git a/src/client/apis/hypothesis/HypothesisUtils.ts b/src/client/apis/hypothesis/HypothesisUtils.ts
deleted file mode 100644
index 2a192c8e1..000000000
--- a/src/client/apis/hypothesis/HypothesisUtils.ts
+++ /dev/null
@@ -1,170 +0,0 @@
-import { StrCast, Cast } from "../../../fields/Types";
-import { SearchUtil } from "../../util/SearchUtil";
-import { action, runInAction } from "mobx";
-import { Doc, Opt } from "../../../fields/Doc";
-import { DocumentType } from "../../documents/DocumentTypes";
-import { Docs } from "../../documents/Documents";
-import { SelectionManager } from "../../util/SelectionManager";
-import { WebField } from "../../../fields/URLField";
-import { DocumentManager } from "../../util/DocumentManager";
-import { DocumentLinksButton } from "../../views/nodes/DocumentLinksButton";
-import { simulateMouseClick, Utils } from "../../../Utils";
-import { DocumentView } from "../../views/nodes/DocumentView";
-import { Id } from "../../../fields/FieldSymbols";
-
-export namespace Hypothesis {
-
-    /**
-     * Retrieve a WebDocument with the given url, prioritizing results that are on screen.  
-     * If none exist, create and return a new WebDocument.
-     */
-    export const getSourceWebDoc = async (uri: string) => {
-        const result = await findWebDoc(uri);
-        console.log(result ? "existing doc found" : "existing doc NOT found");
-        return result || Docs.Create.WebDocument(uri, { title: uri, _nativeWidth: 850, _nativeHeight: 962, _width: 400, UseCors: true }); // create and return a new Web doc with given uri if no matching docs are found
-    };
-
-
-    /**
-     * Search for a WebDocument whose url field matches the given uri, return undefined if not found
-     */
-    export const findWebDoc = async (uri: string) => {
-        const currentDoc = SelectionManager.SelectedDocuments().length && SelectionManager.SelectedDocuments()[0].props.Document;
-        if (currentDoc && Cast(currentDoc.data, WebField)?.url.href === uri) return currentDoc; // always check first whether the currently selected doc is the annotation's source, only use Search otherwise
-
-        const results: Doc[] = [];
-        await SearchUtil.Search("web", true).then(action(async (res: SearchUtil.DocSearchResult) => {
-            const docs = await Promise.all(res.docs.map(async doc => (await Cast(doc.extendsDoc, Doc)) || doc));
-            const filteredDocs = docs.filter(doc =>
-                doc.author === Doc.CurrentUserEmail && doc.type === DocumentType.WEB && doc.data
-            );
-            filteredDocs.forEach(doc => {
-                uri === Cast(doc.data, WebField)?.url.href && results.push(doc); // TODO check visited sites history? 
-            });
-        }));
-
-        const onScreenResults = results.filter(doc => DocumentManager.Instance.getFirstDocumentView(doc));
-        return onScreenResults.length ? onScreenResults[0] : (results.length ? results[0] : undefined); // prioritize results that are currently on the screen
-    };
-
-    /**
-     * listen for event from Hypothes.is plugin to link an annotation to Dash
-     */
-    export const linkListener = async (e: any) => {
-        const annotationId: string = e.detail.id;
-        const annotationUri: string = StrCast(e.detail.uri).split("#annotations:")[0]; // clean hypothes.is URLs that reference a specific annotation 
-        const sourceDoc: Doc = await getSourceWebDoc(annotationUri);
-
-        if (!DocumentLinksButton.StartLink || sourceDoc === DocumentLinksButton.StartLink) { // start new link if there were none already started, or if the old startLink came from the same web document (prevent links to itself)
-            runInAction(() => {
-                DocumentLinksButton.AnnotationId = annotationId;
-                DocumentLinksButton.AnnotationUri = annotationUri;
-                DocumentLinksButton.StartLink = sourceDoc;
-            });
-        } else { // if a link has already been started, complete the link to sourceDoc
-            runInAction(() => {
-                DocumentLinksButton.AnnotationId = annotationId;
-                DocumentLinksButton.AnnotationUri = annotationUri;
-            });
-            const endLinkView = DocumentManager.Instance.getFirstDocumentView(sourceDoc);
-            const rect = document.body.getBoundingClientRect();
-            const x = rect.x + rect.width / 2;
-            const y = 250;
-            DocumentLinksButton.finishLinkClick(x, y, DocumentLinksButton.StartLink, sourceDoc, false, endLinkView);
-        }
-    };
-
-    /**
-     *  Send message to Hypothes.is client to edit an annotation to add a Dash hyperlink
-     */
-    export const makeLink = async (title: string, url: string, annotationId: string, annotationSourceDoc: Doc) => {
-        // if the annotation's source webpage isn't currently loaded in Dash, we're not able to access and edit the annotation from the client
-        // so we're loading the webpage and its annotations invisibly in a WebBox in MainView.tsx, until the editing is done
-        !DocumentManager.Instance.getFirstDocumentView(annotationSourceDoc) && runInAction(() => DocumentLinksButton.invisibleWebDoc = annotationSourceDoc);
-
-        var success = false;
-        const onSuccess = action(() => {
-            console.log("Edit success!!");
-            success = true;
-            clearTimeout(interval);
-            DocumentLinksButton.invisibleWebDoc = undefined;
-            document.removeEventListener("editSuccess", onSuccess);
-        });
-
-        const newHyperlink = `[${title}\n](${url})`;
-        const interval = setInterval(() => // keep trying to edit until annotations have loaded and editing is successful
-            !success && document.dispatchEvent(new CustomEvent<{ newHyperlink: string, id: string }>("addLink", {
-                detail: { newHyperlink: newHyperlink, id: annotationId },
-                bubbles: true
-            })), 300);
-
-        setTimeout(action(() => {
-            if (!success) {
-                clearInterval(interval);
-                DocumentLinksButton.invisibleWebDoc = undefined;
-            }
-        }), 10000); // give up if no success after 10s
-        document.addEventListener("editSuccess", onSuccess);
-    };
-
-    /**
-     * Send message Hypothes.is client request to edit an annotation to find and delete the target Dash hyperlink
-     */
-    export const deleteLink = async (linkDoc: Doc, sourceDoc: Doc, destinationDoc: Doc) => {
-        if (Cast(destinationDoc.data, WebField)?.url.href !== StrCast(linkDoc.annotationUri)) return; // check that the destinationDoc is a WebDocument containing the target annotation
-
-        !DocumentManager.Instance.getFirstDocumentView(destinationDoc) && runInAction(() => DocumentLinksButton.invisibleWebDoc = destinationDoc); // see note in makeLink
-
-        var success = false;
-        const onSuccess = action(() => {
-            console.log("Edit success!");
-            success = true;
-            clearTimeout(interval);
-            DocumentLinksButton.invisibleWebDoc = undefined;
-            document.removeEventListener("editSuccess", onSuccess);
-        });
-
-        const annotationId = StrCast(linkDoc.annotationId);
-        const linkUrl = Utils.prepend("/doc/" + sourceDoc[Id]);
-        const interval = setInterval(() => {// keep trying to edit until annotations have loaded and editing is successful
-            !success && document.dispatchEvent(new CustomEvent<{ targetUrl: string, id: string }>("deleteLink", {
-                detail: { targetUrl: linkUrl, id: annotationId },
-                bubbles: true
-            }));
-        }, 300);
-
-        setTimeout(action(() => {
-            if (!success) {
-                clearInterval(interval);
-                DocumentLinksButton.invisibleWebDoc = undefined;
-            }
-        }), 10000); // give up if no success after 10s
-        document.addEventListener("editSuccess", onSuccess);
-    };
-
-    /**
-     *  Send message to Hypothes.is client to scroll to an annotation when it loads
-     */
-    export const scrollToAnnotation = (annotationId: string, target: Doc) => {
-        var success = false;
-        const onSuccess = () => {
-            console.log("Scroll success!!");
-            document.removeEventListener('scrollSuccess', onSuccess);
-            clearInterval(interval);
-            success = true;
-        };
-
-        const interval = setInterval(() => { // keep trying to scroll every 250ms until annotations have loaded and scrolling is successful
-            document.dispatchEvent(new CustomEvent('scrollToAnnotation', {
-                detail: annotationId,
-                bubbles: true
-            }));
-            const targetView: Opt<DocumentView> = DocumentManager.Instance.getFirstDocumentView(target);
-            const position = targetView?.props.ScreenToLocalTransform().inverse().transformPoint(0, 0);
-            targetView && position && simulateMouseClick(targetView.ContentDiv!, position[0], position[1], position[0], position[1], false);
-        }, 300);
-
-        document.addEventListener('scrollSuccess', onSuccess); // listen for success message from client
-        setTimeout(() => !success && clearInterval(interval), 10000); // give up if no success after 10s
-    };
-}
\ No newline at end of file
diff --git a/src/client/util/HypothesisUtils.ts b/src/client/util/HypothesisUtils.ts
new file mode 100644
index 000000000..9ede94e4b
--- /dev/null
+++ b/src/client/util/HypothesisUtils.ts
@@ -0,0 +1,170 @@
+import { StrCast, Cast } from "../../fields/Types";
+import { SearchUtil } from "./SearchUtil";
+import { action, runInAction } from "mobx";
+import { Doc, Opt } from "../../fields/Doc";
+import { DocumentType } from "../documents/DocumentTypes";
+import { Docs } from "../documents/Documents";
+import { SelectionManager } from "./SelectionManager";
+import { WebField } from "../../fields/URLField";
+import { DocumentManager } from "./DocumentManager";
+import { DocumentLinksButton } from "../views/nodes/DocumentLinksButton";
+import { simulateMouseClick, Utils } from "../../Utils";
+import { DocumentView } from "../views/nodes/DocumentView";
+import { Id } from "../../fields/FieldSymbols";
+
+export namespace Hypothesis {
+
+    /**
+     * Retrieve a WebDocument with the given url, prioritizing results that are on screen.  
+     * If none exist, create and return a new WebDocument.
+     */
+    export const getSourceWebDoc = async (uri: string) => {
+        const result = await findWebDoc(uri);
+        console.log(result ? "existing doc found" : "existing doc NOT found");
+        return result || Docs.Create.WebDocument(uri, { title: uri, _nativeWidth: 850, _nativeHeight: 962, _width: 400, UseCors: true }); // create and return a new Web doc with given uri if no matching docs are found
+    };
+
+
+    /**
+     * Search for a WebDocument whose url field matches the given uri, return undefined if not found
+     */
+    export const findWebDoc = async (uri: string) => {
+        const currentDoc = SelectionManager.SelectedDocuments().length && SelectionManager.SelectedDocuments()[0].props.Document;
+        if (currentDoc && Cast(currentDoc.data, WebField)?.url.href === uri) return currentDoc; // always check first whether the currently selected doc is the annotation's source, only use Search otherwise
+
+        const results: Doc[] = [];
+        await SearchUtil.Search("web", true).then(action(async (res: SearchUtil.DocSearchResult) => {
+            const docs = await Promise.all(res.docs.map(async doc => (await Cast(doc.extendsDoc, Doc)) || doc));
+            const filteredDocs = docs.filter(doc =>
+                doc.author === Doc.CurrentUserEmail && doc.type === DocumentType.WEB && doc.data
+            );
+            filteredDocs.forEach(doc => {
+                uri === Cast(doc.data, WebField)?.url.href && results.push(doc); // TODO check visited sites history? 
+            });
+        }));
+
+        const onScreenResults = results.filter(doc => DocumentManager.Instance.getFirstDocumentView(doc));
+        return onScreenResults.length ? onScreenResults[0] : (results.length ? results[0] : undefined); // prioritize results that are currently on the screen
+    };
+
+    /**
+     * listen for event from Hypothes.is plugin to link an annotation to Dash
+     */
+    export const linkListener = async (e: any) => {
+        const annotationId: string = e.detail.id;
+        const annotationUri: string = StrCast(e.detail.uri).split("#annotations:")[0]; // clean hypothes.is URLs that reference a specific annotation 
+        const sourceDoc: Doc = await getSourceWebDoc(annotationUri);
+
+        if (!DocumentLinksButton.StartLink || sourceDoc === DocumentLinksButton.StartLink) { // start new link if there were none already started, or if the old startLink came from the same web document (prevent links to itself)
+            runInAction(() => {
+                DocumentLinksButton.AnnotationId = annotationId;
+                DocumentLinksButton.AnnotationUri = annotationUri;
+                DocumentLinksButton.StartLink = sourceDoc;
+            });
+        } else { // if a link has already been started, complete the link to sourceDoc
+            runInAction(() => {
+                DocumentLinksButton.AnnotationId = annotationId;
+                DocumentLinksButton.AnnotationUri = annotationUri;
+            });
+            const endLinkView = DocumentManager.Instance.getFirstDocumentView(sourceDoc);
+            const rect = document.body.getBoundingClientRect();
+            const x = rect.x + rect.width / 2;
+            const y = 250;
+            DocumentLinksButton.finishLinkClick(x, y, DocumentLinksButton.StartLink, sourceDoc, false, endLinkView);
+        }
+    };
+
+    /**
+     *  Send message to Hypothes.is client to edit an annotation to add a Dash hyperlink
+     */
+    export const makeLink = async (title: string, url: string, annotationId: string, annotationSourceDoc: Doc) => {
+        // if the annotation's source webpage isn't currently loaded in Dash, we're not able to access and edit the annotation from the client
+        // so we're loading the webpage and its annotations invisibly in a WebBox in MainView.tsx, until the editing is done
+        !DocumentManager.Instance.getFirstDocumentView(annotationSourceDoc) && runInAction(() => DocumentLinksButton.invisibleWebDoc = annotationSourceDoc);
+
+        var success = false;
+        const onSuccess = action(() => {
+            console.log("Edit success!!");
+            success = true;
+            clearTimeout(interval);
+            DocumentLinksButton.invisibleWebDoc = undefined;
+            document.removeEventListener("editSuccess", onSuccess);
+        });
+
+        const newHyperlink = `[${title}\n](${url})`;
+        const interval = setInterval(() => // keep trying to edit until annotations have loaded and editing is successful
+            !success && document.dispatchEvent(new CustomEvent<{ newHyperlink: string, id: string }>("addLink", {
+                detail: { newHyperlink: newHyperlink, id: annotationId },
+                bubbles: true
+            })), 300);
+
+        setTimeout(action(() => {
+            if (!success) {
+                clearInterval(interval);
+                DocumentLinksButton.invisibleWebDoc = undefined;
+            }
+        }), 10000); // give up if no success after 10s
+        document.addEventListener("editSuccess", onSuccess);
+    };
+
+    /**
+     * Send message Hypothes.is client request to edit an annotation to find and delete the target Dash hyperlink
+     */
+    export const deleteLink = async (linkDoc: Doc, sourceDoc: Doc, destinationDoc: Doc) => {
+        if (Cast(destinationDoc.data, WebField)?.url.href !== StrCast(linkDoc.annotationUri)) return; // check that the destinationDoc is a WebDocument containing the target annotation
+
+        !DocumentManager.Instance.getFirstDocumentView(destinationDoc) && runInAction(() => DocumentLinksButton.invisibleWebDoc = destinationDoc); // see note in makeLink
+
+        var success = false;
+        const onSuccess = action(() => {
+            console.log("Edit success!");
+            success = true;
+            clearTimeout(interval);
+            DocumentLinksButton.invisibleWebDoc = undefined;
+            document.removeEventListener("editSuccess", onSuccess);
+        });
+
+        const annotationId = StrCast(linkDoc.annotationId);
+        const linkUrl = Utils.prepend("/doc/" + sourceDoc[Id]);
+        const interval = setInterval(() => {// keep trying to edit until annotations have loaded and editing is successful
+            !success && document.dispatchEvent(new CustomEvent<{ targetUrl: string, id: string }>("deleteLink", {
+                detail: { targetUrl: linkUrl, id: annotationId },
+                bubbles: true
+            }));
+        }, 300);
+
+        setTimeout(action(() => {
+            if (!success) {
+                clearInterval(interval);
+                DocumentLinksButton.invisibleWebDoc = undefined;
+            }
+        }), 10000); // give up if no success after 10s
+        document.addEventListener("editSuccess", onSuccess);
+    };
+
+    /**
+     *  Send message to Hypothes.is client to scroll to an annotation when it loads
+     */
+    export const scrollToAnnotation = (annotationId: string, target: Doc) => {
+        var success = false;
+        const onSuccess = () => {
+            console.log("Scroll success!!");
+            document.removeEventListener('scrollSuccess', onSuccess);
+            clearInterval(interval);
+            success = true;
+        };
+
+        const interval = setInterval(() => { // keep trying to scroll every 250ms until annotations have loaded and scrolling is successful
+            document.dispatchEvent(new CustomEvent('scrollToAnnotation', {
+                detail: annotationId,
+                bubbles: true
+            }));
+            const targetView: Opt<DocumentView> = DocumentManager.Instance.getFirstDocumentView(target);
+            const position = targetView?.props.ScreenToLocalTransform().inverse().transformPoint(0, 0);
+            targetView && position && simulateMouseClick(targetView.ContentDiv!, position[0], position[1], position[0], position[1], false);
+        }, 300);
+
+        document.addEventListener('scrollSuccess', onSuccess); // listen for success message from client
+        setTimeout(() => !success && clearInterval(interval), 10000); // give up if no success after 10s
+    };
+}
\ No newline at end of file
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index 8f9b9e0a0..f5dccd567 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -58,7 +58,7 @@ import { TaskCompletionBox } from './nodes/TaskCompletedBox';
 import { OverlayView } from './OverlayView';
 import PDFMenu from './pdf/PDFMenu';
 import { PreviewCursor } from './PreviewCursor';
-import { Hypothesis } from '../apis/hypothesis/HypothesisUtils';
+import { Hypothesis } from '../util/HypothesisUtils';
 import { undoBatch } from '../util/UndoManager';
 import { WebBox } from './nodes/WebBox';
 import * as ReactDOM from 'react-dom';
diff --git a/src/client/views/collections/CollectionSubView.tsx b/src/client/views/collections/CollectionSubView.tsx
index e045b351f..72aece284 100644
--- a/src/client/views/collections/CollectionSubView.tsx
+++ b/src/client/views/collections/CollectionSubView.tsx
@@ -506,5 +506,5 @@ import { CollectionView, CollectionViewType } from "./CollectionView";
 import { SelectionManager } from "../../util/SelectionManager";
 import { OverlayView } from "../OverlayView";
 import { setTimeout } from "timers";
-import { Hypothesis } from "../../apis/hypothesis/HypothesisUtils";
+import { Hypothesis } from "../../util/HypothesisUtils";
 
diff --git a/src/client/views/linking/LinkMenuItem.tsx b/src/client/views/linking/LinkMenuItem.tsx
index de9e25f48..b95fccf2a 100644
--- a/src/client/views/linking/LinkMenuItem.tsx
+++ b/src/client/views/linking/LinkMenuItem.tsx
@@ -15,7 +15,7 @@ import { setupMoveUpEvents, emptyFunction, Utils, simulateMouseClick } from '../
 import { DocumentView } from '../nodes/DocumentView';
 import { DocumentLinksButton } from '../nodes/DocumentLinksButton';
 import { LinkDocPreview } from '../nodes/LinkDocPreview';
-import { Hypothesis } from '../../apis/hypothesis/HypothesisUtils';
+import { Hypothesis } from '../../util/HypothesisUtils';
 import { Id } from '../../../fields/FieldSymbols';
 import { Tooltip } from '@material-ui/core';
 import { DocumentType } from '../../documents/DocumentTypes';
diff --git a/src/client/views/nodes/DocumentLinksButton.tsx b/src/client/views/nodes/DocumentLinksButton.tsx
index 1e6f663d3..31dd33fc1 100644
--- a/src/client/views/nodes/DocumentLinksButton.tsx
+++ b/src/client/views/nodes/DocumentLinksButton.tsx
@@ -13,7 +13,7 @@ import { undoBatch, UndoManager } from "../../util/UndoManager";
 import { DocumentView } from "./DocumentView";
 import { StrCast, Cast } from "../../../fields/Types";
 import { LinkDescriptionPopup } from "./LinkDescriptionPopup";
-import { Hypothesis } from "../../apis/hypothesis/HypothesisUtils";
+import { Hypothesis } from "../../util/HypothesisUtils";
 import { Id } from "../../../fields/FieldSymbols";
 import { TaskCompletionBox } from "./TaskCompletedBox";
 import React = require("react");
-- 
cgit v1.2.3-70-g09d2


From dc0ffc050b5b11e345245927f3d8a813937e588d Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Sun, 9 Aug 2020 22:48:26 -0400
Subject: starting to fix link following behavior to audio regions.

---
 src/client/util/DocumentManager.ts      |   2 +-
 src/client/views/linking/LinkEditor.tsx |   6 +-
 src/client/views/nodes/AudioBox.scss    |   5 +
 src/client/views/nodes/AudioBox.tsx     | 256 ++++++++++++++++----------------
 4 files changed, 140 insertions(+), 129 deletions(-)

(limited to 'src/client/util')

diff --git a/src/client/util/DocumentManager.ts b/src/client/util/DocumentManager.ts
index 523dbfca0..bd57e7f48 100644
--- a/src/client/util/DocumentManager.ts
+++ b/src/client/util/DocumentManager.ts
@@ -152,7 +152,7 @@ export class DocumentManager {
             const first = getFirstDocView(annotatedDoc);
             if (first) {
                 annotatedDoc = first.props.Document;
-                docView?.props.focus(annotatedDoc, false);
+                first.props.focus(annotatedDoc, false);
             }
         }
         if (docView) {  // we have a docView already and aren't forced to create a new one ... just focus on the document.  TODO move into view if necessary otherwise just highlight?
diff --git a/src/client/views/linking/LinkEditor.tsx b/src/client/views/linking/LinkEditor.tsx
index 5832a2181..3ef391a5d 100644
--- a/src/client/views/linking/LinkEditor.tsx
+++ b/src/client/views/linking/LinkEditor.tsx
@@ -355,11 +355,11 @@ export class LinkEditor extends React.Component<LinkEditorProps> {
         this.openDropdown = !this.openDropdown;
     }
 
-    @undoBatch @action
-    changeFollowBehavior = (follow: string) => {
+    @undoBatch
+    changeFollowBehavior = action((follow: string) => {
         this.openDropdown = false;
         Doc.GetProto(this.props.linkDoc).followLinkLocation = follow;
-    }
+    })
 
     @computed
     get followingDropdown() {
diff --git a/src/client/views/nodes/AudioBox.scss b/src/client/views/nodes/AudioBox.scss
index 0d787d9af..c80e3af24 100644
--- a/src/client/views/nodes/AudioBox.scss
+++ b/src/client/views/nodes/AudioBox.scss
@@ -8,6 +8,11 @@
     position: relative;
     cursor: default;
 
+    .audiobox-inner {
+        width:100%;
+        height: 100%;
+    }
+
     .audiobox-buttons {
         display: flex;
         width: 100%;
diff --git a/src/client/views/nodes/AudioBox.tsx b/src/client/views/nodes/AudioBox.tsx
index 709422f35..0ea624edf 100644
--- a/src/client/views/nodes/AudioBox.tsx
+++ b/src/client/views/nodes/AudioBox.tsx
@@ -128,37 +128,41 @@ export class AudioBox extends ViewBoxAnnotatableComponent<FieldViewProps, AudioD
         // for play when link is selected
         this._reactionDisposer = reaction(() => SelectionManager.SelectedDocuments(),
             selected => {
-                const sel = selected.length ? selected[0].props.Document : undefined;
-                let link;
-                if (sel) {
-                    // for determining if the link is created after recording (since it will use linkTime rather than creation date)
-                    DocListCast(this.dataDoc.links).map(l => {
-                        let { la1, la2, linkTime } = this.getLinkData(l);
-                        if (la1 === sel || la2 === sel) { // if the selected document is linked to this audio 
-                            let endTime;
-                            if (la2.audioStart) linkTime = NumCast(la2.audioStart);
-                            if (la1.audioStart) linkTime = NumCast(la1.audioStart);
-
-                            if (la1.audioEnd) endTime = NumCast(la1.audioEnd);
-                            if (la2.audioEnd) endTime = NumCast(la2.audioEnd);
-
-                            if (linkTime) {
-                                link = true;
-                                this.layoutDoc.playOnSelect && this.recordingStart && sel && !Doc.AreProtosEqual(sel, this.props.Document) && (endTime ? this.playFrom(linkTime, endTime) : this.playFrom(linkTime));
-                            }
-                        }
-                    });
-                }
-
-                // for links created during recording 
-                if (!link) {
-                    this.layoutDoc.playOnSelect && this.recordingStart && sel && sel.creationDate && !Doc.AreProtosEqual(sel, this.props.Document) && this.playFromTime(DateCast(sel.creationDate).date.getTime());
-                    this.layoutDoc.playOnSelect && this.recordingStart && !sel && this.pause();
+                if (this.layoutDoc.playOnSelect) {
+                    const sel = selected.length ? selected[0].props.Document : undefined;
+                    const link = sel && DocListCast(this.dataDoc.links).forEach(l => (l.anchor1 === sel || l.anchor2 === sel) && this.playLink(l), false);
+                    // for links created during recording 
+                    if (!link) {
+                        this.layoutDoc.playOnSelect && this.recordingStart && sel && sel.creationDate && !Doc.AreProtosEqual(sel, this.props.Document) && this.playFromTime(DateCast(sel.creationDate).date.getTime());
+                        this.layoutDoc.playOnSelect && this.recordingStart && !sel && this.pause();
+                    }
                 }
             });
         this._scrubbingDisposer = reaction(() => AudioBox._scrubTime, (time) => this.layoutDoc.playOnSelect && this.playFromTime(AudioBox._scrubTime));
     }
 
+    playLink = (doc: Doc) => {
+        let link = false;
+        !Doc.AreProtosEqual(doc, this.props.Document) && DocListCast(this.props.Document.links).forEach(l => {
+            if (l.anchor1 === doc || l.anchor2 === doc) {
+                const { la1, la2, linkTime } = this.getLinkData(l);
+                let startTime = linkTime;
+                if (la2.audioStart) startTime = NumCast(la2.audioStart);
+                if (la1.audioStart) startTime = NumCast(la1.audioStart);
+
+                let endTime;
+                if (la1.audioEnd) endTime = NumCast(la1.audioEnd);
+                if (la2.audioEnd) endTime = NumCast(la2.audioEnd);
+
+                if (startTime) {
+                    link = true;
+                    this.recordingStart && (endTime ? this.playFrom(startTime, endTime) : this.playFrom(startTime));
+                }
+            }
+        });
+        return link;
+    }
+
     // for updating the timecode
     timecodeChanged = () => {
         const htmlEle = this._ele;
@@ -511,6 +515,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent<FieldViewProps, AudioD
         const markerDoc = (mark: Doc, script: undefined | (() => ScriptField)) => {
             return <DocumentView {...this.props}
                 Document={mark}
+                focus={() => this.playLink(mark)}
                 pointerEvents={true}
                 NativeHeight={returnZero}
                 NativeWidth={returnZero}
@@ -524,112 +529,113 @@ export class AudioBox extends ViewBoxAnnotatableComponent<FieldViewProps, AudioD
                 bringToFront={emptyFunction}
                 scriptContext={this} />;
         };
-        return <div className={`audiobox-container`} onContextMenu={this.specificContextMenu} onClick={!this.path ? this.recordClick : undefined}
-            style={{ pointerEvents: !interactive ? "none" : undefined }}>
-            {!this.path ?
-                <div className="audiobox-buttons">
-                    <div className="audiobox-dictation" onClick={this.onFile}>
-                        <FontAwesomeIcon style={{ width: "30px", background: this.layoutDoc.playOnSelect ? "yellow" : "rgba(0,0,0,0)" }} icon="file-alt" size={this.props.PanelHeight() < 36 ? "1x" : "2x"} />
-                    </div>
-                    {this.audioState === "recording" ?
-                        <div className="recording" onClick={e => e.stopPropagation()}>
-                            <div className="buttons" onClick={this.recordClick}>
-                                <FontAwesomeIcon style={{ width: "100%" }} icon={"stop"} size={this.props.PanelHeight() < 36 ? "1x" : "2x"} />
-                            </div>
-                            <div className="buttons" onClick={this._paused ? this.recordPlay : this.recordPause}>
-                                <FontAwesomeIcon style={{ width: "100%" }} icon={this._paused ? "play" : "pause"} size={this.props.PanelHeight() < 36 ? "1x" : "2x"} />
-                            </div>
-                            <div className="time">{formatTime(Math.round(NumCast(this.layoutDoc.currentTimecode)))}</div>
+        return <div className="audiobox-container" onContextMenu={this.specificContextMenu} onClick={!this.path ? this.recordClick : undefined}>
+            <div className="audiobox-inner" style={{ pointerEvents: !interactive ? "none" : undefined }}>
+                {!this.path ?
+                    <div className="audiobox-buttons">
+                        <div className="audiobox-dictation" onClick={this.onFile}>
+                            <FontAwesomeIcon style={{ width: "30px", background: this.layoutDoc.playOnSelect ? "yellow" : "rgba(0,0,0,0)" }} icon="file-alt" size={this.props.PanelHeight() < 36 ? "1x" : "2x"} />
                         </div>
-                        :
-                        <button className={`audiobox-record${interactive}`} style={{ backgroundColor: "black" }}>
-                            RECORD
+                        {this.audioState === "recording" ?
+                            <div className="recording" onClick={e => e.stopPropagation()}>
+                                <div className="buttons" onClick={this.recordClick}>
+                                    <FontAwesomeIcon style={{ width: "100%" }} icon={"stop"} size={this.props.PanelHeight() < 36 ? "1x" : "2x"} />
+                                </div>
+                                <div className="buttons" onClick={this._paused ? this.recordPlay : this.recordPause}>
+                                    <FontAwesomeIcon style={{ width: "100%" }} icon={this._paused ? "play" : "pause"} size={this.props.PanelHeight() < 36 ? "1x" : "2x"} />
+                                </div>
+                                <div className="time">{formatTime(Math.round(NumCast(this.layoutDoc.currentTimecode)))}</div>
+                            </div>
+                            :
+                            <button className={`audiobox-record${interactive}`} style={{ backgroundColor: "black" }}>
+                                RECORD
                             </button>}
-                </div> :
-                <div className="audiobox-controls" >
-                    <div className="audiobox-dictation"></div>
-                    <div className="audiobox-player" >
-                        <div className="audiobox-playhead" title={this.audioState === "paused" ? "play" : "pause"} onClick={this.onPlay}> <FontAwesomeIcon style={{ width: "100%", position: "absolute", left: "0px", top: "5px", borderWidth: "thin", borderColor: "white" }} icon={this.audioState === "paused" ? "play" : "pause"} size={"1x"} /></div>
-                        <div className="audiobox-timeline" onClick={e => { e.stopPropagation(); e.preventDefault(); }}
-                            onPointerDown={e => {
-                                if (e.button === 0 && !e.ctrlKey) {
-                                    const rect = (e.target as any).getBoundingClientRect();
-
-                                    if (e.target !== this._audioRef.current) {
-                                        const wasPaused = this.audioState === "paused";
-                                        this._ele!.currentTime = this.layoutDoc.currentTimecode = (e.clientX - rect.x) / rect.width * this.audioDuration;
-                                        wasPaused && this.pause();
+                    </div> :
+                    <div className="audiobox-controls" >
+                        <div className="audiobox-dictation"></div>
+                        <div className="audiobox-player" >
+                            <div className="audiobox-playhead" title={this.audioState === "paused" ? "play" : "pause"} onClick={this.onPlay}> <FontAwesomeIcon style={{ width: "100%", position: "absolute", left: "0px", top: "5px", borderWidth: "thin", borderColor: "white" }} icon={this.audioState === "paused" ? "play" : "pause"} size={"1x"} /></div>
+                            <div className="audiobox-timeline" onClick={e => { e.stopPropagation(); e.preventDefault(); }}
+                                onPointerDown={e => {
+                                    if (e.button === 0 && !e.ctrlKey) {
+                                        const rect = (e.target as any).getBoundingClientRect();
+
+                                        if (e.target !== this._audioRef.current) {
+                                            const wasPaused = this.audioState === "paused";
+                                            this._ele!.currentTime = this.layoutDoc.currentTimecode = (e.clientX - rect.x) / rect.width * this.audioDuration;
+                                            wasPaused && this.pause();
+                                        }
+
+                                        this.onPointerDownTimeline(e);
+                                    }
+                                }}>
+                                <div className="waveform">
+                                    {this.waveform}
+                                </div>
+                                {DocListCast(this.dataDoc[this.annotationKey]).map((m, i) =>
+                                    (!m.isLabel) ?
+                                        (this.layoutDoc.hideMarkers) ? (null) :
+                                            <div className={`audiobox-marker-${this.props.PanelHeight() < 32 ? "mini" : ""}container1`} key={i}
+                                                title={`${formatTime(Math.round(NumCast(m.audioStart)))}` + " - " + `${formatTime(Math.round(NumCast(m.audioEnd)))}`}
+                                                style={{
+                                                    left: `${NumCast(m.audioStart) / this.audioDuration * 100}%`,
+                                                    top: `${this.isOverlap(m) * 1 / (this.dataDoc.markerAmount + 1) * 100}%`,
+                                                    width: `${(NumCast(m.audioEnd) - NumCast(m.audioStart)) / this.audioDuration * 100}%`, height: `${1 / (this.dataDoc.markerAmount + 1) * 100}%`
+                                                }}
+                                                onClick={e => { this.playFrom(NumCast(m.audioStart), NumCast(m.audioEnd)); e.stopPropagation(); }} >
+                                                <div className="left-resizer" onPointerDown={e => this.onPointerDown(e, m, true)}></div>
+                                                {markerDoc(m, this.rangeScript)}
+                                                <div className="resizer" onPointerDown={e => this.onPointerDown(e, m, false)}></div>
+                                            </div>
+                                        :
+                                        (this.layoutDoc.hideLabels) ? (null) :
+                                            <div className={`audiobox-marker-${this.props.PanelHeight() < 32 ? "mini" : ""}container`} key={i}
+                                                style={{ left: `${NumCast(m.audioStart) / this.audioDuration * 100}%` }}>
+                                                {markerDoc(m, this.labelScript)}
+                                            </div>
+                                )}
+                                {DocListCast(this.dataDoc.links).map((l, i) => {
+                                    const { la1, la2, linkTime } = this.getLinkData(l);
+                                    let startTime = linkTime;
+                                    if (la2.audioStart && !la2.audioEnd) {
+                                        startTime = NumCast(la2.audioStart);
                                     }
 
-                                    this.onPointerDownTimeline(e);
-                                }
-                            }}>
-                            <div className="waveform">
-                                {this.waveform}
+                                    return !linkTime ? (null) :
+                                        <div className={`audiobox-marker-${this.props.PanelHeight() < 32 ? "mini" : ""}container`} key={l[Id]} style={{ left: `${startTime / this.audioDuration * 100}%` }} onClick={e => e.stopPropagation()}>
+                                            <DocumentView {...this.props}
+                                                Document={l}
+                                                NativeHeight={returnZero}
+                                                NativeWidth={returnZero}
+                                                rootSelected={returnFalse}
+                                                ContainingCollectionDoc={this.props.Document}
+                                                parentActive={returnTrue}
+                                                bringToFront={emptyFunction}
+                                                backgroundColor={returnTransparent}
+                                                ContentScaling={returnOne}
+                                                forcedBackgroundColor={returnTransparent}
+                                                pointerEvents={false}
+                                                LayoutTemplate={undefined}
+                                                LayoutTemplateString={LinkAnchorBox.LayoutString(`anchor${Doc.LinkEndpoint(l, la2)}`)}
+                                            />
+                                            <div key={i} className={`audiobox-marker`} onPointerEnter={() => Doc.linkFollowHighlight(la1)}
+                                                onPointerDown={e => { if (e.button === 0 && !e.ctrlKey) { this.playFrom(startTime); e.stopPropagation(); e.preventDefault(); } }} />
+                                        </div>;
+                                })}
+                                {this._visible ? this.selectionContainer : null}
+
+                                <div className="audiobox-current" ref={this._audioRef} onClick={e => { e.stopPropagation(); e.preventDefault(); }} style={{ left: `${NumCast(this.layoutDoc.currentTimecode) / this.audioDuration * 100}%`, pointerEvents: "none" }} />
+                                {this.audio}
+                            </div>
+                            <div className="current-time">
+                                {formatTime(Math.round(NumCast(this.layoutDoc.currentTimecode)))}
+                            </div>
+                            <div className="total-time">
+                                {formatTime(Math.round(this.audioDuration))}
                             </div>
-                            {DocListCast(this.dataDoc[this.annotationKey]).map((m, i) =>
-                                (!m.isLabel) ?
-                                    (this.layoutDoc.hideMarkers) ? (null) :
-                                        <div className={`audiobox-marker-${this.props.PanelHeight() < 32 ? "mini" : ""}container1`} key={i}
-                                            title={`${formatTime(Math.round(NumCast(m.audioStart)))}` + " - " + `${formatTime(Math.round(NumCast(m.audioEnd)))}`}
-                                            style={{
-                                                left: `${NumCast(m.audioStart) / this.audioDuration * 100}%`,
-                                                top: `${this.isOverlap(m) * 1 / (this.dataDoc.markerAmount + 1) * 100}%`,
-                                                width: `${(NumCast(m.audioEnd) - NumCast(m.audioStart)) / this.audioDuration * 100}%`, height: `${1 / (this.dataDoc.markerAmount + 1) * 100}%`
-                                            }}
-                                            onClick={e => { this.playFrom(NumCast(m.audioStart), NumCast(m.audioEnd)); e.stopPropagation(); }} >
-                                            <div className="left-resizer" onPointerDown={e => this.onPointerDown(e, m, true)}></div>
-                                            {markerDoc(m, this.rangeScript)}
-                                            <div className="resizer" onPointerDown={e => this.onPointerDown(e, m, false)}></div>
-                                        </div>
-                                    :
-                                    (this.layoutDoc.hideLabels) ? (null) :
-                                        <div className={`audiobox-marker-${this.props.PanelHeight() < 32 ? "mini" : ""}container`} key={i}
-                                            style={{ left: `${NumCast(m.audioStart) / this.audioDuration * 100}%` }}>
-                                            {markerDoc(m, this.labelScript)}
-                                        </div>
-                            )}
-                            {DocListCast(this.dataDoc.links).map((l, i) => {
-                                let { la1, la2, linkTime } = this.getLinkData(l);
-                                if (la2.audioStart && !la2.audioEnd) {
-                                    linkTime = NumCast(la2.audioStart);
-                                }
-
-                                return !linkTime ? (null) :
-                                    <div className={`audiobox-marker-${this.props.PanelHeight() < 32 ? "mini" : ""}container`} key={l[Id]} style={{ left: `${linkTime / this.audioDuration * 100}%` }} onClick={e => e.stopPropagation()}>
-                                        <DocumentView {...this.props}
-                                            Document={l}
-                                            NativeHeight={returnZero}
-                                            NativeWidth={returnZero}
-                                            rootSelected={returnFalse}
-                                            ContainingCollectionDoc={this.props.Document}
-                                            parentActive={returnTrue}
-                                            bringToFront={emptyFunction}
-                                            backgroundColor={returnTransparent}
-                                            ContentScaling={returnOne}
-                                            forcedBackgroundColor={returnTransparent}
-                                            pointerEvents={false}
-                                            LayoutTemplate={undefined}
-                                            LayoutTemplateString={LinkAnchorBox.LayoutString(`anchor${Doc.LinkEndpoint(l, la2)}`)}
-                                        />
-                                        <div key={i} className={`audiobox-marker`} onPointerEnter={() => Doc.linkFollowHighlight(la1)}
-                                            onPointerDown={e => { if (e.button === 0 && !e.ctrlKey) { this.playFrom(linkTime); e.stopPropagation(); e.preventDefault(); } }} />
-                                    </div>;
-                            })}
-                            {this._visible ? this.selectionContainer : null}
-
-                            <div className="audiobox-current" ref={this._audioRef} onClick={e => { e.stopPropagation(); e.preventDefault(); }} style={{ left: `${NumCast(this.layoutDoc.currentTimecode) / this.audioDuration * 100}%`, pointerEvents: "none" }} />
-                            {this.audio}
-                        </div>
-                        <div className="current-time">
-                            {formatTime(Math.round(NumCast(this.layoutDoc.currentTimecode)))}
-                        </div>
-                        <div className="total-time">
-                            {formatTime(Math.round(this.audioDuration))}
                         </div>
                     </div>
-                </div>
-            }
+                }</div>
         </div>;
     }
 }
-- 
cgit v1.2.3-70-g09d2


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

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

(limited to 'src/client/util')

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


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

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

(limited to 'src/client/util')

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