Refine some UI (#1119)

* feat: warn by color when Shape Changer has an invalid blendshape

* feat: refine reactive components ui layout

* feat: refine ma parameters ui layout

Editor/Inspector/MaterialSetter/MaterialSetterStyles.uss

@@ -1,7 +1,4 @@
-VisualElement {
+#group-box {
-}
-
-#group-box {
     margin-top: 4px;
     margin-bottom: 4px;
     padding: 4px;
@@ -14,21 +11,36 @@
     /* background-color: rgba(0, 0, 0, 0.1); */
 }
 
-#ListViewContainer {
-    margin-top: 4px;
-}
-
 #group-box > Label {
     -unity-font-style: bold;
 }
 
-.horizontal {
+#ListViewContainer {
-    flex-direction: row;
+    margin-top: 4px;
 }
 
-.horizontal #f-object {
+.horizontal {
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    margin: 1px 0;
+}
+
+.horizontal > * {
+    height: 18px;
+    margin: 0 1px;
+}
+
+.horizontal > Label {
+    height: auto;
+}
+
+.horizontal > PropertyField > * {
+    margin: 0;
+}
+
+#f-object {
     flex-grow: 1;
-    margin-bottom: 1px;
 }
 
 #f-material-index {
@@ -43,14 +55,10 @@
     flex-grow: 1;
 }
 
+.horizontal > Label {
+    width: 100px;
+}
+
 #f-material {
     flex-grow: 1;
 }
-
-.horizontal > Label {
-    align-self: center;
-    width: 100px;
-    height: 19px;
-    margin: 1px -2px 1px 3px;
-    -unity-text-align: middle-left;
-}

Editor/Inspector/MaterialSetter/MaterialSwitchObjectEditor.uxml

@@ -1,16 +1,16 @@
 <UXML xmlns:ui="UnityEngine.UIElements" xmlns:ed="UnityEditor.UIElements">
-    <ui:VisualElement class="toggled-object-editor">
+    <ui:VisualElement class="horizontal">
-        <ui:VisualElement class="horizontal">
+        <ed:PropertyField name="f-object" binding-path="Object" label=""/>
-            <ed:PropertyField binding-path="Object" label="" name="f-object" class="f-object"/>
+    </ui:VisualElement>
-        </ui:VisualElement>
+
-        <ui:VisualElement class="horizontal">
+    <ui:VisualElement class="horizontal">
-            <ed:IntegerField name="f-material-index" binding-path="MaterialIndex"/>
+        <ed:IntegerField name="f-material-index" binding-path="MaterialIndex"/>
-            <ui:DropdownField name="f-material-index-dropdown"/>
+        <ui:DropdownField name="f-material-index-dropdown"/>
-            <ed:ObjectField name="f-material-index-original"/>
+        <ed:ObjectField name="f-material-index-original"/>
-        </ui:VisualElement>
+    </ui:VisualElement>
-        <ui:VisualElement class="horizontal">
+
-            <ui:Label text="reactive_object.material-setter.set-to" class="ndmf-tr"/>
+    <ui:VisualElement class="horizontal">
-            <ed:PropertyField binding-path="Material" label="" name="f-material"/>
+        <ui:Label text="reactive_object.material-setter.set-to" class="ndmf-tr"/>
-        </ui:VisualElement>
+        <ed:PropertyField name="f-material" binding-path="Material" label=""/>
     </ui:VisualElement>
 </UXML>

Editor/Inspector/ObjectToggle/ObjectSwitcherStyles.uss

@@ -1,7 +1,4 @@
-VisualElement {
+#group-box {
-}
-
-#group-box {
     margin-top: 4px;
     margin-bottom: 4px;
     padding: 4px;
@@ -14,103 +11,40 @@
     /* background-color: rgba(0, 0, 0, 0.1); */
 }
 
-#ListViewContainer {
-    margin-top: 4px;
-}
-
 #group-box > Label {
     -unity-font-style: bold;
 }
 
-.group-root {
+#ListViewContainer {
     margin-top: 4px;
 }
 
-.group-root Toggle {
+.horizontal {
-    margin-left: 0;
-}
-
-.group-children {
-    padding-left: 10px;
-}
-
-.left-toggle {
-    display: flex;
     flex-direction: row;
-}
-
-.toggled-object-editor {
-    flex-direction: row;
-    justify-content: center;
     align-items: center;
+    justify-content: space-between;
+    margin: 1px 0;
 }
 
-.toggled-object-editor #f-object {
+.horizontal > * {
+    height: 18px;
+    margin: 0 1px;
+}
+
+.horizontal > Label {
+    height: auto;
+}
+
+.horizontal > PropertyField > * {
+    margin: 0;
+}
+
+#f-active {
+    justify-content: center;
+}
+
+#f-object {
     flex-grow: 1;
-    height: 100%;
-}
-
-#f-active > Toggle {
-    margin-top: 0;
-    margin-bottom: 0;
-    margin-left: -12px;
-    margin-right: 3px;
-}
-
-.toggled-object-editor PropertyField Label {
-    display: none;
-}
-
-#f-change-type {
-    width: 75px;
-}
-
-.f-value {
-    width: 40px;
-}
-
-#f-value-delete {
-    display: none;
-}
-
-.change-type-delete #f-value {
-    display: none;
-}
-
-.change-type-delete #f-value-delete {
-    display: flex;
-}
-
-/* Add shape window */
-
-.add-shape-popup {
-    margin: 2px;
-}
-
-.vline {
-    width: 100%;
-    height: 4px;
-    border-top-width: 4px;
-    margin-top: 2px;
-    margin-bottom: 2px;
-    border-top-color: rgba(0, 0, 0, 0.2);
-}
-
-.add-shape-row {
-    flex-direction: row;
-}
-
-.add-shape-row Button {
-    flex-grow: 0;
-}
-
-.add-shape-popup ScrollView Label.placeholder {
-    -unity-text-align: middle-center;
-}
-
-.add-shape-row Label {
-    flex-grow: 1;
-    -unity-text-align: middle-left;
 }
 
 .drop-area--drag-active > ListView ScrollView {

Editor/Inspector/ObjectToggle/ToggledObjectEditor.uxml

@@ -1,6 +1,6 @@
 <UXML xmlns:ui="UnityEngine.UIElements" xmlns:ed="UnityEditor.UIElements">
-    <ui:VisualElement class="toggled-object-editor">
+    <ui:VisualElement class="horizontal">
-        <ed:PropertyField binding-path="Active" label="" name="f-active"/>
+        <ed:PropertyField name="f-active" binding-path="Active" label=""/>
-        <ed:PropertyField binding-path="Object" label="" name="f-object" class="f-object"/>
+        <ed:PropertyField name="f-object" binding-path="Object" label=""/>
     </ui:VisualElement>
 </UXML>

Editor/Inspector/Parameters/ParameterConfigDrawer.cs

@@ -20,15 +20,14 @@ namespace nadena.dev.modular_avatar.core.editor.Parameters
             Localization.UI.Localize(root);
             root.styleSheets.Add(uss);
 
-            var proot = root.Q<VisualElement>("Root");
+            var type_field = root.Q<DropdownField>("f-type");
-            var type_field = proot.Q<DropdownField>("f-type");
 
-            var f_sync_type = proot.Q<VisualElement>("f-sync-type");
+            var f_sync_type = root.Q<VisualElement>("f-sync-type");
             SetupPairedDropdownField(
-                proot,
+                root,
                 type_field,
                 f_sync_type,
-                proot.Q<VisualElement>("f-is-prefix"),
+                root.Q<VisualElement>("f-is-prefix"),
                 ("Bool", "False", "params.syncmode.Bool"),
                 ("Float", "False", "params.syncmode.Float"),
                 ("Int", "False", "params.syncmode.Int"),
@@ -41,49 +40,52 @@ namespace nadena.dev.modular_avatar.core.editor.Parameters
                 var is_anim_only = evt.newValue == "Not Synced";
 
                 if (is_anim_only)
-                    proot.AddToClassList("st-anim-only");
+                    root.AddToClassList("st-anim-only");
                 else
-                    proot.RemoveFromClassList("st-anim-only");
+                    root.RemoveFromClassList("st-anim-only");
             });
 
