70 lines
1.9 KiB
Plaintext
70 lines
1.9 KiB
Plaintext
import { Palette } from "std-widgets.slint";
|
|
|
|
export component IconButton inherits Rectangle {
|
|
in property <image> icon;
|
|
in property <length> icon-width: 20px;
|
|
in property <length> icon-height: 20px;
|
|
in property <LayoutAlignment> icon-align: LayoutAlignment.end;
|
|
|
|
in property <string> text;
|
|
in property <string> font-family: "monospace";
|
|
in property <bool> font-italic: false;
|
|
in property <length> font-size: 1rem;
|
|
in property <int> font-weight: 1;
|
|
|
|
callback clicked;
|
|
|
|
forward-focus: focus;
|
|
|
|
animate background, border-color { duration: 150ms; }
|
|
|
|
// Fluent-style rectangular base
|
|
background: touch.pressed ? Palette.control-background.darker(0.5) :
|
|
touch.has-hover || focus.has-focus ? Palette.control-background.mix(#ffffff, 0.95) :
|
|
Palette.control-background;
|
|
border-radius: 4px; // Standard Fluent corner radius
|
|
border-width: 1px;
|
|
border-color: Palette.border;
|
|
min-width: 40px;
|
|
min-height: 32px;
|
|
|
|
if (text != "") : Text {
|
|
text: root.text;
|
|
font-family: root.font-family;
|
|
font-italic: root.font-italic;
|
|
font-size: root.font-size;
|
|
font-weight: root.font-weight;
|
|
}
|
|
|
|
VerticalLayout {
|
|
width: parent.width;
|
|
height: parent.height;
|
|
alignment: center;
|
|
HorizontalLayout {
|
|
padding-left: 1rem;
|
|
padding-right: 1rem;
|
|
width: parent.width;
|
|
alignment: root.icon-align;
|
|
Image {
|
|
source: root.icon;
|
|
width: root.icon-width;
|
|
height: root.icon-height;
|
|
}
|
|
}
|
|
}
|
|
|
|
touch := TouchArea {
|
|
clicked => { root.clicked() }
|
|
}
|
|
|
|
focus := FocusScope {
|
|
key-pressed(event) => {
|
|
if (event.text == Key.Return || event.text == Key.Space) {
|
|
root.clicked();
|
|
accept
|
|
} else {
|
|
reject
|
|
}
|
|
}
|
|
}
|
|
} |