From 6b80adc392073a90cd656ab879bebf84f757cfd9 Mon Sep 17 00:00:00 2001
From: Braulio Rivas Abad <brauliorivas2004@gmail.com>
Date: Sat, 27 Jul 2024 20:00:17 -0500
Subject: [PATCH 1/2] make view selector collapsable

---
 css/filter.css    |  1 +
 css/views.css     | 20 +++++++++++++++++++-
 img/open.svg      |  1 +
 index.html        |  8 +++++++-
 js/views/views.js | 14 ++++++++++++++
 5 files changed, 42 insertions(+), 2 deletions(-)
 create mode 100644 img/open.svg

diff --git a/css/filter.css b/css/filter.css
index 9750bdd3..1bd6f5a1 100644
--- a/css/filter.css
+++ b/css/filter.css
@@ -4,6 +4,7 @@
   flex-direction: column;
   background-color: #e1e1e1;
   border-radius: 5px;
+  border: 1px solid #000;
   padding: 10px;
   top: 10px;
   right: 10px;
diff --git a/css/views.css b/css/views.css
index 86e4c0c8..8c9cc7f7 100644
--- a/css/views.css
+++ b/css/views.css
@@ -26,14 +26,32 @@
   top: 25%;
   left: 10px;
   width: fit-content;
-  height: 50%;
+  height: fit-content;
+  max-height: 50%;
   background-color: #e1e1e1;
   padding: 15px;
   border: 1px solid #000;
   border-radius: 5px;
 }
 
+#views-header {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+}
+
+#open-views {
+  display: none;
+}
+
+#views-menu-handler {
+  cursor: pointer;
+  margin-left: 10px;
+}
+
 #view-selector {
+  margin-top: 10px;
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
diff --git a/img/open.svg b/img/open.svg
new file mode 100644
index 00000000..12924cad
--- /dev/null
+++ b/img/open.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="undefined" height="undefined" viewBox="0 0 24 24"><path fill="currentColor" d="M4 20v-7h1v5.312L18.312 5H13V4h7v7h-1V5.688L5.688 19H11v1H4Z"/></svg>
\ No newline at end of file
diff --git a/index.html b/index.html
index 5167f9eb..86abe296 100644
--- a/index.html
+++ b/index.html
@@ -177,7 +177,13 @@ <h2 id="view-title-info"></h2>
   </div>
 
   <div id="views">
-    <p>Select a view:</p>
+    <div id="views-header">
+      <span>Select a view:</span>
+      <div id="views-menu-handler">
+        <img id="close-views" src="img/close.svg" alt="Close" width="20" height="20" />
+        <img id="open-views" src="img/open.svg" alt="Open" width="20" height="20" />
+      </div>
+    </div>
     <div id="view-selector" class="view-selector-menu"></div>
   </div>
 
diff --git a/js/views/views.js b/js/views/views.js
index 8b05e1ee..59b48d9c 100644
--- a/js/views/views.js
+++ b/js/views/views.js
@@ -11,6 +11,20 @@ import { setRenderable } from "../draw/renderable.js";
 const currentView = {};
 
 const viewOptions = document.getElementById("view-selector");
+const openViewsButton = document.getElementById("open-views");
+const closeViewsButton = document.getElementById("close-views");
+
+openViewsButton.addEventListener("click", () => {
+  viewOptions.style.display = "flex";
+  openViewsButton.style.display = "none";
+  closeViewsButton.style.display = "block";
+});
+
+closeViewsButton.addEventListener("click", () => {
+  viewOptions.style.display = "none";
+  openViewsButton.style.display = "block";
+  closeViewsButton.style.display = "none";
+});
 
 export const scrollLocations = {};
 

From 968d1072a1fb8a3642a1d21cd7324304bb634e52 Mon Sep 17 00:00:00 2001
From: Braulio Rivas Abad <brauliorivas2004@gmail.com>
Date: Mon, 29 Jul 2024 15:00:39 -0500
Subject: [PATCH 2/2] change (close) icon for views selector

---
 img/close-left.svg | 1 +
 index.html         | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)
 create mode 100644 img/close-left.svg

diff --git a/img/close-left.svg b/img/close-left.svg
new file mode 100644
index 00000000..8fd678d1
--- /dev/null
+++ b/img/close-left.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="undefined" height="undefined" viewBox="0 0 16 16"><path fill="currentColor" d="M10.843 13.069L6.232 8.384a.546.546 0 0 1 0-.768l4.61-4.685a.552.552 0 0 0 0-.771a.53.53 0 0 0-.759 0l-4.61 4.684a1.65 1.65 0 0 0 0 2.312l4.61 4.684a.53.53 0 0 0 .76 0a.552.552 0 0 0 0-.771"/></svg>
\ No newline at end of file
diff --git a/index.html b/index.html
index 86abe296..a2d762c0 100644
--- a/index.html
+++ b/index.html
@@ -180,7 +180,7 @@ <h2 id="view-title-info"></h2>
     <div id="views-header">
       <span>Select a view:</span>
       <div id="views-menu-handler">
-        <img id="close-views" src="img/close.svg" alt="Close" width="20" height="20" />
+        <img id="close-views" src="img/close-left.svg" alt="Close" width="20" height="20" />
         <img id="open-views" src="img/open.svg" alt="Open" width="20" height="20" />
       </div>
     </div>