SG's Little Fixes (#242)

* add username to report error payload, fixes GTCMT/earsketch#2584 * apply dark mode to modals unfortunately, we need to add this to the `<body>` tag because modals (and perhaps script menus eventually) get moved outside of the main div by headless ui, so they don't take on the dark mode classes without this being at a higher level. Tailwind recommends this being at the body or html tag level, so I think this little dom manipulation is ok. * reorganize freesound results rows with selection highlighting fixes GTCMT/earsketch#2566 * increase contrast on notification text colors this is mentioned in GTCMT/earsketch#2260 * prevent ResizeObserver loop limit errors fixes GTCMT/earsketch#2283 * remove unused theme selector * add comments * update freesound results to inline flex * move back under label element * support background colors on popup notification * move resizeObserver into useEffect * Update Tabs.tsx * consistent spacing on top and bottom of results
earsketch · Jul 29, 2021 · edd92bf · edd92bf
1 parent 675f125
commit edd92bf
Show file tree

Hide file tree

Showing 8 changed files with 114 additions and 68 deletions.
diff --git a/css/earsketch/styles.less b/css/earsketch/styles.less
@@ -263,29 +263,6 @@ button:focus {
     align-items: center;
     width: 100%;
 
-    //#notification-bar-container {
-    //}
-
-    /* status messages */
-    .notificationBar {
-      margin: auto;
-      //position: absolute;
-      z-index: 999;
-      //top: 40px;
-      //right: 10px;
-      -webkit-border-radius: 5px;
-      -moz-border-radius: 5px;
-      border-radius: 0;
-      //padding: 8px 10px;
-      background-color: #dff0d8;
-      -webkit-transition: all linear 0.3s;
-      transition: all linear 0.3s;
-
-      &.ng-hide {
-        opacity: 0;
-      }
-    }
-
     #top-header-nav-links {
       overflow: hidden;
       text-overflow: ellipsis;
@@ -307,6 +284,38 @@ button:focus {
   }
 }
 
+/* status messages */
+.notificationBar {
+  margin: auto;
+  z-index: 999;
+  -webkit-border-radius: 5px;
+  -moz-border-radius: 5px;
+  border-radius: 0;
+  //background-color: #dff0d8;
+  -webkit-transition: all linear 0.3s;
+  transition: all linear 0.3s;
+
+  &.ng-hide {
+    opacity: 0;
+  }
+}
+
+.notificationBar.normal {
+  color: #dff0d8;
+}
+
+.notificationBar.success {
+  color: #9ffa00;
+}
+
+.notificationBar.failure1 {
+  color: #f2dede;
+}
+
+.notificationBar.failure2 {
+  color: #ff8080;
+}
+
 .notificationPopup {
   color: white;
   margin: auto;

diff --git a/css/earsketch/theme_dark.less b/css/earsketch/theme_dark.less
@@ -76,6 +76,22 @@ a,
   }
 }
 
+.notificationPopup.normal {
+  color: #dff0d8;
+}
+
+.notificationPopup.success {
+  color: #9ffa00;
+}
+
+.notificationPopup.failure1 {
+  color: #f2dede;
+}
+
+.notificationPopup.failure2 {
+  color: #ff8080;
+}
+
 .ui-layout-column > .ui-splitbar, .ui-layout-row > .ui-splitbar {
   background-color: @bg;
 }

diff --git a/css/earsketch/theme_light.less b/css/earsketch/theme_light.less
@@ -80,6 +80,25 @@ a,
   }
 }
 
+.notificationPopup.normal {
+
+}
+
+.notificationPopup.success {
+  color: #0f5132;
+  background-color: #d1e7dd;
+}
+
+.notificationPopup.failure1 {
+  color: #842029;
+  background-color: #f8d7da;
+}
+
+.notificationPopup.failure2 {
+  color: #842029;
+  background-color: #f8d7da;
+}
+
 .ui-layout-column > .ui-splitbar, .ui-layout-row > .ui-splitbar {
   background-color: black;
 }

diff --git a/scripts/src/app/App.tsx b/scripts/src/app/App.tsx
@@ -391,6 +391,14 @@ export const App = () => {
         })()
     }, [])
 
