merge conflicts and toggle sidebar

3 files changed, 45 insertions, 3 deletions

diff --git a/src/client/views/nodes/MapBox/MapBox.scss b/src/client/views/nodes/MapBox/MapBox.scss
index 4fae8d8ff..f275bed54 100644
--- a/src/client/views/nodes/MapBox/MapBox.scss
+++ b/src/client/views/nodes/MapBox/MapBox.scss
@@ -1,3 +1,4 @@
+@import "../../global/globalCssVariables.scss";
 .mapBox {
         width: 100%;
         height: 100%;
@@ -7,6 +8,27 @@
             position: unset !important; // when the sidebar filter flys out, this prevents the map from extending outside the document box
         }
 
+        .mapBox-overlayButton-sidebar {
+            background: #121721;
+            height: 25px;
+            width: 25px;
+            right: 5px;
+            display: flex;
+            position: absolute;
+            align-items: center;
+            justify-content: center;
+            border-radius: 3px;
+            pointer-events: all;
+            z-index: 1; // so it appears on top of the document's title, if shown
+    
+            box-shadow: $standard-box-shadow;
+            transition: 0.2s;
+    
+            &:hover{
+                filter: brightness(0.85);
+            }
+        }
+
         .mapBox-wrapper {
             width: 100%;
             .searchbox {
diff --git a/src/client/views/nodes/MapBox/MapBox.tsx b/src/client/views/nodes/MapBox/MapBox.tsx
index 0314aa419..1323048d9 100644
--- a/src/client/views/nodes/MapBox/MapBox.tsx
+++ b/src/client/views/nodes/MapBox/MapBox.tsx
@@ -19,6 +19,8 @@ import { MapMarker } from './MapMarker';
 import { DocumentType } from '../../../documents/DocumentTypes';
 import { identity } from 'lodash';
 import { Id } from '../../../../fields/FieldSymbols';
+import { Colors } from '../../global/globalEnums';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
 type MapDocument = makeInterface<[typeof documentSchema]>;
 const MapDocument = makeInterface(documentSchema);
@@ -135,6 +137,12 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
         })
     }
 
+    // TODO: things to ask & think about when designing
+    // 1. All markers are stored in allMarkers[], when adding a new marker (from a button, ideally not using drawManager),
+    // the new marker will be stored in allMarkers[]
+    // currently markerloadhandler only gets called when the map is reloaded, but we want it to be update on the GUI in real time
+    // TODO ** core issue --> real time updates ** 
+
 
     /**
      * store a reference to google map instance
@@ -298,7 +306,8 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
 
     @computed get sidebarHandle() {
         const annotated = DocListCast(this.dataDoc[this.SidebarKey]).filter(d => d?.author).length;
-        return (!annotated && !this.isContentActive()) ? (null) : <div className="mapBox-sidebar-handle" onPointerDown={this.sidebarDown}
+        //&& !this.isContentActive()
+        return (!annotated) ? (null) : <div className="mapBox-sidebar-handle" onPointerDown={this.sidebarDown}
             style={{
                 left: `max(0px, calc(100% - ${this.sidebarWidthPercent} ${this.sidebarWidth() ? "- 5px" : "- 10px"}))`,
                 background: this.props.styleProvider?.(this.rootDoc, this.props as any, StyleProp.WidgetColor + (annotated ? ":annotated" : ""))
@@ -383,7 +392,8 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
 
     render() {
         return <div className="mapBox" ref={this._ref}
-            style={{ pointerEvents: this.isContentActive() ? undefined : "none" }} >
+        // style={{ pointerEvents: this.isContentActive() ? undefined : "none" }} 
+        >
             {/* // {/* <LoadScript
                 //     googleMapsApiKey={process.env.GOOGLE_MAPS!}
                 //     libraries={['places', 'drawing']}
@@ -420,13 +430,23 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
                     dataDoc={this.dataDoc}
                     showSidebar={this.SidebarShown}
                     nativeWidth={NumCast(this.layoutDoc._nativeWidth)}
+                    whenChildContentsActiveChanged={this.whenChildContentsActiveChanged}
                     PanelWidth={this.sidebarWidth}
                     sidebarAddDocument={this.sidebarAddDocument}
                     moveDocument={this.moveDocument}
                     removeDocument={this.removeDocument}
-                    isContentActive={this.isContentActive}
+                //isContentActive={this.isContentActive}
                 />
             </div>
+            <div className="mapBox-overlayButton-sidebar" key="sidebar" title="Toggle Sidebar"
+                style={{
+                    display: !this.props.isContentActive() ? "none" : undefined,
+                    top: StrCast(this.rootDoc._showTitle) === "title" ? 20 : 5,
+                    backgroundColor: this.SidebarShown ? Colors.MEDIUM_BLUE : Colors.BLACK
+                }}
+                onPointerDown={this.sidebarBtnDown} >
+                <FontAwesomeIcon style={{ color: Colors.WHITE }} icon={"comment-alt"} size="sm" />
+            </div>
             {this.sidebarHandle}
         </div>;
     }
diff --git a/src/server/public/files b/src/server/public/files
new file mode 100644
index 000000000..e69de29bb
--- /dev/null
+++ b/src/server/public/files