66 lines
2.0 KiB
Plaintext
66 lines
2.0 KiB
Plaintext
|
import { Metrics, DarkPalette } from "../theme.slint";
|
||
|
|
|
||
|
|
export component Button {
|
||
|
|
in property <string> p-text;
|
||
|
|
in property <image> p-icon;
|
||
|
|
in property <bool> p-primary;
|
||
|
|
in property <bool> p-shadow;
|
||
|
|
in property <bool> p-enabled: true;
|
||
|
|
in property <int> p-elevation: 1;
|
||
|
|
in property <length> p-radius: Metrics.radius-md;
|
||
|
|
|
||
|
|
callback a-clicked;
|
||
|
|
|
||
|
|
private property <brush> p-text-color: DarkPalette.text[4];
|
||
|
|
private property <float> p-opacity: root.p-enabled ? 1.0 : 0.5;
|
||
|
|
private property <brush> p-background: root.p-primary ? DarkPalette.primary[p-elevation] : DarkPalette.secondary[p-elevation];
|
||
|
|
private property <brush> p-touch-color: root.p-primary ? DarkPalette.primary[p-elevation + 1] : DarkPalette.secondary[p-elevation + 1];
|
||
|
|
|
||
|
|
c-background := Rectangle {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
border-radius: root.p-radius;
|
||
|
|
background: root.p-background;
|
||
|
|
opacity: root.p-opacity;
|
||
|
|
drop-shadow-color: DarkPalette.background[0];
|
||
|
|
drop-shadow-offset-y: root.p-shadow ? 1px : 0px;
|
||
|
|
drop-shadow-blur: (root.p-shadow ? p-elevation : 0) * 2px;
|
||
|
|
}
|
||
|
|
|
||
|
|
c-touch-area := TouchArea {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
|
||
|
|
clicked => {
|
||
|
|
root.a-clicked();
|
||
|
|
}
|
||
|
|
|
||
|
|
if self.has-hover: Rectangle {
|
||
|
|
border-radius: root.p-radius;
|
||
|
|
background: root.p-touch-color;
|
||
|
|
opacity: 0.5;
|
||
|
|
}
|
||
|
|
|
||
|
|
if self.pressed: Rectangle {
|
||
|
|
border-radius: root.p-radius;
|
||
|
|
background: root.p-touch-color;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
c-layout := HorizontalLayout {
|
||
|
|
if (root.p-icon.width > 0 && root.p-icon.height > 0): c-icon := Image {
|
||
|
|
source <=> root.p-icon;
|
||
|
|
width: Metrics.size-md;
|
||
|
|
opacity: root.p-opacity;
|
||
|
|
}
|
||
|
|
|
||
|
|
if (root.p-text != ""): c-text := Text {
|
||
|
|
text: root.p-text;
|
||
|
|
color: root.p-text-color;
|
||
|
|
opacity: root.p-opacity;
|
||
|
|
vertical-alignment: center;
|
||
|
|
horizontal-alignment: center;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|