summaryrefslogtreecommitdiff
path: root/src/panes
diff options
context:
space:
mode:
Diffstat (limited to 'src/panes')
-rw-r--r--src/panes/code_view.rs87
-rw-r--r--src/panes/designer_view.rs53
-rw-r--r--src/panes/element_list.rs16
-rw-r--r--src/panes/style.rs23
4 files changed, 111 insertions, 68 deletions
diff --git a/src/panes/code_view.rs b/src/panes/code_view.rs
index 551347c..5999b8f 100644
--- a/src/panes/code_view.rs
+++ b/src/panes/code_view.rs
@@ -1,69 +1,90 @@
use iced::advanced::text::highlighter::Format;
-use iced::widget::{Space, button, pane_grid, row, text, text_editor};
-use iced::{Alignment, Background, Border, Font, Length, Theme};
+use iced::border::Radius;
+use iced::widget::{button, pane_grid, row, text, text_editor};
+use iced::{Alignment, Border, Font, Length};
use iced_custom_highlighter::{Highlight, Highlighter, Scope, Settings};
+use material_theme::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> {
+ let theme = if theme.is_dark() {
+ iced::Theme::SolarizedDark
+ } else {
+ iced::Theme::SolarizedLight
+ };
+
match scope {
Scope::Custom { .. } | Scope::Other => Format {
color: Some(theme.extended_palette().primary.strong.color),
font: None,
},
- _ => Highlight::default_style(theme, scope),
+ _ => Highlight::default_style(&theme, scope),
}
}
pub fn view(
editor_content: &text_editor::Content,
is_focused: bool,
-) -> pane_grid::Content<'_, Message> {
- let title = row![
- text("Generated Code"),
- Space::with_width(Length::Fill),
- tip(
- button(icon::copy())
- .on_press(Message::CopyCode)
- .padding([2, 7])
- .style(button::text),
- "Copy",
- tip::Position::FollowCursor
- ),
- Space::with_width(20),
- button("Switch to Designer view")
- .on_press(Message::SwitchPage(DesignerPane::DesignerView))
- ]
- .align_y(Alignment::Center);
- let title_bar = pane_grid::TitleBar::new(title)
+) -> 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(material_theme::button::text),
+ "Copy",
+ tip::Position::FollowCursor
+ ),
+ button("Switch to Designer view")
+ .on_press(Message::SwitchPage(DesignerPane::DesignerView))
+ ]
+ .spacing(20)
+ .align_y(Alignment::Center),
+ row![
+ tip(
+ button(icon::copy())
+ .on_press(Message::CopyCode)
+ .padding([2, 7])
+ .style(material_theme::button::text),
+ "Copy",
+ tip::Position::FollowCursor
+ ),
+ button(icon::switch())
+ .on_press(Message::SwitchPage(DesignerPane::DesignerView))
+ ]
+ .spacing(20)
+ .align_y(Alignment::Center),
+ ))
.padding(10)
.style(style::title_bar);
+
pane_grid::Content::new(
text_editor(editor_content)
.on_action(Message::EditorAction)
.font(Font::MONOSPACE)
- .highlight_with::<Highlighter>(
+ .highlight_with::<Highlighter<Theme>>(
Settings::new(vec![], highlight_style, "rs"),
Highlight::to_format,
)
.style(|theme, _| {
- let palette = theme.extended_palette();
+ let style = material_theme::text_editor::default(
+ theme,
+ text_editor::Status::Active,
+ );
+
text_editor::Style {
- background: Background::Color(
- palette.background.base.color,
- ),
border: Border {
- radius: 2.0.into(),
- width: 1.0,
- color: palette.background.strong.color,
+ radius: Radius::default(),
+ ..style.border
},
- icon: palette.background.weak.text,
- placeholder: palette.background.strong.color,
- value: palette.background.base.text,
- selection: palette.primary.weak.color,
+ ..style
}
})
.height(Length::Fill)
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 {
diff --git a/src/panes/element_list.rs b/src/panes/element_list.rs
index 10eea66..0e5dbfe 100644
--- a/src/panes/element_list.rs
+++ b/src/panes/element_list.rs
@@ -1,17 +1,18 @@
use iced::widget::{Column, column, container, pane_grid, text};
-use iced::{Alignment, Element, Length};
+use iced::{Alignment, Length};
use iced_drop::droppable;
+use material_theme::Theme;
use super::style;
-use crate::types::{ElementName, Message};
+use crate::types::{Element, ElementName, Message};
-fn items_list_view(items: &[ElementName]) -> Element<'_, Message> {
+fn items_list_view<'a>() -> Element<'a, Message> {
let mut column = Column::new()
.spacing(20)
.align_x(Alignment::Center)
.width(Length::Fill);
- for item in items {
+ for item in ElementName::ALL {
column = column.push(
droppable(text(item.clone().to_string())).on_drop(|point, rect| {
Message::DropNewElement(item.clone(), point, rect)
@@ -25,11 +26,8 @@ fn items_list_view(items: &[ElementName]) -> Element<'_, Message> {
.into()
}
-pub fn view(
- element_list: &[ElementName],
- is_focused: bool,
-) -> pane_grid::Content<'_, Message> {
- let items_list = items_list_view(element_list);
+pub fn view<'a>(is_focused: bool) -> pane_grid::Content<'a, Message, Theme> {
+ let items_list = items_list_view();
let content = column![items_list]
.align_x(Alignment::Center)
.height(Length::Fill)
diff --git a/src/panes/style.rs b/src/panes/style.rs
index 1eefb2d..acca6f9 100644
--- a/src/panes/style.rs
+++ b/src/panes/style.rs
@@ -1,24 +1,25 @@
use iced::widget::container::Style;
-use iced::{Border, Theme};
+use iced::{Background, Border};
+use material_theme::Theme;
pub fn title_bar(theme: &Theme) -> Style {
- let palette = theme.extended_palette();
+ let surface = theme.colors().surface;
Style {
- text_color: Some(palette.background.strong.text),
- background: Some(palette.background.strong.color.into()),
+ text_color: Some(surface.on_surface),
+ background: Some(Background::Color(surface.surface_container.high)),
..Default::default()
}
}
pub fn pane_active(theme: &Theme) -> Style {
- let palette = theme.extended_palette();
+ let surface = theme.colors().surface;
Style {
- background: Some(palette.background.weak.color.into()),
+ background: Some(Background::Color(surface.surface_container.low)),
border: Border {
width: 1.0,
- color: palette.background.strong.color,
+ color: surface.surface_container.high,
..Border::default()
},
..Default::default()
@@ -26,13 +27,13 @@ pub fn pane_active(theme: &Theme) -> Style {
}
pub fn pane_focused(theme: &Theme) -> Style {
- let palette = theme.extended_palette();
+ let surface = theme.colors().surface;
Style {
- background: Some(palette.background.weak.color.into()),
+ background: Some(Background::Color(surface.surface_container.low)),
border: Border {
- width: 4.0,
- color: palette.background.strong.color,
+ width: 2.0,
+ color: surface.surface_container.high,
..Border::default()
},
..Default::default()