Merge pull request #2 from macarooni-man/master

More changes

app/images/connect.svg

@@ -79,9 +79,9 @@
          inkscape:connector-curvature="0"
          id="rect5096"
          d="m 11,1040.3622 -5,0 c -1.108,0 -2,-0.892 -2,-2 l 0,-4 c 0,-1.108 0.892,-2 2,-2 l 5,0"
-         style="opacity:1;fill:none;fill-opacity:1;stroke:#ffffff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
+         style="opacity:1;fill:none;fill-opacity:1;stroke:#223;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
       <path
-         style="opacity:1;fill:none;fill-opacity:1;stroke:#ffffff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+         style="opacity:1;fill:none;fill-opacity:1;stroke:#223;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
          d="m 14,1032.3622 5,0 c 1.108,0 2,0.892 2,2 l 0,4 c 0,1.108 -0.892,2 -2,2 l -5,0"
          id="path5099"
          inkscape:connector-curvature="0"
@@ -90,7 +90,7 @@
          inkscape:connector-curvature="0"
          id="path5101"
          d="m 9,1036.3622 7,0"
-         style="fill:none;fill-rule:evenodd;stroke:#ffffff;stroke-width:2;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+         style="fill:none;fill-rule:evenodd;stroke:#223;stroke-width:2;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
     </g>
   </g>
 </svg>

app/images/handle.svg

@@ -1,82 +1,4 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<?xml version="1.0" encoding="utf-8"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
+<svg width="11px" height="13.2px" viewBox="0 0 5 6" id="svg2" version="1.1" xmlns="http://www.w3.org/2000/svg">
-
+  <path style="stroke-linecap: square; paint-order: fill; fill: rgba(216, 216, 216, 0); stroke: rgb(193, 193, 255); fill-opacity: 0;" d="M 1.418 0.706 L 3.842 3 L 1.408 5.304"/>
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   width="5"
-   height="6"
-   viewBox="0 0 5 6"
-   id="svg2"
-   version="1.1"
-   inkscape:version="0.91 r13725"
-   sodipodi:docname="handle.svg"
-   inkscape:export-filename="/home/ossman/devel/noVNC/images/drag.png"
-   inkscape:export-xdpi="90"
-   inkscape:export-ydpi="90">
-  <defs
-     id="defs4" />
-  <sodipodi:namedview
-     id="base"
-     pagecolor="#959595"
-     bordercolor="#666666"
-     borderopacity="1.0"
-     inkscape:pageopacity="0"
-     inkscape:pageshadow="2"
-     inkscape:zoom="32"
-     inkscape:cx="1.3551778"
-     inkscape:cy="8.7800329"
-     inkscape:document-units="px"
-     inkscape:current-layer="layer1"
-     showgrid="true"
-     units="px"
-     inkscape:snap-bbox="true"
-     inkscape:bbox-paths="true"
-     inkscape:bbox-nodes="true"
-     inkscape:snap-bbox-edge-midpoints="true"
-     inkscape:object-paths="true"
-     showguides="false"
-     inkscape:window-width="1920"
-     inkscape:window-height="1136"
-     inkscape:window-x="1920"
-     inkscape:window-y="27"
-     inkscape:window-maximized="1"
-     inkscape:snap-smooth-nodes="true"
-     inkscape:object-nodes="true"
-     inkscape:snap-intersection-paths="true"
-     inkscape:snap-nodes="true"
-     inkscape:snap-global="true">
-    <inkscape:grid
-       type="xygrid"
-       id="grid4136" />
-  </sodipodi:namedview>
-  <metadata
-     id="metadata7">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
-      </cc:Work>
-    </rdf:RDF>
-  </metadata>
-  <g
-     inkscape:label="Layer 1"
-     inkscape:groupmode="layer"
-     id="layer1"
-     transform="translate(0,-1046.3622)">
-    <path
-       style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#ffffff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
-       d="m 4.0000803,1049.3622 -3,-2 0,4 z"
-       id="path4247"
-       inkscape:connector-curvature="0"
-       sodipodi:nodetypes="cccc" />
-  </g>
 </svg>

app/styles/base.css

