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

Jump to bottom

Design review fixes #172

Merged
merged 2 commits into from
Oct 2, 2018
Merged

Design review fixes #172

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
2928a39
Design review fixes
jakearchibald Oct 2, 2018
e2f338c
Adding styles for mozjpeg & fixing some merge errors
jakearchibald Oct 2, 2018
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
22 changes: 10 additions & 12 deletions src/codecs/mozjpeg/options.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { h, Component } from 'preact';
import { bind, inputFieldChecked, inputFieldValueAsNumber } from '../../lib/util';
import { EncodeOptions, MozJpegColorSpace } from './encoder';
import '../../components/output/custom-els/RangeInput';

type Props = {
options: EncodeOptions,
Expand Down Expand Up @@ -40,9 +41,8 @@ export default class MozJPEGEncoderOptions extends Component<Props, {}> {
<form>
<label>
Quality:
<input
<range-input
name="quality"
type="range"
min="0"
max="100"
value={'' + options.quality}
Expand All @@ -56,7 +56,7 @@ export default class MozJPEGEncoderOptions extends Component<Props, {}> {
checked={options.baseline}
onChange={this.onChange}
/>
Baseline (worse but legacy-compatible)
<span>Baseline (worse but legacy-compatible)</span>
</label>
<label style={{ display: options.baseline ? 'none' : '' }}>
<input
Expand All @@ -65,7 +65,7 @@ export default class MozJPEGEncoderOptions extends Component<Props, {}> {
checked={options.progressive}
onChange={this.onChange}
/>
Progressive multi-pass rendering
<span>Progressive multi-pass rendering</span>
</label>
<label style={{ display: options.baseline ? '' : 'none' }}>
<input
Expand All @@ -74,13 +74,12 @@ export default class MozJPEGEncoderOptions extends Component<Props, {}> {
checked={options.optimize_coding}
onChange={this.onChange}
/>
Optimize Huffman table
<span>Optimize Huffman table</span>
</label>
<label>
Smoothing:
<input
<range-input
name="smoothing"
type="range"
min="0"
max="100"
value={'' + options.smoothing}
Expand Down Expand Up @@ -124,7 +123,7 @@ export default class MozJPEGEncoderOptions extends Component<Props, {}> {
checked={options.trellis_multipass}
onChange={this.onChange}
/>
Consider multiple scans during trellis quantization
<span>Consider multiple scans during trellis quantization</span>
</label>
<label style={{ display: options.trellis_multipass ? '' : 'none' }}>
<input
Expand All @@ -133,7 +132,7 @@ export default class MozJPEGEncoderOptions extends Component<Props, {}> {
checked={options.trellis_opt_zero}
onChange={this.onChange}
/>
Optimize runs of zero blocks
<span>Optimize runs of zero blocks</span>
</label>
<label>
<input
Expand All @@ -142,13 +141,12 @@ export default class MozJPEGEncoderOptions extends Component<Props, {}> {
checked={options.trellis_opt_table}
onChange={this.onChange}
/>
Optimize after trellis quantization
<span>Optimize after trellis quantization</span>
</label>
<label>
Trellis quantization passes:
<input
<range-input
name="trellis_loops"
type="range"
min="1"
max="50"
value={'' + options.trellis_loops}
Expand Down
32 changes: 19 additions & 13 deletions src/codecs/webp/options.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import { h, Component } from 'preact';
import { bind, inputFieldCheckedAsNumber, inputFieldValueAsNumber } from '../../lib/util';
import { EncodeOptions, WebPImageHint } from './encoder';
import * as styles from './styles.scss';
import '../../components/output/custom-els/RangeInput';

type Props = {
options: EncodeOptions,
Expand Down Expand Up @@ -105,7 +106,7 @@ export default class WebPEncoderOptions extends Component<Props, {}> {
value={'' + WebPImageHint.WEBP_HINT_GRAPH}
onChange={this.onChange}
/>
Discrete tone image (graph, map-tile etc)
<span>Discrete tone image (graph, map-tile etc)</span>
</label>
</div>
);
Expand Down Expand Up @@ -135,6 +136,7 @@ export default class WebPEncoderOptions extends Component<Props, {}> {
onChange={this.onChange}
/>
</label>
<hr />
<label>
<input
name="alpha_compression"
Expand Down Expand Up @@ -164,24 +166,15 @@ export default class WebPEncoderOptions extends Component<Props, {}> {
onChange={this.onChange}
/>
</label>
<label>
Spacial noise shaping:
<range-input
name="sns_strength"
min="0"
max="100"
value={'' + options.sns_strength}
onChange={this.onChange}
/>
</label>
<hr />
<label>
<input
name="autofilter"
type="checkbox"
checked={!!options.autofilter}
onChange={this.onChange}
/>
Auto adjust filter strength
<span>Auto adjust filter strength</span>
</label>
<label>
Filter strength:
Expand Down Expand Up @@ -222,6 +215,7 @@ export default class WebPEncoderOptions extends Component<Props, {}> {
/>
Sharp RGB->YUV conversion
</label>
<hr />
<label>
Passes:
<range-input
Expand All @@ -232,6 +226,16 @@ export default class WebPEncoderOptions extends Component<Props, {}> {
onChange={this.onChange}
/>
</label>
<label>
Spacial noise shaping:
<range-input
name="sns_strength"
min="0"
max="100"
value={'' + options.sns_strength}
onChange={this.onChange}
/>
</label>
<label>
Preprocessing type:
<select
Expand Down Expand Up @@ -295,7 +299,9 @@ export default class WebPEncoderOptions extends Component<Props, {}> {
checked={!!options.exact}
onChange={this.onChange}
/>
Preserve transparent data. Otherwise, pixels with zero alpha will have RGB also zeroed.
<span>
Preserve transparent data. Otherwise, pixels with zero alpha will have RGB also zeroed.
</span>
</label>
</form>
);
Expand Down
38 changes: 19 additions & 19 deletions src/components/Options/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,13 +25,13 @@ import * as browserJP2 from '../../codecs/browser-jp2/encoder';
import * as browserBMP from '../../codecs/browser-bmp/encoder';
import * as browserPDF from '../../codecs/browser-pdf/encoder';
import {
EncoderState,
EncoderType,
EncoderOptions,
encoders,
encodersSupported,
EncoderSupportMap,
encoderMap,
EncoderState,
EncoderType,
EncoderOptions,
encoders,
encodersSupported,
EncoderSupportMap,
encoderMap,
} from '../../codecs/encoders';
import { QuantizeOptions } from '../../codecs/imagequant/quantizer';
import { ResizeOptions } from '../../codecs/resize/resize';
Expand Down Expand Up @@ -150,20 +150,9 @@ export default class Options extends Component<Props, State> {
{titles[orientation][imageIndex]}
{', '}
{encoderMap[encoderState.type].label}

{(downloadUrl && imageFile) && (
<a
class={style.download}
href={downloadUrl}
download={imageFile.name}
title="Download"
>
<DownloadIcon />
</a>
)}
</h2>

<div class={style.inner}>
<div class={style.content}>
<section class={style.picker}>
{encoderSupportMap ?
<select value={encoderState.type} onChange={this.onEncoderTypeChange}>
Expand Down Expand Up @@ -236,6 +225,17 @@ export default class Options extends Component<Props, State> {
file={imageFile}
compareTo={imageFile === sourceImageFile ? undefined : sourceImageFile}
/>

{(downloadUrl && imageFile) && (
<a
class={style.download}
href={downloadUrl}
download={imageFile.name}
title="Download"
>
<DownloadIcon />
</a>
)}
</div>
</div>
);
Expand Down
97 changes: 76 additions & 21 deletions src/components/Options/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,24 +49,82 @@ Note: These styles are temporary. They will be replaced before going live.
}
}

.content {
max-height: calc(75vh - 100px);
overflow: auto;
touch-action: pan-y;
-webkit-overflow-scrolling: touch;
}

.picker {
margin: 5px 15px;

select {
display: block;
width: 100%;
box-sizing: border-box;
-webkit-appearance: none;
appearance: none;
padding: 10px 30px 10px 10px;
background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="25" height="5"><polygon fill="#fff" points="10,0 5,5 0,0"/></svg>') right center no-repeat;
background-color: var(--gray-dark);
opacity: 0.9;
border: none;
font: inherit;
color: white;
transition: box-shadow 150ms ease;

&:hover {
opacity: 1;
}
&:focus {
opacity: 1;
outline: none;
box-shadow: 0 0 0 2px var(--button-fg, #ccc);
}
}
}

.title {
display: flex;
align-items: center;
padding: 10px 15px;
margin: 0 0 12px;
background: rgba(0,0,0,0.9);
font: inherit;
}

label {
display: block;
@extend .row;

input {
vertical-align: middle;
padding: 5px;
margin: 0 10px;
display: flex;
flex-wrap: wrap;

// prevent labels from wrapping below checkboxes
> span {
flex: 1;
}

input[type=checkbox],
input[type=radio] {
margin-right: 8px;
flex: 0;
margin: 2px 8px 0 0;
}

range-input {
display: block;
width: 90%;
flex: 1 0 100%;
margin: 2px 0;
}
}

hr {
height: 1px;
border: none;
margin: 5px 0;
box-shadow: inset 0 0.5px 0 rgba(0, 0, 0, 0.4), inset 0 -0.5px 0 rgba(255, 255, 255, 0.2);
}
}

.picker {
Expand All @@ -85,31 +143,27 @@ Note: These styles are temporary. They will be replaced before going live.
border: none;
font: inherit;
color: white;
}

&:hover {
opacity: 1;
}
&:focus {
opacity: 1;
outline: none;
box-shadow: 0 0 0 2px var(--button-fg, #ccc);
}
hr {
height: 1px;
border: none;
margin: 5px 0;
box-shadow: inset 0 0.5px 0 rgba(0, 0, 0, 0.4), inset 0 -0.5px 0 rgba(255, 255, 255, 0.2);
}
}

.title {
.size-details {
display: flex;
align-items: center;
padding: 10px 15px;
margin: 0 0 12px;
background: rgba(0,0,0,0.9);
font: inherit;
padding: 5px 15px;
background: rgba(0,0,0,0.5);
}

.download {
flex: 0;
margin: 0 0 0 auto;
background: rgba(0,0,0,0.7);
background: rgba(255,255,255,0.1);
border-radius: 50%;
padding: 5px;
width: 16px;
Expand Down Expand Up @@ -159,12 +213,13 @@ Note: These styles are temporary. They will be replaced before going live.
.preprocessors {
padding: 5px 0;
margin: 5px 0;
box-shadow: inset 0 -.5px 0 rgba(0,0,0,0.25), 0 .5px 0 rgba(255,255,255,0.15);
box-shadow: inset 0 -.5px 0 rgba(0,0,0,0.4), 0 .5px 0 rgba(255,255,255,0.2);
}

.toggle {
display: flex;
position: relative;
align-content: center;
font-size: 14px;
box-shadow: inset 0 -.5px 0 rgba(0,0,0,0.4), 0 .5px 0 rgba(255,255,255,0.2);
}
3 changes: 2 additions & 1 deletion src/components/Output/custom-els/RangeInput/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,8 +73,9 @@ class RangeInputElement extends HTMLElement {
const displayValue = labelPrecision ? value.toPrecision(labelPrecision) :
Math.round(value).toString();

this.style.setProperty('--value-percent', percent + '%');
this._valueDisplay.textContent = displayValue;
this.style.setProperty('--value-percent', percent + '%');
this.style.setProperty('--value-width', '' + displayValue.length);
}

private _reflectAttributes() {
Expand Down
Loading