diff --git a/lib/assets/remote_execution_cell/main.css b/lib/assets/remote_execution_cell/main.css index 469b8574..0b0ed6d7 100644 --- a/lib/assets/remote_execution_cell/main.css +++ b/lib/assets/remote_execution_cell/main.css @@ -67,7 +67,7 @@ button { .input--xs { width: auto; - max-width: 100px; + max-width: 110px; } .input--text { @@ -202,3 +202,71 @@ select.input { .hidden-checkbox:hover { cursor: pointer; } + +.icon-button { + background: none; + border: none; + cursor: pointer; + padding: 4px; + display: flex; + align-items: center; + justify-content: center; + border-radius: 100%; + color: var(--gray-500); + line-height: 1; +} + +.icon-button:hover { + color: var(--gray-900); +} + +.icon-button:focus { + outline: none; +} + +.icon-button:disabled { + color: var(--gray-300); + cursor: default; +} + +a.icon-button { + text-decoration: none; +} + +a.icon-button img { + height: 1.3rem; +} + +.ri { + font-size: 1.25rem; + vertical-align: middle; + line-height: 1; +} + +.help-section { + padding: 16px; + font-size: 0.875rem; + line-height: 1.5em; + color: var(--gray-700); + border: solid 1px var(--gray-300); + background-color: rgba(248, 250, 252, 0.3); +} + +.help-section > *:not(:first-child) { + margin-top: 20px; +} + +.help-section h3 { + margin-bottom: 8px; + font-size: 1.125em; +} + +.help-section a { + color: var(--gray-900); + font-weight: 500; + text-decoration: underline; +} + +.help-section a:hover { + text-decoration: none; +} diff --git a/lib/assets/remote_execution_cell/main.js b/lib/assets/remote_execution_cell/main.js index 17bea235..28638db3 100644 --- a/lib/assets/remote_execution_cell/main.js +++ b/lib/assets/remote_execution_cell/main.js @@ -4,6 +4,9 @@ export function init(ctx, payload) { ctx.importCSS( "https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap" ); + ctx.importCSS( + "https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.min.css" + ); ctx.importCSS("main.css"); const BaseInput = { @@ -211,6 +214,12 @@ export function init(ctx, payload) { inputClass="input input--xs" :inline /> + + +
+

The Erlang/OTP version of both nodes need to match.

@@ -219,6 +228,7 @@ export function init(ctx, payload) { data() { return { fields: payload.fields, + showHelpBox: false, }; }, @@ -238,6 +248,9 @@ export function init(ctx, payload) { : this.fields["cookie"]; ctx.setSmartCellEditorIntellisenseNode(node, cookie); }, + toggleHelpBox() { + this.showHelpBox = !this.showHelpBox; + }, }, mounted() {