Floating action button. Putting the lock button in a floating action …

…button. Some css and code tweaks and what not. (#5)
alexjyong · Oct 1, 2024 · d525849 · d525849
1 parent 135bd5d
commit d525849
Show file tree

Hide file tree

Showing 8 changed files with 143 additions and 33 deletions.
diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
@@ -23,6 +23,7 @@ jobs:
             rm -rf .github &&
             cd src &&
             cordova platform add android --verbose &&
+            cordova plugin add cordova-plugin-x-toast &&
             cordova plugin add cordova-plugin-screen-pinning --verbose &&
             cordova build --verbose"
 

diff --git a/README.md b/README.md
@@ -3,9 +3,7 @@
 <img width="242" alt="logo" src="https://github.com/user-attachments/assets/180a2ee3-9c03-4cf4-8b18-4b78cac6258d">
 
 <br>
-
-<img width="242" alt="screenshot_of_app" src="https://github.com/user-attachments/assets/0a08abee-d175-4f7a-8541-7f2f2753e67c">
-
+<img width="242" alt="screenshot_of_app" src="https://github.com/user-attachments/assets/df7dc7b5-bfa2-46c9-84a3-d519d4de7d77">
 
 Simple little paint application for kids.
 
@@ -35,11 +33,11 @@ If you're curious or want to make your own custom tweaks, you can build BabbyPai
 3. Now you're ready to prepare the environment and build the APK for Android:
     ```bash
     docker run --rm -i -v $PWD:/workspace -w /workspace --privileged ghcr.io/alexjyong/babbypaint:main sh -c "
-      rm -rf .github &&
-      cd src &&
-      cordova platform add android --verbose &&
-      cordova plugin add cordova-plugin-screen-pinning --verbose &&
-      cordova build --verbose"
+            cd src &&
+            cordova platform add android --verbose &&
+            cordova plugin add cordova-plugin-x-toast &&
+            cordova plugin add cordova-plugin-screen-pinning --verbose &&
+            cordova build --verbose"
     ```
 
 4. Once the build process finishes, you’ll have your APK ready in the `/src/platforms/android/app/build/outputs/apk/` directory.

diff --git a/src/config.xml b/src/config.xml
@@ -1,5 +1,5 @@
 <?xml version='1.0' encoding='utf-8'?>
-<widget id="dev.alexjyong.babbypaint" version="0.0.2" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
+<widget id="dev.alexjyong.babbypaint" version="0.0.3" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
     <name>BabbyPaint</name>
     <description>Simple Paint app for kids</description>
     <author email="[email protected]" href="https://alexjyong.dev">

diff --git a/src/package-lock.json b/src/package-lock.json
diff --git a/src/package.json b/src/package.json
@@ -1,7 +1,7 @@
 {
   "name": "dev.alexjyong.babbypaint",
   "displayName": "BabbyPaint",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "A simple paint app for kids",
   "main": "index.js",
   "scripts": {
@@ -14,11 +14,13 @@
   "license": "Apache-2.0",
   "devDependencies": {
     "cordova-android": "^13.0.0",
-    "cordova-plugin-screen-pinning": "^1.1.3"
+    "cordova-plugin-screen-pinning": "^1.1.3",
+    "cordova-plugin-x-toast": "^2.7.3"
   },
   "cordova": {
     "plugins": {
-      "cordova-plugin-screen-pinning": {}
+      "cordova-plugin-screen-pinning": {},
+      "cordova-plugin-x-toast": {}
     },
     "platforms": [
       "android"

diff --git a/src/www/css/index.css b/src/www/css/index.css
@@ -29,7 +29,6 @@ canvas {
     background: #FFF;
     border-radius: 5px;
     box-shadow: 0 4px 0 0 #E0E0E0;
-    cursor: url(../img/cursor.png), crosshair;
     max-width: 90%;
     max-height: 60%;
     display: block;
@@ -107,6 +106,63 @@ button.utility:hover {
     background: #56A64C;
 }
 
+/* FAB container */
+.fab-container {
+    position: fixed;
+    right: 20px;
+    bottom: 20px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+/* Main FAB button */
+/* General FAB styling */
+.fab {
+    position: fixed;
+    bottom: 20px;
+    right: 20px;
+    width: 56px;
+    height: 56px;
+    border-radius: 50%;
+    background-color: #68B25B;
+    color: #fff;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    box-shadow: 0 3px 0 0 #6A845F;
+    cursor: pointer;
+    transition: transform 0.3s;
+}
+
+/* Sub-FAB styling */
+.sub-fab {
+    position: fixed;
+    bottom: 80px; /* Adjust this to control distance from the main FAB */
+    right: 20px;
+    width: 48px;
+    height: 48px;
+    border-radius: 50%;
+    background-color: #68B25B;
+    color: #fff;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    box-shadow: 0 3px 0 0 #6A845F;
+    cursor: pointer;
+    transform: scale(0); /* Initially hidden */
+    opacity: 0; /* Initially invisible */
+    pointer-events: none; /* Disable click events initially */
+    transition: transform 0.3s, opacity 0.3s;
+}
+
+/* FAB buttons when expanded */
+.fab.expanded + .sub-fab {
+    transform: scale(1);
+    opacity: 1;
+    pointer-events: all; /* Enable click events */
+}
+
 /* Responsive adjustments */
 @media only screen and (orientation: landscape) {
     .app-container {

diff --git a/src/www/index.html b/src/www/index.html
@@ -8,8 +8,8 @@
     <title>Babby Paint! 🖌️</title>
     <link rel="stylesheet" href="css/index.css" type="text/css" media="screen" title="no title">
     <link href='https://fonts.googleapis.com/css?family=Open+Sans:300' rel='stylesheet' type='text/css'>
-    </head>
-    <body>
+</head>
+<body>
     <div class="app-container">
         <canvas id="mainCanvas"></canvas>
         <div class="controls">
@@ -25,11 +25,14 @@
                 <li class="grey"></li>
             </ul>
             <button class="utility" id="clearButton">Clear Canvas</button>
-            <button class="utility" id="lockButton">Lock</button>
+        </div>
+        <!-- Floating Action Button (FAB) -->
+        <div class="fab-container">
+            <button class="fab main-fab" id="fabButton">+</button>
+            <button class="fab sub-fab" id="lockButton">Lock app</button>
         </div>
     </div>
     <script src="cordova.js"></script>
     <script src="js/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script>
     <script src="js/index.js" type="text/javascript" charset="utf-8"></script>
-    </body>
-
+</body>
diff --git a/src/www/js/index.js b/src/www/js/index.js
@@ -8,6 +8,7 @@ var mouseDown = false;
 
 var lockButton = $('#lockButton');
 var clearButton = $('#clearButton');
+var fabButton = $('#fabButton'); // Main FAB button
 var isLocked = false;
 
 // Function to resize the canvas
@@ -117,13 +118,21 @@ var tapCountLock = 0;
 
 // Lock button event
 lockButton.on('click', function() {
-
     if (!isLocked){
         cordova.plugins.screenPinning.enterPinnedMode(
             function () {
                 console.log("Pinned mode activated!");
                 isLocked = true;
-                lockButton.text('Tap 4 times quickly to unlock');
+
+                window.plugins.toast.hide();
+                window.plugins.toast.showWithOptions(
+                    {
+                      message: "Tap 4 times quickly to unlock",
+                      duration: "short", // which is 2000 ms. "long" is 4000. Or specify the nr of ms yourself.
+                      position: "top"
+                    }
+                  );
+                lockButton.text('Unlock app');
             },
             function (errorMessage) {
                 console.log("Error activating pinned mode:", errorMessage);
@@ -137,7 +146,14 @@ lockButton.on('click', function() {
         // On the first tap, skip comparison logic but update the button text immediately
         if (lastTapLock === 0 || currentTime - lastTapLock >= 1000) {  
             tapCountLock = 1; // First tap starts the counting at 1
-            lockButton.text('Tap 3 more times quickly to unlock');  // Immediate feedback on first tap
+            window.plugins.toast.hide();
+            window.plugins.toast.showWithOptions(
+                {
+                  message: "Tap 3 more times quickly to unlock",
+                  duration: "short", // which is 2000 ms. "long" is 4000. Or specify the nr of ms yourself.
+                  position: "top"
+                }
+              );
         } else { 
             tapCountLock++;
             if (tapCountLock >= 4) {
@@ -146,7 +162,7 @@ lockButton.on('click', function() {
                         console.log("Pinned mode deactivated!");
                         isLocked = false;
                         tapCountLock = 0;
-                        lockButton.text('Lock'); 
+                        lockButton.text('Lock app');
                     },
                     function (errorMessage) {
                         console.log("Error deactivating pinned mode:", errorMessage);
@@ -155,26 +171,33 @@ lockButton.on('click', function() {
                 lastTapLock = 0; 
                 tapCountLock = 0; 
             } else {
-                lockButton.text(`Tap ${4 - tapCountLock} more times quickly to unlock`);  
+                var message = "";
+                if (3 - tapCountLock == 2) {
+                    message = `Tap 1 more time quickly to unlock.`; 
+                }
+                else {
+                    message = `Tap ${4 - tapCountLock} more times quickly to unlock.` 
+                }
+                window.plugins.toast.hide();
+                window.plugins.toast.showWithOptions(
+                    {
+                      message: message,
+                      duration: "short", // which is 2000 ms. "long" is 4000. Or specify the nr of ms yourself.
+                      position: "top"
+                    }
+                  ); 
             }
         }
 
         lastTapLock = currentTime;
 
-        // Set a timeout to reset the button text after 1000 ms (1 second) of inactivity
-        resetLockTextTimeout = setTimeout(function() {
-            lockButton.text('Lock');
-        }, 1000);
-
     }
-
 });
 
+// Clear canvas on 3 button click
 var resetClearTextTimeout; 
 var lastTapClear = 0; 
 var tapCountClear = 0;
-
-// Clear canvas on 3 button click
 clearButton.on('click', function() {
     clearTimeout(resetClearTextTimeout); // Clear any existing timeout
     var currentTime = Date.now();
@@ -190,7 +213,13 @@ clearButton.on('click', function() {
             tapCountClear = 0;
             clearButton.text('Clear Canvas'); 
         } else {
-            clearButton.text(`Tap ${3 - tapCountClear} more times quickly to clear`);  
+            if (3 - tapCountClear == 2) {
+                clearButton.text(`Tap 1 more time quickly to clear`); 
+            }
+            else {
+                clearButton.text(`Tap ${3 - tapCountClear} more times quickly to clear`); 
+            }
+
         }
     }
 
@@ -202,3 +231,11 @@ clearButton.on('click', function() {
     }, 1000);
 });
 
+// Toggle FAB expansion to show or hide the lock button
+fabButton.on('click', function() {
+    console.log('FAB clicked');
+    $(this).toggleClass('expanded');
+    $('.sub-fab').toggleClass('expanded');
+    console.log('FAB class:', $(this).attr('class'));
+    console.log('Sub-FAB class:', $('.sub-fab').attr('class'));
+});