fix: toasts, tabbing in NewGame and selecting assets in NewGame using…

… arrowkeys
adithyasource · May 31, 2024 · 0f0cb19 · 0f0cb19
1 parent 64ccafe
commit 0f0cb19
Show file tree

Hide file tree

Showing 11 changed files with 196 additions and 91 deletions.
diff --git a/src/App.css b/src/App.css
@@ -118,12 +118,6 @@ select:focus {
   outline: none;
 }
 
-body.user-is-tabbing button:focus,
-body.user-is-tabbing input:focus,
-body.user-is-tabbing select:focus {
-  outline: 1px solid white;
-}
-
 img {
   object-fit: cover !important;
 }

diff --git a/src/App.jsx b/src/App.jsx
@@ -309,6 +309,15 @@ function App() {
             ? "6px"
             : "0px"};
         }
+
+        body.user-is-tabbing button:focus,
+        body.user-is-tabbing input:focus,
+        body.user-is-tabbing select:focus {
+          outline: 1px solid
+            ${globalContext.libraryData.userSettings.currentTheme == "light"
+              ? "#000000"
+              : "#ffffff"};
+        }
       `}</style>
 
       <Toast />
@@ -637,24 +646,22 @@ function App() {
                       </Show>
                       <div
                         className={`grid gap-5 mt-4 foldersDiv
