Change window opacity settings to a dedicated dialog with a slider and a spinbox

Changed from a popupmenu with fixed settings. This should give more freedom to the user while improving UX.

Translations/Translations.pot

@@ -166,7 +166,7 @@ msgstr ""
 msgid "Tile Mode"
 msgstr ""
 
-msgid "Window Transparency"
+msgid "Window Opacity"
 msgstr ""
 
 msgid "Panel Layout"

src/Autoload/Global.gd

@@ -144,7 +144,6 @@ onready var tabs_container : PanelContainer = control.find_node("TabsContainer")
 
 onready var recent_projects_submenu : PopupMenu = PopupMenu.new()
 onready var tile_mode_submenu : PopupMenu = PopupMenu.new()
-onready var window_transparency_submenu : PopupMenu = PopupMenu.new()
 onready var panel_layout_submenu : PopupMenu = PopupMenu.new()
 
 onready var new_image_dialog : ConfirmationDialog = control.find_node("CreateNewImage")
@@ -224,21 +223,6 @@ func _ready() -> void:
 	tile_mode_submenu.add_radio_check_item("Tiled In Y Axis", TileMode.Y_AXIS)
 	tile_mode_submenu.hide_on_checkable_item_selection = false
 
-	window_transparency_submenu.set_name("set value")
-	window_transparency_submenu.add_radio_check_item("100%")
-	window_transparency_submenu.add_radio_check_item("90%")
-	window_transparency_submenu.add_radio_check_item("80%")
-	window_transparency_submenu.add_radio_check_item("70%")
-	window_transparency_submenu.add_radio_check_item("60%")
-	window_transparency_submenu.add_radio_check_item("50%")
-	window_transparency_submenu.add_radio_check_item("40%")
-	window_transparency_submenu.add_radio_check_item("30%")
-	window_transparency_submenu.add_radio_check_item("20%")
-	window_transparency_submenu.add_radio_check_item("10%")
-	window_transparency_submenu.add_radio_check_item("0%")
-	window_transparency_submenu.set_item_checked(10, true)
-	window_transparency_submenu.hide_on_checkable_item_selection = false
-
 	panel_layout_submenu.set_name("panel_layout_submenu")
 	panel_layout_submenu.add_radio_check_item("Auto", PanelLayout.AUTO)
 	panel_layout_submenu.add_radio_check_item("Widescreen", PanelLayout.WIDESCREEN)

src/Main.gd

@@ -6,6 +6,7 @@ var is_quitting_on_save := false
 
 var tallscreen_is_active = false
 
+var alternate_transparent_background := ColorRect.new()
 onready var ui := $MenuAndUI/UI
 onready var tools_and_canvas : HSplitContainer = $MenuAndUI/UI/ToolsAndCanvas
 
@@ -19,13 +20,10 @@ onready var tool_panel := $MenuAndUI/UI/ToolsAndCanvas/ToolPanel
 onready var scroll_container := $MenuAndUI/UI/RightPanel/MarginContainer/PreviewAndPalettes/ToolAndPaletteVSplit/ColorAndToolOptions/ScrollContainer
 
 
-# Called when the node enters the scene tree for the first time.
 func _ready() -> void:
-	var alternate_transparent_background := ColorRect.new()
 	add_child(alternate_transparent_background)
 	move_child(alternate_transparent_background,0)
 	alternate_transparent_background.visible = false
-	alternate_transparent_background.name = "AlternateTransparentBackground"
 	alternate_transparent_background.anchor_left = ANCHOR_BEGIN
 	alternate_transparent_background.anchor_top = ANCHOR_BEGIN
 	alternate_transparent_background.anchor_right = ANCHOR_END

src/Main.tscn

@@ -1,4 +1,4 @@
-[gd_scene load_steps=17 format=2]
+[gd_scene load_steps=18 format=2]
 
 [ext_resource path="res://assets/themes/dark/theme.tres" type="Theme" id=1]
 [ext_resource path="res://src/Main.gd" type="Script" id=2]
@@ -9,6 +9,7 @@
 [ext_resource path="res://src/UI/Dialogs/ImageEffects/ImageEffects.tscn" type="PackedScene" id=7]
 [ext_resource path="res://src/UI/Dialogs/SaveSpriteHTML5.tscn" type="PackedScene" id=8]
 [ext_resource path="res://src/UI/Timeline/FrameProperties.tscn" type="PackedScene" id=9]
