asdf

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}
+              class={`${style.button} ${style.moreButton} ${
-              onClick={this.onRotateClick}
+                menuOpen ? style.open : ''
-              title="Rotate image"
+              }`}
+              onClick={this.toggleMenu}
             >
-              <RotateIcon />
+              <MoreIcon />
-            </button>
-            <button
-              class={`${style.button} ${altBackground ? style.active : ''}`}
-              onClick={this.toggleBackground}
-              title="Change canvas color"
-            >
-              {altBackground ? (
-                <ToggleBackgroundActiveIcon />
-              ) : (
-                <ToggleBackgroundIcon />
-              )}
             </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>

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;
+  background-color: rgba(29, 29, 29, 0.92);
-  border: 1px solid rgba(0, 0, 0, 0.2);
+  border: 1px solid rgba(0, 0, 0, 0.67);
-  border-radius: 5px;
+  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;
 }
 

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" />