fix: Add cue for assembled section content on mobile

Show a green radiating dot on the expand button when there is content inside the assembled output section so that user knows to click and see the assembled output.
debjitbis08 · Nov 16, 2024 · 3b90fd0 · 3b90fd0
1 parent c99ba4f
commit 3b90fd0
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 11 deletions.
diff --git a/src/components/Assembled.jsx b/src/components/Assembled.jsx
@@ -7,6 +7,7 @@ import { FiAlertCircle, FiAlertTriangle } from 'solid-icons/fi';
 import CopyComponent from './CopyComponent.jsx';
 import { Tooltip } from '@kobalte/core/tooltip';
 import { BsArrowBarLeft, BsArrowBarRight } from 'solid-icons/bs';
+import styles from './Assembled.module.css';
 
 export function Assembled() {
   let [lines, setLines] = createSignal([]);
@@ -84,15 +85,18 @@ export function Assembled() {
         </div>
         <div class="flex-grow"></div>
         <Tooltip placement="left">
-          <Tooltip.Trigger class="tooltip__trigger" onClick={toggleExpanded}>
-            {expanded() ? <BsArrowBarRight /> : <BsArrowBarLeft />}
-          </Tooltip.Trigger>
-          <Tooltip.Portal>
-            <Tooltip.Content class="tooltip__content">
-              <Tooltip.Arrow />
-              <p>{expanded() ? "Collapse Panel" : "Expand Panel"}</p>
-            </Tooltip.Content>
-          </Tooltip.Portal>
+            <Tooltip.Trigger class="tooltip__trigger relative" onClick={toggleExpanded}>
+              {expanded() ? <BsArrowBarRight /> : <BsArrowBarLeft />}
+              { store.assembled.length || store.errors.length && !expanded() ? (
+                <span class={`w-2 h-2 rounded-[2rem] bg-terminal absolute left-0 bottom-[-4px] ${styles.radiatingBorder}`}> </span>
+              ) : null }
+            </Tooltip.Trigger>
+            <Tooltip.Portal>
+              <Tooltip.Content class="tooltip__content">
+                <Tooltip.Arrow />
+                <p>{expanded() ? "Collapse Panel" : "Expand Assembled Ouput Panel"}</p>
+              </Tooltip.Content>
+            </Tooltip.Portal>
         </Tooltip>
         </div>
         <div class={`flex flex-col ${expanded() ? 'block' : 'hidden'}`} style={{ height: "calc(100vh - 8rem - 1px)" }}>

diff --git a/src/components/Assembled.module.css b/src/components/Assembled.module.css
@@ -0,0 +1,27 @@
+.radiatingBorder {
+}
+
+.radiatingBorder::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%; /* Creates the circular border */
+  border: 2px solid rgb(var(--sm-primary)); /* Replace with your terminal color */
+  animation: radiate 1.5s infinite;
+  opacity: 0;
+}
+
+/* Keyframes for radiating effect */
+@keyframes radiate {
+  0% {
+    transform: scale(1);
+    opacity: 1;
+  }
+  100% {
+    transform: scale(3); /* Expands outward */
+    opacity: 0; /* Fades out */
+  }
+}
diff --git a/src/components/Flags.jsx b/src/components/Flags.jsx
@@ -28,7 +28,7 @@ export function Flags() {
 
   return (
     <div>
-      <div class="flex border-b border-b-inactive-border">
+      <div class="flex border-b border-b-inactive-border px-1">
           <h2 class="text-xl grow pb-1">Flags</h2>
           <button title="Reset Flags" class="text-red-foreground" onClick={clearFlags}>
             <AiOutlineClear />

diff --git a/src/components/Registers.jsx b/src/components/Registers.jsx
@@ -46,7 +46,7 @@ export function Registers() {
 
   return (
     <div>
-      <div class="flex border-b border-b-inactive-border">
+      <div class="flex border-b border-b-inactive-border px-1">
           <h2 class="text-xl grow pb-1">Registers</h2>
           <button title="Clear Registers" class="text-red-foreground" onClick={clearRegisters}>
             <AiOutlineClear />