Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added headings to connection screen+modified color, #1125 #1134

Merged
merged 7 commits into from
Sep 19, 2023
Merged

Added headings to connection screen+modified color, #1125 #1134

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
16edffd
Added headings to connection screen+modified color
JackNinway Sep 9, 2023
badd583
Set min size for window, fields folded - labels
JackNinway Sep 15, 2023
ab02042
More input field folding.
JackNinway Sep 15, 2023
81b5d8b
Remove line-height from color .less.
JackNinway Sep 18, 2023
705acbd
Vertically alligned start button.
JackNinway Sep 18, 2023
9e757cc
Re-instate line-height in correct file
e9gille Sep 19, 2023
d4ca67f
Refactor style constants and simplify
e9gille Sep 19, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
68 changes: 35 additions & 33 deletions index.html
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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