-
Notifications
You must be signed in to change notification settings - Fork 77
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.
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
feature(ImageViewer): Add FilterControls component to ImageViewer #402
Conversation
Size Changes
View raw build statsPrevious (master){
"apollo": {
"esm": 10832,
"lib": 14147
},
"app-shell": {
"esm": 12906,
"lib": 19874
},
"composer": {
"esm": 68247,
"lib": 101805
},
"core": {
"esm": 580467,
"lib": 726903
},
"forms": {
"esm": 37350,
"lib": 49298
},
"icons": {
"esm": 156355,
"lib": 205626
},
"layouts": {
"esm": 15298,
"lib": 20770
},
"metrics": {
"esm": 5467,
"lib": 7729
},
"test-utils": {
"esm": 4279,
"lib": 5937
}
} Current{
"apollo": {
"esm": 10832,
"lib": 14147
},
"app-shell": {
"esm": 12906,
"lib": 19874
},
"composer": {
"esm": 68247,
"lib": 101805
},
"core": {
"esm": 583901,
"lib": 732297
},
"forms": {
"esm": 37350,
"lib": 49298
},
"icons": {
"esm": 156355,
"lib": 205626
},
"layouts": {
"esm": 15298,
"lib": 20770
},
"metrics": {
"esm": 5467,
"lib": 7729
},
"test-utils": {
"esm": 4279,
"lib": 5937
}
} |
@williaster @alecklandgraf PTAL 🙂 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Looks great overall, had a couple minor comments on prop annotations
export type FilterControlsProps = { | ||
/** The current brightness. 1 by default. */ | ||
brightness?: number; | ||
/** Callback when brightness changes */ |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
missing .
onBrightnessChange: (brightness: number) => void; | ||
/** The current contrast. 1 by default. */ | ||
contrast?: number; | ||
/** Callback when contrast changes */ |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
missing .
onContrastChange: (contrast: number) => void; | ||
/** Size of the icons. */ | ||
iconSize?: number | string; | ||
/** Place dropdown menu above */ |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
missing .
import useStyles, { StyleSheet } from '../../hooks/useStyles'; | ||
|
||
export type FilterControlsProps = { | ||
/** The current brightness. 1 by default. */ |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
might be worth mentioning what the valid range of brightness
values is?
brightness?: number; | ||
/** Callback when brightness changes */ | ||
onBrightnessChange: (brightness: number) => void; | ||
/** The current contrast. 1 by default. */ |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
might be worth mentioning what the valid range of contrast
values is?
@williaster updated the comments -- PTAL! |
to: @williaster @alecklandgraf
Description
This adds filters to the
ImageViewer
component to adjust image brightness and contrast to complement the existingRotateControls
andZoomControls
.Motivation and Context
This will be used to further enhance image editing capabilities in the
ImageViewer
.Testing
Local storybook
Screenshots
High brightness:
Low brightness:
Checklist