Merge pull request #20 from pml68/feat/custom-theme

1 files changed, 38 insertions, 15 deletions

diff --git a/src/panes/designer_view.rs b/src/panes/designer_view.rs
index 6340f73..0255b40 100644
--- a/src/panes/designer_view.rs
+++ b/src/panes/designer_view.rs
@@ -1,32 +1,55 @@
-use iced::widget::{Space, button, container, pane_grid, row, text, themer};
-use iced::{Alignment, Element, Length};
+use iced::widget::{
+    button, center, container, pane_grid, responsive, row, text, themer,
+};
+use iced::{Alignment, Length};
+use material_theme::Theme;
 
 use super::style;
+use crate::icon;
 use crate::types::{DesignerPane, Message, RenderedElement};
 
 pub fn view<'a>(
-    element_tree: Option<&RenderedElement>,
+    element_tree: Option<&'a RenderedElement>,
     designer_theme: iced::Theme,
     is_focused: bool,
-) -> pane_grid::Content<'a, Message> {
-    let el_tree: Element<'a, Message> = match element_tree {
-        Some(tree) => tree.clone().into(),
-        None => text("Open a project or begin creating one").into(),
+) -> pane_grid::Content<'a, Message, Theme> {
+    let el_tree: iced::Element<'a, Message> = match element_tree {
+        Some(tree) => responsive(|size| {
+            center(
+                container(tree.clone())
+                    .style(|theme| {
+                        container::background(theme.palette().background)
+                    })
+                    .height(size.height * 0.5)
+                    .width(size.height * 0.8),
+            )
+            .into()
+        })
+        .into(),
+        None => center("Open a project or begin creating one").into(),
     };
+
     let content = container(themer(designer_theme, el_tree))
         .id(iced::widget::container::Id::new("drop_zone"))
         .height(Length::Fill)
         .width(Length::Fill);
-    let title = row![
-        text("Designer"),
-        Space::with_width(Length::Fill),
-        button("Switch to Code view")
-            .on_press(Message::SwitchPage(DesignerPane::CodeView)),
-    ]
-    .align_y(Alignment::Center);
-    let title_bar = pane_grid::TitleBar::new(title)
+
+    let title_bar = pane_grid::TitleBar::new(text("Designer").center())
+        .controls(pane_grid::Controls::dynamic(
+            row![
+                button("Switch to Code view")
+                    .on_press(Message::SwitchPage(DesignerPane::CodeView),)
+            ]
+            .align_y(Alignment::Center),
+            row![
+                button(icon::switch())
+                    .on_press(Message::SwitchPage(DesignerPane::CodeView),)
+            ]
+            .align_y(Alignment::Center),
+        ))
         .padding(10)
         .style(style::title_bar);
+
     pane_grid::Content::new(content)
         .title_bar(title_bar)
         .style(if is_focused {