Added beginning of drop-down menus on dataset tiles, plus modificatio…

…ns to gene selector and dataset selector widgets so their dropdown customizations are specific to them
IGS · Jan 21, 2024 · acef04c · acef04c
1 parent ab2eef1
commit acef04c
Show file tree

Hide file tree

Showing 7 changed files with 53 additions and 25 deletions.
diff --git a/www/css/common.v2.css b/www/css/common.v2.css
@@ -33,7 +33,6 @@ html, body {
 /* -= Typography =- */
 
 
-
 /* -------------------- */
 /* -= Header section =- */
 

diff --git a/www/include/dataset-collection-selector/dataset-collection-selector.css b/www/include/dataset-collection-selector/dataset-collection-selector.css
@@ -1,18 +1,18 @@
-div.dropdown-menu {
+#dropdown-dc div.dropdown-menu {
     width: 60vw;
 }
 @media (min-width: 1320px) {
-    div.dropdown-menu {
+    #dropdown-dc div.dropdown-menu {
         width: 55vw;
     }
 }
 @media (min-width: 1440px) {
-    div.dropdown-menu {
+    #dropdown-dc div.dropdown-menu {
         width: 50vw;
     }
 }
 @media (min-width: 1580px) {
-    div.dropdown-menu {
+    #dropdown-dc div.dropdown-menu {
         width: 45vw;
     }
 }

diff --git a/www/include/dataset-collection-selector/dataset-collection-selector.html b/www/include/dataset-collection-selector/dataset-collection-selector.html
@@ -26,10 +26,10 @@
 
 <div id="dropdown-dc" class="control dropdown is-right is-loading is-disabled mr-0">
     <div class="dropdown-trigger is-clickable">
-      <button class="button">
-        <span id="dropdown-dc-selector-label">Choose a Dataset Collection</span>
-        <span class="icon is-small">
-          <i class="mdi mdi-chevron-down" aria-hidden="true"></i>
+      <button class="button dropdown-trigger">
+        <span id="dropdown-dc-selector-label" class="dropdown-trigger">Choose a Dataset Collection</span>
+        <span class="icon is-small dropdown-trigger">
+          <i class="mdi mdi-chevron-down dropdown-trigger" aria-hidden="true"></i>
         </span>
       </button>
     </div>

diff --git a/www/include/gene-collection-selector/gene-collection-selector.css b/www/include/gene-collection-selector/gene-collection-selector.css
@@ -1,18 +1,18 @@
-div.dropdown-menu {
+#dropdown-gene-lists div.dropdown-menu {
     width: 60vw;
 }
 @media (min-width: 1320px) {
-    div.dropdown-menu {
+    #dropdown-gene-lists div.dropdown-menu {
         width: 55vw;
     }
 }
 @media (min-width: 1440px) {
-    div.dropdown-menu {
+    #dropdown-gene-lists div.dropdown-menu {
         width: 50vw;
     }
 }
 @media (min-width: 1580px) {
-    div.dropdown-menu {
+    #dropdown-gene-lists div.dropdown-menu {
         width: 45vw;
     }
 }

diff --git a/www/include/gene-collection-selector/gene-collection-selector.html b/www/include/gene-collection-selector/gene-collection-selector.html
@@ -26,11 +26,12 @@
 <script src="include/gene-collection-selector/gene-collection-selector.js"></script>
 
 <div id="dropdown-gene-lists" class="control dropdown is-right is-loading is-disabled mr-0">
-    <div class="dropdown-trigger is-clickable">
-      <button class="button">
-        <span id="dropdown-gene-list-selector-label">Quick search using Gene Lists</span>
-        <span class="icon is-small">
-          <i class="mdi mdi-chevron-down" aria-hidden="true"></i>
+    <div class="is-clickable">
+      <!-- why doesn't have dropdown-trigger on the button alone capture all clicks?? -->
+      <button class="button dropdown-trigger">
+        <span id="dropdown-gene-list-selector-label" class="dropdown-trigger">Quick search using Gene Lists</span>
+        <span class="icon is-small dropdown-trigger">
+          <i class="mdi mdi-chevron-down dropdown-trigger" aria-hidden="true"></i>
         </span>
       </button>
     </div>

diff --git a/www/include/tile-grid/tile.html b/www/include/tile-grid/tile.html
@@ -3,9 +3,35 @@
         <div class="card-header has-background-primary">
             <div class="card-header-title py-0"></div>
             <div class="card-header-icon">
-                <span class="icon">
-                    <i class="mdi mdi-18px mdi-dots-vertical"></i>
-                </span>
+                <div class="dropdown is-right dataset-dropdown">
+                    <div>
+                        <button class="button dropdown-trigger" aria-haspopup="true" aria-controls="dropdown-menu">
+                            <span class="icon">
+                                <i class="mdi mdi-18px mdi-dots-vertical dropdown-trigger"></i>
+                            </span>
+                        </button>
+                    </div>
+                    <div class="dropdown-menu" id="dropdown-menu" role="menu">
+                        <div class="dropdown-content">
+                        <a href="#" class="dropdown-item">
+                            Dropdown item
+                        </a>
+                        <a class="dropdown-item">
+                            Other dropdown item
+                        </a>
+                        <a href="#" class="dropdown-item is-active">
+                            Active dropdown item
+                        </a>
+                        <a href="#" class="dropdown-item">
+                            Other dropdown item
+                        </a>
+                        <hr class="dropdown-divider">
+                        <a href="#" class="dropdown-item">
+                            With a divider
+                        </a>
+                        </div>
+                    </div>
+                </div>
             </div>
         </div>
         <div class="card-image"></div>

diff --git a/www/js/common.v2.js b/www/js/common.v2.js
@@ -15,11 +15,13 @@ document.addEventListener('DOMContentLoaded', () => {
     });
 
     // Bulma dropdowns can't be clicked without a wee bit of Javascript
-    document.querySelectorAll('.dropdown-trigger').forEach(item => {
-        item.addEventListener('click', (event) => {
+    document.addEventListener('click', (event) => {
+        let item = event.target;
+        if (item.classList.contains('dropdown-trigger')) {
+            console.log("dropdown-trigger clicked");
             event.stopPropagation();
-            item.parentNode.classList.toggle('is-active');
-        });
+            item.closest(".dropdown").classList.toggle('is-active');
+        }
     });