-            var f_synced = proot.Q<Toggle>("f-synced");
+            var f_synced = root.Q<Toggle>("f-synced");
-            var f_local_only = proot.Q<Toggle>("f-local-only");
+            var f_local_only = root.Q<Toggle>("f-local-only");
 
             // Invert f_local_only and f_synced
             f_local_only.RegisterValueChangedCallback(evt => { f_synced.SetValueWithoutNotify(!evt.newValue); });
 
             f_synced.RegisterValueChangedCallback(evt => { f_local_only.value = !evt.newValue; });
 
-            var internalParamAccessor = proot.Q<Toggle>("f-internal-parameter");
+            var internalParamAccessor = root.Q<Toggle>("f-internal-parameter");
             internalParamAccessor.RegisterValueChangedCallback(evt =>
             {
                 if (evt.newValue)
-                    proot.AddToClassList("st-internal-parameter");
+                    root.AddToClassList("st-internal-parameter");
                 else
-                    proot.RemoveFromClassList("st-internal-parameter");
+                    root.RemoveFromClassList("st-internal-parameter");
             });
 
-            var remapTo = proot.Q<TextField>("f-remap-to");
+            root.Q<VisualElement>("remap-to-group-disabled").SetEnabled(false);
-            var defaultParam = proot.Q<Label>("f-default-param");
-            var name = proot.Q<TextField>("f-name");
-            var remapToInner = remapTo.Q<TextElement>();
 
-            Action updateDefaultParam = () =>
+            var name = root.Q<TextField>("f-name");
+            var remapTo = root.Q<TextField>("f-remap-to");
+            var remapToInner = remapTo.Q<TextElement>();
+            var remapToPlaceholder = root.Q<Label>("f-remap-to-placeholder");
+            remapToPlaceholder.pickingMode = PickingMode.Ignore;
+
+            Action updateRemapToPlaceholder = () =>
             {
                 if (string.IsNullOrWhiteSpace(remapTo.value))
-                    defaultParam.text = name.value;
+                    remapToPlaceholder.text = name.value;
                 else
-                    defaultParam.text = "";
+                    remapToPlaceholder.text = "";
             };
 
-            name.RegisterValueChangedCallback(evt => { updateDefaultParam(); });
+            name.RegisterValueChangedCallback(evt => { updateRemapToPlaceholder(); });
 
-            remapTo.RegisterValueChangedCallback(evt => { updateDefaultParam(); });
+            remapTo.RegisterValueChangedCallback(evt => { updateRemapToPlaceholder(); });
 
-            defaultParam.RemoveFromHierarchy();
+            remapToPlaceholder.RemoveFromHierarchy();
-            remapToInner.Add(defaultParam);
+            remapToInner.Add(remapToPlaceholder);
 
-            updateDefaultParam();
+            updateRemapToPlaceholder();
 
             return root;
         }
@@ -158,9 +160,6 @@ namespace nadena.dev.modular_avatar.core.editor.Parameters
             var p_type = GetAccessor(v_type);
             var p_prefix = GetAccessor(v_pbPrefix);
 
-            v_type.style.display = DisplayStyle.None;
-            v_pbPrefix.style.display = DisplayStyle.None;
-
             for (var i = 0; i < choices.Length; i++) target.choices.Add("" + i);
 
             target.formatListItemCallback = s_n =>

Editor/Inspector/Parameters/ParameterConfigDrawer.uxml

