-
Notifications
You must be signed in to change notification settings - Fork 5
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Color maps range slider implementation (#1190)
**Related Ticket:** #1102 ### Description of Changes Creation and implementation of new range slider component. ### Notes & Questions About Changes -There is a identified bug that while dragging the slider thumbs you can drag the entire panel up and down influencing the parent component position. -Additional functionality: If input field is left empty and clicked outside of the default _min_ or _max_ should auto populate the field. ### Validation / Testing Navigate to a data exploration and add a layer to the timeline. - **Layers:** - Confirm that **min** and **max** are accurate to value in the layer legend view. - Switch to another layer with different value confirm that the min and max in the range slider are accurate. - Select a layer with a min value less than 0 (net ecosystem exchange) you should see a middle marker that represents the center of the current gradient values. - **Slider:** - You should not be able to drag the min slider past the max slider, or the max slider past the min slider. - **Text Inputs:** - You should be able to type in a value greater or lower than the min max of the layer but then be shown with the error message _Please enter a value between {min} and {max}_ no change to the slider range or the map. - After selecting a different max that is less than the layers absolute maximum with either slider or input, if you enter in a value in the min text input that is greater than the newly selected max you should be presented with an error message _Please enter a value less than {max}_ - After selecting a different min that is larger than the layers absolute minimum with either slider or input, if you enter in a value in the max text input that is greater than the newly selected max you should be presented with an error message _Please enter a value larger than {min}_
- Loading branch information
Showing
13 changed files
with
575 additions
and
85 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,10 @@ | ||
import React from "react"; | ||
import { TextInput, TextInputMask } from "@trussworks/react-uswds"; | ||
|
||
export function USWDSTextInput(props) { | ||
return <TextInput {...props} />; | ||
} | ||
|
||
export function USWDSTextInputMask(props) { | ||
return <TextInputMask {...props} />; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
50 changes: 50 additions & 0 deletions
50
app/scripts/components/exploration/components/datasets/color-range-slider.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,50 @@ | ||
/* Removing the default appearance */ | ||
.thumb, | ||
.thumb::-webkit-slider-thumb { | ||
touch-action: 'none'; | ||
|
||
-webkit-appearance: none; | ||
-webkit-tap-highlight-color: transparent; | ||
} | ||
|
||
.thumb { | ||
pointer-events: none; | ||
} | ||
/* For Chrome browsers */ | ||
.thumb::-webkit-slider-thumb { | ||
-webkit-appearance: none; | ||
pointer-events: all; | ||
width: 20px; | ||
height: 20px; | ||
background-color: #fff; | ||
border-radius: 50%; | ||
border: 2px solid #1565ef; | ||
border-width: 1px; | ||
box-shadow: 0 0 0 1px #c6c6c6; | ||
cursor: pointer; | ||
} | ||
|
||
/* For Firefox browsers */ | ||
.thumb::-moz-range-thumb { | ||
-webkit-appearance: none; | ||
pointer-events: all; | ||
width: 20px; | ||
height: 20px; | ||
background-color: #fff; | ||
border-radius: 50%; | ||
border: 2px solid #1565ef; | ||
border-width: 1px; | ||
box-shadow: 0 0 0 1px #c6c6c6; | ||
cursor: pointer; | ||
} | ||
|
||
input::-webkit-outer-spin-button, | ||
input::-webkit-inner-spin-button { | ||
-webkit-appearance: none; | ||
margin: 0; | ||
} | ||
|
||
/* Firefox */ | ||
input[type='number'] { | ||
-moz-appearance: textfield; | ||
} |
Oops, something went wrong.