Changed some UI and redesigned character editor layout (#1674)

* Changed some UI and redesigned character editor

Co-authored-by: Jowan-Spooner <[email protected]>

Author: CristianRos

addons/dialogic/Editor/CharacterEditor/character_editor.gd

@@ -126,6 +126,10 @@ func _ready() -> void:
 
 	%RealPreviewPivot.texture = get_theme_icon("EditorPivot", "EditorIcons")
 
+	%MainSettingsCollapse.icon = get_theme_icon("GuiVisibilityVisible", "EditorIcons")
+	
+	await find_parent('EditorView').ready
+	
 	# Add general tabs
 	add_settings_section(load("res://addons/dialogic/Editor/CharacterEditor/char_edit_section_general.tscn").instantiate(), %MainSettingsSections)
 	add_settings_section(load("res://addons/dialogic/Editor/CharacterEditor/char_edit_section_portraits.tscn").instantiate(), %MainSettingsSections)
@@ -161,7 +165,7 @@ func add_settings_section(edit:Control, parent:Node) ->  void:
 	button.pressed.connect(_on_section_button_pressed.bind(button))
 	button.focus_mode = Control.FOCUS_NONE
 	button.icon = get_theme_icon("CodeFoldDownArrow", "EditorIcons")
-	button.add_theme_color_override('icon_normal_color', get_theme_color("accent_color", "Editor"))
+	button.add_theme_color_override('icon_normal_color', get_theme_color("font_color", "DialogicSection"))
 	parent.add_child(button)
 	parent.add_child(edit)
 	parent.add_child(HSeparator.new())
@@ -542,3 +546,15 @@ func _on_fit_preview_toggle_toggled(button_pressed):
 
 func _on_reference_manger_button_pressed():
 	editors_manager.reference_manager.open()
+
+
+func _on_main_settings_collapse_toggled(button_pressed):
+	%MainSettingsTitle.visible = !button_pressed
+	%MainSettingsScroll.visible = !button_pressed
+#	%MainHSplit.collapsed = button_pressed
+	if button_pressed:
+		%MainSettings.hide()
+		%MainSettingsCollapse.icon = get_theme_icon("GuiVisibilityHidden", "EditorIcons")
+	else:
+		%MainSettings.show()
+		%MainSettingsCollapse.icon = get_theme_icon("GuiVisibilityVisible", "EditorIcons")

addons/dialogic/Editor/CharacterEditor/character_editor.tscn

@@ -1,10 +1,14 @@
-[gd_scene load_steps=3 format=3 uid="uid://cwe3r2tbh2og1"]
+[gd_scene load_steps=5 format=3 uid="uid://cwe3r2tbh2og1"]
 
 [ext_resource type="Script" path="res://addons/dialogic/Editor/Common/sidebar.gd" id="1_jnq65"]
 
 [sub_resource type="Theme" id="Theme_pn0f4"]
 VBoxContainer/constants/separation = 4
 
+[sub_resource type="StyleBoxEmpty" id="StyleBoxEmpty_gxwm6"]
+
+[sub_resource type="StyleBoxEmpty" id="StyleBoxEmpty_n8rql"]
+
 [node name="SideBar" type="VSplitContainer"]
 custom_minimum_size = Vector2(100, 130)
 anchors_preset = 15
@@ -47,6 +51,8 @@ unique_name_in_owner = true
 layout_mode = 2
 size_flags_horizontal = 3
 text = "No resource"
+horizontal_alignment = 1
+vertical_alignment = 1
 text_overrun_behavior = 1
 
 [node name="Search" type="LineEdit" parent="VBox/Margin/VSplitContainer/VBox"]
@@ -71,6 +77,9 @@ size_flags_vertical = 3
 unique_name_in_owner = true
 layout_mode = 2
 size_flags_vertical = 3
+theme_override_styles/selected = SubResource("StyleBoxEmpty_gxwm6")
+theme_override_styles/selected_focus = SubResource("StyleBoxEmpty_n8rql")
+allow_reselect = true
 same_column_width = true
 
 [node name="CurrentVersion" type="Label" parent="VBox"]

addons/dialogic/Editor/Common/side_bar.tscn

@@ -30,6 +30,9 @@ func _ready():
 
 	%CurrentResource.add_theme_stylebox_override('normal', get_theme_stylebox('normal', 'LineEdit'))
 
+	%ContentList.add_theme_color_override("font_hovered_color", get_theme_color("warning_color", "Editor"))
+	%ContentList.add_theme_color_override("font_selected_color", get_theme_color("property_color_z", "Editor"))
+	
 	## MARGINS
 	$VBox/Margin.set("theme_override_constants/margin_left", 4 * editor_scale)
 	$VBox/Margin.set("theme_override_constants/margin_bottom", 4 * editor_scale)

addons/dialogic/Editor/Common/sidebar.gd

@@ -24,6 +24,7 @@ func add_icon_button(icon: Texture, tooltip: String) -> Button:
 	button.flat = true
 	button.size_flags_vertical = Control.SIZE_SHRINK_BEGIN
 	button.add_theme_color_override('icon_hover_color', get_theme_color('warning_color', 'Editor'))
+	button.add_theme_stylebox_override('focus', StyleBoxEmpty.new())
 	add_child(button)
 	move_child(button, -2)
 	return button

addons/dialogic/Editor/Common/toolbar.gd

@@ -34,6 +34,7 @@ func _ready() -> void:
 	%TransRemove.pressed.connect(_on_erase_translations_pressed)
 
 
+
 func _refresh() -> void:
 	loading = true
 	%TransEnabled.button_pressed = ProjectSettings.get_setting('dialogic/translation/enabled', false)

addons/dialogic/Editor/Settings/settings_translation.gd

@@ -1,11 +1,11 @@
-[gd_scene load_steps=8 format=3 uid="uid://chpb1mj03xjxv"]
+[gd_scene load_steps=7 format=3 uid="uid://chpb1mj03xjxv"]
 
 [ext_resource type="Script" path="res://addons/dialogic/Editor/Settings/settings_translation.gd" id="1_dvmyi"]
 [ext_resource type="PackedScene" uid="uid://dbpkta2tjsqim" path="res://addons/dialogic/Editor/Common/hint_tooltip_icon.tscn" id="2_k2lou"]
 [ext_resource type="PackedScene" uid="uid://dpwhshre1n4t6" path="res://addons/dialogic/Editor/Events/Fields/ComplexPicker.tscn" id="3_dq4j2"]
 [ext_resource type="PackedScene" uid="uid://7mvxuaulctcq" path="res://addons/dialogic/Editor/Events/Fields/FilePicker.tscn" id="4_kvsma"]
 
-[sub_resource type="Image" id="Image_2imc3"]
+[sub_resource type="Image" id="Image_o33h3"]
 data = {
 "data": PackedByteArray(255, 255, 255, 0, 255, 255, 255, 0, 255, 255, 255, 0, 255, 255, 255, 0, 255, 255, 255, 0, 255, 255, 255, 0, 255, 255, 255, 0, 255, 255, 255, 0, 255, 255, 255, 0, 255, 255, 255, 0, 255, 255, 255, 0, 255, 255, 255, 0, 255, 255, 255, 0, 255, 255, 255, 0, 255, 255, 255, 0, 255, 255, 255, 0, 255, 255, 255, 0, 255, 255, 255, 0, 255, 93, 93, 255, 255, 93, 93, 255, 255, 93, 93, 255, 255, 93, 93, 255, 255, 93, 93, 255, 255, 93, 93, 255, 255, 93, 93, 255, 255, 255, 255, 0, 255, 94, 94, 127, 255, 255, 255, 0, 255, 255, 255, 0, 255, 255, 255, 0, 255, 255, 255, 0, 255, 255, 255, 0, 255, 255, 255, 0, 255, 255, 255, 0, 255, 93, 93, 255, 255, 93, 93, 255, 255, 93, 93, 255, 255, 93, 93, 255, 255, 93, 93, 255, 255, 93, 93, 255, 255, 93, 93, 255, 255, 255, 255, 0, 255, 93, 93, 255, 255, 94, 94, 127, 255, 255, 255, 0, 255, 255, 255, 0, 255, 255, 255, 0, 255, 255, 255, 0, 255, 255, 255, 0, 255, 255, 255, 0, 255, 93, 93, 255, 255, 93, 93, 255, 255, 93, 93, 255, 255, 93, 93, 255, 255, 93, 93, 255, 255, 93, 93, 255, 255, 93, 93, 255, 255, 255, 255, 0, 255, 93, 93, 255, 255, 93, 93, 255, 255, 94, 94, 127, 255, 255, 255, 0, 255, 255, 255, 0, 255, 255, 255, 0, 255, 255, 255, 0, 255, 255, 255, 0, 255, 93, 93, 255, 255, 93, 93, 255, 255, 93, 93, 255, 255, 93, 93, 255, 255, 93, 93, 255, 255, 93, 93, 255, 255, 93, 93, 255, 255, 255, 255, 0, 255, 93, 93, 255, 255, 93, 93, 255, 255, 93, 93, 255, 255, 94, 94, 127, 255, 255, 255, 0, 255, 255, 255, 0, 255, 255, 255, 0, 255, 255, 255, 0, 255, 93, 93, 255, 255, 93, 93, 255, 255, 93, 93, 255, 255, 93, 93, 255, 255, 93, 93, 255, 255, 93, 93, 255, 255, 93, 93, 255, 255, 255, 255, 0, 255, 255, 255, 0, 255, 255, 255, 0, 255, 255, 255, 0, 255, 255, 255, 0, 255, 255, 255, 0, 255, 255, 255, 0, 255, 255, 255, 0, 255, 255, 255, 0, 255, 93, 93, 255, 255, 93, 93, 255, 255, 93, 93, 255, 255, 93, 93, 255, 255, 93, 93, 255, 255, 93, 93, 255, 255, 93, 93, 255, 255, 93, 93, 255, 255, 93, 93, 255, 255, 93, 93, 255, 255, 93, 93, 255, 255, 93, 93, 255, 255, 255, 255, 0, 255, 255, 255, 0, 255, 255, 255, 0, 255, 255, 255, 0, 255, 93, 93, 255, 255, 93, 93, 255, 255, 93, 93, 255, 255, 93, 93, 255, 255, 93, 93, 255, 255, 93, 93, 255, 255, 93, 93, 255, 255, 93, 93, 255, 255, 93, 93, 255, 255, 93, 93, 255, 255, 93, 93, 255, 255, 93, 93, 255, 255, 255, 255, 0, 255, 255, 255, 0, 255, 255, 255, 0, 255, 255, 255, 0, 255, 93, 93, 231, 255, 94, 94, 54, 255, 94, 94, 57, 255, 93, 93, 233, 255, 93, 93, 255, 255, 93, 93, 255, 255, 93, 93, 231, 255, 94, 94, 54, 255, 94, 94, 57, 255, 93, 93, 233, 255, 93, 93, 255, 255, 93, 93, 255, 255, 255, 255, 0, 255, 255, 255, 0, 255, 255, 255, 0, 255, 255, 255, 0, 255, 97, 97, 42, 255, 255, 255, 0, 255, 255, 255, 0, 255, 97, 97, 42, 255, 93, 93, 233, 255, 93, 93, 232, 255, 93, 93, 41, 255, 255, 255, 0, 255, 255, 255, 0, 255, 97, 97, 42, 255, 93, 93, 233, 255, 93, 93, 232, 255, 255, 255, 0, 255, 255, 255, 0, 255, 255, 255, 0, 255, 255, 255, 0, 255, 255, 255, 0, 255, 96, 96, 45, 255, 93, 93, 44, 255, 255, 255, 0, 255, 97, 97, 42, 255, 97, 97, 42, 255, 255, 255, 0, 255, 96, 96, 45, 255, 93, 93, 44, 255, 255, 255, 0, 255, 97, 97, 42, 255, 97, 97, 42, 255, 255, 255, 0, 255, 255, 255, 0, 255, 255, 255, 0, 255, 255, 255, 0, 255, 96, 96, 45, 255, 93, 93, 235, 255, 94, 94, 234, 255, 95, 95, 43, 255, 255, 255, 0, 255, 255, 255, 0, 255, 96, 96, 45, 255, 93, 93, 235, 255, 94, 94, 234, 255, 95, 95, 43, 255, 255, 255, 0, 255, 255, 255, 0, 255, 255, 255, 0, 255, 255, 255, 0, 255, 255, 255, 0, 255, 255, 255, 0, 255, 93, 93, 235, 255, 93, 93, 255, 255, 93, 93, 255, 255, 93, 93, 233, 255, 95, 95, 59, 255, 96, 96, 61, 255, 93, 93, 235, 255, 93, 93, 255, 255, 93, 93, 255, 255, 93, 93, 233, 255, 95, 95, 59, 255, 96, 96, 61, 255, 255, 255, 0, 255, 255, 255, 0, 255, 255, 255, 0, 255, 255, 255, 0, 255, 93, 93, 255, 255, 93, 93, 255, 255, 93, 93, 255, 255, 93, 93, 255, 255, 93, 93, 255, 255, 93, 93, 255, 255, 93, 93, 255, 255, 93, 93, 255, 255, 93, 93, 255, 255, 93, 93, 255, 255, 93, 93, 255, 255, 93, 93, 255, 255, 255, 255, 0, 255, 255, 255, 0, 255, 255, 255, 0, 255, 255, 255, 0, 255, 93, 93, 255, 255, 93, 93, 255, 255, 93, 93, 255, 255, 93, 93, 255, 255, 93, 93, 255, 255, 93, 93, 255, 255, 93, 93, 255, 255, 93, 93, 255, 255, 93, 93, 255, 255, 93, 93, 255, 255, 93, 93, 255, 255, 93, 93, 255, 255, 255, 255, 0, 255, 255, 255, 0, 255, 255, 255, 0, 255, 255, 255, 0, 255, 255, 255, 0, 255, 255, 255, 0, 255, 255, 255, 0, 255, 255, 255, 0, 255, 255, 255, 0, 255, 255, 255, 0, 255, 255, 255, 0, 255, 255, 255, 0, 255, 255, 255, 0, 255, 255, 255, 0, 255, 255, 255, 0, 255, 255, 255, 0, 255, 255, 255, 0, 255, 255, 255, 0),
 "format": "RGBA8",
@@ -14,22 +14,8 @@ data = {
 "width": 16
 }
 
-[sub_resource type="ImageTexture" id="ImageTexture_udy8i"]
-image = SubResource("Image_2imc3")
-
-[sub_resource type="StyleBoxFlat" id="StyleBoxFlat_ije5k"]
-content_margin_left = 4.0
-content_margin_top = 0.0
-content_margin_right = 4.0
-content_margin_bottom = 0.0
-bg_color = Color(0.1, 0.1, 0.1, 0.6)
-border_width_bottom = 2
-border_color = Color(0, 0, 0, 0.6)
-corner_radius_top_left = 3
-corner_radius_top_right = 3
-corner_radius_bottom_right = 3
-corner_radius_bottom_left = 3
-corner_detail = 5
+[sub_resource type="ImageTexture" id="ImageTexture_w0vi3"]
+image = SubResource("Image_o33h3")
 
 [node name="Translations" type="VBoxContainer"]
 anchors_preset = 15
@@ -87,7 +73,7 @@ text = "Testing locale"
 layout_mode = 2
 tooltip_text = "Change this locale to test your game in a different language (only in-editor). 
 Equivalent of the testing local project setting. "
-texture = SubResource("ImageTexture_udy8i")
+texture = SubResource("ImageTexture_w0vi3")
 hint_text = "Change this locale to test your game in a different language (only in-editor). 
 Equivalent of the testing local project setting. "
 
@@ -125,7 +111,7 @@ text = "Default locale"
 [node name="HintTooltip" parent="TranslationSettings/VBoxContainer/Grid/VBox" instance=ExtResource("2_k2lou")]
 layout_mode = 2
 tooltip_text = "This should be the local of the language your game is written in."
-texture = SubResource("ImageTexture_udy8i")
+texture = SubResource("ImageTexture_w0vi3")
 hint_text = "This should be the local of the language your game is written in."
 
 [node name="OrigLocale" parent="TranslationSettings/VBoxContainer/Grid" instance=ExtResource("3_dq4j2")]
@@ -143,7 +129,7 @@ text = "Translation file mode"
 layout_mode = 2
 tooltip_text = "You can either create one csv with all the strings from the whole 
 project or one csv file per timeline (will be placed next to that timeline). "
-texture = SubResource("ImageTexture_udy8i")
+texture = SubResource("ImageTexture_w0vi3")
 hint_text = "You can either create one csv with all the strings from the whole 
 project or one csv file per timeline (will be placed next to that timeline). "
 
@@ -167,14 +153,13 @@ text = "Translations folder"
 [node name="HintTooltip3" parent="TranslationSettings/VBoxContainer/Grid/TransFile" instance=ExtResource("2_k2lou")]
 layout_mode = 2
 tooltip_text = "Choose a folder general translations will be saved to. "
-texture = SubResource("ImageTexture_udy8i")
+texture = SubResource("ImageTexture_w0vi3")
 hint_text = "Choose a folder general translations will be saved to. "
 
 [node name="TransFolderPicker" parent="TranslationSettings/VBoxContainer/Grid" instance=ExtResource("4_kvsma")]
 unique_name_in_owner = true
 layout_mode = 2
 size_flags_horizontal = 3
-theme_override_styles/panel = SubResource("StyleBoxFlat_ije5k")
 file_mode = 2
 
 [node name="HSeparator6" type="VSeparator" parent="TranslationSettings"]
@@ -195,7 +180,7 @@ text = "Actions"
 [node name="HintTooltip4" parent="TranslationSettings/VBoxContainer2/HBoxContainer" instance=ExtResource("2_k2lou")]
 layout_mode = 2
 tooltip_text = "Check the Information to learn more about the individual actions."
-texture = SubResource("ImageTexture_udy8i")
+texture = SubResource("ImageTexture_w0vi3")
 hint_text = "Check the Information to learn more about the individual actions."
 
 [node name="Actions" type="GridContainer" parent="TranslationSettings/VBoxContainer2"]
@@ -210,7 +195,7 @@ text = "Update CSV files"
 [node name="HintTooltip5" parent="TranslationSettings/VBoxContainer2/Actions" instance=ExtResource("2_k2lou")]
 layout_mode = 2
 tooltip_text = "Will check all timelines for events that haven't been added to the csv file(s) and adds them. "
-texture = SubResource("ImageTexture_udy8i")
+texture = SubResource("ImageTexture_w0vi3")
 hint_text = "Will check all timelines for events that haven't been added to the csv file(s) and adds them. "
 
 [node name="CollectTranslations" type="Button" parent="TranslationSettings/VBoxContainer2/Actions"]
@@ -224,7 +209,7 @@ tooltip_text = "When you've added translations to a csv file,
 godot will import them as .translation files. 
 These have to be added to a list (Project Settings > Localization) 
 and this is a quick way to do so."
-texture = SubResource("ImageTexture_udy8i")
+texture = SubResource("ImageTexture_w0vi3")
 hint_text = "When you've added translations to a csv file, 
 godot will import them as .translation files. 
 These have to be added to a list (Project Settings > Localization) 
@@ -246,7 +231,7 @@ layout_mode = 2
 tooltip_text = "Be very careful with this button. It will try to delete any 
 .csv and .translation files that are related to dialogic. 
 It will also remove translation ids from all events. "
-texture = SubResource("ImageTexture_udy8i")
+texture = SubResource("ImageTexture_w0vi3")
 hint_text = "Be very careful with this button. It will try to delete any 
 .csv and .translation files that are related to dialogic. 
 It will also remove translation ids from all events. "
@@ -263,7 +248,8 @@ layout_mode = 2
 layout_mode = 2
 size_flags_horizontal = 3
 
-[node name="Title2" type="Label" parent="InfoSection/Setup"]
+[node name="SetupTitle" type="Label" parent="InfoSection/Setup"]
+unique_name_in_owner = true
 layout_mode = 2
 theme_type_variation = &"DialogicSection"
 text = "Setting up translations"
@@ -284,7 +270,8 @@ layout_mode = 2
 layout_mode = 2
 size_flags_horizontal = 3
 
-[node name="Title" type="Label" parent="InfoSection/Workflow"]
+[node name="WorkflowTitle" type="Label" parent="InfoSection/Workflow"]
+unique_name_in_owner = true
 layout_mode = 2
 theme_type_variation = &"DialogicSection"
 text = "How to work with translations"

addons/dialogic/Editor/Settings/settings_translation.tscn

@@ -854,6 +854,7 @@ func add_event_node(event_resource:DialogicEvent, at_index:int = -1, auto_select
 	piece.content_changed.connect(something_changed)
 	if event_resource.event_name == "Label":
 		piece.content_changed.connect(update_content_list)
+		piece.tree_exited.connect(update_content_list)
 	if at_index == -1:
 		if len(selected_items) != 0:
 			selected_items[0].add_sibling(piece)

addons/dialogic/Editor/TimelineEditor/VisualEditor/timeline_editor_visual.gd

@@ -53,6 +53,7 @@ func update_theme_additions():
 	theme.set_type_variation('DialogicSubTitle', 'Label')
 	theme.set_font('font', 'DialogicSubTitle', get_theme_font("title", "EditorFonts"))
 	theme.set_font_size('font_size', 'DialogicSubTitle', get_theme_font_size("doc_size", "EditorFonts"))
+	theme.set_color('font_color', 'DialogicSubTitle', get_theme_color('accent_color', 'Editor'))
 
 	theme.set_type_variation('DialogicPanelA', 'PanelContainer')
 	var panel_style := DCSS.inline({
@@ -120,7 +121,7 @@ func update_theme_additions():
 
 	theme.set_type_variation('DialogicSection', 'Label')
 	theme.set_font('font', 'DialogicSection', get_theme_font("main_msdf", "EditorFonts"))
-	theme.set_color('font_color', 'DialogicSection', get_theme_color("accent_color", "Editor"))
+	theme.set_color('font_color', 'DialogicSection', get_theme_color("property_color_z", "Editor"))
 	theme.set_font_size('font_size', 'DialogicSection', get_theme_font_size("doc_size", "EditorFonts"))
 
 	theme.set_type_variation('DialogicSettingsSection', 'DialogicSection')