@@ -37,7 +37,7 @@ body {
   margin:0;
   padding:0;
   /*Background image with light grey curve.*/
-  background-color:#494949;
+  background-color:#1D1D2E;
   background-repeat:no-repeat;
   background-position:right bottom;
   height:100%;
@@ -241,16 +241,16 @@ html {
 
   transition: 0.5s ease-in-out;
 
-  background-color: rgb(110, 132, 163);
+  background-color: #0A0A16;
-  border-radius: 0 10px 10px 0;
+  border-radius: 25px;
-
+  
   user-select: none;
   -webkit-user-select: none;
   -webkit-touch-callout: none; /* Disable iOS image long-press popup */
 }
 #noVNC_control_bar.noVNC_open {
-  box-shadow: 6px 6px 0px rgba(0, 0, 0, 0.5);
+  /* box-shadow: 6px 6px 0px rgba(0, 0, 0, 0.5); */
-  left: 0;
+  left: 10px;
 }
 #noVNC_control_bar::before {
   /* This extra element is to get a proper shadow */
@@ -261,16 +261,17 @@ html {
   width: 30px;
   left: -30px;
   transition: box-shadow 0.5s ease-in-out;
+  display: none;
 }
 #noVNC_control_bar.noVNC_open::before {
   box-shadow: 6px 6px 0px rgba(0, 0, 0, 0.5);
 }
 .noVNC_right #noVNC_control_bar {
   left: 100%;
-  border-radius: 10px 0 0 10px;
+  border-radius: 25px;
 }
 .noVNC_right #noVNC_control_bar.noVNC_open {
-  left: 0;
+  left: -10px;
 }
 .noVNC_right #noVNC_control_bar::before {
   visibility: hidden;
@@ -278,29 +279,29 @@ html {
 
 #noVNC_control_bar_handle {
   position: absolute;
-  left: -15px;
+  left: 40px;
-  top: 0;
+  /* top: 0; */
   transform: translateY(35px);
-  width: calc(100% + 30px);
+  width: 35px;
   height: 50px;
   z-index: -1;
   cursor: pointer;
-  border-radius: 5px;
+  border-radius: 12px;
-  background-color: rgb(83, 99, 122);
+  background-color: #0A0A16;
-  background-image: url("../images/handle_bg.svg");
+  /* background-image: url("../images/handle_bg.svg"); */
   background-repeat: no-repeat;
   background-position: right;
-  box-shadow: 3px 3px 0px rgba(0, 0, 0, 0.5);
+  /* box-shadow: 3px 3px 0px rgba(0, 0, 0, 0.5); */
 }
 #noVNC_control_bar_handle:after {
   content: "";
   transition: transform 0.5s ease-in-out;
   background: url("../images/handle.svg");
   position: absolute;
-  top: 22px; /* (50px-6px)/2 */
+  top: 18.2px; /* (50px-13.2px)/2 */
   right: 5px;
-  width: 5px;
+  width: 11px;
-  height: 6px;
+  height: 13.2px;
 }
 #noVNC_control_bar.noVNC_open #noVNC_control_bar_handle:after {
   transform: translateX(1px) rotate(180deg);
@@ -389,8 +390,8 @@ html {
 #noVNC_control_bar .noVNC_button {
   padding: 4px 4px;
   vertical-align: middle;
-  border:1px solid rgba(255, 255, 255, 0.2);
+  border: 0px;
-  border-radius: 6px;
+  border-radius: 20px;
   background-color: transparent;
   background-image: unset; /* we don't want the gradiant from input.css */
 }
@@ -707,7 +708,7 @@ html {
 
 #noVNC_connect_dlg {
   transition: 0.5s ease-in-out;
-
+  width: 35%;
   transform: scale(0, 0);
   visibility: hidden;
   opacity: 0;
@@ -721,11 +722,13 @@ html {
   transition: 0.5s ease-in-out;
   padding: 10px;
   margin-bottom: 10px;
-
   font-size: 80px;
   text-align: center;
-
   border-radius: 5px;
+  margin: 0 auto;
+  display: flex;
+  justify-content: center;
+  padding-bottom: 70px;
 }
 @media (max-width: 440px) {
   #noVNC_connect_dlg {
@@ -737,36 +740,39 @@ html {
 }
 #noVNC_connect_dlg div {
   padding: 12px;
-
+  background-color: #C1C1FF;
-  background-color: rgb(110, 132, 163);
+  color: #223;
   border-radius: 12px;
   text-align: center;
-  font-size: 20px;
+  font-size: 30px;
-
+  width: 80%;
-  box-shadow: 6px 6px 0px rgba(0, 0, 0, 0.5);
+  margin: auto;
+  /* box-shadow: 6px 6px 0px rgba(0, 0, 0, 0.2); */
 }
 #noVNC_connect_button {
   width: 100%;
   padding: 5px 30px;
-
+  text-transform: uppercase;
   cursor: pointer;
-
+  background: #C1C1FF;
-  border-color: rgb(83, 99, 122);
+  color: #223;
-  border-radius: 5px;
+  letter-spacing: 0.06em;
-
+  font-weight: 550;
-  background: linear-gradient(to top, rgb(110, 132, 163), rgb(99, 119, 147));
+  border: 0px;
-  color: white;
 
   /* This avoids it jumping around when :active */
   vertical-align: middle;
 }
 #noVNC_connect_button:hover {
