candifloss/popcorn
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Design base UI in Slint

Browse Source 
- Almost everything passed as properties
- Background, fill, value, icon
- Depends on configured fonts
This commit is contained in:
Candifloss 2025-12-09 21:45:25 +05:30
parent cfc1312a80
commit 971ecf4200
2 changed files with 90 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
build.rs Normal file
View File

@ -0,0 +1,3 @@
fn main() {
slint_build::compile("ui/osd-popup.slint").unwrap();
}

87
ui/osd-popup.slint Normal file
View File

@ -0,0 +1,87 @@
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;
}
}
}
}