Various tweaks to UI

Author: celonymire

CHANGELOG.md

@@ -8,10 +8,13 @@
 
 - Show empty stdout for testcase with a placeholder instead of hiding it
 - Added file name to the file template picker item's description to improve matching
+- Always show the icon to indicate the type of current testcase and make it clickable to toggle testcase interactivity
 
 ### Fixed
 
 - (Regression) skipped testcases are still being ran
+- Don't half the opacity of clickable elements
+- Dropdown still modifies visibility of testcases behind the scenes on skipped testcases
 
 # 4.0.0
 

src/webview/judge/TestcaseToolbar.svelte

@@ -55,10 +55,13 @@
   const skipped = $derived(testcase.skipped);
   const toggled = $derived(testcase.toggled);
   const showDetails = $derived(!skipped && visible && !(status === "AC" && !toggled));
+  const statusIcon = $derived(
+    testcase.mode === "interactive" ? "codicon-comment-discussion-sparkle" : "codicon-output"
+  );
 </script>
 
 {#if status === "NA" || status === "AC" || status === "WA" || status === "RE" || status === "TL" || status === "ML" || status === "CE"}
-  <div class="toolbar" class:toolbar--hidden={skipped}>
+  <div class="toolbar" class:toolbar--hidden={skipped} class:toolbar--skipped={skipped}>
     <div class="toolbar-badges">
       <div
         class="toolbar-badge-container toolbar-dropdown-container toolbar-badge"
@@ -69,6 +72,7 @@
           data-tooltip={showDetails ? "Hide Details" : "Show Details"}
           aria-label={showDetails ? "Hide" : "Show"}
           onclick={handleToggleVisibility}
+          disabled={skipped}
         >
           <div
             class="codicon codicon-bolded {showDetails
@@ -133,19 +137,26 @@
           aria-label={testcase.mode === "interactive" ? "Make Non-Interactive" : "Make Interactive"}
           onclick={handleToggleInteractive}
         >
-          <div class="codicon codicon-bolded codicon-chat-sparkle"></div>
+          <div class="codicon codicon-bolded {statusIcon}"></div>
         </button>
       </div>
     </div>
     <div class="testcase-buttons">
-      <button class="toolbar-icon" data-tooltip="Run Testcase" aria-label="Run" onclick={handleRun}>
+      <button
+        class="toolbar-icon"
+        data-tooltip="Run Testcase"
+        aria-label="Run"
+        onclick={handleRun}
+        disabled={skipped}
+      >
         <div class="codicon codicon-run-below"></div>
       </button>
       <button
         class="toolbar-icon"
         data-tooltip="Debug Testcase"
         aria-label="Debug"
         onclick={handleDebug}
+        disabled={skipped}
       >
         <div class="codicon codicon-debug-alt"></div>
       </button>
@@ -199,7 +210,7 @@
           aria-label={testcase.mode === "interactive" ? "Make Non-Interactive" : "Make Interactive"}
           onclick={handleToggleInteractive}
         >
-          <div class="codicon codicon-bolded codicon-chat-sparkle"></div>
+          <div class="codicon codicon-bolded {statusIcon}"></div>
         </button>
       </div>
     </div>
@@ -216,6 +227,7 @@
           data-tooltip={showDetails ? "Hide Details" : "Show Details"}
           aria-label={showDetails ? "Hide" : "Show"}
           onclick={handleToggleVisibility}
+          disabled={skipped}
         >
           <div
             class="codicon codicon-bolded {showDetails
@@ -236,7 +248,7 @@
           aria-label={testcase.mode === "interactive" ? "Make Non-Interactive" : "Make Interactive"}
           onclick={handleToggleInteractive}
         >
-          <div class="codicon codicon-bolded codicon-chat-sparkle"></div>
+          <div class="codicon codicon-bolded {statusIcon}"></div>
         </button>
       </div>
       <div class="toolbar-icon toolbar-icon-exclude-highlight">
@@ -265,14 +277,6 @@
     gap: 6px;
   }
 
-  .toolbar--hidden > .toolbar-badges {
-    opacity: 0.5;
-  }
-
-  .toolbar--hidden > .testcase-buttons > *:not(.toolbar-icon-exclude-fade) {
-    opacity: 0.5;
-  }
-
   .toolbar-left {
     display: flex;
     align-items: center;
@@ -317,6 +321,11 @@
     background: var(--vscode-button-secondaryBackground);
   }
 
+  .toolbar-icon:disabled:not(.toolbar-icon-exclude-highlight) {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
   .toolbar-badge-container {
     display: flex;
     align-items: center;
@@ -329,6 +338,10 @@
     color: var(--vscode-badge-foreground);
   }
 
+  .toolbar--skipped .toolbar-badge-container {
+    opacity: 0.5;
+  }
+
   .toolbar-dropdown-container {
     padding: 0px;
   }

src/webview/stress/StateToolbar.svelte

@@ -43,6 +43,9 @@
 
   // Derived value for whether details should be shown
   const showDetails = $derived(shown);
+  const statusIcon = $derived(
+    interactiveMode ? "codicon-comment-discussion-sparkle" : "codicon-output"
+  );
 </script>
 
 {#if status === "COMPILING"}
@@ -61,7 +64,7 @@
           aria-label={interactiveMode ? "Make Non-Interactive" : "Make Interactive"}
           onclick={handleToggleInteractive}
         >
-          <div class="codicon codicon-bolded codicon-chat-sparkle"></div>
+          <div class="codicon codicon-bolded {statusIcon}"></div>
         </button>
       </div>
       <div class="state-badge state-status" data-status={status}>
@@ -102,7 +105,7 @@
           aria-label={interactiveMode ? "Make Non-Interactive" : "Make Interactive"}
           onclick={handleToggleInteractive}
         >
-          <div class="codicon codicon-bolded codicon-chat-sparkle"></div>
+          <div class="codicon codicon-bolded {statusIcon}"></div>
         </button>
       </div>
       <div class="state-toolbar-icon state-toolbar-icon-exclude-highlight">
@@ -140,7 +143,7 @@
           aria-label={interactiveMode ? "Make Non-Interactive" : "Make Interactive"}
           onclick={handleToggleInteractive}
         >
-          <div class="codicon codicon-bolded codicon-chat-sparkle"></div>
+          <div class="codicon codicon-bolded {statusIcon}"></div>
         </button>
       </div>
       <div class="state-badge state-status" data-status={status}>
@@ -199,7 +202,7 @@
           aria-label={interactiveMode ? "Make Non-Interactive" : "Make Interactive"}
           onclick={handleToggleInteractive}
         >
-          <div class="codicon codicon-bolded codicon-chat-sparkle"></div>
+          <div class="codicon codicon-bolded {statusIcon}"></div>
         </button>
       </div>
     </div>