Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Color Picker Improvements #1920

Merged
merged 19 commits into from
Nov 26, 2024
Merged

Color Picker Improvements #1920

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
ec02fb9
Vanilla Picker build out
turner Nov 6, 2024
cb05e63
Add additional dismissal mouse handlers
turner Nov 6, 2024
ac6555f
More Color: picker tweaks
turner Nov 7, 2024
48dae0c
Reduce ColorPicker palette.
turner Nov 9, 2024
b6599d8
More color picker tweaks. Comment out unused colorpickers in Popover …
turner Nov 11, 2024
aa23707
GenericColorPicker: Add Recent Colors section
turner Nov 12, 2024
f772c1e
Recent Colors build out
turner Nov 13, 2024
efce185
Unset color refers to track.color
turner Nov 20, 2024
e4f36de
Previous colors build out
turner Nov 20, 2024
361b889
More Colors - now updates track color in realtime
turner Nov 21, 2024
fcce22c
Clean up default track color implementation
turner Nov 21, 2024
8215fdf
Layout changes
turner Nov 21, 2024
fd862c6
Bug fixes
turner Nov 21, 2024
7699576
Tweak picker presentation positioning
turner Nov 22, 2024
835f01a
Tweak picker presentation positioning
turner Nov 22, 2024
7091891
Use GenericColorPicker.recentColors
turner Nov 22, 2024
0e96bd3
Initial color bug
turner Nov 25, 2024
34543f5
track initial color wrangling
turner Nov 25, 2024
c2e74f5
Set initial color for all track types
turner Nov 26, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion css/_igv-generic-container.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
align-items: center;

// header bar
div:first-child {
>div:nth-child(1) {

cursor: move;

Expand Down
106 changes: 77 additions & 29 deletions css/_igv-ui-colorpicker.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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;

}

127 changes: 80 additions & 47 deletions css/igv.css
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion css/igv.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down
42 changes: 42 additions & 0 deletions dev/misc/vanillPicker.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>

Loading