Lucide icon font (fixed CI issues + slight improvements)

crates/bevy_editor_styles/src/assets/icons/LICENSE_LUCIDE.txt

@@ -0,0 +1,15 @@
+ISC License
+
+Copyright (c) for portions of Lucide are held by Cole Bemis 2013-2022 as part of Feather (MIT). All other copyright (c) for Lucide are held by Lucide Contributors 2022.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted, provided that the above
+copyright notice and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
+WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
+MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
+ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
+WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
+ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
+OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.

crates/bevy_editor_styles/src/icons.rs

@@ -0,0 +1,9 @@
+//! Icons
+
+/// A downward-facing chevron, often used to indicate
+/// collapsible sections or dropdowns.
+pub const CHEVRON_DOWN: &str = "\u{e071}";
+
+/// A vertical grip icon, typically used for drag handles
+/// or reordering list items.
+pub const GRIP_VERTICAL: &str = "\u{e0ef}";

crates/bevy_editor_styles/src/lib.rs

@@ -1,12 +1,15 @@
 //! Palette plugin for the Bevy Editor. This plugin provides a color palette for the editor's UI.
 use bevy::{asset::embedded_asset, prelude::*};
 
+pub mod icons;
+
 /// The Pallet Plugin.
 pub struct StylesPlugin;
 
 impl Plugin for StylesPlugin {
     fn build(&self, app: &mut App) {
         embedded_asset!(app, "assets/fonts/Inter-Regular.ttf");
+        embedded_asset!(app, "assets/icons/Lucide.ttf");
         app.init_resource::<Theme>();
     }
 }
@@ -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<Font>,
 }
 
+/// The icon styles for the editor.
+pub struct IconStyles {
+    /// The font for the icons.
+    pub font: Handle<Font>,
+}
+
 /// 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/icons/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)),

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()
                 },
             ));