-                        ${
-                          globalContext.libraryData.userSettings.zoomLevel == 0
-                            ? globalContext.libraryData.userSettings.showSideBar
-                              ? "medium:grid-cols-5 grid-cols-4 large:grid-cols-7"
-                              : "medium:grid-cols-6 grid-cols-4 large:grid-cols-8"
-                            : globalContext.libraryData.userSettings
-                                .zoomLevel == 1
-                            ? globalContext.libraryData.userSettings.showSideBar
-                              ? "medium:grid-cols-4 grid-cols-3 large:grid-cols-6"
-                              : "medium:grid-cols-5 grid-cols-3 large:grid-cols-7"
-                            : globalContext.libraryData.userSettings
-                                .zoomLevel == 2
-                            ? globalContext.libraryData.userSettings.showSideBar
-                              ? "medium:grid-cols-3 grid-cols-2 large:grid-cols-5"
-                              : "medium:grid-cols-4 grid-cols-2 large:grid-cols-6"
-                            : ""
-                        }
-                        `}>
+    ${
+      globalContext.libraryData.userSettings.zoomLevel == 0
+        ? globalContext.libraryData.userSettings.showSideBar
+          ? "medium:grid-cols-5 grid-cols-4 large:grid-cols-7"
+          : "medium:grid-cols-6 grid-cols-4 large:grid-cols-8"
+        : globalContext.libraryData.userSettings.zoomLevel == 1
+        ? globalContext.libraryData.userSettings.showSideBar
+          ? "medium:grid-cols-4 grid-cols-3 large:grid-cols-6"
+          : "medium:grid-cols-5 grid-cols-3 large:grid-cols-7"
+        : globalContext.libraryData.userSettings.zoomLevel == 2
+        ? globalContext.libraryData.userSettings.showSideBar
+          ? "medium:grid-cols-3 grid-cols-2 large:grid-cols-5"
+          : "medium:grid-cols-4 grid-cols-2 large:grid-cols-6"
+        : ""
+    }
+    `}>
                         <For each={folder.games}>
                           {(gameName, index) => {
                             return (
@@ -948,21 +955,21 @@ function App() {
                 <div>
                   <div
                     className={`grid gap-5 mt-4 foldersDiv 
-                    ${
-                      globalContext.libraryData.userSettings.zoomLevel == 0
-                        ? globalContext.libraryData.userSettings.showSideBar
-                          ? "medium:grid-cols-5 grid-cols-4 large:grid-cols-7"
-                          : "medium:grid-cols-6 grid-cols-4 large:grid-cols-8"
-                        : globalContext.libraryData.userSettings.zoomLevel == 1
-                        ? globalContext.libraryData.userSettings.showSideBar
-                          ? "medium:grid-cols-4 grid-cols-3 large:grid-cols-6"
-                          : "medium:grid-cols-5 grid-cols-3 large:grid-cols-7"
-                        : globalContext.libraryData.userSettings.zoomLevel == 2
-                        ? globalContext.libraryData.userSettings.showSideBar
-                          ? "medium:grid-cols-3 grid-cols-2 large:grid-cols-5"
-                          : "medium:grid-cols-4 grid-cols-2 large:grid-cols-6"
-                        : ""
-                    }`}>
+${
+  globalContext.libraryData.userSettings.zoomLevel == 0
+    ? globalContext.libraryData.userSettings.showSideBar
+      ? "medium:grid-cols-5 grid-cols-4 large:grid-cols-7"
+      : "medium:grid-cols-6 grid-cols-4 large:grid-cols-8"
+    : globalContext.libraryData.userSettings.zoomLevel == 1
+    ? globalContext.libraryData.userSettings.showSideBar
+      ? "medium:grid-cols-4 grid-cols-3 large:grid-cols-6"
+      : "medium:grid-cols-5 grid-cols-3 large:grid-cols-7"
+    : globalContext.libraryData.userSettings.zoomLevel == 2
+    ? globalContext.libraryData.userSettings.showSideBar
+      ? "medium:grid-cols-3 grid-cols-2 large:grid-cols-5"
+      : "medium:grid-cols-4 grid-cols-2 large:grid-cols-6"
+    : ""
+}`}>
                     <For each={searchResults}>
                       {(gameName, index) => {
                         return (

diff --git a/src/Globals.jsx b/src/Globals.jsx
@@ -688,3 +688,21 @@ export async function updateData() {
     },
   ).then(getData());
 }
+
+let toastTimeout = setTimeout(() => {}, 0);
+
+export function triggerToast(message) {
+  setShowToast(false);
+  setShowToast(true);
+  setToastMessage(message);
+  clearTimeout(toastTimeout);
+  toastTimeout = setTimeout(() => {
+    setShowToast(false);
+  }, 1500);
+}
+
+export function closeToast() {
+  setShowToast(false);
+  setToastMessage(undefined);
+  clearTimeout(toastTimeout);
+}
diff --git a/src/components/Toast.jsx b/src/components/Toast.jsx
@@ -1,5 +1,10 @@
 import { useContext } from "solid-js";
-import { GlobalContext, ApplicationStateContext, UIContext } from "../Globals";
+import {
+  GlobalContext,
+  ApplicationStateContext,
+  UIContext,
+  closeToast,
+} from "../Globals";
 
 export function Toast() {
   let globalContext = useContext(GlobalContext);
@@ -11,9 +16,9 @@ export function Toast() {
       <Show when={uiContext.showToast()}>
         <div
           onClick={() => {
-            uiContext.setShowToast(false);
+            closeToast();
           }}
-          className="  absolute bottom-[20px] w-screen justify-center self-center content-center flex items-center">
+          className="absolute bottom-[20px] w-screen justify-center self-center content-center flex items-center">
           <div
             className={`border-0 p-[10px] rounded-[${
               globalContext.libraryData.userSettings.roundedBorders

diff --git a/src/modals/EditFolder.jsx b/src/modals/EditFolder.jsx
@@ -130,13 +130,13 @@ export function EditFolder() {
         getData();
       }}
       ref={(ref) => {
-        const focusableElements = ref.querySelectorAll(
-          'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])',
-        );
-        const firstElement = focusableElements[0];
-        const lastElement = focusableElements[focusableElements.length - 1];
-
         function handleTab(e) {
+          const focusableElements = ref.querySelectorAll(
+            'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])',
+          );
+          const firstElement = focusableElements[0];
+          const lastElement = focusableElements[focusableElements.length - 1];
+
           if (e.key === "Tab") {
             if (e.shiftKey) {
               if (document.activeElement === firstElement) {

diff --git a/src/modals/EditGame.jsx b/src/modals/EditGame.jsx
@@ -388,13 +388,13 @@ export function EditGame() {
         e.preventDefault();
       }}
       ref={(ref) => {
-        const focusableElements = ref.querySelectorAll(
-          'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])',
-        );
-        const firstElement = focusableElements[0];
-        const lastElement = focusableElements[focusableElements.length - 1];
-
         function handleTab(e) {
+          const focusableElements = ref.querySelectorAll(
+            'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])',
+          );
+          const firstElement = focusableElements[0];
+          const lastElement = focusableElements[focusableElements.length - 1];
+
           if (e.key === "Tab") {
             if (e.shiftKey) {
               if (document.activeElement === firstElement) {

diff --git a/src/modals/GamePopUp.jsx b/src/modals/GamePopUp.jsx
@@ -39,14 +39,14 @@ export function GamePopUp() {
           <div
             className="relative"
             ref={(ref) => {
-              const focusableElements = ref.querySelectorAll(
-                'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])',
-              );
-              const firstElement = focusableElements[0];
-              const lastElement =
-                focusableElements[focusableElements.length - 1];
-
               function handleTab(e) {
+                const focusableElements = ref.querySelectorAll(
+                  'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])',
+                );
+                const firstElement = focusableElements[0];
+                const lastElement =
+                  focusableElements[focusableElements.length - 1];
+
                 if (e.key === "Tab") {
                   if (e.shiftKey) {
                     if (document.activeElement === firstElement) {

diff --git a/src/modals/NewFolder.jsx b/src/modals/NewFolder.jsx
@@ -78,13 +78,13 @@ export function NewFolder() {
         getData();
       }}
       ref={(ref) => {
-        const focusableElements = ref.querySelectorAll(
-          'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])',
-        );
-        const firstElement = focusableElements[0];
-        const lastElement = focusableElements[focusableElements.length - 1];
-
         function handleTab(e) {
+          const focusableElements = ref.querySelectorAll(
+            'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])',
+          );
+          const firstElement = focusableElements[0];
+          const lastElement = focusableElements[focusableElements.length - 1];
+
           if (e.key === "Tab") {
             if (e.shiftKey) {
               if (document.activeElement === firstElement) {