From eefdece1d2b9a9908a5d3ba9a981b5754b87839f Mon Sep 17 00:00:00 2001
From: NI <nirui@gmx.com>
Date: Sun, 15 Sep 2019 14:29:00 +0800
Subject: [PATCH] Overlay should cover the entire pop window

---
 ui/widgets/connect.css |  5 +++
 ui/widgets/connect.vue | 74 ++++++++++++++++++++++--------------------
 2 files changed, 43 insertions(+), 36 deletions(-)

diff --git a/ui/widgets/connect.css b/ui/widgets/connect.css
index 24999ee..5c0d35d 100644
--- a/ui/widgets/connect.css
+++ b/ui/widgets/connect.css
@@ -28,6 +28,11 @@
   width: 500px;
 }
 
+#connect-frame {
+  z-index: 0;
+  position: relative;
+}
+
 #connect .window-frame {
   max-height: calc(100vh - 40px);
   overflow: auto;
diff --git a/ui/widgets/connect.vue b/ui/widgets/connect.vue
index 12db06f..fc4f888 100644
--- a/ui/widgets/connect.vue
+++ b/ui/widgets/connect.vue
@@ -24,50 +24,52 @@
     :display="display"
     @display="$emit('display', $event)"
   >
-    <h1 class="window-title">Establish connection with</h1>
+    <div id="connect-frame">
+      <h1 class="window-title">Establish connection with</h1>
 
-    <slot v-if="inputting"></slot>
+      <slot v-if="inputting"></slot>
 
-    <connect-switch
-      v-if="!inputting"
-      :knowns-length="knowns.length"
-      :tab="tab"
-      @switch="switchTab"
-    ></connect-switch>
+      <connect-switch
+        v-if="!inputting"
+        :knowns-length="knowns.length"
+        :tab="tab"
+        @switch="switchTab"
+      ></connect-switch>
 
-    <connect-new
-      v-if="tab === 'new' && !inputting"
-      :connectors="connectors"
-      @select="selectConnector"
-    ></connect-new>
+      <connect-new
+        v-if="tab === 'new' && !inputting"
+        :connectors="connectors"
+        @select="selectConnector"
+      ></connect-new>
 
-    <connect-known
-      v-if="tab === 'known' && !inputting"
-      :knowns="knowns"
-      :launcher-builder="knownsLauncherBuilder"
-      @select="selectKnown"
-      @remove="removeKnown"
-    ></connect-known>
+      <connect-known
+        v-if="tab === 'known' && !inputting"
+        :knowns="knowns"
+        :launcher-builder="knownsLauncherBuilder"
+        @select="selectKnown"
+        @remove="removeKnown"
+      ></connect-known>
 
-    <div id="connect-warning">
-      <span id="connect-warning-icon" class="icon icon-warning1"></span>
-      <div id="connect-warning-msg">
-        <p>
-          <strong>An insecured service may steal your secrets.</strong>
-          Always exam the safety of the service before using it.
-        </p>
+      <div id="connect-warning">
+        <span id="connect-warning-icon" class="icon icon-warning1"></span>
+        <div id="connect-warning-msg">
+          <p>
+            <strong>An insecured service may steal your secrets.</strong>
+            Always exam the safety of the service before using it.
+          </p>
 
-        <p>
-          Sshwifty is a free software, you can deploy it on your own trusted
-          infrastructure.
-          <a href="https://github.com/niruix/sshwifty" target="_blank"
-            >Learn more</a
-          >
-        </p>
+          <p>
+            Sshwifty is a free software, you can deploy it on your own trusted
+            infrastructure.
+            <a href="https://github.com/niruix/sshwifty" target="_blank"
+              >Learn more</a
+            >
+          </p>
+        </div>
       </div>
-    </div>
 
-    <div v-if="busy" id="connect-busy-overlay"></div>
+      <div v-if="busy" id="connect-busy-overlay"></div>
+    </div>
   </window>
 </template>