+[ext_resource path="res://src/UI/Dialogs/WindowOpacityDialog.tscn" type="PackedScene" id=10]
 [ext_resource path="res://src/UI/Dialogs/SaveSprite.tscn" type="PackedScene" id=11]
 [ext_resource path="res://src/UI/Dialogs/OpenSprite.tscn" type="PackedScene" id=12]
 [ext_resource path="res://src/UI/Dialogs/SplashDialog.tscn" type="PackedScene" id=27]
@@ -112,6 +113,8 @@ dialog_autowrap = true
 
 [node name="FrameProperties" parent="Dialogs" instance=ExtResource( 9 )]
 
+[node name="WindowOpacityDialog" parent="Dialogs" instance=ExtResource( 10 )]
+
 [node name="LeftCursor" type="Sprite" parent="."]
 visible = false
 

src/Preferences/HandleThemes.gd

@@ -78,10 +78,10 @@ func change_theme(ID : int) -> void:
 	Global.control.theme.default_font = font
 	Global.default_clear_color = main_theme.get_stylebox("panel", "PanelContainer").bg_color
 	VisualServer.set_default_clear_color(Color(Global.default_clear_color))
-	if Global.control.get_node_or_null("AlternateTransparentBackground"): #also change color of AlternateTransparentBackground as well "if it exists"
+	if Global.control.alternate_transparent_background: # Also change color of alternate_transparent_background
 		var new_color = Global.default_clear_color
-		new_color.a = Global.control.get_node("AlternateTransparentBackground").color.a
+		new_color.a = Global.control.alternate_transparent_background.color.a
-		Global.control.get_node("AlternateTransparentBackground").color = new_color
+		Global.control.alternate_transparent_background.color = new_color
 
 	(Global.animation_timeline.get_stylebox("panel", "Panel") as StyleBoxFlat).bg_color = main_theme.get_stylebox("panel", "Panel").bg_color
 	var fake_vsplit_grabber : TextureRect = Global.animation_timeline.find_node("FakeVSplitContainerGrabber")

src/UI/Dialogs/WindowOpacityDialog.gd

@@ -0,0 +1,29 @@
+extends AcceptDialog
+
+
+onready var hslider : HSlider = $HBoxContainer2/HSlider
+onready var spinbox : SpinBox = $HBoxContainer2/SpinBox
+onready var alternate_transparent_background : ColorRect = Global.control.alternate_transparent_background
+
+
+func _on_WindowOpacityDialog_about_to_show() -> void:
+	hslider.editable = !OS.window_fullscreen
+	spinbox.editable = hslider.editable
+
+
+func _on_value_changed(value: float) -> void:
+	if OS.window_fullscreen:
+		value = 100.0
+	hslider.value = value
+	spinbox.value = value
+
+	value = value / 100.0
+	alternate_transparent_background.visible = value < 1.0
+
+	Global.default_clear_color.a = value
+	alternate_transparent_background.color = Global.default_clear_color
+	Global.transparent_checker.transparency(value)
+
+
+func _on_WindowOpacityDialog_popup_hide() -> void:
+	Global.dialog_open(false)

src/UI/Dialogs/WindowOpacityDialog.tscn

@@ -0,0 +1,42 @@
+[gd_scene load_steps=2 format=2]
+
+[ext_resource path="res://src/UI/Dialogs/WindowOpacityDialog.gd" type="Script" id=1]
+
+[node name="WindowOpacityDialog" type="AcceptDialog"]
+margin_right = 204.0
+margin_bottom = 68.0
+rect_min_size = Vector2( 240, 0 )
+window_title = "Window Opacity"
+resizable = true
+script = ExtResource( 1 )
+__meta__ = {
+"_edit_use_anchors_": false
+}
+
+[node name="HBoxContainer2" type="HBoxContainer" parent="."]
+margin_left = 8.0
+margin_top = 8.0
+margin_right = 232.0
+margin_bottom = 32.0
+__meta__ = {
+"_edit_use_anchors_": false
+}
+
+[node name="HSlider" type="HSlider" parent="HBoxContainer2"]
+margin_right = 146.0
+margin_bottom = 16.0
+mouse_default_cursor_shape = 2
+size_flags_horizontal = 3
+value = 100.0
+
+[node name="SpinBox" type="SpinBox" parent="HBoxContainer2"]
+margin_left = 150.0
+margin_right = 224.0
+margin_bottom = 24.0
+mouse_default_cursor_shape = 2
+value = 100.0
+
+[connection signal="about_to_show" from="." to="." method="_on_WindowOpacityDialog_about_to_show"]
+[connection signal="popup_hide" from="." to="." method="_on_WindowOpacityDialog_popup_hide"]
+[connection signal="value_changed" from="HBoxContainer2/HSlider" to="." method="_on_value_changed"]
+[connection signal="value_changed" from="HBoxContainer2/SpinBox" to="." method="_on_value_changed"]

