mirror of
https://github.com/GoogleChromeLabs/squoosh.git
synced 2025-11-15 10:09:45 +00:00
3035a68b90
* Initial work to add Options config
* Use a single encoder instance and retry up to 10 times on failure.
* Switch both sides to allow encoding from the source image, add options configuration for each.
* Styling for options (and a few tweaks for the app)
* Dep updates.
* Remove commented out code.
* Fix Encoder typing
* Fix lint issues
* Apparently I didnt have tslint autofix enabled on the chromebook
* Attempt to fix layout/panning issues
* Fix missing custom element import!
* Fix variable naming, remove dynamic encoder names, remove retry, allow encoders to return ImageData.
* Refactor state management to use an Array of objects and immutable updates instead of relying on explicit update notifications.
* Add Identity encoder, which is a passthrough encoder that handles the "original" view.
* Drop comlink-loader into the project and add ".worker" to the jpeg encoder filename so it runs in a worker (🦄)
* lint fixes.
* cleanup
* smaller PR feedback fixes
* rename "jpeg" codec to "MozJpeg"
* Formatting fixes for Options
* Colocate codecs and their options UIs in src/codecs, and standardize the namings
* Handle canvas errors
* Throw if quality is undefined, add default quality
* add note about temp styles
* add note about temp styles [2]
* Renaming updateOption
* Clarify option input bindings
* Move updateCanvas() to util and rename to drawBitmapToCanvas
* use generics to pass through encoder options
* Remove unused dependencies
* fix options type
* const
* Use `Array.prototype.some()` for image loading check
* Display encoding errors in the UI.
* I fought typescript and I think I won
* This doesn't need to be optional
* Quality isn't optional
* Simplifying comlink casting
* Splitting counters into loading and displaying
* Still loading if the loading counter isn't equal.
39 lines
662 B
SCSS
39 lines
662 B
SCSS
/*
|
|
Note: These styles are temporary. They will be replaced before going live.
|
|
*/
|
|
|
|
.options {
|
|
width: 180px;
|
|
padding: 10px;
|
|
background: rgba(50,50,50,0.8);
|
|
border: 1px solid #222;
|
|
box-shadow: inset 0 0 1px #fff, 0 0 1px #fff;
|
|
border-radius: 3px;
|
|
color: #eee;
|
|
overflow: auto;
|
|
z-index: 1;
|
|
transition: opacity 300ms ease;
|
|
|
|
&:not(:hover) {
|
|
opacity: .6;
|
|
}
|
|
|
|
label {
|
|
display: block;
|
|
padding: 5px;
|
|
font-weight: bold;
|
|
|
|
select {
|
|
margin-left: 5px;
|
|
}
|
|
|
|
input {
|
|
vertical-align: middle;
|
|
}
|
|
}
|
|
|
|
pre {
|
|
font-size: 10px;
|
|
}
|
|
}
|