Merge pull request #69 from key4hep/feat/collapsable-view-selector

Make view selector collapsable

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;

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;

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-left.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>
 

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 = {};