UI: split left/right header buttons

- Added flexible separators to
  Clip, Graph, Dopesheet, Image, Node, Timeline, 3D View.
- Added graying out for Proportional Editing
  menus to avoid popping when right-aligned.
- Slightly re-arranged some controls,
  so they can be on correct side of the separators.

Patch by @billreynish

7 files changed, 78 insertions, 52 deletions

diff --git a/release/scripts/startup/bl_ui/space_clip.py b/release/scripts/startup/bl_ui/space_clip.py
index 40009090231..db2a54d6138 100644
--- a/release/scripts/startup/bl_ui/space_clip.py
+++ b/release/scripts/startup/bl_ui/space_clip.py
@@ -57,15 +57,17 @@ class CLIP_HT_header(Header):
         sc = context.space_data
         clip = sc.clip
 
-        CLIP_MT_tracking_editor_menus.draw_collapsible(context, layout)
-
         row = layout.row()
         row.template_ID(sc, "clip", open="clip.open")
 
+        CLIP_MT_tracking_editor_menus.draw_collapsible(context, layout)
+
         if clip:
             tracking = clip.tracking
             active_object = tracking.objects.active
 
+            layout.separator_spacer()
+
             if sc.view == 'CLIP':
                 layout.prop(sc, "pivot_point", text="", icon_only=True)
 
@@ -122,14 +124,15 @@ class CLIP_HT_header(Header):
             row = layout.row()
             row.template_ID(sc, "mask", new="mask.new")
 
+            layout.separator_spacer()
+
             layout.prop(sc, "pivot_point", text="", icon_only=True)
 
             row = layout.row(align=True)
-            row.prop(toolsettings, "use_proportional_edit_mask",
-                     text="", icon_only=True)
-            if toolsettings.use_proportional_edit_mask:
-                row.prop(toolsettings, "proportional_edit_falloff",
-                         text="", icon_only=True)
+            row.prop(toolsettings, "use_proportional_edit_mask", text="", icon_only=True)
+            sub = row.row(align=True)
+            sub.active = toolsettings.use_proportional_edit_mask
+            sub.prop(toolsettings, "proportional_edit_falloff", text="", icon_only=True)
 
     def draw(self, context):
         layout = self.layout
diff --git a/release/scripts/startup/bl_ui/space_dopesheet.py b/release/scripts/startup/bl_ui/space_dopesheet.py
index 0dbb3f53332..a238e81d868 100644
--- a/release/scripts/startup/bl_ui/space_dopesheet.py
+++ b/release/scripts/startup/bl_ui/space_dopesheet.py
@@ -179,12 +179,13 @@ class DOPESHEET_HT_editor_buttons(Header):
                 row.prop(st.dopesheet, "filter_text", text="")
                 row.prop(st.dopesheet, "use_multi_word_filter", text="")
 
+        layout.separator_spacer()
+
         row = layout.row(align=True)
-        row.prop(toolsettings, "use_proportional_action",
-                 text="", icon_only=True)
-        if toolsettings.use_proportional_action:
-            row.prop(toolsettings, "proportional_edit_falloff",
-                     text="", icon_only=True)
+        row.prop(toolsettings, "use_proportional_action", text="", icon_only=True)
+        sub = row.row(align=True)
+        sub.active = toolsettings.use_proportional_action
+        sub.prop(toolsettings, "proportional_edit_falloff", text="", icon_only=True)
 
         # Grease Pencil mode doesn't need snapping, as it's frame-aligned only
         if st.mode != 'GPENCIL':
diff --git a/release/scripts/startup/bl_ui/space_graph.py b/release/scripts/startup/bl_ui/space_graph.py
index 6e809c4e86a..e655f9d5d15 100644
--- a/release/scripts/startup/bl_ui/space_graph.py
+++ b/release/scripts/startup/bl_ui/space_graph.py
@@ -48,13 +48,13 @@ class GRAPH_HT_header(Header):
         sub.active = st.use_normalization
         sub.prop(st, "use_auto_normalization", icon='FILE_REFRESH', text="", toggle=True)
 
-        row = layout.row(align=True)
+        layout.separator_spacer()
 
-        row.prop(toolsettings, "use_proportional_fcurve",
-                 text="", icon_only=True)
-        if toolsettings.use_proportional_fcurve:
-            row.prop(toolsettings, "proportional_edit_falloff",
-                     text="", icon_only=True)
+        row = layout.row(align=True)
+        row.prop(toolsettings, "use_proportional_fcurve", text="", icon_only=True)
+        sub = row.row(align=True)
+        sub.active = toolsettings.use_proportional_fcurve
+        sub.prop(toolsettings, "proportional_edit_falloff", text="", icon_only=True)
 
         layout.prop(st, "auto_snap", text="")
         layout.prop(st, "pivot_point", icon_only=True)
