Stevan/zoeae
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

styles: working on making it look just right

Browse Source
This commit is contained in:
Stevan Freeborn
2026-01-25 17:26:16 -06:00
parent bd9489feb4
commit 2c098b23b7
5 changed files with 204 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/action_bar.rs
+34 -4
View File
@@ -1,4 +1,7 @@
use iced::{Element, Length, widget::{container, pick_list, row}};
use iced::{
Background, Element, Length, Padding, Theme,
widget::{container, pick_list, row},
};
use crate::message::{FileAction, Message, ViewAction};
@@ -6,12 +9,20 @@ pub fn view(
selected_file_action: Option<FileAction>,
selected_view_action: Option<ViewAction>,
) -> Element<'static, Message> {
let pick_list_padding = Padding {
left: 4.0,
right: 4.0,
top: 2.0,
bottom: 2.0,
};
let file_menu = pick_list(
FileAction::ALL,
selected_file_action,
Message::FileActionSelected,
)
.padding(pick_list_padding)
.style(pick_list_style)
.placeholder("File");
let view_menu = pick_list(
@@ -19,11 +30,30 @@ pub fn view(
selected_view_action,
Message::ViewActionSelected,
)
.padding(pick_list_padding)
.style(pick_list_style)
.placeholder("View");
container(
row![file_menu, view_menu].spacing(10)
)
container(row![file_menu, view_menu].spacing(10))
.style(|theme: &Theme| {
let base = container::Style::default();
container::Style {
background: container::primary(theme).background,
..base
}
})
.padding(5)
.width(Length::Fill)
.into()
}
fn pick_list_style(theme: &Theme, status: pick_list::Status) -> pick_list::Style {
let base = pick_list::default(theme, status);
pick_list::Style {
placeholder_color: base.text_color,
background: Background::Color(theme.palette().primary),
..base
}
}
src/components/editor.rs
+17 -2
View File
@@ -1,5 +1,5 @@
use iced::{
Element, Length, Theme, highlighter,
Element, Length, Theme, border, highlighter,
widget::{container, markdown, row, text_editor},
};
@@ -9,9 +9,24 @@ pub fn view<'a>(file: &'a File, mode: Mode, font_size: u32) -> Element<'a, Messa
match mode {
Mode::Edit => {
let editor = text_editor(file.content())
.highlight(file.extension().unwrap_or("txt"), highlighter::Theme::Base16Ocean)
.highlight(
file.extension().unwrap_or("txt"),
highlighter::Theme::Base16Ocean,
)
.padding(10)
.size(font_size)
.height(Length::Fill)
.style(|theme: &Theme, status: text_editor::Status| {
let base = text_editor::default(theme, status);
text_editor::Style {
border: border::Border {
width: 0.0,
..Default::default()
},
..base
}
})
.on_action(Message::Edit);
container(row![editor]).height(Length::Fill).into()
src/components/status_bar.rs
+19 -9
View File
@@ -1,16 +1,26 @@
use iced::widget::{container, row, text};
use iced::{Element, Length};
use crate::file::File;
use iced::widget::{container, row, text};
use iced::{Element, Length, Padding, Theme};
pub fn view(file: &File) -> Element<'_, crate::Message> {
let path_text = text(file.path_summary());
let cursor_text = text(file.position_summary());
let path_text = text(file.path_summary()).size(12);
let cursor_text = text(file.position_summary()).size(12);
container(
row![cursor_text, path_text]
.spacing(20)
)
container(row![cursor_text, path_text].spacing(20))
.style(|theme: &Theme| {
let base = container::Style::default();
container::Style {
background: container::primary(theme).background,
..base
}
})
.width(Length::Fill)
.padding(5)
.padding(Padding {
left: 20.0,
right: 20.0,
top: 5.0,
bottom: 5.0,
})
.into()
}
src/components/tabs.rs
+40 -8
View File
@@ -1,6 +1,6 @@
use crate::file::File;
use crate::message::{FileAction, Message};
use iced::{Background, Border, Theme, border};
use iced::{Background, Border, Padding, Theme, border};
use iced::{
Element,
widget::{button, container, row, scrollable, text},
@@ -12,30 +12,62 @@ pub fn view<'a>(files: &'a [File], active_index: usize) -> Element<'a, Message>
let label = text(file.display_name());
let close_btn =
button(text("x")).on_press(Message::FileActionSelected(FileAction::Close(Some(index))));
button(text("x")).padding(1).on_press(Message::FileActionSelected(FileAction::Close(Some(index))));
button(row![label, close_btn].spacing(5))
button(
row![label, close_btn]
.spacing(5)
.align_y(iced::Alignment::Center),
)
.on_press(Message::SwitchTab(index))
.padding(5)
.style(move |theme: &Theme, status| {
.padding(Padding {
top: 5.0,
bottom: 5.0,
left: 10.0,
right: 10.0,
})
.style(move |theme: &Theme, status: button::Status| {
let base = button::primary(theme, status);
let button_background = if is_focused {
base.background
Some(Background::Color(theme.palette().primary))
} else {
Some(Background::Color(theme.palette().background))
};
button::Style {
let button_style = button::Style {
background: button_background,
border: Border {
radius: border::radius(0).top_left(10).top_right(10),
..base.border
},
..base
};
match status {
button::Status::Hovered => button::Style {
background: Some(Background::Color(theme.palette().primary)),
..button_style
},
_ => button_style,
}
})
.into()
});
scrollable(container(row(tabs).spacing(2))).into()
scrollable(container(row(tabs)).padding(Padding {
top: 5.0,
left: 5.0,
right: 5.0,
bottom: 0.0,
}))
.direction(scrollable::Direction::Horizontal(
scrollable::Scrollbar::new().spacing(1)
))
.style(|theme: &Theme, status: scrollable::Status| {
let mut style = scrollable::default(theme, status);
style.horizontal_rail.background = Some(Background::Color(theme.palette().primary));
style
})
.into()
}
src/main.rs
+14 -6
View File
@@ -7,9 +7,10 @@ mod key_bindings;
mod message;
mod state;
use iced::Theme;
use iced::theme::Palette;
use iced::widget::column;
use iced::window::icon;
use iced::{Color, Theme};
use iced::{Element, Subscription, Task, event};
use iced::{keyboard, window};
@@ -26,9 +27,7 @@ pub fn main() -> iced::Result {
..Default::default()
})
.window(window::Settings {
icon: Some(
icon::from_file_data(constants::ICON_BYTES, None).expect("Failed to load icon"),
),
icon: Some(icon::from_file_data(constants::ICON_BYTES, None).expect("Failed to load icon")),
..window::Settings::default()
})
.run()
@@ -59,7 +58,6 @@ fn view(state: &State) -> Element<'_, Message> {
components::editor::view(current_file, state.mode(), state.font_size()),
components::status_bar::view(current_file),
]
.padding(10)
.into()
}
@@ -81,5 +79,15 @@ fn subscription(_state: &State) -> Subscription<Message> {
}
fn theme(_state: &State) -> Theme {
Theme::Dark
Theme::custom(
"Win11 Dark",
Palette {
background: Color::from_rgb8(0x20, 0x20, 0x20),
text: Color::from_rgb8(0xF2, 0xF2, 0xF2),
primary: Color::from_rgb8(0x2C, 0x2C, 0x2C),
success: Color::from_rgb8(0x4C, 0xC3, 0x8A),
warning: Color::from_rgb8(0xF5, 0xC8, 0x4B),
danger: Color::from_rgb8(0xE8, 0x6A, 0x6A),
},
)
}