Skip to content

Commit

Permalink
Merge pull request #1134 from tiamatica/connscreen-heding
Browse files Browse the repository at this point in the history 
Added headings to connection screen+modified color, fix #1125
  • Loading branch information
@e9gille
e9gille authored Sep 19, 2023
2 parents e669615 + d4ca67f commit 3cb5933
Show file tree
Hide file tree
Showing 9 changed files with 76 additions and 59 deletions.
68 changes: 35 additions & 33 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,26 +20,28 @@
<!--Connect page-->
<div id=cn class="container-fluid" hidden>
<div id="cn_lhs" class="col col-xs-3">
<p class="cn_head">Available Configurations</p>
<div id=cn_favs></div>
<div id=cn_fav_btns class=dlg_btns>
<div class="col left">
<button id=cn_neu><u>N</u>ew Configuration...</button>
<button id=cn_tgl_cfg class="pull-right"><u>C</u>ustom options
<button id=cn_neu><u>N</u>ew...</button>
<button id=cn_tgl_cfg class="pull-right"><u>E</u>dit
<span id=cn_tgl_cfg_arrow></span>
</button>
</div>
</div>
</div>
<div id="cn_rhs">
<p class="cn_head">Configuration Details</p>
<div id="cn_rhs_inner">
<div id=cn_type_dtl>
<div class="row">
<div class="col col-xs-3"><label for=cn_fav_name>C<u>o</u>nfiguration name:</label></div>
<div class="col col-xs-9"><input id=cn_fav_name placeholder=unnamed></div>
<div class="col col-sm-12 col-md-3"><label for=cn_fav_name>C<u>o</u>nfiguration name:</label></div>
<div class="col col-sm-12 col-md-9"><input id="cn_fav_name" placeholder="unnamed" maxlength="35"></div>
</div>
<div class="row">
<div class="col col-xs-3"><label for=cn_type><u>T</u>ype:</label></div>
<div class="col col-xs-9">
<div class="col col-sm-12 col-md-3"><label for=cn_type><u>T</u>ype:</label></div>
<div class="col col-sm-12 col-md-9">
<select id=cn_type class=cn_select>
<option value=connect >Connect to an interpreter
<option value=start >Start an interpreter
Expand All @@ -48,8 +50,8 @@
</div>
</div>
<div class="row">
<div class="col col-xs-3"></div>
<div class="col col-xs-9">
<div class="col col-sm-12 col-md-3"></div>
<div class="col col-sm-12 col-md-9">
<select id=cn_subtype hidden>
<option value=raw id=cn_raw_opt>via TCP
<option value=ssh >via SSH
Expand All @@ -61,13 +63,13 @@
</div>
<div id=cn_dtl>
<div class="row">
<div class="col col-xs-3">
<div class="col col-sm-12 col-md-3">
<input type=checkbox id=cn_log_cb>
<label for=cn_log_cb>
Save protocol <u>l</u>og</span>
</label>
</div>
<div class="col col-xs-9">
<div class="col col-sm-12 col-md-9">
<div class="row">
<div class="col col-xs-12">
<input id=cn_log name=log placeholder="Log file" class=browse>
Expand All @@ -78,12 +80,12 @@
</div>
<div id=cn_tcp_dtl>
<div class="row">
<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-9"><input id=cn_tcp_host name=host size=12 placeholder=localhost></div>
<div class="col col-sm-12 col-md-3"><label for=cn_tcp_host class=cn_label><u>H</u>ost:</label></div>
<div class="col col-sm-12 col-md-9"><input id=cn_tcp_host name=host size=12 placeholder=localhost></div>
</div>
<div class="row">
<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-9"><input id=cn_tcp_port name=port size=4 placeholder=4502></div>
<div class="col col-sm-12 col-md-3"><label for=cn_tcp_port class=cn_label><u>P</u>ort:</label></div>
<div class="col col-sm-12 col-md-9"><input id=cn_tcp_port name=port size=4 placeholder=4502></div>
</div>
</div>
<div class="row">
Expand All @@ -96,23 +98,23 @@
</div>
<div id=cn_ssh hidden>
<div class="row">
<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-9"><input id=cn_ssh_port name=ssh_port size=4 placeholder=22></div>
<div class="col col-sm-12 col-md-3"><label for=cn_ssh_port class=cn_label>SSH <u>P</u>ort:</label></div>
<div class="col col-sm-12 col-md-9"><input id=cn_ssh_port name=ssh_port size=4 placeholder=22></div>
</div>
<div class="row">
<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-9"><input id=cn_ssh_user name=user size=10></div>
<div class="col col-sm-12 col-md-3"><label for=cn_ssh_user class=cn_label><u>U</u>ser:</label></div>
<div class="col col-sm-12 col-md-9"><input id=cn_ssh_user name=user size=10></div>
</div>
<div class="row">
<div class="col col-xs-3"><label for=cn_ssh_key class=cn_label><u>K</u>ey file:</label></div>
<div class="col col-xs-9">
<div class="col col-sm-12 col-md-3"><label for=cn_ssh_key class=cn_label><u>K</u>ey file:</label></div>
<div class="col col-sm-12 col-md-9">
<input id=cn_ssh_key name=ssh_key class=browse>
<button id=cn_ssh_key_dots class=tb_btn><span class="fas fa-ellipsis-h"></span></button>
</div>
</div>
<div class="row">
<div class="col col-xs-3"><label for=cn_ssh_pass class=cn_label><u>P</u>assword / passphrase:</label></div>
<div class="col col-xs-9"><input id=cn_ssh_pass type=password></div>
<div class="col col-sm-12 col-md-3"><label for=cn_ssh_pass class=cn_label><u>P</u>assword&nbsp;/&nbsp;passphrase:</label></div>
<div class="col col-sm-12 col-md-9"><input id=cn_ssh_pass type=password></div>
</div>
</div>
<div id=cn_ssl hidden>
Expand Down Expand Up @@ -182,50 +184,50 @@
</div>
<div id=cn_start hidden>
<div class="row" id=cn_exes_dtl>
<div class="col col-xs-3"><label for=cn_exes class=cn_label><u>I</u>nterpreter:</label></div>
<div class="col col-xs-9">
<div class="col col-sm-12 col-md-3"><label for=cn_exes class=cn_label><u>I</u>nterpreter:</label></div>
<div class="col col-sm-12 col-md-9">
<select id=cn_exes name=exes class="cn_select browse"></select>
<button id=cn_fetch class=tb_btn title="Fetch list of interpreters through ssh">
<span class="fas fa-sync-alt"></span>
</button>
</div>
</div>
<div class="row">
<div class="col col-xs-3"><label for=cn_exe class=cn_label>Exe path:</label></div>
<div class="col col-xs-9">
<div class="col col-sm-12 col-md-3"><label for=cn_exe class=cn_label>Exe path:</label></div>
<div class="col col-sm-12 col-md-9">
<input id=cn_exe name=exe placeholder='path to executable'>
</div>
</div>
<div class="row" id=cn_cwd_fld>
<div class="col col-xs-3"><label for=cn_cwd><u>W</u>orking directory:</label></div>
<div class="col col-xs-9"><input id=cn_cwd name=cwd></div>
<div class="col col-sm-12 col-md-3"><label for=cn_cwd><u>W</u>orking directory:</label></div>
<div class="col col-sm-12 col-md-9"><input id=cn_cwd name=cwd></div>
</div>
<div class="row">
<div class="col col-xs-3">
<div class="col col-sm-12 col-md-3">
<label for=cn_args>Arg<u>u</u>ments:</label>
<div class="tooltip">
<span class="fas fa-question-circle"></span>
<span class="tooltiptext">one per line; if needed, RIDE may also pass "+s" and "-q"</span>
</div>
</div>
<div class="col col-xs-9">
<div class="col col-sm-12 col-md-9">
<textarea id=cn_args name=args cols=40 rows=3></textarea>
</div>
</div>
<div class="row">
<div class="col col-xs-3">
<div class="col-sm-12 col-md-3">
<label for=cn_env><u>C</u>onfiguration parameters:</label>
<div class="tooltip">
<span class="fas fa-question-circle"></span>
<span class="tooltiptext">key=value, one pair per line, no extra spaces, no quoting or escaping of value</span>
</div>
</div>
<div class="col col-xs-9">
<div class="col col-sm-12 col-md-9">
<textarea id=cn_env name=env cols=40 rows=3></textarea>
</div>
</div>
<div class="row">
<div class="col col-xs-9 col-xs-offset-3">
<div class="col col col-sm-12 col-md-9 col-md-offset-3">
<span id=cn_env_add>For example:<br><a href=#>MAXWS=1G</a><br><a href=#>WSPATH=.</a><br><a href=#>HISTORY_SIZE=1000</a></span>
</div>
</div>
Expand Down
2 changes: 2 additions & 0 deletions main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,6 +78,8 @@ el.app.on('ready', () => {
y,
width,
height,
minWidth: 900,
minHeight: 650,
show: 0,
...(!D.win && !D.mac && { icon: `${__dirname}/D.png` }),
backgroundColor: '#7688d9',
Expand Down
15 changes: 10 additions & 5 deletions style/less/colour/connect_page.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,7 @@
outline: dotted black 1px;
}
>div{
border: 1px solid @DLG_BOTTOM_BG;
background:@CN_FAV_BTN_BG;
color:@CN_FAV_BTN_FG;
&:not(:first-child) {
Expand All @@ -56,11 +57,11 @@
}
}
}
#cn_lhs {
background: @CN_LHS_BG;
}
#cn, #cn_rhs {
background: linear-gradient(@CN_RHS_BG, @CN_RHS_BG2);
#cn, #cn_lhs, #cn_rhs {
background-color: @CN_BG;
select{
background-color: @CN_INPUT_BG;
}
}
#cn_env_add {
color: @CN_LABEL_COL;
Expand All @@ -79,3 +80,7 @@
font-family: monospace;
}
}
.cn_head {
background-color: @DLG_BOTTOM_BG;
color: @CN_INPUT_FG;
}
2 changes: 1 addition & 1 deletion style/less/colour/inputs.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@ input:disabled+label{
}
}
select{
background-color: @CN_SELECT_BG;
background-color: @CN_INPUT_BG;
border: 1px solid @CN_INPUT_BORDER_COL;
color:@CN_SELECT_FG;
}
2 changes: 1 addition & 1 deletion style/less/colour/preferences.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
}
#prf_content {
select{
background-color: @CN_SELECT_BG;
background-color: @CN_INPUT_BG;
color:@CN_SELECT_FG;
}
h2 {
Expand Down
28 changes: 21 additions & 7 deletions style/less/layout/connect_page.less
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,6 @@
@CN_CONTENT_TOP: 34px;
@CN_CONTENT_BTM: 64px;

#cn {
position: absolute;
z-index:2;
Expand Down Expand Up @@ -49,20 +52,20 @@
}