diff --git a/release/scripts/startup/bl_ui/space_image.py b/release/scripts/startup/bl_ui/space_image.py
index 4b533d2f045..e8c9925ba9e 100644
--- a/release/scripts/startup/bl_ui/space_image.py
+++ b/release/scripts/startup/bl_ui/space_image.py
@@ -480,8 +480,6 @@ class IMAGE_HT_header(Header):
 
         layout.prop(sima, "mode", text="")
 
-        MASK_MT_editor_menus.draw_collapsible(context, layout)
-
         layout.template_ID(sima, "image", new="image.new", open="image.open")
         if not show_render:
             layout.prop(sima, "use_image_pin", text="")
@@ -490,8 +488,6 @@ class IMAGE_HT_header(Header):
             row = layout.row()
             row.template_ID(sima, "mask", new="mask.new")
 
-        layout.prop(sima, "pivot_point", icon_only=True)
-
         # uv editing
         if show_uvedit:
             uvedit = sima.uv_editor
@@ -504,10 +500,25 @@ class IMAGE_HT_header(Header):
                 layout.prop(toolsettings, "uv_select_mode", text="", expand=True)
                 layout.prop(uvedit, "sticky_select_mode", icon_only=True)
 
+        MASK_MT_editor_menus.draw_collapsible(context, layout)
+
+        layout.separator_spacer()
+
+        if show_uvedit or show_maskedit or mode == 'PAINT':
+            layout.prop(sima, "use_realtime_update", icon_only=True, icon='LOCKED')
+
+        if show_uvedit:
+            uvedit = sima.uv_editor
+
+            mesh = context.edit_object.data
+            layout.prop_search(mesh.uv_layers, "active", mesh, "uv_layers", text="")
+
             row = layout.row(align=True)
             row.prop(toolsettings, "proportional_edit", icon_only=True)
-            if toolsettings.proportional_edit != 'DISABLED':
-                row.prop(toolsettings, "proportional_edit_falloff", icon_only=True)
+            # if toolsettings.proportional_edit != 'DISABLED':
+            sub = row.row(align=True)
+            sub.active = toolsettings.proportional_edit != 'DISABLED'
+            sub.prop(toolsettings, "proportional_edit_falloff", icon_only=True)
 
             row = layout.row(align=True)
             row.prop(toolsettings, "use_snap", text="")
@@ -515,8 +526,7 @@ class IMAGE_HT_header(Header):
             if toolsettings.snap_uv_element != 'INCREMENT':
                 row.prop(toolsettings, "snap_target", text="")
 
-            mesh = context.edit_object.data
-            layout.prop_search(mesh.uv_layers, "active", mesh, "uv_layers", text="")
+        layout.prop(sima, "pivot_point", icon_only=True)
 
         if ima:
             if ima.is_stereo_3d:
@@ -536,9 +546,6 @@ class IMAGE_HT_header(Header):
             if ima.type == 'COMPOSITE' and ima.source in {'MOVIE', 'SEQUENCE'}:
                 row.operator("image.play_composite", icon='PLAY')
 
-        if show_uvedit or show_maskedit or mode == 'PAINT':
-            layout.prop(sima, "use_realtime_update", icon_only=True, icon='LOCKED')
-
 
 class MASK_MT_editor_menus(Menu):
     bl_idname = "MASK_MT_editor_menus"
diff --git a/release/scripts/startup/bl_ui/space_node.py b/release/scripts/startup/bl_ui/space_node.py
index bf3fa64a852..1b6baa7d3d9 100644
--- a/release/scripts/startup/bl_ui/space_node.py
+++ b/release/scripts/startup/bl_ui/space_node.py
@@ -51,8 +51,6 @@ class NODE_HT_header(Header):
         # Now expanded via the 'ui_type'
         # layout.prop(snode, "tree_type", text="")
 
-        NODE_MT_editor_menus.draw_collapsible(context, layout)
-
         if snode.tree_type == 'ShaderNodeTree':
             layout.prop(snode, "shader_type", text="", expand=True)
 
@@ -70,15 +68,20 @@ class NODE_HT_header(Header):
 
                 # No shader nodes for Eevee lamps
                 if snode_id and not (context.engine == 'BLENDER_EEVEE' and ob.type == 'LAMP'):
-                    layout.prop(snode_id, "use_nodes")
+                    row.prop(snode_id, "use_nodes")
+
+                NODE_MT_editor_menus.draw_collapsible(context, layout)
 
             if snode.shader_type == 'WORLD':
                 row = layout.row()
                 row.enabled = not snode.pin
                 row.template_ID(scene, "world", new="world.new")
+
                 if snode_id:
                     row.prop(snode_id, "use_nodes")
 
+                NODE_MT_editor_menus.draw_collapsible(context, layout)
+
             if snode.shader_type == 'LINESTYLE':
                 view_layer = context.view_layer
                 lineset = view_layer.freestyle_settings.linesets.active
@@ -86,6 +89,9 @@ class NODE_HT_header(Header):
                     row = layout.row()
                     row.enabled = not snode.pin
                     row.template_ID(lineset, "linestyle", new="scene.freestyle_linestyle_new")
