Add a new Timeline category in the Preferences

Revert 21b4f3369f, but make that behavior toggle-able in the Preferences. Also exposes the onion skinning colors for the past and future frames, and renames "Blue-Red Mode" to "Color mode".

Translations/Translations.pot

@@ -590,6 +590,10 @@ msgstr ""
 msgid "Canvas"
 msgstr ""
 
+#. Refers to the animation timeline.
+msgid "Timeline"
+msgstr ""
+
 msgid "Selection"
 msgstr ""
 
@@ -1318,6 +1322,18 @@ msgstr ""
 msgid "The transparent checker follow the zoom level of canvas"
 msgstr ""
 
+#. Found in the Preferences, under Timeline. If this is enabled, clicking on the layer buttons (such as lock, invisible etc) will automatically select that layer.
+msgid "Select layer when clicking on one of its buttons:"
+msgstr ""
+
+#. Found in the Preferences, under Timeline. Changes the color of the past (previous) frames in onion skinning, if color mode is enabled.
+msgid "Onion skinning past color:"
+msgstr ""
+
+#. Found in the Preferences, under Timeline. Changes the color of the past (previous) frames in onion skinning, if color mode is enabled.
+msgid "Onion skinning future color:"
+msgstr ""
+
 msgid "Animated selection borders"
 msgstr ""
 
@@ -1668,7 +1684,8 @@ msgid "If it's selected, the animation plays only on the frames that have the sa
 "If it's not, the animation will play for all frames, ignoring tags."
 msgstr ""
 
-msgid "Blue-Red Mode"
+#. Found in the timeline, inside the onion skinning settings. If this is enabled, the past and future frames will have appear tinted.
+msgid "Color mode"
 msgstr ""
 
 msgid "Show past frames:"

src/Autoload/Global.gd

@@ -109,6 +109,10 @@ var checker_follow_movement := false
 var checker_follow_scale := false
 var tilemode_opacity := 1.0
 
+var select_layer_on_button_click := false
+var onion_skinning_past_color := Color.red
+var onion_skinning_future_color := Color.blue
+
 var selection_animated_borders := true
 var selection_border_color_1 := Color.white
 var selection_border_color_2 := Color.black

src/Preferences/PreferencesDialog.gd

