Skip to content
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

Editor UI fixes & improvements #2282

Merged
merged 3 commits into from
Jun 17, 2024
Merged

Editor UI fixes & improvements #2282

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
748fd59
Editor Theme and Style improvements
Jowan-Spooner Jun 17, 2024
7ddd8c1
Add scroll container to character editor
Jowan-Spooner Jun 17, 2024
f7eb3a6
Add Close buttons to StyleBrowser and UpdateChecker windows
Jowan-Spooner Jun 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
137 changes: 71 additions & 66 deletions addons/dialogic/Editor/CharacterEditor/character_editor.tscn
View file
Open in desktop

Large diffs are not rendered by default.

20 changes: 4 additions & 16 deletions addons/dialogic/Editor/Common/DCSS.gd
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,23 +1,23 @@
@tool
class_name DCSS

static func inline(style:Dictionary) -> StyleBoxFlat:
var scale:float = DialogicUtil.get_editor_scale()
static func inline(style: Dictionary) -> StyleBoxFlat:
var scale: float = DialogicUtil.get_editor_scale()
var s := StyleBoxFlat.new()
for property in style.keys():
match property:
'border-left':
s.set('border_width_left', style[property] * scale)
'border-radius':
var radius:float = style[property] * scale
var radius: float = style[property] * scale
s.set('corner_radius_top_left', radius)
s.set('corner_radius_top_right', radius)
s.set('corner_radius_bottom_left', radius)
s.set('corner_radius_bottom_right', radius)
'background':
s.set('bg_color', style[property])
'border':
var width:float = style[property] * scale
var width: float = style[property] * scale
s.set('border_width_left', width)
s.set('border_width_right', width)
s.set('border_width_top', width)
Expand All @@ -42,15 +42,3 @@ static func inline(style:Dictionary) -> StyleBoxFlat:
'padding-left':
s.set('content_margin_left', style[property] * scale)
return s

static func style(node, style:Dictionary) -> StyleBoxFlat:
var s:StyleBoxFlat = inline(style)

node.set('theme_override_styles/normal', s)
node.set('theme_override_styles/focus', s)
node.set('theme_override_styles/read_only', s)
node.set('theme_override_styles/hover', s)
node.set('theme_override_styles/pressed', s)
node.set('theme_override_styles/disabled', s)
node.set('theme_override_styles/panel', s)
return s
2 changes: 1 addition & 1 deletion addons/dialogic/Editor/Common/reference_manager_window.gd
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ extends Window
## Other scripts can call the add_ref_change() method to register changes directly
## or use the helpers add_variable_ref_change() and add_portrait_ref_change()

@onready var editors_manager := get_node("../Margin/EditorsManager")
@onready var editors_manager := get_node("../EditorsManager")
@onready var broken_manager := get_node("Manager/Tabs/BrokenReferences")
enum Where {EVERYWHERE, BY_CHARACTER, TEXTS_ONLY}
enum Types {TEXT, VARIABLE, PORTRAIT, CHARACTER_NAME, TIMELINE_NAME}
Expand Down
7 changes: 3 additions & 4 deletions addons/dialogic/Editor/Common/side_bar.tscn
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,14 +46,13 @@ layout_mode = 2
expand_mode = 3
stretch_mode = 4

[node name="CurrentResource" type="Label" parent="VBox/Margin/VSplitContainer/VBox"]
[node name="CurrentResource" type="LineEdit" parent="VBox/Margin/VSplitContainer/VBox"]
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
alignment = 1
editable = false

[node name="Search" type="LineEdit" parent="VBox/Margin/VSplitContainer/VBox"]
unique_name_in_owner = true
Expand Down
5 changes: 2 additions & 3 deletions addons/dialogic/Editor/Common/sidebar.gd
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,6 @@ func _ready() -> void:
%Logo.custom_minimum_size.y = 30 * editor_scale
%Search.right_icon = get_theme_icon("Search", "EditorIcons")

%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"))
Expand Down Expand Up @@ -78,7 +77,7 @@ func update_resource_list(resources_list:PackedStringArray = []) -> void:
resources_list = clean_resource_list(resources_list)

%CurrentResource.text = "No Resource"
%CurrentResource.add_theme_color_override("font_color", get_theme_color("disabled_font_color", "Editor"))
%CurrentResource.add_theme_color_override("font_uneditable_color", get_theme_color("disabled_font_color", "Editor"))

%ResourcesList.clear()
var idx := 0
Expand Down Expand Up @@ -106,7 +105,7 @@ func update_resource_list(resources_list:PackedStringArray = []) -> void:
%CurrentResource.text = timeline_name+'.dtl'
idx += 1
if %CurrentResource.text != "No Resource":
%CurrentResource.add_theme_color_override("font_color", get_theme_color("font_color", "Editor"))
%CurrentResource.add_theme_color_override("font_uneditable_color", get_theme_color("font_color", "Editor"))
%ResourcesList.sort_items_by_text()
DialogicUtil.set_editor_setting('last_resources', resources_list)

