Merge pull request #1106 from tiamatica/connect-page

Modified connection screen and added auto start, fix #1098
Dyalog · Aug 24, 2023 · f996dc5 · f996dc5
2 parents 088214e + 6e72d36
commit f996dc5
Show file tree

Hide file tree

Showing 9 changed files with 605 additions and 569 deletions.
diff --git a/index.html b/index.html
@@ -22,7 +22,12 @@
   <div id="cn_lhs" class="col col-xs-3">
     <div id=cn_favs></div>
     <div id=cn_fav_btns class=dlg_btns>
-      <div class="col col-xs-12"><button id=cn_neu><u>N</u>ew Configuration</button></div>
+      <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
+          <span id=cn_tgl_cfg_arrow></span>
+        </button>
+      </div>
     </div>
   </div>
   <div id="cn_rhs">
@@ -35,22 +40,21 @@
         <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="row">
-              <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-xs-6">
-                <select id=cn_subtype hidden>
-                  <option value=raw title="Connect to an interpreter via raw TCP/IP" id=cn_raw_opt>TCP
-                  <option value=ssh title="Connect to an interpreter via SSH"                     >SSH
-                  <option value=ssl title="Connect to an interpreter using TLS/SSL"  id=cn_ssl_opt>TLS/SSL
-                </select>
-              </div>
-            </div>
+            <select id=cn_type class=cn_select>
+              <option value=connect     >Connect to an interpreter
+              <option value=start       >Start an interpreter
+              <option value=listen      >Listen for an incoming connection
+            </select>
+          </div>
+        </div>
+        <div class="row">
+          <div class="col col-xs-3"></div>
+          <div class="col col-xs-9">
+            <select id=cn_subtype hidden>
+              <option value=raw  id=cn_raw_opt>via TCP
+              <option value=ssh               >via SSH
+              <option value=ssl   id=cn_ssl_opt>via TLS/SSL
+            </select>
           </div>
         </div>
         <hr>
@@ -229,14 +233,12 @@
       </div>
     </div>
     <div class=dlg_btns>
-      <div class="col col-xs-9 col-md-9 left">
+      <div class="col left">
         <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>
-        <button id=cn_def>Make <u>D</u>efault</button>
-      </div>
-      <div class="col col-xs-3 col-md-3 right">
-        <button id=cn_go><u>C</u>onnect</button>
+        <button id=cn_def><u>M</u>ake Default</button>
+        <button id=cn_go class="pull-right"><u>O</u>k</button>
       </div>
     </div>
   </div>
@@ -532,6 +534,9 @@ <h2>Contextual help</h2>
       <p><input id=code_sqt type=checkbox><label for=code_sqt>Show tips for <u>g</u>lyphs</label></p>
       <hr>
       <h2>Session</h2>
+      <p><input id=code_ast type=checkbox><label for=code_ast>
+          Auto-start default configuration when RIDE starts</label>
+      </p>
       <p><input id=code_apw type=checkbox><label for=code_apw>Auto <u>P</u>W</label></p>
       <p><input id=code_ph  type=checkbox><label for=code_ph >Persistent history</label>
         <input id=code_phs size=4><label for=code_phs> lines</label>

diff --git a/src/cn.js b/src/cn.js
@@ -268,10 +268,9 @@
       || (q.type.value === 'start' && q.subtype.value === 'ssl')) q.subtype.value = 'raw';
     updSubtype();
     q.ssl_opt.hidden = q.type.value !== 'connect';
-    q.raw_opt.text = q.type.value === 'start' ? 'Local' : 'TCP';
+    q.raw_opt.text = q.type.value === 'start' ? 'on this computer' : 'via TCP';
     q.fetch.hidden = q.type.value !== 'start';
     q.start.hidden = q.fetch.hidden;
-    q.go.innerHTML = `<u>${q.type.value[0]}</u>${q.type.value.substr(1)}`;
   };
   const validate = (x) => {
     const t = x.type;
@@ -1032,11 +1031,20 @@
     };
     q.sve.onclick = () => { save(); };
     q.neu.onclick = () => {
+      if ($(q.rhs).is(':hidden')) {
+        q.tgl_cfg.click();
+      }
       const $e = $(favDOM({}));
       q.favs.appendChild($e[0]);
       $(q.favs).list('select', $e.index());
       q.fav_name.focus();
     };