#cn_favs {
position:absolute;
top: 0;
position: absolute;
top: @CN_CONTENT_TOP;
left: 0;
right: 0;
bottom: 64px;
bottom: @CN_CONTENT_BTM;
overflow: auto;
>div {
line-height: 46px;
line-height: 36px;
padding: 0 2px 0 8px;
margin-bottom: 1px;
cursor: default;
.go {
float: right;
margin-top:6px;
margin-top:2px;
margin-right:5px;
width:32px;
height:32px;
Expand Down Expand Up @@ -108,12 +111,15 @@
#cn_rhs_inner {
overflow-y: auto;
overflow-x: hidden;
padding: 10px;
height:calc(100% - 64px);
padding: 2px 8px;
height:calc(100% - @CN_CONTENT_BTM - @CN_CONTENT_TOP);
button{
padding:8px;
width: auto;
}
.row .col-sm-12:first-child {
padding-bottom: 2px;
}
.col{
// >input,>select,>button{
>input:not([type=checkbox]),>select{
Expand Down Expand Up @@ -163,4 +169,12 @@

#cn_args, #cn_env {
width:100%;
}
.cn_head {
width:100%;
height: @CN_CONTENT_TOP;
display: flex;
align-items: center;
font-weight: 500;
padding: 0 8px;
}
10 changes: 4 additions & 6 deletions style/less/themes/base.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
@THEME_DARK: darken(@THEME_PRIMARY, 25);
@THEME_HIGHLIGHT: lighten(@THEME_PRIMARY, 10);
@THEME_SECONDARY_DIM:darken(@THEME_SECONDARY,5);
@THEME_SECONDARY_DARK:darken(@THEME_SECONDARY,10);
@THEME_SECONDARY_HL:lighten(@THEME_SECONDARY,5);
@THEME_WIN_BG:@THEME_PRIMARY;
@THEME_WIN_FG:black;
Expand All @@ -15,12 +16,9 @@
@DYALOG_LOGO_IMG:url(img/dyalog.png);
@RIDE_LOGO_IMG:url(img/RideLogo.png);
@SPLASH_IMG:url(img/RideSplash-Blue.png);
@CN_LHS_BG:@THEME_SECONDARY_DIM;
@CN_RHS_BG:@THEME_SECONDARY;
@CN_RHS_BG2:@THEME_SECONDARY;
@CN_INPUT_BG:@CN_LHS_BG;
@CN_BG:@THEME_SECONDARY;
@CN_INPUT_BG:@THEME_SECONDARY_DIM;
@CN_INPUT_FG:black;
@CN_SELECT_BG:@CN_LHS_BG;
@CN_SELECT_FG:@THEME_DIMMED;
@CN_INPUT_BORDER_COL:fade(#a9a9a9,30);
@CN_INPUT_DIS_BG:@CN_INPUT_BORDER_COL;
Expand All @@ -34,7 +32,7 @@
@CN_FAV_BTN_SEL_FG:white;
@CN_FAV_MENU_BTN_BG:transparent;
@CN_FAV_MENU_BTN_FG:@THEME_PRIMARY;
@CN_FAV_GO_BORDER:@CN_LHS_BG;
@CN_FAV_GO_BORDER:@THEME_SECONDARY_DIM;
@CN_RHS_BUTTON_BG:@THEME_PRIMARY;
@CN_RHS_BUTTON_FG:@THEME_DARKGREY;
@CN_LABEL_COL:@LABEL_COL;
Expand Down
4 changes: 1 addition & 3 deletions style/less/themes/dark.less
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,7 @@
@THEME_SECONDARY:#272937;
@THEME_WIN_BG:@THEME_SECONDARY_DIM;
@THEME_WIN_FG:white;
@CN_LHS_BG:@THEME_SECONDARY;
@CN_RHS_BG:@THEME_SECONDARY_DIM;
@CN_RHS_BG2:black;
@CN_BG:@THEME_SECONDARY_DARK;
@CN_INPUT_FG:white;
@CN_SELECT_FG:white;
@CN_FAV_BTN_BG:lighten(@THEME_WIN_BG,2);
Expand Down
4 changes: 1 addition & 3 deletions style/less/themes/light.less
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,7 @@
@THEME_SECONDARY:#edeff5;
@THEME_WIN_BG:@THEME_PRIMARY;
@THEME_WIN_FG:black;
@CN_LHS_BG:@THEME_SECONDARY_DIM;
@CN_RHS_BG:@THEME_SECONDARY;
@CN_RHS_BG2:@THEME_SECONDARY;
@CN_BG:@THEME_SECONDARY;
@CN_INPUT_FG:black;
@CN_SELECT_FG:@THEME_DIMMED;
@CN_FAV_BTN_BG:lighten(@THEME_SECONDARY,2);
Expand Down

0 comments on commit 3cb5933

Please sign in to comment.