+
+                    NODE_MT_editor_menus.draw_collapsible(context, layout)
+
                     if snode_id:
                         row.prop(snode_id, "use_nodes")
 
@@ -97,21 +103,31 @@ class NODE_HT_header(Header):
                     layout.template_ID(id_from, "texture", new="texture.new")
                 else:
                     layout.template_ID(id_from, "active_texture", new="texture.new")
+
             if snode_id:
                 layout.prop(snode_id, "use_nodes")
 
+            NODE_MT_editor_menus.draw_collapsible(context, layout)
+
         elif snode.tree_type == 'CompositorNodeTree':
+
             if snode_id:
                 layout.prop(snode_id, "use_nodes")
+
+            NODE_MT_editor_menus.draw_collapsible(context, layout)
+
+            layout.prop(snode, "use_auto_render")
             layout.prop(snode, "show_backdrop")
             if snode.show_backdrop:
                 row = layout.row(align=True)
                 row.prop(snode, "backdrop_channels", text="", expand=True)
-            layout.prop(snode, "use_auto_render")
 
         else:
             # Custom node tree is edited as independent ID block
             layout.template_ID(snode, "node_tree", new="node.new_node_tree")
+            NODE_MT_editor_menus.draw_collapsible(context, layout)
+
+        layout.separator_spacer()
 
         layout.prop(snode, "pin", text="")
         layout.operator("node.tree_path_parent", text="", icon='FILE_PARENT')
diff --git a/release/scripts/startup/bl_ui/space_time.py b/release/scripts/startup/bl_ui/space_time.py
index 16ad53ca642..358a813fd0f 100644
--- a/release/scripts/startup/bl_ui/space_time.py
+++ b/release/scripts/startup/bl_ui/space_time.py
@@ -70,9 +70,6 @@ class TIME_HT_editor_buttons(Header):
         else:
             row.prop(scene, "frame_current", text="")
 
-        layout.separator()
-        layout.separator()
-
         row = layout.row(align=True)
         row.prop(scene, "use_preview_range", text="", toggle=True)
         sub = row.row(align=True)
@@ -94,8 +91,6 @@ class TIME_MT_editor_menus(Menu):
 
     @staticmethod
     def draw_menus(layout, context):
-        layout.menu("TIME_MT_view")
-        layout.menu("TIME_MT_marker")
         layout.popover(space_type='DOPESHEET_EDITOR',
                        region_type='HEADER',
                        panel_type="TIME_PT_playback",
@@ -104,6 +99,8 @@ class TIME_MT_editor_menus(Menu):
                        region_type='HEADER',
                        panel_type="TIME_PT_keyframing_settings",
                        text="Keying")
+        layout.menu("TIME_MT_view")
+        layout.menu("TIME_MT_marker")
 
 
 class TIME_MT_marker(Menu):
diff --git a/release/scripts/startup/bl_ui/space_view3d.py b/release/scripts/startup/bl_ui/space_view3d.py
index 8ced2730cc6..0f708ac350c 100644
--- a/release/scripts/startup/bl_ui/space_view3d.py
+++ b/release/scripts/startup/bl_ui/space_view3d.py
@@ -58,20 +58,6 @@ class VIEW3D_HT_header(Header):
         shading_type = view.shading.type
         shading_item = bpy.types.View3DShading.bl_rna.properties['type'].enum_items[shading_type]
 
-        row = layout.row(align=True)
-        row.prop(shading, "type", text="", expand=True)
-
-        sub = row.row(align=True)
-        sub.enabled = shading.type != 'RENDERED'
-        sub.popover(space_type='VIEW_3D', region_type='HEADER', panel_type="VIEW3D_PT_shading")
-
-        row = layout.row(align=True)
-        row.prop(overlay, "show_overlays", icon="WIRE", text="")
-
-        sub = row.row(align=True)
-        sub.active = overlay.show_overlays
-        sub.popover(space_type='VIEW_3D', region_type='HEADER', panel_type="VIEW3D_PT_overlay")
-
         if obj:
             # Set above:
             # mode = obj.mode
@@ -109,6 +95,22 @@ class VIEW3D_HT_header(Header):
 
         VIEW3D_MT_editor_menus.draw_collapsible(context, layout)
 
+        layout.separator_spacer()
+
+        row = layout.row(align=True)
+        row.prop(shading, "type", text="", expand=True)
+
+        sub = row.row(align=True)
+        sub.enabled = shading.type != 'RENDERED'
+        sub.popover(space_type='VIEW_3D', region_type='HEADER', panel_type="VIEW3D_PT_shading")
+
+        row = layout.row(align=True)
+        row.prop(overlay, "show_overlays", icon="WIRE", text="")
+
+        sub = row.row(align=True)
+        sub.active = overlay.show_overlays
+        sub.popover(space_type='VIEW_3D', region_type='HEADER', panel_type="VIEW3D_PT_overlay")
+
 
 class VIEW3D_MT_editor_menus(Menu):
     bl_space_type = 'VIEW3D_MT_editor_menus'