@@ -1,48 +1,38 @@
-<ui:UXML
+<ui:UXML xmlns:ui="UnityEngine.UIElements"
-        xmlns:ui="UnityEngine.UIElements"
+         xmlns:ma="nadena.dev.modular_avatar.core.editor">
-        xmlns:ma="nadena.dev.modular_avatar.core.editor"
+    <ui:VisualElement class="horizontal">
-        editor-extension-mode="False"
+        <ui:TextField name="f-name" binding-path="nameOrPrefix" label=""/>
->
+        <ui:DropdownField name="f-type"/>
-    <ui:VisualElement name="Root">
+        <ui:DropdownField name="f-sync-type" binding-path="syncType"/>
-        <ui:VisualElement class="horizontal no-label">
+        <ui:Toggle name="f-is-prefix" binding-path="isPrefix"/>
-            <ui:TextField binding-path="nameOrPrefix" label="merge_parameter.ui.name" name="f-name" class="ndmf-tr"/>
-            <ui:DropdownField name="f-type"/>
-        </ui:VisualElement>
-
-        <ui:Toggle binding-path="isPrefix" name="f-is-prefix"/>
-        <ui:DropdownField binding-path="syncType" name="f-sync-type"/>
-
-        <ui:VisualElement class="horizontal small-label">
-            <ui:Toggle binding-path="internalParameter" name="f-internal-parameter"
-                       text="merge_parameter.ui.internalParameter" class="ndmf-tr no-left-margin"/>
-            <ui:VisualElement class="v-separator hide-with-internal-param">
-                <ui:VisualElement/>
-            </ui:VisualElement>
-            <ui:Label text="merge_parameter.ui.remapTo"
-                      class="ndmf-tr inner-label hide-with-internal-param no-left-margin"/>
-            <ui:TextField name="f-remap-to" binding-path="remapTo" class="hide-with-internal-param"/>
-            <ui:Label name="f-default-param" text="test test test"/>
-        </ui:VisualElement>
-
-        <ui:VisualElement class="horizontal small-label st-pb-prefix__hide ">
-            <ui:VisualElement class="horizontal">
-                <ui:Label text="merge_parameter.ui.defaultValue" class="ndmf-tr no-left-margin"/>
-                <ma:DefaultValueField/>
-            </ui:VisualElement>
-            <ui:VisualElement class="horizontal st-anim-only__hide">
-                <ui:VisualElement class="v-separator">
-                    <ui:VisualElement/>
-                </ui:VisualElement>
-                <ui:Toggle binding-path="saved" text="merge_parameter.ui.saved"
-                           class="ndmf-tr st-pb-prefix__first-retained"/>
-                <ui:Toggle binding-path="localOnly" text="merge_parameter.ui.localOnly" class="ndmf-tr"
-                           name="f-local-only"/>
-                <ui:Toggle text="merge_parameter.ui.synced" class="ndmf-tr" name="f-synced"/>
-                <ui:Toggle binding-path="m_overrideAnimatorDefaults" text="merge_parameter.ui.overrideAnimatorDefaults"
-                           class="ndmf-tr"/>
-            </ui:VisualElement>
-        </ui:VisualElement>
-
     </ui:VisualElement>
 