src/UI/TopMenuContainer.gd

@@ -3,7 +3,7 @@ extends Panel
 
 enum FileMenuId {NEW, OPEN, OPEN_LAST_PROJECT, SAVE, SAVE_AS, EXPORT, EXPORT_AS, QUIT}
 enum EditMenuId {UNDO, REDO, COPY, CUT, PASTE, DELETE, NEW_BRUSH, PREFERENCES}
-enum ViewMenuId {TILE_MODE, WINDOW_TRANSPARENCY, PANEL_LAYOUT, MIRROR_VIEW, SHOW_GRID, SHOW_PIXEL_GRID, SHOW_RULERS, SHOW_GUIDES, SHOW_ANIMATION_TIMELINE, ZEN_MODE, FULLSCREEN_MODE}
+enum ViewMenuId {TILE_MODE, WINDOW_OPACITY, PANEL_LAYOUT, MIRROR_VIEW, SHOW_GRID, SHOW_PIXEL_GRID, SHOW_RULERS, SHOW_GUIDES, SHOW_ANIMATION_TIMELINE, ZEN_MODE, FULLSCREEN_MODE}
 enum ImageMenuId {SCALE_IMAGE, CENTRALIZE_IMAGE, CROP_IMAGE, RESIZE_CANVAS, FLIP, ROTATE, INVERT_COLORS, DESATURATION, OUTLINE, HSV, GRADIENT, SHADER}
 enum SelectMenuId {SELECT_ALL, CLEAR_SELECTION, INVERT}
 enum HelpMenuId {VIEW_SPLASH_SCREEN, ONLINE_DOCS, ISSUE_TRACKER, OPEN_LOGS_FOLDER, CHANGELOG, ABOUT_PIXELORAMA}
@@ -14,6 +14,7 @@ onready var view_menu_button : MenuButton = find_node("ViewMenu")
 onready var image_menu_button : MenuButton = find_node("ImageMenu")
 onready var select_menu_button : MenuButton = find_node("SelectMenu")
 onready var help_menu_button : MenuButton = find_node("HelpMenu")
+onready var window_opacity_dialog : AcceptDialog = Global.control.find_node("WindowOpacityDialog")
 
 var file_menu : PopupMenu
 var view_menu : PopupMenu
