refactor(ui): clean up task-row drag visuals

Collapse the grabbed row out of layout instead of overlapping neighbors
with scale/opacity/shadow (the ghost window already shows the moving
snapshot). Replace the thin moss drop-hint lines with a dashed
placeholder gap sized like a collapsed row. Suppress the ordinary hover
highlight and transitions on whatever row is currently the drop target
so it doesn't read as "clickable" while dragging.
This commit is contained in:
mika kuns
2026-08-10 13:58:40 +02:00
parent e98cf46097
commit 359bb3a439
4 changed files with 52 additions and 13 deletions
+14 -5
View File
@@ -484,12 +484,21 @@
<Setter Property="BorderBrush" Value="{StaticResource AccentBrush}" />
<Setter Property="BorderThickness" Value="1" />
</Style>
<!-- "Grabbed" row: lift + slight scale + lower opacity + shadow while the custom drag runs. -->
<!-- "Grabbed" row: collapses out of layout entirely while the custom drag runs — the
floating ghost snapshot (TaskDragController) is what the user sees moving. -->
<Style Selector="Border.task-row.dragging">
<Setter Property="Opacity" Value="0.55" />
<Setter Property="RenderTransform" Value="scale(1.03)" />
<Setter Property="BoxShadow" Value="0 10 26 0 #66000000" />
<Setter Property="BorderBrush" Value="{StaticResource AccentBrush}" />
<Setter Property="IsVisible" Value="False" />
<Setter Property="Transitions" Value="{x:Null}" />
</Style>
<!-- Row currently hovered while dragging (shows the dashed drop-hint gap): suppress the
ordinary hover highlight and transitions so they don't fight the hint. Placed after
Border.task-row:pointerover so its extra class also wins on declaration order. -->
<Style Selector="Border.task-row.drop-target">
<Setter Property="Transitions" Value="{x:Null}" />
</Style>
<Style Selector="Border.task-row.drop-target:pointerover">
<Setter Property="BorderBrush" Value="{StaticResource LineBrush}" />
</Style>
<!-- Checkbox indicator (the 18px circle that replaces the native CheckBox template) -->
@@ -45,6 +45,10 @@ public sealed partial class TaskRowViewModel : ViewModelBase
// Set by the custom drag while this row is being dragged — drives the "grabbed" row style.
[ObservableProperty] private bool _isDragging;
// True while a drag is hovering this row (i.e. it would show a drop-hint gap). Used to
// suppress the ordinary hover highlight/transitions so they don't fight the hint.
public bool IsDropTarget => DropHintAbove || DropHintBelow;
public bool CanRefine => Status == TaskStatus.Idle && PlanningPhase == PlanningPhase.None
&& !IsRefining && !IsManual;
@@ -289,6 +293,8 @@ public sealed partial class TaskRowViewModel : ViewModelBase
partial void OnDiffAdditionsChanged(int value) { OnPropertyChanged(nameof(HasDiff)); OnPropertyChanged(nameof(DiffAdditionsText)); }
partial void OnDiffDeletionsChanged(int value) { OnPropertyChanged(nameof(HasDiff)); OnPropertyChanged(nameof(DiffDeletionsText)); }
partial void OnRoadblockCountChanged(int value) { OnPropertyChanged(nameof(HasRoadblock)); OnPropertyChanged(nameof(RoadblockTooltip)); }
partial void OnDropHintAboveChanged(bool value) => OnPropertyChanged(nameof(IsDropTarget));
partial void OnDropHintBelowChanged(bool value) => OnPropertyChanged(nameof(IsDropTarget));
public void RefreshLocalized()
{
@@ -7,15 +7,16 @@
x:DataType="vm:TaskRowViewModel">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="6"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<!-- Above-row indicator: lives in the 6px gap between cards -->
<Border Grid.Row="0" Height="2" VerticalAlignment="Center" Margin="4,0"
Background="{DynamicResource MossBrush}" CornerRadius="1"
IsVisible="{Binding DropHintAbove}"/>
<!-- Above-row indicator: dashed placeholder gap showing where the dragged row will land -->
<Grid Grid.Row="0" Height="52" IsVisible="{Binding DropHintAbove}">
<Rectangle Margin="4,3" Stroke="{DynamicResource MossBrush}" StrokeThickness="1.5"
StrokeDashArray="4,3" Fill="Transparent" RadiusX="8" RadiusY="8"/>
</Grid>
<!-- Indent wrapper: col 0 = 24px child indent track, col 1 = content -->
<Grid Grid.Row="1" ColumnDefinitions="Auto,*">
@@ -31,6 +32,7 @@
Margin="0"
Classes.selected="{Binding IsSelected}"
Classes.dragging="{Binding IsDragging}"
Classes.drop-target="{Binding IsDropTarget}"
Classes.done="{Binding Done}"
ContextRequested="OnRowContextRequested">
<Grid ColumnDefinitions="0,18,32,*,Auto,Auto,32" Margin="6,8,10,8">
@@ -202,9 +204,9 @@
</Grid>
<!-- Below-row indicator: only expands when visible (used for the last row of a section) -->
<Grid Grid.Row="2" Height="6" IsVisible="{Binding DropHintBelow}">
<Border Height="2" VerticalAlignment="Center" Margin="4,0"
Background="{DynamicResource MossBrush}" CornerRadius="1"/>
<Grid Grid.Row="2" Height="52" IsVisible="{Binding DropHintBelow}">
<Rectangle Margin="4,3" Stroke="{DynamicResource MossBrush}" StrokeThickness="1.5"
StrokeDashArray="4,3" Fill="Transparent" RadiusX="8" RadiusY="8"/>
</Grid>
<!-- Hidden schedule anchor (its Flyout is shown from the context menu) -->
@@ -1,3 +1,4 @@
using System.Collections.Generic;
using ClaudeDo.Data.Models;
using ClaudeDo.Ui.ViewModels.Islands;
using Xunit;
@@ -20,4 +21,25 @@ public class TaskRowViewModelTests
vm.Status = s;
Assert.Equal(expected, vm.StatusChipClass);
}
[Fact]
public void IsDropTarget_Follows_Either_DropHint_And_Raises_PropertyChanged()
{
var vm = new TaskRowViewModel { Id = "t" };
var raised = new List<string?>();
vm.PropertyChanged += (_, e) => raised.Add(e.PropertyName);
Assert.False(vm.IsDropTarget);
vm.DropHintAbove = true;
Assert.True(vm.IsDropTarget);
Assert.Contains(nameof(TaskRowViewModel.IsDropTarget), raised);
vm.DropHintAbove = false;
vm.DropHintBelow = true;
Assert.True(vm.IsDropTarget);
vm.DropHintBelow = false;
Assert.False(vm.IsDropTarget);
}
}