+    <ui:VisualElement class="horizontal">
+        <ui:VisualElement name="remap-to-group-disabled" class="horizontal">
+            <ui:Label text="merge_parameter.ui.remapTo" class="ndmf-tr"/>
+            <ui:TextField name="f-remap-to-disabled"/>
+        </ui:VisualElement>
+        <ui:VisualElement name="remap-to-group" class="horizontal">
+            <ui:Label text="merge_parameter.ui.remapTo" class="ndmf-tr"/>
+            <ui:TextField name="f-remap-to" binding-path="remapTo"/>
+            <ui:Label name="f-remap-to-placeholder"/>
+        </ui:VisualElement>
+        <ui:Toggle name="f-internal-parameter" binding-path="internalParameter"
+                   text="merge_parameter.ui.internalParameter" class="ndmf-tr"/>
+    </ui:VisualElement>
+
+    <ui:VisualElement class="horizontal st-pb-prefix__hide">
+        <ui:VisualElement class="horizontal">
+            <ui:Label text="merge_parameter.ui.defaultValue" class="ndmf-tr"/>
+            <ma:DefaultValueField/>
+        </ui:VisualElement>
+        <ui:Toggle binding-path="saved"
+                   text="merge_parameter.ui.saved" class="ndmf-tr st-anim-only__hide"/>
+        <ui:Toggle name="f-local-only" binding-path="localOnly"
+                   text="merge_parameter.ui.localOnly" class="ndmf-tr st-anim-only__hide"/>
+        <ui:Toggle name="f-synced"
+                   text="merge_parameter.ui.synced" class="ndmf-tr st-anim-only__hide"/>
+        <ui:Toggle binding-path="m_overrideAnimatorDefaults"
+                   text="merge_parameter.ui.overrideAnimatorDefaults" class="ndmf-tr st-anim-only__hide"/>
+    </ui:VisualElement>
 </ui:UXML>

Editor/Inspector/Parameters/Parameters.uss

@@ -1,124 +1,32 @@
-VisualElement {}
+#ListViewContainer {
-
+    margin-top: 4px;
-
-/* I hate CSS precedence rules... */
-.horizontal .no-left-margin {
-    margin-left: 0 !important;
 }
 
-.horizontal .no-left-margin.unity-label {
+.horizontal {
-    margin-left: 0 !important;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    margin: 1px 0;
 }
 
-.horizontal .no-left-margin Label.unity-label {
+.horizontal > * {
-    margin-left: 0 !important;
+    height: 18px;
+    margin: 0 1px;
 }
 
 .horizontal > Label {
     height: auto;
 }
 
-.horizontal > * {
+.horizontal > PropertyField > * {
-    margin-top: 0;
+    margin: 0;
-    margin-bottom: 0;
 }
 
-.v-separator {
+#f-name {
-    width: 1px;
-    height: 100%;
-    margin-left: 8px;
-    margin-right: 8px;
-    justify-content: center;
-    align-content: center;
-    flex-shrink: 0;
-}
-
-.v-separator VisualElement {
-    width: 100%;
-    height: 80%;
-    background-color: rgba(0, 0, 0, 0.4);
-}
-
-.horizontal TextField {
-    margin-left: 0px;
-}
-
-.horizontal TextField Label.unity-label {
-    margin-left: 0px !important;
-}
-
-.horizontal Label {
-    padding-top: 0;
-    padding-bottom: 0;
-    align-self: center;
-}
-
-.horizontal {
-    flex-direction: row;
-    align-content: center;
-    margin-top: 1px;
-}
-
-.horizontal > * {
-    height: 100%;
-}
-
-.no-label Label.unity-base-field__label {
-    display: none;
-}
-
-#Root .horizontal #f-rename-destination {
     flex-grow: 1;
 }
 
-.inner-label > Label {
+#f-sync-type {
-    margin-left: 6px;
-    display: none;
-}
-
-.small-label Label.unity-label {
-    min-width: 0;
-    margin-left: 4px;
-}
-
-VisualElement.small-label > * {
-    flex-grow: 0;
-}
-
-VisualElement.small-label > PropertyField {
-    flex-direction: row;
-}
-
-#Root #f-name {
-    flex-grow: 1;
-}
-
-#Root DefaultValueField {
-    width: 60px;
-    flex-grow: 0;
-}
-
-.st-internal-parameter .hide-with-internal-param {
-    display: none;
-}
-
-DefaultValueField DropdownField {
-    display: none;
-}
-
-.st-ty-Bool DefaultValueField DropdownField {
-    display: flex;
-}
-
-.st-ty-Bool DefaultValueField TextField {
-    display: none;
-}
-
-.st-ty-NotSynced DefaultValueField {
-    display: none;
-}
-
-.st-pb-prefix .st-pb-prefix__hide {
     display: none;
 }
 
