candifloss/power-menu-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Class ButtonStyle to avoid duplication

Browse Source
This commit is contained in:
Candifloss 2026-01-03 12:11:09 +05:30
parent a1bc1feb7b
commit 52e68acb41
1 changed files with 61 additions and 125 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

182
ui/power-menu.slint
View File

@ -1,38 +1,41 @@
export struct ButtonStyle {
btn_width: int,
btn_height: int,
btn_border_radius: int,
btn_bg_normal: color,
btn_bg_hover: color,
btn_bg_clicked: color,
option_icon_height: int,
icon_font_size: int,
icon_font: string,
icon_font_color: color,
option_text_height: int,
option_text_font_size: int,
option_text_font: string,
option_text_color: color,
}
component PowerMenuButton { component PowerMenuButton {
in property <int> btn_width;
in property <int> btn_height;
in property <int> btn_border_radius;
in property <color> btn_bg_normal;
in property <color> btn_bg_hover;
in property <color> btn_bg_clicked;
in property <string> option_icon: ""; in property <string> option_icon: "";
in property <int> option_icon_height;
in property <int> icon_font_size;
in property <string> icon_font;
in property <color> icon_font_color;
in property <string> option_text: "Menu Option"; in property <string> option_text: "Menu Option";
in property <int> option_text_height; in property <ButtonStyle> button_style;
in property <int> option_text_font_size;
in property <string> option_text_font;
in property <color> option_text_color;
callback menu_btn_callback(); callback menu_btn_callback();
Rectangle { Rectangle {
width: btn_width *1px; width: button_style.btn_width *1px;
height: btn_height *1px; height: button_style.btn_height *1px;
border-radius: btn_border_radius *1px; border-radius: button_style.btn_border_radius *1px;
drop-shadow-color: #232323; drop-shadow-color: #232323;
drop-shadow-blur: 10px; drop-shadow-blur: 10px;
drop-shadow-offset-x: 0; drop-shadow-offset-x: 0;
drop-shadow-offset-y: 0; drop-shadow-offset-y: 0;
background: touch_area.pressed ? btn_bg_clicked background: touch_area.pressed ? button_style.btn_bg_clicked
: touch_area.has-hover ? btn_bg_hover : touch_area.has-hover ? button_style.btn_bg_hover
: btn_bg_normal; : button_style.btn_bg_normal;
VerticalLayout { VerticalLayout {
padding: 0; padding: 0;
@ -40,24 +43,24 @@ component PowerMenuButton {
Text { Text {
text: option_icon; text: option_icon;
font-size: icon_font_size *1px; font-size: button_style.icon_font_size *1px;
width: btn_width *1px; width: button_style.btn_width *1px;
height: option_icon_height *1px; height: button_style.option_icon_height *1px;
vertical-alignment: center; vertical-alignment: center;
horizontal-alignment: center; horizontal-alignment: center;
font-family: icon_font; font-family: button_style.icon_font;
color: icon_font_color; color: button_style.icon_font_color;
} }
Text { Text {
text: option_text; text: option_text;
font-size: option_text_font_size *1px; font-size: button_style.option_text_font_size *1px;
width: btn_width *1px; width: button_style.btn_width *1px;
height: option_text_height *1px; height: button_style.option_text_height *1px;
vertical-alignment: center; vertical-alignment: center;
horizontal-alignment: center; horizontal-alignment: center;
font-family: option_text_font; font-family: button_style.option_text_font;
color: root.option_text_color; color: button_style.option_text_color;
} }
} }
@ -72,31 +75,33 @@ export component PowerMenu inherits Window {
in property <int> screen_height: 1080; in property <int> screen_height: 1080;
in property <color> screen_bg: #a3a3a320; in property <color> screen_bg: #a3a3a320;
in property <int> btn_width: 120; in property <ButtonStyle> button_style: {
in property <int> btn_height: 120; btn_width: 120,
in property <int> btn_border_radius: 20; btn_height: 120,
btn_border_radius: 20,
in property <color> btn_bg_normal: #91919175; btn_bg_normal: #91919175,
in property <color> btn_bg_hover: #92929284; btn_bg_hover: #92929284,
in property <color> btn_bg_clicked: #9b9b9bab; btn_bg_clicked: #9b9b9bab,
in property <int> option_icon_height: (btn_height/100) * 75; option_icon_height: 90,
in property <int> icon_font_size: (option_icon_height/100) * 80; icon_font_size: 80,
in property <string> icon_font: "IosevkaTermSlab Nerd Font Mono"; icon_font: "IosevkaTermSlab Nerd Font Mono",
in property <color> icon_font_color: #ffffff; icon_font_color: #ffffff,
in property <int> option_text_height: (btn_height/100) * 25; option_text_height: 30,
in property <int> option_text_font_size: (option_text_height/100) * 45; option_text_font_size: 14,
in property <string> option_text_font: "IosevkaTermSlab Nerd Font Mono"; option_text_font: "IosevkaTermSlab Nerd Font Mono",
in property <color> option_text_color: #ffffff; option_text_color: #ffffff,
};
in property <int> menu_padding_x: 20; in property <int> menu_padding_x: 20;
in property <int> menu_padding_y: menu_padding_x; in property <int> menu_padding_y: menu_padding_x;
in property <int> menu_spacing: menu_padding_x; in property <int> menu_spacing: menu_padding_x;
in property <int> menu_border_radius: menu_padding_x; in property <int> menu_border_radius: menu_padding_x;
in property <int> menu_width: (btn_width*4 + menu_spacing*3 + menu_padding_x*2); in property <int> menu_width: (button_style.btn_width*4 + menu_spacing*3 + menu_padding_x*2);
in property <int> menu_height: (btn_height + menu_padding_y*2); in property <int> menu_height: (button_style.btn_height + menu_padding_y*2);
in property <int> menu_pos_x: (screen_width - menu_width)/2; in property <int> menu_pos_x: (screen_width - menu_width)/2;
in property <int> menu_pos_y: (screen_height - menu_height)/2; in property <int> menu_pos_y: (screen_height - menu_height)/2;
@ -144,97 +149,28 @@ export component PowerMenu inherits Window {
PowerMenuButton { PowerMenuButton {
option_icon: ico_lockscreen; option_icon: ico_lockscreen;
option_text: text_lockscreen; option_text: text_lockscreen;
button_style: root.button_style;
btn_width: root.btn_width;
btn_height: root.btn_height;
btn_border_radius: root.btn_border_radius;
btn_bg_normal: root.btn_bg_normal;
btn_bg_hover: root.btn_bg_hover;
btn_bg_clicked: root.btn_bg_clicked;
option_icon_height: root.option_icon_height;
icon_font_size: root.icon_font_size;
icon_font: root.icon_font;
icon_font_color: root.icon_font_color;
option_text_height: root.option_text_height;
option_text_font_size: root.option_text_font_size;
option_text_font: root.option_text_font;
option_text_color: root.option_text_color;
} }
// Log out // Log out
PowerMenuButton { PowerMenuButton {
option_icon: ico_logout; option_icon: ico_logout;
option_text: text_logout; option_text: text_logout;
button_style: root.button_style;
btn_width: root.btn_width;
btn_height: root.btn_height;
btn_border_radius: root.btn_border_radius;
btn_bg_normal: root.btn_bg_normal;
btn_bg_hover: root.btn_bg_hover;
btn_bg_clicked: root.btn_bg_clicked;
option_icon_height: root.option_icon_height;
icon_font_size: root.icon_font_size;
icon_font: root.icon_font;
icon_font_color: root.icon_font_color;
option_text_height: root.option_text_height;
option_text_font_size: root.option_text_font_size;
option_text_font: root.option_text_font;
option_text_color: root.option_text_color;
} }
// Reboot // Reboot
PowerMenuButton { PowerMenuButton {
option_icon: ico_reboot; option_icon: ico_reboot;
option_text: text_reboot; option_text: text_reboot;
button_style: root.button_style;
btn_width: root.btn_width;
btn_height: root.btn_height;
btn_border_radius: root.btn_border_radius;
btn_bg_normal: root.btn_bg_normal;
btn_bg_hover: root.btn_bg_hover;
btn_bg_clicked: root.btn_bg_clicked;
option_icon_height: root.option_icon_height;
icon_font_size: root.icon_font_size;
icon_font: root.icon_font;
icon_font_color: root.icon_font_color;
option_text_height: root.option_text_height;
option_text_font_size: root.option_text_font_size;
option_text_font: root.option_text_font;
option_text_color: root.option_text_color;
} }
// Power off // Power off
PowerMenuButton { PowerMenuButton {
option_icon: ico_poweroff; option_icon: ico_poweroff;
option_text: text_poweroff; option_text: text_poweroff;
button_style: root.button_style;
btn_width: root.btn_width;
btn_height: root.btn_height;
btn_border_radius: root.btn_border_radius;
btn_bg_normal: root.btn_bg_normal;
btn_bg_hover: root.btn_bg_hover;
btn_bg_clicked: root.btn_bg_clicked;
option_icon_height: root.option_icon_height;
icon_font_size: root.icon_font_size;
icon_font: root.icon_font;
icon_font_color: root.icon_font_color;
option_text_height: root.option_text_height;
option_text_font_size: root.option_text_font_size;
option_text_font: root.option_text_font;
option_text_color: root.option_text_color;
} }
} }
} }