4 files changed, 176 insertions, 0 deletions
diff --git a/src/panes/code_view.rs b/src/panes/code_view.rs
new file mode 100644
index 0000000..f545157
--- /dev/null
+++ b/src/panes/code_view.rs
@@ -0,0 +1,50 @@
+use iced::widget::{button, pane_grid, row, text, text_editor, Space};
+use iced::{Alignment, Font, Length, Theme};
+use super::style;
+use crate::icon::copy;
+use crate::types::{DesignerPage, Message};
+use crate::widget::tip;
+
+pub fn view(
+    editor_content: &text_editor::Content,
+    theme: Theme,
+    is_focused: bool,
+) -> pane_grid::Content<'_, Message> {
+    let title = row![
+        text("Generated Code"),
+        Space::with_width(Length::Fill),
+        tip(
+            button(copy()).on_press(Message::CopyCode),
+            "Copy code to clipboard",
+            tip::Position::FollowCursor
+        ),
+        Space::with_width(20),
+        button("Switch to Designer view")
+            .on_press(Message::SwitchPage(DesignerPage::DesignerView))
+    ]
+    .align_y(Alignment::Center);
+    let title_bar = pane_grid::TitleBar::new(title)
+        .padding(10)
+        .style(style::title_bar);
+    pane_grid::Content::new(
+        text_editor(editor_content)
+            .on_action(Message::EditorAction)
+            .highlight(
+                "rs",
+                if theme.to_string().contains("Dark") {
+                    highlighter::Theme::SolarizedDark
+                } else {
+                    highlighter::Theme::InspiredGitHub
+                },
+            .font(Font::MONOSPACE)
+            )
+            .height(Length::Fill)
+            .padding(20),
+    )
+    .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
new file mode 100644
index 0000000..76456db
--- /dev/null
+++ b/src/panes/designer_view.rs
@@ -0,0 +1,37 @@
+use iced::widget::{button, container, pane_grid, row, text, themer, Space};
+use iced::{Alignment, Element, Length};
+
+use super::style;
+use crate::types::{DesignerPage, Message, RenderedElement};
+
+pub fn view<'a>(
+    element_tree: &Option<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(),
+    };
+    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(DesignerPage::CodeView)),
+    ]
+    .align_y(Alignment::Center);
+    let title_bar = pane_grid::TitleBar::new(title)
+        .padding(10)
+        .style(style::title_bar);
+    pane_grid::Content::new(content)
+        .title_bar(title_bar)
+        .style(if is_focused {
+            style::pane_focused
+        } else {
+            style::pane_active
+        })
+}
diff --git a/src/panes/element_list.rs b/src/panes/element_list.rs
new file mode 100644
index 0000000..8a1c6eb
--- /dev/null
+++ b/src/panes/element_list.rs
@@ -0,0 +1,49 @@
+use iced::widget::{column, container, pane_grid, text, Column};
+use iced::{Alignment, Element, Length};
+use iced_drop::droppable;
+
+use super::style;
+use crate::types::{ElementName, Message};
+
+fn items_list_view(items: &[ElementName]) -> Element<'_, Message> {
+    let mut column = Column::new()
+        .spacing(20)
+        .align_x(Alignment::Center)
+        .width(Length::Fill);
+
+    for item in items {
+        column =
+            column.push(droppable(text(item.clone().to_string())).on_drop(
+                move |point, rect| {
+                    Message::DropNewElement(item.clone(), point, rect)
+                },
+            ));
+    }
+
+    container(column)
+        .width(Length::Fill)
+        .height(Length::Fill)
+        .into()
+}
+
+pub fn view(
+    element_list: &[ElementName],
+    is_focused: bool,
+) -> pane_grid::Content<'_, Message> {
+    let items_list = items_list_view(element_list);
+    let content = column![items_list]
+        .align_x(Alignment::Center)
+        .height(Length::Fill)
+        .width(Length::Fill);
+    let title = text("Element List");
+    let title_bar = pane_grid::TitleBar::new(title)
+        .padding(10)
+        .style(style::title_bar);
+    pane_grid::Content::new(content)
+        .title_bar(title_bar)
+        .style(if is_focused {
+            style::pane_focused
+        } else {
+            style::pane_active
+        })
+}
diff --git a/src/panes/style.rs b/src/panes/style.rs
new file mode 100644
index 0000000..1eefb2d
--- /dev/null
+++ b/src/panes/style.rs
@@ -0,0 +1,40 @@
+use iced::widget::container::Style;
+use iced::{Border, Theme};
+
+pub fn title_bar(theme: &Theme) -> Style {
+    let palette = theme.extended_palette();
+
+    Style {
+        text_color: Some(palette.background.strong.text),
+        background: Some(palette.background.strong.color.into()),
+        ..Default::default()
+    }
+}
+
+pub fn pane_active(theme: &Theme) -> Style {
+    let palette = theme.extended_palette();
+
+    Style {
+        background: Some(palette.background.weak.color.into()),
+        border: Border {
+            width: 1.0,
+            color: palette.background.strong.color,
+            ..Border::default()
+        },
+        ..Default::default()
+    }
+}
+
+pub fn pane_focused(theme: &Theme) -> Style {
+    let palette = theme.extended_palette();
+
+    Style {
+        background: Some(palette.background.weak.color.into()),
+        border: Border {
+            width: 4.0,
+            color: palette.background.strong.color,
+            ..Border::default()
+        },
+        ..Default::default()
+    }
+}