feat(details): segmented Description/Steps/Files header
Replace the static DETAILS label and its dead space with a segment switcher; the card body now shows one section at a time. Step/file counts sit in the tab labels, the edit/preview toggle is scoped to Description, and drag-and-drop or add jumps to the Files tab. Tab labels localized (en/de).
This commit is contained in:
Mika Kuns
@@ -6,17 +6,70 @@
|
||||
x:Class="ClaudeDo.Ui.Views.Islands.Detail.DescriptionStepsCard"
|
||||
x:DataType="vm:DetailsIslandViewModel">
|
||||
|
||||
<UserControl.Styles>
|
||||
<!-- Segment switcher in the card header (mirrors the WorkConsole tab look) -->
|
||||
<Style Selector="Button.seg-btn">
|
||||
<Setter Property="Background" Value="Transparent" />
|
||||
<Setter Property="BorderThickness" Value="0" />
|
||||
<Setter Property="Padding" Value="8,3" />
|
||||
<Setter Property="CornerRadius" Value="6" />
|
||||
<Setter Property="FontFamily" Value="{StaticResource MonoFont}" />
|
||||
<Setter Property="FontSize" Value="{StaticResource FontSizeMono}" />
|
||||
<Setter Property="Foreground" Value="{StaticResource TextMuteBrush}" />
|
||||
<Setter Property="Cursor" Value="Hand" />
|
||||
</Style>
|
||||
<Style Selector="Button.seg-btn:pointerover /template/ ContentPresenter">
|
||||
<Setter Property="Background" Value="{StaticResource Surface2Brush}" />
|
||||
<Setter Property="TextElement.Foreground" Value="{StaticResource TextDimBrush}" />
|
||||
</Style>
|
||||
<Style Selector="Button.seg-btn.active /template/ ContentPresenter">
|
||||
<Setter Property="Background" Value="{StaticResource Surface3Brush}" />
|
||||
<Setter Property="TextElement.Foreground" Value="{StaticResource AccentBrush}" />
|
||||
</Style>
|
||||
<Style Selector="TextBlock.seg-count">
|
||||
<Setter Property="Foreground" Value="{StaticResource TextMuteBrush}" />
|
||||
<Setter Property="FontSize" Value="{StaticResource FontSizeMono}" />
|
||||
</Style>
|
||||
</UserControl.Styles>
|
||||
|
||||
<Border Classes="island"
|
||||
Background="{DynamicResource Surface2Brush}"
|
||||
BorderBrush="{DynamicResource LineBrush}">
|
||||
<DockPanel>
|
||||
|
||||
<!-- Header: DETAILS · copy · preview/edit -->
|
||||
<!-- Header: segment switcher (Description · Steps · Files) + copy + edit -->
|
||||
<Border DockPanel.Dock="Top" Classes="island-header">
|
||||
<Grid ColumnDefinitions="Auto,*,Auto,Auto" VerticalAlignment="Center">
|
||||
|
||||
<TextBlock Grid.Column="0" Classes="section-label" Text="DETAILS"
|
||||
VerticalAlignment="Center"/>
|
||||
<StackPanel Grid.Column="0" Orientation="Horizontal" Spacing="2">
|
||||
<Button Classes="seg-btn"
|
||||
Classes.active="{Binding IsDescriptionSection}"
|
||||
Command="{Binding SelectDetailSectionCommand}"
|
||||
CommandParameter="description"
|
||||
Content="{loc:Tr details.sections.description}"/>
|
||||
<Button Classes="seg-btn"
|
||||
Classes.active="{Binding IsStepsSection}"
|
||||
Command="{Binding SelectDetailSectionCommand}"
|
||||
CommandParameter="steps">
|
||||
<StackPanel Orientation="Horizontal" Spacing="5">
|
||||
<TextBlock Text="{loc:Tr details.sections.steps}" VerticalAlignment="Center"/>
|
||||
<TextBlock Classes="seg-count" Text="{Binding StepsBadge}"
|
||||
VerticalAlignment="Center"
|
||||
IsVisible="{Binding StepsBadge, Converter={x:Static StringConverters.IsNotNullOrEmpty}}"/>
|
||||
</StackPanel>
|
||||
</Button>
|
||||
<Button Classes="seg-btn"
|
||||
Classes.active="{Binding IsFilesSection}"
|
||||
Command="{Binding SelectDetailSectionCommand}"
|
||||
CommandParameter="files">
|
||||
<StackPanel Orientation="Horizontal" Spacing="5">
|
||||
<TextBlock Text="{loc:Tr details.sections.files}" VerticalAlignment="Center"/>
|
||||
<TextBlock Classes="seg-count" Text="{Binding FilesBadge}"
|
||||
VerticalAlignment="Center"
|
||||
IsVisible="{Binding FilesBadge, Converter={x:Static StringConverters.IsNotNullOrEmpty}}"/>
|
||||
</StackPanel>
|
||||
</Button>
|
||||
</StackPanel>
|
||||
|
||||
<!-- Copy formatted -->
|
||||
<Button Grid.Column="2"
|
||||
@@ -27,10 +80,11 @@
|
||||
<PathIcon Data="{StaticResource Icon.Copy}" Width="11" Height="11"/>
|
||||
</Button>
|
||||
|
||||
<!-- Preview/Edit toggle -->
|
||||
<!-- Preview/Edit toggle (Description section only) -->
|
||||
<Button Grid.Column="3"
|
||||
Classes="btn"
|
||||
Padding="8,3"
|
||||
IsVisible="{Binding IsDescriptionSection}"
|
||||
ToolTip.Tip="{loc:Tr details.toggleEditPreviewTip}"
|
||||
Command="{Binding ToggleEditDescriptionCommand}">
|
||||
<Panel>
|
||||
@@ -42,132 +96,101 @@
|
||||
</Grid>
|
||||
</Border>
|
||||
|
||||
<!-- Body (scrolls inside the card so the card fills its row to the divider) -->
|
||||
<!-- Body: only the active section is shown -->
|
||||
<ScrollViewer VerticalScrollBarVisibility="Auto">
|
||||
<StackPanel Margin="14" Spacing="10">
|
||||
<Panel Margin="14">
|
||||
|
||||
<!-- Description (always visible) -->
|
||||
<Panel>
|
||||
<!-- Edit mode: raw TextBox -->
|
||||
<TextBox Text="{Binding EditableDescription, Mode=TwoWay}"
|
||||
AcceptsReturn="True"
|
||||
TextWrapping="Wrap"
|
||||
MinHeight="80"
|
||||
MaxHeight="320"
|
||||
Padding="8"
|
||||
FontFamily="{DynamicResource MonoFont}"
|
||||
FontSize="{StaticResource FontSizeBody}"
|
||||
Background="{DynamicResource Surface3Brush}"
|
||||
BorderBrush="{DynamicResource LineBrush}"
|
||||
BorderThickness="1"
|
||||
CornerRadius="8"
|
||||
IsVisible="{Binding IsEditingDescription}"/>
|
||||
<!-- Preview mode: rendered composed text (title + description + open steps) -->
|
||||
<ctl:MarkdownView Markdown="{Binding ComposedPreview}"
|
||||
IsVisible="{Binding !IsEditingDescription}"/>
|
||||
</Panel>
|
||||
<!-- Description -->
|
||||
<Panel IsVisible="{Binding IsDescriptionSection}">
|
||||
<!-- Edit mode: raw TextBox -->
|
||||
<TextBox Text="{Binding EditableDescription, Mode=TwoWay}"
|
||||
AcceptsReturn="True"
|
||||
TextWrapping="Wrap"
|
||||
MinHeight="80"
|
||||
MaxHeight="320"
|
||||
Padding="8"
|
||||
FontFamily="{DynamicResource MonoFont}"
|
||||
FontSize="{StaticResource FontSizeBody}"
|
||||
Background="{DynamicResource Surface3Brush}"
|
||||
BorderBrush="{DynamicResource LineBrush}"
|
||||
BorderThickness="1"
|
||||
CornerRadius="8"
|
||||
IsVisible="{Binding IsEditingDescription}"/>
|
||||
<!-- Preview mode: rendered composed text (title + description + open steps) -->
|
||||
<ctl:MarkdownView Markdown="{Binding ComposedPreview}"
|
||||
IsVisible="{Binding !IsEditingDescription}"/>
|
||||
</Panel>
|
||||
|
||||
<!-- Steps: always-visible summary strip; expand to manage -->
|
||||
<Border BorderBrush="{DynamicResource LineBrush}"
|
||||
BorderThickness="0,1,0,0"
|
||||
Padding="0,8,0,0">
|
||||
<StackPanel Spacing="6">
|
||||
<!-- Steps -->
|
||||
<StackPanel IsVisible="{Binding IsStepsSection}" Spacing="6">
|
||||
<TextBox Text="{Binding NewSubtaskTitle, Mode=TwoWay}"
|
||||
PlaceholderText="Add step…"
|
||||
Padding="8"
|
||||
Background="{DynamicResource Surface3Brush}"
|
||||
BorderBrush="{DynamicResource LineBrush}"
|
||||
BorderThickness="1"
|
||||
CornerRadius="8">
|
||||
<TextBox.KeyBindings>
|
||||
<KeyBinding Gesture="Enter" Command="{Binding AddSubtaskCommand}"/>
|
||||
</TextBox.KeyBindings>
|
||||
</TextBox>
|
||||
|
||||
<!-- Summary header (click to expand/collapse) -->
|
||||
<Button Classes="flat" Cursor="Hand"
|
||||
HorizontalAlignment="Stretch"
|
||||
HorizontalContentAlignment="Stretch"
|
||||
Command="{Binding ToggleStepsExpandedCommand}">
|
||||
<Grid ColumnDefinitions="Auto,Auto,*,Auto">
|
||||
<Panel Grid.Column="0" Width="12" Margin="0,0,6,0" VerticalAlignment="Center">
|
||||
<TextBlock Classes="meta" Text="▸" IsVisible="{Binding !IsStepsExpanded}"/>
|
||||
<TextBlock Classes="meta" Text="▾" IsVisible="{Binding IsStepsExpanded}"/>
|
||||
</Panel>
|
||||
<TextBlock Grid.Column="1" Classes="section-label" Text="STEPS"
|
||||
VerticalAlignment="Center"/>
|
||||
<TextBlock Grid.Column="3" Classes="meta" Text="{Binding StepsSummary}"
|
||||
Foreground="{DynamicResource TextMuteBrush}"
|
||||
VerticalAlignment="Center"/>
|
||||
</Grid>
|
||||
</Button>
|
||||
<!-- Subtask rows -->
|
||||
<ItemsControl ItemsSource="{Binding Subtasks}">
|
||||
<ItemsControl.ItemTemplate>
|
||||
<DataTemplate DataType="vm:SubtaskRowViewModel">
|
||||
<Border Classes="subtask-row" Classes.done="{Binding Done}">
|
||||
<Grid ColumnDefinitions="Auto,*">
|
||||
|
||||
<!-- Expanded: add-step input + step rows -->
|
||||
<StackPanel IsVisible="{Binding IsStepsExpanded}" Spacing="6">
|
||||
<TextBox Text="{Binding NewSubtaskTitle, Mode=TwoWay}"
|
||||
PlaceholderText="Add step…"
|
||||
Padding="8"
|
||||
Background="{DynamicResource Surface3Brush}"
|
||||
BorderBrush="{DynamicResource LineBrush}"
|
||||
BorderThickness="1"
|
||||
CornerRadius="8">
|
||||
<TextBox.KeyBindings>
|
||||
<KeyBinding Gesture="Enter" Command="{Binding AddSubtaskCommand}"/>
|
||||
</TextBox.KeyBindings>
|
||||
</TextBox>
|
||||
<!-- Check circle -->
|
||||
<Button Grid.Column="0"
|
||||
Classes="flat"
|
||||
Padding="0"
|
||||
Margin="0,0,8,0"
|
||||
VerticalAlignment="Center"
|
||||
Command="{Binding $parent[ItemsControl].((vm:DetailsIslandViewModel)DataContext).ToggleSubtaskDoneCommand}"
|
||||
CommandParameter="{Binding}">
|
||||
<Ellipse Classes="task-check"
|
||||
Classes.done="{Binding Done}"
|
||||
Width="16" Height="16"
|
||||
Cursor="Hand"/>
|
||||
</Button>
|
||||
|
||||
<!-- Subtask rows -->
|
||||
<ItemsControl ItemsSource="{Binding Subtasks}">
|
||||
<ItemsControl.ItemTemplate>
|
||||
<DataTemplate DataType="vm:SubtaskRowViewModel">
|
||||
<Border Classes="subtask-row" Classes.done="{Binding Done}">
|
||||
<Grid ColumnDefinitions="Auto,*">
|
||||
|
||||
<!-- Check circle -->
|
||||
<Button Grid.Column="0"
|
||||
Classes="flat"
|
||||
Padding="0"
|
||||
Margin="0,0,8,0"
|
||||
VerticalAlignment="Center"
|
||||
Command="{Binding $parent[ItemsControl].((vm:DetailsIslandViewModel)DataContext).ToggleSubtaskDoneCommand}"
|
||||
CommandParameter="{Binding}">
|
||||
<Ellipse Classes="task-check"
|
||||
Classes.done="{Binding Done}"
|
||||
Width="16" Height="16"
|
||||
Cursor="Hand"/>
|
||||
</Button>
|
||||
|
||||
<!-- Title / edit -->
|
||||
<Panel Grid.Column="1" VerticalAlignment="Center">
|
||||
<TextBlock Classes="subtask-title"
|
||||
Text="{Binding Title}"
|
||||
IsVisible="{Binding !IsEditing}"
|
||||
<!-- Title / edit -->
|
||||
<Panel Grid.Column="1" VerticalAlignment="Center">
|
||||
<TextBlock Classes="subtask-title"
|
||||
Text="{Binding Title}"
|
||||
IsVisible="{Binding !IsEditing}"
|
||||
FontSize="{StaticResource FontSizeBody}"
|
||||
Foreground="{DynamicResource TextDimBrush}"
|
||||
VerticalAlignment="Center"
|
||||
TextWrapping="Wrap"
|
||||
Cursor="Ibeam"
|
||||
Tapped="OnSubtaskTitleTapped"/>
|
||||
<TextBox Classes="subtask-edit"
|
||||
Text="{Binding Title, Mode=TwoWay}"
|
||||
IsVisible="{Binding IsEditing}"
|
||||
FontSize="{StaticResource FontSizeBody}"
|
||||
Foreground="{DynamicResource TextDimBrush}"
|
||||
VerticalAlignment="Center"
|
||||
AcceptsReturn="False"
|
||||
TextWrapping="Wrap"
|
||||
Cursor="Ibeam"
|
||||
Tapped="OnSubtaskTitleTapped"/>
|
||||
<TextBox Classes="subtask-edit"
|
||||
Text="{Binding Title, Mode=TwoWay}"
|
||||
IsVisible="{Binding IsEditing}"
|
||||
FontSize="{StaticResource FontSizeBody}"
|
||||
AcceptsReturn="False"
|
||||
TextWrapping="Wrap"
|
||||
LostFocus="OnSubtaskEditLostFocus">
|
||||
<TextBox.KeyBindings>
|
||||
<KeyBinding Gesture="Enter"
|
||||
Command="{Binding $parent[ItemsControl].((vm:DetailsIslandViewModel)DataContext).CommitSubtaskEditCommand}"
|
||||
CommandParameter="{Binding}"/>
|
||||
</TextBox.KeyBindings>
|
||||
</TextBox>
|
||||
</Panel>
|
||||
LostFocus="OnSubtaskEditLostFocus">
|
||||
<TextBox.KeyBindings>
|
||||
<KeyBinding Gesture="Enter"
|
||||
Command="{Binding $parent[ItemsControl].((vm:DetailsIslandViewModel)DataContext).CommitSubtaskEditCommand}"
|
||||
CommandParameter="{Binding}"/>
|
||||
</TextBox.KeyBindings>
|
||||
</TextBox>
|
||||
</Panel>
|
||||
|
||||
</Grid>
|
||||
</Border>
|
||||
</DataTemplate>
|
||||
</ItemsControl.ItemTemplate>
|
||||
</ItemsControl>
|
||||
</StackPanel>
|
||||
</Grid>
|
||||
</Border>
|
||||
</DataTemplate>
|
||||
</ItemsControl.ItemTemplate>
|
||||
</ItemsControl>
|
||||
</StackPanel>
|
||||
</Border>
|
||||
|
||||
<!-- Attachments section -->
|
||||
<Border BorderBrush="{DynamicResource LineBrush}"
|
||||
BorderThickness="0,1,0,0"
|
||||
Padding="0,8,0,0">
|
||||
<StackPanel Spacing="6">
|
||||
<TextBlock Classes="section-label" Text="{loc:Tr details.attachments.sectionLabel}"/>
|
||||
|
||||
<!-- Files -->
|
||||
<StackPanel IsVisible="{Binding IsFilesSection}" Spacing="6">
|
||||
<!-- Attachment rows -->
|
||||
<ItemsControl ItemsSource="{Binding Attachments}">
|
||||
<ItemsControl.ItemTemplate>
|
||||
@@ -211,9 +234,8 @@
|
||||
Foreground="{DynamicResource TextMuteBrush}"
|
||||
TextWrapping="Wrap"/>
|
||||
</StackPanel>
|
||||
</Border>
|
||||
|
||||
</StackPanel>
|
||||
</Panel>
|
||||
</ScrollViewer>
|
||||
</DockPanel>
|
||||
</Border>
|
||||
|
||||
Reference in New Issue
Block a user