external-repos/squoosh
1
0
Fork 1
mirror of https://github.com/GoogleChromeLabs/squoosh.git synced 2025-11-18 19:49:04 +00:00
Code Issues Packages Projects Releases Wiki Activity

Options ui (#222)

Browse Source 
* wip

* Commenting stuff to keep the build happy

* Revealing sections

* Custom select elements & more form work

* Range input styles

* Text fields with inputs do the right thing

* Safari & Firefox fixes

* Large compress select

* oops

* MozJPEG options updated

* OptPNG options

* These asserts weren't true

* Generic options

* WebP options

* Hiding "edit" when "original image"

* Download icon

* Copy setting button - still not happy with this

* Progress indicator

* Loading icon enter/exit anim

* Preventing controls going under options

* Ahh so that's what was causing scrolling

* Ahh so that's what was causing outlines

* Simplifying range styles and fixing cross-browser

* Processing custom element styles

* Get precision from step by default

* I don't know how or when this happened.

* Don't need that many steps

* Avoid having an element that covers the pinch zoom

* Preventing overlap with zoom controls

* Prevent ts warning

* Fixing spinner position

* Simplifying FileSize
This commit is contained in:
Jake Archibald
2018-11-06 13:36:23 +00:00
committed by GitHub
parent 0cec90c7ca
commit bdd3c11f1a
37 changed files with 1291 additions and 948 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/lib/icons.tsx
View File

@@ -8,7 +8,7 @@ const Icon = (props: JSX.HTMLAttributes) => (
export const DownloadIcon = (props: JSX.HTMLAttributes) => (
<Icon {...props}>
<path d="M19.35 10.04A7.49 7.49 0 0 0 12 4C9.11 4 6.6 5.64 5.35 8.04A5.994 5.994 0 0 0 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM17 13l-5 5-5-5h3V9h4v4h3z" />
<path d="M19 12v7H5v-7H3v7c0 1.1.9 2 2 2h14a2 2 0 0 0 2-2v-7h-2zm-6 .7l2.6-2.6 1.4 1.4-5 5-5-5 1.4-1.4 2.6 2.6V3h2z"/>
</Icon>
);
@@ -29,3 +29,15 @@ export const RemoveIcon = (props: JSX.HTMLAttributes) => (
<path d="M19 13H5v-2h14v2z"/>
</Icon>
);
export const UncheckedIcon = (props: JSX.HTMLAttributes) => (
<Icon {...props}>
<path d="M21.3 2.7v18.6H2.7V2.7h18.6m0-2.7H2.7A2.7 2.7 0 0 0 0 2.7v18.6A2.7 2.7 0 0 0 2.7 24h18.6a2.7 2.7 0 0 0 2.7-2.7V2.7A2.7 2.7 0 0 0 21.3 0z"/>
</Icon>
);
export const CheckedIcon = (props: JSX.HTMLAttributes) => (
<Icon {...props}>
<path d="M21.3 0H2.7A2.7 2.7 0 0 0 0 2.7v18.6A2.7 2.7 0 0 0 2.7 24h18.6a2.7 2.7 0 0 0 2.7-2.7V2.7A2.7 2.7 0 0 0 21.3 0zm-12 18.7L2.7 12l1.8-1.9L9.3 15 19.5 4.8l1.8 1.9z"/>
</Icon>
);