diff --git a/ui/power-menu.slint b/ui/power-menu.slint index 73b03a0..bc789ab 100644 --- a/ui/power-menu.slint +++ b/ui/power-menu.slint @@ -1,63 +1,66 @@ +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 { - in property btn_width; - in property btn_height; - in property btn_border_radius; - - in property btn_bg_normal; - in property btn_bg_hover; - in property btn_bg_clicked; - 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; + in property button_style; callback menu_btn_callback(); Rectangle { - width: btn_width *1px; - height: btn_height *1px; - border-radius: btn_border_radius *1px; + width: button_style.btn_width *1px; + height: button_style.btn_height *1px; + border-radius: button_style.btn_border_radius *1px; drop-shadow-color: #232323; drop-shadow-blur: 10px; drop-shadow-offset-x: 0; drop-shadow-offset-y: 0; - background: touch_area.pressed ? btn_bg_clicked - : touch_area.has-hover ? btn_bg_hover - : btn_bg_normal; - - - VerticalLayout { + background: touch_area.pressed ? button_style.btn_bg_clicked + : touch_area.has-hover ? button_style.btn_bg_hover + : button_style.btn_bg_normal; + + VerticalLayout { padding: 0; spacing: 0; Text { text: option_icon; - font-size: icon_font_size *1px; - width: btn_width *1px; - height: option_icon_height *1px; + font-size: button_style.icon_font_size *1px; + width: button_style.btn_width *1px; + height: button_style.option_icon_height *1px; vertical-alignment: center; horizontal-alignment: center; - font-family: icon_font; - color: icon_font_color; + font-family: button_style.icon_font; + color: button_style.icon_font_color; } Text { text: option_text; - font-size: option_text_font_size *1px; - width: btn_width *1px; - height: option_text_height *1px; + font-size: button_style.option_text_font_size *1px; + width: button_style.btn_width *1px; + height: button_style.option_text_height *1px; vertical-alignment: center; horizontal-alignment: center; - font-family: option_text_font; - color: root.option_text_color; + font-family: button_style.option_text_font; + color: button_style.option_text_color; } } @@ -72,31 +75,33 @@ export component PowerMenu inherits Window { in property screen_height: 1080; in property screen_bg: #a3a3a320; - in property btn_width: 120; - in property btn_height: 120; - in property btn_border_radius: 20; + in property button_style: { + btn_width: 120, + btn_height: 120, + btn_border_radius: 20, - in property btn_bg_normal: #91919175; - in property btn_bg_hover: #92929284; - in property btn_bg_clicked: #9b9b9bab; + btn_bg_normal: #91919175, + btn_bg_hover: #92929284, + 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; + option_icon_height: 90, + icon_font_size: 80, + icon_font: "IosevkaTermSlab Nerd Font Mono", + 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; + option_text_height: 30, + option_text_font_size: 14, + option_text_font: "IosevkaTermSlab Nerd Font Mono", + 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; in property menu_border_radius: menu_padding_x; - in property menu_width: (btn_width*4 + menu_spacing*3 + menu_padding_x*2); - in property menu_height: (btn_height + menu_padding_y*2); + in property menu_width: (button_style.btn_width*4 + menu_spacing*3 + menu_padding_x*2); + in property menu_height: (button_style.btn_height + menu_padding_y*2); in property menu_pos_x: (screen_width - menu_width)/2; in property menu_pos_y: (screen_height - menu_height)/2; @@ -144,97 +149,28 @@ export component PowerMenu inherits Window { PowerMenuButton { 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; - + button_style: root.button_style; } // Log out PowerMenuButton { 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; + button_style: root.button_style; } // Reboot PowerMenuButton { 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; + button_style: root.button_style; } // Power off PowerMenuButton { 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; + button_style: root.button_style; } } }