+    q.tgl_cfg.onclick = () => {
+      I.cn.toggleMaximize();
+      const maximise = $(q.rhs).is(':visible');
+      q.tgl_cfg_arrow.innerHTML = `<i class="fas fa-chevron-double-${maximise ? 'right' : 'left'}"></i>`;
+    };
+    q.tgl_cfg.click();
     q.cln.onclick = () => {
       if (sel) {
         const cnf = favDOM({
@@ -1095,7 +1103,13 @@
     const defcfg = D.prf.defaultConfig();
     let i = [...q.favs.children].findIndex((x) => x.cnData.name === defcfg);
     if (i < 0) i = [...q.favs.children].findIndex((x) => x.cnData.preset);
-    setTimeout(() => $(q.favs).list('select', Math.max(0, i)), 1);
+    setTimeout(() => {
+      $(q.favs).list('select', Math.max(0, i));
+      const autoStart = process.env.RIDE_AUTO_START ? process.env.RIDE_AUTO_START === '1' : D.prf.autoStart();
+      if (autoStart) {
+        q.go.click();
+      }
+    }, 1);
   };
 
   module.exports = () => {

diff --git a/src/km.js b/src/km.js
@@ -85,7 +85,13 @@
       nodeRequire('child_process').spawn(p[0], p.slice(1), {
         detached: true,
         stdio: ['ignore', 'ignore', 'ignore'],
-        env: $.extend({}, process.env, { RIDE_CONNECT: '', RIDE_SPAWN: '', DYALOG_SPAWN: '' }),
+        env: {
+          ...process.env,
+          RIDE_CONNECT: '',
+          RIDE_SPAWN: '',
+          DYALOG_SPAWN: '',
+          RIDE_AUTO_START: 0,
+        },
       });
       if (D.ide.dead) window.close();
     },

diff --git a/src/prf.js b/src/prf.js
@@ -7,6 +7,7 @@
 'use strict'
 D.prf = {};
 [ // name                 default (type is determined from default value; setter enforces type and handles encoding)
+  ['autoStart',          0], // Auto-start default configuration when RIDE starts
   ['autoCloseBrackets',  1], //whether to insert {}[]() in pairs
   ['autocompletion',     'classic'],
   ['autoPW',             0], // update PW on resize of window

diff --git a/src/prf_code.js b/src/prf_code.js
@@ -23,6 +23,7 @@
     },
     load() {
       const p = D.prf;
+      q.ast.checked = !!p.autoStart();
       q.mb.checked = !!p.matchBrackets();
       q.mme.checked = !!p.minimapEnabled();
       q.mmrc.checked = !!p.minimapRenderCharacters();
@@ -51,6 +52,7 @@
     activate() { q.mb.focus(); },
     save() {
       const p = D.prf;
+      p.autoStart          (q.ast.checked);
       p.blockCursor        (q.bc.checked);
       p.cursorBlinking     (q.cb.value);
       p.matchBrackets      (q.mb.checked);

diff --git a/style/dark-theme.css b/style/dark-theme.css
@@ -1,10 +1,3 @@
-#abt_ta {
-  border: 1px solid rgba(169, 169, 169, 0.3);
-  background-color: #272937;
-  color: white;
-  cursor: auto;
-  font-family: apl, monospace;
-}
 #cn input:not([type=button]):not([type=file]):not([type=submit]):not([type=checkbox]),
 #cn textarea {
   border: 1px solid rgba(169, 169, 169, 0.3);
@@ -85,6 +78,37 @@
   font-size: 16px;
   font-family: monospace;
 }
+#abt_ta {
+  border: 1px solid rgba(169, 169, 169, 0.3);
+  background-color: #272937;
+  color: white;
+  cursor: auto;
+  font-family: apl, monospace;
+}
+.ctl_listview {
+  background-color: #1c1e28;
+  color: white;
+}
+.ctl_listview tr {
+  background-color: rgba(118, 136, 217, 0.5);
+  border-bottom: 1px solid #1c1e28;
+}
+.ctl_listview tr:hover {
+  background-color: rgba(118, 136, 217, 0.25);
+}
+.ctl_listview tr.selected {
+  background-color: #1c1e28;
+}
+#debug {
+  background: #1c1e28;
+}
+#debug .ctl_listview_header {
+  background-color: #7688d9;
+  color: white;
+}
+#debug .ctl_listview_header h2 {
+  font-size: 16px;
+}
 /*various dialogs*/
 #dlg_modal_overlay {
   background-color: black;
@@ -135,30 +159,6 @@
   text-align: left;
   border: 1px solid transparent;
 }
