Skip to content

Moving inline styles to stylesheets #98

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Level6Rogue wants to merge 5 commits into
base: main
Choose a base branch
from
Open

Moving inline styles to stylesheets #98

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
ae5b6fd
inline styles moved to stylesheets
Level6Rogue Aug 6, 2024
14794df
updated to more closely follow: https://docs.unity3d.com/Manual/UIE-U…
Level6Rogue Aug 6, 2024
17ff87b
actually adding the stylesheet in HashSetField
Level6Rogue Aug 6, 2024
16505a9
Added empty/populated classes for InlineEditorObjectField and Seriali…
Level6Rogue Aug 17, 2024
0ddca06
Fix for foldouts overflowing outside of Boxes. See https://github.com…
Level6Rogue Aug 17, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
58 changes: 17 additions & 41 deletions Alchemy/Assets/Alchemy/Editor/BuiltinAttributeDrawers.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -242,35 +242,19 @@ public override void OnCreateElement()
[CustomAttributeDrawer(typeof(PreviewAttribute))]
public sealed class PreviewDrawer : TrackSerializedObjectAttributeDrawer
{
private readonly StyleSheet _styleSheet = Resources.Load<StyleSheet>("Elements/PreviewDrawer-Styles");
private Image image;
private const float PreviewSize = 40f;
private const float BorderWidth = 1f;
private static readonly Color borderColor = new Color(0f, 0f, 0f, 0.3f);

public override void OnCreateElement()
{
if (SerializedProperty.propertyType != SerializedPropertyType.ObjectReference) return;

image = new Image
{
scaleMode = ScaleMode.ScaleToFit,
style = {
width = PreviewSize,
height = PreviewSize,
marginTop = EditorGUIUtility.standardVerticalSpacing,
marginBottom = EditorGUIUtility.standardVerticalSpacing * 4f,
alignSelf = Align.FlexEnd,
borderTopWidth = BorderWidth,
borderBottomWidth = BorderWidth,
borderLeftWidth = BorderWidth,
borderRightWidth = BorderWidth,
borderBottomColor = borderColor,
borderTopColor = borderColor,
borderLeftColor = borderColor,
borderRightColor = borderColor,
}
};
image = new Image();

image.styleSheets.Add(_styleSheet);
image.AddToClassList("preview-attribute__image");
image.AddToClassList("preview-attribute__image--align-right");

image.RegisterCallback<MouseDownEvent>(x =>
{
using var mouseDownEvent = MouseDownEvent.GetPooled(x);
Expand Down Expand Up @@ -317,34 +301,26 @@ public override void OnCreateElement()
[CustomAttributeDrawer(typeof(TitleAttribute))]
public sealed class TitleDrawer : AlchemyAttributeDrawer
{
private readonly StyleSheet _styleSheet = Resources.Load<StyleSheet>("Elements/TitleDrawer-Attribute-Styles");

public override void OnCreateElement()
{
var att = (TitleAttribute)Attribute;
var parent = TargetElement.parent;

var title = new Label(att.TitleText)
{
style = {
unityFontStyleAndWeight = FontStyle.Bold,
paddingLeft = 3f,
marginTop = 4f,
marginBottom = -2f
}
};
var title = new Label(att.TitleText);

title.styleSheets.Add(_styleSheet);
title.AddToClassList("title-attribute__title");

parent.Insert(parent.IndexOf(TargetElement), title);

if (att.SubtitleText != null)
{
var subtitle = new Label(att.SubtitleText)
{
style = {
fontSize = 10f,
paddingLeft = 4.5f,
marginTop = 1.5f,
color = GUIHelper.SubtitleColor,
unityTextAlign = TextAnchor.MiddleLeft
}
};
var subtitle = new Label(att.SubtitleText);

subtitle.styleSheets.Add(_styleSheet);
subtitle.AddToClassList("title-attribute__subtitle");
parent.Insert(parent.IndexOf(TargetElement), subtitle);
}

Expand Down
169 changes: 78 additions & 91 deletions Alchemy/Assets/Alchemy/Editor/BuiltinGroupDrawers.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,67 +1,57 @@
using System;
using System.Collections.Generic;
using System.Linq;
using UnityEngine;
using UnityEngine.UIElements;
using Alchemy.Editor.Elements;
using Alchemy.Inspector;
using UnityEditor;
using UnityEditor.UIElements;
using Alchemy.Inspector;
using Alchemy.Editor.Elements;
using UnityEngine;
using UnityEngine.UIElements;

namespace Alchemy.Editor.Drawers
{
[CustomGroupDrawer(typeof(GroupAttribute))]
public sealed class GroupDrawer : AlchemyGroupDrawer
{
private readonly StyleSheet _styleSheet = Resources.Load<StyleSheet>("Elements/GroupDrawer-Styles");

public override VisualElement CreateRootElement(string label)
{
return new Box()
{
style = {
width = Length.Percent(100f),
marginTop = 3f,
paddingBottom = 2f,
paddingRight = 1f,
paddingLeft = 1f,
}
};
Box box = new();
box.styleSheets.Add(_styleSheet);
box.AddToClassList("group__box");

GUIHelper.ModifyChildFoldouts(box, "group__box__child-foldout");

return box;
}
}

[CustomGroupDrawer(typeof(BoxGroupAttribute))]
public sealed class BoxGroupDrawer : AlchemyGroupDrawer
{
private readonly StyleSheet _styleSheet = Resources.Load<StyleSheet>("Elements/BoxGroupDrawer-Styles");

public override VisualElement CreateRootElement(string label)
{
var helpBox = new HelpBox()
{
text = label,
style = {
flexDirection = FlexDirection.Column,
width = Length.Percent(100f),
marginTop = 3f,
paddingBottom = 3f,
paddingRight = 3f,
paddingLeft = 3f,
}
};

var labelElement = helpBox.Q<Label>();
labelElement.style.top = 2f;
labelElement.style.left = 2f;
labelElement.style.fontSize = 12f;
labelElement.style.minHeight = EditorGUIUtility.singleLineHeight;
labelElement.style.unityFontStyleAndWeight = FontStyle.Bold;
labelElement.style.alignSelf = Align.Stretch;
var helpBox = new HelpBox { text = label };

helpBox.styleSheets.Add(_styleSheet);
helpBox.AddToClassList("box-group__help-box");

GUIHelper.ModifyChildFoldouts(helpBox, "box-group__help-box__child-foldout");

return helpBox;
}
}

[CustomGroupDrawer(typeof(TabGroupAttribute))]
public sealed class TabGroupDrawer : AlchemyGroupDrawer
{
private readonly StyleSheet _styleSheet = Resources.Load<StyleSheet>("Elements/TabGroupDrawer-Styles");

VisualElement rootElement;
private VisualElement pageRoot;
readonly Dictionary<string, VisualElement> tabElements = new();

string[] keyArrayCache = new string[0];
Expand All @@ -80,19 +70,12 @@ public override VisualElement CreateRootElement(string label)
int.TryParse(EditorUserSettings.GetConfigValue(configKey), out tabIndex);
prevTabIndex = tabIndex;

rootElement = new HelpBox()
{
style = {
flexDirection = FlexDirection.Column,
width = Length.Percent(100f),
marginTop = 3f,
paddingBottom = 3f,
paddingRight = 3f,
paddingLeft = 3f,
}
};
rootElement = new HelpBox();
rootElement.Remove(rootElement.Q<Label>());

rootElement.styleSheets.Add(_styleSheet);
rootElement.AddToClassList("tab-group__help-box");

var tabGUIElement = new IMGUIContainer(() =>
{
var rect = EditorGUILayout.GetControlRect();
Expand All @@ -111,17 +94,16 @@ public override VisualElement CreateRootElement(string label)
{
kv.Value.style.display = keyArrayCache[tabIndex] == kv.Key ? DisplayStyle.Flex : DisplayStyle.None;
}
})
{
style = {
width = Length.Percent(100f),
marginLeft = 0f,
marginRight = 0f,
marginTop = 0f
}
};
});
tabGUIElement.AddToClassList("tab-group__tab-section");

rootElement.Add(tabGUIElement);

pageRoot = new VisualElement();
pageRoot.AddToClassList("tab-group__page-root");

rootElement.Add(pageRoot);

return rootElement;
}

Expand All @@ -132,16 +114,14 @@ public override VisualElement GetGroupElement(Attribute attribute)
var tabName = tabGroupAttribute.TabName;
if (!tabElements.TryGetValue(tabName, out var element))
{
element = new VisualElement()
{
style = {
width = Length.Percent(100f)
}
};
rootElement.Add(element);
element = new VisualElement();
element.AddToClassList("tab-group__tab-page");
pageRoot.Add(element);
tabElements.Add(tabName, element);

keyArrayCache = tabElements.Keys.ToArray();

GUIHelper.ModifyChildFoldouts(element, "tab-group__tab-page__child-foldout");
}

return element;
Expand All @@ -151,19 +131,21 @@ public override VisualElement GetGroupElement(Attribute attribute)
[CustomGroupDrawer(typeof(FoldoutGroupAttribute))]
public sealed class FoldoutGroupDrawer : AlchemyGroupDrawer
{
private readonly StyleSheet _styleSheet = Resources.Load<StyleSheet>("Elements/FoldoutGroupDrawer-Styles");

public override VisualElement CreateRootElement(string label)
{
var configKey = UniqueId + "_FoldoutGroup";
bool.TryParse(EditorUserSettings.GetConfigValue(configKey), out var result);

var foldout = new Foldout()
var foldout = new Foldout
{
style = {
width = Length.Percent(100f)
},
text = label,
value = result
};

foldout.styleSheets.Add(_styleSheet);
foldout.AddToClassList("foldout-group__foldout");

foldout.RegisterValueChangedCallback(x =>
{
Expand All @@ -177,38 +159,21 @@ public override VisualElement CreateRootElement(string label)
[CustomGroupDrawer(typeof(HorizontalGroupAttribute))]
public sealed class HorizontalGroupDrawer : AlchemyGroupDrawer
{
private readonly StyleSheet _styleSheet = Resources.Load<StyleSheet>("Elements/HorizontalGroupDrawer-Styles");

public override VisualElement CreateRootElement(string label)
{
var root = new VisualElement()
{
style = {
width = Length.Percent(100f),
flexDirection = FlexDirection.Row
}
};

static void AdjustLabel(PropertyField element, VisualElement inspector, int childCount)
{
if (element.childCount == 0) return;
if (element.Q<Foldout>() != null) return;

var field = element[0];
field.RemoveFromClassList("unity-base-field__aligned");

var labelElement = field.Q<Label>();
if (labelElement != null)
{
labelElement.style.minWidth = 0f;
labelElement.style.width = GUIHelper.CalculateLabelWidth(element, inspector) * 0.8f / childCount;
}
}
var root = new VisualElement();

root.styleSheets.Add(_styleSheet);
root.AddToClassList("horizontal-group__main-element");

root.schedule.Execute(() =>
root.RegisterCallback<GeometryChangedEvent>(_ =>
{
if (root.childCount <= 1) return;

var visualTree = root.panel.visualTree;

foreach (var field in root.Query<PropertyField>().Build())
{
AdjustLabel(field, visualTree, root.childCount);
Expand All @@ -218,8 +183,30 @@ static void AdjustLabel(PropertyField element, VisualElement inspector, int chil
AdjustLabel(field, visualTree, root.childCount);
}
});

return root;

static void AdjustLabel(PropertyField element, VisualElement inspector, int childCount)
{
if (element.childCount == 0) return;
if (element.Q<Foldout>() != null) return;

var field = element[0];
field.RemoveFromClassList("unity-base-field__aligned");

var labelElement = field.Q<Label>();
if (labelElement != null && !labelElement.ClassListContains("horizontal-group__property-field__label"))
{
labelElement.AddToClassList("horizontal-group__property-field__label");
labelElement.RegisterCallback<GeometryChangedEvent>(_ =>
{
//I'd like to use stylesheets here, but it seems values are set inline somewhere.
//Therefore we too must inline, aggressively.
labelElement.style.minWidth = 0f;
labelElement.style.width = GUIHelper.CalculateLabelWidth(element, inspector) * 0.8f / childCount;
});
}
}
}
}
[CustomGroupDrawer(typeof(InlineGroupAttribute))]
Expand Down
7 changes: 6 additions & 1 deletion Alchemy/Assets/Alchemy/Editor/Elements/ClassField.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,19 @@
using System.Reflection;
using UnityEngine.UIElements;
using Alchemy.Inspector;
using UnityEngine;

namespace Alchemy.Editor.Elements
{
public sealed class ClassField : VisualElement
{
private readonly StyleSheet _styleSheet = Resources.Load<StyleSheet>("Elements/ClassField-Styles");

public ClassField(Type type, string label) : this(TypeHelper.CreateDefaultInstance(type), type, label) { }
public ClassField(object obj, Type type, string label)
{
styleSheets.Add(_styleSheet);

var foldout = new Foldout
{
text = label,
Expand Down Expand Up @@ -45,7 +50,7 @@ public ClassField(object obj, Type type, string label)
foreach (var member in node.Members.OrderByAttributeThenByMemberType())
{
var element = new ReflectionField(obj, member);
element.style.width = Length.Percent(100f);
element.AddToClassList("class-field__reflection-field");
element.OnValueChanged += x => OnValueChanged?.Invoke(obj);

var e = node.Drawer?.GetGroupElement(member.GetCustomAttribute<PropertyGroupAttribute>());
Expand Down
Loading