Add arrow buttons to the value slider

Their visibility is toggleable. They also currently do not support echo events, since for some reason Godot only supports them for InputEventKey(s). I suppose this feature could be replicated with a Timer. Once this is done, we can replace all SpinBox nodes.

assets/graphics/misc/value_arrow.svg

@@ -0,0 +1 @@
+<svg height="12" viewBox="0 0 12 12" width="12" xmlns="http://www.w3.org/2000/svg"><path d="m10 1043.4c-.26378.01-.5144.1165-.69726.3067l-3.293 3.2929-3.293-3.2929c-.18826-.1936-.44679-.3028-.7168-.3028-.89742.0002-1.3404 1.0909-.69727 1.7168l4 4c.39053.3904 1.0235.3904 1.4141 0l4-4c.65734-.6321.19491-1.7422-.7168-1.7207z" fill="#fff" fill-opacity=".78431" transform="translate(0 -1040.4)"/></svg>

assets/graphics/misc/value_arrow.svg.import

@@ -0,0 +1,35 @@
+[remap]
+
+importer="texture"
+type="StreamTexture"
+path="res://.import/value_arrow.svg-fba0386b90d817941c289525e36a6d5f.stex"
+metadata={
+"vram_texture": false
+}
+
+[deps]
+
+source_file="res://assets/graphics/misc/value_arrow.svg"
+dest_files=[ "res://.import/value_arrow.svg-fba0386b90d817941c289525e36a6d5f.stex" ]
+
+[params]
+
+compress/mode=0
+compress/lossy_quality=0.7
+compress/hdr_mode=0
+compress/bptc_ldr=0
+compress/normal_map=0
+flags/repeat=0
+flags/filter=false
+flags/mipmaps=false
+flags/anisotropic=false
+flags/srgb=2
+process/fix_alpha_border=true
+process/premult_alpha=false
+process/HDR_as_SRGB=false
+process/invert_color=false
+process/normal_map_invert_y=false
+stream=false
+size_limit=0
+detect_3d=false
+svg/scale=1.0

assets/graphics/misc/value_arrow_hover.svg

@@ -0,0 +1 @@
+<svg height="12" viewBox="0 0 12 12" width="12" xmlns="http://www.w3.org/2000/svg"><path d="m10 1043.4c-.26378.01-.5144.1165-.69726.3067l-3.293 3.2929-3.293-3.2929c-.18826-.1936-.44679-.3028-.7168-.3028-.89742.0002-1.3404 1.0909-.69727 1.7168l4 4c.39053.3904 1.0235.3904 1.4141 0l4-4c.65734-.6321.19491-1.7422-.7168-1.7207z" fill="#fff" fill-opacity=".98431" transform="translate(0 -1040.4)"/></svg>

assets/graphics/misc/value_arrow_hover.svg.import

@@ -0,0 +1,35 @@
+[remap]
+
+importer="texture"
+type="StreamTexture"
+path="res://.import/value_arrow_hover.svg-32e8ddfab9c4382171107e88c513d4f4.stex"
+metadata={
+"vram_texture": false
+}
+
+[deps]
+
+source_file="res://assets/graphics/misc/value_arrow_hover.svg"
+dest_files=[ "res://.import/value_arrow_hover.svg-32e8ddfab9c4382171107e88c513d4f4.stex" ]
+
+[params]
+
+compress/mode=0
+compress/lossy_quality=0.7
+compress/hdr_mode=0
+compress/bptc_ldr=0
+compress/normal_map=0
+flags/repeat=0
+flags/filter=false
+flags/mipmaps=false
+flags/anisotropic=false
+flags/srgb=2
+process/fix_alpha_border=true
+process/premult_alpha=false
+process/HDR_as_SRGB=false
+process/invert_color=false
+process/normal_map_invert_y=false
+stream=false
+size_limit=0
+detect_3d=false
+svg/scale=1.0

assets/graphics/misc/value_arrow_press.svg

@@ -0,0 +1 @@
+<svg height="12" viewBox="0 0 12 12" width="12" xmlns="http://www.w3.org/2000/svg"><path d="m10 1043.4c-.26378.01-.5144.1165-.69726.3067l-3.293 3.2929-3.293-3.2929c-.18826-.1936-.44679-.3028-.7168-.3028-.89742.0002-1.3404 1.0909-.69727 1.7168l4 4c.39053.3904 1.0235.3904 1.4141 0l4-4c.65734-.6321.19491-1.7422-.7168-1.7207z" fill="#f0f0f0" fill-opacity=".78431" transform="translate(0 -1040.4)"/></svg>

assets/graphics/misc/value_arrow_press.svg.import

