feat: initial commit

2 files changed, 251 insertions, 0 deletions

diff --git a/src/lib.rs b/src/lib.rs
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/src/lib.rs
diff --git a/src/main.rs b/src/main.rs
new file mode 100644
index 0000000..b9efce5
--- /dev/null
+++ b/src/main.rs
@@ -0,0 +1,251 @@
+use iced::{
+    executor, theme,
+    widget::{
+        button, column, container,
+        pane_grid::{self, Pane, PaneGrid},
+        row, text, Column,
+    },
+    Alignment, Application, Color, Command, Element, Length, Settings,
+};
+
+fn main() -> iced::Result {
+    App::run(Settings::default())
+}
+
+struct App {
+    is_saved: bool,
+    current_project: Option<String>,
+    theme: theme::Theme,
+    panes: pane_grid::State<Panes>,
+    focus: Option<Pane>,
+    element_list: Vec<String>,
+}
+
+#[derive(Debug, Clone)]
+enum Message {
+    ToggleTheme(theme::Theme),
+    Dragged(pane_grid::DragEvent),
+    Resized(pane_grid::ResizeEvent),
+}
+
+#[derive(Clone, Debug)]
+enum Panes {
+    Preview,
+    ElementList,
+}
+
+impl Application for App {
+    type Message = Message;
+    type Theme = theme::Theme;
+    type Executor = executor::Default;
+    type Flags = ();
+
+    fn new(_flags: ()) -> (Self, Command<Message>) {
+        let (mut panes, pane) = pane_grid::State::new(Panes::Preview);
+        panes.split(pane_grid::Axis::Vertical, pane, Panes::ElementList);
+        (
+            Self {
+                is_saved: true,
+                current_project: None,
+                theme: theme::Theme::TokyoNight,
+                panes,
+                focus: None,
+                element_list: vec!["Column", "Row", "PickList", "PaneGrid", "Button", "Text"]
+                    .into_iter()
+                    .map(|c| c.to_owned())
+                    .collect(),
+            },
+            Command::none(),
+        )
+    }
+
+    fn title(&self) -> String {
+        let saved_state = if self.is_saved { "" } else { " *" };
+
+        let project_name = match &self.current_project {
+            Some(n) => format!(" - {n}"),
+            None => "".to_owned(),
+        };
+
+        format!("iced Builder{project_name}{saved_state}")
+    }
+
+    fn theme(&self) -> iced::Theme {
+        self.theme.clone()
+    }
+
+    fn update(&mut self, message: Message) -> Command<Message> {
+        match message {
+            Message::ToggleTheme(theme) => self.theme = theme,
+            Message::Dragged(pane_grid::DragEvent::Dropped { pane, target }) => {
+                self.panes.drop(pane, target);
+            }
+            Message::Dragged(_) => {}
+            Message::Resized(pane_grid::ResizeEvent { split, ratio }) => {
+                self.panes.resize(split, ratio);
+            }
+        }
+
+        Command::none()
+    }
+
+    fn view(&self) -> Element<Message> {
+        let header: Element<_> = row![button("Toggle Theme")
+            .on_press(Message::ToggleTheme)
+            .padding(5)]
+        .width(200)
+        .into();
+        let pane_grid = PaneGrid::new(&self.panes, |id, pane, _is_maximized| {
+            let is_focused = Some(id) == self.focus;
+            match pane {
+                Panes::Preview => {
+                    let content = column![text("Preview")]
+                        .align_items(Alignment::Center)
+                        .height(Length::Fill)
+                        .width(Length::Fill);
+                    let title = text("App Preview").style(if is_focused {
+                        PANE_ID_COLOR_FOCUSED
+                    } else {
+                        PANE_ID_COLOR_UNFOCUSED
+                    });
+                    let title_bar =
+                        pane_grid::TitleBar::new(title)
+                            .padding(10)
+                            .style(if is_focused {
+                                style::title_bar_focused
+                            } else {
+                                style::title_bar_active
+                            });
+                    pane_grid::Content::new(content)
+                        .title_bar(title_bar)
+                        .style(if is_focused {
+                            style::pane_focused
+                        } else {
+                            style::pane_active
+                        })
+                }
+                Panes::ElementList => {
+                    let items_list = items_list_view(&self.element_list);
+                    let content = column![items_list]
+                        .align_items(Alignment::Center)
+                        .height(Length::Fill)
+                        .width(Length::Fill);
+                    let title = text("Element List").style(if is_focused {
+                        PANE_ID_COLOR_FOCUSED
+                    } else {
+                        PANE_ID_COLOR_UNFOCUSED
+                    });
+                    let title_bar =
+                        pane_grid::TitleBar::new(title)
+                            .padding(10)
+                            .style(if is_focused {
+                                style::title_bar_focused
+                            } else {
+                                style::title_bar_active
+                            });
+                    pane_grid::Content::new(content)
+                        .title_bar(title_bar)
+                        .style(if is_focused {
+                            style::pane_focused
+                        } else {
+                            style::pane_active
+                        })
+                }
+            }
+        })
+        .width(Length::Fill)
+        .height(Length::Fill)
+        .spacing(10)
+        .on_drag(Message::Dragged)
+        .on_resize(10, Message::Resized);
+        //
+        //let content = Column::new()
+        //    .push(header)
+        //    .push(pane_grid)
+        //    .spacing(5)
+        //    .align_items(Alignment::Center)
+        //    .width(Length::Fill);
+
+        container(pane_grid).height(Length::Fill).into()
+    }
+}
+
+// #fefefe
+const PANE_ID_COLOR_UNFOCUSED: Color = Color::from_rgb(
+    0xFE as f32 / 255.0,
+    0xFE as f32 / 255.0,
+    0xFE as f32 / 255.0,
+);
+
+// #bbbbbb
+const PANE_ID_COLOR_FOCUSED: Color = Color::from_rgb(
+    0xBB as f32 / 255.0,
+    0xBB as f32 / 255.0,
+    0xBB as f32 / 255.0,
+);
+
+fn items_list_view(items: &Vec<String>) -> Element<'static, Message> {
+    let mut column = Column::new()
+        .spacing(20)
+        .align_items(Alignment::Center)
+        .width(Length::Fill);
+
+    for value in items {
+        column = column.push(text(value));
+    }
+
+    container(column).height(250.0).width(300).into()
+}
+
+mod style {
+    use iced::widget::container;
+    use iced::{Border, Theme};
+
+    pub fn title_bar_active(theme: &Theme) -> container::Appearance {
+        let palette = theme.extended_palette();
+
+        container::Appearance {
+            text_color: Some(palette.background.strong.text),
+            background: Some(palette.background.strong.color.into()),
+            ..Default::default()
+        }
+    }
+
+    pub fn title_bar_focused(theme: &Theme) -> container::Appearance {
+        let palette = theme.extended_palette();
+
+        container::Appearance {
+            text_color: Some(palette.primary.strong.text),
+            background: Some(palette.primary.strong.color.into()),
+            ..Default::default()
+        }
+    }
+
+    pub fn pane_active(theme: &Theme) -> container::Appearance {
+        let palette = theme.extended_palette();
+
+        container::Appearance {
+            background: Some(palette.background.weak.color.into()),
+            border: Border {
+                width: 2.0,
+                color: palette.background.strong.color,
+                ..Border::default()
+            },
+            ..Default::default()
+        }
+    }
+
+    pub fn pane_focused(theme: &Theme) -> container::Appearance {
+        let palette = theme.extended_palette();
+
+        container::Appearance {
+            background: Some(palette.background.weak.color.into()),
+            border: Border {
+                width: 2.0,
+                color: palette.primary.strong.color,
+                ..Border::default()
+            },
+            ..Default::default()
+        }
+    }
+}