fixed style for hash map property editor

fyrox-ui/src/inspector/editors/hashmap/editor.rs

@@ -18,8 +18,9 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 // SOFTWARE.
 
+use crate::utils::ImageButtonBuilder;
 use crate::{
-    button::{Button, ButtonBuilder, ButtonMessage},
+    button::{Button, ButtonMessage},
     core::{pool::Handle, reflect::prelude::*, visitor::prelude::*},
     grid::{Column, Grid, GridBuilder, GridMessage, Row},
     inspector::{
@@ -36,11 +37,13 @@ use crate::{
         InspectorEnvironmentContainer,
     },
     message::{MessageData, UiMessage},
+    resources,
     widget::{Widget, WidgetBuilder, WidgetMessage},
     window::{WindowAlignment, WindowBuilder, WindowMessage, WindowTitle},
-    BuildContext, Control, UiNode, UserInterface,
+    BuildContext, Control, HorizontalAlignment, Thickness, UiNode, UserInterface,
 };
 use fxhash::FxHashSet;
+use fyrox_core::color::Color;
 use std::{
     collections::HashMap,
     ops::{Deref, DerefMut},
@@ -322,9 +325,21 @@ where
         environment: Option<InspectorEnvironmentContainer>,
         ctx: &mut BuildContext,
     ) -> Handle<HashMapPropertyEditor<K, V, S>> {
-        let add = ButtonBuilder::new(WidgetBuilder::new().on_row(0).on_column(0))
-            .with_text("Add...")
-            .build(ctx);
+        let add = ImageButtonBuilder::default()
+            .with_margin(Thickness {
+                left: 1.0,
+                top: 1.0,
+                right: 2.0,
+                bottom: 1.0,
+            })
+            .with_tooltip("Add Item")
+            .with_image_color(Color::opaque(0, 200, 0))
+            .with_horizontal_alignment(HorizontalAlignment::Right)
+            .on_column(2)
+            .with_image_size(12.0)
+            .with_size(18.0)
+            .with_image(resources::ADD.clone())
+            .build_button(ctx);
 
         let children = make_children_list(add, &self.hash_map);
 

fyrox-ui/src/inspector/editors/hashmap/mod.rs

@@ -21,8 +21,8 @@
 mod dialog;
 pub mod editor;
 
+use crate::utils::ImageButtonBuilder;
 use crate::{
-    button::ButtonBuilder,
     core::{reflect::prelude::*, PhantomDataSendSync},
     inspector::{
         editors::{
@@ -38,9 +38,11 @@ use crate::{
         PropertyChanged, PropertyFilter,
     },
     message::{DeliveryMode, MessageDirection, UiMessage},
+    resources,
     widget::WidgetBuilder,
-    BuildContext, VerticalAlignment,
+    BuildContext, HorizontalAlignment, VerticalAlignment,
 };
+use fyrox_core::color::Color;
 use fyrox_core::reflect;
 use fyrox_graph::SceneGraph;
 use std::sync::Arc;
@@ -165,7 +167,6 @@ fn create_value_editor<'a, 'b, V>(
     generate_property_string_values: bool,
     filter: PropertyFilter,
     name_column_width: f32,
-    hide_name_column: bool,
     base_path: String,
     has_parent_object: bool,
 ) -> Option<PropertyEditorInstance>
@@ -201,7 +202,7 @@ where
             generate_property_string_values,
             filter,
             name_column_width,
-            hide_name_column,
+            hide_name_column: true,
             base_path,
             has_parent_object,
         })
@@ -255,20 +256,24 @@ where
                 generate_property_string_values,
                 filter.clone(),
                 name_column_width,
-                hide_name_column,
                 base_path.clone(),
                 has_parent_object,
             )?;
-            let remove = ButtonBuilder::new(
-                WidgetBuilder::new()
-                    .with_width(24.0)
-                    .with_height(24.0)
-                    .with_vertical_alignment(VerticalAlignment::Center),
-            )
-            .with_text("-")
-            .build(ctx);
 
             let row = i + 1; // "add" button occupies the first row
+
+            let remove = ImageButtonBuilder::default()
+                .with_tooltip("Remove Item")
+                .with_image_color(Color::opaque(200, 0, 0))
+                .with_vertical_alignment(VerticalAlignment::Stretch)
+                .with_horizontal_alignment(HorizontalAlignment::Right)
+                .on_column(2)
+                .on_row(row)
+                .with_image_size(12.0)
+                .with_width(18.0)
+                .with_image(resources::REMOVE.clone())
+                .build_button(ctx);
+
             let key_editor = key_editor_instance.container();
             let key_editor_ref = &mut ctx[key_editor];
             key_editor_ref.set_row(row);
@@ -277,9 +282,6 @@ where
             let value_editor_ref = &mut ctx[value_editor];
             value_editor_ref.set_row(row);
             value_editor_ref.set_column(1);
-            let remove_ref = &mut ctx[remove];
-            remove_ref.set_row(row);
-            remove_ref.set_column(2);
             Some((
                 key.clone(),
                 Entry {

fyrox-ui/src/inspector/editors/inspectable.rs

@@ -104,19 +104,16 @@ where
             has_parent_object: ctx.has_parent_object,
         });
 
-        let editor;
+        let editor = InspectorBuilder::new(WidgetBuilder::new())
+            .with_context(inspector_context)
+            .build(ctx.build_context)
+            .to_base();
         let container = make_expander_container(
             ctx.layer_index,
             ctx.property_info.display_name,
             ctx.property_info.doc,
             Handle::<UiNode>::NONE,
-            {
-                editor = InspectorBuilder::new(WidgetBuilder::new())
-                    .with_context(inspector_context)
-                    .build(ctx.build_context)
-                    .to_base();
-                editor
-            },
+            editor,
             ctx.name_column_width,
             ctx.hide_name_column,
             None,