From e05d6c7fdb59697eb929b17899037f547cba18d3 Mon Sep 17 00:00:00 2001
From: Viktor Kovacs <viktorkovacs@gmail.com>
Date: Thu, 20 May 2021 09:15:23 +0200
Subject: [PATCH] Add right arrow to info panel buttons.

---
 website/assets/images/tree/arrow_right.svg |  1 +
 website/o3dv/info.js                       | 20 ++++++++++++++------
 website/o3dv/website.css                   | 16 +++++++++++++++-
 3 files changed, 30 insertions(+), 7 deletions(-)
 create mode 100644 website/assets/images/tree/arrow_right.svg

diff --git a/website/assets/images/tree/arrow_right.svg b/website/assets/images/tree/arrow_right.svg
new file mode 100644
index 0000000..f10314c
--- /dev/null
+++ b/website/assets/images/tree/arrow_right.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18" xml:space="preserve"><path d="m6.503 14.003 5-5-5-5" style="fill:none;stroke:#838383;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10"/></svg>
\ No newline at end of file
diff --git a/website/o3dv/info.js b/website/o3dv/info.js
index b06c25c..e5c1688 100644
--- a/website/o3dv/info.js
+++ b/website/o3dv/info.js
@@ -78,12 +78,11 @@ OV.InfoPanel = class
 
         let obj = this;
         let meshesText = 'Meshes (' + meshItems.length + ')';
-        let meshesButton = $('<div>').addClass ('ov_info_box_button').html (meshesText).appendTo (contentDiv);
-        meshesButton.click (function () {
+        this.CreateButton (contentDiv, meshesText, function (button) {
             if (meshItems.length === 0) {
                 return;
             }
-            obj.popup = OV.ShowListPopup (meshesButton, meshItems, {
+            obj.popup = OV.ShowListPopup (button, meshItems, {
                 onHoverStart : function (index) {
                     callbacks.onMeshHover (info.usedByMeshes[index]);
                 },
@@ -134,9 +133,8 @@ OV.InfoPanel = class
 
         let obj = this;
         let materialsText = 'Materials (' + materialItems.length + ')';
-        let materialsButton = $('<div>').addClass ('ov_info_box_button').html (materialsText).appendTo (contentDiv);
-        materialsButton.click (function () {
-            obj.popup = OV.ShowListPopup (materialsButton, materialItems, {
+        this.CreateButton (contentDiv, materialsText, function (button) {
+            obj.popup = OV.ShowListPopup (button, materialItems, {
                 onClick : function (index) {
                     callbacks.onMaterialSelect (info.usedMaterials[index]);
                 }
@@ -144,6 +142,16 @@ OV.InfoPanel = class
         });
     }
 
+    CreateButton (parentDiv, buttonText, onClick)
+    {
+        let button = $('<div>').addClass ('ov_info_box_button').appendTo (parentDiv);
+        $('<div>').addClass ('ov_info_box_button_text').html (buttonText).appendTo (button);
+        $('<img>').addClass ('ov_info_box_button_icon').attr ('src', 'assets/images/tree/arrow_right.svg').appendTo (button);
+        button.click (function () {
+            onClick (button);
+        });
+    }
+
     Clear ()
     {
         if (this.popup !== null) {
diff --git a/website/o3dv/website.css b/website/o3dv/website.css
index 497e786..a7a6bc9 100644
--- a/website/o3dv/website.css
+++ b/website/o3dv/website.css
@@ -301,9 +301,23 @@ div.ov_menu_info_panel div.ov_info_box_rgbtext
 div.ov_menu_info_panel div.ov_info_box_button
 {
 	cursor: pointer;
-	padding: 5px;
 	border: 1px solid #dddddd;
 	border-radius: 5px;
+	overflow: auto;
+}
+
+div.ov_menu_info_panel div.ov_info_box_button_text
+{
+	padding: 5px;
+	float: left;
+}
+
+div.ov_menu_info_panel img.ov_info_box_button_icon
+{
+	width: 18px;
+	height: 18px;
+	padding: 6px;
+	float: right;
 }
 
 div.ov_tree_menu