Skip to content

Commit

Permalink
further connect page changes
Browse files Browse the repository at this point in the history
  • Loading branch information
@flouc001
flouc001 committed Jul 14, 2017
1 parent e9e2402 commit 0d06316
Show file tree
Hide file tree
Showing 4 changed files with 71 additions and 61 deletions.
105 changes: 53 additions & 52 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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>
Expand All @@ -151,36 +152,36 @@
</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>
</div>
</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>
Expand Down
11 changes: 6 additions & 5 deletions src/cn.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down Expand Up @@ -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())
Expand All @@ -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()}}
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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}
}

Expand Down
8 changes: 6 additions & 2 deletions style/less/connect_page.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,7 @@
white-space: nowrap;
min-height:30px;
//min-width:15vw;
box-shadow: none;
font-weight:500;
option{
font-weight:500;
Expand Down Expand Up @@ -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;
}
Expand All @@ -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;
Expand Down
8 changes: 6 additions & 2 deletions style/new-style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -296,6 +296,7 @@ body {
text-overflow: ellipsis;
white-space: nowrap;
min-height: 30px;
box-shadow: none;
font-weight: 500;
}
#cn select option {
Expand Down Expand Up @@ -346,7 +347,7 @@ body {
}
#cn_fav_btns {
position: static;
height: 5vh;
height: 40px;
overflow: hidden;
width: 100vw;
padding: 4px;
Expand All @@ -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,
Expand All @@ -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;
Expand Down

0 comments on commit 0d06316

Please sign in to comment.