update ink label

2 files changed, 53 insertions, 29 deletions

diff --git a/src/mobile/MobileInterface.tsx b/src/mobile/MobileInterface.tsx
index dc0d70c0b..4c2d20208 100644
--- a/src/mobile/MobileInterface.tsx
+++ b/src/mobile/MobileInterface.tsx
@@ -119,14 +119,6 @@ export default class MobileInterface extends React.Component {
         this.toggleSidebar();
     }
 
-    getInkStatus = () => {
-        if (this._ink) {
-            return "ink off";
-        } else {
-            return "ink on";
-        }
-    }
-
     onSwitchUpload = async () => {
         let width = 300;
         let height = 300;
@@ -167,6 +159,14 @@ export default class MobileInterface extends React.Component {
         } else {
             header.textContent = "menu";
         }
+
+        // for updating ink button
+        let ink = document.getElementById("ink") as HTMLElement;
+        if (this._ink) {
+            ink.textContent = "ink off";
+        } else {
+            ink.textContent = "ink on";
+        }
     }
 
     back = () => {
@@ -310,7 +310,7 @@ export default class MobileInterface extends React.Component {
                 <div>
                     <div className="navbar">
                         <div className="header" id="header">MENU</div>
-                        <FontAwesomeIcon className="home" icon="home" onClick={this.returnHome} />
+
                         <div className="toggle-btn" id="menuButton" onClick={this.toggleSidebar}>
                             <span></span>
                             <span></span>
@@ -323,6 +323,7 @@ export default class MobileInterface extends React.Component {
                         </div>
                     </div>
                     <div className="sidebar" id="sidebar">
+                        <FontAwesomeIcon className="home" icon="home" onClick={this.returnHome} />
                         <div>
                             {buttons}
                             {/* <div className="item" key="library" onClick={this.openLibrary}>
@@ -338,7 +339,7 @@ export default class MobileInterface extends React.Component {
                             <div className="item" key="settings" onClick={() => SettingsManager.Instance.open()}>
                                 Settings
                             </div>
-                            <div className="item" key="ink" onClick={() => this.onSwitchInking()}>
+                            <div className="ink" key="ink" id="ink" onClick={() => this.onSwitchInking()}>
                                 Ink
                             </div>
                         </div>
@@ -353,8 +354,10 @@ export default class MobileInterface extends React.Component {
             return (
                 <div>
                     <div className="navbar">
-                        <div className="header" id="header">menu</div>
-                        <FontAwesomeIcon className="home" icon="home" onClick={this.returnHome} />
+                        <div className="header" id="header">
+                            menu
+                        </div>
+
                         <div className="toggle-btn" id="menuButton" onClick={this.toggleSidebar}>
                             <span></span>
                             <span></span>
@@ -367,14 +370,15 @@ export default class MobileInterface extends React.Component {
                         </div>
                     </div>
                     <div className="sidebar" id="sidebar">
+                        <FontAwesomeIcon className="home" icon="home" onClick={this.returnHome} />
                         <div className="back" onClick={this.back}>
                             &#8592;
                         </div>
                         <div>
                             {buttons}
                         </div>
-                        <div className="item" key="ink" onClick={() => this.onSwitchInking()}>
-                            {this.getInkStatus()}
+                        <div className="item" key="ink" id="ink" onClick={() => this.onSwitchInking()}>
+                            ink
                         </div>
                         <div className="item" key="home" onClick={this.returnHome}>
                             Home
@@ -542,9 +546,9 @@ export default class MobileInterface extends React.Component {
     render() {
         // const content = this.currentView === "main" ? this.mainContent :
         //     this.currentView === "ink" ? this.inkContent :
-        //         this.currentView === "upload" ? this.uploadContent : <></>;
+        //         this.currentView === "upload" ? this.uploadContent : <></>;onDragOver={this.onDragOver}
         return (
-            <div className="mobileInterface-container" onDragOver={this.onDragOver}>
+            <div className="mobileInterface-container" >
                 {/* <DocumentDecorations />
                 <GestureOverlay>
                     {this.renderView ? this.renderView() : this.renderDefaultContent()}
@@ -553,8 +557,9 @@ export default class MobileInterface extends React.Component {
                 <SettingsManager />
                 <GestureOverlay>
                     {this.displayWorkspaces()}
+                    {this.renderDefaultContent()}
                 </GestureOverlay>
-                {this.renderDefaultContent()}
+
                 {/* </GestureOverlay> */}
                 {/* <DictationOverlay />
                 <SharingManager />
diff --git a/src/mobile/MobileMenu.scss b/src/mobile/MobileMenu.scss
index 5042415a0..7f286efc4 100644
--- a/src/mobile/MobileMenu.scss
+++ b/src/mobile/MobileMenu.scss
@@ -80,16 +80,16 @@ body {
 .navbar .toggle-btn.active span:nth-child(3) {
     top: 50%;
 }
-.navbar .home {
-    position: absolute;
-    top: -135px;
-    right: 80px;
-    font-size: 40;
-    user-select: none;
-    text-transform: uppercase;
-    font-family: Arial, Helvetica, sans-serif;
-    z-index: 200;
-}
+// .navbar .home {
+//     position: relative;
+//     right: 5px;
+//     transform: translate(50%, -50%);
+//     font-size: 40;
+//     user-select: none;
+//     text-transform: uppercase;
+//     font-family: Arial, Helvetica, sans-serif;
+//     z-index: 200;
+// }
 
 .sidebar {
     position: absolute;
@@ -102,8 +102,9 @@ body {
     background-color: whitesmoke;
     transition: all 400ms ease 50ms;
     padding: 20px;
-    overflow-y: auto;
-    -webkit-overflow-scrolling: touch;
+    // overflow-y: auto;
+    // -webkit-overflow-scrolling: touch;
+    
     // border-right: 5px solid black;
 }
 
@@ -118,6 +119,24 @@ body {
     font-size: 35px;
     text-transform: uppercase;
     color: black;
+    
+}
+
+.sidebar .ink {
+    width: 100%;
+    padding: 13px 12px;
+    border-bottom: 1px solid rgba(200, 200, 200, 0.7);
+    font-family: Arial, Helvetica, sans-serif;
+    font-style: normal;
+    font-weight: normal;
+    user-select: none;
+    font-size: 35px;
+    text-transform: uppercase;
+    color: black;
+}
+
+.sidebar .ink:focus {
+    outline: 1px solid blue;
 }
 
 .sidebar .home {