merge conflicts and toggle sidebar

1 files changed, 23 insertions, 3 deletions

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>;
     }