Added color previews next to the themes in Preferences

CHANGELOG.md

@@ -25,6 +25,7 @@ Darshan Phaldesai (luiq54), Igor Santarek (jegor377), rob-a-bolton, Kinwailo
 - Added "Copy", "Paste" and "Delete" options in the Edit menu. ([#281](https://github.com/Orama-Interactive/Pixelorama/pull/281))
 - Selection region and size are now being shown when making a selection on the top, next to the position label. ([#281](https://github.com/Orama-Interactive/Pixelorama/pull/281))
 - Added color overwrite option for the Pencil tool. ([#282](https://github.com/Orama-Interactive/Pixelorama/pull/282))
+- Added color previews next to the themes in Preferences
 
 ### Changed
 - Drawing is no longer limited by the canvas boundaries. This means that, if you have a brush largen than 1px, you can draw on the edges of the canvas. All pixels that are being drawn outside of the canvas will still have no effect.

src/Preferences/HandleThemes.gd

@@ -1,22 +1,41 @@
 extends Node
 
 
+onready var themes := [
+	preload("res://assets/themes/dark/theme.tres"),
+	preload("res://assets/themes/gray/theme.tres"),
+	preload("res://assets/themes/blue/theme.tres"),
+	preload("res://assets/themes/caramel/theme.tres"),
+	preload("res://assets/themes/light/theme.tres"),
+]
+onready var buttons_container : BoxContainer = $ThemeButtons
+onready var colors_container : BoxContainer = $ThemeColors
+onready var theme_color_preview_scene = preload("res://src/Preferences/ThemeColorPreview.tscn")
+
+
 func _ready() -> void:
-	for child in get_children():
+	for child in buttons_container.get_children():
 		if child is Button:
 			child.connect("pressed", self, "_on_Theme_pressed", [child.get_index()])
 
+		var theme_color_preview : ColorRect = theme_color_preview_scene.instance()
+		var color1 = themes[child.get_index()].get_stylebox("panel", "Panel").bg_color
+		var color2 = themes[child.get_index()].get_stylebox("panel", "PanelContainer").bg_color
+		theme_color_preview.get_child(0).color = color1
+		theme_color_preview.get_child(1).color = color2
+		colors_container.add_child(theme_color_preview)
+
 	if Global.config_cache.has_section_key("preferences", "theme"):
 		var theme_id = Global.config_cache.get_value("preferences", "theme")
 		change_theme(theme_id)
-		get_child(theme_id).pressed = true
+		buttons_container.get_child(theme_id).pressed = true
 	else:
 		change_theme(0)
-		get_child(0).pressed = true
+		buttons_container.get_child(0).pressed = true
 
 
 func _on_Theme_pressed(index : int) -> void:
-	get_child(index).pressed = true
+	buttons_container.get_child(index).pressed = true
 	change_theme(index)
 
 	Global.config_cache.set_value("preferences", "theme", index)
@@ -25,32 +44,27 @@ func _on_Theme_pressed(index : int) -> void:
 
 func change_theme(ID : int) -> void:
 	var font = Global.control.theme.default_font
-	var main_theme : Theme
+	var main_theme : Theme = themes[ID]
 	var top_menu_style
 	var ruler_style
 	if ID == 0: # Dark Theme
 		Global.theme_type = Global.Theme_Types.DARK
-		main_theme = preload("res://assets/themes/dark/theme.tres")
 		top_menu_style = preload("res://assets/themes/dark/top_menu_style.tres")
 		ruler_style = preload("res://assets/themes/dark/ruler_style.tres")
 	elif ID == 1: # Gray Theme
 		Global.theme_type = Global.Theme_Types.DARK
-		main_theme = preload("res://assets/themes/gray/theme.tres")
 		top_menu_style = preload("res://assets/themes/gray/top_menu_style.tres")
 		ruler_style = preload("res://assets/themes/dark/ruler_style.tres")
 	elif ID == 2: # Godot's Theme
 		Global.theme_type = Global.Theme_Types.BLUE
-		main_theme = preload("res://assets/themes/blue/theme.tres")
 		top_menu_style = preload("res://assets/themes/blue/top_menu_style.tres")
 		ruler_style = preload("res://assets/themes/blue/ruler_style.tres")
 	elif ID == 3: # Caramel Theme
 		Global.theme_type = Global.Theme_Types.CARAMEL
-		main_theme = preload("res://assets/themes/caramel/theme.tres")
 		top_menu_style = preload("res://assets/themes/caramel/top_menu_style.tres")
 		ruler_style = preload("res://assets/themes/caramel/ruler_style.tres")
 	elif ID == 4: # Light Theme
 		Global.theme_type = Global.Theme_Types.LIGHT
-		main_theme = preload("res://assets/themes/light/theme.tres")
 		top_menu_style = preload("res://assets/themes/light/top_menu_style.tres")
 		ruler_style = preload("res://assets/themes/light/ruler_style.tres")
 

src/Preferences/PreferencesDialog.tscn

@@ -238,51 +238,62 @@ custom_fonts/font = ExtResource( 3 )
 group = SubResource( 1 )
 text = "繁體中文 [zh_TW]"
 
-[node name="Themes" type="VBoxContainer" parent="HSplitContainer/ScrollContainer/VBoxContainer"]
+[node name="Themes" type="HBoxContainer" parent="HSplitContainer/ScrollContainer/VBoxContainer"]
 visible = false
-margin_right = 506.0
+margin_top = 28.0
-margin_bottom = 136.0
+margin_right = 498.0
+margin_bottom = 164.0
 script = ExtResource( 5 )
 
-[node name="Dark Theme" type="CheckBox" parent="HSplitContainer/ScrollContainer/VBoxContainer/Themes"]
+[node name="ThemeButtons" type="VBoxContainer" parent="HSplitContainer/ScrollContainer/VBoxContainer/Themes"]
-margin_right = 506.0
+margin_right = 80.0
+margin_bottom = 136.0
+
+[node name="Dark Theme" type="CheckBox" parent="HSplitContainer/ScrollContainer/VBoxContainer/Themes/ThemeButtons"]
+margin_right = 80.0
 margin_bottom = 24.0
 mouse_default_cursor_shape = 2
 group = SubResource( 2 )
 text = "Dark"
 
-[node name="Gray Theme" type="CheckBox" parent="HSplitContainer/ScrollContainer/VBoxContainer/Themes"]
+[node name="Gray Theme" type="CheckBox" parent="HSplitContainer/ScrollContainer/VBoxContainer/Themes/ThemeButtons"]
 margin_top = 28.0
-margin_right = 506.0
+margin_right = 80.0
 margin_bottom = 52.0
 mouse_default_cursor_shape = 2
 group = SubResource( 2 )
 text = "Gray"
 
-[node name="Blue Theme" type="CheckBox" parent="HSplitContainer/ScrollContainer/VBoxContainer/Themes"]
+[node name="Blue Theme" type="CheckBox" parent="HSplitContainer/ScrollContainer/VBoxContainer/Themes/ThemeButtons"]
 margin_top = 56.0
-margin_right = 506.0
+margin_right = 80.0
 margin_bottom = 80.0
 mouse_default_cursor_shape = 2
 group = SubResource( 2 )
 text = "Blue"
 
-[node name="Caramel Theme" type="CheckBox" parent="HSplitContainer/ScrollContainer/VBoxContainer/Themes"]
+[node name="Caramel Theme" type="CheckBox" parent="HSplitContainer/ScrollContainer/VBoxContainer/Themes/ThemeButtons"]
 margin_top = 84.0
-margin_right = 506.0
+margin_right = 80.0
 margin_bottom = 108.0
 mouse_default_cursor_shape = 2
 group = SubResource( 2 )
 text = "Caramel"
 
-[node name="Light Theme" type="CheckBox" parent="HSplitContainer/ScrollContainer/VBoxContainer/Themes"]
+[node name="Light Theme" type="CheckBox" parent="HSplitContainer/ScrollContainer/VBoxContainer/Themes/ThemeButtons"]
 margin_top = 112.0
-margin_right = 506.0
+margin_right = 80.0
 margin_bottom = 136.0
 mouse_default_cursor_shape = 2
 group = SubResource( 2 )
 text = "Light"
 
+[node name="ThemeColors" type="VBoxContainer" parent="HSplitContainer/ScrollContainer/VBoxContainer/Themes"]
+margin_left = 84.0
+margin_right = 134.0
+margin_bottom = 136.0
+custom_constants/separation = 6
+
 [node name="Canvas" type="VBoxContainer" parent="HSplitContainer/ScrollContainer/VBoxContainer"]
 visible = false
 margin_top = 28.0
@@ -301,13 +312,14 @@ margin_bottom = 42.0
 
 [node name="Label" type="Label" parent="HSplitContainer/ScrollContainer/VBoxContainer/Canvas/ZoomOptions"]
 margin_top = 5.0
-margin_right = 90.0
+margin_right = 110.0
 margin_bottom = 19.0
+rect_min_size = Vector2( 110, 0 )
 text = "Smooth Zoom"
 
 [node name="SmoothZoom" type="CheckBox" parent="HSplitContainer/ScrollContainer/VBoxContainer/Canvas/ZoomOptions"]
-margin_left = 94.0
+margin_left = 114.0
-margin_right = 141.0
+margin_right = 161.0
 margin_bottom = 24.0
 hint_tooltip = "Adds a smoother transition when zooming in or out"
 mouse_default_cursor_shape = 2

src/Preferences/ThemeColorPreview.tscn

@@ -0,0 +1,38 @@
+[gd_scene format=2]
+
+[node name="ThemeColorPreview" type="ColorRect"]
+margin_right = 50.0
+margin_bottom = 14.0
+rect_min_size = Vector2( 50, 14 )
+color = Color( 0.380392, 0.384314, 0.380392, 1 )
+__meta__ = {
+"_edit_use_anchors_": false
+}
+
+[node name="ColorRect" type="ColorRect" parent="."]
+anchor_top = 0.5
+anchor_bottom = 0.5
+margin_left = 3.0
+margin_top = -5.0
+margin_right = 23.0
+margin_bottom = 5.0
+rect_min_size = Vector2( 20, 10 )
+color = Color( 0.152941, 0.152941, 0.152941, 1 )
+__meta__ = {
+"_edit_use_anchors_": false
+}
+
+[node name="ColorRect2" type="ColorRect" parent="."]
+anchor_left = 1.0
+anchor_top = 0.5
+anchor_right = 1.0
+anchor_bottom = 0.5
+margin_left = -23.0
+margin_top = -5.0
+margin_right = -3.0
+margin_bottom = 5.0
+rect_min_size = Vector2( 20, 10 )
+color = Color( 0.411765, 0.411765, 0.411765, 1 )
+__meta__ = {
+"_edit_use_anchors_": false
+}