From 0d063161732c819c1f627aa61adb8a0b48fe41db Mon Sep 17 00:00:00 2001
From: flouc001 <flouc001@gmail.com>
Date: Fri, 14 Jul 2017 16:15:34 +0100
Subject: [PATCH] further connect page changes

---
 index.html                   | 105 ++++++++++++++++++-----------------
 src/cn.js                    |  11 ++--
 style/less/connect_page.less |   8 ++-
 style/new-style.css          |   8 ++-
 4 files changed, 71 insertions(+), 61 deletions(-)

diff --git a/index.html b/index.html
index df3f90f5..0a29e8fb 100644
--- a/index.html
+++ b/index.html
@@ -20,35 +20,33 @@
 <!--Connect page-->
 <div id=cn class="container-fluid" hidden>
   <div id=cn_fav_btns class="row">
-    <div class="col col-sm-12">
-      <button id=cn_neu><u>N</u>ew</button>
-      <button id=cn_cln><u>C</u>lone</button>
-      <button id=cn_del><u>D</u>elete</button>
-      <button id=cn_sve><u>S</u>ave</button>
-    </div>
+    <button id=cn_neu><u>N</u>ew</button>
+    <button id=cn_cln><u>C</u>lone</button>
+    <button id=cn_del><u>D</u>elete</button>
+    <button id=cn_sve><u>S</u>ave</button>
   </div>
   <div class="row cn_inner">
-    <div id="cn_lhs" class="col col-sm-3">
+    <div id="cn_lhs" class="col col-xs-3">
       <div id=cn_favs></div>
     </div>
-    <div id="cn_rhs" class="col col-sm-9">
+    <div id="cn_rhs" class="col col-xs-9">
       <button id=cn_abt>A<u>b</u>out</button>
       <div class="row">
-        <div class="col col-sm-3"><label for=cn_fav_name>C<u>o</u>nfiguration name:</label></div>
-        <div class="col col-sm-4"><input id=cn_fav_name placeholder=unnamed></div>
+        <div class="col col-xs-3"><label for=cn_fav_name>C<u>o</u>nfiguration name:</label></div>
+        <div class="col col-xs-6"><input id=cn_fav_name placeholder=unnamed></div>
       </div>
       <div class="row">
-        <div class="col col-sm-3"><label for=cn_type><u>T</u>ype:</label></div>
-        <div class="col col-sm-4">
+        <div class="col col-xs-3"><label for=cn_type><u>T</u>ype:</label></div>
+        <div class="col col-xs-6">
           <div class="row">
-            <div class="col col-sm-6">
+            <div class="col col-xs-6">
               <select id=cn_type class=cn_select>
                 <option value=connect     title="Connect to an interpreter"                  >Connect
                 <option value=start       title="Start and connect to an interpreter"        >Start
                 <option value=listen      title="Start and connect to an interpreter via SSL">Listen
               </select>
             </div>
-            <div class="col col-sm-6">
+            <div class="col col-xs-6">
               <select id=cn_subtype hidden>
                 <option value=raw title="Connect to an interpreter via raw TCP/IP" id=cn_raw_opt>Raw
                 <option value=ssh title="Connect to an interpreter via SSH"                     >SSH
@@ -62,87 +60,90 @@
       <div id=cn_dtl>
         <div id=cn_tcp_dtl>
           <div class="row">
-            <div class="col col-sm-3"><label for=cn_tcp_host class=cn_label><u>H</u>ost:</label></div>
-            <div class="col col-sm-4"><input id=cn_tcp_host name=host size=12 placeholder=localhost></div>
+            <div class="col col-xs-3"><label for=cn_tcp_host class=cn_label><u>H</u>ost:</label></div>
+            <div class="col col-xs-6"><input id=cn_tcp_host name=host size=12 placeholder=localhost></div>
           </div>
           <div class="row">
-            <div class="col col-sm-3"><label for=cn_tcp_port class=cn_label><u>P</u>ort:</label></div>
-            <div class="col col-sm-4"><input id=cn_tcp_port name=port size=4 placeholder=4502></div>
+            <div class="col col-xs-3"><label for=cn_tcp_port class=cn_label><u>P</u>ort:</label></div>
+            <div class="col col-xs-6"><input id=cn_tcp_port name=port size=4 placeholder=4502></div>
           </div>
         </div>
         <div id=cn_ssh hidden>
           <div class="row">
