(feat) O3-4362 add Location Picker to the top nav

openmrs · Feb 24, 2025 · 0aaf0b8 · 0aaf0b8
1 parent 7fec697
commit 0aaf0b8
Show file tree

Hide file tree

Showing 6 changed files with 36 additions and 15 deletions.
diff --git a/packages/apps/esm-login-app/src/change-location-link/change-location-link.extension.tsx b/packages/apps/esm-login-app/src/change-location-link/change-location-link.extension.tsx
@@ -1,7 +1,7 @@
+import { HeaderGlobalAction } from '@carbon/react';
+import { LocationIcon, navigate, useSession } from '@openmrs/esm-framework';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import { Button, SwitcherItem } from '@carbon/react';
-import { LocationIcon, navigate, useSession } from '@openmrs/esm-framework';
 import styles from './change-location-link.scss';
 
 const ChangeLocationLink: React.FC = () => {
@@ -18,15 +18,14 @@ const ChangeLocationLink: React.FC = () => {
   };
 
   return (
-    <SwitcherItem aria-label="Change Location" className={styles.panelItemContainer}>
-      <div>
-        <LocationIcon size={20} />
-        <p>{currentLocation}</p>
-      </div>
-      <Button kind="ghost" onClick={changeLocation}>
-        {t('change', 'Change')}
-      </Button>
-    </SwitcherItem>
+    <HeaderGlobalAction
+      aria-label={t('changeLocation', 'Change location')}
+      className={styles.changeLocationButton}
+      onClick={changeLocation}
+    >
+      <LocationIcon size={16} />
+      <span className={styles.currentLocationText}>{currentLocation}</span>
+    </HeaderGlobalAction>
   );
 };
 

diff --git a/packages/apps/esm-login-app/src/change-location-link/change-location-link.scss b/packages/apps/esm-login-app/src/change-location-link/change-location-link.scss
@@ -1,3 +1,4 @@
+@use '@carbon/layout';
 @import '~@openmrs/esm-styleguide/src/vars';
 @import '../root.scss';
 
@@ -11,3 +12,15 @@
   display: flex;
   align-items: center;
 }
+
+.changeLocationButton {
+  width: fit-content;
+  background-color: transparent;
+  color: white;
+  font-size: 14px;
+  padding: layout.$spacing-04 !important; // this gets unset in rtl language without !important
+}
+
+.currentLocationText {
+  padding-inline-start: layout.$spacing-03;
+}
diff --git a/packages/apps/esm-login-app/src/routes.json b/packages/apps/esm-login-app/src/routes.json
@@ -47,7 +47,7 @@
     },
     {
       "name": "location-changer",
-      "slot": "user-panel-slot",
+      "slot": "top-nav-info-slot",
       "component": "changeLocationLink",
       "online": true,
       "offline": true,

diff --git a/packages/apps/esm-login-app/translations/en.json b/packages/apps/esm-login-app/translations/en.json
@@ -2,6 +2,7 @@
   "builtWith": "Built with",
   "cancel": "Cancel",
   "change": "Change",
+  "changeLocation": "Change location",
   "changePassword": "Change password",
   "changingPassword": "Changing password",
   "confirmPassword": "Confirm new password",

diff --git a/packages/apps/esm-primary-navigation-app/src/components/navbar/navbar.component.tsx b/packages/apps/esm-primary-navigation-app/src/components/navbar/navbar.component.tsx
@@ -67,7 +67,8 @@ const HeaderItems: React.FC = () => {
             <Logo />
           </div>
         </ConfigurableLink>
-        <ExtensionSlot className={styles.dividerOverride} name="top-nav-info-slot" />
+        <div className={styles.divider} />
+        <ExtensionSlot name="top-nav-info-slot" />
         <HeaderGlobalBar className={styles.headerGlobalBar}>
           <ExtensionSlot name="top-nav-actions-slot" className={styles.topNavActionsSlot} />
           <ExtensionSlot

diff --git a/packages/apps/esm-primary-navigation-app/src/components/navbar/navbar.scss b/packages/apps/esm-primary-navigation-app/src/components/navbar/navbar.scss
@@ -28,9 +28,16 @@
   height: layout.$spacing-09;
   width: layout.$spacing-09;
   padding: layout.$spacing-04;
-  margin-right: layout.$spacing-02;
+  margin-inline-end: layout.$spacing-02;
 }
 
 .spacedLogo {
-  margin-left: layout.$spacing-05;
+  margin-inline-start: layout.$spacing-05;
+}
+
+.divider {
+  width: 1px;
+  height: 24px;
+  background-color: rgba(244, 244, 244, 0.4);
+  margin-inline-start: layout.$spacing-04;
 }