generated from rnentjes/kotlin-server-web-undertow
Update ConsoleView input behavior with auto-focus, enhance console styling, and refine RegisterView rendering
This commit is contained in:
@@ -1,5 +1,6 @@
|
||||
package mtmc.view
|
||||
|
||||
import kotlinx.browser.window
|
||||
import kotlinx.html.div
|
||||
import kotlinx.html.input
|
||||
import kotlinx.html.js.onKeyUpFunction
|
||||
@@ -9,6 +10,7 @@ import mtmc.mainView
|
||||
import mtmc.os.shell.Shell
|
||||
import nl.astraeus.komp.HtmlBuilder
|
||||
import nl.astraeus.komp.Komponent
|
||||
import nl.astraeus.komp.currentElement
|
||||
import org.w3c.dom.HTMLInputElement
|
||||
import org.w3c.dom.events.KeyboardEvent
|
||||
|
||||
@@ -33,8 +35,13 @@ class ConsoleView(
|
||||
span("console-prompt") {
|
||||
+"mtmc$"
|
||||
}
|
||||
input {
|
||||
input(classes = "console-input") {
|
||||
value = input
|
||||
autoFocus = true
|
||||
val inputElement = currentElement() as? HTMLInputElement
|
||||
window.setTimeout({
|
||||
inputElement?.focus()
|
||||
}, 0)
|
||||
onKeyUpFunction = { it ->
|
||||
(it as? KeyboardEvent)?.let { ke ->
|
||||
(ke.target as? HTMLInputElement)?.let { inp ->
|
||||
|
||||
@@ -18,8 +18,6 @@ class RegisterView(
|
||||
|
||||
override fun HtmlBuilder.render() {
|
||||
div {
|
||||
+"Register view"
|
||||
|
||||
table("register-table") {
|
||||
for (index in 0..<16) {
|
||||
showRegister(index)
|
||||
|
||||
@@ -118,6 +118,26 @@ table.register-table tr td.register-lights {
|
||||
|
||||
/* console */
|
||||
|
||||
.console {
|
||||
color: #ffcc00;
|
||||
background-color: #35291c;
|
||||
white-space: pre-wrap;
|
||||
font-family: monospace;
|
||||
font-weight: bold;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.console-prompt {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
input.console-input {
|
||||
color: #ffcc00;
|
||||
background-color: #35291c;
|
||||
border: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.small-button {
|
||||
transform: rotate(-25deg) translateY(20px) translateX(-20px);
|
||||
margin: 2px;
|
||||
@@ -127,4 +147,4 @@ table.register-table tr td.register-lights {
|
||||
border-radius: 8px;
|
||||
color: whitesmoke;
|
||||
box-shadow: rgb(0, 0, 0, .2) 2px 2px 1px 1px;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user