@@ -0,0 +1,35 @@
+[remap]
+
+importer="texture"
+type="StreamTexture"
+path="res://.import/value_arrow_press.svg-8069ba67bd2ee03d7abc3777706035a9.stex"
+metadata={
+"vram_texture": false
+}
+
+[deps]
+
+source_file="res://assets/graphics/misc/value_arrow_press.svg"
+dest_files=[ "res://.import/value_arrow_press.svg-8069ba67bd2ee03d7abc3777706035a9.stex" ]
+
+[params]
+
+compress/mode=0
+compress/lossy_quality=0.7
+compress/hdr_mode=0
+compress/bptc_ldr=0
+compress/normal_map=0
+flags/repeat=0
+flags/filter=false
+flags/mipmaps=false
+flags/anisotropic=false
+flags/srgb=2
+process/fix_alpha_border=true
+process/premult_alpha=false
+process/HDR_as_SRGB=false
+process/invert_color=false
+process/normal_map_invert_y=false
+stream=false
+size_limit=0
+detect_3d=false
+svg/scale=1.0

src/UI/Nodes/ValueSlider.gd

@@ -19,6 +19,7 @@ export var snap_by_default := false
 # If show_progress is true it will show the colored progress bar, good for values with a specific
 # range. False will hide it, which is good for values that can be any number.
 export var show_progress := true
+export var show_arrows := true setget _show_arrows_changed
 
 var state := NORMAL
 onready var line_edit: LineEdit = $LineEdit
@@ -108,6 +109,12 @@ func _suffix_changed(v: String) -> void:
 	_reset_display()
 
 
+func _show_arrows_changed(v: bool) -> void:
+	show_arrows = v
+	$"%ValueUp".visible = v
+	$"%ValueDown".visible = v
+
+
 func _on_LineEdit_gui_input(event: InputEvent) -> void:
 	if state == TYPING:
 		if event is InputEventKey and event.scancode == KEY_ESCAPE:
@@ -155,3 +162,17 @@ func _reset_display() -> void:
 	else:
 		tint_progress = Color.transparent
 	line_edit.text = str(tr(prefix), " ", value, " ", tr(suffix)).strip_edges()
+	$"%ValueUp".modulate = Global.modulate_icon_color
+	$"%ValueDown".modulate = Global.modulate_icon_color
+
+
+func _on_ValueUp_pressed() -> void:
+	if not editable:
+		return
+	value += snap_step if Input.is_action_pressed("ctrl") else step
+
+
+func _on_ValueDown_pressed() -> void:
+	if not editable:
+		return
+	value -= snap_step if Input.is_action_pressed("ctrl") else step

src/UI/Nodes/ValueSlider.tscn

@@ -1,13 +1,16 @@
-[gd_scene load_steps=4 format=2]
+[gd_scene load_steps=7 format=2]
 
 [ext_resource path="res://src/UI/Nodes/ValueSlider.gd" type="Script" id=1]
 [ext_resource path="res://assets/graphics/misc/value_slider.png" type="Texture" id=2]
+[ext_resource path="res://assets/graphics/misc/value_arrow.svg" type="Texture" id=3]
+[ext_resource path="res://assets/graphics/misc/value_arrow_hover.svg" type="Texture" id=4]
+[ext_resource path="res://assets/graphics/misc/value_arrow_press.svg" type="Texture" id=5]
 
 [sub_resource type="StyleBoxEmpty" id=1]
 
 [node name="ValueSlider" type="TextureProgress"]
-margin_right = 6.0
-margin_bottom = 6.0
+margin_right = 24.0
+margin_bottom = 24.0
 rect_min_size = Vector2( 32, 24 )
 mouse_filter = 0
 mouse_default_cursor_shape = 2
@@ -35,7 +38,41 @@ align = 1
 editable = false
 selecting_enabled = false
 
+[node name="ValueUp" type="TextureButton" parent="." groups=["UIButtons"]]
+unique_name_in_owner = true
+anchor_left = 1.0
+anchor_right = 1.0
+margin_left = -15.0
+margin_top = 12.0
+margin_right = -3.0
+margin_bottom = 24.0
+rect_scale = Vector2( 1, -1 )
+mouse_default_cursor_shape = 2
+size_flags_vertical = 3
+texture_normal = ExtResource( 3 )
+texture_pressed = ExtResource( 5 )
+texture_hover = ExtResource( 4 )
+stretch_mode = 3
+
+[node name="ValueDown" type="TextureButton" parent="." groups=["UIButtons"]]
+unique_name_in_owner = true
+anchor_left = 1.0
+anchor_top = 1.0
+anchor_right = 1.0
+anchor_bottom = 1.0
+margin_left = -15.0
+margin_top = -12.0
+margin_right = -3.0
+mouse_default_cursor_shape = 2
+size_flags_vertical = 3
+texture_normal = ExtResource( 3 )
+texture_pressed = ExtResource( 5 )
+texture_hover = ExtResource( 4 )
+stretch_mode = 3
+
 [connection signal="value_changed" from="." to="." method="_on_value_changed"]
 [connection signal="focus_exited" from="LineEdit" to="." method="_confirm_text"]
 [connection signal="gui_input" from="LineEdit" to="." method="_on_LineEdit_gui_input"]
 [connection signal="text_entered" from="LineEdit" to="." method="_on_LineEdit_text_entered"]
+[connection signal="pressed" from="ValueUp" to="." method="_on_ValueUp_pressed"]
+[connection signal="pressed" from="ValueDown" to="." method="_on_ValueDown_pressed"]