From eae0ec377a80bcea490ebed2f223a9eb18b0467b Mon Sep 17 00:00:00 2001 From: Nitwel Date: Wed, 24 Apr 2024 14:00:08 +0200 Subject: [PATCH] finish pagination component --- app/content/ui/components/button/button.tscn | 21 ++------ .../flex_container/flex_container.gd | 6 --- .../label_container/label_container.gd | 25 ++++++++++ .../label_container/label_container.tscn | 15 ++++++ .../ui/components/pagination/button.material | 3 ++ .../pagination/button_active.material | 3 ++ .../ui/components/pagination/pagination.gd | 48 ++++++++++++------- .../ui/components/pagination/pagination.tscn | 7 ++- app/lib/utils/font_tools.gd | 2 +- 9 files changed, 86 insertions(+), 44 deletions(-) create mode 100644 app/content/ui/components/label_container/label_container.gd create mode 100644 app/content/ui/components/label_container/label_container.tscn create mode 100644 app/content/ui/components/pagination/button.material create mode 100644 app/content/ui/components/pagination/button_active.material diff --git a/app/content/ui/components/button/button.tscn b/app/content/ui/components/button/button.tscn index f2d4799..84b26d7 100644 --- a/app/content/ui/components/button/button.tscn +++ b/app/content/ui/components/button/button.tscn @@ -1,22 +1,7 @@ -[gd_scene load_steps=7 format=3 uid="uid://bsjqdvkt0u87c"] +[gd_scene load_steps=6 format=3 uid="uid://bsjqdvkt0u87c"] [ext_resource type="Script" path="res://content/ui/components/button/button.gd" id="1_74x7g"] -[ext_resource type="Shader" path="res://assets/materials/glass.gdshader" id="4_2xlpt"] - -[sub_resource type="ShaderMaterial" id="ShaderMaterial_oqan0"] -resource_local_to_scene = true -render_priority = -1 -shader = ExtResource("4_2xlpt") -shader_parameter/color = Color(1, 1, 1, 0.3) -shader_parameter/border_color = Color(1, 1, 1, 1) -shader_parameter/edge_color = Color(0, 0, 0, 1) -shader_parameter/size = Vector2(1, 1) -shader_parameter/border_size = 0.01 -shader_parameter/border_fade_in = 0.05 -shader_parameter/border_fade_out = 0.0 -shader_parameter/corner_radius = 0.2 -shader_parameter/roughness = 0.3 -shader_parameter/grain_amount = 0.02 +[ext_resource type="Material" uid="uid://iercgso83b0a" path="res://content/ui/components/pagination/button.material" id="2_ebyeq"] [sub_resource type="QuadMesh" id="QuadMesh_bt05p"] resource_local_to_scene = true @@ -42,7 +27,7 @@ collision_mask = 0 [node name="MeshInstance3D" type="MeshInstance3D" parent="Body"] transform = Transform3D(1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0.005) -material_override = SubResource("ShaderMaterial_oqan0") +material_override = ExtResource("2_ebyeq") mesh = SubResource("QuadMesh_bt05p") skeleton = NodePath("../..") diff --git a/app/content/ui/components/flex_container/flex_container.gd b/app/content/ui/components/flex_container/flex_container.gd index 45cb610..0f2e2e1 100644 --- a/app/content/ui/components/flex_container/flex_container.gd +++ b/app/content/ui/components/flex_container/flex_container.gd @@ -40,7 +40,6 @@ func _ready(): ) func _update(): - print("update") var width = size.y if vertical else size.x var child_size := Vector2(0, 0) var child_count = 0 @@ -66,9 +65,6 @@ func _update(): child_scale = child_scale.clamp(Vector2(0.001, 0.001), Vector2(1, 1)) - print(child_size) - print(child_scale) - var offset = 0.0 match justification: @@ -98,8 +94,6 @@ func _update(): child.position = Vector3(offset, 0, 0) offset += child.size.x * child_scale.x - print(offset) - match justification: Justification.START, Justification.CENTER, Justification.END: offset += gap diff --git a/app/content/ui/components/label_container/label_container.gd b/app/content/ui/components/label_container/label_container.gd new file mode 100644 index 0000000..663fa17 --- /dev/null +++ b/app/content/ui/components/label_container/label_container.gd @@ -0,0 +1,25 @@ +@tool +extends Container3D +class_name LabelContainer3D + +const FontTools = preload ("res://lib/utils/font_tools.gd") + +@onready var label: Label3D = $Label3D + +@export var text: String = "Example": + set(value): + text = value + + if !is_inside_tree(): return + + _update_text() + +func _ready(): + print("label %s enter tree" % text) + _update_text() + +func _update_text(): + label.text = text + var text_size = FontTools.get_font_size(label) + size = Vector3(text_size.x, text_size.y, 0.1) + print("label %s size %s" % [text, size]) \ No newline at end of file diff --git a/app/content/ui/components/label_container/label_container.tscn b/app/content/ui/components/label_container/label_container.tscn new file mode 100644 index 0000000..3b4b34b --- /dev/null +++ b/app/content/ui/components/label_container/label_container.tscn @@ -0,0 +1,15 @@ +[gd_scene load_steps=3 format=3 uid="uid://blkfqa3ttk0d2"] + +[ext_resource type="Script" path="res://content/ui/components/label_container/label_container.gd" id="1_hqtij"] +[ext_resource type="FontVariation" uid="uid://d2ofyimg5s65q" path="res://assets/fonts/ui_font_500.tres" id="2_6y3jl"] + +[node name="LabelContainer" type="Node3D"] +script = ExtResource("1_hqtij") +size = Vector3(0.08, 0.023, 0.1) + +[node name="Label3D" type="Label3D" parent="."] +pixel_size = 0.001 +text = "Example" +font = ExtResource("2_6y3jl") +font_size = 18 +outline_size = 0 diff --git a/app/content/ui/components/pagination/button.material b/app/content/ui/components/pagination/button.material new file mode 100644 index 0000000..73b7619 --- /dev/null +++ b/app/content/ui/components/pagination/button.material @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:6a4d9b6aba4df0f124a285b82d6adc8b0682751d95ee946da6478ebcc3cfbd5f +size 449 diff --git a/app/content/ui/components/pagination/button_active.material b/app/content/ui/components/pagination/button_active.material new file mode 100644 index 0000000..502b5cf --- /dev/null +++ b/app/content/ui/components/pagination/button_active.material @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:8221dc259207ca47a110c885bf1e5535f3bef64dd7ddbb0aaac91de95afd2159 +size 496 diff --git a/app/content/ui/components/pagination/pagination.gd b/app/content/ui/components/pagination/pagination.gd index 514fc22..7bd8205 100644 --- a/app/content/ui/components/pagination/pagination.gd +++ b/app/content/ui/components/pagination/pagination.gd @@ -2,6 +2,10 @@ extends FlexContainer3D const ButtonScene = preload ("res://content/ui/components/button/button.tscn") +const LabelScene = preload ("res://content/ui/components/label_container/label_container.tscn") + +const ButtonMaterial = preload ("button.material") +const ButtonActiveMaterial = preload ("button_active.material") @onready var prev_button = $Prev @onready var next_button = $Next @@ -9,48 +13,52 @@ const ButtonScene = preload ("res://content/ui/components/button/button.tscn") @export var page: int = 0: set(value): page = clamp(value, 0, pages - 1) - - if !is_inside_tree(): return - _update() @export var pages: int = 5: set(value): pages = max(1, value) - - if !is_inside_tree(): return - _update() @export var visible_pages: int = 5: set(value): - visible_pages = max(1, value) - - if !is_inside_tree(): return - + visible_pages = max(5, value) _update() func _ready(): _update() func _update(): + if !is_inside_tree(): return + for child in get_children(): if child != prev_button&&child != next_button: - print("queue_free", child) child.queue_free() await child.tree_exited var display_pages = min(pages, visible_pages) - var start_dots = pages > visible_pages&&page > visible_pages - 3 - var end_dots = pages > visible_pages&&page < pages - visible_pages + 2 var center_pos = floor(display_pages / 2) + var start_dots = pages > visible_pages&&page > visible_pages - center_pos - 1 + var end_dots = pages > visible_pages&&page < pages - visible_pages + floor((display_pages - 1) / 2) + + var at_start = page == 0 + prev_button.disabled = at_start + prev_button.mesh.visible = !at_start + + var at_end = page == pages - 1 + next_button.disabled = at_end + next_button.mesh.visible = !at_end prev_button.size = Vector3(size.y, size.y, size.z) for i in range(display_pages): if (start_dots&&i == 1)||(end_dots&&i == display_pages - 2): - var dots = Label3D.new() + var container = Container3D.new() + container.size = Vector3(size.y, size.y, size.z) + add_child(container) + move_child(container, -2) + + var dots = LabelScene.instantiate() dots.text = "..." - add_child(dots) - move_child(dots, -2) + container.add_child(dots) continue var button = ButtonScene.instantiate() @@ -60,8 +68,12 @@ func _update(): button.label = "1" elif i == display_pages - 1: button.label = str(pages) + elif pages <= visible_pages: + button.label = str(i + 1) + elif visible_pages % 2 == 1: + button.label = str(clamp(page, center_pos, pages - 1 - center_pos) - center_pos + i + 1) else: - button.label = str(clamp(page - center_pos + i + 1, 2, pages - 2)) + button.label = str(clamp(page + 1, 3, pages - 3) - center_pos + i + 1) button.on_button_up.connect(func(_arg): page=int(button.label) - 1 @@ -70,5 +82,7 @@ func _update(): add_child(button) move_child(button, -2) + button.mesh.material_override = ButtonActiveMaterial if (int(button.label) - 1) == page else ButtonMaterial + super._update() \ No newline at end of file diff --git a/app/content/ui/components/pagination/pagination.tscn b/app/content/ui/components/pagination/pagination.tscn index a8a4d9b..0f84f79 100644 --- a/app/content/ui/components/pagination/pagination.tscn +++ b/app/content/ui/components/pagination/pagination.tscn @@ -5,14 +5,17 @@ [node name="Pagination" type="Node3D"] script = ExtResource("1_3ylfj") +page = 4 +pages = 9 +visible_pages = 6 gap = 0.01 -size = Vector3(10, 0.05, 0.01) +size = Vector3(9.92, 0.05, 0.01) [node name="Prev" parent="." instance=ExtResource("2_lsc4w")] label = "navigate_before" icon = true [node name="Next" parent="." instance=ExtResource("2_lsc4w")] -transform = Transform3D(1, 0, 0, 0, 1, 0, 0, 0, 1, 0.36, 0, 0) +transform = Transform3D(1, 0, 0, 0, 1, 0, 0, 0, 1, 0.42, 0, 0) label = "navigate_next" icon = true diff --git a/app/lib/utils/font_tools.gd b/app/lib/utils/font_tools.gd index b7adc91..ff311bb 100644 --- a/app/lib/utils/font_tools.gd +++ b/app/lib/utils/font_tools.gd @@ -1,5 +1,5 @@ ## Returns the size of a Label3D in standard units -static func get_font_size(label: Label3D, chars=null): +static func get_font_size(label: Label3D, chars=null) -> Vector2: var font = label.font if font == null: