diff --git a/packages/apps/esm-implementer-tools-app/src/global-implementer-tools-navbar.tsx b/packages/apps/esm-implementer-tools-app/src/global-implementer-tools-navbar.tsx
new file mode 100644
index 000000000..772c35f6f
--- /dev/null
+++ b/packages/apps/esm-implementer-tools-app/src/global-implementer-tools-navbar.tsx
@@ -0,0 +1,139 @@
+import React, { useState } from "react";
+import {
+ Tablet,
+ Laptop,
+ Download,
+ Document,
+ Development,
+ Touch_1,
+} from "@carbon/react/icons";
+import {
+ Layer,
+ Header,
+ HeaderContainer,
+ Tile,
+ Theme,
+ HeaderGlobalBar,
+ HeaderGlobalAction,
+ SideNav,
+ HeaderMenuItem,
+ HeaderNavigation,
+ HeaderPanel,
+} from "@carbon/react";
+import { BrowserRouter } from "react-router-dom";
+import { ConfigurableLink, useConfig, useStore } from "@openmrs/esm-framework";
+import { implementerToolsStore } from "./store";
+import styles from "./implementer-tools.styles.scss";
+import { useTranslation } from "react-i18next";
+
+const ImplementerNavbar: React.FC = () => {
+ const { isOpen } = useStore(implementerToolsStore);
+ const { t } = useTranslation();
+ const [showPages, setShowPages] = useState(false);
+ const { logo } = useConfig();
+
+ return isOpen ? (
+
+
+
(
+ <>
+
+
+
+ >
+ )}
+ />
+
+
+ ) : null;
+};
+export default ImplementerNavbar;
diff --git a/packages/apps/esm-implementer-tools-app/src/global-implementer-tools.component.tsx b/packages/apps/esm-implementer-tools-app/src/global-implementer-tools.component.tsx
index 554fe9a6f..4e5a7f265 100644
--- a/packages/apps/esm-implementer-tools-app/src/global-implementer-tools.component.tsx
+++ b/packages/apps/esm-implementer-tools-app/src/global-implementer-tools.component.tsx
@@ -16,7 +16,7 @@ const GlobalImplementerToolsButton: React.FC = () => {
data-testid="globalImplementerToolsButton"
>
- {isOpen ? : }
+ {isOpen ? : }
diff --git a/packages/apps/esm-implementer-tools-app/src/implementer-tools.component.tsx b/packages/apps/esm-implementer-tools-app/src/implementer-tools.component.tsx
index 2d6468915..08b5e00d9 100644
--- a/packages/apps/esm-implementer-tools-app/src/implementer-tools.component.tsx
+++ b/packages/apps/esm-implementer-tools-app/src/implementer-tools.component.tsx
@@ -23,7 +23,12 @@ function PopupHandler() {
const frontendModules = useFrontendModules();
const backendDependencies = useBackendDependencies();
const [shouldShowNotification, setShouldShowNotification] = useState(false);
+ const { isOpen, isUIEditorEnabled, openTabIndex } = useStore(
+ implementerToolsStore
+ );
+
const { t } = useTranslation();
+
useEffect(() => {
// displaying toast if modules are missing
setShouldShowNotification(
@@ -47,9 +52,17 @@ function PopupHandler() {
}
}, [t, shouldShowNotification]);
- const { isOpen, isUIEditorEnabled, openTabIndex } = useStore(
- implementerToolsStore
- );
+ useEffect(() => {
+ if (!isOpen) {
+ const homeDivElement = document.querySelector(
+ `div[id^="single-spa-application:@openmrs/esm-home-app-page"]`
+ ) as HTMLDivElement;
+ if (homeDivElement) {
+ homeDivElement.style.display = "unset";
+ }
+ }
+ }, [isOpen]);
+
return (
<>
{isOpen ? (
diff --git a/packages/apps/esm-implementer-tools-app/src/implementer-tools.styles.scss b/packages/apps/esm-implementer-tools-app/src/implementer-tools.styles.scss
index fa62baaa2..b274d5c8c 100644
--- a/packages/apps/esm-implementer-tools-app/src/implementer-tools.styles.scss
+++ b/packages/apps/esm-implementer-tools-app/src/implementer-tools.styles.scss
@@ -21,7 +21,7 @@
// Chevron button - implementer-tools component
.chevronImplementerToolsButton {
position: fixed;
- bottom: 0;
+ top: 0;
left: calc(50vw - spacing.$spacing-05);
z-index: 9999;
@@ -33,8 +33,103 @@
cursor: pointer;
transition: all 0.1s ease-in-out;
}
+}
+
+.spacedLogo {
+ margin-left: 1rem;
+ padding-right: 1rem;
+}
+
+.implementerToolsHeader,
+.implementerToolsGlobalBar {
+ border-bottom: 1px solid $color-gray-90;
+}
+
+.implementerToolsHeader,
+.implementerToolsHeader button,
+.implementerToolsHeader a,
+.implementerToolsHeader nav {
+ background-color: $color-gray-80;
+ color: $ui-03;
+}
+
+.implementerToolsHeader button:hover,
+.implementerToolsHeader button:active,
+.implementerToolsHeader button:focus,
+.implementerToolsHeader a:hover,
+.implementerToolsHeader a:active,
+.implementerToolsHeader a:focus {
+ background-color: $color-gray-70;
+ border-color: transparent !important;
+ color: $ui-02;
+}
+
+.implementerToolsHeader nav::before {
+ background-color: #525252;
+}
+
+.selectElement {
+ position: relative;
+ top: 6.25rem;
+ padding-left: 1rem;
+ padding-right: 1rem;
+ text-align: center;
+}
+
+.selectElement div {
+ height: 12rem;
+}
+
+.selectionText {
+ h5,
+ svg,
+ p {
+ margin-top: 1rem;
+ }
+
+ h5,
+ svg {
+ color: white;
+ }
+
+ p {
+ font-size: small;
+ }
+}
+
+.sideNavComponents {
+ left: 3rem;
+}
- div:hover {
- padding: spacing.$spacing-03 0;
+.sideRailNav {
+ height: 100%;
+ width: 3rem;
+ position: fixed;
+ z-index: 1;
+ top: 3rem;
+ left: 0;
+ background-color: $color-gray-80;
+ transition: 0.5s ease;
+ overflow-x: hidden;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ border-right: 1px solid $color-gray-90;
+
+ div {
+ text-align: center;
+ background-color: $color-gray-80;
+ color: $ui-03;
+ height: 3rem;
+ width: 3rem;
+ display: grid;
+ place-items: center;
+ }
+ div:hover,
+ div:active,
+ div:focus {
+ background-color: $color-gray-70;
+ border-color: transparent !important;
+ color: $ui-02;
}
}
diff --git a/packages/apps/esm-implementer-tools-app/src/popup/popup.component.tsx b/packages/apps/esm-implementer-tools-app/src/popup/popup.component.tsx
index 1c54c9bf1..58ec2b11e 100644
--- a/packages/apps/esm-implementer-tools-app/src/popup/popup.component.tsx
+++ b/packages/apps/esm-implementer-tools-app/src/popup/popup.component.tsx
@@ -1,6 +1,4 @@
import React, { useMemo, useState } from "react";
-import { Button, ContentSwitcher, Switch } from "@carbon/react";
-import { Close } from "@carbon/react/icons";
import { useTranslation } from "react-i18next";
import { Configuration } from "../configuration/configuration.component";
import type { FrontendModule } from "../types";
@@ -8,6 +6,9 @@ import { FrontendModules } from "../frontend-modules/frontend-modules.component"
import { BackendDependencies } from "../backend-dependencies/backend-dependencies.component";
import type { ResolvedDependenciesModule } from "../backend-dependencies/openmrs-backend-dependencies";
import styles from "./popup.styles.scss";
+import ImplementerNavbar from "../global-implementer-tools-navbar";
+import { useStore, useLayoutType } from "@openmrs/esm-framework";
+import { implementerToolsStore } from "../store";
interface DevToolsPopupProps {
close(): void;
@@ -23,6 +24,8 @@ export default function Popup({
}: DevToolsPopupProps) {
const { t } = useTranslation();
const [activeTab, setActiveTab] = useState(0);
+ const isTablet = useLayoutType() === "tablet";
+
const tabContent = useMemo(() => {
if (activeTab == 0) {
return ;
@@ -33,41 +36,74 @@ export default function Popup({
}
}, [activeTab, backendDependencies, frontendModules]);
- return (
-
-
-
-
{
- setActiveTab((c as any).index);
+ const currentPageURL = window.location.href;
+ const { isOpen } = useStore(implementerToolsStore);
+
+ const iframeContent = useMemo(() => {
+ const homeDivElement = document.querySelector(
+ `div[id^="single-spa-application:@openmrs/esm-home-app-page"]`
+ ) as HTMLDivElement;
+ const applyStyles = () => {
+ if (homeDivElement) {
+ if (isOpen) {
+ homeDivElement.style.display = "none";
+ } else {
+ }
+ }
+ };
+
+ const removeImplementerToolsDiv = (iframeBody: HTMLElement | undefined) => {
+ const divElements = iframeBody?.querySelectorAll(
+ `div[id^="single-spa-application:@openmrs/esm-implementer-tools-app-page"]`
+ ) as Array | undefined;
+ divElements?.forEach((div) => {
+ div.remove();
+ });
+ };
+ return (
+
+
+
-
-
- {tabContent}
-
+ );
+ }, [currentPageURL, isOpen, isTablet]);
+
+ return (
+ <>
+
+ {iframeContent}
+ >
);
}
diff --git a/packages/apps/esm-implementer-tools-app/src/popup/popup.styles.scss b/packages/apps/esm-implementer-tools-app/src/popup/popup.styles.scss
index a9c8d9539..47acb33d2 100644
--- a/packages/apps/esm-implementer-tools-app/src/popup/popup.styles.scss
+++ b/packages/apps/esm-implementer-tools-app/src/popup/popup.styles.scss
@@ -33,3 +33,17 @@
background: #e0e0e0;
padding: 0.25rem;
}
+
+.implementerToolsIframe {
+ position: relative;
+ left: 3rem;
+ height: 100vh;
+}
+
+.iframeTabletLayout {
+ margin: 0 2rem;
+ width: 50%;
+}
+
+.iframeDesktopLayout {
+}
\ No newline at end of file
diff --git a/packages/framework/esm-styleguide/src/_vars.scss b/packages/framework/esm-styleguide/src/_vars.scss
index 2740cb6f7..8b367ac60 100644
--- a/packages/framework/esm-styleguide/src/_vars.scss
+++ b/packages/framework/esm-styleguide/src/_vars.scss
@@ -8,6 +8,8 @@ $text-03: #a8a8a8;
$ui-background: #ffffff;
$color-gray-30: #c6c6c6;
$color-gray-70: #525252;
+$color-gray-80: #393939;
+$color-gray-90: #262626;
$color-gray-100: #161616;
$color-blue-60-2: #0f62fe;
$color-blue-10: #edf5ff;