From 006e4ba33850960d91ecea06042bfbe01770e3ec Mon Sep 17 00:00:00 2001
From: Sebastian Morr <sebastian@morr.cc>
Date: Fri, 23 Oct 2020 13:07:16 +0200
Subject: [PATCH] Start building a more graphical file browser

---
 file_browser.gd        | 23 +++++++--------
 file_browser.tscn      | 66 ++++++++++++++++++++++++++++++++++++++----
 file_browser_item.gd   | 19 ++++++++++++
 file_browser_item.tscn | 52 +++++++++++++++++++++++++++++++++
 helpers.gd             |  6 ++++
 main.tscn              |  2 +-
 repository.tscn        |  6 ++--
 styles/theme.tres      | 36 +++++++++++++++--------
 8 files changed, 176 insertions(+), 34 deletions(-)
 create mode 100644 file_browser_item.gd
 create mode 100644 file_browser_item.tscn

diff --git a/file_browser.gd b/file_browser.gd
index dd3e1f2..c2cf73b 100644
--- a/file_browser.gd
+++ b/file_browser.gd
@@ -3,13 +3,11 @@ extends Control
 var shell
 var thread
 
-func _ready():
-	pass
+onready var grid = $Panel/Margin/Rows/Scroll/Grid
 
 func update():
-	$FileTree.clear()
-	var root_item = $FileTree.create_item()
-	root_item.set_text(0, "FILES")
+	for item in grid.get_children():
+		item.queue_free()
 	
 	var file_string = shell.run("find . -type f")
 	var files = file_string.split("\n")
@@ -21,17 +19,16 @@ func update():
 		file_path = file_path.substr(2)
 		if file_path.substr(0, 5) == ".git/":
 			continue
-		var child = $FileTree.create_item(root_item)
-		child.set_text(0, file_path)
+		var item = preload("res://file_browser_item.tscn").instance()
+		item.label = file_path
+		item.connect("clicked", self, "item_clicked")
+		grid.add_child(item)
 		#child.set_editable(0, true)
 
-
-func _on_item_selected():
-	var item = $FileTree.get_selected()
-	var file_path = item.get_text(0)
-	
+func item_clicked(item):
+	var file_path = item.label
 	shell.run("'%s'/fake-editor-noblock '%s'" % [game.tmp_prefix_inside, file_path])
-	
+
 func very_best_sort(a,b):
 	# We're looking at the third character because all entries have the form
 	# "./.git/bla".
diff --git a/file_browser.tscn b/file_browser.tscn
index 9994d11..89f6d07 100644
--- a/file_browser.tscn
+++ b/file_browser.tscn
@@ -1,21 +1,77 @@
-[gd_scene load_steps=2 format=2]
+[gd_scene load_steps=3 format=2]
 
 [ext_resource path="res://file_browser.gd" type="Script" id=1]
+[ext_resource path="res://styles/theme.tres" type="Theme" id=3]
 
 [node name="FileBrowser" type="Control"]
 anchor_right = 1.0
 anchor_bottom = 1.0
+theme = ExtResource( 3 )
 script = ExtResource( 1 )
 __meta__ = {
 "_edit_use_anchors_": false
 }
 
-[node name="FileTree" type="Tree" parent="."]
+[node name="Panel" type="Panel" parent="."]
 anchor_right = 1.0
 anchor_bottom = 1.0
-allow_reselect = true
-hide_root = true
 __meta__ = {
 "_edit_use_anchors_": false
 }