-            <div class="col col-sm-3"><label for=cn_ssh_port class=cn_label>SSH <u>P</u>ort:</label></div>
-            <div class="col col-sm-4"><input id=cn_ssh_port name=ssh_port size=4 placeholder=22></div>
+            <div class="col col-xs-3"><label for=cn_ssh_port class=cn_label>SSH <u>P</u>ort:</label></div>
+            <div class="col col-xs-6"><input id=cn_ssh_port name=ssh_port size=4 placeholder=22></div>
           </div>
           <div class="row">
-            <div class="col col-sm-3"><label for=cn_ssh_user class=cn_label><u>U</u>ser:</label></div>
-            <div class="col col-sm-4"><input id=cn_ssh_user name=user size=10></div>
+            <div class="col col-xs-3"><label for=cn_ssh_user class=cn_label><u>U</u>ser:</label></div>
+            <div class="col col-xs-6"><input id=cn_ssh_user name=user size=10></div>
           </div>
           <div class="row">
-            <div class="col col-sm-3"><label for=cn_ssh_auth_type class=cn_label><u>A</u>uthentication</label></div>
-            <div class="col col-sm-4">
+            <div class="col col-xs-3"><label for=cn_ssh_auth_type class=cn_label><u>A</u>uthentication</label></div>
+            <div class="col col-xs-6">
               <div class="row">
-                <div class="col col-sm-6">
+                <div class="col col-xs-6">
                   <select id=cn_ssh_auth_type class="cn_select">
                     <option value=pass title="password is not saved">Password
                     <option value=key>Key file
                   </select>
                 </div>
-                <div class="col col-sm-6">
+                <div class="col col-xs-6">
                   <input id=cn_ssh_pass type=password>
-                  <input id=cn_ssh_key name=ssh_key><button id=cn_ssh_key_dots>Browse...</button>
+                  <input id=cn_ssh_key name=ssh_key>
                 </div>
               </div>
             </div>
+            <div class="col col-xs-2">
+              <button id=cn_ssh_key_dots>Browse...</button>
+            </div>
           </div>
           <div class="row">
-            <div class="col col-sm-4 col-sm-offset-3"><button id=cn_fetch><u>F</u>etch list of interpreters through ssh</button></div>
+            <div class="col col-xs-6 col-xs-offset-3"><button id=cn_fetch><u>F</u>etch list of interpreters through ssh</button></div>
           </div>
         </div>
         <div id=cn_ssl hidden>
           <div class="row">
-            <div class="col col-sm-7"><label class=cn_cb_label><input type=checkbox id=cn_cert_cb>Provide user c<u>e</u>rtificate <span class=cn_hint>(PEM file)</span></label></div>
+            <div class="col col-xs-9"><label class=cn_cb_label><input type=checkbox id=cn_cert_cb>Provide user c<u>e</u>rtificate <span class=cn_hint>(PEM file)</span></label></div>
           </div>
           <div class="row">
-            <div class="col col-sm-3"><label style=padding-left:2em>Cert <span class=cn_hint>(PEM file)</span></div>
-            <div class="col col-sm-4">
+            <div class="col col-xs-3"><label style=padding-left:2em>Cert <span class=cn_hint>(PEM file)</span></div>
+            <div class="col col-xs-6">
               <div class="row">
-                <div class="col col-sm-6">
+                <div class="col col-xs-9">
                   <input id=cn_cert name=cert>
                 </div>
-                <div class="col col-sm-6">
+                <div class="col col-xs-5">
                   <button id=cn_cert_dots>Browse...</button>
                 </div>
               </div>
             </div>
           </div>
           <div class="row">
-            <div class="col col-sm-3"><label style=padding-left:2em>Key <span class=cn_hint>(PEM file)</span></label></div>
-            <div class="col col-sm-4">
+            <div class="col col-xs-3"><label style=padding-left:2em>Key <span class=cn_hint>(PEM file)</span></label></div>
+            <div class="col col-xs-6">
               <div class="row">
-                <div class="col col-sm-6">
+                <div class="col col-xs-9">
                   <input id=cn_key name=key>
                 </div>
-                <div class="col col-sm-6">
+                <div class="col col-xs-5">
                   <button id=cn_key_dots>Browse...</button>
                 </div>
               </div>
             </div>
           </div>
           <div class="row">
-            <div class="col col-sm-7"><label class=cn_cb_label for=cn_subj_cb><u>V</u>alidate server subject common name matches hostname<input type=checkbox id=cn_subj_cb></label></div>
+            <div class="col col-xs-9"><label class=cn_cb_label for=cn_subj_cb><u>V</u>alidate server subject common name matches hostname<input type=checkbox id=cn_subj_cb></label></div>
           </div>
           <div class="row">
