Configurable "About" and "Contact us" links

services/frontend/www-app/public/headway-dev-config.json

@@ -1,4 +1,8 @@
 {
   "maxBounds": null,
-  "transitRoutingEnabled": true
+  "transitRoutingEnabled": true,
+  "aboutUrl": "https://about.maps.earth",
+  "aboutLinkText": "About maps.earth",
+  "contactUrl": "mailto:[email protected]?subject=Hello,%20Earth",
+  "contactLinkText": "Contact Us"
 }

services/frontend/www-app/src/components/SearchBox.vue

@@ -16,12 +16,14 @@
         dense
         unelevated
         padding="0"
+        style="margin-right: 8px"
         class="clear-button"
         icon="cancel"
         color="transparent"
         text-color="grey"
         @click="clear()"
       />
+      <slot></slot>
     </div>
     <div
       ref="autoCompleteMenu"
@@ -113,7 +115,6 @@
   }
   .input-field {
     font-size: 16px;
-    padding: 4px 8px;
     display: flex;
     height: 100%;
     flex-direction: row;
@@ -128,12 +129,24 @@
       outline: none;
     }
 
+    input,
+    .clear-button {
+      padding: 4px 8px;
+    }
+
     // only show clear-button when input has content
     // and is editable
     &:has(input:placeholder-shown) .clear-button,
     &:has(input[readonly]) .clear-button {
       display: none;
     }
+
+    // We don't want the settings link to interfere with the search field contents
+    // So hide the settings button when the user has, or is about to, give input
+    &:has(input:focus) .settings-button,
+    &:not(:has(input:placeholder-shown)) .settings-button {
+      display: none;
+    }
   }
 }
 </style>

services/frontend/www-app/src/pages/BaseMapPage.vue

@@ -7,7 +7,40 @@
         (searchText) =>
           $router.push(`/search/${encodeURIComponent(searchText)}`)
       "
-    />
+    >
+      <q-btn-dropdown
+        class="settings-button"
+        flat
+        no-ripple
+        no-icon-animation
+        dense
+        text-color="primary"
+        dropdown-icon="menu"
+      >
+        <q-list>
+          <q-item v-if="aboutUrl && aboutLinkText">
+            <q-btn
+              dense
+              icon="info"
+              no-caps
+              flat
+              :href="aboutUrl"
+              :label="aboutLinkText"
+            />
+          </q-item>
+          <q-item v-if="contactUrl && contactLinkText">
+            <q-btn
+              dense
+              icon="mail"
+              no-caps
+              flat
+              :href="contactUrl"
+              :label="contactLinkText"
+            />
+          </q-item>
+        </q-list>
+      </q-btn-dropdown>
+    </search-box>
   </div>
 </template>
 
@@ -38,6 +71,15 @@
     }
   }
 
+  .settings-button {
+    padding-left: 12px;
+    padding-right: 12px;
+    // Only round the outer corners to make this button
+    // feel like it's part of the text-input component
+    border-top-left-radius: 0px;
+    border-bottom-left-radius: 0px;
+  }
+
   @media screen and (min-width: 800px) {
     #map {
       width: 100%;
@@ -55,6 +97,7 @@
 import { getBaseMap } from 'src/components/BaseMap.vue';
 import SearchBox from 'src/components/SearchBox.vue';
 import Place from 'src/models/Place';
+import Config from 'src/utils/Config';
 import { defineComponent } from 'vue';
 
 export default defineComponent({
@@ -67,6 +110,14 @@ export default defineComponent({
       }
     },
   },
+  data: function (): {
+    aboutUrl?: string;
+    aboutLinkText?: string;
+    contactUrl?: string;
+    contactLinkText?: string;
+  } {
+    return Config.shared;
+  },
   mounted: function () {
     getBaseMap()?.removeAllMarkers();
   },

services/frontend/www-app/src/utils/Config.ts

@@ -1,6 +1,10 @@
 export default class Config {
   transitRoutingEnabled = false;
   maxBounds: [number, number, number, number] | null = null;
+  aboutUrl?: string;
+  aboutLinkText?: string;
+  contactUrl?: string;
+  contactLinkText?: string;
 
   static shared: Config = new Config();
 
@@ -11,4 +15,20 @@ export default class Config {
   public static get maxBounds(): [number, number, number, number] | null {
     return Config.shared.maxBounds;
   }
+
+  public static get aboutUrl(): string | undefined {
+    return Config.shared.aboutUrl;
+  }
+
+  public static get aboutLinkText(): string | undefined {
+    return Config.shared.aboutLinkText;
+  }
+
+  public static get contactUrl(): string | undefined {
+    return Config.shared.contactUrl;
+  }
+
+  public static get contactLinkText(): string | undefined {
+    return Config.shared.contactLinkText;
+  }
 }