-[connection signal="item_selected" from="FileTree" to="." method="_on_item_selected"]
+
+[node name="Margin" type="MarginContainer" parent="Panel"]
+anchor_right = 1.0
+anchor_bottom = 1.0
+custom_constants/margin_right = 8
+custom_constants/margin_top = 8
+custom_constants/margin_left = 8
+custom_constants/margin_bottom = 8
+__meta__ = {
+"_edit_use_anchors_": false
+}
+
+[node name="Rows" type="VBoxContainer" parent="Panel/Margin"]
+margin_left = 8.0
+margin_top = 8.0
+margin_right = 1912.0
+margin_bottom = 1072.0
+custom_constants/separation = 32
+__meta__ = {
+"_edit_use_anchors_": false
+}
+
+[node name="Breadcrumbs" type="HBoxContainer" parent="Panel/Margin/Rows"]
+visible = false
+margin_right = 1856.0
+margin_bottom = 50.0
+rect_min_size = Vector2( 0, 50 )
+custom_constants/separation = 8
+
+[node name="Button" type="Button" parent="Panel/Margin/Rows/Breadcrumbs"]
+margin_right = 55.0
+margin_bottom = 50.0
+text = "root"
+
+[node name="Button2" type="Button" parent="Panel/Margin/Rows/Breadcrumbs"]
+margin_left = 63.0
+margin_right = 104.0
+margin_bottom = 50.0
+text = "dir"
+
+[node name="Scroll" type="ScrollContainer" parent="Panel/Margin/Rows"]
+margin_right = 1904.0
+margin_bottom = 1064.0
+size_flags_horizontal = 3
+size_flags_vertical = 3
+
+[node name="Grid" type="GridContainer" parent="Panel/Margin/Rows/Scroll"]
+margin_right = 1904.0
+margin_bottom = 1064.0
+size_flags_horizontal = 3
+size_flags_vertical = 3
+custom_constants/vseparation = 16
+custom_constants/hseparation = 16
+columns = 4
+__meta__ = {
+"_edit_use_anchors_": false
+}
diff --git a/file_browser_item.gd b/file_browser_item.gd
new file mode 100644
index 0000000..9330e68
--- /dev/null
+++ b/file_browser_item.gd
@@ -0,0 +1,19 @@
+extends Control
+
+signal clicked(what)
+
+export var label: String setget _set_label
+
+onready var label_node = $VBoxContainer/Label
+
+func _ready():
+	_set_label(label)
+
+func _set_label(new_label):
+	label = new_label
+	if label_node:
+		label_node.text = helpers.abbreviate(new_label, 30)
+
+func _gui_input(event):
+	if event is InputEventMouseButton and event.is_pressed() and event.button_index == BUTTON_LEFT:
+		emit_signal("clicked", self)
diff --git a/file_browser_item.tscn b/file_browser_item.tscn
new file mode 100644
index 0000000..d082c09
--- /dev/null
+++ b/file_browser_item.tscn
@@ -0,0 +1,52 @@
+[gd_scene load_steps=3 format=2]
+
+[ext_resource path="res://fonts/default.tres" type="DynamicFont" id=1]
+[ext_resource path="res://file_browser_item.gd" type="Script" id=2]
+
+[node name="Control" type="Control"]
+anchor_right = 0.052
+anchor_bottom = 0.093
+margin_right = 100.16
+margin_bottom = -0.439995
+rect_min_size = Vector2( 200, 100 )
+script = ExtResource( 2 )
+__meta__ = {
+"_edit_use_anchors_": false
+}
+
+[node name="VBoxContainer" type="VBoxContainer" parent="."]
+anchor_right = 1.0
+anchor_bottom = 1.0
+mouse_filter = 2
+__meta__ = {
+"_edit_use_anchors_": false
+}
+
+[node name="Control" type="Control" parent="VBoxContainer"]
+margin_right = 200.0
+margin_bottom = 71.0
+mouse_filter = 2
+size_flags_vertical = 3
+
+[node name="ColorRect" type="ColorRect" parent="VBoxContainer/Control"]
+anchor_left = 0.5
+anchor_top = 0.5
+anchor_right = 0.5
+anchor_bottom = 0.5
+margin_left = -25.0
+margin_top = -25.0
+margin_right = 25.0
+margin_bottom = 25.0
+mouse_filter = 2
+color = Color( 0.203922, 0.721569, 0.501961, 1 )
+__meta__ = {
+"_edit_use_anchors_": false
+}
+
+[node name="Label" type="Label" parent="VBoxContainer"]
+margin_top = 75.0
+margin_right = 200.0
+margin_bottom = 100.0
+custom_fonts/font = ExtResource( 1 )
+text = "filename"
+align = 1
diff --git a/helpers.gd b/helpers.gd
index df2c83e..a0f339f 100644
--- a/helpers.gd
+++ b/helpers.gd
@@ -126,3 +126,9 @@ func parse(file):
 		result[key] = result[key].strip_edges()
 	
 	return result
