Styled viewport controls & cli copy

2020-12-09 14:28:32 +00:00
parent 9062a75541
commit 21a8f62dcc
9 changed files with 250 additions and 109 deletions
--- a/src/client/lazy-app/Compress/Options/index.tsx
+++ b/src/client/lazy-app/Compress/Options/index.tsx
@ -13,11 +13,11 @@ import {
  encoderMap,
 } from '../../feature-meta';
 import Expander from './Expander';
-import Checkbox from './Checkbox';
 import Toggle from './Toggle';
 import Select from './Select';
 import { Options as QuantOptionsComponent } from 'features/processors/quantize/client';
 import { Options as ResizeOptionsComponent } from 'features/processors/resize/client';
+import { CLIIcon } from 'client/lazy-app/icons';

 interface Props {
  index: 0 | 1;
@ -28,6 +28,7 @@ interface Props {
  onEncoderTypeChange(index: 0 | 1, newType: OutputType): void;
  onEncoderOptionsChange(index: 0 | 1, newOptions: EncoderOptions): void;
  onProcessorOptionsChange(index: 0 | 1, newOptions: ProcessorState): void;
+  onCopyCliClick(index: 0 | 1): void;
 }

 interface State {
@ -106,6 +107,10 @@ export default class Options extends Component<Props, State> {
    this.props.onEncoderOptionsChange(this.props.index, newOptions);
  };

+  private onCopyCliClick = () => {
+    this.props.onCopyCliClick(this.props.index);
+  };
+
  render(
    { source, encoderState, processorState }: Props,
    { supportedEncoderMap }: State,
@ -125,7 +130,18 @@ export default class Options extends Component<Props, State> {
        <Expander>
          {!encoderState ? null : (
            <div>
-              <h3 class={style.optionsTitle}>Edit</h3>
+              <h3 class={style.optionsTitle}>
+                <div class={style.titleAndButtons}>
+                  Edit
+                  <button
+                    class={style.cliButton}
+                    title="Copy npx command"
+                    onClick={this.onCopyCliClick}
+                  >
+                    <CLIIcon />
+                  </button>
+                </div>
+              </h3>
              <label class={style.sectionEnabler}>
                Resize
                <Toggle
--- a/src/client/lazy-app/Compress/Options/style.css
+++ b/src/client/lazy-app/Compress/Options/style.css
@ -81,3 +81,28 @@
  box-sizing: border-box;
  border-radius: 4px;
 }
+
+.title-and-buttons {
+  grid-template-columns: 1fr;
+  grid-auto-columns: max-content;
+  grid-auto-flow: column;
+  display: grid;
+}
+
+.title-button {
+  composes: unbutton from global;
+  svg {
+    --size: 20px;
+    display: block;
+    width: var(--size);
+    height: var(--size);
+  }
+}
+
+.cli-button {
+  composes: title-button;
+
+  svg {
+    stroke: var(--header-text-color);
+  }
+}
--- a/src/client/lazy-app/Compress/Output/index.tsx
+++ b/src/client/lazy-app/Compress/Output/index.tsx
@ -1,4 +1,4 @@
-import { h, Component } from 'preact';
+import { h, Component, Fragment } from 'preact';
 import type PinchZoom from './custom-els/PinchZoom';
 import type { ScaleToOpts } from './custom-els/PinchZoom';
 import './custom-els/PinchZoom';
@ -262,59 +262,60 @@ export default class Output extends Component<Props, State> {
    const originalImage = source && source.preprocessed;

    return (
-      <div
-        class={`${style.output} ${altBackground ? style.altBackground : ''}`}
-      >
-        <two-up
-          legacy-clip-compat
-          class={style.twoUp}
-          orientation={mobileView ? 'vertical' : 'horizontal'}
-          // Event redirecting. See onRetargetableEvent.
-          onTouchStartCapture={this.onRetargetableEvent}
-          onTouchEndCapture={this.onRetargetableEvent}
-          onTouchMoveCapture={this.onRetargetableEvent}
-          onPointerDownCapture={this.onRetargetableEvent}
-          onMouseDownCapture={this.onRetargetableEvent}
-          onWheelCapture={this.onRetargetableEvent}
+      <Fragment>
+        <div
+          class={`${style.output} ${altBackground ? style.altBackground : ''}`}
        >
-          <pinch-zoom
-            class={style.pinchZoom}
-            onChange={this.onPinchZoomLeftChange}
-            ref={linkRef(this, 'pinchZoomLeft')}
+          <two-up
+            legacy-clip-compat
+            class={style.twoUp}
+            orientation={mobileView ? 'vertical' : 'horizontal'}
+            // Event redirecting. See onRetargetableEvent.
+            onTouchStartCapture={this.onRetargetableEvent}
+            onTouchEndCapture={this.onRetargetableEvent}
+            onTouchMoveCapture={this.onRetargetableEvent}
+            onPointerDownCapture={this.onRetargetableEvent}
+            onMouseDownCapture={this.onRetargetableEvent}
+            onWheelCapture={this.onRetargetableEvent}
          >
-            <canvas
-              class={style.pinchTarget}
-              ref={linkRef(this, 'canvasLeft')}
-              width={leftDraw && leftDraw.width}
-              height={leftDraw && leftDraw.height}
-              style={{
-                width: originalImage ? originalImage.width : '',
-                height: originalImage ? originalImage.height : '',
-                objectFit: leftImgContain ? 'contain' : '',
-              }}
-            />
-          </pinch-zoom>
-          <pinch-zoom
-            class={style.pinchZoom}
-            ref={linkRef(this, 'pinchZoomRight')}
-          >
-            <canvas
-              class={style.pinchTarget}
-              ref={linkRef(this, 'canvasRight')}
-              width={rightDraw && rightDraw.width}
-              height={rightDraw && rightDraw.height}
-              style={{
-                width: originalImage ? originalImage.width : '',
-                height: originalImage ? originalImage.height : '',
-                objectFit: rightImgContain ? 'contain' : '',
-              }}
-            />
-          </pinch-zoom>
-        </two-up>
-
+            <pinch-zoom
+              class={style.pinchZoom}
+              onChange={this.onPinchZoomLeftChange}
+              ref={linkRef(this, 'pinchZoomLeft')}
+            >
+              <canvas
+                class={style.pinchTarget}
+                ref={linkRef(this, 'canvasLeft')}
+                width={leftDraw && leftDraw.width}
+                height={leftDraw && leftDraw.height}
+                style={{
+                  width: originalImage ? originalImage.width : '',
+                  height: originalImage ? originalImage.height : '',
+                  objectFit: leftImgContain ? 'contain' : '',
+                }}
+              />
+            </pinch-zoom>
+            <pinch-zoom
+              class={style.pinchZoom}
+              ref={linkRef(this, 'pinchZoomRight')}
+            >
+              <canvas
+                class={style.pinchTarget}
+                ref={linkRef(this, 'canvasRight')}
+                width={rightDraw && rightDraw.width}
+                height={rightDraw && rightDraw.height}
+                style={{
+                  width: originalImage ? originalImage.width : '',
+                  height: originalImage ? originalImage.height : '',
+                  objectFit: rightImgContain ? 'contain' : '',
+                }}
+              />
+            </pinch-zoom>
+          </two-up>
+        </div>
        <div class={style.controls}>
-          <div class={style.zoomControls}>
-            <button class={style.button} onClick={this.zoomOut}>
+          <div class={style.buttonGroup}>
+            <button class={style.firstButton} onClick={this.zoomOut}>
              <RemoveIcon />
            </button>
            {editingScale ? (
@ -338,23 +339,15 @@ export default class Output extends Component<Props, State> {
                <span class={style.zoomValue}>{Math.round(scale * 100)}</span>%
              </span>
            )}
-            <button class={style.button} onClick={this.zoomIn}>
+            <button class={style.lastButton} onClick={this.zoomIn}>
              <AddIcon />
            </button>
          </div>
-          <div class={style.buttonsNoWrap}>
-            <button
-              class={style.button}
-              onClick={this.onRotateClick}
-              title="Rotate image"
-            >
+          <div class={style.buttonGroup}>
+            <button class={style.firstButton} onClick={this.onRotateClick}>
              <RotateIcon />
            </button>
-            <button
-              class={`${style.button} ${altBackground ? style.active : ''}`}
-              onClick={this.toggleBackground}
-              title="Change canvas color"
-            >
+            <button class={style.lastButton} onClick={this.toggleBackground}>
              {altBackground ? (
                <ToggleBackgroundActiveIcon />
              ) : (
@ -363,7 +356,7 @@ export default class Output extends Component<Props, State> {
            </button>
          </div>
        </div>
-      </div>
+      </Fragment>
    );
  }
 }
--- a/src/client/lazy-app/Compress/Output/style.css
+++ b/src/client/lazy-app/Compress/Output/style.css
@ -64,20 +64,11 @@
  }
 }

-.zoom-controls {
+.button-group {
  display: flex;
-
-  & :not(:first-child) {
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
-    margin-left: 0;
-  }
-  & :not(:last-child) {
-    margin-right: 0;
-    border-right-width: 0;
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
-  }
+  position: relative;
+  z-index: 100;
+  margin: 0 3px;
 }

 .button,
@ -85,63 +76,80 @@
  display: flex;
  align-items: center;
  box-sizing: border-box;
-  margin: 4px;
-  background-color: #fff;
-  border: 1px solid rgba(0, 0, 0, 0.2);
-  border-radius: 5px;
-  line-height: 1;
+  background-color: rgba(29, 29, 29, 0.92);
+  border: 1px solid rgba(0, 0, 0, 0.67);
+  border-width: 1px 0 1px 1px;
+  line-height: 1.1;
  white-space: nowrap;
-  height: 36px;
+  height: 39px;
  padding: 0 8px;
+  font-size: 1.2rem;
  cursor: pointer;

-  @media (min-width: 600px) {
-    height: 48px;
-    padding: 0 16px;
-  }
-
  &:focus {
-    box-shadow: 0 0 0 2px var(--button-fg);
+    /* box-shadow: 0 0 0 2px var(--hot-pink); */
+    box-shadow: 0 0 0 2px #fff;
    outline: none;
    z-index: 1;
  }
 }

 .button {
-  color: var(--button-fg);
+  color: #fff;

  &:hover {
-    background-color: #eee;
+    background: rgba(50, 50, 50, 0.92);
  }

  &.active {
-    background: #34b9eb;
+    background: rgba(72, 72, 72, 0.92);
    color: #fff;
-
-    &:hover {
-      background: #32a3ce;
-    }
  }
 }

+.first-button {
+  composes: button;
+  border-radius: 6px 0 0 6px;
+}
+
+.last-button {
+  composes: button;
+  border-radius: 0 6px 6px 0;
+  border-left-width: 1px;
+}
+
 .zoom {
-  color: #625e80;
  cursor: text;
-  width: 6em;
+  width: 7rem;
  font: inherit;
  text-align: center;
  justify-content: center;

  &:focus {
-    box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.2), 0 0 0 2px var(--button-fg);
+    box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.2), 0 0 0 2px #fff;
  }
 }
+span.zoom {
+  color: #939393;
+  font-size: 0.8rem;
+  line-height: 1.2;
+  font-weight: 100;
+}
+input.zoom {
+  font-size: 1.2rem;
+  letter-spacing: 0.05rem;
+  font-weight: 700;
+  text-indent: 3px;
+  color: #fff;
+}

 .zoom-value {
-  position: relative;
-  top: 1px;
  margin: 0 3px 0 0;
-  color: #888;
+  padding: 0 2px;
+  font-size: 1.2rem;
+  letter-spacing: 0.05rem;
+  font-weight: 700;
+  color: #fff;
  border-bottom: 1px dashed #999;
 }

--- a/src/client/lazy-app/Compress/index.tsx
+++ b/src/client/lazy-app/Compress/index.tsx
@ -32,6 +32,7 @@ import WorkerBridge from '../worker-bridge';
 import { resize } from 'features/processors/resize/client';
 import type SnackBarElement from 'shared/custom-els/snack-bar';
 import { Arrow, ExpandIcon } from '../icons';
+import { generateCliInvocation } from '../util/cli';

 export type OutputType = EncoderType | 'identity';

@ -438,6 +439,29 @@ export default class Compress extends Component<Props, State> {
    }));
  };

+  private onCopyCliClick = async (index: 0 | 1) => {
+    try {
+      const cliInvocation = generateCliInvocation(
+        this.state.sides[index].latestSettings.encoderState!,
+        this.state.sides[index].latestSettings.processorState,
+      );
+      await navigator.clipboard.writeText(cliInvocation);
+      const result = await this.props.showSnack(
+        'CLI command copied to clipboard',
+        {
+          timeout: 8000,
+          actions: ['usage', 'dismiss'],
+        },
+      );
+
+      if (result === 'usage') {
+        open('https://github.com/GoogleChromeLabs/squoosh/tree/dev/cli');
+      }
+    } catch (e) {
+      this.props.showSnack(e);
+    }
+  };
+
  /**
   * Debounce the heavy lifting of updateImage.
   * Otherwise, the thrashing causes jank, and sometimes crashes iOS Safari.
@ -805,6 +829,7 @@ export default class Compress extends Component<Props, State> {
        onEncoderTypeChange={this.onEncoderTypeChange}
        onEncoderOptionsChange={this.onEncoderOptionsChange}
        onProcessorOptionsChange={this.onProcessorOptionsChange}
+        onCopyCliClick={this.onCopyCliClick}
      />
    ));

--- a/src/client/lazy-app/icons/index.tsx
+++ b/src/client/lazy-app/icons/index.tsx
@ -72,3 +72,14 @@ export const DownloadIcon = () => (
    <path d="M6.6 2.7h-4v13.2h2.7A2.7 2.7 0 018 18.6a2.7 2.7 0 002.6 2.6h2.7a2.7 2.7 0 002.6-2.6 2.7 2.7 0 012.7-2.7h2.6V2.7h-4a1.3 1.3 0 110-2.7h4A2.7 2.7 0 0124 2.7v18.5a2.7 2.7 0 01-2.7 2.7H2.7A2.7 2.7 0 010 21.2V2.7A2.7 2.7 0 012.7 0h4a1.3 1.3 0 010 2.7zm4 7.4V1.3a1.3 1.3 0 112.7 0v8.8L15 8.4a1.3 1.3 0 011.9 1.8l-4 4a1.3 1.3 0 01-1.9 0l-4-4A1.3 1.3 0 019 8.4z" />
  </svg>
 );
+
+export const CLIIcon = () => (
+  <svg viewBox="0 0 81.3 68.8">
+    <path
+      fill="none"
+      stroke-miterlimit="15.6"
+      stroke-width="6.3"
+      d="M3.1 3.1h75v62.5h-75zm18.8 43.8l12.5-12.5-12.5-12.5m18.7 25h18.8"
+    />
+  </svg>
+);
--- a/src/client/lazy-app/util/cli.ts
+++ b/src/client/lazy-app/util/cli.ts
@ -0,0 +1,51 @@
+/**
+ * Copyright 2020 Google Inc. All Rights Reserved.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { EncoderState, ProcessorState } from '../feature-meta';
+
+// Maps our encoder.type values to CLI parameter names
+const typeMap = new Map<string, string>([
+  ['avif', '--avif'],
+  ['jxl', '--jxl'],
+  ['mozJPEG', '--mozjpeg'],
+  ['oxiPNG', '--oxipng'],
+  ['webP', '--webp'],
+  ['wp2', '--wp2'],
+]);
+
+// Same as JSON.stringify, but with single quotes around the entire value
+// so that shells don’t do weird stuff.
+function cliJson<T>(v: T): string {
+  return "'" + JSON.stringify(v) + "'";
+}
+
+export function generateCliInvocation(
+  encoder: EncoderState,
+  processor: ProcessorState,
+): string {
+  if (!typeMap.has(encoder.type)) {
+    throw Error(`Encoder ${encoder.type} is unsupported in the CLI`);
+  }
+  return [
+    'npx',
+    '@squoosh/cli',
+    ...(processor.resize.enabled
+      ? ['--resize', cliJson(processor.resize)]
+      : []),
+    ...(processor.quantize.enabled
+      ? ['--quant', cliJson(processor.quantize)]
+      : []),
+    typeMap.get(encoder.type)!,
+    cliJson(encoder.options),
+  ].join(' ');
+}
--- a/src/shared/prerendered-app/Intro/index.tsx
+++ b/src/shared/prerendered-app/Intro/index.tsx
@ -351,6 +351,12 @@ export default class Intro extends Component<Props, State> {
              >
                Privacy
              </a>
+              <a
+                class={style.footerLink}
+                href="https://github.com/GoogleChromeLabs/squoosh/tree/dev/cli"
+              >
+                Squoosh CLI
+              </a>
              <a
                class={style.footerLinkWithLogo}
                href="https://github.com/GoogleChromeLabs/squoosh"
--- a/src/shared/prerendered-app/Intro/style.css
+++ b/src/shared/prerendered-app/Intro/style.css
@ -133,11 +133,17 @@

 .footer-items {
  display: grid;
-  justify-content: end;
-  grid-auto-columns: max-content;
-  grid-auto-flow: column;
-  align-items: center;
-  gap: 4rem;
+
+  grid-auto-rows: max-content;
+  justify-items: center;
+  gap: 2rem;
+
+  @media (min-width: 480px) {
+    justify-content: end;
+    grid-auto-flow: column;
+    align-items: center;
+    gap: 4rem;
+  }
 }

 .footer-link {