Merge pull request #27 from robbiebyrd/react

Updates to appearance manager, modal windows
robbiebyrd · Feb 27, 2024 · 80a49c0 · 80a49c0
2 parents 8ee835c + b24f4e1
commit 80a49c0
Show file tree

Hide file tree

Showing 4 changed files with 64 additions and 16 deletions.
diff --git a/.env b/.env
@@ -1 +1 @@
-NEXT_PUBLIC_BASE_PATH="/platinum"
+NEXT_PUBLIC_BASE_PATH=""
diff --git a/src/app/components/ControlPanels/AppearanceManager.tsx b/src/app/components/ControlPanels/AppearanceManager.tsx
@@ -105,6 +105,32 @@ const AppearanceManager = () => {
                     />
                     <PlatinumButton onClick={cleanupIcons}>Cleanup Icons</PlatinumButton>
                 </PlatinumWindow>
+                <PlatinumWindow
+                    id="AppearanceManager_about"
+                    appId={appId}
+                    closable={false}
+                    resizable={false}
+                    zoomable={false}
+                    scrollable={false}
+                    collapsable={false}
+                    initialSize={[300, 300]}
+                    initialPosition={[50, 50]}
+                    modalWindow={true}
+                    appMenu={appMenu}
+                >
+                    <div style={{alignContent: "center",
+                        justifyContent: "center",
+                        justifyItems: "center",
+                        alignItems: "center",
+                        display: "flex",
+                        flexDirection: "column",
+                        textAlign: "center",
+                    fontFamily: "var(--header-font"}}>
+                    <img src={appIcon} alt="About" />
+                    <h1>Appearance Manager</h1>
+                    <h5>Not Copyright 1998 Apple Computer, Inc.</h5>
+                    </div>
+                </PlatinumWindow>
             </PlatinumApp>
         </PlatinumAppContext.Provider>
     );

diff --git a/src/app/components/PlatinumWindow.module.scss b/src/app/components/PlatinumWindow.module.scss
@@ -41,7 +41,11 @@
         color: black !important;
       }
 
-      .platinumWindowTitleleft, .platinumWindowTitleright {
+      .platinumWindowTitleCenter {
+        background: assets.$title-bar-center;
+      }
+
+      .platinumWindowTitleLeft, .platinumWindowTitleRight {
         background: assets.$title-bar-center;
 
         &:after {
@@ -170,7 +174,15 @@
         user-drag: none;
       }
 
-      .platinumWindowTitleleft, .platinumWindowTitleright {
+      .platinumWindowTitleCenter {
+        flex-grow: 1;
+        width: auto;
+        height: var(--window-control-size);
+        margin: calc(var(--window-padding-size) / 2) var(--window-padding-size);
+        padding: 0;
+      }
+
+      .platinumWindowTitleLeft, .platinumWindowTitleRight {
         flex-grow: 1;
         width: auto;
         height: var(--window-control-size);
@@ -255,6 +267,7 @@
   @include appearance.platinumWindowBorder;
   border-top: calc(var(--window-padding-size) / 4) solid var(--color-black) !important;
   background-color: var(--color-window-frame) !important;
+  @include appearance.platinumBoxShadow;
 }
 
 .platinumWindowContentsModalInner {

diff --git a/src/app/components/PlatinumWindow.tsx b/src/app/components/PlatinumWindow.tsx
@@ -32,7 +32,7 @@ interface PlatinumWindowProps {
 
 const PlatinumWindow: React.FC<PlatinumWindowProps> = ({
                                                            id,
-                                                           title = "Untitled",
+                                                           title = "",
                                                            icon = `${process.env.NEXT_PUBLIC_BASE_PATH || ""}/img/icons/document.png`,
                                                            appId,
                                                            hidden = false,
@@ -237,6 +237,26 @@ const PlatinumWindow: React.FC<PlatinumWindowProps> = ({
         });
     };
 
+    const titleBar = () => {
+        if (title !== "") {
+            return (
+                <>
+                    <div className={platinumWindowStyle.platinumWindowTitleLeft}></div>
+                    <div className={platinumWindowStyle.platinumWindowIcon}>
+                        <img src={icon} alt={title}/>
+                    </div>
+                    <div className={platinumWindowStyle.platinumWindowTitleText}>
+                        {title}
+                    </div>
+                    <div className={platinumWindowStyle.platinumWindowTitleRight}></div>
+                </>
+            )
+        }
+        return (
+            <div className={platinumWindowStyle.platinumWindowTitleCenter}></div>
+        )
+    }
+
     return (
         <>
             {!hidden && (
@@ -307,18 +327,7 @@ const PlatinumWindow: React.FC<PlatinumWindowProps> = ({
                             className={platinumWindowStyle.platinumWindowTitle}
                             onMouseDown={startMoveWindow}
                         >
-                            <div
-                                className={platinumWindowStyle.platinumWindowTitleleft}
-                            ></div>
-                            <div className={platinumWindowStyle.platinumWindowIcon}>
-                                <img src={icon}/>
-                            </div>
-                            <div className={platinumWindowStyle.platinumWindowTitleText}>
-                                {title}
-                            </div>
-                            <div
-                                className={platinumWindowStyle.platinumWindowTitleright}
-                            ></div>
+                            {titleBar()}
                         </div>
                         {collapsable && (
                             <div className={platinumWindowStyle.platinumWindowControlBox}>