diff options
Diffstat (limited to '')
| -rw-r--r-- | src/panes/code_view.rs | 87 | ||||
| -rw-r--r-- | src/panes/designer_view.rs | 53 | ||||
| -rw-r--r-- | src/panes/element_list.rs | 16 | ||||
| -rw-r--r-- | src/panes/style.rs | 23 |
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() |
