show entrypoint in problems and loading view

This commit is contained in:
Dmitry Vasilev
2023-06-16 06:13:37 +03:00
parent 2f5db0452c
commit 35de0bc70d
2 changed files with 25 additions and 8 deletions

View File

@@ -62,7 +62,7 @@
box-shadow: 1px 1px 6px 3px var(--shadow_color);
}
.tab_content:focus-within, .problems:focus-within {
.tab_content:focus-within, .problems_container:focus-within {
outline: none;
}
@@ -137,7 +137,7 @@
overflow: auto;
}
.debugger, .problems {
.debugger, .problems_container {
padding: 5px;
overflow: auto;
}
@@ -160,12 +160,17 @@
.entrypoint_select {
display: flex;
width: fit-content;
align-items: center;
margin-left: auto;
min-height: 55px;
}
.entrypoint_title {
margin-right: 0.5em;
}
.entrypoint_title:not(:first-child) {
margin-left: 1.5em;
}

View File

@@ -57,9 +57,15 @@ export class UI {
tabindex: 0,
}),
),
this.debugger_loading = el('div', 'debugger_wrapper')
this.debugger_loading = el('div', 'debugger_wrapper',
el('div', 'entrypoint_select'),
this.debugger_loading_message = el('div'),
),
),
this.problems_container = el('div', {"class": 'problems', tabindex: 0}),
this.problems_container = el('div', {"class": 'problems_container', tabindex: 0},
el('div', 'entrypoint_select'),
this.problems = el('div'),
)
),
this.files.el,
@@ -211,7 +217,13 @@ export class UI {
}
render_entrypoint_select(state) {
this.entrypoint_select.replaceChildren(
for(let select of this.root.getElementsByClassName('entrypoint_select')) {
this.do_render_entrypoint_select(state, select)
}
}
do_render_entrypoint_select(state, select) {
select.replaceChildren(
el('span', 'entrypoint_title', 'js entrypoint'),
el('select', {
click: e => e.stopPropagation(),
@@ -277,7 +289,7 @@ export class UI {
this.debugger_loaded.style = 'display: none'
this.debugger_loading.style = ''
this.debugger_loading.innerText =
this.debugger_loading_message.innerText =
state.loading_external_imports_state != null
? 'Loading external modules...'
: 'Waiting...'
@@ -307,12 +319,12 @@ export class UI {
render_problems(problems) {
this.debugger_container.style = 'display: none'
this.problems_container.style = ''
this.problems_container.innerHTML = ''
this.problems.innerHTML = ''
problems.forEach(p => {
const s = this.editor.get_session(p.module)
const pos = s.doc.indexToPosition(p.index)
const module = p.module == '' ? "*scratch*" : p.module
this.problems_container.appendChild(
this.problems.appendChild(
el('div', 'problem',
el('a', {
href: 'javascript:void(0)',