From ba0d831691e81903ab1fb9482ba5dcad0a769881 Mon Sep 17 00:00:00 2001
From: Lionel Han <47760119+IGoByJoe@users.noreply.github.com>
Date: Thu, 11 Jun 2020 23:40:49 -0700
Subject: functioning with new ink

---
 src/client/views/AntimodeMenu.scss                 |  9 ++---
 .../collectionFreeForm/InkOptionsMenu.scss         | 38 ++++++++++++++++++++--
 .../collectionFreeForm/InkOptionsMenu.tsx          | 16 +++++++--
 src/mobile/MobileInterface.tsx                     | 15 +++++----
 src/mobile/MobileMenu.scss                         |  9 +++--
 5 files changed, 71 insertions(+), 16 deletions(-)

(limited to 'src')

diff --git a/src/client/views/AntimodeMenu.scss b/src/client/views/AntimodeMenu.scss
index 9c5bf0a1f..170631422 100644
--- a/src/client/views/AntimodeMenu.scss
+++ b/src/client/views/AntimodeMenu.scss
@@ -53,18 +53,19 @@
         display: flex;
     
         &.with-rows {
-            flex-direction: column
+            flex-direction: column-reverse;
         }
     
         .antimodeMenu-row {
             display: flex;
-            height: 35px;
+            height: 100%;
+            width:100%;
         }
     
         .antimodeMenu-button {
             background-color: transparent;
-            width: 35px;
-            height: 35px;
+            width: 100px;
+            height: 100px;
     
             &.active {
                 background-color: #121212;
diff --git a/src/client/views/collections/collectionFreeForm/InkOptionsMenu.scss b/src/client/views/collections/collectionFreeForm/InkOptionsMenu.scss
index 3671a84b9..72fdf5af9 100644
--- a/src/client/views/collections/collectionFreeForm/InkOptionsMenu.scss
+++ b/src/client/views/collections/collectionFreeForm/InkOptionsMenu.scss
@@ -4,7 +4,6 @@
         height: 100%;
     }
 
-
 }
 
 .sketch-picker {
@@ -31,7 +30,42 @@
         background: #323232;
         display: block;
 
-
     }
 }
 
+@media only screen and (max-width: 1000px) {
+    .antimodeMenu-button {
+        .color-preview {
+            width: 100%;
+            height: 100%;
+        }
+    
+    }
+    
+    .sketch-picker {
+        background: #323232;
+    
+        .flexbox-fit {
+            background: #323232;
+        }
+    }
+    
+    .btn-group {
+        display: grid;
+        grid-template-columns: auto auto;
+        /* Make the buttons appear below each other */
+    }
+    
+    .btn2-group {
+        display: block;
+        background: #323232;
+        grid-template-columns: auto;
+    
+        /* Make the buttons appear below each other */
+        .antimodeMenu-button {
+            background: #323232;
+            display: block;
+    
+        }
+    }
+}
diff --git a/src/client/views/collections/collectionFreeForm/InkOptionsMenu.tsx b/src/client/views/collections/collectionFreeForm/InkOptionsMenu.tsx
index 5a27f74e5..46f7bc2e2 100644
--- a/src/client/views/collections/collectionFreeForm/InkOptionsMenu.tsx
+++ b/src/client/views/collections/collectionFreeForm/InkOptionsMenu.tsx
@@ -11,6 +11,8 @@ import { Utils } from "../../../../Utils";
 import GestureOverlay from "../../GestureOverlay";
 import { Doc } from "../../../../fields/Doc";
 
