feat(sprint-3): apply Survey Teal field UI

This commit is contained in:
Brent Perteet
2026-08-20 22:00:31 -05:00
parent f9fb9f59f4
commit 5e87d81bb6
16 changed files with 954 additions and 562 deletions

View File

@@ -4,57 +4,91 @@
xmlns:vm="clr-namespace:FieldLogger.ViewModels"
x:Class="FieldLogger.Views.JobsPage"
x:DataType="vm:JobsViewModel"
Title="Jobs">
<ContentPage.ToolbarItems>
<ToolbarItem Text="New" Command="{Binding NewJobCommand}" />
</ContentPage.ToolbarItems>
Title="Jobs"
BackgroundColor="{DynamicResource UlColorCanvas}">
<Grid RowDefinitions="Auto,Auto,*" Padding="16" RowSpacing="16">
<VerticalStackLayout Spacing="4">
<Label Text="FIELD WORK" FontSize="14" FontAttributes="Bold" CharacterSpacing="1.5"
TextColor="{DynamicResource UlColorPrimary}" />
<Label Text="Jobs" Style="{StaticResource UlPageTitle}"
TextColor="{DynamicResource UlColorText}"
SemanticProperties.HeadingLevel="Level1" />
<Label Text="Choose the active job before capturing points."
FontSize="16" TextColor="{DynamicResource UlColorTextMuted}" />
</VerticalStackLayout>
<Grid Padding="16">
<CollectionView ItemsSource="{Binding Jobs}">
<CollectionView.EmptyView>
<VerticalStackLayout Spacing="8" VerticalOptions="Center">
<Label Text="No jobs yet." TextColor="Gray" HorizontalOptions="Center" />
<Button Text="Create First Job" Command="{Binding NewJobCommand}" HorizontalOptions="Center" />
</VerticalStackLayout>
</CollectionView.EmptyView>
<CollectionView.ItemTemplate>
<DataTemplate x:DataType="vm:JobListItem">
<Border StrokeThickness="0" Background="{AppThemeBinding Light=#F2F2F7, Dark=#1C1C1E}"
StrokeShape="RoundRectangle 10" Padding="12" Margin="0,4">
<Border.GestureRecognizers>
<TapGestureRecognizer
Command="{Binding OpenCommand, Source={RelativeSource AncestorType={x:Type vm:JobsViewModel}}}"
CommandParameter="{Binding .}" />
</Border.GestureRecognizers>
<Grid ColumnDefinitions="*,Auto,Auto" ColumnSpacing="8">
<VerticalStackLayout Spacing="2">
<HorizontalStackLayout Spacing="8">
<Label Text="{Binding Name}" FontAttributes="Bold" />
<Border IsVisible="{Binding IsActive}" Background="DodgerBlue"
StrokeThickness="0" StrokeShape="RoundRectangle 6" Padding="6,1">
<Label Text="ACTIVE" FontSize="10" TextColor="White" />
</Border>
</HorizontalStackLayout>
<Label FontSize="12" TextColor="Gray">
<Label.Text>
<MultiBinding StringFormat="{}{0} · {1} points">
<Binding Path="CreatedLabel" />
<Binding Path="PointCount" />
</MultiBinding>
</Label.Text>
</Label>
</VerticalStackLayout>
<Button Grid.Column="1" Text="Set Active" FontSize="12" Padding="10,4" VerticalOptions="Center"
Command="{Binding SetActiveCommand, Source={RelativeSource AncestorType={x:Type vm:JobsViewModel}}}"
CommandParameter="{Binding .}" />
<Button Grid.Column="2" Text="✕" FontSize="12" Padding="10,4" VerticalOptions="Center"
BackgroundColor="IndianRed" TextColor="White"
Command="{Binding DeleteCommand, Source={RelativeSource AncestorType={x:Type vm:JobsViewModel}}}"
CommandParameter="{Binding .}" />
</Grid>
<Button Grid.Row="1" Style="{StaticResource UlButtonPrimaryField}"
Text=" Create new job" Command="{Binding NewJobCommand}"
MinimumHeightRequest="{StaticResource UlTouchComfortable}" FontSize="16" FontAttributes="Bold"
SemanticProperties.Description="Create a new job and make it active" />
<RefreshView Grid.Row="2" Command="{Binding RefreshCommand}" IsRefreshing="{Binding IsBusy}">
<CollectionView ItemsSource="{Binding Jobs}"
SelectionMode="None"
SemanticProperties.Description="Jobs available on this device">
<CollectionView.EmptyView>
<Border Style="{StaticResource UlCard}" BackgroundColor="{DynamicResource UlColorSurfaceRaised}"
Stroke="{DynamicResource UlColorBorder}"
StrokeShape="RoundRectangle 12" Padding="24">
<VerticalStackLayout Spacing="8" VerticalOptions="Center">
<Label Text="No jobs yet" Style="{StaticResource UlEmptyStateTitle}"
HorizontalTextAlignment="Center" TextColor="{DynamicResource UlColorText}" />
<Label Text="Create a job to establish the capture context."
Style="{StaticResource UlEmptyStateBody}"
FontSize="16" HorizontalTextAlignment="Center"
TextColor="{DynamicResource UlColorTextMuted}" />
<Button Style="{StaticResource UlButtonPrimary}"
Text="Create first job" Command="{Binding NewJobCommand}"
MinimumHeightRequest="{StaticResource UlTouchComfortable}" HorizontalOptions="Fill"
SemanticProperties.Description="Create the first job" />
</VerticalStackLayout>
</Border>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</CollectionView.EmptyView>
<CollectionView.ItemTemplate>
<DataTemplate x:DataType="vm:JobListItem">
<Border Style="{StaticResource UlJobRow}" BackgroundColor="{DynamicResource UlColorSurfaceRaised}"
Stroke="{DynamicResource UlColorBorder}"
StrokeThickness="1" StrokeShape="RoundRectangle 12"
Padding="16" Margin="0,0,0,12" MinimumHeightRequest="136"
SemanticProperties.Description="{Binding AccessibilityDescription}"
SemanticProperties.Hint="Double tap to open job details">
<Border.GestureRecognizers>
<TapGestureRecognizer
Command="{Binding OpenCommand, Source={RelativeSource AncestorType={x:Type vm:JobsViewModel}}}"
CommandParameter="{Binding .}" />
</Border.GestureRecognizers>
<Grid RowDefinitions="Auto,Auto,Auto" ColumnDefinitions="*,Auto" RowSpacing="8" ColumnSpacing="12">
<Label Text="{Binding Name}" FontSize="20" FontAttributes="Bold"
TextColor="{DynamicResource UlColorText}" LineBreakMode="TailTruncation" />
<Border Grid.Column="1" Style="{StaticResource UlStatusBadge}"
BackgroundColor="{DynamicResource UlColorCanvas}"
Stroke="{DynamicResource UlColorBorder}"
StrokeShape="RoundRectangle 8" Padding="8,4">
<Label Text="{Binding ActiveStatusLabel}" FontSize="14" FontAttributes="Bold"
TextColor="{DynamicResource UlColorText}" />
</Border>
<Label Grid.Row="1" Grid.ColumnSpan="2" Text="{Binding JobSummary}"
FontSize="16" TextColor="{DynamicResource UlColorTextMuted}" />
<Grid Grid.Row="2" Grid.ColumnSpan="2" ColumnDefinitions="*,*" ColumnSpacing="8">
<Button Style="{StaticResource UlButtonSecondary}"
Text="{Binding ActiveActionLabel}"
IsEnabled="{Binding IsActive, Converter={StaticResource InvertBool}}"
Command="{Binding SetActiveCommand, Source={RelativeSource AncestorType={x:Type vm:JobsViewModel}}}"
CommandParameter="{Binding .}" MinimumHeightRequest="{StaticResource UlTouchMinimum}"
SemanticProperties.Description="{Binding ActiveActionDescription}" />
<Button Grid.Column="1" Style="{StaticResource UlButtonAccent}"
Text="Delete job"
BackgroundColor="{DynamicResource UlColorAccent}"
TextColor="{DynamicResource UlColorOnAccent}"
Command="{Binding DeleteCommand, Source={RelativeSource AncestorType={x:Type vm:JobsViewModel}}}"
CommandParameter="{Binding .}" MinimumHeightRequest="{StaticResource UlTouchMinimum}"
SemanticProperties.Description="{Binding DeleteDescription}" />
</Grid>
</Grid>
</Border>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</RefreshView>
</Grid>
</ContentPage>