Hide mouse layer in mobile and remove hack for file save in iOS

shannonlui · May 29, 2022 · e84d0c0 · e84d0c0
1 parent 66f9d20
commit e84d0c0
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 12 deletions.
diff --git a/client/package.json b/client/package.json
@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "file-saver": "^2.0.2",
+    "file-saver": "^2.0.5",
     "pica": "^9.0.1",
     "react": "^16.8.6",
     "react-color": "^2.19.3",

diff --git a/client/src/pages/ImageEditor/Canvas/Canvas.js b/client/src/pages/ImageEditor/Canvas/Canvas.js
@@ -222,16 +222,8 @@ class Canvas extends Component {
   }
 
   saveCanvas = () => {
-    var ua = window.navigator.userAgent;
-    var iOS = !!ua.match(/iPad/i) || !!ua.match(/iPhone/i);
-    var webkit = !!ua.match(/WebKit/i);
-    var iOSSafari = iOS && webkit && !ua.match(/CriOS/i);
     const canvasURL = this.canvas.current.toDataURL('image/png');
-    if (iOSSafari) {
-      window.open(canvasURL, '_blank');
-    } else {
-      saveAs(canvasURL, 'pixelartify.png');
-    }
+    saveAs(canvasURL, 'pixelartify.png');
   }
 
   applyColorAdjustments = () => {
@@ -247,7 +239,7 @@ class Canvas extends Component {
       <React.Fragment>
         <canvas ref={this.grid} className={styles.canvas} />
         <canvas ref={this.canvas} className={styles.canvas} />
-        <canvas ref={this.mouseLayer} className={styles.canvas} />
+        <canvas ref={this.mouseLayer} className={`${styles.canvas} ${styles.hideOnSmallScreen}`} />
       </React.Fragment>
     );
   }

diff --git a/client/src/pages/ImageEditor/Canvas/Canvas.module.css b/client/src/pages/ImageEditor/Canvas/Canvas.module.css
@@ -1,3 +1,9 @@
 .canvas {
   position: absolute;
+}
+
+@media only screen and (max-width: 700px) {
+  .hideOnSmallScreen {
+    opacity: 0;
+  }
 }
diff --git a/client/yarn.lock b/client/yarn.lock
@@ -4312,7 +4312,7 @@ [email protected]:
     loader-utils "^1.0.2"
     schema-utils "^1.0.0"
 
-file-saver@^2.0.2:
+file-saver@^2.0.5:
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/file-saver/-/file-saver-2.0.5.tgz#d61cfe2ce059f414d899e9dd6d4107ee25670c38"
   integrity sha512-P9bmyZ3h/PRG+Nzga+rbdI4OEpNDzAVyy74uVO9ATgzLK6VtAsYybF/+TOCvrc0MO793d6+42lLyZTw7/ArVzA==