Drawing page tweaks (#7376)

* Fix bg changing label * Add tooltip * Focus input on edit mode, save prev value and restore on cancel * Change tooltip colors
exercism · Jan 23, 2025 · feeec41 · feeec41
1 parent 77bdb54
commit feeec41
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 5 deletions.
diff --git a/app/javascript/components/bootcamp/DrawingPage/DrawingPage.tsx b/app/javascript/components/bootcamp/DrawingPage/DrawingPage.tsx
@@ -15,6 +15,7 @@ import SolveExercisePageContextWrapper from '../SolveExercisePage/SolveExerciseP
 import useEditorStore from '../SolveExercisePage/store/editorStore'
 import { assembleClassNames } from '@/utils/assemble-classnames'
 import { Icon } from '@/components/common'
+import { StaticTooltip } from '../SolveExercisePage/Scrubber/ScrubberTooltipInformation'
 
 export default function DrawingPage({
   drawing,
@@ -115,7 +116,8 @@ export default function DrawingPage({
                   <button
                     className={assembleClassNames(
                       'autorun-segment',
-                      shouldAutoRunCode ? 'on' : 'off'
+                      shouldAutoRunCode ? 'on' : 'off',
+                      'relative group'
                     )}
                     onClick={() => handleToggleAutoRun(shouldAutoRunCode)}
                   >
@@ -125,6 +127,13 @@ export default function DrawingPage({
                       category="bootcamp"
                       className="w-[20px] h-[20px]"
                     />
+                    <StaticTooltip
+                      text={
+                        shouldAutoRunCode
+                          ? 'Autorun is on. Click to turn off.'
+                          : 'Autorun is off. Click to turn on.'
+                      }
+                    />
                   </button>
                 </div>
                 <Scrubber

diff --git a/app/javascript/components/bootcamp/DrawingPage/Header/Header.tsx b/app/javascript/components/bootcamp/DrawingPage/Header/Header.tsx
@@ -18,10 +18,12 @@ function _Header({
   setBackgroundImage: ((imageUrl: string | null) => void) | null
 } & Pick<DrawingPageProps, 'links' | 'drawing' | 'backgrounds'>) {
   const [titleInputValue, setTitleInputValue] = useState(drawing.title)
+  const [prevTitleInputValue, setPrevTitleInputValue] = useState(drawing.title)
   const [editMode, setEditMode] = useState(false)
   const [titleSavingStateLabel, setTitleSavingStateLabel] = useState<string>(
     DEFAULT_SAVE_BUTTON_LABEL
   )
+  const inputRef = React.useRef<HTMLInputElement>(null)
 
   const handleSaveTitle = useCallback(() => {
     setTitleSavingStateLabel('Saving...')
@@ -43,6 +45,22 @@ function _Header({
     [setBackgroundImage]
   )
 
+  const handleSwitchToEditMode = useCallback(() => {
+    setEditMode(true)
+    setPrevTitleInputValue(titleInputValue)
+  }, [titleInputValue])
+
+  const handleCancelEditMode = useCallback(() => {
+    setTitleInputValue(prevTitleInputValue)
+    setEditMode(false)
+  }, [prevTitleInputValue])
+
+  useEffect(() => {
+    if (editMode) {
+      inputRef.current?.focus()
+    }
+  }, [editMode])
+
   // setup the background on mount
   useEffect(() => {
     if (setBackgroundImage && drawing.backgroundSlug) {
@@ -77,8 +95,8 @@ function _Header({
             )
             handleBackgroundChange(selectedBackground)
           }}
-          value={drawing.backgroundSlug}
           className="bg-backgroundColorD rounded-5 py-4 px-8 font-medium"
+          defaultValue={drawing.backgroundSlug}
         >
           {backgrounds.map((background) => (
             <option
@@ -95,6 +113,7 @@ function _Header({
             <>
               <input
                 value={titleInputValue}
+                ref={inputRef}
                 onChange={(e) => {
                   setTitleInputValue(e.target.value)
                   setTitleSavingStateLabel(DEFAULT_SAVE_BUTTON_LABEL)
@@ -107,7 +126,7 @@ function _Header({
               </button>
               <button
                 className="btn-secondary btn-xxs"
-                onClick={() => setEditMode(false)}
+                onClick={handleCancelEditMode}
               >
                 Cancel
               </button>

diff --git a/app/javascript/components/bootcamp/SolveExercisePage/Scrubber/ScrubberTooltipInformation.tsx b/app/javascript/components/bootcamp/SolveExercisePage/Scrubber/ScrubberTooltipInformation.tsx
@@ -24,10 +24,10 @@ export function TooltipInformation({
   }
 }
 
-function StaticTooltip({ text }: { text: string }) {
+export function StaticTooltip({ text }: { text: string }) {
   return (
     <div
-      className="absolute left-1/2 -top-10 py-4 px-8 -translate-x-1/2 -translate-y-[100%] hidden group-hover:block bg-gray-800 text-[#fafaff] text-sm rounded shadow-lg"
+      className="absolute left-1/2 -top-10 py-6 px-10 -translate-x-1/2 -translate-y-[100%] hidden group-hover:block bg-[#333] text-[#E1EBFF] text-sm rounded shadow-lg rounded-5"
       role="tooltip"
     >
       {text}