This includes temporary AI-generated frontend scaffolding, none of this will be used in production. It was just used during development for the backend.
49 lines
1.3 KiB
Plaintext
49 lines
1.3 KiB
Plaintext
/// TEMPORARY AI GENERATED FRONTEND \\\
|
|
/// NOT TO BE USED IN PRODUCTION \\\
|
|
|
|
import { Theme } from "../theme.slint";
|
|
|
|
// Single-line text field with placeholder, built on the TextInput primitive so
|
|
// it matches the theme instead of the std-widgets style.
|
|
export component TextField inherits Rectangle {
|
|
in property <string> placeholder;
|
|
in property <bool> password;
|
|
in-out property <string> text <=> input.text;
|
|
callback accepted();
|
|
public function focus-field() {
|
|
input.focus();
|
|
}
|
|
|
|
height: 40px;
|
|
border-radius: 4px;
|
|
background: Theme.rail-bg;
|
|
border-width: 1px;
|
|
border-color: input.has-focus ? Theme.accent : Theme.divider;
|
|
|
|
input := TextInput {
|
|
x: 12px;
|
|
y: 0px;
|
|
width: parent.width - 24px;
|
|
height: parent.height;
|
|
vertical-alignment: center;
|
|
color: Theme.text-normal;
|
|
font-size: 15px;
|
|
single-line: true;
|
|
input-type: root.password ? InputType.password : InputType.text;
|
|
selection-background-color: Theme.accent;
|
|
accepted => {
|
|
root.accepted();
|
|
}
|
|
}
|
|
|
|
if input.text == "": Text {
|
|
x: 12px;
|
|
width: parent.width - 24px;
|
|
height: parent.height;
|
|
text: root.placeholder;
|
|
color: Theme.text-faint;
|
|
font-size: 15px;
|
|
vertical-alignment: center;
|
|
}
|
|
}
|