-  background: linear-gradient(to top, rgb(110, 132, 163), rgb(105, 125, 155));
+  background: #C1C1FF;
 }
 
 #noVNC_connect_button img {
   vertical-align: bottom;
+  color: #223;
   height: 1.3em;
+  margin-left: -27px !important;
+  float: left;
 }
 
 /* ----------------------------------------
@@ -851,7 +857,7 @@ html {
 #noVNC_container {
   width: 100%;
   height: 100%;
-  background-color: #313131;
+  background-color: #1D1D2E;
   border-bottom-right-radius: 800px 600px;
   /*border-top-left-radius: 800px 600px;*/
 
@@ -889,6 +895,7 @@ html {
   font-family: 'Orbitron', 'OrbitronTTF', sans-serif;
   line-height: 0.9;
   text-shadow: 0.1em 0.1em 0 black;
+  width: 90%;
 }
 .noVNC_logo span{
   color:green;

app/ui.js

@@ -18,7 +18,7 @@ import Keyboard from "../core/input/keyboard.js";
 import RFB from "../core/rfb.js";
 import * as WebUtil from "./webutil.js";
 
-const PAGE_TITLE = "noVNC";
+const PAGE_TITLE = "auto-mcs";
 
 const UI = {
 
@@ -582,9 +582,11 @@ const UI = {
         if (anchor.classList.contains("noVNC_right")) {
             WebUtil.writeSetting('controlbar_pos', 'left');
             anchor.classList.remove("noVNC_right");
+            document.getElementById("noVNC_control_bar_handle").style.left = "40px";
         } else {
             WebUtil.writeSetting('controlbar_pos', 'right');
             anchor.classList.add("noVNC_right");
+            document.getElementById("noVNC_control_bar_handle").style.left = "-20px";
         }
 
         // Consider this a movement of the handle
@@ -618,10 +620,12 @@ const UI = {
         const anchor = document.getElementById('noVNC_control_bar_anchor');
         if (ptr.clientX < (window.innerWidth * 0.1)) {
             if (anchor.classList.contains("noVNC_right")) {
+                document.getElementById("noVNC_control_bar_handle").style.left = "40px";
                 UI.toggleControlbarSide();
             }
         } else if (ptr.clientX > (window.innerWidth * 0.9)) {
             if (!anchor.classList.contains("noVNC_right")) {
+                document.getElementById("noVNC_control_bar_handle").style.left = "-20px";
                 UI.toggleControlbarSide();
             }
         }
@@ -1734,7 +1738,7 @@ const UI = {
     updateDesktopName(e) {
         UI.desktopName = e.detail.name;
         // Display the desktop name in the document title
-        document.title = e.detail.name + " - " + PAGE_TITLE;
+        document.title = PAGE_TITLE + " (connected)";
     },
 
     bell(e) {

vnc.html

@@ -13,7 +13,7 @@
     or the fragment:
         http://example.com/#host=HOST&port=PORT&encrypt=1
     -->
-    <title>noVNC</title>
+    <title>auto-mcs</title>
 
     <link rel="icon" type="image/x-icon" href="app/images/icons/novnc.ico">
 
@@ -62,7 +62,7 @@
     <div id="noVNC_control_bar_anchor" class="noVNC_vcenter">
 
         <div id="noVNC_control_bar">
-            <div id="noVNC_control_bar_handle" title="Hide/Show the control bar"><div></div></div>
+            <div id="noVNC_control_bar_handle" title="Control Bar" style="transform: translateY(110px);"><div></div></div>
 
             <div class="noVNC_scroll">
 
@@ -261,7 +261,7 @@
     <!-- Connect button -->
     <div class="noVNC_center">
         <div id="noVNC_connect_dlg">
-            <p class="noVNC_logo" translate="no"><span>no</span>VNC</p>
+            <img class="noVNC_logo" src="app/images/logo.png" translate="auto-mcs">
             <div>
                 <button id="noVNC_connect_button">
                     <img alt="" src="app/images/connect.svg"> Connect