Make connect button more prominent

It's generally the only thing the user needs to click on, so make
sure it clearly stands out.

diff --git a/app/styles/base.css b/app/styles/base.css
index 51ba9396a9dd5c98698ae4c5de4e76f0c07f6d6f..8ceda02cd15fe3e562baccc35f25643482d2b3ce 100644 (file)
--- a/app/styles/base.css
+++ b/app/styles/base.css
@@ -480,6 +480,10 @@ input[type=button]:active, select:active {
 
 /* Control bar content */
 
+#noVNC_control_bar .noVNC_logo {
+  font-size: 13px;
+}
+
 :root:not(.noVNC_connected) #noVNC_view_drag_button {
   display: none;
 }
@@ -558,9 +562,6 @@ input[type=button]:active, select:active {
 }
 
 /* Connection Controls */
-:root.noVNC_connected #noVNC_connect_button {
-  display: none;
-}
 :root:not(.noVNC_connected) #noVNC_disconnect_button {
   display: none;
 }
@@ -629,6 +630,79 @@ input[type=button]:active, select:active {
   content: url("../images/warning.svg") " ";
 }
 
+/* ----------------------------------------
+ * Connect Dialog
+ * ----------------------------------------
+ */
+
+#noVNC_connect_dlg {
+  transition: 0.5s ease-in-out;
+
+  transform: scale(0, 0);
+  visibility: hidden;
+  opacity: 0;
+}
+#noVNC_connect_dlg.noVNC_open {
+  transform: scale(1, 1);
+  visibility: visible;
+  opacity: 1;
+}
+#noVNC_connect_dlg .noVNC_logo {
+  transition: 0.5s ease-in-out;
+  padding: 10px;
+  margin-bottom: 10px;
+
+  font-size: 80px;
+  text-align: center;
+
+  border-radius: 5px;
+}
+@media (max-width: 440px) {
+  #noVNC_connect_dlg {
+    max-width: calc(100vw - 100px);
+  }
+  #noVNC_connect_dlg .noVNC_logo {
+    font-size: calc(25vw - 30px);
+  }
+}
+#noVNC_connect_button {
+  cursor: pointer;
+
+  padding: 10px;
+
+  color: white;
+  background-color: rgb(110, 132, 163);
+  border-radius: 12px;
+
+  text-align: center;
+  font-size: 20px;
+
+  box-shadow: 6px 6px 0px rgba(0, 0, 0, 0.5);
+}
+#noVNC_connect_button div {
+  margin: 2px;
+  padding: 5px 30px;
+  border: 1px solid rgb(83, 99, 122);
+  border-bottom-width: 2px;
+  border-radius: 5px;
+  background: linear-gradient(to top, rgb(110, 132, 163), rgb(99, 119, 147));
+
+  /* This avoids it jumping around when :active */
+  vertical-align: middle;
+}
+#noVNC_connect_button div:active {
+  border-bottom-width: 1px;
+  margin-top: 3px;
+}
+:root:not(.noVNC_touch) #noVNC_connect_button div:hover {
+  background: linear-gradient(to top, rgb(110, 132, 163), rgb(105, 125, 155));
+}
+
+#noVNC_connect_button img {
+  vertical-align: bottom;
+  height: 1.3em;
+}
+
 /* ----------------------------------------
  * Password Dialog
  * ----------------------------------------
@@ -732,31 +806,14 @@ input[type=button]:active, select:active {
 
 .noVNC_logo {
   color:yellow;
-  text-align:left;
   font-family: 'Orbitron', 'OrbitronTTF', sans-serif;
-  font-size: 13px;
   line-height:90%;
-  text-shadow: 1px 1px 0 #000;
+  text-shadow: 0.1em 0.1em 0 black;
 }
 .noVNC_logo span{
   color:green;
 }
 
-#noVNC_logo {
-  margin-top: 60px;
-  margin-left: 60px;
-  font-size: 180px;
-  text-shadow:
-       5px 5px 0 #000,
-      -1px -1px 0 #000,
-       1px -1px 0 #000,
-      -1px 1px 0 #000,
-       1px 1px 0 #000;
-}
-:root.noVNC_connected #noVNC_logo {
-  display: none;
-}
-
 #noVNC_bell {
   display: none;
 }

diff --git a/app/ui.js b/app/ui.js
index a8b6ec17e20ca255db915d88a509379994748e1b..0e789c043850d92324be7505b802d71735677f56 100644 (file)
--- a/app/ui.js
+++ b/app/ui.js
@@ -144,6 +144,11 @@ var UI;
 
             UI.openControlbar();
 
+            // Show the connect panel on first load unless autoconnecting
+            if (!autoconnect) {
+                UI.openConnectPanel();
+            }
+
             UI.updateViewClip();
 
             UI.updateVisualState();
@@ -1013,6 +1018,25 @@ var UI;
  *  CONNECTION
  * ------v------*/
 
