added icons for buttons in project manager + style improvements

fyrox-ui/src/utils.rs

@@ -18,21 +18,20 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 // SOFTWARE.
 
-use crate::button::ButtonBuilder;
-use crate::decorator::DecoratorBuilder;
-use crate::image::ImageBuilder;
-use crate::style::resource::StyleResourceExt;
-use crate::style::Style;
 use crate::{
     border::BorderBuilder,
-    core::{algebra::Vector2, color::Color, pool::Handle},
+    button::ButtonBuilder,
+    core::{algebra::Vector2, color::Color, parking_lot::Mutex, pool::Handle},
+    decorator::DecoratorBuilder,
     formatted_text::WrapMode,
+    grid::{Column, GridBuilder, Row},
+    image::ImageBuilder,
+    style::{resource::StyleResourceExt, Style},
     text::TextBuilder,
     vector_image::{Primitive, VectorImageBuilder},
     widget::WidgetBuilder,
     Brush, BuildContext, HorizontalAlignment, RcUiNodeHandle, Thickness, UiNode, VerticalAlignment,
 };
-use fyrox_core::parking_lot::Mutex;
 use fyrox_resource::untyped::UntypedResource;
 use std::sync::Arc;
 
@@ -255,3 +254,73 @@ pub fn make_image_button_with_tooltip(
     )
     .build(ctx)
 }
+
+pub fn make_text_and_image_button_with_tooltip(
+    ctx: &mut BuildContext,
+    text: &str,
+    image_width: f32,
+    image_height: f32,
+    image: Option<UntypedResource>,
+    tooltip: &str,
+    row: usize,
+    column: usize,
+    tab_index: Option<usize>,
+    color: Color,
+    font_size: f32,
+) -> Handle<UiNode> {
+    let margin = 2.0;
+    ButtonBuilder::new(
+        WidgetBuilder::new()
+            .on_row(row)
+            .on_column(column)
+            .with_tab_index(tab_index)
+            .with_tooltip(make_simple_tooltip(ctx, tooltip))
+            .with_margin(Thickness::uniform(1.0)),
+    )
+    .with_content(
+        GridBuilder::new(
+            WidgetBuilder::new()
+                .with_child(
+                    ImageBuilder::new(
+                        WidgetBuilder::new()
+                            .on_row(0)
+                            .on_column(0)
+                            .with_background(Brush::Solid(color).into())
+                            .with_margin(Thickness {
+                                left: 2.0 * margin,
+                                top: margin,
+                                right: margin,
+                                bottom: margin,
+                            })
+                            .with_width(image_width - 2.0 * margin)
+                            .with_height(image_height - 2.0 * margin),
+                    )
+                    .with_opt_texture(image)
+                    .build(ctx),
+                )
+                .with_child(
+                    TextBuilder::new(
+                        WidgetBuilder::new()
+                            .on_row(0)
+                            .on_column(1)
+                            .with_vertical_alignment(VerticalAlignment::Center)
+                            .with_horizontal_alignment(HorizontalAlignment::Center)
+                            .with_margin(Thickness {
+                                left: 4.0,
+                                top: margin,
+                                right: 8.0,
+                                bottom: margin,
+                            }),
+                    )
+                    .with_font_size(font_size.into())
+                    .with_text(text)
+                    .build(ctx),
+                ),
+        )
+        .add_column(Column::auto())
+        .add_column(Column::stretch())
+        .add_row(Row::stretch())
+        .build(ctx),
+    )
+    .build(ctx)
+}

project-manager/src/main.rs

