Navbar Button Tweaks (#1735)

* navbar buttons - track names and multi-select * save-image dropdown build out * Save Image dropdown implementation * dropdown positioning tweaks * discard unused code * dismiss saveImage dropdown on browser resize * save image button tweaks
igvteam · Nov 29, 2023 · e6fc564 · e6fc564
1 parent 80dab8b
commit e6fc564
Show file tree

Hide file tree

Showing 11 changed files with 119 additions and 258 deletions.
diff --git a/css/_navbar.scss b/css/_navbar.scss
@@ -203,6 +203,7 @@ $igv-save-png-image-x-origin:  3*$igv-navbar-icon-button-size/4;
     align-items: center;
 
     .igv-navbar-toggle-button-container {
+      position: relative;
       display: flex;
       flex-flow: row;
       flex-wrap: nowrap;

diff --git a/css/dom.css b/css/dom.css
diff --git a/css/dom.css.map b/css/dom.css.map
diff --git a/dev/misc/navbar-buttons.html b/dev/misc/navbar-buttons.html
@@ -9,15 +9,13 @@
 
 <body>
 
-<div id="myDiv" style="padding-top: 50px;padding-bottom: 20px; height: auto">
+<div id="igv-container" style="position: relative; padding-top: 50px;padding-bottom: 20px; height: auto">
 
 </div>
 
 <script type="module">
 
     import igv from "../../js/index.js";
-    // import igv from "../../dist/igv.esm.js";
-
     const config =
         {
 
@@ -129,10 +127,13 @@
                     "order": 1000000
                 }
             ]
-        }
+        };
+
+    const parent = document.getElementById("igv-container")
 
-    igv.createBrowser(document.getElementById("myDiv"), config).then(function (browser) {
-    });
+    igv.createBrowser(parent, config).then(browser => {
+        console.log(`browser ${ browser.guid } is good to go`)
+    })
 
 
 </script>

diff --git a/js/embedCss.js b/js/embedCss.js
diff --git a/js/ui/navbarButton.js b/js/ui/navbarButton.js
@@ -52,15 +52,20 @@ class NavbarButton {
         this.setState(initialButtonState)
 
         browser.on('navbar-resize', navbarButtonCSSClass => {
-            const key = 'igv-navbar-icon-button' === navbarButtonCSSClass ? 'image' : 'text'
-            if (key !== this.responsiveKey) {
-                this.responsiveKey = key
-                this.configureButton(title)
-                this.setState(undefined)
-            }
+            this.navbarResizeHandler(navbarButtonCSSClass)
         })
 
     }
+
+    navbarResizeHandler(navbarButtonCSSClass) {
+        const key = 'igv-navbar-icon-button' === navbarButtonCSSClass ? 'image' : 'text'
+        if (key !== this.responsiveKey) {
+            this.responsiveKey = key
+            this.configureButton(this.title)
+            this.setState(undefined)
+        }
+    }
+
     configureButton(title) {
 
         this.groupElement = undefined

diff --git a/js/ui/navbarIcons/multiSelect.js b/js/ui/navbarIcons/multiSelect.js
@@ -4,17 +4,17 @@ const multiSelectImage =
     <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
         <g id="multi-select">
             <rect id="backdrop-copy-3" stroke="#737373" stroke-width="12" fill="#FFFFFF" x="6" y="6" width="613" height="613" rx="135"></rect>
-            <g id="row-copy-3" transform="translate(81, 427)" fill="#737373">
-                <rect id="Rectangle" x="134" y="0" width="329" height="70"></rect>
-                <rect id="Rectangle-Copy-16" x="0" y="0" width="70" height="70"></rect>
+            <g id="row-copy-3" transform="translate(81, 427)">
+                <rect id="Rectangle" fill="#737373" x="134" y="0" width="329" height="70"></rect>
+                <rect id="Rectangle-Copy-16" stroke="#979797" stroke-width="12" x="6" y="6" width="58" height="58"></rect>
             </g>
-            <g id="row-copy-2" transform="translate(82, 277)" fill="#CFCECE">
-                <rect id="Rectangle" fill-opacity="0.33" x="133" y="0" width="329" height="70"></rect>
-                <rect id="Rectangle-Copy-16" fill-opacity="0.333506337" x="0" y="0" width="70" height="70"></rect>
+            <g id="row-copy-2" transform="translate(82, 277)">
+                <rect id="Rectangle" fill-opacity="0.33" fill="#CFCECE" x="133" y="0" width="329" height="70"></rect>
+                <rect id="Rectangle-Copy-16" stroke-opacity="0.32659528" stroke="#CFCECE" stroke-width="12" x="6" y="6" width="58" height="58"></rect>
             </g>
-            <g id="row-copy" transform="translate(81, 119)" fill="#737373">
-                <rect id="Rectangle" x="134" y="0" width="329" height="70"></rect>
-                <rect id="Rectangle-Copy-17" x="0" y="0" width="70" height="70"></rect>
+            <g id="row-copy" transform="translate(81, 119)">
+                <rect id="Rectangle" fill="#737373" x="134" y="0" width="329" height="70"></rect>
+                <rect id="Rectangle-Copy-17" stroke="#979797" stroke-width="12" x="6" y="6" width="58" height="58"></rect>
             </g>
         </g>
     </g>
@@ -26,17 +26,17 @@ const multiSelectImageHover =
     <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
         <g id="multi-select-hover">
             <rect id="backdrop-copy-4" stroke="#737373" stroke-width="12" fill="#737373" x="6" y="6" width="613" height="613" rx="135"></rect>
-            <g id="row-copy-3" transform="translate(81, 427)" fill="#FFFFFF">
-                <rect id="Rectangle" x="134" y="0" width="329" height="70"></rect>
-                <rect id="Rectangle-Copy-16" x="0" y="0" width="70" height="70"></rect>
+            <g id="row-copy-3" transform="translate(81, 427)">
+                <rect id="Rectangle" fill="#FFFFFF" x="134" y="0" width="329" height="70"></rect>
+                <rect id="Rectangle-Copy-16" stroke="#FFFFFF" stroke-width="12" x="6" y="6" width="58" height="58"></rect>
             </g>
-            <g id="row-copy-2" transform="translate(67.0769, 277)" fill="#FFFFFF">
-                <rect id="Rectangle" x="147.923077" y="0" width="329" height="70"></rect>
-                <rect id="Rectangle-Copy-16" x="14.9230769" y="0" width="70" height="70"></rect>
+            <g id="row-copy-2" transform="translate(82, 277)">
+                <rect id="Rectangle" fill-opacity="0.33" fill="#CFCECE" x="133" y="0" width="329" height="70"></rect>
+                <rect id="Rectangle-Copy-16" stroke-opacity="0.33" stroke="#CFCECE" stroke-width="12" x="6" y="6" width="58" height="58"></rect>
             </g>
-            <g id="row-copy" transform="translate(81, 119)" fill="#FFFFFF">
-                <rect id="Rectangle" x="134" y="0" width="329" height="70"></rect>
-                <rect id="Rectangle-Copy-17" x="0" y="0" width="70" height="70"></rect>
+            <g id="row-copy" transform="translate(81, 119)">
+                <rect id="Rectangle" fill="#FFFFFF" x="134" y="0" width="329" height="70"></rect>
+                <rect id="Rectangle-Copy-17" stroke="#FFFFFF" stroke-width="12" x="6" y="6" width="58" height="58"></rect>
             </g>
         </g>
     </g>