Color Picker Improvements (#1920)

* Vanilla Picker build out * Add additional dismissal mouse handlers * More Color: picker tweaks * Reduce ColorPicker palette. * More color picker tweaks. Comment out unused colorpickers in Popover amd MenuPopup * GenericColorPicker: Add Recent Colors section * Recent Colors build out * Unset color refers to track.color * Previous colors build out * More Colors - now updates track color in realtime * Clean up default track color implementation * Layout changes * Bug fixes * Tweak picker presentation positioning * Tweak picker presentation positioning * Use GenericColorPicker.recentColors * Initial color bug * track initial color wrangling * Set initial color for all track types
igvteam · Nov 26, 2024 · b4baac8 · b4baac8
1 parent bf033cd
commit b4baac8
Show file tree

Hide file tree

Showing 28 changed files with 1,176 additions and 991 deletions.
diff --git a/css/_igv-generic-container.scss b/css/_igv-generic-container.scss
@@ -18,7 +18,7 @@
   align-items: center;
 
   // header bar
-  div:first-child {
+  >div:nth-child(1) {
 
     cursor: move;
 

diff --git a/css/_igv-ui-colorpicker.scss b/css/_igv-ui-colorpicker.scss
@@ -2,6 +2,64 @@
 $igv-color-swatch-size: 32px;
 $igv-color-swatch-border-width: 2px;
 
+.igv-ui-generic-container {
+
+  left: 50%;
+  top: 75%;
+  transform: translate(-50%, -25%);
+
+  flex-direction: column;
+  flex-wrap: nowrap;
+  justify-content: flex-start;
+  align-items: center;
+
+  background-color: #eee;
+
+  // color swatches
+  >div:nth-child(2) {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+    align-items: center;
+  }
+
+  // more colors
+  >div:nth-child(3) {
+
+    box-sizing: border-box;
+    position: relative;
+
+    display: flex;
+    flex-flow: row;
+    flex-wrap: nowrap;
+    justify-content: flex-start;
+    align-items: center;
+
+    padding: .5rem;
+    font-family: $igv-default-font-face;
+    font-size: 1rem;
+    font-weight: 400;
+
+    width: 100%;
+
+    border-top-style: solid;
+    border-top-width: thin;
+    border-top-color: $igv-dark-grey-color;
+
+  }
+
+  // recent colors
+  >div:nth-child(4) {
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+    align-items: center;
+  }
+}
+
 .igv-ui-color-swatch {
 
   position: relative;
@@ -14,50 +72,40 @@ $igv-color-swatch-border-width: 2px;
   justify-content: center;
   align-items: center;
 
+  margin: 2px;
   width: $igv-color-swatch-size;
   height: $igv-color-swatch-size;
 
   border-style: solid;
-  border-width: $igv-color-swatch-border-width;
+  border-width: 0;
   border-color: white;
-  border-radius: 4px;
-
-  //margin: 1px;
+  border-radius: 3px;
 
 }
 
-.igv-ui-color-swatch:hover {
-  border-color: dimgray;
-}
+.igv-ui-color-swatch-shim {
+
+  cursor: pointer;
+
+  position: relative;
 
-.igv-ui-colorpicker-menu-close-button {
+  box-sizing: content-box;
 
   display: flex;
   flex-flow: row;
-  flex-wrap: nowrap;
-  justify-content: flex-end;
+  flex-wrap: wrap;
+  justify-content: center;
   align-items: center;
 
-  width: 100%;
-  height: 32px;
-
-  margin-top: 4px;
-  margin-bottom: 4px;
+  width: $igv-color-swatch-size;
+  height: $igv-color-swatch-size;
 
-  padding-right: 8px;
+  background-color: white;
 
-  i.fa {
-    display: block;
-    margin-left: 4px;
-    margin-right: 4px;
-    color: #5f5f5f;
-  }
-
-  i.fa:hover,
-  i.fa:focus,
-  i.fa:active {
-    cursor: pointer;
-    color: #0f0f0f;
-  }
+  border-style: solid;
+  border-width: thin;
+  border-color: white;
+  border-radius: 4px;
 
 }
+
diff --git a/css/igv.css b/css/igv.css
diff --git a/css/igv.scss b/css/igv.scss
@@ -91,9 +91,9 @@ $igv-trackgear-default-font-face: 'Open Sans', sans-serif;
 @import "igv-ui-dropdown";
 @import "igv-ui-popover";
 @import "igv-ui-alert-dialog";
-@import "igv-ui-colorpicker";
 @import "igv-ui-generic-dialog-container";
 @import "igv-ui-generic-container";
+@import "igv-ui-colorpicker";
 @import "igv-ui-dialog";
 @import "igv-ui-panel";
 @import "igv-ui-textbox";

diff --git a/dev/misc/vanillPicker.html b/dev/misc/vanillPicker.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link href=https://igv.org/web/img/favicon.ico rel="shortcut icon">
+    <title>IGV - Dev</title>
+</head>
+
+<body>
+
+<div id="myDiv" style="padding-top: 50px;padding-bottom: 20px; height: auto">
+
+</div>
+
+<script type="module">
+
+    import igv from "../../js/index.js";
+
+    const div = document.getElementById("myDiv");
+    const options = {
+        locus: '19:49301000-49305700',
+        genome: "hg19",
+        tracks: [
+            {
+                name: 'All pos bars',
+                url: '../../test/data/wig/allPositive.bedgraph',
+                // color: '#0f0',
+                indexed: false
+            },
+        ]
+    };
+
+    igv.createBrowser(div, options).then(function (browser) {
+    });
+
+
+</script>
+
+</body>
+
+</html>
+