-            <div class="col col-sm-7"><label class=cn_cb_label for=cn_rootcertsdir_cb><input type=checkbox id=cn_rootcertsdir_cb>Custom root certificates <span class=cn_hint>(directory with PEM files)</span></label></div>
+            <div class="col col-xs-9"><label class=cn_cb_label for=cn_rootcertsdir_cb><input type=checkbox id=cn_rootcertsdir_cb>Custom root certificates <span class=cn_hint>(directory with PEM files)</span></label></div>
           </div>
           <div class="row">
-            <div class="col col-sm-7">
+            <div class="col col-xs-9">
               <div class="row">
-                <div class="col col-sm-6">
+                <div class="col col-xs-8">
                   <input id=cn_rootcertsdir name=rootcertsdir>
                 </div>
-                <div class="col col-sm-6">
+                <div class="col col-xs-6">
                   <button id=cn_rootcertsdir_dots>Browse...</button>
                 </div>
               </div>
@@ -151,23 +152,23 @@
         </div>
         <div id=cn_start hidden>
           <div class="row">
-            <div class="col col-sm-3"><label for=cn_exes class=cn_label><u>I</u>nterpreter:</label></div>
-            <div class="col col-sm-4"><select id=cn_exes name=exes class=cn_select></select></div>
+            <div class="col col-xs-3"><label for=cn_exes class=cn_label><u>I</u>nterpreter:</label></div>
+            <div class="col col-xs-6"><select id=cn_exes name=exes class=cn_select></select></div>
           </div>
-          <div class="row"><div class="col col-sm-7"><input id=cn_exe name=exe placeholder='path to executable'></div></div>
-          <div class="row"><div class="col col-sm-7"><label for=cn_cwd><u>W</u>orking directory:</label></div></div>
-          <div class="row"><div class="col col-sm-7"><input id=cn_cwd name=cwd></div></div>
+          <div class="row"><div class="col col-xs-9"><input id=cn_exe name=exe placeholder='path to executable'></div></div>
+          <div class="row" style="margin-top:10px"><div class="col col-xs-9"><label for=cn_cwd><u>W</u>orking directory:</label></div></div>
+          <div class="row"><div class="col col-xs-9"><input id=cn_cwd name=cwd></div></div>
           <div class="row">
-            <div class="col col-sm-7">
+            <div class="col col-xs-9">
               <label for=cn_args>Arg<u>u</u>ments:</label>
               <div class="tooltip">
                 <span class="tooltiptext">one per line; if needed, RIDE may also pass "+s" and "-q"</span>
               </div>
             </div>
           </div>
-          <div class="row"><div class="col col-sm-7"><textarea id=cn_args name=args cols=40 rows=4></textarea></div></div>
+          <div class="row"><div class="col col-xs-9"><textarea id=cn_args name=args cols=40 rows=4></textarea></div></div>
           <div class="row">
-            <div class="col col-sm-7">
+            <div class="col col-xs-9">
               <label for=cn_env><u>E</u>nvironment variables:</label>
               <div class="tooltip">
                 <span class="tooltiptext">key=value, one pair per line, no extra spaces, no quoting or escaping of value</span>
@@ -175,12 +176,12 @@
             </div>
           </div>
           <div class="row">
-            <div class="col col-sm-7">
+            <div class="col col-xs-9">
               <textarea id=cn_env name=env cols=40 rows=4></textarea>
             </div>
           </div>
           <div class="row">
-            <div class="col col-sm-7"><span id=cn_env_add>For example: <a href=#>MAXWS=1G</a>, <a href=#>WSPATH=.</a>, <a href=#>HISTORY_SIZE=1000</a>, ...</span></div>
+            <div class="col col-xs-9"><span id=cn_env_add>For example: <a href=#>MAXWS=1G</a>, <a href=#>WSPATH=.</a>, <a href=#>HISTORY_SIZE=1000</a>, ...</span></div>
           </div>
         </div>
       </div>
