Candifloss
971ecf4200
- Almost everything passed as properties - Background, fill, value, icon - Depends on configured fonts
87 lines
2.7 KiB
Plaintext
87 lines
2.7 KiB
Plaintext
export component OSDpopup inherits Window {
|
|
in property <int> popup_width: 200;
|
|
in property <int> popup_height: 50;
|
|
in property <int> popup_border_radius: 5;
|
|
in property <int> popup_padding: 7;
|
|
|
|
in property <color> osd_bg_color: #5f5f5f67;
|
|
in property <color> fill_color: #127a9bff;
|
|
|
|
in property <int> value_font_size: 35;
|
|
in property <color> value_font_color: #ffffffff;
|
|
in property <string> value_font: "Iosevka Extrabold";
|
|
in property <int> percent_value: 0;
|
|
|
|
in property <int> icon_size: self.value_font_size;
|
|
in property <color> icon_font_color: self.value_font_color;
|
|
in property <string> icon_font: "IosevkaTermSlab Nerd Font Mono";
|
|
in property <string> icon_glyph: "";
|
|
|
|
no-frame: true;
|
|
always-on-top: true;
|
|
background: transparent;
|
|
width: popup_width *1px;
|
|
height: popup_height *1px;
|
|
|
|
// Background
|
|
osd_bg:= Rectangle {
|
|
height: 100%;
|
|
width: 100%;
|
|
y: 0;
|
|
border-width: 0px;
|
|
border-radius: popup_border_radius *1px;
|
|
background: osd_bg_color;
|
|
}
|
|
|
|
//
|
|
osd_fill:= Rectangle {
|
|
height: 100%;
|
|
width: (popup_width/100) * percent_value *1px;
|
|
y: 0;
|
|
x: 0;
|
|
border-width: 0px;
|
|
border-top-left-radius: popup_border_radius *1px;
|
|
border-bottom-left-radius: self.border-top-left-radius;
|
|
border-top-right-radius:
|
|
self.width > osd_bg.width - popup_border_radius * 1px
|
|
? popup_border_radius *1px
|
|
: 0px;
|
|
border-bottom-right-radius: self.border-top-right-radius;
|
|
background: fill_color;
|
|
}
|
|
|
|
HorizontalLayout {
|
|
padding-left: popup_padding *1px;
|
|
padding-right: popup_padding *1px;
|
|
|
|
// Icon: Volume, Brightness, Battery, etc.
|
|
icon_symbol:= Rectangle {
|
|
//background: #a0c932; // For testing
|
|
Text {
|
|
width: 100%;
|
|
height: 100%;
|
|
text: icon_glyph;
|
|
vertical-alignment: center;
|
|
horizontal-alignment: left;
|
|
font-family: icon_font;
|
|
color: icon_font_color;
|
|
font-size: icon_size *1px;
|
|
}
|
|
}
|
|
|
|
// Percentage value
|
|
value_text:= Rectangle {
|
|
//background: #309968; // For testing
|
|
Text {
|
|
width: 100%;
|
|
height: 100%;
|
|
text: percent_value + "%";
|
|
vertical-alignment: center;
|
|
horizontal-alignment: right;
|
|
font-family: value_font;
|
|
color: value_font_color;
|
|
font-size: value_font_size *1px;
|
|
}
|
|
}
|
|
}
|
|
} |