diff --git a/crates/bevy_editor_styles/src/assets/fonts/Lucide.ttf b/crates/bevy_editor_styles/src/assets/fonts/Lucide.ttf new file mode 100644 index 00000000..acbf9536 Binary files /dev/null and b/crates/bevy_editor_styles/src/assets/fonts/Lucide.ttf differ diff --git a/crates/bevy_editor_styles/src/icons.rs b/crates/bevy_editor_styles/src/icons.rs new file mode 100644 index 00000000..481ad17e --- /dev/null +++ b/crates/bevy_editor_styles/src/icons.rs @@ -0,0 +1,4 @@ +//! Icons + +pub const CHEVRON_DOWN: &str = ""; +pub const GRIP_VERTICAL: &str = ""; diff --git a/crates/bevy_editor_styles/src/lib.rs b/crates/bevy_editor_styles/src/lib.rs index bcbf812e..90735983 100644 --- a/crates/bevy_editor_styles/src/lib.rs +++ b/crates/bevy_editor_styles/src/lib.rs @@ -1,4 +1,7 @@ //! Palette plugin for the Bevy Editor. This plugin provides a color palette for the editor's UI. + +pub mod icons; + use bevy::{asset::embedded_asset, prelude::*}; /// The Pallet Plugin. @@ -22,6 +25,8 @@ pub struct Theme { pub button: ButtonStyles, /// The text styles for the editor. pub text: TextStyles, + /// The icon styles for the editor. + pub icon: IconStyles, /// The styles for panes in the editor. pub pane: PaneStyles, /// The styles for menus in the editor. @@ -64,6 +69,12 @@ pub struct TextStyles { pub font: Handle, } +/// The icon styles for the editor. +pub struct IconStyles { + /// The font for the icons. + pub font: Handle, +} + /// The styles for panes in the editor. pub struct PaneStyles { /// The background color of the header of the pane. @@ -136,6 +147,9 @@ impl FromWorld for Theme { font: asset_server .load("embedded://bevy_editor_styles/assets/fonts/Inter-Regular.ttf"), }, + icon: IconStyles { + font: asset_server.load("embedded://bevy_editor_styles/assets/fonts/Lucide.ttf"), + }, pane: PaneStyles { header_background_color: BackgroundColor(Color::oklch(0.3407, 0.0, 0.0)), area_background_color: BackgroundColor(Color::oklch(0.3677, 0.0, 0.0)), diff --git a/crates/bevy_pane_layout/src/ui.rs b/crates/bevy_pane_layout/src/ui.rs index 68ce7d49..4de70311 100644 --- a/crates/bevy_pane_layout/src/ui.rs +++ b/crates/bevy_pane_layout/src/ui.rs @@ -1,6 +1,6 @@ use bevy::{prelude::*, window::SystemCursorIcon, winit::cursor::CursorIcon}; use bevy_context_menu::{ContextMenu, ContextMenuOption}; -use bevy_editor_styles::Theme; +use bevy_editor_styles::{icons, Theme}; use crate::{ handlers::*, registry::PaneStructure, Divider, DragState, PaneAreaNode, PaneContentNode, @@ -51,6 +51,7 @@ pub(crate) fn spawn_pane<'a>( width: Val::Percent(100.), height: Val::Px(27.), align_items: AlignItems::Center, + justify_content: JustifyContent::SpaceBetween, flex_shrink: 0., ..default() }, @@ -91,27 +92,38 @@ pub(crate) fn spawn_pane<'a>( }, ) .with_children(|parent| { - // Drop down button for selecting the pane type. - // Once a drop down menu is implemented, this will have that added. - parent.spawn(( - Node { - width: Val::Px(31.), - height: Val::Px(19.), - margin: UiRect::right(Val::Px(5.)), + parent + .spawn(Node { + align_items: AlignItems::Center, + flex_shrink: 0.0, ..default() - }, - theme.button.background_color, - theme.button.border_radius, - )); + }) + .with_children(|parent| { + // Drop down button for selecting the pane type. + // Once a drop down menu is implemented, this will have that added. + parent.spawn(( + Text::new(icons::CHEVRON_DOWN), + TextFont { + font: theme.icon.font.clone(), + font_size: 16.0, + ..default() + }, + )); + parent.spawn(( + Text::new(format!(" {name}")), + TextFont { + font: theme.text.font.clone(), + font_size: 14.0, + ..default() + }, + )); + }); + parent.spawn(( - Text::new(name), + Text::new(icons::GRIP_VERTICAL), TextFont { - font: theme.text.font.clone(), - font_size: 14., - ..default() - }, - Node { - flex_shrink: 0., + font: theme.icon.font.clone(), + font_size: 16.0, ..default() }, ));