add icons and style panegrid

Author: x86y

Cargo.lock

@@ -13,7 +13,7 @@ directories-next = "2.0"
 cbqn = { version = "0.1.0", default-features=false, optional = true }
 phf = "0.11.1"
 unicode-segmentation = "1.10.1"
-iced = { git = "https://github.com/iced-rs/iced", features = ["async-std", "debug", "lazy"], rev = "fd077918db7643530c3a7318ed5777d2f3d8761b" }
+iced = { git = "https://github.com/iced-rs/iced", features = ["async-std", "debug", "lazy", "svg"], rev = "fd077918db7643530c3a7318ed5777d2f3d8761b" }
 iced_core = { git = "https://github.com/iced-rs/iced", rev = "fd077918db7643530c3a7318ed5777d2f3d8761b" }
 iced_runtime = { git = "https://github.com/iced-rs/iced", rev = "fd077918db7643530c3a7318ed5777d2f3d8761b" }
 iced_style = { git = "https://github.com/iced-rs/iced", rev = "fd077918db7643530c3a7318ed5777d2f3d8761b" }

Cargo.toml

@@ -446,6 +446,11 @@ impl Application for Beacon {
                         )
                         .into()
                     }))
+                                .style(if is_focused {
+                style::pane_focused
+            } else {
+                style::pane_active
+            })
                 })
                 .width(Length::Fill)
                 .height(Length::Fill)
@@ -488,3 +493,38 @@ impl Application for Beacon {
         })
     }
 }
+
+mod style {
+    use iced::widget::container;
+    use iced::Theme;
+    use iced::Background;
+    use iced::Color;
+
+    pub fn pane_active(theme: &Theme) -> container::Appearance {
+        let palette = theme.extended_palette();
+        container::Appearance {
+            background: Some(Background::Color(Color::from_rgb(
+                12.0 / 255.0,
+                12.0 / 255.0,
+                12.0 / 255.0,
+            ))),
+            border_width: 2.0,
+            border_color: palette.background.strong.color,
+            ..Default::default()
+        }
+    }
+
+    pub fn pane_focused(theme: &Theme) -> container::Appearance {
+        let palette = theme.extended_palette();
+        container::Appearance {
+            background: Some(Background::Color(Color::from_rgb(
+                12.0 / 255.0,
+                12.0 / 255.0,
+                12.0 / 255.0,
+            ))),
+            border_width: 2.0,
+            border_color: palette.primary.strong.color,
+            ..Default::default()
+        }
+    }
+}

assets/cross.svg

@@ -5,6 +5,7 @@ use iced::Color;
 
 pub struct BtnStyle;
 pub struct TabStyle;
+pub struct TransparentBtn;
 pub struct CanvasStyle;
 pub struct ToolbarStyle;
 pub struct SrcCellStyle;
@@ -51,6 +52,26 @@ impl TabStyle {
     }
 }
 
+impl iced::widget::button::StyleSheet for TransparentBtn {
+    type Style = iced::Theme;
+    fn active(&self, _: &Self::Style) -> button::Appearance {
+        button::Appearance {
+            background: Some(Background::Color(Color::from_rgb(
+                12.0 / 255.0,
+                12.0 / 255.0,
+                12.0 / 255.0,
+            ))),
+            text_color: Color::WHITE,
+            ..Default::default()
+        }
+    }
+}
+impl TransparentBtn {
+    pub fn theme() -> iced::theme::Button {
+        iced::theme::Button::Custom(Box::from(TransparentBtn))
+    }
+}
+
 impl iced::widget::container::StyleSheet for ToolbarStyle {
     type Style = iced::Theme;
     fn appearance(&self, _: &Self::Style) -> container::Appearance {

assets/horizontal.svg

@@ -6,8 +6,9 @@ use crate::widgets::text_input;
 use crate::{styles::*, INPUT_ID};
 use crate::{Message, SCROLL_ID};
 use iced::alignment::{self, Alignment};
-use iced::widget::pane_grid;
+use iced::widget::{pane_grid, svg};
 use iced::{
+    color, theme,
     widget::{button, column, container, row, scrollable, text, Column, Container},
     Element, Length,
 };
@@ -91,24 +92,28 @@ pub fn view_pane<'a>(
             .collect::<Vec<Element<_>>>(),
     )
     .spacing(8);
+    let handle = |n| svg::Handle::from_path(format!(
+            "{}/assets/{n}.svg",
+            env!("CARGO_MANIFEST_DIR")
+        ));
+
     let button = |label, message| {
-        button(
-            text(label)
-                .horizontal_alignment(alignment::Horizontal::Center)
-                .size(16),
-        )
+        button( svg(handle(label)).width(Length::Fill).height(Length::Fill).style(theme::Svg::custom_fn(|_theme| svg::Appearance {
+                    color: Some(color!(0xffffff)),
+                })))
         .padding(2)
-        .style(TabStyle::theme())
+        .style(TransparentBtn::theme())
         .on_press(message)
     };
 
+
     let mut controls = row![
-        button("-", Message::Split(pane_grid::Axis::Horizontal, pane),),
-        button("|", Message::Split(pane_grid::Axis::Vertical, pane),)
+        button("horizontal", Message::Split(pane_grid::Axis::Horizontal, pane),),
+        button("vertical", Message::Split(pane_grid::Axis::Vertical, pane),)
     ]
     .spacing(5);
     if total_panes > 1 && !is_pinned {
-        controls = controls.push(button("X", Message::Close(pane)));
+        controls = controls.push(button("cross", Message::Close(pane)));
     }
 
     let content = column![