@@ -91,7 +92,7 @@ func setup_edit_menu() -> void:
 func setup_view_menu() -> void:
 	var view_menu_items := { # order as in ViewMenuId enum
 		"Tile Mode" : 0,
-		"Window Transparency" : 0,
+		"Window Opacity" : 0,
 		"Panel Layout" : 0,
 		"Mirror View" : InputMap.get_action_list("mirror_view")[0].get_scancode_with_modifiers(),
 		"Show Grid" : InputMap.get_action_list("show_grid")[0].get_scancode_with_modifiers(),
@@ -108,8 +109,8 @@ func setup_view_menu() -> void:
 	for item in view_menu_items.keys():
 		if item == "Tile Mode":
 			setup_tile_mode_submenu(item)
-		elif item == "Window Transparency":
+		elif item == "Window Opacity":
-			setup_window_transparency_submenu(item)
+			view_menu.add_item(item, i, view_menu_items[item])
 		elif item == "Panel Layout":
 			setup_panel_layout_submenu(item)
 		else:
@@ -120,8 +121,8 @@ func setup_view_menu() -> void:
 	view_menu.set_item_checked(ViewMenuId.SHOW_ANIMATION_TIMELINE, true)
 	view_menu.hide_on_checkable_item_selection = false
 	view_menu.connect("id_pressed", self, "view_menu_id_pressed")
-	if !ProjectSettings.get_setting("display/window/per_pixel_transparency/allowed"):
+	# Disable window opacity item if per pixel transparency is not allowed
-		view_menu.set_item_disabled(ViewMenuId.WINDOW_TRANSPARENCY, true)
+	view_menu.set_item_disabled(ViewMenuId.WINDOW_OPACITY, !ProjectSettings.get_setting("display/window/per_pixel_transparency/allowed"))
 
 
 func setup_tile_mode_submenu(item : String):
@@ -130,12 +131,6 @@ func setup_tile_mode_submenu(item : String):
 	view_menu.add_submenu_item(item, Global.tile_mode_submenu.get_name())
 
 
-func setup_window_transparency_submenu(item : String):
-	Global.window_transparency_submenu.connect("id_pressed", self, "window_transparency_submenu_id_pressed")
-	view_menu.add_child(Global.window_transparency_submenu)
-	view_menu.add_submenu_item(item, Global.window_transparency_submenu.get_name())
-
-
 func setup_panel_layout_submenu(item : String):
 	Global.panel_layout_submenu.connect("id_pressed", self, "panel_layout_submenu_id_pressed")
 	view_menu.add_child(Global.panel_layout_submenu)
@@ -310,6 +305,9 @@ func edit_menu_id_pressed(id : int) -> void:
 
 func view_menu_id_pressed(id : int) -> void:
 	match id:
+		ViewMenuId.WINDOW_OPACITY:
+			window_opacity_dialog.popup_centered()
+			Global.dialog_open(true)
 		ViewMenuId.MIRROR_VIEW:
 			toggle_mirror_view()
 		ViewMenuId.SHOW_GRID:
@@ -339,17 +337,6 @@ func tile_mode_submenu_id_pressed(id : int) -> void:
 	Global.canvas.grid.update()
 
 
-func window_transparency_submenu_id_pressed(id : float) -> void:
-	if OS.window_fullscreen:
-		for i in 11:
-			Global.window_transparency_submenu.set_item_checked(i, i == 10)
-		window_transparency(1)
-	else:
-		for i in 11:
-			Global.window_transparency_submenu.set_item_checked(i, i == id)
-		window_transparency(id/10)
-
-
 func panel_layout_submenu_id_pressed(id : int) -> void:
 	Global.panel_layout = id
 	for i in Global.PanelLayout.values():
@@ -357,18 +344,6 @@ func panel_layout_submenu_id_pressed(id : int) -> void:
 	get_tree().get_root().get_node("Control").handle_resize()
 
 
-func window_transparency(value :float) -> void:
-	if value == 1:
-		get_node("../../AlternateTransparentBackground").visible = false
-	else:
-		get_node("../../AlternateTransparentBackground").visible = true
-	var checker :ColorRect = Global.transparent_checker
-	var color :Color = Global.default_clear_color
-	color.a = value
-	get_node("../../AlternateTransparentBackground").color = color
-	checker.transparency(value)
-
-
 func toggle_mirror_view() -> void:
 	Global.mirror_view = !Global.mirror_view
 	Global.canvas.selection.marching_ants_outline.scale.x = -Global.canvas.selection.marching_ants_outline.scale.x
@@ -434,9 +409,8 @@ func toggle_zen_mode() -> void:
 func toggle_fullscreen() -> void:
 	OS.window_fullscreen = !OS.window_fullscreen
 	view_menu.set_item_checked(ViewMenuId.FULLSCREEN_MODE, OS.window_fullscreen)
-	# if window is fullscreen then reset transparency
+	if OS.window_fullscreen: # If window is fullscreen then reset transparency
-	if OS.window_fullscreen:
+		window_opacity_dialog._on_value_changed(1.0)
-		window_transparency_submenu_id_pressed(10)
 
 
 func image_menu_id_pressed(id : int) -> void:

src/UI/TransparentChecker.gd

@@ -30,7 +30,7 @@ func fit_rect(rect : Rect2) -> void:
 
 func transparency(value :float) -> void:
 	# first make viewport transparent then background and then viewport
-	if value == 1:
+	if value == 1.0:
 		get_parent().transparent_bg = false
 		get_tree().get_root().set_transparent_background(false)
 	else: