website: don't fix position initial clone popup

alirezamirian · Oct 25, 2024 · 6fa9e58 · 6fa9e58
1 parent d4572e5
commit 6fa9e58
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 10 deletions.
diff --git a/packages/example-app/src/ProjectInitializer.tsx b/packages/example-app/src/ProjectInitializer.tsx
@@ -10,7 +10,9 @@ import {
   Button,
   Popup,
   ProgressBar,
+  styled,
 } from "@intellij-platform/core";
+import { StyledPopupContainer } from "@intellij-platform/core/Popup/Popup";
 
 const defaultWorkspaceFiles = {
   ".idea/vcs.xml": `<?xml version="1.0" encoding="UTF-8"?>
@@ -73,6 +75,19 @@ const defaultInitializer = async () => {
   );
 };
 
+/**
+ * Used instead of Popup to have it not be fixed positioned, since this popup
+ * is auto rendered in website's homepage, and example-app is rendered inline
+ * there.
+ */
+const InlinePopup = styled(StyledPopupContainer)<{ minWidth?: number }>`
+  min-width: ${({ minWidth }) => (minWidth ? `${minWidth}px` : "")};
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+`;
+
 export const ProjectInitializer = ({
   children,
   autoCloneSampleRepo = false,
@@ -130,7 +145,7 @@ export const ProjectInitializer = ({
       return <>{children}</>;
     case "cloning":
       return (
-        <Popup minWidth={450}>
+        <InlinePopup minWidth={450}>
           <Popup.Layout
             header="Cloning sample git repository"
             content={
@@ -156,7 +171,7 @@ export const ProjectInitializer = ({
               </div>
             }
           />
-        </Popup>
+        </InlinePopup>
       );
     case "error":
       return (

diff --git a/packages/website/src/pages/index.tsx b/packages/website/src/pages/index.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useRef } from "react";
 import clsx from "clsx";
 import Layout from "@theme/Layout";
 import Link from "@docusaurus/Link";
@@ -7,7 +7,7 @@ import styles from "./_index/index.module.css";
 import HomepageFeatures from "./_index/HomepageFeatures";
 import { WindowFrame } from "./_index/WindowFrame/WindowFrame";
 import { LazyExampleApp } from "../components/LazyExampleApp";
-import styled from "styled-components";
+import { styled } from "@intellij-platform/core";
 import {
   PageSection2,
   PageSection2 as SectionType,
@@ -107,12 +107,9 @@ export default function Home(): JSX.Element {
                 JUI offers, rather than being a real IDE.
               </SectionType.Subtitle>
             </PageSection2.Container>
-            <ExampleWindowFrame>
-              <LazyExampleApp
-                height="calc(100vh - 200px)"
-                autoCloneSampleRepo
-              />
-            </ExampleWindowFrame>
+            <LazyExampleApp height="calc(100vh - 200px)" autoCloneSampleRepo>
+              {(app) => <ExampleWindowFrame>{app}</ExampleWindowFrame>}
+            </LazyExampleApp>
           </PageSection2>
         </main>
       </Layout>
@@ -124,4 +121,5 @@ const ExampleWindowFrame = styled(WindowFrame)`
   margin-top: 2rem;
   width: clamp(85%, 1200px, calc(100vw - 1rem));
   min-height: calc(100vh - 200px);
+  background: ${({ theme }) => theme.commonColors.panelBackground};
 `;