@@ -126,40 +34,79 @@ DefaultValueField DropdownField {
     display: none;
 }
 
-.st-anim-only .st-pb-prefix__first-retained {
+#f-is-prefix {
-    margin-left: 0;
+    display: none;
 }
 
-.st-anim-only .st-pb-prefix__first-retained Label.unity-label {
+.st-pb-prefix .st-pb-prefix__hide {
-    margin-left: 0;
+    display: none;
 }
 
-#f-remap-to {
+#f-remap-to, #f-remap-to-disabled {
     flex-grow: 1;
 }
 
+#f-remap-to-placeholder {
+    width: 100%;
+    height: 100%;
+    color: rgba(255, 255, 255, 0.4);
+}
+
+#f-internal-parameter {
+    margin-left: 3px;
+}
+
+#remap-to-group {
+    display: flex;
+    flex-grow: 1;
+}
+
+#remap-to-group-disabled {
+    display: none;
+    flex-grow: 1;
+}
+
+.st-internal-parameter #remap-to-group {
+    display: none;
+}
+
+.st-internal-parameter #remap-to-group-disabled {
+    display: flex;
+}
+
+.horizontal > .horizontal {
+    flex-shrink: 0;
+    margin: 0;
+}
+
+DefaultValueField TextField {
+    display: flex;
+    width: 60px;
+    height: 100%;
+    margin: 0;
+}
+
+DefaultValueField DropdownField {
+    display: none;
+    width: 60px;
+    height: 100%;
+    margin: 0;
+}
+
+.st-ty-Bool DefaultValueField TextField {
+    display: none;
+}
+
+.st-ty-Bool DefaultValueField DropdownField {
+    display: flex;
+}
+
 #f-local-only {
     display: none;
 }
 
-DefaultValueField TextInput {
-    min-width: 30px;
-}
-
-/** Ghostly text for the renameTo text box **/
-Label#f-default-param {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    margin: 0 0 0 0;
-    overflow: hidden;
-    color: rgba(255, 255, 255, 0.4) !important;
-}
-
 .DetectedParameter {
     flex-direction: row;
-    margin-top: 2px;
-    margin-bottom: 2px;
 }
 
 .DetectedParameter > Label {
@@ -168,10 +115,7 @@ Label#f-default-param {
 }
 
 .SourceButton {
-    flex-grow: 0;
-    align-self: flex-end;
-    height: 24px;
     width: 24px;
+    height: 24px;
     padding: 1px;
 }
-

Editor/Inspector/ShapeChanger/ChangedShapeEditor.cs

@@ -72,7 +72,23 @@ namespace nadena.dev.modular_avatar.core.editor.ShapeChanger
                 f_shape_name.SetEnabled(shapeNames != null);
                 f_shape_name.choices = shapeNames ?? new();
 
-                f_shape_name.formatListItemCallback = name => shapeNames != null ? name : "<Missing SkinnedMeshRenderer>";
+                f_shape_name.formatListItemCallback = name =>
+                {
+                    if (string.IsNullOrWhiteSpace(name)) return "";
+
+                    if (shapeNames == null)
+                    {
+                        return $"<Missing SkinnedMeshRenderer>";
+                    }
+                    else if (!shapeNames.Contains(name))
+                    {
+                        return $"<color=\"red\">{name}</color>";
+                    }
+                    else
+                    {
+                        return name;
+                    }
+                };
                 f_shape_name.formatSelectedValueCallback = f_shape_name.formatListItemCallback;
             }
         }

Editor/Inspector/ShapeChanger/ChangedShapeEditor.uxml

@@ -1,13 +1,12 @@
 <UXML xmlns:ui="UnityEngine.UIElements" xmlns:ed="UnityEditor.UIElements">
