asdf

2025-11-11 16:26:20 +00:00 · 2020-11-30 09:15:10 -05:00
parent 0e6610c007
commit 9988505b2c
3 changed files with 107 additions and 31 deletions
--- a/src/client/lazy-app/Compress/Output/index.tsx
+++ b/src/client/lazy-app/Compress/Output/index.tsx
@@ -12,6 +12,7 @@ import {
  RemoveIcon,
  ToggleBackgroundActiveIcon,
  RotateIcon,
+  MoreIcon,
 } from '../../icons';
 import { twoUpHandle } from './custom-els/TwoUp/styles.css';
 import type { PreprocessorState } from '../../feature-meta';
@@ -34,6 +35,7 @@ interface State {
  scale: number;
  editingScale: boolean;
  altBackground: boolean;
+  menuOpen: boolean;
 }

 const scaleToOpts: ScaleToOpts = {
@@ -48,6 +50,7 @@ export default class Output extends Component<Props, State> {
    scale: 1,
    editingScale: false,
    altBackground: false,
+    menuOpen: false,
  };
  canvasLeft?: HTMLCanvasElement;
  canvasRight?: HTMLCanvasElement;
@@ -160,6 +163,10 @@ export default class Output extends Component<Props, State> {
    this.pinchZoomLeft.scaleTo(this.state.scale / 1.25, scaleToOpts);
  };

+  private toggleMenu = () => {
+    this.setState(({ menuOpen }) => ({ menuOpen: !menuOpen }));
+  };
+
  private onRotateClick = () => {
    const { preprocessorState: inputProcessorState } = this.props;
    if (!inputProcessorState) return;
@@ -254,7 +261,7 @@ export default class Output extends Component<Props, State> {

  render(
    { mobileView, leftImgContain, rightImgContain, source }: Props,
-    { scale, editingScale, altBackground }: State,
+    { scale, editingScale, altBackground, menuOpen }: State,
  ) {
    const leftDraw = this.leftDrawable();
    const rightDraw = this.rightDrawable();
@@ -341,26 +348,34 @@ export default class Output extends Component<Props, State> {
            <button class={style.button} onClick={this.zoomIn}>
              <AddIcon />
            </button>
-          </div>
-          <div class={style.buttonsNoWrap}>
            <button
-              class={style.button}
-              onClick={this.onRotateClick}
-              title="Rotate image"
+              class={`${style.button} ${style.moreButton} ${
+                menuOpen ? style.open : ''
+              }`}
+              onClick={this.toggleMenu}
            >
-              <RotateIcon />
-            </button>
-            <button
-              class={`${style.button} ${altBackground ? style.active : ''}`}
-              onClick={this.toggleBackground}
-              title="Change canvas color"
-            >
-              {altBackground ? (
-                <ToggleBackgroundActiveIcon />
-              ) : (
-                <ToggleBackgroundIcon />
-              )}
+              <MoreIcon />
            </button>
+            <aside class={`${style.menu} ${menuOpen ? style.open : ''}`}>
+              <button
+                class={style.button}
+                onClick={this.onRotateClick}
+                title="Rotate image"
+              >
+                <RotateIcon />
+              </button>
+              <button
+                class={`${style.button} ${altBackground ? style.active : ''}`}
+                onClick={this.toggleBackground}
+                title="Change canvas color"
+              >
+                {altBackground ? (
+                  <ToggleBackgroundActiveIcon />
+                ) : (
+                  <ToggleBackgroundIcon />
+                )}
+              </button>
+            </aside>
          </div>
        </div>
      </div>
--- a/src/client/lazy-app/Compress/Output/style.css
+++ b/src/client/lazy-app/Compress/Output/style.css
@@ -54,6 +54,7 @@

  /* Allow clicks to fall through to the pinch zoom area */
  pointer-events: none;
+
  & > * {
    pointer-events: auto;
  }
@@ -76,6 +77,7 @@
    border-bottom-left-radius: 0;
    margin-left: 0;
  }
+
  & :not(:last-child) {
    margin-right: 0;
    border-right-width: 0;
@@ -90,46 +92,97 @@
  align-items: center;
  box-sizing: border-box;
  margin: 4px;
-  background-color: #fff;
-  border: 1px solid rgba(0, 0, 0, 0.2);
-  border-radius: 5px;
+  background-color: rgba(29, 29, 29, 0.92);
+  border: 1px solid rgba(0, 0, 0, 0.67);
+  border-radius: 6px;
  line-height: 1;
  white-space: nowrap;
-  height: 36px;
+  height: 39px;
  padding: 0 8px;
  cursor: pointer;

+  /*
  @media (min-width: 600px) {
-    height: 48px;
+    height: 39px;
    padding: 0 16px;
  }
+  */

  &:focus {
-    box-shadow: 0 0 0 2px var(--button-fg);
+    box-shadow: 0 0 0 2px #fff;
    outline: none;
    z-index: 1;
  }
 }

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

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

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

+    /*
    &:hover {
-      background: #32a3ce;
+      background: rgba(72, 72, 72, 0.92);
    }
+    */
+  }
+}
+
+.moreButton {
+  padding: 0 4px;
+
+  &.open {
+    background: rgba(72, 72, 72, 0.92);
+  }
+}
+
+.menu {
+  display: inline-block;
+  position: absolute;
+  right: 0;
+  bottom: 100%;
+  z-index: 100;
+  display: flex;
+  flex-wrap: nowrap;
+  flex-direction: row;
+  align-items: flex-start;
+  display: none;
+
+  &.open {
+    display: block;
+    animation: menuOpen 500ms ease forwards 1;
+  }
+
+  button {
+    margin-top: 8px;
+    margin-bottom: 8px;
+    border-radius: 1.2rem;
+  }
+
+  h5 {
+    text-transform: uppercase;
+    font-size: 0.8rem;
+    color: #fff;
+    margin: 8px 4px;
+    padding: 10px 0 0;
+  }
+}
+
+@keyframes menuOpen {
+  0% {
+    transform: translateY(10px) scale(0.8);
  }
 }

 .zoom {
-  color: #625e80;
+  color: #939393;
  cursor: text;
  width: 6em;
  font: inherit;
@@ -137,7 +190,7 @@
  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;
  }
 }

@@ -145,7 +198,7 @@
  position: relative;
  top: 1px;
  margin: 0 3px 0 0;
-  color: #888;
+  color: #fff;
  border-bottom: 1px dashed #999;
 }

--- a/src/client/lazy-app/icons/index.tsx
+++ b/src/client/lazy-app/icons/index.tsx
@@ -37,6 +37,14 @@ export const RotateIcon = (props: preact.JSX.HTMLAttributes) => (
  </Icon>
 );

+export const MoreIcon = (props: preact.JSX.HTMLAttributes) => (
+  <Icon {...props}>
+    <circle cx="12" cy="6" r="2" fill="#fff" />
+    <circle cx="12" cy="12" r="2" fill="#fff" />
+    <circle cx="12" cy="18" r="2" fill="#fff" />
+  </Icon>
+);
+
 export const AddIcon = (props: preact.JSX.HTMLAttributes) => (
  <Icon {...props}>
    <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />