From a1bc1feb7bc7890fca1befa3123826a559ac768a Mon Sep 17 00:00:00 2001 From: candifloss Date: Sat, 3 Jan 2026 11:21:39 +0530 Subject: [PATCH] Make all properties configurable - No more hard-coded properties except default values. --- ui/power-menu.slint | 160 +++++++++++++++++++++++++++++++++++++------- 1 file changed, 134 insertions(+), 26 deletions(-) diff --git a/ui/power-menu.slint b/ui/power-menu.slint index a63ec67..73b03a0 100644 --- a/ui/power-menu.slint +++ b/ui/power-menu.slint @@ -1,14 +1,25 @@ component PowerMenuButton { - in property option_icon: "O"; - in property option_name: "Log out"; + in property btn_width; + in property btn_height; + in property btn_border_radius; - in property btn_width: 120; - in property btn_height: 120; - in property btn_border_radius: 20; + in property btn_bg_normal; + in property btn_bg_hover; + in property btn_bg_clicked; - in property btn_bg_normal: #91919175; - in property btn_bg_hover: #92929284; - in property btn_bg_clicked: #9b9b9bab; + in property option_icon: ""; + in property option_icon_height; + in property icon_font_size; + in property icon_font; + in property icon_font_color; + + in property option_text: "Menu Option"; + in property option_text_height; + in property option_text_font_size; + in property option_text_font; + in property option_text_color; + + callback menu_btn_callback(); Rectangle { width: btn_width *1px; @@ -22,7 +33,6 @@ component PowerMenuButton { : touch_area.has-hover ? btn_bg_hover : btn_bg_normal; - callback menu_btn_callback(); VerticalLayout { padding: 0; @@ -30,24 +40,24 @@ component PowerMenuButton { Text { text: option_icon; - font-size: 55px; + font-size: icon_font_size *1px; width: btn_width *1px; - height: (btn_height/100) * 75 *1px; + height: option_icon_height *1px; vertical-alignment: center; horizontal-alignment: center; - font-family: "IosevkaTermSlab Nerd Font Mono"; - color: #ffffff; + font-family: icon_font; + color: icon_font_color; } Text { - text: option_name; - font-size: 14px; + text: option_text; + font-size: option_text_font_size *1px; width: btn_width *1px; - height: (btn_height/100) * 25 *1px; + height: option_text_height *1px; vertical-alignment: center; horizontal-alignment: center; - font-family: "IosevkaTermSlab Nerd Font Mono"; - color: #ffffff; + font-family: option_text_font; + color: root.option_text_color; } } @@ -70,6 +80,16 @@ export component PowerMenu inherits Window { in property btn_bg_hover: #92929284; in property btn_bg_clicked: #9b9b9bab; + in property option_icon_height: (btn_height/100) * 75; + in property icon_font_size: (option_icon_height/100) * 80; + in property icon_font: "IosevkaTermSlab Nerd Font Mono"; + in property icon_font_color: #ffffff; + + in property option_text_height: (btn_height/100) * 25; + in property option_text_font_size: (option_text_height/100) * 45; + in property option_text_font: "IosevkaTermSlab Nerd Font Mono"; + in property option_text_color: #ffffff; + in property menu_padding_x: 20; in property menu_padding_y: menu_padding_x; in property menu_spacing: menu_padding_x; @@ -82,6 +102,16 @@ export component PowerMenu inherits Window { in property menu_bg: #7a7a7a28; + in property ico_lockscreen: ""; + in property ico_logout: ""; + in property ico_reboot: ""; + in property ico_poweroff: ""; + + in property text_lockscreen: "Lock screen"; + in property text_logout: "Log Out"; + in property text_reboot: "Reboot"; + in property text_poweroff: "Power Off"; + no-frame: true; always-on-top: true; background: transparent; @@ -105,28 +135,106 @@ export component PowerMenu inherits Window { x: menu_pos_x *1px; y: menu_pos_y *1px; + // Buttons HorizontalLayout { padding: menu_padding_x *1px; spacing: menu_spacing *1px; + // Lock screen PowerMenuButton { - option_icon: "O"; - option_name: "Lock screen"; + option_icon: ico_lockscreen; + option_text: text_lockscreen; + + 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 PowerMenuButton { - option_icon: "O"; - option_name: "Log out"; + option_icon: ico_logout; + option_text: text_logout; + + 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 PowerMenuButton { - option_icon: "O"; - option_name: "Reboot"; + option_icon: ico_reboot; + option_text: text_reboot; + + 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 PowerMenuButton { - option_icon: "O"; - option_name: "Power off"; + option_icon: ico_poweroff; + option_text: text_poweroff; + + 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; } } }