+
+func abbreviate(text, max_length):
+	if text.length() > max_length-3:
+		text = text.substr(0, max_length-3) + "..."
+	
+	return text
diff --git a/main.tscn b/main.tscn
index 5572209..c70168a 100644
--- a/main.tscn
+++ b/main.tscn
@@ -71,7 +71,7 @@ margin_bottom = 784.0
 mouse_filter = 2
 size_flags_horizontal = 3
 size_flags_stretch_ratio = 1.5
-custom_constants/separation = 0
+custom_constants/separation = 8
 __meta__ = {
 "_edit_use_anchors_": false
 }
diff --git a/repository.tscn b/repository.tscn
index c8e4391..5c9261d 100644
--- a/repository.tscn
+++ b/repository.tscn
@@ -25,7 +25,7 @@ __meta__ = {
 
 [node name="RepoVis" type="Control" parent="Rows"]
 margin_right = 1920.0
-margin_bottom = 925.0
+margin_bottom = 901.0
 mouse_filter = 2
 size_flags_vertical = 3
 __meta__ = {
@@ -112,11 +112,11 @@ __meta__ = {
 [node name="FileBrowser" parent="Rows" instance=ExtResource( 4 )]
 anchor_right = 0.0
 anchor_bottom = 0.0
-margin_top = 800.0
+margin_top = 913.0
 margin_right = 1920.0
 margin_bottom = 1080.0
 size_flags_vertical = 3
-size_flags_stretch_ratio = 0.16
+size_flags_stretch_ratio = 0.19
 [connection signal="mouse_entered" from="." to="." method="_on_mouse_entered"]
 [connection signal="mouse_exited" from="." to="." method="_on_mouse_exited"]
 [connection signal="pressed" from="Rows/RepoVis/Button" to="." method="update_everything"]
diff --git a/styles/theme.tres b/styles/theme.tres
index 2b36eb0..b404e90 100644
--- a/styles/theme.tres
+++ b/styles/theme.tres
@@ -1,4 +1,4 @@
-[gd_resource type="Theme" load_steps=23 format=2]
+[gd_resource type="Theme" load_steps=24 format=2]
 
 [ext_resource path="res://fonts/default.tres" type="DynamicFont" id=1]
 [ext_resource path="res://fonts/monospace.tres" type="DynamicFont" id=2]
@@ -102,13 +102,24 @@ corner_radius_bottom_right = 5
 corner_radius_bottom_left = 5
 
 [sub_resource type="StyleBoxFlat" id=15]
+content_margin_left = 8.0
+content_margin_right = 8.0
+content_margin_top = 8.0
+content_margin_bottom = 8.0
+bg_color = Color( 0.231373, 0.298039, 0.388235, 1 )
+corner_radius_top_left = 8
+corner_radius_top_right = 8
+corner_radius_bottom_right = 8
+corner_radius_bottom_left = 8
+
+[sub_resource type="StyleBoxFlat" id=16]
 bg_color = Color( 0.294118, 0.294118, 0.294118, 1 )
 corner_radius_top_left = 5
 corner_radius_top_right = 5
 corner_radius_bottom_right = 5
 corner_radius_bottom_left = 5
 
-[sub_resource type="StyleBoxFlat" id=16]
+[sub_resource type="StyleBoxFlat" id=17]
 content_margin_left = 10.0
 content_margin_right = 10.0
 content_margin_top = 10.0
@@ -119,7 +130,7 @@ corner_radius_top_right = 5
 corner_radius_bottom_right = 5
 corner_radius_bottom_left = 5
 
-[sub_resource type="StyleBoxFlat" id=17]
+[sub_resource type="StyleBoxFlat" id=18]
 content_margin_left = 5.0
 content_margin_right = 5.0
 content_margin_top = 10.0
@@ -135,7 +146,7 @@ corner_radius_top_right = 10
 corner_radius_bottom_right = 10
 corner_radius_bottom_left = 10
 
-[sub_resource type="StyleBoxFlat" id=18]
+[sub_resource type="StyleBoxFlat" id=19]
 content_margin_left = 5.0
 content_margin_right = 5.0
 content_margin_top = 5.0
@@ -146,7 +157,7 @@ corner_radius_top_right = 10
 corner_radius_bottom_right = 10
 corner_radius_bottom_left = 10
 
-[sub_resource type="StyleBoxFlat" id=19]
+[sub_resource type="StyleBoxFlat" id=20]
 content_margin_left = 5.0
 content_margin_right = 5.0
 content_margin_top = 5.0
@@ -157,7 +168,7 @@ corner_radius_top_right = 5
 corner_radius_bottom_right = 5
 corner_radius_bottom_left = 5
 
-[sub_resource type="StyleBoxFlat" id=20]
+[sub_resource type="StyleBoxFlat" id=21]
 bg_color = Color( 0.309804, 0.317647, 0.372549, 1 )
 corner_radius_top_left = 5
 corner_radius_top_right = 5
@@ -209,6 +220,7 @@ LineEdit/icons/clear = null
 LineEdit/styles/focus = SubResource( 12 )
 LineEdit/styles/normal = SubResource( 13 )
 LineEdit/styles/read_only = SubResource( 14 )
+Panel/styles/panel = SubResource( 15 )
 PopupMenu/colors/font_color = Color( 0.88, 0.88, 0.88, 1 )
 PopupMenu/colors/font_color_accel = Color( 0.7, 0.7, 0.7, 0.8 )
 PopupMenu/colors/font_color_disabled = Color( 0.4, 0.4, 0.4, 0.8 )
@@ -221,10 +233,10 @@ PopupMenu/icons/radio_checked = null
 PopupMenu/icons/radio_unchecked = null
 PopupMenu/icons/submenu = null
 PopupMenu/icons/unchecked = null
-PopupMenu/styles/hover = SubResource( 15 )
+PopupMenu/styles/hover = SubResource( 16 )
 PopupMenu/styles/labeled_separator_left = null
 PopupMenu/styles/labeled_separator_right = null
-PopupMenu/styles/panel = SubResource( 16 )
+PopupMenu/styles/panel = SubResource( 17 )
 PopupMenu/styles/panel_disabled = null
 PopupMenu/styles/separator = null
 RichTextLabel/colors/default_color = Color( 1, 1, 1, 1 )
@@ -280,8 +292,8 @@ TextEdit/icons/folded = null
 TextEdit/icons/space = null
 TextEdit/icons/tab = null
 TextEdit/styles/completion = null
-TextEdit/styles/focus = SubResource( 17 )
-TextEdit/styles/normal = SubResource( 18 )
+TextEdit/styles/focus = SubResource( 18 )
+TextEdit/styles/normal = SubResource( 19 )
 TextEdit/styles/read_only = null
 Tree/colors/custom_button_font_highlight = Color( 0.94, 0.94, 0.94, 1 )
 Tree/colors/drop_position_color = Color( 1, 0.3, 0.2, 1 )
@@ -306,7 +318,7 @@ Tree/icons/checked = null
 Tree/icons/select_arrow = null
 Tree/icons/unchecked = null
 Tree/icons/updown = null
-Tree/styles/bg = SubResource( 19 )
+Tree/styles/bg = SubResource( 20 )
 Tree/styles/bg_focus = null
 Tree/styles/button_pressed = null
 Tree/styles/cursor = null
@@ -314,7 +326,7 @@ Tree/styles/cursor_unfocused = null
 Tree/styles/custom_button = null
 Tree/styles/custom_button_hover = null
 Tree/styles/custom_button_pressed = null
-Tree/styles/selected = SubResource( 20 )
+Tree/styles/selected = SubResource( 21 )
 Tree/styles/selected_focus = null
 Tree/styles/title_button_hover = null
 Tree/styles/title_button_normal = null