Expand Down
6 changes: 5 additions & 1 deletion addons/dialogic/Editor/Common/update_install_window.gd
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ func _ready() -> void:
%Install.icon = editor_view.get_theme_icon("AssetLib", "EditorIcons")
%LoadingIcon.texture = editor_view.get_theme_icon("KeyTrackScale", "EditorIcons")
%InstallWarning.modulate = editor_view.get_theme_color("warning_color", "Editor")

%CloseButton.icon = editor_view.get_theme_icon("Close", "EditorIcons")
DialogicUtil.get_dialogic_plugin().get_editor_interface().get_resource_filesystem().resources_reimported.connect(_on_resources_reimported)


Expand Down Expand Up @@ -174,3 +174,7 @@ func _on_install_mouse_exited() -> void:

func _on_restart_pressed() -> void:
DialogicUtil.get_dialogic_plugin().get_editor_interface().restart_editor(true)


func _on_close_button_pressed() -> void:
get_parent().hide()
10 changes: 10 additions & 0 deletions addons/dialogic/Editor/Common/update_install_window.tscn
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -290,9 +290,19 @@ layout_mode = 2
size_flags_horizontal = 3
size_flags_vertical = 7

[node name="Close" type="HBoxContainer" parent="VBoxContainer"]
layout_mode = 2
alignment = 1

[node name="CloseButton" type="Button" parent="VBoxContainer/Close"]
unique_name_in_owner = true
layout_mode = 2
text = "Close"

[connection signal="pressed" from="VBoxContainer/HBoxContainer2/VBox/ScrollContainer/VBoxContainer/Panel/Refresh" to="." method="_on_refresh_pressed"]
[connection signal="meta_clicked" from="VBoxContainer/HBoxContainer2/VBox/ScrollContainer/VBoxContainer/Content" to="." method="_on_content_meta_clicked"]
[connection signal="pressed" from="VBoxContainer/HBoxContainer2/VBox/ScrollContainer/VBoxContainer/HBoxContainer/PanelContainer/HBox/Restart" to="." method="_on_restart_pressed"]
[connection signal="mouse_entered" from="VBoxContainer/HBoxContainer2/VBox/ScrollContainer/VBoxContainer/HBoxContainer/PanelContainer/HBox/Install" to="." method="_on_install_mouse_entered"]
[connection signal="mouse_exited" from="VBoxContainer/HBoxContainer2/VBox/ScrollContainer/VBoxContainer/HBoxContainer/PanelContainer/HBox/Install" to="." method="_on_install_mouse_exited"]
[connection signal="pressed" from="VBoxContainer/HBoxContainer2/VBox/ScrollContainer/VBoxContainer/HBoxContainer/PanelContainer/HBox/Install" to="." method="_on_install_pressed"]
[connection signal="pressed" from="VBoxContainer/Close/CloseButton" to="." method="_on_close_button_pressed"]
5 changes: 2 additions & 3 deletions addons/dialogic/Editor/Events/Fields/field_text_multiline.tscn
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
[gd_scene load_steps=5 format=3 uid="uid://dyp7m2nvab1aj"]
[gd_scene load_steps=4 format=3 uid="uid://dyp7m2nvab1aj"]

[ext_resource type="StyleBox" uid="uid://cu8otiwksn8ma" path="res://addons/dialogic/Editor/Events/styles/TextBackground.tres" id="1_xq18n"]
[ext_resource type="Script" path="res://addons/dialogic/Editor/TimelineEditor/TextEditor/syntax_highlighter.gd" id="2_ww6ga"]
[ext_resource type="Script" path="res://addons/dialogic/Editor/Events/Fields/field_text_multiline.gd" id="3_q7600"]

Expand All @@ -12,7 +11,7 @@ offset_right = 413.0
offset_bottom = 15.0
size_flags_horizontal = 3
size_flags_vertical = 3
theme_override_styles/normal = ExtResource("1_xq18n")
theme_type_variation = &"DialogicTextEventTextEdit"
wrap_mode = 1
scroll_fit_content_height = true
syntax_highlighter = SubResource("SyntaxHighlighter_2q5dk")
Expand Down
29 changes: 17 additions & 12 deletions addons/dialogic/Editor/TimelineEditor/TextEditor/syntax_highlighter.gd
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,18 +31,23 @@ var text_event :DialogicTextEvent = null


func _init() -> void:
# Load colors from editor settings
if DialogicUtil.get_dialogic_plugin():
var editor_settings = DialogicUtil.get_dialogic_plugin().get_editor_interface().get_editor_settings()
normal_color = editor_settings.get('text_editor/theme/highlighting/text_color')
translation_id_color = editor_settings.get('text_editor/theme/highlighting/comment_color')

code_flow_color = editor_settings.get("text_editor/theme/highlighting/control_flow_keyword_color")
boolean_operator_color = code_flow_color.lightened(0.5)
variable_color = editor_settings.get('text_editor/theme/highlighting/engine_type_color')
string_color = editor_settings.get('text_editor/theme/highlighting/string_color')
character_name_color = editor_settings.get('text_editor/theme/highlighting/symbol_color').lerp(normal_color, 0.3)
character_portrait_color = character_name_color.lerp(normal_color, 0.5)
update_colors()
DialogicUtil.get_dialogic_plugin().get_editor_interface().get_base_control().theme_changed.connect(update_colors)


func update_colors() -> void:
if not DialogicUtil.get_dialogic_plugin():
return
var editor_settings = DialogicUtil.get_dialogic_plugin().get_editor_interface().get_editor_settings()
normal_color = editor_settings.get('text_editor/theme/highlighting/text_color')
translation_id_color = editor_settings.get('text_editor/theme/highlighting/comment_color')

code_flow_color = editor_settings.get("text_editor/theme/highlighting/control_flow_keyword_color")
boolean_operator_color = code_flow_color.lightened(0.5)
variable_color = editor_settings.get('text_editor/theme/highlighting/engine_type_color')
string_color = editor_settings.get('text_editor/theme/highlighting/string_color')
character_name_color = editor_settings.get('text_editor/theme/highlighting/symbol_color').lerp(normal_color, 0.3)
character_portrait_color = character_name_color.lerp(normal_color, 0.5)


func _get_line_syntax_highlighting(line:int) -> Dictionary:
Expand Down
45 changes: 28 additions & 17 deletions addons/dialogic/Editor/editor_main.gd
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,29 +8,16 @@ var editors_manager: Control = null

var editor_file_dialog: EditorFileDialog

## Styling
@export var editor_tab_bg := StyleBoxFlat.new()


func _ready() -> void:
if get_parent() is SubViewport:
return

## REFERENCES
editors_manager = $Margin/EditorsManager
editors_manager = $EditorsManager
var button :Button = editors_manager.add_icon_button(get_theme_icon("MakeFloating", "EditorIcons"), 'Make floating')
button.pressed.connect(toggle_floating_window)



## STYLING
$BG.color = get_theme_color("base_color", "Editor")
editor_tab_bg.border_color = get_theme_color("base_color", "Editor")
editor_tab_bg.bg_color = get_theme_color("dark_color_2", "Editor")
$Margin/EditorsManager.editors_holder.add_theme_stylebox_override('panel', editor_tab_bg)
$Margin.set("theme_override_constants/margin_right", get_theme_constant("base_margin", "Editor") * DialogicUtil.get_editor_scale())
$Margin.set("theme_override_constants/margin_bottom", get_theme_constant("base_margin", "Editor") * DialogicUtil.get_editor_scale())

# File dialog
editor_file_dialog = EditorFileDialog.new()
add_child(editor_file_dialog)
Expand All @@ -44,9 +31,25 @@ func _ready() -> void:
$SaveConfirmationDialog.add_button('No Saving Please!', true, 'nosave')
$SaveConfirmationDialog.hide()
update_theme_additions()
EditorInterface.get_base_control().theme_changed.connect(update_theme_additions)


func update_theme_additions() -> void:
add_theme_stylebox_override("panel", DCSS.inline({
'background': get_theme_color("base_color", "Editor"),
'padding': [5*DialogicUtil.get_editor_scale(), 5*DialogicUtil.get_editor_scale()],
}))
var holder_panel := DCSS.inline({
'border-radius':5,
#'border': 2,
#'border-color': get_theme_color("base_color", "Editor"),
'background': get_theme_color("dark_color_2", "Editor"),
'padding': [5*DialogicUtil.get_editor_scale(), 5*DialogicUtil.get_editor_scale()],
})
holder_panel.border_width_top = 0
holder_panel.corner_radius_top_left = 0
editors_manager.editors_holder.add_theme_stylebox_override('panel', holder_panel)

if theme == null:
theme = Theme.new()
theme.clear()
Expand All @@ -66,8 +69,6 @@ func update_theme_additions() -> void:
theme.set_type_variation('DialogicPanelA', 'PanelContainer')
var panel_style := DCSS.inline({
'border-radius': 10,
'border': 0,
'border_color':get_theme_color("dark_color_3", "Editor"),
'background': get_theme_color("base_color", "Editor"),
'padding': [5, 5],
})
Expand Down Expand Up @@ -156,7 +157,17 @@ func update_theme_additions() -> void:
}))
theme.set_constant('separation', 'DialogicMegaSeparator', 50)


theme.set_type_variation('DialogicTextEventTextEdit', 'CodeEdit')
var editor_settings := plugin_reference.get_editor_interface().get_editor_settings()
var text_panel := DCSS.inline({
'border-radius': 8,
'background': editor_settings.get_setting("text_editor/theme/highlighting/background_color").lerp(
editor_settings.get_setting("text_editor/theme/highlighting/text_color"), 0.05),
'padding': [8, 8],
})
text_panel.content_margin_bottom = 5
text_panel.content_margin_left = 13
theme.set_stylebox('normal', 'DialogicTextEventTextEdit', text_panel)

theme.set_icon('Plugin', 'Dialogic', load("res://addons/dialogic/Editor/Images/plugin-icon.svg"))

Expand Down
Loading
Loading