+
+
 @observer
 export default class InkOptionsMenu extends AntimodeMenu {
     static Instance: InkOptionsMenu;
@@ -23,6 +25,8 @@ export default class InkOptionsMenu extends AntimodeMenu {
     @observable _colorBtn = false;
     @observable _widthBtn = false;
 
+
+
     constructor(props: Readonly<{}>) {
         super(props);
         InkOptionsMenu.Instance = this;
@@ -113,7 +117,7 @@ export default class InkOptionsMenu extends AntimodeMenu {
             title="Bezier changer"
             key="bezier"
             onPointerDown={e => this.changeBezier(e)}
-            style={ { backgroundColor:ActiveInkBezierApprox() ? "121212":"" } }>
+            style={{ backgroundColor: ActiveInkBezierApprox() ? "121212" : "" }}>
             B
         </button>;
     }
@@ -126,7 +130,15 @@ export default class InkOptionsMenu extends AntimodeMenu {
             this.widthPicker,
             this.colorPicker,
         ];
-        return this.getElement(buttons);
+
+        const mobileButtons = [
+            this.shapeButtons,
+            this.bezierButton,
+            this.widthPicker,
+            this.colorPicker,
+        ];
+
+        return (window.innerWidth < 1000 ? this.getElement(mobileButtons) : this.getElement(buttons));
     }
 }
 Scripting.addGlobal(function activatePen(penBtn: any) {
diff --git a/src/mobile/MobileInterface.tsx b/src/mobile/MobileInterface.tsx
index ba52e3df9..3a7a1594b 100644
--- a/src/mobile/MobileInterface.tsx
+++ b/src/mobile/MobileInterface.tsx
@@ -1481,20 +1481,20 @@ export class MobileInterface extends React.Component {
         const button = document.getElementById("inkButton") as HTMLElement;
         // const color = InkingControl.Instance.selectedColor;
         const color = "lightpink";
-        button.style.backgroundColor = this._ink ? "white" : color;
+        button.style.backgroundColor = this._ink ? "white" : "black";
         button.style.color = this._ink ? "black" : "white";
 
         if (!this._ink) {
             console.log("INK IS ACTIVE");
             // InkingControl.Instance.switchTool(InkTool.Pen);
             Doc.SetSelectedTool(InkTool.Pen);
-            InkOptionsMenu.Instance.jumpTo(300, 300);
+            //InkOptionsMenu.Instance.jumpTo(300, 300);
             this._ink = true;
         } else {
             console.log("INK IS INACTIVE");
             // InkingControl.Instance.switchTool(InkTool.None);
             Doc.SetSelectedTool(InkTool.None);
-            InkOptionsMenu.Instance.fadeOut(true);
+            //InkOptionsMenu.Instance.fadeOut(true);
             this._ink = false;
         }
     }
@@ -1502,7 +1502,11 @@ export class MobileInterface extends React.Component {
     inkMenu = () => {
         if (this._activeDoc._viewType === "docking") {
             if (this._ink) {
-                return <InkOptionsMenu />
+                console.log("here");
+                return <div className="colorSelector">
+                    <InkOptionsMenu />
+                </div>
+
             }
         }
     }
@@ -1794,9 +1798,8 @@ export class MobileInterface extends React.Component {
                     {this.drawInk()}
                     {this.uploadAudioButton()}
                     {/* {this.colorTool()} */}
-                    {this.inkMenu()}
-                    <InkOptionsMenu />
                 </div>
+                {this.inkMenu()}
                 <GestureOverlay>
                     {this.displayWorkspaces()}
                     {this.renderDefaultContent()}
diff --git a/src/mobile/MobileMenu.scss b/src/mobile/MobileMenu.scss
index 6d450bc6d..54156a735 100644
--- a/src/mobile/MobileMenu.scss
+++ b/src/mobile/MobileMenu.scss
@@ -333,12 +333,17 @@ body {
     top: -450px;
 }
 
-.toolbar .colorSelector {
+.colorSelector {
+    position: absolute;
+    top: 550px;
+    left: 300px;
+    transform: translate(-50%, 0);
+    z-index: 100;
     display: inline-flex;
     width: max-content;
-    padding: 5px;
     height: max-content;
     pointer-events: all;
+    font-size: 90px;
 }
 
 .widthSelector {
-- 
cgit v1.2.3-70-g09d2