+    useEffect(() => {
+        if (theme === "dark") {
+            document.body.classList.add("dark")
+        } else {
+            document.body.classList.remove(("dark"))
+        }
+    }, [theme])
+
     const login = async (username: string, password: string) => {
         esconsole("Logging in", ["DEBUG", "MAIN"])
         saveAll()
@@ -538,7 +546,7 @@ export const App = () => {
         }
     }
 
-    return <div className={theme === "dark" ? "dark" : ""}>
+    return <div>
         {/* dynamically set the color theme */}
         <link rel="stylesheet" type="text/css" href={`css/earsketch/theme_${theme}.css`} />
 

diff --git a/scripts/src/app/ErrorForm.tsx b/scripts/src/app/ErrorForm.tsx
@@ -3,6 +3,7 @@ import { useSelector } from "react-redux"
 import { REPORT_LOG } from "../esconsole"
 
 import * as app from "../app/appState"
+import * as user from "../user/userState"
 import * as editor from "../ide/Editor"
 import * as ESUtils from "../esutils"
 import * as userNotification from "../user/notification"
@@ -26,6 +27,7 @@ async function postJSON(endpoint: string, data: any) {
 
 export const ErrorForm = ({ email: storedEmail, close }: { email: string, close: () => void }) => {
     const language = useSelector(app.selectScriptLanguage)
+    const username = useSelector(user.selectUserName)
     const [name, setName] = useState("")
     const [email, setEmail] = useState(storedEmail)
     const [description, setDescription] = useState("")
@@ -34,6 +36,7 @@ export const ErrorForm = ({ email: storedEmail, close }: { email: string, close:
         let body = ["@xfreeman", "@heerman", "@manodrum"].join(" ") + "\r\n"
         if (name || email) {
             body += "\r\n**Reported by:** " + (name ? name + " " : "") + (email ? `[${email}]` : "") + "\r\n"
+            body += username ? "\r\n**Logged in username:** " + username + "\r\n" : ""
         }
 
         let localStorageDump = ""

diff --git a/scripts/src/app/SoundUploader.tsx b/scripts/src/app/SoundUploader.tsx
@@ -319,24 +319,25 @@ const FreesoundTab = ({ close }: { close: () => void }) => {
             </div>
             {searched && <div className="modal-section-header justify-start mb-3">{t("results")}</div>}
             {results && results.length > 0 &&
-                <div className="overflow-y-auto border p-3 border-gray-300" style={{ maxHeight: "300px" }}>
-                    {results.map((result, index) => <div key={index}>
-                        <label>
-                            <input type="radio" style={{ marginRight: "0.75rem" }} checked={index === selected}
-                                onChange={e => {
-                                    if (e.target.checked) {
-                                        setSelected(index)
-                                        setKey(result.name.replace(/[^A-Za-z0-9]/g, "_").toUpperCase())
-                                        setError("")
-                                    }
-                                }} />
-                            {result.name}: {result.bpm} bpm. {t("soundUploader.freesound.uploadedBy", { userName: result.creator })}
-                        </label>
-                        <audio controls controlsList="nodownload" preload="none">
-                            <source src={result.previewURL} type="audio/mpeg" />
-                            Your browser does not support the audio element.
-                        </audio>
-                        <hr className="my-3 border-gray-300" />
+                <div className="overflow-y-auto border border-gray-300 dark:border-gray-500" style={{ maxHeight: "300px" }}>
+                    {results.map((result, index) => <div key={index} className={"border-b border-gray-300 " + (index === selected ? "bg-blue-200 dark:bg-blue-900" : "")}>
+                        <div className="pt-2 px-3">
+                            <label className="mb-2 inline-flex items-center">
+                                <input type="radio" style={{ marginRight: "0.75rem" }} checked={index === selected}
+                                    onChange={e => {
+                                        if (e.target.checked) {
+                                            setSelected(index)
+                                            setKey(result.name.replace(/[^A-Za-z0-9]/g, "_").toUpperCase())
+                                            setError("")
+                                        }
+                                    }} />
+                                <audio className="ml-2" controls controlsList="nodownload" preload="none">
+                                    <source src={result.previewURL} type="audio/mpeg" />
+                                    Your browser does not support the audio element.
+                                </audio>
+                                <span className="ml-4 flex-1">{result.name}: {result.bpm} bpm. {t("soundUploader.freesound.uploadedBy", { userName: result.creator })}</span>
+                            </label>
+                        </div>
                     </div>)}
                 </div>}
             {searched &&

diff --git a/scripts/src/ide/Tabs.tsx b/scripts/src/ide/Tabs.tsx
@@ -222,16 +222,25 @@ export const Tabs = () => {
 
     // Note: Manually compute the visible tabs from the content width.
     // IntersectionObserver API would be more desirable but it is hard to accommodate the appended createButton and dropdown menu.
-    const observer = new ResizeObserver(entries => {
-        const containerWidth = entries[0].contentRect.width;
-        const cutoff = ~~((containerWidth-createButtonWidth-dropdownWidth*truncated)/tabWidth);
-        dispatch(tabs.setNumVisibleTabs(cutoff));
-    });
+    // this work is done on the next animation frame to avoid triggering resize effects in the same frame the resize is observered,
+    // which triggers the ResizeObserver loop limit (a silent error, but one which still pollutes new relic).
+    // You can read more about the issue in these places: https://github.com/WICG/resize-observer/issues/38,
+    // https://github.com/cerner/terra-clinical/pull/551, https://github.com/cerner/terra-core/pull/1647
     useEffect(() => {
+        let tabResizeAnimationFrame: number | undefined
+        const observer = new ResizeObserver(entries => {
+            tabResizeAnimationFrame = window.requestAnimationFrame(() => {
+                const containerWidth = entries[0].contentRect.width;
+                const cutoff = ~~((containerWidth-createButtonWidth-dropdownWidth*truncated)/tabWidth);
+                dispatch(tabs.setNumVisibleTabs(cutoff));
+            })
+        });
         containerRef.current && observer.observe(containerRef.current);
 
         return () => {
             containerRef.current && observer.unobserve(containerRef.current);
+            // clean up an oustanding animation frame request if it exists
+            if (tabResizeAnimationFrame) window.cancelAnimationFrame(tabResizeAnimationFrame)
         }
     }, [containerRef, openTabs, truncated]);
 

diff --git a/scripts/src/user/Notifications.tsx b/scripts/src/user/Notifications.tsx
@@ -1,29 +1,11 @@
 import React, { useState } from "react"
 import { useSelector } from "react-redux"
 
-import * as appState from "../app/appState"
 import * as ESUtils from "../esutils"
 import * as userNotification from "./notification"
 import * as user from "./userState"
 import { useTranslation } from "react-i18next"
 
-const colors: { [key: string]: { [key: string]: string } } = {
-    dark: {
-        normal: "#dff0d8",
-        success: "#9ffa00",
-        failure1: "#f2dede",
-        failure2: "#ff8080",
-        fallback: "white",
-    },
-    light: {
-        normal: "#40463e",
-        success: "#64dc35",
-        failure1: "#d73636",
-        failure2: "#d73636",
-        fallback: "black",
-    },
-}
-
 interface Message {
     text: string
     type: string
@@ -54,14 +36,13 @@ export const NotificationBar = () => {
         }
     }
 
-    return message && <div className="notificationBar" style={{ color: colors.dark[message.type] }}>{message.text}</div>
+    return message && <div className={"notificationBar " + message.type}>{message.text}</div>
 }
 
 const popupQueue: Message[] = []
 let popupTimeout = 0
 
 export const NotificationPopup = () => {
-    const theme = useSelector(appState.selectColorTheme)
     const [message, setMessage] = useState(null as Message | null)
 
     if (message === null && popupTimeout === 0 && popupQueue.length > 0) {
@@ -86,7 +67,7 @@ export const NotificationPopup = () => {
         }
     }
 
-    return message && <div className="notificationPopup" style={{ color: colors[theme][message.type] ?? colors[theme].fallback }}>
+    return message && <div className={"notificationPopup " + message.type}>
         <div className="arrow" style={{
             position: "absolute",
             top: "-11px",