+        openConnectPanel: function() {
+            document.getElementById('noVNC_connect_dlg')
+                .classList.add("noVNC_open");
+        },
+
+        closeConnectPanel: function() {
+            document.getElementById('noVNC_connect_dlg')
+                .classList.remove("noVNC_open");
+        },
+
+        toggleConnectPanel: function() {
+            if (document.getElementById('noVNC_connect_dlg')
+                .classList.contains("noVNC_open")) {
+                UI.closeConnectPanel();
+            } else {
+                UI.openConnectPanel();
+            }
+        },
+
         connect: function() {
             var host = document.getElementById('noVNC_setting_host').value;
             var port = document.getElementById('noVNC_setting_port').value;
@@ -1033,6 +1057,7 @@ var UI;
             if (!UI.initRFB()) return;
 
             UI.closeAllPanels();
+            UI.closeConnectPanel();
 
             UI.rfb.set_encrypt(UI.getSetting('encrypt'));
             UI.rfb.set_true_color(UI.getSetting('true_color'));
@@ -1059,6 +1084,7 @@ var UI;
                 UI.showStatus(reason, 'error');
             }
             UI.openControlbar();
+            UI.openConnectPanel();
         },
 
 /* ------^-------

diff --git a/vnc.html b/vnc.html
index e56065eddec00494fae83dc40b490e33000694b0..78599b7e715ce955b75790f481bc4eecbcbe4a94 100644 (file)
--- a/vnc.html
+++ b/vnc.html
@@ -249,9 +249,6 @@
             </div>
 
             <!-- Connection Controls -->
-            <input type="image" alt="Connect" src="app/images/connect.svg"
-                id="noVNC_connect_button" class="noVNC_button"
-                title="Connect" />
             <input type="image" alt="Disconnect" src="app/images/disconnect.svg"
                 id="noVNC_disconnect_button" class="noVNC_button"
                 title="Disconnect" />
@@ -264,6 +261,16 @@
     <!-- Status Dialog -->
     <div id="noVNC_status"></div>
 
+    <!-- Connect button -->
+    <div class="noVNC_center">
+        <div id="noVNC_connect_dlg">
+            <div class="noVNC_logo" translate="no"><span>no</span>VNC</div>
+            <div id="noVNC_connect_button"><div>
+                <img src="app/images/connect.svg"> Connect
+            </div></div>
+        </div>
+    </div>
+
     <!-- Password Dialog -->
     <div class="noVNC_center">
     <div id="noVNC_password_dlg" class="noVNC_panel">
@@ -286,8 +293,6 @@
     </div>
 
     <div id="noVNC_container">
-        <h1 id="noVNC_logo" class="noVNC_logo" translate="no"><span>no</span><br />VNC</h1>
-
         <!-- HTML5 Canvas -->
         <div id="noVNC_screen">
             <!-- Note that Google Chrome on Android doesn't respect any of these,