From 14fcc593c7bd46d0d7b909cc1167bd09138acde2 Mon Sep 17 00:00:00 2001 From: Wojtek Figat Date: Fri, 30 May 2025 15:28:56 +0200 Subject: [PATCH] Fix various margins and spacings between UI elements in Editor to be consistent --- .../CustomEditors/CustomEditorPresenter.cs | 4 +- .../CustomEditors/Dedicated/ActorEditor.cs | 4 +- .../Dedicated/AudioSourceEditor.cs | 2 +- .../CustomEditors/Dedicated/ClothEditor.cs | 2 +- .../Dedicated/LocalizationSettingsEditor.cs | 4 ++ .../Dedicated/ModelPrefabEditor.cs | 2 +- .../Dedicated/ParticleEffectEditor.cs | 2 +- .../CustomEditors/Dedicated/RagdollEditor.cs | 4 +- .../Dedicated/SceneAnimationPlayerEditor.cs | 2 +- .../Dedicated/UIControlEditor.cs | 2 +- .../Editors/ActorTransformEditor.cs | 30 ++++---- .../CustomEditors/Editors/CollectionEditor.cs | 8 +-- .../CustomEditors/Editors/ColorTrackball.cs | 2 +- .../CustomEditors/Editors/QuaternionEditor.cs | 2 +- .../CustomEditors/Editors/Vector2Editor.cs | 6 +- .../CustomEditors/Editors/Vector3Editor.cs | 6 +- .../CustomEditors/Editors/Vector4Editor.cs | 6 +- .../CustomEditors/Editors/VersionEditor.cs | 2 +- .../Elements/Container/GroupElement.cs | 3 +- .../CustomEditors/GUI/PropertiesList.cs | 37 ++++++---- .../CustomEditors/LayoutElementsContainer.cs | 11 +++ .../SceneGraph/Actors/VideoPlayerEditor.cs | 2 +- Source/Editor/Utilities/Constants.cs | 2 + Source/Editor/Utilities/Utils.cs | 5 +- .../Editor/Windows/Assets/ModelBaseWindow.cs | 1 - Source/Editor/Windows/Assets/ModelWindow.cs | 2 +- .../Windows/Assets/VisualScriptWindow.cs | 2 +- Source/Engine/UI/GUI/Panels/DropPanel.cs | 42 ++++++++--- .../Engine/UI/GUI/Panels/UniformGridPanel.cs | 72 ++++++------------- 29 files changed, 143 insertions(+), 126 deletions(-) diff --git a/Source/Editor/CustomEditors/CustomEditorPresenter.cs b/Source/Editor/CustomEditors/CustomEditorPresenter.cs index 62db53cab..a518d92a1 100644 --- a/Source/Editor/CustomEditors/CustomEditorPresenter.cs +++ b/Source/Editor/CustomEditors/CustomEditorPresenter.cs @@ -81,6 +81,8 @@ namespace FlaxEditor.CustomEditors Offsets = Margin.Zero; Pivot = Float2.Zero; IsScrollable = true; + Spacing = Utilities.Constants.UIMargin; + Margin = new Margin(Utilities.Constants.UIMargin); } /// @@ -95,7 +97,7 @@ namespace FlaxEditor.CustomEditors { FlaxEditor.Editor.LogWarning(ex); - // Refresh layout on errors to reduce lgo spam + // Refresh layout on errors to reduce log spam _presenter.BuildLayout(); } diff --git a/Source/Editor/CustomEditors/Dedicated/ActorEditor.cs b/Source/Editor/CustomEditors/Dedicated/ActorEditor.cs index 062aeeedd..60bc033ee 100644 --- a/Source/Editor/CustomEditors/Dedicated/ActorEditor.cs +++ b/Source/Editor/CustomEditors/Dedicated/ActorEditor.cs @@ -71,14 +71,14 @@ namespace FlaxEditor.CustomEditors.Dedicated // Display prefab UI (when displaying object inside Prefab Window then display only nested prefabs) prefab.GetNestedObject(ref prefabObjectId, out var nestedPrefabId, out var nestedPrefabObjectId); var nestedPrefab = FlaxEngine.Content.Load(nestedPrefabId); - var panel = layout.CustomContainer(); + var panel = layout.UniformGrid(); panel.CustomControl.Height = 20.0f; panel.CustomControl.SlotsVertically = 1; if (Presenter == Editor.Instance.Windows.PropertiesWin.Presenter || nestedPrefab) { var targetPrefab = nestedPrefab ?? prefab; panel.CustomControl.SlotsHorizontally = 3; - + // Selecting actor prefab asset var selectPrefab = panel.Button("Select Prefab"); selectPrefab.Button.Clicked += () => diff --git a/Source/Editor/CustomEditors/Dedicated/AudioSourceEditor.cs b/Source/Editor/CustomEditors/Dedicated/AudioSourceEditor.cs index 4f18baa84..1ddc1c144 100644 --- a/Source/Editor/CustomEditors/Dedicated/AudioSourceEditor.cs +++ b/Source/Editor/CustomEditors/Dedicated/AudioSourceEditor.cs @@ -28,7 +28,7 @@ namespace FlaxEditor.CustomEditors.Dedicated _infoLabel = playbackGroup.Label(string.Empty).Label; _infoLabel.AutoHeight = true; - var grid = playbackGroup.CustomContainer(); + var grid = playbackGroup.UniformGrid(); var gridControl = grid.CustomControl; gridControl.ClipChildren = false; gridControl.Height = Button.DefaultHeight; diff --git a/Source/Editor/CustomEditors/Dedicated/ClothEditor.cs b/Source/Editor/CustomEditors/Dedicated/ClothEditor.cs index e16f1141c..abb27867a 100644 --- a/Source/Editor/CustomEditors/Dedicated/ClothEditor.cs +++ b/Source/Editor/CustomEditors/Dedicated/ClothEditor.cs @@ -59,7 +59,7 @@ namespace FlaxEditor.CustomEditors.Dedicated var paintValue = new ReadOnlyValueContainer(new ScriptType(typeof(ClothPaintingGizmoMode)), _gizmoMode); paintGroup.Object(paintValue); { - var grid = paintGroup.CustomContainer(); + var grid = paintGroup.UniformGrid(); var gridControl = grid.CustomControl; gridControl.ClipChildren = false; gridControl.Height = Button.DefaultHeight; diff --git a/Source/Editor/CustomEditors/Dedicated/LocalizationSettingsEditor.cs b/Source/Editor/CustomEditors/Dedicated/LocalizationSettingsEditor.cs index bfe3d5efe..db7434125 100644 --- a/Source/Editor/CustomEditors/Dedicated/LocalizationSettingsEditor.cs +++ b/Source/Editor/CustomEditors/Dedicated/LocalizationSettingsEditor.cs @@ -92,12 +92,14 @@ namespace FlaxEditor.CustomEditors.Dedicated // Update add button var update = group.Button("Update").Button; + group.Space(0); update.TooltipText = "Refreshes the dashboard statistics"; update.Height = 16.0f; update.Clicked += RebuildLayout; // New locale add button var addLocale = group.Button("Add Locale...").Button; + group.Space(0); addLocale.TooltipText = "Shows a locale picker and creates new localization for it with not translated string tables"; addLocale.Height = 16.0f; addLocale.ButtonClicked += delegate(Button button) @@ -167,12 +169,14 @@ namespace FlaxEditor.CustomEditors.Dedicated // Export button var exportLocalization = group.Button("Export...").Button; + group.Space(0); exportLocalization.TooltipText = "Exports the localization strings into .pot file for translation"; exportLocalization.Height = 16.0f; exportLocalization.Clicked += () => Export(tableEntries, allKeys); // Find localized strings in code button var findStringsCode = group.Button("Find localized strings in code").Button; + group.Space(0); findStringsCode.TooltipText = "Searches for localized string usage in inside a project source files"; findStringsCode.Height = 16.0f; findStringsCode.Clicked += delegate diff --git a/Source/Editor/CustomEditors/Dedicated/ModelPrefabEditor.cs b/Source/Editor/CustomEditors/Dedicated/ModelPrefabEditor.cs index f57548258..22c5d7ece 100644 --- a/Source/Editor/CustomEditors/Dedicated/ModelPrefabEditor.cs +++ b/Source/Editor/CustomEditors/Dedicated/ModelPrefabEditor.cs @@ -55,7 +55,7 @@ public class ModelPrefabEditor : GenericEditor // Creates the import path UI var group = layout.Group("Import Path"); - Utilities.Utils.CreateImportPathUI(group, modelPrefab.ImportPath, false); + Utilities.Utils.CreateImportPathUI(group, modelPrefab.ImportPath); var button = layout.Button("Reimport", "Reimports the source asset as prefab."); _reimportButton = button.Button; diff --git a/Source/Editor/CustomEditors/Dedicated/ParticleEffectEditor.cs b/Source/Editor/CustomEditors/Dedicated/ParticleEffectEditor.cs index 783b787ae..3de013bfb 100644 --- a/Source/Editor/CustomEditors/Dedicated/ParticleEffectEditor.cs +++ b/Source/Editor/CustomEditors/Dedicated/ParticleEffectEditor.cs @@ -92,7 +92,7 @@ namespace FlaxEditor.CustomEditors.Dedicated _infoLabel = playbackGroup.Label(string.Empty).Label; _infoLabel.AutoHeight = true; - var grid = playbackGroup.CustomContainer(); + var grid = playbackGroup.UniformGrid(); var gridControl = grid.CustomControl; gridControl.ClipChildren = false; gridControl.Height = Button.DefaultHeight; diff --git a/Source/Editor/CustomEditors/Dedicated/RagdollEditor.cs b/Source/Editor/CustomEditors/Dedicated/RagdollEditor.cs index b68ade40b..ce157240a 100644 --- a/Source/Editor/CustomEditors/Dedicated/RagdollEditor.cs +++ b/Source/Editor/CustomEditors/Dedicated/RagdollEditor.cs @@ -39,7 +39,7 @@ namespace FlaxEditor.CustomEditors.Dedicated if (ragdoll.Parent is AnimatedModel animatedModel && animatedModel.SkinnedModel) { // Builder - var grid = editorGroup.CustomContainer(); + var grid = editorGroup.UniformGrid(); var gridControl = grid.CustomControl; gridControl.ClipChildren = false; gridControl.Height = Button.DefaultHeight; @@ -53,7 +53,7 @@ namespace FlaxEditor.CustomEditors.Dedicated if (Presenter.Owner != null) { // Selection - var grid = editorGroup.CustomContainer(); + var grid = editorGroup.UniformGrid(); var gridControl = grid.CustomControl; gridControl.ClipChildren = false; gridControl.Height = Button.DefaultHeight; diff --git a/Source/Editor/CustomEditors/Dedicated/SceneAnimationPlayerEditor.cs b/Source/Editor/CustomEditors/Dedicated/SceneAnimationPlayerEditor.cs index aa2b42edc..e4496601b 100644 --- a/Source/Editor/CustomEditors/Dedicated/SceneAnimationPlayerEditor.cs +++ b/Source/Editor/CustomEditors/Dedicated/SceneAnimationPlayerEditor.cs @@ -28,7 +28,7 @@ namespace FlaxEditor.CustomEditors.Dedicated _infoLabel = playbackGroup.Label(string.Empty).Label; _infoLabel.AutoHeight = true; - var grid = playbackGroup.CustomContainer(); + var grid = playbackGroup.UniformGrid(); var gridControl = grid.CustomControl; gridControl.ClipChildren = false; gridControl.Height = Button.DefaultHeight; diff --git a/Source/Editor/CustomEditors/Dedicated/UIControlEditor.cs b/Source/Editor/CustomEditors/Dedicated/UIControlEditor.cs index 15566a631..614d2c160 100644 --- a/Source/Editor/CustomEditors/Dedicated/UIControlEditor.cs +++ b/Source/Editor/CustomEditors/Dedicated/UIControlEditor.cs @@ -682,7 +682,7 @@ namespace FlaxEditor.CustomEditors.Dedicated private CustomElementsContainer UniformGridTwoByOne(LayoutElementsContainer cont) { - var grid = cont.CustomContainer(); + var grid = cont.UniformGrid(); grid.CustomControl.SlotsHorizontally = 2; grid.CustomControl.SlotsVertically = 1; grid.CustomControl.SlotPadding = Margin.Zero; diff --git a/Source/Editor/CustomEditors/Editors/ActorTransformEditor.cs b/Source/Editor/CustomEditors/Editors/ActorTransformEditor.cs index 355321329..2daf2f6af 100644 --- a/Source/Editor/CustomEditors/Editors/ActorTransformEditor.cs +++ b/Source/Editor/CustomEditors/Editors/ActorTransformEditor.cs @@ -41,13 +41,9 @@ namespace FlaxEditor.CustomEditors.Editors public override void Initialize(LayoutElementsContainer layout) { base.Initialize(layout); - + if (XElement.ValueBox.Parent is UniformGridPanel ug) - { - ug.Height += 2; - ug.SlotSpacing = new Float2(4); - ug.SlotPadding = new Margin(0, 0, 1, 1); - } + CheckLayout(ug); // Override colors var back = FlaxEngine.GUI.Style.Current.TextBoxBackground; @@ -75,11 +71,7 @@ namespace FlaxEditor.CustomEditors.Editors base.Initialize(layout); if (XElement.ValueBox.Parent is UniformGridPanel ug) - { - ug.Height += 2; - ug.SlotSpacing = new Float2(4); - ug.SlotPadding = new Margin(0, 0, 1, 1); - } + CheckLayout(ug); // Override colors var back = FlaxEngine.GUI.Style.Current.TextBoxBackground; @@ -136,13 +128,9 @@ namespace FlaxEditor.CustomEditors.Editors menu.AddButton("Link", ToggleLink).LinkTooltip("Links scale components for uniform scaling"); }; } - + if (XElement.ValueBox.Parent is UniformGridPanel ug) - { - ug.Height += 2; - ug.SlotSpacing = new Float2(4); - ug.SlotPadding = new Margin(0, 0, 1, 1); - } + CheckLayout(ug); // Override colors var back = FlaxEngine.GUI.Style.Current.TextBoxBackground; @@ -203,5 +191,13 @@ namespace FlaxEditor.CustomEditors.Editors _linkButton.TooltipText = LinkValues ? "Unlinks scale components from uniform scaling" : "Links scale components for uniform scaling"; } } + + private static void CheckLayout(UniformGridPanel ug) + { + // Enlarge to fix border visibility + ug.Height += 2; + ug.SlotSpacing += new Float2(2); + ug.SlotPadding += new Margin(0, 0, 1, 1); + } } } diff --git a/Source/Editor/CustomEditors/Editors/CollectionEditor.cs b/Source/Editor/CustomEditors/Editors/CollectionEditor.cs index 6ebdb9a58..cfc11d5a5 100644 --- a/Source/Editor/CustomEditors/Editors/CollectionEditor.cs +++ b/Source/Editor/CustomEditors/Editors/CollectionEditor.cs @@ -642,10 +642,10 @@ namespace FlaxEditor.CustomEditors.Editors if (_canResize && !_readOnly) { var panel = dragArea.HorizontalPanel(); - panel.Panel.Size = new Float2(0, 20); - panel.Panel.Margin = new Margin(2); + panel.Panel.Size = new Float2(0, 18); + panel.Panel.Margin = new Margin(0, 0, Utilities.Constants.UIMargin, 0); - var removeButton = panel.Button("-", "Remove last item"); + var removeButton = panel.Button("-", "Remove the last item"); removeButton.Button.Size = new Float2(16, 16); removeButton.Button.Enabled = size > _minCount; removeButton.Button.AnchorPreset = AnchorPresets.TopRight; @@ -656,7 +656,7 @@ namespace FlaxEditor.CustomEditors.Editors Resize(Count - 1); }; - var addButton = panel.Button("+", "Add new item"); + var addButton = panel.Button("+", "Add a new item"); addButton.Button.Size = new Float2(16, 16); addButton.Button.Enabled = (!NotNullItems || size > 0) && size < _maxCount; addButton.Button.AnchorPreset = AnchorPresets.TopRight; diff --git a/Source/Editor/CustomEditors/Editors/ColorTrackball.cs b/Source/Editor/CustomEditors/Editors/ColorTrackball.cs index d0259102d..2ca325e45 100644 --- a/Source/Editor/CustomEditors/Editors/ColorTrackball.cs +++ b/Source/Editor/CustomEditors/Editors/ColorTrackball.cs @@ -50,7 +50,7 @@ namespace FlaxEditor.CustomEditors.Editors // Scale editor { - var grid = masterPanel.CustomContainer(); + var grid = masterPanel.UniformGrid(); var gridControl = grid.CustomControl; gridControl.SlotPadding = new Margin(4, 2, 2, 2); gridControl.ClipChildren = false; diff --git a/Source/Editor/CustomEditors/Editors/QuaternionEditor.cs b/Source/Editor/CustomEditors/Editors/QuaternionEditor.cs index feaada5df..3baad685d 100644 --- a/Source/Editor/CustomEditors/Editors/QuaternionEditor.cs +++ b/Source/Editor/CustomEditors/Editors/QuaternionEditor.cs @@ -46,7 +46,7 @@ namespace FlaxEditor.CustomEditors.Editors /// public override void Initialize(LayoutElementsContainer layout) { - var grid = layout.CustomContainer(); + var grid = layout.UniformGrid(); var gridControl = grid.CustomControl; gridControl.ClipChildren = false; gridControl.Height = TextBox.DefaultHeight; diff --git a/Source/Editor/CustomEditors/Editors/Vector2Editor.cs b/Source/Editor/CustomEditors/Editors/Vector2Editor.cs index 6ae8e608f..8c09298c7 100644 --- a/Source/Editor/CustomEditors/Editors/Vector2Editor.cs +++ b/Source/Editor/CustomEditors/Editors/Vector2Editor.cs @@ -42,7 +42,7 @@ namespace FlaxEditor.CustomEditors.Editors /// public override void Initialize(LayoutElementsContainer layout) { - var grid = layout.CustomContainer(); + var grid = layout.UniformGrid(); var gridControl = grid.CustomControl; gridControl.ClipChildren = false; gridControl.Height = TextBox.DefaultHeight; @@ -131,7 +131,7 @@ namespace FlaxEditor.CustomEditors.Editors /// public override void Initialize(LayoutElementsContainer layout) { - var grid = layout.CustomContainer(); + var grid = layout.UniformGrid(); var gridControl = grid.CustomControl; gridControl.ClipChildren = false; gridControl.Height = TextBox.DefaultHeight; @@ -220,7 +220,7 @@ namespace FlaxEditor.CustomEditors.Editors /// public override void Initialize(LayoutElementsContainer layout) { - var grid = layout.CustomContainer(); + var grid = layout.UniformGrid(); var gridControl = grid.CustomControl; gridControl.ClipChildren = false; gridControl.Height = TextBox.DefaultHeight; diff --git a/Source/Editor/CustomEditors/Editors/Vector3Editor.cs b/Source/Editor/CustomEditors/Editors/Vector3Editor.cs index cb44c60c8..d81cae199 100644 --- a/Source/Editor/CustomEditors/Editors/Vector3Editor.cs +++ b/Source/Editor/CustomEditors/Editors/Vector3Editor.cs @@ -82,7 +82,7 @@ namespace FlaxEditor.CustomEditors.Editors /// public override void Initialize(LayoutElementsContainer layout) { - var grid = layout.CustomContainer(); + var grid = layout.UniformGrid(); var gridControl = grid.CustomControl; gridControl.ClipChildren = false; gridControl.Height = TextBox.DefaultHeight; @@ -469,7 +469,7 @@ namespace FlaxEditor.CustomEditors.Editors /// public override void Initialize(LayoutElementsContainer layout) { - var grid = layout.CustomContainer(); + var grid = layout.UniformGrid(); var gridControl = grid.CustomControl; gridControl.ClipChildren = false; gridControl.Height = TextBox.DefaultHeight; @@ -783,7 +783,7 @@ namespace FlaxEditor.CustomEditors.Editors /// public override void Initialize(LayoutElementsContainer layout) { - var grid = layout.CustomContainer(); + var grid = layout.UniformGrid(); var gridControl = grid.CustomControl; gridControl.ClipChildren = false; gridControl.Height = TextBox.DefaultHeight; diff --git a/Source/Editor/CustomEditors/Editors/Vector4Editor.cs b/Source/Editor/CustomEditors/Editors/Vector4Editor.cs index 01328c34b..34d96a80a 100644 --- a/Source/Editor/CustomEditors/Editors/Vector4Editor.cs +++ b/Source/Editor/CustomEditors/Editors/Vector4Editor.cs @@ -52,7 +52,7 @@ namespace FlaxEditor.CustomEditors.Editors /// public override void Initialize(LayoutElementsContainer layout) { - var grid = layout.CustomContainer(); + var grid = layout.UniformGrid(); var gridControl = grid.CustomControl; gridControl.ClipChildren = false; gridControl.Height = TextBox.DefaultHeight; @@ -163,7 +163,7 @@ namespace FlaxEditor.CustomEditors.Editors /// public override void Initialize(LayoutElementsContainer layout) { - var grid = layout.CustomContainer(); + var grid = layout.UniformGrid(); var gridControl = grid.CustomControl; gridControl.ClipChildren = false; gridControl.Height = TextBox.DefaultHeight; @@ -274,7 +274,7 @@ namespace FlaxEditor.CustomEditors.Editors /// public override void Initialize(LayoutElementsContainer layout) { - var grid = layout.CustomContainer(); + var grid = layout.UniformGrid(); var gridControl = grid.CustomControl; gridControl.ClipChildren = false; gridControl.Height = TextBox.DefaultHeight; diff --git a/Source/Editor/CustomEditors/Editors/VersionEditor.cs b/Source/Editor/CustomEditors/Editors/VersionEditor.cs index 5fc047fed..de9781dc4 100644 --- a/Source/Editor/CustomEditors/Editors/VersionEditor.cs +++ b/Source/Editor/CustomEditors/Editors/VersionEditor.cs @@ -39,7 +39,7 @@ namespace FlaxEditor.CustomEditors.Editors /// public override void Initialize(LayoutElementsContainer layout) { - var grid = layout.CustomContainer(); + var grid = layout.UniformGrid(); var gridControl = grid.CustomControl; gridControl.ClipChildren = false; gridControl.Height = TextBox.DefaultHeight; diff --git a/Source/Editor/CustomEditors/Elements/Container/GroupElement.cs b/Source/Editor/CustomEditors/Elements/Container/GroupElement.cs index e3226ef2b..64bc9080b 100644 --- a/Source/Editor/CustomEditors/Elements/Container/GroupElement.cs +++ b/Source/Editor/CustomEditors/Elements/Container/GroupElement.cs @@ -22,7 +22,8 @@ namespace FlaxEditor.CustomEditors.Elements ArrowImageClosed = new SpriteBrush(Style.Current.ArrowRight), ArrowImageOpened = new SpriteBrush(Style.Current.ArrowDown), EnableDropDownIcon = true, - ItemsMargin = new Margin(7, 7, 3, 3), + ItemsMargin = new Margin(Utilities.Constants.UIMargin), + ItemsSpacing = Utilities.Constants.UIMargin, HeaderHeight = 18.0f, EnableContainmentLines = true, }; diff --git a/Source/Editor/CustomEditors/GUI/PropertiesList.cs b/Source/Editor/CustomEditors/GUI/PropertiesList.cs index 02efbb2a3..ef90fc706 100644 --- a/Source/Editor/CustomEditors/GUI/PropertiesList.cs +++ b/Source/Editor/CustomEditors/GUI/PropertiesList.cs @@ -20,13 +20,6 @@ namespace FlaxEditor.CustomEditors.GUI /// public const int SplitterSize = 2; - /// - /// The splitter margin (in pixels). - /// - public const int SplitterMargin = 4; - - private const int SplitterSizeHalf = SplitterSize / 2; - private PropertiesListElement _element; private float _splitterValue; private Rectangle _splitterRect; @@ -65,16 +58,18 @@ namespace FlaxEditor.CustomEditors.GUI /// The element. public PropertiesList(PropertiesListElement element) { + ClipChildren = false; _element = element; _splitterValue = 0.4f; - BottomMargin = TopMargin = RightMargin = SplitterMargin; + Margin = new Margin(); + Spacing = Utilities.Constants.UIMargin; UpdateSplitRect(); } private void UpdateSplitRect() { - _splitterRect = new Rectangle(Mathf.Clamp(_splitterValue * Width - SplitterSizeHalf, 0.0f, Width), 0, SplitterSize, Height); - LeftMargin = _splitterValue * Width + SplitterMargin; + _splitterRect = new Rectangle(Mathf.Clamp(_splitterValue * Width - SplitterSize * 0.5f, 0.0f, Width), 0, SplitterSize, Height); + LeftMargin = _splitterValue * Width + _spacing; } private void StartTracking() @@ -222,23 +217,33 @@ namespace FlaxEditor.CustomEditors.GUI /// protected override void PerformLayoutAfterChildren() { - // Sort controls from up to down into two columns: one for labels and one for the rest of the stuff - + // Place non-label controls from top to down float y = _margin.Top; float w = Width - _margin.Width; + bool firstItem = true; for (int i = 0; i < _children.Count; i++) { Control c = _children[i]; if (!(c is PropertyNameLabel)) { - var h = c.Height; - c.Bounds = new Rectangle(_margin.Left, y + _spacing, w, h); + var rect = new Rectangle(_margin.Left, y, w, c.Height); + if (c.Visible) + { + if (firstItem) + firstItem = false; + else + rect.Y += _spacing; + } + else if (!firstItem) + rect.Y += _spacing; + c.Bounds = rect; if (c.Visible) y = c.Bottom; } } y += _margin.Bottom; + // Place labels accordingly to their respective controls placement float namesWidth = _splitterValue * Width; int count = _element.Labels.Count; float[] yStarts = new float[count + 1]; @@ -271,7 +276,9 @@ namespace FlaxEditor.CustomEditors.GUI { var label = _element.Labels[i]; - var rect = new Rectangle(0, yStarts[i] + 1, namesWidth, yStarts[i + 1] - yStarts[i] - 2); + var rect = new Rectangle(0, yStarts[i], namesWidth, yStarts[i + 1] - yStarts[i]); + if (i != count - 1) + rect.Height -= _spacing; //label.Parent = this; label.Bounds = rect; } diff --git a/Source/Editor/CustomEditors/LayoutElementsContainer.cs b/Source/Editor/CustomEditors/LayoutElementsContainer.cs index 855a730df..68ac9f47a 100644 --- a/Source/Editor/CustomEditors/LayoutElementsContainer.cs +++ b/Source/Editor/CustomEditors/LayoutElementsContainer.cs @@ -202,6 +202,17 @@ namespace FlaxEditor.CustomEditors return element; } + /// + /// Adds new uniform grid control. + /// + /// The created element. + public CustomElementsContainer UniformGrid() + { + var grid = CustomContainer(); + grid.CustomControl.SlotSpacing = new Float2(Utilities.Constants.UIMargin); + return grid; + } + /// /// Adds new custom element. /// diff --git a/Source/Editor/SceneGraph/Actors/VideoPlayerEditor.cs b/Source/Editor/SceneGraph/Actors/VideoPlayerEditor.cs index 7e50de084..e5f120e04 100644 --- a/Source/Editor/SceneGraph/Actors/VideoPlayerEditor.cs +++ b/Source/Editor/SceneGraph/Actors/VideoPlayerEditor.cs @@ -28,7 +28,7 @@ namespace FlaxEditor.CustomEditors.Dedicated _infoLabel = playbackGroup.Label(string.Empty).Label; _infoLabel.AutoHeight = true; - var grid = playbackGroup.CustomContainer(); + var grid = layout.UniformGrid(); var gridControl = grid.CustomControl; gridControl.ClipChildren = false; gridControl.Height = Button.DefaultHeight; diff --git a/Source/Editor/Utilities/Constants.cs b/Source/Editor/Utilities/Constants.cs index cbdb22a66..40fbbb5d7 100644 --- a/Source/Editor/Utilities/Constants.cs +++ b/Source/Editor/Utilities/Constants.cs @@ -20,5 +20,7 @@ namespace FlaxEditor.Utilities #else public const string ShowInExplorer = "Show in explorer"; #endif + + public const float UIMargin = 3.0f; } } diff --git a/Source/Editor/Utilities/Utils.cs b/Source/Editor/Utilities/Utils.cs index 7c7d3d2d2..7112f9d90 100644 --- a/Source/Editor/Utilities/Utils.cs +++ b/Source/Editor/Utilities/Utils.cs @@ -415,13 +415,10 @@ namespace FlaxEditor.Utilities /// /// The parent layout element. /// The import path. - /// Whether to use an initial layout space of 5 for separation. - public static void CreateImportPathUI(CustomEditors.LayoutElementsContainer parentLayout, string path, bool useInitialSpacing = true) + public static void CreateImportPathUI(CustomEditors.LayoutElementsContainer parentLayout, string path) { if (!string.IsNullOrEmpty(path)) { - if (useInitialSpacing) - parentLayout.Space(0); var textBox = parentLayout.TextBox().TextBox; textBox.TooltipText = "Source asset path. Can be relative or absolute to the project. Path is not editable here."; textBox.IsReadOnly = true; diff --git a/Source/Editor/Windows/Assets/ModelBaseWindow.cs b/Source/Editor/Windows/Assets/ModelBaseWindow.cs index 216dede67..1214e9427 100644 --- a/Source/Editor/Windows/Assets/ModelBaseWindow.cs +++ b/Source/Editor/Windows/Assets/ModelBaseWindow.cs @@ -759,7 +759,6 @@ namespace FlaxEditor.Windows.Assets var importSettingsField = typeof(ImportPropertiesProxyBase).GetField(nameof(ImportSettings), BindingFlags.NonPublic | BindingFlags.Instance); var importSettingsValues = new ValueContainer(new ScriptMemberInfo(importSettingsField)) { proxy.ImportSettings }; importSettingsGroup.Object(importSettingsValues); - importSettingsGroup.Space(3); // Creates the import path UI var group = layout.Group("Import Path"); diff --git a/Source/Editor/Windows/Assets/ModelWindow.cs b/Source/Editor/Windows/Assets/ModelWindow.cs index d28c0141b..9a0b1ad82 100644 --- a/Source/Editor/Windows/Assets/ModelWindow.cs +++ b/Source/Editor/Windows/Assets/ModelWindow.cs @@ -114,7 +114,7 @@ namespace FlaxEditor.Windows.Assets lodIndex.IntValue.Value = sdf.Texture != null ? sdf.LOD : 6; _sdfModelLodIndex = lodIndex; - var buttons = group.CustomContainer(); + var buttons = layout.UniformGrid(); var gridControl = buttons.CustomControl; gridControl.ClipChildren = false; gridControl.Height = Button.DefaultHeight; diff --git a/Source/Editor/Windows/Assets/VisualScriptWindow.cs b/Source/Editor/Windows/Assets/VisualScriptWindow.cs index b38fa277a..756daf66a 100644 --- a/Source/Editor/Windows/Assets/VisualScriptWindow.cs +++ b/Source/Editor/Windows/Assets/VisualScriptWindow.cs @@ -413,7 +413,7 @@ namespace FlaxEditor.Windows.Assets var group = layout.Group("Functions"); var nodes = window.VisjectSurface.Nodes; - var grid = group.CustomContainer(); + var grid = layout.UniformGrid(); var gridControl = grid.CustomControl; gridControl.ClipChildren = false; gridControl.Height = Button.DefaultHeight; diff --git a/Source/Engine/UI/GUI/Panels/DropPanel.cs b/Source/Engine/UI/GUI/Panels/DropPanel.cs index ff9d3df2d..0bfa799c2 100644 --- a/Source/Engine/UI/GUI/Panels/DropPanel.cs +++ b/Source/Engine/UI/GUI/Panels/DropPanel.cs @@ -51,6 +51,11 @@ namespace FlaxEngine.GUI /// protected float _cachedHeight = 16.0f; + /// + /// The items spacing. + /// + protected float _itemsSpacing = 2.0f; + /// /// The items margin. /// @@ -168,9 +173,9 @@ namespace FlaxEngine.GUI } /// - /// Gets or sets the item slots margin (the space between items). + /// Gets or sets the item slots margin (the space around items). /// - [EditorOrder(10), Tooltip("The item slots margin (the space between items).")] + [EditorOrder(10)] public Margin ItemsMargin { get => _itemsMargin; @@ -184,6 +189,23 @@ namespace FlaxEngine.GUI } } + /// + /// Gets or sets the item slots spacing (the margin between items). + /// + [EditorOrder(11)] + public float ItemsSpacing + { + get => _itemsSpacing; + set + { + if (!Mathf.NearEqual(_itemsSpacing, value)) + { + _itemsSpacing = value; + PerformLayout(); + } + } + } + /// /// Gets or sets the panel close/open animation duration (in seconds). /// @@ -563,25 +585,27 @@ namespace FlaxEngine.GUI var slotsLeft = clientArea.Left + slotsMargin.Left; var slotsWidth = clientArea.Width - slotsMargin.Width; float minHeight = HeaderHeight; - float y = clientArea.Top; - float height = clientArea.Top + dropOffset; + float y = clientArea.Top + slotsMargin.Top; + bool anyAdded = false; for (int i = 0; i < _children.Count; i++) { Control c = _children[i]; if (c.IsScrollable && c.Visible) { var h = c.Height; - y += slotsMargin.Top; - c.Bounds = new Rectangle(slotsLeft, y, slotsWidth, h); - - h += slotsMargin.Bottom; + h += _itemsSpacing; y += h; - height += h + slotsMargin.Top; + anyAdded = true; } } // Update panel height + if (anyAdded) + y -= _itemsSpacing; + if (anyAdded) + y += slotsMargin.Bottom; + float height = dropOffset + y; _cachedHeight = height; if (_animationProgress >= 1.0f && _isClosed) y = minHeight; diff --git a/Source/Engine/UI/GUI/Panels/UniformGridPanel.cs b/Source/Engine/UI/GUI/Panels/UniformGridPanel.cs index 6292a3e81..b8d59c4d7 100644 --- a/Source/Engine/UI/GUI/Panels/UniformGridPanel.cs +++ b/Source/Engine/UI/GUI/Panels/UniformGridPanel.cs @@ -72,8 +72,11 @@ namespace FlaxEngine.GUI get => _slotSpacing; set { - _slotSpacing = value; - PerformLayout(); + if (!Float2.NearEqual(ref _slotSpacing, ref value)) + { + _slotSpacing = value; + PerformLayout(); + } } } @@ -89,11 +92,11 @@ namespace FlaxEngine.GUI /// Initializes a new instance of the class. /// /// The slot padding. - public UniformGridPanel(float slotPadding = 0) + public UniformGridPanel(float slotPadding) { AutoFocus = false; - SlotPadding = new Margin(slotPadding); - SlotSpacing = new Float2(2); + _slotPadding = new Margin(slotPadding); + _slotSpacing = new Float2(2); _slotsH = _slotsV = 5; } @@ -105,25 +108,32 @@ namespace FlaxEngine.GUI int slotsV = _slotsV; int slotsH = _slotsH; Float2 slotSize; + Float2 size = Size; + bool applySpacing = true; + APPLY_SPACING: if (_slotsV + _slotsH == 0) { slotSize = HasChildren ? Children[0].Size : new Float2(32); - slotsH = Mathf.CeilToInt(Width / slotSize.X); - slotsV = Mathf.CeilToInt(Height / slotSize.Y); + slotsH = Mathf.CeilToInt(size.X / slotSize.X); + slotsV = Mathf.CeilToInt(size.Y / slotSize.Y); } else if (slotsH == 0) { - float size = Height / slotsV; - slotSize = new Float2(size); + slotSize = new Float2(size.Y / slotsV); } else if (slotsV == 0) { - float size = Width / slotsH; - slotSize = new Float2(size); + slotSize = new Float2(size.X / slotsH); } else { - slotSize = new Float2(Width / slotsH, Height / slotsV); + slotSize = new Float2(size.X / slotsH, size.Y / slotsV); + } + if (applySpacing && _slotSpacing != Float2.Zero) + { + applySpacing = false; + size -= _slotSpacing * new Float2(slotsH > 1 ? slotsH - 1 : 0, slotsV > 1 ? slotsV - 1 : 0); + goto APPLY_SPACING; } int i = 0; @@ -135,45 +145,9 @@ namespace FlaxEngine.GUI for (int x = 0; x < end; x++) { - var slotBounds = new Rectangle(slotSize.X * x, slotSize.Y * y, slotSize.X, slotSize.Y); + var slotBounds = new Rectangle((slotSize + _slotSpacing) * new Float2(x, y), slotSize); _slotPadding.ShrinkRectangle(ref slotBounds); - if (slotsV > 1) - { - if (y == 0) - { - slotBounds.Height -= _slotSpacing.Y * 0.5f; - } - else if (y == slotsV - 1) - { - slotBounds.Height -= _slotSpacing.Y * 0.5f; - slotBounds.Y += _slotSpacing.Y * 0.5f; - } - else - { - slotBounds.Height -= _slotSpacing.Y; - slotBounds.Y += _slotSpacing.Y * 0.5f; - } - } - - if (slotsH > 1) - { - if (x == 0) - { - slotBounds.Width -= _slotSpacing.X * 0.5f; - } - else if (x == slotsH - 1) - { - slotBounds.Width -= _slotSpacing.X * 0.5f; - slotBounds.X += _slotSpacing.X * 0.5f; - } - else - { - slotBounds.Width -= _slotSpacing.X; - slotBounds.X += _slotSpacing.X * 0.5f; - } - } - var c = _children[i++]; c.Bounds = slotBounds; }