keydisplay/ui/window.slint

75 lines
1.8 KiB
Plaintext

export struct Theme {
app_background: color,
key_background: color,
key_background_pressed: color,
key_border: color,
key_text: color,
key_text_pressed: color,
}
struct KeyData {
key: string,
}
component Key inherits Rectangle {
in-out property <string> key_text_content;
in-out property <color> key_background;
in-out property <color> key_border;
in-out property <color> key_text_color;
width: 100px;
height: 100px;
border-width: 5px;
border-radius: 5px;
background: key_background;
border-color: key_border;
Text {
text: "\{key_text_content}";
font-weight: 800;
color: key_text_color;
horizontal-alignment: center;
vertical-alignment: center;
}
}
export component MainWindow inherits Window {
in-out property <Theme> theme;
in-out property <[KeyData]> keys;
in-out property <[KeyData]> m_buttons;
keys: [];
m_buttons: [];
title: "keydisplay";
// 14 px padding + 100px for every key + 5px for every space + 14 px padding
width: 14px+(100px*(keys.length + m_buttons.length))+(5px*(keys.length + m_buttons.length - 1))+14px;
height: 128px;
default-font-size: 25px;
background: theme.app_background;
HorizontalLayout {
padding: 14px;
spacing: 5px;
for key[i] in keys : Key{
key_text_content: key.key;
key_background: theme.key_background;
key_border: theme.key_border;
key_text_color: theme.key_text;
}
for button[i] in m_buttons : Key{
key_text_content: button.key;
key_background: theme.key_background;
key_border: theme.key_border;
key_text_color: theme.key_text;
}
}
}