@@ -57,6 +57,15 @@ var preferences := [
 	Preference.new("tilemode_opacity", "Canvas/CheckerOptions/TileModeOpacity", "value"),
 	Preference.new("clear_color_from", "Canvas/BackgroundOptions/ColorOptionButton", "selected"),
 	Preference.new("modulate_clear_color", "Canvas/BackgroundOptions/BackgroundColor", "color"),
+	Preference.new(
+		"select_layer_on_button_click", "Timeline/TimelineOptions/SelectLayerOnButton", "pressed"
+	),
+	Preference.new(
+		"onion_skinning_past_color", "Timeline/TimelineOptions/OnionSkinningPastColor", "color"
+	),
+	Preference.new(
+		"onion_skinning_future_color", "Timeline/TimelineOptions/OnionSkinningFutureColor", "color"
+	),
 	Preference.new("selection_animated_borders", "Selection/SelectionOptions/Animate", "pressed"),
 	Preference.new("selection_border_color_1", "Selection/SelectionOptions/BorderColor1", "color"),
 	Preference.new("selection_border_color_2", "Selection/SelectionOptions/BorderColor2", "color"),
@@ -298,6 +307,13 @@ func preference_update(prop: String, require_restart := false) -> void:
 		else:
 			Global.main_viewport.mouse_default_cursor_shape = Control.CURSOR_ARROW
 
+	elif prop == "onion_skinning_past_color":
+		Global.canvas.onion_past.blue_red_color = Global.onion_skinning_past_color
+		Global.canvas.refresh_onion()
+	elif prop == "onion_skinning_future_color":
+		Global.canvas.onion_future.blue_red_color = Global.onion_skinning_future_color
+		Global.canvas.refresh_onion()
+
 	Global.config_cache.save("user://cache.ini")
 
 

src/Preferences/PreferencesDialog.tscn

@@ -966,6 +966,87 @@ rect_min_size = Vector2( 64, 20 )
 mouse_default_cursor_shape = 2
 color = Color( 0.470588, 0.470588, 0.470588, 1 )
 
+[node name="Timeline" type="VBoxContainer" parent="HSplitContainer/VBoxContainer/ScrollContainer/RightSide"]
+visible = false
+margin_top = 28.0
+margin_right = 498.0
+margin_bottom = 94.0
+
+[node name="TimelineHeader" type="HBoxContainer" parent="HSplitContainer/VBoxContainer/ScrollContainer/RightSide/Timeline"]
+margin_top = 108.0
+margin_right = 498.0
+margin_bottom = 122.0
+custom_constants/separation = 0
+
+[node name="Label" type="Label" parent="HSplitContainer/VBoxContainer/ScrollContainer/RightSide/Timeline/TimelineHeader"]
+margin_right = 51.0
+margin_bottom = 14.0
+theme_type_variation = "Header"
+text = "Timeline"
+
+[node name="HSeparator" type="HSeparator" parent="HSplitContainer/VBoxContainer/ScrollContainer/RightSide/Timeline/TimelineHeader"]
+margin_left = 51.0
+margin_right = 498.0
+margin_bottom = 14.0
+size_flags_horizontal = 3
+
+[node name="TimelineOptions" type="GridContainer" parent="HSplitContainer/VBoxContainer/ScrollContainer/RightSide/Timeline"]
+margin_right = 498.0
+margin_bottom = 48.0
+custom_constants/vseparation = 4
+custom_constants/hseparation = 4
+columns = 3
+
+[node name="SelectLayerOnButtonLabel" type="Label" parent="HSplitContainer/VBoxContainer/ScrollContainer/RightSide/Timeline/TimelineOptions"]
+margin_top = 5.0
+margin_right = 176.0
+margin_bottom = 19.0
+rect_min_size = Vector2( 110, 0 )
+mouse_filter = 0
+size_flags_horizontal = 3
+text = "Select layer when clicking on one of its buttons:"
+
+[node name="SelectLayerOnButton" type="CheckBox" parent="HSplitContainer/VBoxContainer/ScrollContainer/RightSide/Timeline/TimelineOptions"]
+margin_left = 180.0
+margin_right = 275.0
+margin_bottom = 24.0
+mouse_default_cursor_shape = 2
+size_flags_horizontal = 3
+text = "On"
+
+[node name="OnionSkinningPastColorLabel" type="Label" parent="HSplitContainer/VBoxContainer/ScrollContainer/RightSide/Timeline/TimelineOptions"]
+margin_left = 279.0
+margin_top = 5.0
+margin_right = 374.0
+margin_bottom = 19.0
+mouse_filter = 0
+text = "Onion skinning past color:"
+
+[node name="OnionSkinningPastColor" type="ColorPickerButton" parent="HSplitContainer/VBoxContainer/ScrollContainer/RightSide/Timeline/TimelineOptions"]
+margin_top = 28.0
+margin_right = 176.0
+margin_bottom = 48.0
+rect_min_size = Vector2( 64, 20 )
+mouse_default_cursor_shape = 2
+color = Color( 1, 0, 0, 1 )
+
+[node name="OnionSkinningFutureColorLabel" type="Label" parent="HSplitContainer/VBoxContainer/ScrollContainer/RightSide/Timeline/TimelineOptions"]
+margin_left = 180.0
+margin_top = 31.0
+margin_right = 275.0
+margin_bottom = 45.0
+mouse_filter = 0
+text = "Onion skinning future color:"
+
+[node name="OnionSkinningFutureColor" type="ColorPickerButton" parent="HSplitContainer/VBoxContainer/ScrollContainer/RightSide/Timeline/TimelineOptions"]
+margin_left = 279.0
+margin_top = 28.0
+margin_right = 374.0
+margin_bottom = 48.0
+rect_min_size = Vector2( 64, 20 )
+mouse_default_cursor_shape = 2
+color = Color( 0, 0, 1, 1 )
+
 [node name="Selection" type="VBoxContainer" parent="HSplitContainer/VBoxContainer/ScrollContainer/RightSide"]
 visible = false
 margin_top = 28.0

src/UI/Canvas/Canvas.gd

@@ -14,7 +14,9 @@ onready var tile_mode = $TileMode
 onready var pixel_grid = $PixelGrid
 onready var grid = $Grid
 onready var selection = $Selection
-onready var crop_rect: CropRect = $CropRect
+onready var onion_past := $OnionPast as Node2D
+onready var onion_future := $OnionFuture as Node2D
+onready var crop_rect := $CropRect as CropRect
 onready var indicators = $Indicators
 onready var previews = $Previews
 onready var mouse_guide_container = $MouseGuideContainer
@@ -22,10 +24,10 @@ onready var gizmos_3d: Node2D = $Gizmos3D
 
 
 func _ready() -> void:
-	$OnionPast.type = $OnionPast.PAST
-	$OnionPast.blue_red_color = Color.blue
-	$OnionFuture.type = $OnionFuture.FUTURE
-	$OnionFuture.blue_red_color = Color.red
+	onion_past.type = onion_past.PAST
+	onion_past.blue_red_color = Global.onion_skinning_past_color
+	onion_future.type = onion_future.FUTURE
+	onion_future.blue_red_color = Global.onion_skinning_future_color
 	yield(get_tree(), "idle_frame")
 	camera_zoom()
 
@@ -142,5 +144,5 @@ func update_selected_cels_textures(project: Project = Global.current_project) ->
 
 
 func refresh_onion() -> void:
-	$OnionPast.update()
-	$OnionFuture.update()
+	onion_past.update()
+	onion_future.update()

src/UI/Timeline/AnimationTimeline.tscn

@@ -911,7 +911,7 @@ margin_right = 126.0
 margin_bottom = 116.0
 mouse_default_cursor_shape = 2
 size_flags_horizontal = 0
-text = "Blue-Red Mode"
+text = "Color mode"
 
 [node name="GridContainer" type="GridContainer" parent="OnionSkinningSettings/OnionSkinningButtons"]
 margin_top = 120.0

src/UI/Timeline/LayerButton.gd

@@ -74,7 +74,7 @@ func update_buttons() -> void:
 			lock_button.modulate.a = 0.33
 
 
-# Used when pressing a button on this changes the appearnce of other layers (ie: expand or visible)
+# When pressing a button, change the appearance of other layers (ie: expand or visible)
 func _update_buttons_all_layers() -> void:
 	for layer_button in Global.layer_vbox.get_children():
 		layer_button.update_buttons()
@@ -148,7 +148,7 @@ func _save_layer_name(new_name: String) -> void:
 	Global.current_project.layers[layer].name = new_name
 
 
-func _on_ExpandButton_pressed():
+func _on_ExpandButton_pressed() -> void:
 	Global.current_project.layers[layer].expanded = !Global.current_project.layers[layer].expanded
 	_update_buttons_all_layers()
 
@@ -157,14 +157,16 @@ func _on_VisibilityButton_pressed() -> void:
 	Global.canvas.selection.transform_content_confirm()
 	Global.current_project.layers[layer].visible = !Global.current_project.layers[layer].visible
 	Global.canvas.update()
-	_select_current_layer()
+	if Global.select_layer_on_button_click:
+		_select_current_layer()
 	_update_buttons_all_layers()
 
 
 func _on_LockButton_pressed() -> void:
 	Global.canvas.selection.transform_content_confirm()
 	Global.current_project.layers[layer].locked = !Global.current_project.layers[layer].locked
-	_select_current_layer()
+	if Global.select_layer_on_button_click:
+		_select_current_layer()
 	_update_buttons_all_layers()
 
 
@@ -173,6 +175,8 @@ func _on_LinkButton_pressed() -> void:
 	var layer_class: PixelLayer = Global.current_project.layers[layer]
 	layer_class.new_cels_linked = !layer_class.new_cels_linked
 	update_buttons()
+	if Global.select_layer_on_button_click:
+		_select_current_layer()
 
 
 func _select_current_layer() -> void: