feat: make "Copy Code" button appear on hover over the code

2 files changed, 54 insertions, 73 deletions

diff --git a/src/panes/code_view.rs b/src/panes/code_view.rs
index daef547..5e29634 100644
--- a/src/panes/code_view.rs
+++ b/src/panes/code_view.rs
@@ -1,14 +1,13 @@
 use iced::advanced::text::highlighter::Format;
 use iced::border::Radius;
-use iced::widget::{button, pane_grid, row, text, text_editor};
-use iced::{Alignment, Border, Font, Length};
+use iced::widget::{button, hover, pane_grid, right, text, text_editor};
+use iced::{Border, Font, Length};
 use iced_custom_highlighter::{Highlight, Highlighter, Scope, Settings};
 use iced_material::Theme;
 
 use super::style;
 use crate::icon;
 use crate::types::{DesignerPane, Message};
-use crate::widget::tip;
 
 // TODO: implement a highlight style for the material theme
 fn highlight_style(theme: &Theme, scope: &Scope) -> Format<Font> {
@@ -33,67 +32,55 @@ pub fn view(
 ) -> pane_grid::Content<'_, Message, Theme> {
     let title_bar = pane_grid::TitleBar::new(text("Generated Code").center())
         .controls(pane_grid::Controls::dynamic(
-            row![
-                tip(
-                    button(icon::copy())
-                        .on_press(Message::CopyCode)
-                        .padding([2, 7])
-                        .style(iced_material::button::text),
-                    "Copy",
-                    tip::Position::FollowCursor
-                ),
-                button("Switch to Designer view")
-                    .on_press(DesignerPane::DesignerView.into())
-            ]
-            .spacing(20)
-            .align_y(Alignment::Center),
-            row![
-                tip(
-                    button(icon::copy())
-                        .on_press(Message::CopyCode)
-                        .padding([2, 7])
-                        .style(iced_material::button::text),
-                    "Copy",
-                    tip::Position::FollowCursor
-                ),
-                button(icon::switch())
-                    .on_press(DesignerPane::DesignerView.into())
-            ]
-            .spacing(20)
-            .align_y(Alignment::Center),
+            button("Switch to Designer view")
+                .on_press(DesignerPane::DesignerView.into()),
+            button(icon::switch()).on_press(DesignerPane::DesignerView.into()),
         ))
         .padding(10)
         .style(style::title_bar);
 
-    pane_grid::Content::new(
-        text_editor(editor_content)
-            .on_action(Message::EditorAction)
-            .font(Font::MONOSPACE)
-            .highlight_with::<Highlighter<Theme>>(
-                Settings::new(vec![], highlight_style, "rs"),
-                Highlight::to_format,
-            )
-            .style(|theme, _| {
-                let style = iced_material::text_editor::default(
-                    theme,
-                    text_editor::Status::Active,
-                );
+    let editor = text_editor(editor_content)
+        .on_action(Message::EditorAction)
+        .font(Font::MONOSPACE)
+        .highlight_with::<Highlighter<Theme>>(
+            Settings::new(vec![], highlight_style, "rs"),
+            Highlight::to_format,
+        )
+        .style(|theme, _| {
+            let style = iced_material::text_editor::default(
+                theme,
+                text_editor::Status::Active,
+            );
 
-                text_editor::Style {
-                    border: Border {
-                        radius: Radius::default(),
-                        ..style.border
-                    },
-                    ..style
-                }
-            })
-            .height(Length::Fill)
-            .padding(20),
-    )
-    .title_bar(title_bar)
-    .style(if is_focused {
-        style::pane_focused
-    } else {
-        style::pane_active
-    })
+            text_editor::Style {
+                border: Border {
+                    radius: Radius::default(),
+                    ..style.border
+                },
+                ..style
+            }
+        })
+        .height(Length::Fill)
+        .padding(20);
+
+    let copy = button(icon::copy().size(22).line_height(1.0).center())
+        .on_press(Message::CopyCode)
+        .padding(3)
+        .width(28)
+        .style(|theme, status| {
+            let style = iced_material::button::text(theme, status);
+
+            button::Style {
+                border: style.border.rounded(4),
+                ..style
+            }
+        });
+
+    pane_grid::Content::new(hover(editor, right(copy).padding(16.0 * 0.875)))
+        .title_bar(title_bar)
+        .style(if is_focused {
+            style::pane_focused
+        } else {
+            style::pane_active
+        })
 }
diff --git a/src/panes/designer_view.rs b/src/panes/designer_view.rs
index c4812c5..92364bf 100644
--- a/src/panes/designer_view.rs
+++ b/src/panes/designer_view.rs
@@ -1,7 +1,7 @@
+use iced::Length;
 use iced::widget::{
-    button, center, container, pane_grid, responsive, row, text, themer,
+    button, center, container, pane_grid, responsive, text, themer,
 };
-use iced::{Alignment, Length};
 use iced_material::Theme;
 
 use super::style;
@@ -30,21 +30,15 @@ pub fn view<'a>(
     };
 
     let content = container(themer(designer_theme, el_tree))
-        .id(iced::widget::container::Id::new("drop_zone"))
+        .id("drop_zone")
         .height(Length::Fill)
         .width(Length::Fill);
 
     let title_bar = pane_grid::TitleBar::new(text("Designer").center())
         .controls(pane_grid::Controls::dynamic(
-            row![
-                button("Switch to Code view")
-                    .on_press(DesignerPane::CodeView.into(),)
-            ]
-            .align_y(Alignment::Center),
-            row![
-                button(icon::switch()).on_press(DesignerPane::CodeView.into(),)
-            ]
-            .align_y(Alignment::Center),
+            button("Switch to Code view")
+                .on_press(DesignerPane::CodeView.into()),
+            button(icon::switch()).on_press(DesignerPane::CodeView.into()),
         ))
         .padding(10)
         .style(style::title_bar);