Iced Rich_Text + Span - duplicate a buttons status functionality

help
1

I am attempting to better utilize the built in functionality of Rust & Iced. I had a view which incorporated 3 buttons wrapped in a column wrapped in a container. I discovered rich_text and spans which to me simplified the code. What I have not been able to determine is can I duplicate the status functionality of a button. With the buttons I had a style which utilized its status (active, selected...) to change the text color. With the spans I can hard code a text color and add an underline. What I would like to do is somehow capture the mouse hoover event and use it to change the span text color and turn the underline on and off. As it is now, I run the mouse over any of the span text and the mouse pointer changes so some functionality is present that recognizes the mouse is hovering over a span (due no doubt to the associated link). Below is the updated section of the view. Any assistance will be appreciated.

widget::container(
    widget::rich_text![
        span("Max Closing Value\n")
            .underline(true)
            .link("Max"),
        span("Min Closing Value\n")
            .underline(true)
            .link("Min"),
        span("Selected Closing Values\n")
            .underline(true)
            .link("Selected"),
    ]
    .on_link_click(|string| {
        match string {
            "Max" => Message::MaxClosing,
            "Min" => Message::MinClosing,
            "Selected" => Message::SelectedClosings,
            _ => Message::Empty,
        }
    })
    .line_height(1.8)
    .color(color!(0x0000ff))
    .size(20.0)
    .font(Font::DEFAULT)
    .align_x(Horizontal::Center),

) // end of container
.padding(iced::padding::top(20))
.height(Length::FillPortion(8))
.width(Length::Fill)
.align_x(iced::alignment::Horizontal::Center)
.align_y(iced::alignment::Vertical::Top),
2

As it turns out you can obtain the button status functionality by wrapping a widget::rich_text in a widget::mouse_area and responding to on_enter and on_exit events. To get mouse events for each text span I had to break the 1 rich_text widget into 3. One odd thing that I discovered is that the on_enter and on_exit events appear to be processed top to bottom. So if you are running the mouse vertically up the 3 text spans (one per widget::rich_text) the on_enter of the 2nd span is passed to update function before by the on_exit event of the 3rd span. I solved the problem with a couple of lines of code in the update function.

widget::container(
widget::column![
    widget::mouse_area(
        widget::rich_text![
            span("Max Closing Value")
                .color(max_color)
                .underline(max_underline)
                .link("Max")
                .size(20.0)
                .font(Font::DEFAULT)
                .line_height(1.8),
        ]
        .on_link_click(|string| {
            match string {
                "Max" => Message::MaxClosing,
                _ => Message::Empty,
            }
        })  
        .align_x(Horizontal::Center),
    )
    .on_enter(Message::MouseHoverEvent(HoverEvent::EnteringMax))
    .on_exit(Message::MouseHoverEvent(HoverEvent::LeavingMax)),

    widget::mouse_area(
        widget::rich_text![
            span("Min Closing Value")
                .color(min_color)
                .underline(min_underline)
                .link("Min")
                .size(20.0)
                .font(Font::DEFAULT)
                .line_height(1.8),
        ]
        .on_link_click(|string| {
            match string {
                "Min" => Message::MinClosing,
                _ => Message::Empty,
            }
        })  
        .align_x(Horizontal::Center),
    )
    .on_enter(Message::MouseHoverEvent(HoverEvent::EnteringMin))
    .on_exit(Message::MouseHoverEvent(HoverEvent::LeavingMin)),

    widget::mouse_area(
        widget::rich_text![
            span("Selected Closing Values")
                .color(selected_color)
                .underline(selected_underline)
                .link("Selected")
                .size(20.0)
                .font(Font::DEFAULT)
                .line_height(1.8),
        ]
        .on_link_click(|string| {
            match string {
                "Selected" => Message::SelectedClosings,
                _ => Message::Empty,
            }
        })  
        .align_x(Horizontal::Center),
    )
    .on_enter(Message::MouseHoverEvent(HoverEvent::EnteringSelected))
    .on_exit(Message::MouseHoverEvent(HoverEvent::LeavingSelected)),

] // end of column 
.align_x(iced::alignment::Horizontal::Center)   

) // end of container
3

One last thing. It dawned on me that the widget::mouse_area's are sitting one on top of the other and that must affect the oder in which on_exit and on_enter events are processed. So I just added a small widget::space between each mouse_area and now the events are processed as expected, no additional code needed in the update function. Below is the code added between widget::mouse_area's.

widget::space()
    .height(Length::Fixed(5.0)),