feat(ui): 디자인 마무리 — AI 작업종류 옵션 + 큐 accent bar + 빈 상태 + polish
디자인 세션 마지막 단계(순차 workflow). Linear/Geist 영감 polish + AI 작업 선택 UI. - AI 작업종류 ComboBox(요약/번역/교정) + 번역 대상언어 → BuildOptions의 opts.Ai.Task/TargetLanguage 연결. 이제 Codex로 번역·교정도 가능 - 큐 row 좌측 형식색 accent bar + hover, 빈 상태(Browse + 안내) 개선 - FormatShiftTheme: FsNumStyle/FsLossPillStyle/FsListRowStyle/FsIconButtonStyle 재사용 스타일
This commit is contained in:
Yun Chan
parent
5c7a4a9ee3
commit
e30559b3cd
3 changed files with 226 additions and 61 deletions
|
|
@ -190,6 +190,30 @@
|
|||
</Border>
|
||||
</StackPanel>
|
||||
|
||||
<!-- AI Task -->
|
||||
<StackPanel x:Name="AiTaskPanel" Margin="0,0,0,32">
|
||||
<TextBlock Text="AI 작업" Style="{StaticResource FsLabelStyle}"/>
|
||||
<ComboBox x:Name="AiTaskCombo" Margin="0,8,0,0"
|
||||
SelectedIndex="0"
|
||||
SelectionChanged="OnAiTaskChanged">
|
||||
<ComboBoxItem Content="요약"/>
|
||||
<ComboBoxItem Content="번역"/>
|
||||
<ComboBoxItem Content="교정"/>
|
||||
</ComboBox>
|
||||
<TextBlock x:Name="AiTaskHint" Margin="0,6,0,0"
|
||||
Style="{StaticResource FsCaptionStyle}"
|
||||
Text="텍스트(txt·md·docx) 출력 시 LLM이 적용합니다"/>
|
||||
<StackPanel x:Name="AiTargetLangPanel" Margin="0,10,0,0"
|
||||
Visibility="Collapsed">
|
||||
<TextBlock Text="대상 언어" Style="{StaticResource FsCaptionStyle}"
|
||||
Margin="0,0,0,4"/>
|
||||
<TextBox x:Name="AiTargetLangBox"
|
||||
Style="{StaticResource FsPathInputStyle}"
|
||||
Text="영어"
|
||||
ToolTip="번역 대상 언어 (예: 영어)"/>
|
||||
</StackPanel>
|
||||
</StackPanel>
|
||||
|
||||
<!-- Stats Box -->
|
||||
<Border Background="{StaticResource FsBgInput}"
|
||||
BorderBrush="{StaticResource FsBorderSubtle}"
|
||||
|
|
@ -365,20 +389,43 @@
|
|||
<!-- Active Queue view -->
|
||||
<Grid x:Name="ActiveQueueView" Visibility="Collapsed">
|
||||
<Grid x:Name="DropZoneEmpty">
|
||||
<Border Background="{StaticResource FsBgBase}">
|
||||
<StackPanel HorizontalAlignment="Center" VerticalAlignment="Center"
|
||||
Margin="48">
|
||||
<Path Width="48" Height="48" Stretch="Uniform"
|
||||
Stroke="{StaticResource FsAccentBlue}" StrokeThickness="1.5"
|
||||
Data="M21,15 L21,19 C21,20.1 20.1,21 19,21 L5,21 C3.9,21 3,20.1 3,19 L3,15 M7,10 L12,15 L17,10 M12,15 L12,3"/>
|
||||
<TextBlock Margin="0,16,0,0" FontSize="16" FontWeight="SemiBold"
|
||||
Foreground="{StaticResource FsTextPrimary}"
|
||||
HorizontalAlignment="Center"
|
||||
Text="Drop files anywhere to queue"/>
|
||||
<TextBlock Margin="0,4,0,0" Style="{StaticResource FsCaptionStyle}"
|
||||
HorizontalAlignment="Center"
|
||||
Text="PNG · JPG · GIF · HEIC · RAW · PDF · DOCX · HTML · HWP/HWPX"/>
|
||||
</StackPanel>
|
||||
<Border Background="{StaticResource FsBgBase}" Padding="32">
|
||||
<!-- 점선 드롭존: 절제된 dashed 보더 + 중앙 정렬 안내 -->
|
||||
<Grid MaxWidth="440"
|
||||
HorizontalAlignment="Center"
|
||||
VerticalAlignment="Center">
|
||||
<!-- 점선 테두리(드롭존 느낌) -->
|
||||
<Rectangle RadiusX="10" RadiusY="10"
|
||||
Stroke="{StaticResource FsBorderHairline}"
|
||||
StrokeThickness="1.25"
|
||||
StrokeDashArray="5 4"
|
||||
Fill="#04FFFFFF"/>
|
||||
<StackPanel HorizontalAlignment="Center" VerticalAlignment="Center"
|
||||
Margin="48,56">
|
||||
<Path Width="44" Height="44" Stretch="Uniform"
|
||||
HorizontalAlignment="Center"
|
||||
Stroke="{StaticResource FsAccentBlue}" StrokeThickness="1.5"
|
||||
Data="M21,15 L21,19 C21,20.1 20.1,21 19,21 L5,21 C3.9,21 3,20.1 3,19 L3,15 M7,10 L12,15 L17,10 M12,15 L12,3"/>
|
||||
<TextBlock Margin="0,18,0,0" FontSize="16" FontWeight="SemiBold"
|
||||
Foreground="{StaticResource FsTextPrimary}"
|
||||
HorizontalAlignment="Center"
|
||||
Text="Drop files anywhere to queue"/>
|
||||
<TextBlock Margin="0,6,0,0" Style="{StaticResource FsCaptionStyle}"
|
||||
HorizontalAlignment="Center"
|
||||
TextAlignment="Center"
|
||||
Text="이미지 · 문서 · 데이터 · 영상 · 오디오 등 무엇이든"/>
|
||||
<Button Margin="0,22,0,0"
|
||||
HorizontalAlignment="Center"
|
||||
Style="{StaticResource FsSecondaryButtonStyle}"
|
||||
Padding="18,8"
|
||||
Content="Browse…"
|
||||
Command="{Binding AddFilesCommand, RelativeSource={RelativeSource AncestorType=Window}}"/>
|
||||
<TextBlock Margin="0,12,0,0" Style="{StaticResource FsCaptionStyle}"
|
||||
HorizontalAlignment="Center"
|
||||
Foreground="{StaticResource FsTextTertiary}"
|
||||
Text="또는 Ctrl+O"/>
|
||||
</StackPanel>
|
||||
</Grid>
|
||||
</Border>
|
||||
</Grid>
|
||||
<ScrollViewer x:Name="ActiveQueueScroll" VerticalScrollBarVisibility="Auto"
|
||||
|
|
@ -386,7 +433,8 @@
|
|||
<ItemsControl x:Name="ActiveQueueList">
|
||||
<ItemsControl.ItemTemplate>
|
||||
<DataTemplate>
|
||||
<Border Margin="0,0,0,8" Padding="12,10" CornerRadius="6"
|
||||
<!-- row hover: FsListRowStyle 느낌(투명→surface hover, hairline 보더) + 좌측 형식색 accent bar -->
|
||||
<Border x:Name="QueueRow" Margin="0,0,0,8" Padding="0" CornerRadius="6"
|
||||
Background="{StaticResource FsBgPanel}"
|
||||
BorderBrush="{StaticResource FsBorderSubtle}"
|
||||
BorderThickness="1"
|
||||
|
|
@ -395,58 +443,79 @@
|
|||
Tag="{Binding}">
|
||||
<Grid>
|
||||
<Grid.ColumnDefinitions>
|
||||
<ColumnDefinition Width="40"/>
|
||||
<ColumnDefinition Width="2"/>
|
||||
<ColumnDefinition Width="*"/>
|
||||
<ColumnDefinition Width="100"/>
|
||||
<ColumnDefinition Width="120"/>
|
||||
<ColumnDefinition Width="40"/>
|
||||
</Grid.ColumnDefinitions>
|
||||
<Border Width="32" Height="32" CornerRadius="4"
|
||||
<!-- 좌측 2px 세로 accent bar: 해당 파일 형식색 -->
|
||||
<Border Grid.Column="0"
|
||||
Width="2"
|
||||
Background="{Binding FormatBrush}"
|
||||
VerticalAlignment="Center">
|
||||
<TextBlock Text="{Binding FormatLabel}"
|
||||
Foreground="White" FontSize="10"
|
||||
FontWeight="SemiBold"
|
||||
HorizontalAlignment="Center"
|
||||
VerticalAlignment="Center"/>
|
||||
</Border>
|
||||
<StackPanel Grid.Column="1" Margin="16,0,0,0"
|
||||
CornerRadius="6,0,0,6"/>
|
||||
<Grid Grid.Column="1" Margin="12,10">
|
||||
<Grid.ColumnDefinitions>
|
||||
<ColumnDefinition Width="40"/>
|
||||
<ColumnDefinition Width="*"/>
|
||||
<ColumnDefinition Width="100"/>
|
||||
<ColumnDefinition Width="120"/>
|
||||
<ColumnDefinition Width="40"/>
|
||||
</Grid.ColumnDefinitions>
|
||||
<Border Width="32" Height="32" CornerRadius="4"
|
||||
Background="{Binding FormatBrush}"
|
||||
VerticalAlignment="Center">
|
||||
<TextBlock Text="{Binding FileName}"
|
||||
Style="{StaticResource FsBodyStyle}"
|
||||
FontWeight="Medium"
|
||||
TextTrimming="CharacterEllipsis"/>
|
||||
<TextBlock Text="{Binding MetaLine}"
|
||||
Style="{StaticResource FsCaptionStyle}"
|
||||
Margin="0,2,0,0"/>
|
||||
<ProgressBar Height="3" Margin="0,4,0,0"
|
||||
Minimum="0" Maximum="100"
|
||||
Value="{Binding ProgressValue, Mode=OneWay}"
|
||||
Visibility="{Binding ProgressVisibility, Mode=OneWay}"/>
|
||||
</StackPanel>
|
||||
<TextBlock Grid.Column="2" Text="{Binding SizeText}"
|
||||
Style="{StaticResource FsMonoStyle}"
|
||||
HorizontalAlignment="Right"
|
||||
VerticalAlignment="Center"/>
|
||||
<TextBlock Grid.Column="3" Text="{Binding StateText}"
|
||||
FontFamily="{StaticResource FsFontMono}"
|
||||
FontSize="12"
|
||||
Foreground="{Binding StateBrush}"
|
||||
VerticalAlignment="Center"/>
|
||||
<Button Grid.Column="4"
|
||||
Style="{StaticResource FsSecondaryButtonStyle}"
|
||||
Background="Transparent"
|
||||
BorderThickness="0"
|
||||
Padding="6"
|
||||
Click="OnRemoveQueueItem"
|
||||
Tag="{Binding}">
|
||||
<Path Width="14" Height="14" Stretch="Uniform"
|
||||
Stroke="{StaticResource FsTextTertiary}"
|
||||
StrokeThickness="2"
|
||||
Data="M18,6 L6,18 M6,6 L18,18"/>
|
||||
</Button>
|
||||
<TextBlock Text="{Binding FormatLabel}"
|
||||
Foreground="White" FontSize="10"
|
||||
FontWeight="SemiBold"
|
||||
HorizontalAlignment="Center"
|
||||
VerticalAlignment="Center"/>
|
||||
</Border>
|
||||
<StackPanel Grid.Column="1" Margin="16,0,0,0"
|
||||
VerticalAlignment="Center">
|
||||
<TextBlock Text="{Binding FileName}"
|
||||
Style="{StaticResource FsBodyStyle}"
|
||||
FontWeight="Medium"
|
||||
TextTrimming="CharacterEllipsis"/>
|
||||
<TextBlock Text="{Binding MetaLine}"
|
||||
Style="{StaticResource FsCaptionStyle}"
|
||||
Margin="0,2,0,0"/>
|
||||
<ProgressBar Height="3" Margin="0,4,0,0"
|
||||
Minimum="0" Maximum="100"
|
||||
Value="{Binding ProgressValue, Mode=OneWay}"
|
||||
Visibility="{Binding ProgressVisibility, Mode=OneWay}"/>
|
||||
</StackPanel>
|
||||
<TextBlock Grid.Column="2" Text="{Binding SizeText}"
|
||||
Style="{StaticResource FsMonoStyle}"
|
||||
HorizontalAlignment="Right"
|
||||
VerticalAlignment="Center"/>
|
||||
<TextBlock Grid.Column="3" Text="{Binding StateText}"
|
||||
FontFamily="{StaticResource FsFontMono}"
|
||||
FontSize="12"
|
||||
Foreground="{Binding StateBrush}"
|
||||
VerticalAlignment="Center"/>
|
||||
<Button Grid.Column="4"
|
||||
Style="{StaticResource FsIconButtonStyle}"
|
||||
Width="28" Height="28"
|
||||
VerticalAlignment="Center"
|
||||
HorizontalAlignment="Right"
|
||||
ToolTip="큐에서 제거"
|
||||
Click="OnRemoveQueueItem"
|
||||
Tag="{Binding}">
|
||||
<Path Width="13" Height="13" Stretch="Uniform"
|
||||
Stroke="{StaticResource FsTextTertiary}"
|
||||
StrokeThickness="2"
|
||||
Data="M18,6 L6,18 M6,6 L18,18"/>
|
||||
</Button>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Border>
|
||||
<DataTemplate.Triggers>
|
||||
<!-- row hover: 배경 살짝 밝게 + hairline 보더 -->
|
||||
<Trigger SourceName="QueueRow" Property="IsMouseOver" Value="True">
|
||||
<Setter TargetName="QueueRow" Property="Background"
|
||||
Value="{StaticResource FsBgSurfaceHover}"/>
|
||||
<Setter TargetName="QueueRow" Property="BorderBrush"
|
||||
Value="{StaticResource FsBorderHairline}"/>
|
||||
</Trigger>
|
||||
</DataTemplate.Triggers>
|
||||
</DataTemplate>
|
||||
</ItemsControl.ItemTemplate>
|
||||
</ItemsControl>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue