Design: polish result cards, empty state centering, FAB and nav bar colors

- Center no-results placeholder vertically by overlaying on Grid row
- Reduce result card height: smaller action buttons, halved graph view
- Add NavigationBarColor theme resource, use for FAB and nav bar
- Fix ApplyNavBarColors to read from theme instead of hardcoding #31333b
- Make title bar play button blue (#007AFF)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Gerwin Kuijntjes
2026-04-02 11:51:03 +02:00
parent bf88052d53
commit 35e81a8cb9
5 changed files with 45 additions and 37 deletions

View File

@@ -49,7 +49,11 @@ namespace Xamarin.Neo4j
{
if (MainPage is NavigationPage navPage)
{
navPage.BarBackgroundColor = Color.FromArgb("#31333b");
if (Resources.TryGetValue("NavigationBarColor", out var navColor) && navColor is Color color)
navPage.BarBackgroundColor = color;
else
navPage.BarBackgroundColor = Color.FromArgb("#31333b");
navPage.BarTextColor = Colors.White;
}
}

View File

@@ -30,7 +30,8 @@
<ToolbarItem.IconImageSource>
<FontImageSource
FontFamily="{StaticResource FontAwesomeSolid}"
Glyph="{x:Static fonts:FontAwesomeSolid.Play}" Size="20" />
Glyph="{x:Static fonts:FontAwesomeSolid.Play}" Size="20"
Color="#007AFF" />
</ToolbarItem.IconImageSource>
</ToolbarItem>
</ContentPage.ToolbarItems>
@@ -144,64 +145,64 @@
<StackLayout BindableLayout.ItemsSource="{Binding QueryResults}" Spacing="0">
<BindableLayout.ItemTemplate>
<DataTemplate>
<Border Margin="12,0,12,8"
<Border Margin="12,0,12,6"
BackgroundColor="{DynamicResource Extreme}"
Stroke="{DynamicResource QueryTextBorder}"
StrokeThickness="1"
StrokeShape="RoundRectangle 4">
<StackLayout Spacing="0">
<!-- Action row -->
<Grid ColumnDefinitions="*,*,*,*,Auto" Padding="4,2">
<Grid ColumnDefinitions="*,*,*,*,Auto" Padding="4,0">
<Button Grid.Column="0"
Text="{x:Static fonts:FontAwesomeSolid.Star}"
FontFamily="{StaticResource FontAwesomeSolid}" FontSize="15"
FontFamily="{StaticResource FontAwesomeSolid}" FontSize="13"
BackgroundColor="Transparent"
TextColor="{DynamicResource SecondaryTextColor}"
HeightRequest="40"
HeightRequest="32"
Command="{Binding BindingContext.Commands[SaveQuery], Source={x:Reference sessionPage}}"
CommandParameter="{Binding .}" />
<Button Grid.Column="1"
Text="{x:Static fonts:FontAwesomeSolid.Expand}"
FontFamily="{StaticResource FontAwesomeSolid}" FontSize="15"
FontFamily="{StaticResource FontAwesomeSolid}" FontSize="13"
BackgroundColor="Transparent"
IsEnabled="{Binding CanDisplayGraph}"
TextColor="{DynamicResource SecondaryTextColor}"
HeightRequest="40"
HeightRequest="32"
Command="{Binding BindingContext.Commands[OpenGraph], Source={x:Reference sessionPage}}"
CommandParameter="{Binding .}" />
<Button Grid.Column="2"
Text="{x:Static fonts:FontAwesomeSolid.Code}"
FontFamily="{StaticResource FontAwesomeSolid}" FontSize="15"
FontFamily="{StaticResource FontAwesomeSolid}" FontSize="13"
BackgroundColor="Transparent"
IsEnabled="{Binding Success}"
TextColor="{DynamicResource SecondaryTextColor}"
HeightRequest="40"
HeightRequest="32"
Command="{Binding BindingContext.Commands[OpenTable], Source={x:Reference sessionPage}}"
CommandParameter="{Binding .}" />
<Button Grid.Column="3"
Text="{x:Static fonts:FontAwesomeSolid.TrashAlt}"
FontFamily="{StaticResource FontAwesomeSolid}" FontSize="15"
FontFamily="{StaticResource FontAwesomeSolid}" FontSize="13"
BackgroundColor="Transparent"
TextColor="{DynamicResource SecondaryTextColor}"
HeightRequest="40"
HeightRequest="32"
Command="{Binding BindingContext.Commands[DeleteResult], Source={x:Reference sessionPage}}"
CommandParameter="{Binding .}" />
<Button Grid.Column="4"
Text="{x:Static fonts:FontAwesomeSolid.ChevronUp}"
FontFamily="{StaticResource FontAwesomeSolid}" FontSize="12"
FontFamily="{StaticResource FontAwesomeSolid}" FontSize="10"
BackgroundColor="Transparent"
TextColor="{DynamicResource SecondaryTextColor}"
WidthRequest="40" HeightRequest="40"
WidthRequest="32" HeightRequest="32"
Clicked="ToggleResultCollapse" />
</Grid>
<!-- Query label -->
<Label Text="{Binding DisplayQuery}"
Padding="12,0,12,8"
FontSize="12"
Padding="12,0,12,4"
FontSize="11"
TextColor="{DynamicResource SecondaryTextColor}"
LineBreakMode="TailTruncation"
MaxLines="2">
MaxLines="1">
<Label.GestureRecognizers>
<TapGestureRecognizer
Command="{Binding BindingContext.Commands[LoadResultQuery], Source={x:Reference sessionPage}}"
@@ -219,27 +220,28 @@
</StackLayout>
</StackLayout>
<!-- Empty hint (no results yet) -->
<StackLayout IsVisible="{Binding IsEmpty}" HorizontalOptions="Center" Spacing="12" Padding="32,24">
<Label Text="{x:Static fonts:FontAwesomeSolid.Database}"
FontFamily="{StaticResource FontAwesomeSolid}"
FontSize="48"
TextColor="{DynamicResource SecondaryTextColor}"
HorizontalOptions="Center" />
<Label Text="No results yet"
FontSize="18" FontAttributes="Bold"
TextColor="{DynamicResource SecondaryTextColor}"
HorizontalOptions="Center" />
<Label Text="Write a query and tap play, or load a saved query above"
FontSize="14"
TextColor="{DynamicResource SecondaryTextColor}"
HorizontalTextAlignment="Center"
HorizontalOptions="Center" />
</StackLayout>
</StackLayout>
</ScrollView>
<!-- Empty hint (no results yet) — overlaid and vertically centered -->
<StackLayout Grid.Row="1" IsVisible="{Binding IsEmpty}" HorizontalOptions="Center" VerticalOptions="Center" Spacing="12" Padding="32,24">
<Label Text="{x:Static fonts:FontAwesomeSolid.Database}"
FontFamily="{StaticResource FontAwesomeSolid}"
FontSize="48"
TextColor="{DynamicResource SecondaryTextColor}"
HorizontalOptions="Center" />
<Label Text="No results yet"
FontSize="18" FontAttributes="Bold"
TextColor="{DynamicResource SecondaryTextColor}"
HorizontalOptions="Center" />
<Label Text="Write a query and tap play, or load a saved query above"
FontSize="14"
TextColor="{DynamicResource SecondaryTextColor}"
HorizontalTextAlignment="Center"
HorizontalOptions="Center" />
</StackLayout>
</Grid>
</ContentPage.Content>
</ContentPage>

View File

@@ -17,6 +17,7 @@
<Color x:Key="QueryTextBorder">#2a2a2a</Color>
<Color x:Key="QueryActionBar">#141414</Color>
<Color x:Key="Extreme">#141414</Color>
<Color x:Key="NavigationBarColor">#141414</Color>
<Style TargetType="ContentPage" ApplyToDerivedTypes="True">
<Setter Property="BackgroundColor" Value="{StaticResource PageBackground}" />
@@ -28,7 +29,7 @@
</Style>
<Style TargetType="NavigationPage">
<Setter Property="BarBackgroundColor" Value="#141414"/>
<Setter Property="BarBackgroundColor" Value="{StaticResource NavigationBarColor}"/>
<Setter Property="BarTextColor" Value="#e2e2e2" />
</Style>

View File

@@ -17,6 +17,7 @@
<Color x:Key="QueryTextBorder">#e0e0e0</Color>
<Color x:Key="QueryActionBar">#f5f5f5</Color>
<Color x:Key="Extreme">#ffffff</Color>
<Color x:Key="NavigationBarColor">#0c0c0c</Color>
<Style TargetType="ContentPage" ApplyToDerivedTypes="True">
<Setter Property="BackgroundColor" Value="{StaticResource PageBackground}" />
@@ -37,7 +38,7 @@
</Style>
<Style TargetType="NavigationPage">
<Setter Property="BarBackgroundColor" Value="#0c0c0c"/>
<Setter Property="BarBackgroundColor" Value="{StaticResource NavigationBarColor}"/>
<Setter Property="BarTextColor" Value="#e2e2e2" />
</Style>

View File

@@ -276,7 +276,7 @@ namespace Xamarin.Neo4j.ViewModels
get
{
var screenHeight = _screenSizeService.GetScreenHeight();
return Math.Max(200, screenHeight - 300);
return Math.Max(120, (screenHeight - 300) / 2);
}
}