Skip to content

Commit d1d3976

Browse files
slubwamaslubwama
committed
change styling to match openmrs styling of the left nav
1 parent ca682ab commit d1d3976

31 files changed

Lines changed: 1013 additions & 478 deletions

‎src/index.ts‎

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,7 @@ export function startupApp() {
6262
}
6363

6464
export const systemAdminPage = getAsyncLifecycle(
65-
() => import("./pages/system-admin/system-admin.component"),
65+
() => import("./pages/system-admin/root.component"),
6666
{
6767
featureName: "system admin page",
6868
moduleName,
@@ -147,3 +147,16 @@ export const notificationsMenuButton = getSyncLifecycle(
147147
NotificationsMenuButton,
148148
options,
149149
);
150+
151+
// System Admin left panel links - re-exported from system-admin module
152+
export {
153+
systemAdminDashboardLink,
154+
syncProfilesLink,
155+
syncTaskTypesLink,
156+
scheduleTasksLink,
157+
cohortManagementLink,
158+
viralLoadUploadLink,
159+
smsSettingsLink,
160+
systemUpgradesLink,
161+
aboutSystemsLink,
162+
} from "./pages/system-admin";

‎src/pages/system-admin/about-systems/about-systems-illustration.component.tsx‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import React from "react";
2+
3+
const Illustration: React.FC = () => {
4+
return (
5+
<svg
6+
id="icon"
7+
xmlns="http://www.w3.org/2000/svg"
8+
width="90"
9+
height="50"
10+
viewBox="0 0 48 48"
11+
>
12+
<path
13+
fill="#0F62FE"
14+
d="M38,8H10C8.9,8,8,8.9,8,10v28c0,1.1,0.9,2,2,2h28c1.1,0,2-0.9,2-2V10C40,8.9,39.1,8,38,8z M38,38H10V10h28V38z"
15+
/>
16+
<path
17+
fill="#0F62FE"
18+
d="M14,14h20v4H14V14z"
19+
/>
20+
<path
21+
fill="#0F62FE"
22+
d="M14,22h20v4H14V22z"
23+
/>
24+
<path
25+
fill="#0F62FE"
26+
d="M14,30h12v4H14V30z"
27+
/>
28+
</svg>
29+
);
30+
};
31+
32+
export default Illustration;

‎src/pages/system-admin/about-systems/about-systems.component.tsx‎

Lines changed: 44 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,8 @@ import {
2424
useRetrieveFacilityCode,
2525
useGetModules,
2626
} from "./about-systems.resources";
27+
import Illustration from "./about-systems-illustration.component";
28+
import { Header } from "../shared-components";
2729
import SystemAdminDataTable from "../shared-components/data-table";
2830
import styles from "./about-systems.scss";
2931
import coatOfArms from "../../../images/coat_of_arms.png";
@@ -209,7 +211,14 @@ function SystemInfoTable({ moduleInfo, error, loading }: {
209211
);
210212
}
211213

212-
const AboutSystemsPage = () => {
214+
interface AboutSystemsPageProps {
215+
backButton?: {
216+
label: string;
217+
onClick: () => void;
218+
};
219+
}
220+
221+
const AboutSystemsPage: React.FC<AboutSystemsPageProps> = ({ backButton }) => {
213222
const { t } = useTranslation();
214223
const [moduleInfo, setModuleInfo] = useState({});
215224
const [buildInfo, setBuildInfo] = useState({});
@@ -277,33 +286,40 @@ const AboutSystemsPage = () => {
277286
}, [moduleInfo]);
278287

279288
return (
280-
<Tabs selectedIndex={selectedTabIndex} onChange={({ selectedIndex }) => setSelectedTabIndex(selectedIndex)}>
281-
<TabList aria-label="About system tabs">
282-
<Tab>{t("systemInfo", "System Information")}</Tab>
283-
<Tab>{t("modules", "Modules")}</Tab>
284-
</TabList>
285-
<TabPanels>
286-
<TabPanel>
287-
<Tile>
288-
<OverallSystemInfo
289-
buildInfo={buildInfo}
290-
emrVersion={emrVersion}
291-
facilityCodeDetails={facilityCodeDetails}
292-
setFacilityCodeDetails={setFacilityCodeDetails}
293-
/>
294-
</Tile>
295-
</TabPanel>
296-
<TabPanel>
297-
<Tile>
298-
<SystemInfoTable
299-
moduleInfo={moduleInfo}
300-
error={isError}
301-
loading={isLoading}
302-
/>
303-
</Tile>
304-
</TabPanel>
305-
</TabPanels>
306-
</Tabs>
289+
<>
290+
<Header
291+
illustrationComponent={<Illustration />}
292+
title={t('aboutSystems', 'About Systems')}
293+
backButton={backButton}
294+
/>
295+
<Tabs selectedIndex={selectedTabIndex} onChange={({ selectedIndex }) => setSelectedTabIndex(selectedIndex)}>
296+
<TabList aria-label="About system tabs">
297+
<Tab>{t("systemInfo", "System Information")}</Tab>
298+
<Tab>{t("modules", "Modules")}</Tab>
299+
</TabList>
300+
<TabPanels>
301+
<TabPanel>
302+
<Tile>
303+
<OverallSystemInfo
304+
buildInfo={buildInfo}
305+
emrVersion={emrVersion}
306+
facilityCodeDetails={facilityCodeDetails}
307+
setFacilityCodeDetails={setFacilityCodeDetails}
308+
/>
309+
</Tile>
310+
</TabPanel>
311+
<TabPanel>
312+
<Tile>
313+
<SystemInfoTable
314+
moduleInfo={moduleInfo}
315+
error={isError}
316+
loading={isLoading}
317+
/>
318+
</Tile>
319+
</TabPanel>
320+
</TabPanels>
321+
</Tabs>
322+
</>
307323
);
308324
};
309325

‎src/pages/system-admin/cohort-management/cohort-management-illustration.component.tsx‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import React from "react";
2+
3+
const Illustration: React.FC = () => {
4+
return (
5+
<svg
6+
id="icon"
7+
xmlns="http://www.w3.org/2000/svg"
8+
width="90"
9+
height="50"
10+
viewBox="0 0 48 48"
11+
>
12+
<path
13+
fill="#0F62FE"
14+
d="M38,8H10C7.79,8,6,9.79,6,12v24c0,2.21,1.79,4,4,4h28c2.21,0,4-1.79,4-4V12C42,9.79,40.21,8,38,8z M24,14c2.21,0,4,1.79,4,4 s-1.79,4-4,4s-4-1.79-4-4S21.79,14,24,14z M34,32H14v-2c0-2.67,5.33-4,10-4s10,1.33,10,4V32z"
15+
/>
16+
</svg>
17+
);
18+
};
19+
20+
export default Illustration;

‎src/pages/system-admin/cohort-management/cohort-management.component.tsx‎

Lines changed: 36 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -11,41 +11,53 @@ import {
1111
Group,
1212
User,
1313
} from '@carbon/react/icons';
14+
import Illustration from './cohort-management-illustration.component';
15+
import { Header } from '../shared-components';
1416
import CohortRegistration from './cohort-registration.component';
1517
import PatientExit from './patient-exit.component';
1618
import styles from './cohort-management.scss';
1719

1820
interface CohortManagementProps {
19-
// Add any props if needed
21+
backButton?: {
22+
label: string;
23+
onClick: () => void;
24+
};
2025
}
2126

22-
const CohortManagement: React.FC<CohortManagementProps> = () => {
27+
const CohortManagement: React.FC<CohortManagementProps> = ({ backButton }) => {
2328
const { t } = useTranslation();
2429
const [selectedIndex, setSelectedIndex] = useState(0);
2530

2631
return (
27-
<div className={styles.cohortManagementWrapper}>
28-
<Tabs selectedIndex={selectedIndex} onChange={({ selectedIndex }) => setSelectedIndex(selectedIndex)}>
29-
<TabList aria-label="Cohort management tabs">
30-
<Tab>
31-
<Group className={styles.tabIcon} />
32-
{t('cohortRegistration', 'Cohort Registration')}
33-
</Tab>
34-
<Tab>
35-
<User className={styles.tabIcon} />
36-
{t('patientExit', 'Patient Exit')}
37-
</Tab>
38-
</TabList>
39-
<TabPanels>
40-
<TabPanel>
41-
{selectedIndex === 0 && <CohortRegistration />}
42-
</TabPanel>
43-
<TabPanel>
44-
{selectedIndex === 1 && <PatientExit />}
45-
</TabPanel>
46-
</TabPanels>
47-
</Tabs>
48-
</div>
32+
<>
33+
<Header
34+
illustrationComponent={<Illustration />}
35+
title={t('cohortManagement', 'Cohort Management')}
36+
backButton={backButton}
37+
/>
38+
<div className={styles.cohortManagementWrapper}>
39+
<Tabs selectedIndex={selectedIndex} onChange={({ selectedIndex }) => setSelectedIndex(selectedIndex)}>
40+
<TabList aria-label="Cohort management tabs">
41+
<Tab>
42+
<Group className={styles.tabIcon} />
43+
{t('cohortRegistration', 'Cohort Registration')}
44+
</Tab>
45+
<Tab>
46+
<User className={styles.tabIcon} />
47+
{t('patientExit', 'Patient Exit')}
48+
</Tab>
49+
</TabList>
50+
<TabPanels>
51+
<TabPanel>
52+
{selectedIndex === 0 && <CohortRegistration />}
53+
</TabPanel>
54+
<TabPanel>
55+
{selectedIndex === 1 && <PatientExit />}
56+
</TabPanel>
57+
</TabPanels>
58+
</Tabs>
59+
</div>
60+
</>
4961
);
5062
};
5163

‎src/pages/system-admin/components/left-panel/left-panel.component.tsx‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import React, { useEffect } from 'react';
2+
import {
3+
attach,
4+
detach,
5+
ExtensionSlot,
6+
isDesktop,
7+
useLayoutType,
8+
} from '@openmrs/esm-framework';
9+
import { SideNav } from '@carbon/react';
10+
import styles from './left-panel.scss';
11+
12+
const LeftPanel: React.FC = () => {
13+
const layout = useLayoutType();
14+
15+
useEffect(() => {
16+
attach('nav-menu-slot', 'system-admin-left-panel');
17+
return () => detach('nav-menu-slot', 'system-admin-left-panel');
18+
}, []);
19+
20+
return (
21+
isDesktop(layout) && (
22+
<SideNav
23+
aria-label="System Administration left panel"
24+
className={styles.leftPanel}
25+
expanded
26+
>
27+
<ExtensionSlot name="system-admin-left-panel-slot" />
28+
</SideNav>
29+
)
30+
);
31+
};
32+
33+
export default LeftPanel;

‎src/pages/system-admin/components/left-panel/left-panel.scss‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
@use '@carbon/colors';
2+
@use "@carbon/type";
3+
4+
.leftPanel {
5+
border-right: 1px solid colors.$gray-20;
6+
padding-top: 1rem;
7+
8+
// Left nav menu item
9+
:global(.cds--side-nav__link) {
10+
display: flex;
11+
align-items: center;
12+
gap: 0.75rem;
13+
color: colors.$gray-70;
14+
@include type.type-style("heading-compact-01");
15+
16+
svg {
17+
flex-shrink: 0;
18+
}
19+
20+
&:focus,
21+
&:hover {
22+
background-color: colors.$gray-10-hover;
23+
}
24+
25+
// Active menu item
26+
&:global(.active-left-nav-link) {
27+
color: colors.$gray-100;
28+
border-left: 0.25rem solid var(--brand-01);
29+
outline: none;
30+
padding: 0 0.75rem;
31+
background-color: colors.$gray-20;
32+
}
33+
}
34+
}
35+
36+
/* Desktop */
37+
:global(.omrs-breakpoint-gt-tablet) {
38+
:global(.cds--side-nav__link) {
39+
height: 2rem;
40+
}
41+
}
42+
43+
/* Tablet */
44+
:global(.omrs-breakpoint-lt-desktop) {
45+
:global(.cds--side-nav__link) {
46+
height: 3rem;
47+
}
48+
}

0 commit comments

Comments
 (0)