-.ctl_listview {
-  background-color: #1c1e28;
-  color: white;
-}
-.ctl_listview tr {
-  background-color: rgba(118, 136, 217, 0.5);
-  border-bottom: 1px solid #1c1e28;
-}
-.ctl_listview tr:hover {
-  background-color: rgba(118, 136, 217, 0.25);
-}
-.ctl_listview tr.selected {
-  background-color: #1c1e28;
-}
-#debug {
-  background: #1c1e28;
-}
-#debug .ctl_listview_header {
-  background-color: #7688d9;
-  color: white;
-}
-#debug .ctl_listview_header h2 {
-  font-size: 16px;
-}
 /*Golden Layout*/
 .lm_goldenlayout {
   background: #272937 !important;
@@ -345,42 +345,6 @@ select {
   border-top: 1px solid black;
   border-bottom: 1px solid #2e303e;
 }
-/*menu (see ../src/menu.js for the DOM structure)*/
-.menu {
-  background-color: #edeff5;
-  border-bottom: solid grey 1px;
-}
-.menu a,
-.menu a:hover {
-  color: black;
-  font-size: 0.8em;
-}
-.menu .m-open {
-  background: rgba(0, 0, 0, 0.2);
-}
-.menu .m-open .m-top {
-  border-color: transparent;
-}
-.menu .m-box {
-  background-color: white;
-  border-color: rgba(0, 0, 0, 0.2);
-}
-.menu .m-box a {
-  border: none;
-  border-color: #edeff5;
-}
-.menu .m-box a .m-shc {
-  color: white;
-}
-.menu .m-box a:focus {
-  background: rgba(0, 0, 0, 0.2);
-}
-.menu .m-box a.m-checked {
-  background: transparent 5px center no-repeat url(img/menu_chk.png);
-}
-.menu .m-box a:focus.m-checked {
-  background: rgba(0, 0, 0, 0.2) 5px center no-repeat url(img/menu_chk.png);
-}
 .breakpointarea {
   border-right: 1px solid #272937;
   cursor: pointer;
@@ -448,6 +412,42 @@ select {
 .sessionmargin.modified::before {
   color: red;
 }
+/*menu (see ../src/menu.js for the DOM structure)*/
+.menu {
+  background-color: #edeff5;
+  border-bottom: solid grey 1px;
+}
+.menu a,
+.menu a:hover {
+  color: black;
+  font-size: 0.8em;
+}
+.menu .m-open {
+  background: rgba(0, 0, 0, 0.2);
+}
+.menu .m-open .m-top {
+  border-color: transparent;
+}
+.menu .m-box {
+  background-color: white;
+  border-color: rgba(0, 0, 0, 0.2);
+}
+.menu .m-box a {
+  border: none;
+  border-color: #edeff5;
+}
+.menu .m-box a .m-shc {
+  color: white;
+}
+.menu .m-box a:focus {
+  background: rgba(0, 0, 0, 0.2);
+}
+.menu .m-box a.m-checked {
+  background: transparent 5px center no-repeat url(img/menu_chk.png);
+}
+.menu .m-box a:focus.m-checked {
+  background: rgba(0, 0, 0, 0.2) 5px center no-repeat url(img/menu_chk.png);
+}
 #prf_dlg hr {
   border-top: 1px solid black;
   border-bottom: 1px solid #2e303e;
@@ -693,19 +693,6 @@ body {
 #sb_right > div {
   border-left: 1px solid #272937;
 }
-#toast-container {
-  font-family: Roboto;
-  font-size: 14px;
-  line-height: 20px;
-}
-#toast-container > div {
-  -moz-box-shadow: 0 0 12px rgba(0, 0, 0, 0.5);
-  -webkit-box-shadow: 0 0 12px rgba(0, 0, 0, 0.5);
-  box-shadow: 0 0 12px rgba(0, 0, 0, 0.5);
-}
-#status_body {
-  background-color: #1c1e28;
-}
 .tooltip {
   color: #7688d9;
 }
@@ -717,6 +704,17 @@ body {
 .tooltip .tooltiptext::after {
   border-color: transparent #1c1e28 transparent transparent;
 }
+#status_body {
+  background-color: #1c1e28;
+}
+#vt_bln {
+  border: solid black 1px;
+  background-color: black;
+  color: white;
+}
+#vt_tri {
+  border-color: black;
+}
 .toolbar {
   background-color: #1c1e28;
   border-bottom: 1px solid #272937;
@@ -744,14 +742,6 @@ body {
   border: 0 solid #272937;
   border-right-width: 1px;
 }
-#vt_bln {
-  border: solid black 1px;
-  background-color: black;
-  color: white;
-}
-#vt_tri {
-  border-color: black;
-}
 #wse {
   background-color: #1c1e28;
   color: white;
@@ -768,3 +758,13 @@ body {
   background-color: rgba(118, 136, 217, 0.75);
   outline: rgba(118, 136, 217, 0.75);
 }
+#toast-container {
+  font-family: Roboto;
+  font-size: 14px;
+  line-height: 20px;
+}
+#toast-container > div {
+  -moz-box-shadow: 0 0 12px rgba(0, 0, 0, 0.5);
+  -webkit-box-shadow: 0 0 12px rgba(0, 0, 0, 0.5);
+  box-shadow: 0 0 12px rgba(0, 0, 0, 0.5);
+}