From 0219aef6d5bb7c87790695b5d234bf3b2ec6c7f3 Mon Sep 17 00:00:00 2001
From: mbecker20 <becker.maxh@gmail.com>
Date: Thu, 31 Mar 2022 03:13:59 -0700
Subject: [PATCH] add 100vw 100vh background to menu for close on click outside

---
 .../src/components/builds/tabs/build-config/Docker.tsx    | 2 +-
 frontend/src/components/builds/tabs/git-config/Git.tsx    | 2 +-
 frontend/src/components/create/Build.tsx                  | 1 -
 frontend/src/components/create/Deployment.tsx             | 1 -
 .../components/deployment/tabs/config/DockerAccount.tsx   | 2 +-
 frontend/src/components/topbar/Topbar.tsx                 | 3 ++-
 frontend/src/components/util/menu/Menu.module.css         | 8 ++++++++
 frontend/src/components/util/menu/Menu.tsx                | 3 +++
 frontend/src/components/util/menu/Selector.tsx            | 1 +
 9 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/builds/tabs/build-config/Docker.tsx b/frontend/src/components/builds/tabs/build-config/Docker.tsx
index 650522a98..914edd3e4 100644
--- a/frontend/src/components/builds/tabs/build-config/Docker.tsx
+++ b/frontend/src/components/builds/tabs/build-config/Docker.tsx
@@ -32,7 +32,7 @@ const Docker: Component<{}> = (p) => {
           }
         />
       </Flex>
-      <Show when={dockerAccounts()}>
+      <Show when={dockerAccounts() && dockerAccounts()!.length > 0}>
         <Flex justifyContent="space-between" alignItems="center">
           <div>account</div>
           <Selector
diff --git a/frontend/src/components/builds/tabs/git-config/Git.tsx b/frontend/src/components/builds/tabs/git-config/Git.tsx
index 16195fc68..4e93a1251 100644
--- a/frontend/src/components/builds/tabs/git-config/Git.tsx
+++ b/frontend/src/components/builds/tabs/git-config/Git.tsx
@@ -30,7 +30,7 @@ const Git: Component<{}> = (p) => {
           onEdit={(value) => setBuild("branch", value)}
         />
       </Flex>
-      <Show when={githubAccounts()}>
+      <Show when={githubAccounts() && githubAccounts()!.length > 0}>
         <Flex justifyContent="space-between" alignItems="center">
           <div>github account</div>
           <Selector
diff --git a/frontend/src/components/create/Build.tsx b/frontend/src/components/create/Build.tsx
index 64fc192f8..95b0a1fcf 100644
--- a/frontend/src/components/create/Build.tsx
+++ b/frontend/src/components/create/Build.tsx
@@ -52,7 +52,6 @@ const Content: Component<{ close: () => void }> = (p) => {
           onEdit={setName}
           placeholder="name"
           style={{ "font-size": "1.5rem" }}
-          onConfirm={create}
         />
         <button class="green" style={{ width: "100%" }} onClick={create}>
           create
diff --git a/frontend/src/components/create/Deployment.tsx b/frontend/src/components/create/Deployment.tsx
index 2b615d34a..66750510b 100644
--- a/frontend/src/components/create/Deployment.tsx
+++ b/frontend/src/components/create/Deployment.tsx
@@ -55,7 +55,6 @@ const Content: Component<{ serverID: string; close: () => void }> = (p) => {
           onEdit={setName}
           placeholder="name"
           style={{ "font-size": "1.5rem" }}
-          onConfirm={create}
         />
         <button class="green" style={{ width: "100%" }} onClick={create}>
           create
diff --git a/frontend/src/components/deployment/tabs/config/DockerAccount.tsx b/frontend/src/components/deployment/tabs/config/DockerAccount.tsx
index 14d7c894c..010e3d122 100644
--- a/frontend/src/components/deployment/tabs/config/DockerAccount.tsx
+++ b/frontend/src/components/deployment/tabs/config/DockerAccount.tsx
@@ -10,7 +10,7 @@ const DockerAccount: Component<{}> = (p) => {
 	const { dockerAccounts } = useAppState();
   const { deployment, setDeployment } = useConfig();
   return (
-    <Show when={dockerAccounts}>
+    <Show when={dockerAccounts() && dockerAccounts()!.length > 0}>
       <Flex
         class={combineClasses(s.ConfigItem, "shadow")}
         justifyContent="space-between"
diff --git a/frontend/src/components/topbar/Topbar.tsx b/frontend/src/components/topbar/Topbar.tsx
index 4cb63f237..f5a96fc63 100644
--- a/frontend/src/components/topbar/Topbar.tsx
+++ b/frontend/src/components/topbar/Topbar.tsx
@@ -27,11 +27,11 @@ const Topbar: Component = () => {
         </button>
         <div class={s.Monitor}>monitor</div>
       </Flex>
-
       {/* left side */}
       <Flex gap="0.5rem" alignItems="center" style={{ padding: "0rem 0.5rem" }}>
         <Menu
           show={menu() === "updates"}
+          close={() => setMenu(undefined)}
           target={
             <button
               onClick={() =>
@@ -46,6 +46,7 @@ const Topbar: Component = () => {
         />
         <Menu
           show={menu() === "account"}
+          close={() => setMenu(undefined)}
           target={
             <button
               onClick={() =>
diff --git a/frontend/src/components/util/menu/Menu.module.css b/frontend/src/components/util/menu/Menu.module.css
index b668616e7..655548c94 100644
--- a/frontend/src/components/util/menu/Menu.module.css
+++ b/frontend/src/components/util/menu/Menu.module.css
@@ -4,6 +4,14 @@
   width: fit-content;
 }
 
+.MenuBackground {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+}
+
 .Menu {
   white-space: nowrap;
   padding: 0.5rem 1rem;
diff --git a/frontend/src/components/util/menu/Menu.tsx b/frontend/src/components/util/menu/Menu.tsx
index d999253d2..cdd05902c 100644
--- a/frontend/src/components/util/menu/Menu.tsx
+++ b/frontend/src/components/util/menu/Menu.tsx
@@ -14,6 +14,7 @@ const Menu: Component<{
   content: JSXElement;
   target: JSXElement;
   show: boolean;
+  close: () => void;
   position?: Position;
   padding?: string | number;
   style?: JSX.CSSProperties;
@@ -32,6 +33,7 @@ const Menu: Component<{
     <div class={s.MenuContainer}>
       {p.target}
       <Show when={buffer()}>
+        <div class={s.MenuBackground} onClick={p.close} />
         <div
           class={combineClasses(
             s.Menu,
@@ -40,6 +42,7 @@ const Menu: Component<{
             p.show ? s.Enter : s.Exit
           )}
           style={{ padding: p.padding, ...p.style }}
+          onClick={(e) => e.stopPropagation()}
         >
           {p.content}
         </div>
diff --git a/frontend/src/components/util/menu/Selector.tsx b/frontend/src/components/util/menu/Selector.tsx
index a63b22789..e9d16fcb6 100644
--- a/frontend/src/components/util/menu/Selector.tsx
+++ b/frontend/src/components/util/menu/Selector.tsx
@@ -16,6 +16,7 @@ const Selector: Component<{
   return (
     <Menu
       show={show()}
+      close={toggle}
       target={
         <button class={p.targetClass} onClick={toggle}>
           {p.selected}