@@ -64,7 +64,7 @@ fn set_ui_scaling(ui: &UserInterface, scale: f32) {
 #[allow(clippy::unnecessary_to_owned)]
 fn main() {
     let mut window_attributes = WindowAttributes::default();
-    window_attributes.inner_size = Some(PhysicalSize::new(520, 562).into());
+    window_attributes.inner_size = Some(PhysicalSize::new(720, 520).into());
     window_attributes.resizable = true;
     window_attributes.title = "Fyrox Project Manager".to_string();
 

project-manager/src/manager.rs

@@ -24,8 +24,9 @@ use crate::{
     project::ProjectWizard,
     settings::{Project, Settings, SettingsWindow},
     upgrade::UpgradeTool,
-    utils::{self, is_production_ready, load_image, make_button},
+    utils::{self, is_production_ready, load_image},
 };
+use fyrox::gui::utils::make_text_and_image_button_with_tooltip;
 use fyrox::{
     core::{color::Color, log::Log, pool::Handle, some_or_return},
     gui::{
@@ -288,8 +289,33 @@ impl ProjectManager {
         let import_tooltip = "Allows you to import an existing project in the project manager.\
         \nHotkey: Ctrl+I";
 
-        let create = make_button("+ Create", 100.0, 25.0, 0, 0, 0, Some(create_tooltip), ctx);
-        let import = make_button("Import", 100.0, 25.0, 1, 0, 1, Some(import_tooltip), ctx);
+        let font_size = 16.0;
+        let create = make_text_and_image_button_with_tooltip(
+            ctx,
+            "Create",
+            20.0,
+            20.0,
+            load_image(include_bytes!("../resources/plus.png")),
+            create_tooltip,
+            0,
+            0,
+            Some(0),
+            Color::LIME_GREEN,
+            font_size,
+        );
+        let import = make_text_and_image_button_with_tooltip(
+            ctx,
+            "Import",
+            22.0,
+            22.0,
+            load_image(include_bytes!("../resources/open-folder.png")),
+            import_tooltip,
+            0,
+            1,
+            Some(1),
+            Color::GOLD,
+            font_size,
+        );
         let search_bar = SearchBarBuilder::new(
             WidgetBuilder::new()
                 .on_column(2)
@@ -381,20 +407,83 @@ impl ProjectManager {
         let open_ide_tooltip = "Opens project folder in the currently selected IDE \
         (can be changed in settings).\nHotkey: Ctrl+O";
 
-        let edit = make_button("Edit", 130.0, 25.0, 5, 0, 0, Some(edit_tooltip), ctx);
-        let run = make_button("Run", 130.0, 25.0, 6, 0, 0, Some(run_tooltip), ctx);
-        let delete = make_button("Delete", 130.0, 25.0, 7, 0, 0, Some(delete_tooltip), ctx);
-        let upgrade = make_button("Upgrade", 130.0, 25.0, 8, 0, 0, Some(upgrade_tooltip), ctx);
-        let locate = make_button("Locate", 130.0, 25.0, 9, 0, 0, Some(locate_tooltip), ctx);
-        let open_ide = make_button(
-            "Open IDE",
-            130.0,
-            25.0,
-            9,
+        let edit = make_text_and_image_button_with_tooltip(
+            ctx,
+            "Edit",
+            22.0,
+            22.0,
+            load_image(include_bytes!("../resources/pencil.png")),
+            edit_tooltip,
+            0,
+            0,
+            Some(5),
+            Color::GOLD,
+            font_size,
+        );
+        let run = make_text_and_image_button_with_tooltip(
+            ctx,
+            "Run",
+            22.0,
+            22.0,
+            load_image(include_bytes!("../resources/play.png")),
+            run_tooltip,
+            0,
+            0,
+            Some(6),
+            Color::GREEN,
+            font_size,
+        );
+        let delete = make_text_and_image_button_with_tooltip(
+            ctx,
+            "Delete",
+            22.0,
+            22.0,
+            load_image(include_bytes!("../resources/delete.png")),
+            delete_tooltip,
+            0,
+            0,
+            Some(7),
+            Color::ORANGE_RED,
+            font_size,
+        );
+        let upgrade = make_text_and_image_button_with_tooltip(
+            ctx,
+            "Upgrade",
+            22.0,
+            22.0,
+            load_image(include_bytes!("../resources/up.png")),
+            upgrade_tooltip,
             0,
             0,
-            Some(open_ide_tooltip),
+            Some(8),
+            Color::NAVY,
+            font_size,
+        );
+        let locate = make_text_and_image_button_with_tooltip(
             ctx,
+            "Locate",
+            22.0,
+            22.0,
+            load_image(include_bytes!("../resources/location.png")),
+            locate_tooltip,
+            0,
+            0,
+            Some(9),
+            Color::CADET_BLUE,
+            font_size,
+        );
+        let open_ide = make_text_and_image_button_with_tooltip(
+            ctx,
+            "Open IDE",
+            22.0,
+            22.0,
+            load_image(include_bytes!("../resources/ide.png")),
+            open_ide_tooltip,
+            0,
+            0,
+            Some(9),
+            Color::FOREST_GREEN,
+            font_size,
         );
         let hot_reload = CheckBoxBuilder::new(
             WidgetBuilder::new()
@@ -404,7 +493,6 @@ impl ProjectManager {
         )
         .with_content(
             TextBuilder::new(WidgetBuilder::new().with_margin(Thickness::left(2.0)))
-                .with_font_size(16.0f32.into())
                 .with_text("Hot Reloading")
                 .build(ctx),
         )
@@ -417,10 +505,10 @@ impl ProjectManager {
                 .with_child(hot_reload)
                 .with_child(edit)
                 .with_child(run)
-                .with_child(delete)
+                .with_child(open_ide)
                 .with_child(upgrade)
                 .with_child(locate)
-                .with_child(open_ide),
+                .with_child(delete),
         )
         .build(ctx);
 

project-manager/src/settings.rs

@@ -151,7 +151,7 @@ impl SettingsWindow {
             0,
             true,
             Default::default(),
-            200.0,
+            170.0,
         );
         let inspector = InspectorBuilder::new(WidgetBuilder::new())
             .with_context(context)