|
55 | 55 | </script> |
56 | 56 |
|
57 | 57 | {#if status === "CE"} |
58 | | - <div class="testcase-toolbar" class:testcase-toolbar--hidden={skipped}> |
| 58 | + <div class="toolbar" class:toolbar--hidden={skipped}> |
59 | 59 | <div class="testcase-badges"> |
60 | | - <div class="testcase-elapsed-badge testcase-elapsed" data-status={status}> |
61 | | - <div class="testcase-toolbar-icon testcase-toolbar-icon-exclude-highlight"> |
| 60 | + <div class="toolbar-badge-container toolbar-badge" data-status={status}> |
| 61 | + <div class="toolbar-icon toolbar-icon-exclude-highlight"> |
62 | 62 | <div class="codicon codicon-bolded codicon-terminal-bash"></div> |
63 | 63 | </div> |
64 | | - <p class="testcase-elapsed-text">CE</p> |
| 64 | + <p class="toolbar-badge-text">CE</p> |
65 | 65 | </div> |
66 | 66 | {#if testcase.mode === "interactive"} |
67 | | - <div class="testcase-elapsed-badge testcase-elapsed" data-status="CE"> |
68 | | - <div class="testcase-toolbar-icon testcase-toolbar-icon-exclude-highlight"> |
| 67 | + <div class="toolbar-badge-container toolbar-badge" data-status="CE"> |
| 68 | + <div class="toolbar-icon toolbar-icon-exclude-highlight"> |
69 | 69 | <div class="codicon codicon-bolded codicon-chat-sparkle"></div> |
70 | 70 | </div> |
71 | 71 | </div> |
72 | 72 | {/if} |
73 | 73 | </div> |
74 | 74 | <div class="testcase-buttons"> |
75 | 75 | <button |
76 | | - class="testcase-toolbar-icon" |
| 76 | + class="toolbar-icon" |
77 | 77 | data-tooltip="Run Testcase" |
78 | 78 | aria-label="Run" |
79 | 79 | onclick={handleRun} |
80 | 80 | > |
81 | 81 | <div class="codicon codicon-run-below"></div> |
82 | 82 | </button> |
83 | 83 | <button |
84 | | - class="testcase-toolbar-icon" |
| 84 | + class="toolbar-icon" |
85 | 85 | data-tooltip="Debug Testcase" |
86 | 86 | aria-label="Debug" |
87 | 87 | onclick={handleDebug} |
88 | 88 | > |
89 | 89 | <div class="codicon codicon-debug-alt"></div> |
90 | 90 | </button> |
91 | 91 | <button |
92 | | - class="testcase-toolbar-icon" |
| 92 | + class="toolbar-icon" |
93 | 93 | data-tooltip="Delete Testcase" |
94 | 94 | aria-label="Delete" |
95 | 95 | onclick={handleDelete} |
96 | 96 | > |
97 | 97 | <div class="codicon codicon-trash"></div> |
98 | 98 | </button> |
99 | 99 | <button |
100 | | - class="testcase-toolbar-icon" |
| 100 | + class="toolbar-icon" |
101 | 101 | data-tooltip={showDetails ? "Hide Details" : "Show Details"} |
102 | 102 | aria-label={showDetails ? "Hide" : "Show"} |
103 | 103 | onclick={handleToggleVisibility} |
104 | 104 | > |
105 | 105 | <div class="codicon {showDetails ? 'codicon-eye-closed' : 'codicon-eye'}"></div> |
106 | 106 | </button> |
107 | 107 | <button |
108 | | - class="testcase-toolbar-icon testcase-toolbar-icon--visibility" |
| 108 | + class="toolbar-icon toolbar-icon--visibility" |
109 | 109 | data-tooltip={skipped ? "Unskip Testcase" : "Skip Testcase"} |
110 | 110 | aria-label={skipped ? "Unskip" : "Skip"} |
111 | 111 | onclick={handleToggleSkip} |
|
117 | 117 | </div> |
118 | 118 | </div> |
119 | 119 | {:else if status === "NA" || status === "AC" || status === "WA" || status === "RE" || status === "TL" || status === "ML"} |
120 | | - <div class="testcase-toolbar" class:testcase-toolbar--hidden={skipped}> |
| 120 | + <div class="toolbar" class:toolbar--hidden={skipped}> |
121 | 121 | <div class="testcase-badges"> |
122 | | - <div class="testcase-elapsed-badge testcase-elapsed" data-status={status}> |
123 | | - <div class="testcase-toolbar-icon testcase-toolbar-icon-exclude-highlight"> |
| 122 | + <div class="toolbar-badge-container toolbar-badge" data-status={status}> |
| 123 | + <div class="toolbar-icon toolbar-icon-exclude-highlight"> |
124 | 124 | {#if status === "NA"} |
125 | 125 | <div class="codicon codicon-bolded codicon-play"></div> |
126 | 126 | {:else if status === "AC"} |
|
135 | 135 | <div class="codicon codicon-bolded codicon-chip"></div> |
136 | 136 | {/if} |
137 | 137 | </div> |
138 | | - <p class="testcase-elapsed-text"> |
| 138 | + <p class="toolbar-badge-text"> |
139 | 139 | {status !== "NA" && status !== "AC" && status !== "ML" && status !== "WA" |
140 | 140 | ? status |
141 | 141 | : testcase.elapsed >= 1000 |
142 | 142 | ? (testcase.elapsed / 1000).toFixed(1) + "s" |
143 | 143 | : testcase.elapsed + "ms"} |
144 | 144 | </p> |
145 | 145 | </div> |
146 | | - <div class="testcase-elapsed-badge testcase-elapsed" data-status={status}> |
147 | | - <div class="testcase-toolbar-icon testcase-toolbar-icon-exclude-highlight"> |
| 146 | + <div class="toolbar-badge-container toolbar-badge" data-status={status}> |
| 147 | + <div class="toolbar-icon toolbar-icon-exclude-highlight"> |
148 | 148 | <div class="codicon codicon-bolded codicon-chip"></div> |
149 | 149 | </div> |
150 | | - <p class="testcase-elapsed-text"> |
| 150 | + <p class="toolbar-badge-text"> |
151 | 151 | {status === "ML" |
152 | 152 | ? "ML" |
153 | 153 | : testcase.memoryBytes >= 1024 * 1024 * 1024 |
|
160 | 160 | </p> |
161 | 161 | </div> |
162 | 162 | {#if testcase.mode === "interactive"} |
163 | | - <div class="testcase-elapsed-badge testcase-elapsed" data-status="CE"> |
164 | | - <div class="testcase-toolbar-icon testcase-toolbar-icon-exclude-highlight"> |
| 163 | + <div class="toolbar-badge-container toolbar-badge" data-status="CE"> |
| 164 | + <div class="toolbar-icon toolbar-icon-exclude-highlight"> |
165 | 165 | <div class="codicon codicon-bolded codicon-chat-sparkle"></div> |
166 | 166 | </div> |
167 | 167 | </div> |
168 | 168 | {/if} |
169 | 169 | </div> |
170 | 170 | <div class="testcase-buttons"> |
171 | 171 | <button |
172 | | - class="testcase-toolbar-icon" |
| 172 | + class="toolbar-icon" |
173 | 173 | data-tooltip="Run Testcase" |
174 | 174 | aria-label="Run" |
175 | 175 | onclick={handleRun} |
176 | 176 | > |
177 | 177 | <div class="codicon codicon-run-below"></div> |
178 | 178 | </button> |
179 | 179 | <button |
180 | | - class="testcase-toolbar-icon" |
| 180 | + class="toolbar-icon" |
181 | 181 | data-tooltip="Debug Testcase" |
182 | 182 | aria-label="Debug" |
183 | 183 | onclick={handleDebug} |
184 | 184 | > |
185 | 185 | <div class="codicon codicon-debug-alt"></div> |
186 | 186 | </button> |
187 | 187 | <button |
188 | | - class="testcase-toolbar-icon" |
| 188 | + class="toolbar-icon" |
189 | 189 | data-tooltip="Delete Testcase" |
190 | 190 | aria-label="Delete" |
191 | 191 | onclick={handleDelete} |
192 | 192 | > |
193 | 193 | <div class="codicon codicon-trash"></div> |
194 | 194 | </button> |
195 | 195 | <button |
196 | | - class="testcase-toolbar-icon" |
| 196 | + class="toolbar-icon" |
197 | 197 | data-tooltip={showDetails ? "Hide Details" : "Show Details"} |
198 | 198 | aria-label={showDetails ? "Hide" : "Show"} |
199 | 199 | onclick={handleToggleVisibility} |
200 | 200 | > |
201 | 201 | <div class="codicon {showDetails ? 'codicon-eye-closed' : 'codicon-eye'}"></div> |
202 | 202 | </button> |
203 | 203 | <button |
204 | | - class="testcase-toolbar-icon testcase-toolbar-icon--visibility" |
| 204 | + class="toolbar-icon toolbar-icon--visibility" |
205 | 205 | data-tooltip={skipped ? "Unskip Testcase" : "Skip Testcase"} |
206 | 206 | aria-label={skipped ? "Unskip" : "Skip"} |
207 | 207 | onclick={handleToggleSkip} |
|
213 | 213 | </div> |
214 | 214 | </div> |
215 | 215 | {:else if status === "COMPILING"} |
216 | | - <div class="testcase-toolbar"> |
217 | | - <div class="testcase-toolbar-left"> |
218 | | - <div class="testcase-elapsed-badge testcase-elapsed" data-status={status}> |
219 | | - <div class="testcase-toolbar-icon testcase-toolbar-icon-exclude-highlight"> |
| 216 | + <div class="toolbar"> |
| 217 | + <div class="toolbar-left"> |
| 218 | + <div class="toolbar-badge-container toolbar-badge" data-status={status}> |
| 219 | + <div class="toolbar-icon toolbar-icon-exclude-highlight"> |
220 | 220 | <div class="codicon codicon-loading codicon-modifier-spin"></div> |
221 | 221 | </div> |
222 | | - <p class="testcase-elapsed-text">COMPILING</p> |
| 222 | + <p class="toolbar-badge-text">COMPILING</p> |
223 | 223 | </div> |
224 | 224 | {#if testcase.mode === "interactive"} |
225 | | - <div class="testcase-elapsed-badge testcase-elapsed" data-status="CE"> |
226 | | - <div class="testcase-toolbar-icon testcase-toolbar-icon-exclude-highlight"> |
| 225 | + <div class="toolbar-badge-container toolbar-badge" data-status="CE"> |
| 226 | + <div class="toolbar-icon toolbar-icon-exclude-highlight"> |
227 | 227 | <div class="codicon codicon-bolded codicon-chat-sparkle"></div> |
228 | 228 | </div> |
229 | 229 | </div> |
230 | 230 | {/if} |
231 | 231 | </div> |
232 | 232 | </div> |
233 | 233 | {:else if status === "RUNNING"} |
234 | | - <div class="testcase-toolbar"> |
235 | | - <div class="testcase-toolbar-left"> |
236 | | - <div class="testcase-toolbar-icon testcase-toolbar-icon-exclude-highlight"> |
| 234 | + <div class="toolbar"> |
| 235 | + <div class="toolbar-left"> |
| 236 | + <div class="toolbar-icon toolbar-icon-exclude-highlight"> |
237 | 237 | <div class="codicon codicon-loading codicon-modifier-spin"></div> |
238 | 238 | </div> |
239 | 239 | {#if testcase.mode === "interactive"} |
240 | | - <div class="testcase-elapsed-badge testcase-elapsed" data-status="CE"> |
241 | | - <div class="testcase-toolbar-icon testcase-toolbar-icon-exclude-highlight"> |
| 240 | + <div class="toolbar-badge-container toolbar-badge" data-status="CE"> |
| 241 | + <div class="toolbar-icon toolbar-icon-exclude-highlight"> |
242 | 242 | <div class="codicon codicon-bolded codicon-chat-sparkle"></div> |
243 | 243 | </div> |
244 | 244 | </div> |
245 | 245 | {/if} |
246 | 246 | <button |
247 | | - class="testcase-toolbar-icon" |
| 247 | + class="toolbar-icon" |
248 | 248 | data-tooltip="Stop Testcase" |
249 | 249 | aria-label="Stop" |
250 | 250 | onclick={handleStop} |
|
258 | 258 | <Tooltip /> |
259 | 259 |
|
260 | 260 | <style> |
261 | | - .testcase-toolbar { |
| 261 | + .toolbar { |
262 | 262 | display: flex; |
263 | 263 | align-items: center; |
264 | 264 | margin-bottom: 6px; |
265 | 265 | flex-wrap: wrap; |
266 | 266 | gap: 6px; |
267 | 267 | } |
268 | 268 |
|
269 | | - .testcase-toolbar--hidden > .testcase-badges { |
| 269 | + .toolbar--hidden > .testcase-badges { |
270 | 270 | opacity: 0.5; |
271 | 271 | } |
272 | 272 |
|
273 | | - .testcase-toolbar--hidden > .testcase-buttons > *:not(.testcase-toolbar-icon-exclude-fade) { |
| 273 | + .toolbar--hidden > .testcase-buttons > *:not(.toolbar-icon-exclude-fade) { |
274 | 274 | opacity: 0.5; |
275 | 275 | } |
276 | 276 |
|
277 | | - .testcase-toolbar-left { |
| 277 | + .toolbar-left { |
278 | 278 | display: flex; |
279 | 279 | align-items: center; |
280 | 280 | justify-content: flex-start; |
|
297 | 297 | flex-grow: 1; |
298 | 298 | } |
299 | 299 |
|
300 | | - .testcase-toolbar-icon { |
| 300 | + .toolbar-icon { |
301 | 301 | display: flex; |
302 | 302 | align-items: center; |
303 | 303 | justify-content: center; |
|
309 | 309 | color: inherit; |
310 | 310 | } |
311 | 311 |
|
312 | | - .testcase-toolbar-icon:not(.testcase-toolbar-icon-exclude-highlight):hover { |
| 312 | + .toolbar-icon:not(.toolbar-icon-exclude-highlight):hover { |
313 | 313 | cursor: pointer; |
314 | 314 | background: var(--vscode-button-secondaryBackground); |
315 | 315 | } |
316 | 316 |
|
317 | | - .testcase-elapsed-badge { |
| 317 | + .toolbar-badge-container { |
318 | 318 | display: flex; |
319 | 319 | align-items: center; |
320 | 320 | padding: 1px 6px; |
|
326 | 326 | color: var(--vscode-badge-foreground); |
327 | 327 | } |
328 | 328 |
|
329 | | - .testcase-elapsed-text { |
| 329 | + .toolbar-badge-text { |
330 | 330 | margin: 0 3px 0 0; |
331 | 331 | } |
332 | 332 |
|
|
335 | 335 | } |
336 | 336 |
|
337 | 337 | /* Status-specific colors using data-status attribute */ |
338 | | - .testcase-elapsed[data-status="CE"] { |
| 338 | + .toolbar-badge[data-status="CE"] { |
339 | 339 | background-color: var(--vscode-terminal-ansiMagenta); |
340 | 340 | } |
341 | 341 |
|
342 | | - .testcase-elapsed[data-status="RE"] { |
| 342 | + .toolbar-badge[data-status="RE"] { |
343 | 343 | background-color: var(--vscode-terminal-ansiRed); |
344 | 344 | } |
345 | 345 |
|
346 | | - .testcase-elapsed[data-status="WA"] { |
| 346 | + .toolbar-badge[data-status="WA"] { |
347 | 347 | background-color: var(--vscode-terminal-ansiRed); |
348 | 348 | } |
349 | 349 |
|
350 | | - .testcase-elapsed[data-status="AC"] { |
| 350 | + .toolbar-badge[data-status="AC"] { |
351 | 351 | background-color: var(--vscode-terminal-ansiGreen); |
352 | 352 | } |
353 | 353 |
|
354 | | - .testcase-elapsed[data-status="TL"] { |
| 354 | + .toolbar-badge[data-status="TL"] { |
355 | 355 | background-color: var(--vscode-terminal-ansiRed); |
356 | 356 | } |
357 | 357 |
|
358 | | - .testcase-elapsed[data-status="COMPILING"] { |
| 358 | + .toolbar-badge[data-status="COMPILING"] { |
359 | 359 | background-color: var(--vscode-terminal-ansiMagenta); |
360 | 360 | } |
361 | 361 |
|
362 | | - .testcase-elapsed[data-status="ML"] { |
| 362 | + .toolbar-badge[data-status="ML"] { |
363 | 363 | background-color: var(--vscode-terminal-ansiRed); |
364 | 364 | } |
365 | 365 | </style> |
0 commit comments