Skip to content

Commit

Permalink
Merge pull request #69 from key4hep/feat/collapsable-view-selector
Browse files Browse the repository at this point in the history
Make view selector collapsable
  • Loading branch information
brauliorivas authored Jul 29, 2024
2 parents 711ed19 + 968d107 commit e572361
Show file tree
Hide file tree
Showing 6 changed files with 43 additions and 2 deletions.
1 change: 1 addition & 0 deletions css/filter.css
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
flex-direction: column;
background-color: #e1e1e1;
border-radius: 5px;
border: 1px solid #000;
padding: 10px;
top: 10px;
right: 10px;
Expand Down
20 changes: 19 additions & 1 deletion css/views.css
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
1 change: 1 addition & 0 deletions img/close-left.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions img/open.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
8 changes: 7 additions & 1 deletion index.html
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand Down
14 changes: 14 additions & 0 deletions js/views/views.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {};

Expand Down

0 comments on commit e572361

Please sign in to comment.