Bug fixing

eea · Aug 5, 2021 · 46ffd09 · 46ffd09
1 parent b5bf029
commit 46ffd09
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 333 deletions.
diff --git a/src/components/MapViewer/BasemapWidget.jsx b/src/components/MapViewer/BasemapWidget.jsx
@@ -10,7 +10,7 @@ class BasemapWidget extends React.Component {
   constructor(props) {
     super(props);
     //We create a reference to a DOM element to be mounted
-    this.basemaps = createRef();
+    this.container = createRef();
     //Initially, we set the state of the component to
     //not be showing the basemap panel
     this.state = { showMapMenu: false };
@@ -34,7 +34,7 @@ class BasemapWidget extends React.Component {
   openMenu() {
     if (this.state.showMapMenu) {
       this.basemapGallery.domNode.style.display = 'none';
-      this.basemaps.current.classList.replace(
+      this.container.current.querySelector(".esri-widget--button").classList.replace(
         'esri-icon-right-arrow',
         'esri-icon-basemap',
       );
@@ -44,7 +44,7 @@ class BasemapWidget extends React.Component {
     } else {
       this.basemapGallery.domNode.classList.add('basemap-gallery-container');
       this.basemapGallery.domNode.style.display = 'block';
-      this.basemaps.current.classList.replace(
+      this.container.current.querySelector(".esri-widget--button").classList.replace(
         'esri-icon-basemap',
         'esri-icon-right-arrow',
       );
@@ -60,9 +60,10 @@ class BasemapWidget extends React.Component {
     await this.loader();
     this.basemapGallery = new BasemapGallery({
       view: this.props.view,
+      container: this.container.current.querySelector(".basemap-panel"),
     });
-    this.props.view.ui.add(this.basemaps.current, 'top-right');
-    this.props.view.ui.add(this.basemapGallery, 'top-right');
+    this.props.view.ui.add(this.container.current, 'top-right');
+    //this.props.view.ui.add(this.basemapGallery, 'top-right');
   }
   /**
    * This method renders the component
@@ -71,16 +72,19 @@ class BasemapWidget extends React.Component {
   render() {
     return (
       <>
-        <div
-          ref={this.basemaps}
-          className={this.menuClass}
-          id="map_basemap_button"
-          role="button"
-          title="Basemap gallery"
-          onClick={this.openMenu.bind(this)}
-          onKeyDown={() => this.openMenu.bind(this)}
-          tabIndex={0}
-        ></div>
+        <div ref={this.container} className="basemap-container">
+          <div
+            // ref={this.basemaps}
+            className={this.menuClass}
+            id="map_basemap_button"
+            role="button"
+            title="Basemap gallery"
+            onClick={this.openMenu.bind(this)}
+            onKeyDown={() => this.openMenu.bind(this)}
+            tabIndex={0}
+          ></div>
+          <div className="basemap-panel"></div>
+        </div>
       </>
     );
     //</div>

diff --git a/src/components/MapViewer/MenuWidget.jsx b/src/components/MapViewer/MenuWidget.jsx
@@ -484,8 +484,18 @@ class MenuWidget extends React.Component {
         </div>
         <div className="active-layer-options" key={'c_' + elem.id}>
           <span className="active-layer-position" key={'d_' + elem.id}>
-            <FontAwesomeIcon icon={['fas', 'arrow-up']} />
-            <FontAwesomeIcon icon={['fas', 'arrow-down']} />
+            <span class="active-layer-position-down">
+              <FontAwesomeIcon 
+                className="map-menu-icon"
+                icon={['fas', 'long-arrow-alt-up']} 
+              />
+            </span>
+            <span class="active-layer-position-up">
+              <FontAwesomeIcon 
+                className="map-menu-icon"
+                icon={['fas', 'long-arrow-alt-down']} 
+              />
+            </span>
           </span>
           <span className="active-layer-hide">
             <FontAwesomeIcon
@@ -497,7 +507,7 @@ class MenuWidget extends React.Component {
           <span className="active-layer-delete">
             <FontAwesomeIcon
               className="map-menu-icon"
-              icon={['far', 'times-circle']}
+              icon={['fas', 'times']}
               onClick={() => this.deleteCrossEvent(elem)}
             />
           </span>