Skip to content

Highlight script row on Edit/dropdown button hover - #1163

Merged
Tim020 merged 1 commit into
devfrom
feature/script-editor-row-hover-highlight
Jun 7, 2026
Merged

Highlight script row on Edit/dropdown button hover#1163
Tim020 merged 1 commit into
devfrom
feature/script-editor-row-hover-highlight

Conversation

@Tim020

@Tim020 Tim020 commented Jun 7, 2026

Copy link
Copy Markdown
Contributor

Summary

  • Replicates the cue editor's existing row hover highlight behaviour in the script editor
  • When hovering the Edit button or the dropdown caret on any script line, the full row highlights with a subtle semi-transparent background
  • Implemented in both client/ (Vue 2) and client-v3/ (Vue 3) for feature parity

Implementation

Uses the same pure-CSS :has() pattern already in place in ScriptLineCueEditor.vue — no JavaScript or reactive state needed:

.script-line-row:has(.script-edit-controls:hover) {
  background-color: rgba(255, 255, 255, 0.06);
  border-radius: 4px;
  transition: background-color 0.15s ease;
}

Two classes added per file: script-line-row on the root row, script-edit-controls on the Edit/dropdown button group.

Test plan

  • Navigate to the script editor and hover over the Edit button on any line — row highlights
  • Hover over the dropdown caret — row highlights
  • Move mouse away — highlight disappears
  • Confirm behaviour matches the cue editor's add-cue button highlight
  • Check both /ui/ (Vue 2) and /ui-new/ (Vue 3)

🤖 Generated with Claude Code

Replicates the cue editor's CSS :has() pattern — when the user hovers
the Edit button or dropdown caret in the script viewer, the full row
gets a subtle background highlight to make the target line clear.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@Tim020 Tim020 added the claude Issues created by Claude label Jun 7, 2026
@github-actions github-actions Bot added small-diff Small pull request client Pull requests changing front end code client-v3 labels Jun 7, 2026
@github-actions

github-actions Bot commented Jun 7, 2026

Copy link
Copy Markdown

Client V3 Test Results

23 tests  ±0   23 ✅ ±0   0s ⏱️ ±0s
 2 suites ±0    0 💤 ±0 
 1 files   ±0    0 ❌ ±0 

Results for commit 05bf847. ± Comparison against base commit c1a535c.

@github-actions

github-actions Bot commented Jun 7, 2026

Copy link
Copy Markdown

Client Test Results

128 tests  ±0   128 ✅ ±0   0s ⏱️ ±0s
  6 suites ±0     0 💤 ±0 
  1 files   ±0     0 ❌ ±0 

Results for commit 05bf847. ± Comparison against base commit c1a535c.

@sonarqubecloud

sonarqubecloud Bot commented Jun 7, 2026

Copy link
Copy Markdown

@Tim020
Tim020 enabled auto-merge (squash) June 7, 2026 21:10
@github-actions

github-actions Bot commented Jun 7, 2026

Copy link
Copy Markdown

Python Test Results

  1 files  ±0    1 suites  ±0   2m 9s ⏱️ +8s
662 tests ±0  662 ✅ ±0  0 💤 ±0  0 ❌ ±0 
667 runs  ±0  667 ✅ ±0  0 💤 ±0  0 ❌ ±0 

Results for commit 05bf847. ± Comparison against base commit c1a535c.

@github-actions

github-actions Bot commented Jun 7, 2026

Copy link
Copy Markdown

Playwright E2E Results (chromium)

164 tests  ±0   164 ✅ ±0   1m 38s ⏱️ -1s
 14 suites ±0     0 💤 ±0 
  1 files   ±0     0 ❌ ±0 

Results for commit 05bf847. ± Comparison against base commit c1a535c.

@github-actions

github-actions Bot commented Jun 7, 2026

Copy link
Copy Markdown

Playwright E2E Results (firefox)

164 tests  ±0   164 ✅ ±0   1m 39s ⏱️ -2s
 14 suites ±0     0 💤 ±0 
  1 files   ±0     0 ❌ ±0 

Results for commit 05bf847. ± Comparison against base commit c1a535c.

@Tim020
Tim020 merged commit 8ae4ff8 into dev Jun 7, 2026
35 checks passed
@Tim020
Tim020 deleted the feature/script-editor-row-hover-highlight branch June 7, 2026 21:12
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

claude Issues created by Claude client Pull requests changing front end code client-v3 small-diff Small pull request

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant