Layer menu changes

src/components/BaselayerHistoryNavigation.tsx

@@ -1,20 +1,22 @@
 import { LeftArrowIcon } from './icons/LeftArrowIcon';
 import { RightArrowIcon } from './icons/RightArrowIcon';
 
+export type BaselayerHistoryNavigationProps = {
+  disableGoBack: boolean;
+  disableGoForward: boolean;
+  goBack: () => void;
+  goForward: () => void;
+};
+
 export function BaselayerHistoryNavigation({
   disableGoBack,
   disableGoForward,
   goBack,
   goForward,
-}: {
-  disableGoBack: boolean;
-  disableGoForward: boolean;
-  goBack: () => void;
-  goForward: () => void;
-}) {
+}: BaselayerHistoryNavigationProps) {
   return (
     <>
-      <div className="bl-nav-btn-container back-btn-container">
+      <div>
         <button
           type="button"
           className="map-btn"
@@ -25,7 +27,7 @@ export function BaselayerHistoryNavigation({
           <LeftArrowIcon />
         </button>
       </div>
-      <div className="bl-nav-btn-container fwd-btn-container">
+      <div>
         <button
           type="button"
           className="map-btn"

src/components/LayerSelector.tsx

@@ -5,10 +5,16 @@ import { LayersIcon } from './icons/LayersIcon';
 import './styles/layer-selector.css';
 import { MapProps } from './OpenLayersMap';
 import { EXTERNAL_BASELAYERS } from '../configs/mapSettings';
+import {
+  BaselayerHistoryNavigation,
+  BaselayerHistoryNavigationProps,
+} from './BaselayerHistoryNavigation';
+import { LockClosedIcon } from './icons/LockClosedIcon';
+import { LockOpenIcon } from './icons/LockOpenIcon';
 
 interface Props
   extends Omit<
-    MapProps,
+    MapProps & BaselayerHistoryNavigationProps,
     | 'baselayersState'
     | 'sourceLists'
     | 'setActiveBoxIds'
@@ -38,6 +44,10 @@ export function LayerSelector({
   activeBoxIds,
   onSelectedHighlightBoxChange,
   isFlipped,
+  disableGoBack,
+  disableGoForward,
+  goBack,
+  goForward,
 }: Props) {
   const menuRef = useRef<HTMLDivElement | null>(null);
   const [lockMenu, setLockMenu] = useState(false);
@@ -105,16 +115,20 @@ export function LayerSelector({
         className={'layer-selector-container menu hide'}
         onMouseLeave={toggleMenu}
       >
-        <div
-          className="lock-menu-container"
-          title="Type 'm' or click to enable/disable this feature."
-        >
-          <label htmlFor="lock-menu">Keep open</label>
-          <input
-            id="lock-menu"
-            type="checkbox"
-            checked={lockMenu}
-            onChange={() => setLockMenu(!lockMenu)}
+        <div className="layer-selector-header">
+          <h3>Select Layer</h3>
+          <button
+            className={'lock-menu-btn' + (lockMenu ? ' locked' : '')}
+            onClick={() => setLockMenu(!lockMenu)}
+            title="Type 'm' or click to lock/unlock the layer menu."
+          >
+            {lockMenu ? <LockClosedIcon /> : <LockOpenIcon />}
+          </button>
+          <BaselayerHistoryNavigation
+            disableGoBack={disableGoBack}
+            disableGoForward={disableGoForward}
+            goBack={goBack}
+            goForward={goForward}
           />
         </div>
         <fieldset>

src/components/OpenLayersMap.tsx

@@ -43,7 +43,6 @@ import {
   transformGraticuleCoords,
 } from '../utils/layerUtils';
 import { ToggleSwitch } from './ToggleSwitch';
-import { BaselayerHistoryNavigation } from './BaselayerHistoryNavigation';
 
 export type MapProps = {
   baselayersState: BaselayersState;
@@ -495,12 +494,6 @@ export function OpenLayersMap({
           <CropIcon />
         </button>
       </div>
-      <BaselayerHistoryNavigation
-        disableGoBack={!backHistoryStack.length}
-        disableGoForward={!forwardHistoryStack.length}
-        goBack={goBack}
-        goForward={goForward}
-      />
       <SourcesLayer
         sourceLists={sourceLists}
         activeSourceListIds={activeSourceListIds}
@@ -539,6 +532,10 @@ export function OpenLayersMap({
         activeBoxIds={activeBoxIds}
         onSelectedHighlightBoxChange={onSelectedHighlightBoxChange}
         isFlipped={flipTiles}
+        disableGoBack={!backHistoryStack.length}
+        disableGoForward={!forwardHistoryStack.length}
+        goBack={goBack}
+        goForward={goForward}
       />
       <GraticuleLayer mapRef={mapRef} flipped={flipTiles} />
       {coordinates && (

src/components/icons/LockClosedIcon.tsx

@@ -0,0 +1,19 @@
+export function LockClosedIcon() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className="lucide lucide-lock-icon lucide-lock lock-icon"
+    >
+      <rect width="18" height="11" x="3" y="11" rx="2" ry="2" />
+      <path d="M7 11V7a5 5 0 0 1 10 0v4" />
+    </svg>
+  );
+}

src/components/icons/LockOpenIcon.tsx

@@ -0,0 +1,19 @@
+export function LockOpenIcon() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className="lucide lucide-lock-open-icon lucide-lock-open lock-icon"
+    >
+      <rect width="18" height="11" x="3" y="11" rx="2" ry="2" />
+      <path d="M7 11V7a5 5 0 0 1 9.9-1" />
+    </svg>
+  );
+}

src/components/styles/layer-selector.css

@@ -1,15 +1,52 @@
 .layer-selector-container {
   position: absolute;
-  top: 38px;
+  top: 8px;
   right: 1em;
   z-index: 1000;
   background-color: #fff;
   border-radius: 4px;
   border: 1px solid rgba(0, 0, 0, 0.2);
 }
 
+.layer-selector-header {
+  display: flex;
+  align-items: center;
+  column-gap: 1em;
+  padding: 0 2px;
+}
+
+.layer-selector-header > h3 {
+  margin: 0;
+}
+
+.lock-menu-btn {
+  margin-right: auto;
+  background: none;
+  color: #666666;
+  border: 1px solid white;
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  padding: 2px;
+  box-sizing: border-box;
+}
+
+.lock-menu-btn:hover {
+  border: 1px solid black;
+  color: black;
+}
+
+.lock-icon {
+  height: 0.9em;
+  width: 0.9em;
+}
+
+.locked > svg {
+  color: #479f76;
+}
+
 .layer-selector-container > fieldset {
-  padding-top: 0;
+  padding: 0.25em 0.5em;
 }
 
 .layer-selector-container.btn {
@@ -20,7 +57,7 @@
 }
 
 .layer-selector-container.menu {
-  padding: 0.25em 0.5em 0.75em 0.5em;
+  padding: 0.5em;
 }
 
 .input-container {
@@ -57,3 +94,9 @@ input[type='radio']:disabled {
 .lock-menu-container > input {
   height: 12px;
 }
+
+.left-arrow-icon,
+.right-arrow-icon {
+  height: 1em;
+  width: 1em;
+}

src/index.css

@@ -143,23 +143,3 @@ body {
   background-color: #921925 !important;
   color: white !important;
 }
-
-.bl-nav-btn-container {
-  position: absolute;
-  top: 10px;
-  z-index: 1000;
-}
-
-.back-btn-container {
-  right: 40px;
-}
-
-.fwd-btn-container {
-  right: 12px;
-}
-
-.left-arrow-icon,
-.right-arrow-icon {
-  height: 1.25em;
-  width: 1.25em;
-}