-    <ui:VisualElement class="changed-shape-editor">
+    <ui:VisualElement class="horizontal">
-        <ui:VisualElement class="horizontal">
+        <ed:PropertyField name="f-object" binding-path="Object" label=""/>
-            <ed:PropertyField binding-path="Object" label="" name="f-object" class="f-object"/>
+        <ed:PropertyField name="f-change-type" binding-path="ChangeType" label=""/>
-            <ed:PropertyField binding-path="ChangeType" label="" name="f-change-type"/>
+    </ui:VisualElement>
-        </ui:VisualElement>
+
-        <ui:VisualElement class="horizontal">
+    <ui:VisualElement class="horizontal">
-            <ui:DropdownField name="f-shape-name" binding-path="ShapeName"/>
+        <ui:DropdownField name="f-shape-name" binding-path="ShapeName"/>
-            <ed:PropertyField binding-path="Value" label="" name="f-value" class="f-value"/>
+        <ed:PropertyField name="f-value" binding-path="Value" label=""/>
-            <ui:VisualElement name="f-value-delete" class="f-value"/>
+        <ui:VisualElement name="f-value-delete"/>
-        </ui:VisualElement>
     </ui:VisualElement>
 </UXML>

Editor/Inspector/ShapeChanger/ShapeChangerStyles.uss

@@ -1,7 +1,4 @@
-VisualElement {
+#group-box {
-}
-
-#group-box {
     margin-top: 4px;
     margin-bottom: 4px;
     padding: 4px;
@@ -14,65 +11,54 @@
     /* background-color: rgba(0, 0, 0, 0.1); */
 }
 
-#ListViewContainer {
-    margin-top: 4px;
-}
-
 #group-box > Label {
     -unity-font-style: bold;
 }
 
-.group-root {
+#ListViewContainer {
     margin-top: 4px;
 }
 
-.group-root Toggle {
+.horizontal {
-    margin-left: 0;
-}
-
-.group-children {
-    padding-left: 10px;
-}
-
-.left-toggle {
-    display: flex;
     flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    margin: 1px 0;
 }
 
-.changed-shape-editor .horizontal {
+.horizontal > * {
-    flex-direction: row;
+    height: 18px;
+    margin: 0 1px;
 }
 
-.changed-shape-editor #f-object {
+.horizontal > Label {
+    height: auto;
+}
+
+.horizontal > PropertyField > * {
+    margin: 0;
+}
+
+#f-object {
     flex-grow: 1;
 }
 
-.changed-shape-editor #f-shape-name {
-    flex-grow: 1;
-}
-
-.changed-shape-editor #f-change-type {
-    flex-grow: 0;
-}
-
-.changed-shape-editor #f-value {
-    flex-grow: 0;
-}
-
-.changed-shape-editor PropertyField Label {
-    display: none;
-}
-
 #f-change-type {
-    width: 75px;
+    width: 60px;
 }
 
-.f-value {
+#f-shape-name {
-    width: 75px;
+    flex-grow: 1;
+}
+
+#f-value {
+    display: flex;
+    width: 60px;
 }
 
 #f-value-delete {
     display: none;
+    width: 60px;
 }
 
 .change-type-delete #f-value {
@@ -81,37 +67,4 @@
 
 .change-type-delete #f-value-delete {
     display: flex;
-    height: 20px;
-}
-
-/* Add shape window */
-
-.add-shape-popup {
-    margin: 2px;
-}
-
-.vline {
-    width: 100%;
-    height: 4px;
-    border-top-width: 4px;
-    margin-top: 2px;
-    margin-bottom: 2px;
-    border-top-color: rgba(0, 0, 0, 0.2);
-}
-
-.add-shape-row {
-    flex-direction: row;
-}
-
-.add-shape-row Button {
-    flex-grow: 0;
-}
-
-.add-shape-popup ScrollView Label.placeholder {
-    -unity-text-align: middle-center;
-}
-
-.add-shape-row Label {
-    flex-grow: 1;
-    -unity-text-align: middle-left;
 }