RoundButtonStyle::ring_color + TabMenu pop-out and search buttons

crates/sao-ui-rs/src/lib.rs

@@ -12,7 +12,7 @@ use glam::Vec2;
 use widgets::Widget;
 use main_menu::MainMenuPanel;
 
-export_abi!(ConfirmationDialogPanel);
+export_abi!(MainMenuPanel);
 
 pub const ICON_FONT: &str = "Iosevka Nerd Font";
 pub const DISPLAY_FONT: &str = "Homenaje";

crates/sao-ui-rs/src/main_menu.rs

@@ -60,7 +60,8 @@ impl Default for MainMenu {
             radius: 0.05,
             spacing: 0.01,
             thickness: 0.002,
-            color: Color::WHITE,
+            body_color: Color::WHITE,
+            ring_color: Color::WHITE,
             icon_color: Color::BLACK,
         };
 

crates/sao-ui-rs/src/widgets/button.rs

@@ -1,5 +1,5 @@
 use super::prelude::*;
-use text::{LabelText, Label, Icon, HorizontalAlignment};
+use text::{HorizontalAlignment, Icon, Label, LabelText};
 
 #[derive(Copy, Clone, Debug, Eq, PartialEq)]
 pub enum ButtonState {
@@ -14,7 +14,8 @@ pub struct RoundButtonStyle {
     pub radius: f32,
     pub spacing: f32,
     pub thickness: f32,
-    pub color: Color,
+    pub body_color: Color,
+    pub ring_color: Color,
     pub icon_color: Color,
 }
 
@@ -59,12 +60,20 @@ impl Widget for RoundButton {
     }
 
     fn draw(&mut self, ctx: &DrawContext) {
-        let radius = self.style.radius;
+        let RoundButtonStyle {
-        let color = self.style.color;
+            body_color,
+            ring_color,
+            thickness,
+            radius,
+            spacing,
+            ..
+        } = self.style;
+
         let center = Vec2::ZERO;
-        let spacing = self.shrink_anim.get() * self.style.spacing;
+        let spacing = self.shrink_anim.get() * spacing;
-        ctx.draw_circle(center, radius, color);
+
-        ctx.draw_ring(center, radius + spacing, self.style.thickness, color);
+        ctx.draw_circle(center, radius, body_color);
+        ctx.draw_ring(center, radius + spacing, thickness, ring_color);
 
         self.icon.draw(ctx);
     }

crates/sao-ui-rs/src/widgets/dialog.rs

@@ -166,12 +166,14 @@ impl Dialog {
         for (index, response) in info.responses.iter().enumerate() {
             let button_x = button_spacing * index as f32 + button_spacing2 - style.width / 2.0;
 
+            let color = response.get_color();
             let radius = style.footer.button_radius;
             let button_style = RoundButtonStyle {
                 radius: radius * 0.8,
                 spacing: radius * 0.15,
                 thickness: radius * 0.05,
-                color: response.get_color(),
+                body_color: color,
+                ring_color: color,
                 icon_color: Color::WHITE,
             };
 

crates/sao-ui-rs/src/widgets/menu.rs

@@ -1,6 +1,6 @@
 use super::prelude::*;
 use crate::main_menu::Inventory;
-use button::{RectButton, RectButtonStyle};
+use button::{RectButton, RectButtonStyle, RoundButton, RoundButtonStyle};
 use scroll::{ScrollBar, ScrollView};
 use shell::Offset;
 
@@ -210,6 +210,8 @@ impl<T: Widget + Button> Widget for SlotMenu<T> {
 }
 
 pub struct TabMenu {
+    pop_out: Offset<RoundButton>,
+    search: Offset<RoundButton>,
     tabs: Vec<RectButton>,
     view: Offset<ScrollView<Inventory>>,
     head_rect: Rect,
@@ -226,6 +228,18 @@ impl TabMenu {
     const INNER_RADIUS: f32 = 0.01;
     const CONTENT_WIDTH: f32 = 0.64;
 
+    const HEAD_BUTTON_STYLE: RoundButtonStyle = RoundButtonStyle {
+        radius: Self::HEAD_RADIUS * 0.5,
+        spacing: Self::HEAD_RADIUS * 0.2,
+        thickness: Self::HEAD_RADIUS * 0.1,
+        body_color: Color::WHITE,
+        ring_color: Color::BLACK,
+        icon_color: Color::BLACK,
+    };
+
+    const HEAD_BUTTON_MARGIN: f32 = Self::HEAD_HEIGHT / 2.0;
+    const HEAD_BUTTON_SPACING: f32 = Self::HEAD_HEIGHT;
+
     pub fn new() -> Self {
         let tab_size = Vec2::new(Self::TAB_WIDTH, Self::TAB_HEIGHT);
 
@@ -245,6 +259,32 @@ impl TabMenu {
             tabs.push(RectButton::new(style, rect, None, None));
         }
 
+        let icon_font = Font::new(crate::ICON_FONT);
+
+        let pop_out = RoundButton::new(
+            Self::HEAD_BUTTON_STYLE,
+            Some(text::LabelText {
+                font: icon_font,
+                text: "ﬕ".to_string(),
+            }),
+        );
+
+        let search = RoundButton::new(
+            Self::HEAD_BUTTON_STYLE,
+            Some(text::LabelText {
+                font: icon_font,
+                text: "".to_string(),
+            }),
+        );
+
+        let head_button_y = Self::HEAD_HEIGHT / 2.0;
+
+        let pop_out_x = Self::HEAD_BUTTON_MARGIN;
+        let pop_out = Offset::new(pop_out, Vec2::new(pop_out_x, head_button_y));
+
+        let search_x = pop_out_x + Self::HEAD_BUTTON_SPACING;
+        let search = Offset::new(search, Vec2::new(search_x, head_button_y));
+
         let tab_list_height = Self::TAB_NUM as f32 * Self::TAB_HEIGHT;
 
         let scroll_bar = ScrollBar::new(tab_list_height, tab_list_height * 3.0, Default::default());
@@ -282,6 +322,8 @@ impl TabMenu {
         let view = Offset::new(view, view_rect.bl);
 
         Self {
+            pop_out,
+            search,
             tabs,
             view,
             separator_rect,
@@ -292,6 +334,9 @@ impl TabMenu {
 
 impl Container for TabMenu {
     fn with_children(&mut self, mut f: impl FnMut(&mut dyn Widget)) {
+        f(&mut self.pop_out);
+        f(&mut self.search);
+
         for tab in self.tabs.iter_mut() {
             f(tab);
         }