diff --git a/src/cn.js b/src/cn.js
index d44acb9d..34448e52 100644
--- a/src/cn.js
+++ b/src/cn.js
@@ -55,7 +55,7 @@ const rq=node_require,fs=rq('fs'),cp=rq('child_process'),net=rq('net'),os=rq('os
   q.exes.innerHTML=h+'<option value="">Other...'
   q.exes.value=q.exe.value
   if(!q.exes.value){q.exes.selectedIndex=0;q.exe.value=q.exes.value}
-  q.exe.readOnly=!!q.exes.value;
+  q.exe.disabled=!!q.exes.value;
 }
 ,validate=x=>{
   const t=x.type,p=x.port,ssh=x.subtype==='ssh'
@@ -152,7 +152,7 @@ const rq=node_require,fs=rq('fs'),cp=rq('child_process'),net=rq('net'),os=rq('os
   return!1
 }
 D.cn=_=>{ //set up Connect page
-  q=J.cn;document.title='RIDE - Connect';I.cn.hidden=0;//$(q.inner).splitter()
+  q=J.cn;I.cn.hidden=0;//$(q.inner).splitter()
   var d=D.el.app.getPath('userData'),f=d+'/connections.json'
   if (fs.existsSync(f)){
     D.conns=JSON.parse(fs.readFileSync(f).toString())
@@ -168,8 +168,8 @@ D.cn=_=>{ //set up Connect page
     const u=sel.name,v=q.fav_name.value||''
     if(u!==v){v?(sel.name=v):delete sel.name;$sel.find('.name').text(favText(sel))}
   }
-  updFormDtl();
-  q.type.onchange=_=>{sel.type=q.type.value;updFormDtl();sel.exe=sel.exe||q.exe.value;}
+  updFormDtl();function upperFirst(s){return s[0].toUpperCase()+s.substr(1)}
+  q.type.onchange=_=>{sel.type=q.type.value;document.title="RIDE - "+upperFirst(q.type.value);updFormDtl();sel.exe=sel.exe||q.exe.value;}
   q.subtype.onchange=updSubtype
   q.ssh_user.placeholder=user
   var enterConnect=function(event){if (event.keyCode==13){$('#cn_go').click()}}
@@ -201,7 +201,7 @@ D.cn=_=>{ //set up Connect page
   }
   q.exes.onchange=_=>{
     const v=q.exes.value;
-    q.exe.value=v||D.prf.otherExe();q.exe.readOnly=!!v;$(q.exe).change()
+    q.exe.value=v||D.prf.otherExe();q.exe.disabled=!!v;$(q.exe).change()
     v||q.exe.focus();D.prf.selectedExe(v)} //todo: do we still need this pref?
   q.env_add.onclick=x=>{
     if(x.target.nodeName!=='A')return
@@ -303,6 +303,7 @@ D.cn=_=>{ //set up Connect page
     }
   }catch(e){console.error(e)}
   updExes()
+  document.title="RIDE - "+upperFirst(q.type.value);
 //  q.connecting_dlg_close.onclick=_=>{q.connecting_dlg.hidden=1}
 }
 
diff --git a/style/less/connect_page.less b/style/less/connect_page.less
index 04fca842..885b57ce 100644
--- a/style/less/connect_page.less
+++ b/style/less/connect_page.less
@@ -41,6 +41,7 @@
     white-space: nowrap;
     min-height:30px;
     //min-width:15vw;
+    box-shadow: none;
     font-weight:500;
     option{
       font-weight:500;
@@ -93,14 +94,15 @@
 }
 #cn_fav_btns {
   position:static;
-	height: 5vh;
+	height: 40px;
 	overflow: hidden;
 	width: 100vw;
 	padding: 4px;
 	button {
 		min-width: 50px;
     margin-right:10px;
-    height:5vh;
+    height:40px;
+    margin-top:-5px;
 	}
   border-bottom:solid white 1px;
 }
@@ -122,10 +124,12 @@
 #cn_lhs {
   padding:0px;
 	overflow: hidden;
+  border-right:1px solid @WHITE;
 }
 #cn_rhs {
 	padding: 10px;
 	overflow-y: auto;
+  border-left:8px solid @PRIMARY;
   button{
     border-radius:3px;
     padding:8px;
diff --git a/style/new-style.css b/style/new-style.css
index 16866bf3..e0fce64d 100644
--- a/style/new-style.css
+++ b/style/new-style.css
@@ -296,6 +296,7 @@ body {
   text-overflow: ellipsis;
   white-space: nowrap;
   min-height: 30px;
+  box-shadow: none;
   font-weight: 500;
 }
 #cn select option {
@@ -346,7 +347,7 @@ body {
 }
 #cn_fav_btns {
   position: static;
-  height: 5vh;
+  height: 40px;
   overflow: hidden;
   width: 100vw;
   padding: 4px;
@@ -355,7 +356,8 @@ body {
 #cn_fav_btns button {
   min-width: 50px;
   margin-right: 10px;
-  height: 5vh;
+  height: 40px;
+  margin-top: -5px;
 }
 #cn_rhs > * > .row,
 #cn_rhs > .row,
@@ -376,10 +378,12 @@ body {
 #cn_lhs {
   padding: 0px;
   overflow: hidden;
+  border-right: 1px solid #fff;
 }
 #cn_rhs {
   padding: 10px;
   overflow-y: auto;
+  border-left: 8px solid #fc9732;
 }
 #cn_rhs button {
   border-radius: 3px;