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) 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; navPage.BarTextColor = Colors.White;
} }
} }

View File

@@ -30,7 +30,8 @@
<ToolbarItem.IconImageSource> <ToolbarItem.IconImageSource>
<FontImageSource <FontImageSource
FontFamily="{StaticResource FontAwesomeSolid}" FontFamily="{StaticResource FontAwesomeSolid}"
Glyph="{x:Static fonts:FontAwesomeSolid.Play}" Size="20" /> Glyph="{x:Static fonts:FontAwesomeSolid.Play}" Size="20"
Color="#007AFF" />
</ToolbarItem.IconImageSource> </ToolbarItem.IconImageSource>
</ToolbarItem> </ToolbarItem>
</ContentPage.ToolbarItems> </ContentPage.ToolbarItems>
@@ -144,64 +145,64 @@
<StackLayout BindableLayout.ItemsSource="{Binding QueryResults}" Spacing="0"> <StackLayout BindableLayout.ItemsSource="{Binding QueryResults}" Spacing="0">
<BindableLayout.ItemTemplate> <BindableLayout.ItemTemplate>
<DataTemplate> <DataTemplate>
<Border Margin="12,0,12,8" <Border Margin="12,0,12,6"
BackgroundColor="{DynamicResource Extreme}" BackgroundColor="{DynamicResource Extreme}"
Stroke="{DynamicResource QueryTextBorder}" Stroke="{DynamicResource QueryTextBorder}"
StrokeThickness="1" StrokeThickness="1"
StrokeShape="RoundRectangle 4"> StrokeShape="RoundRectangle 4">
<StackLayout Spacing="0"> <StackLayout Spacing="0">
<!-- Action row --> <!-- Action row -->
<Grid ColumnDefinitions="*,*,*,*,Auto" Padding="4,2"> <Grid ColumnDefinitions="*,*,*,*,Auto" Padding="4,0">
<Button Grid.Column="0" <Button Grid.Column="0"
Text="{x:Static fonts:FontAwesomeSolid.Star}" Text="{x:Static fonts:FontAwesomeSolid.Star}"
FontFamily="{StaticResource FontAwesomeSolid}" FontSize="15" FontFamily="{StaticResource FontAwesomeSolid}" FontSize="13"
BackgroundColor="Transparent" BackgroundColor="Transparent"
TextColor="{DynamicResource SecondaryTextColor}" TextColor="{DynamicResource SecondaryTextColor}"
HeightRequest="40" HeightRequest="32"
Command="{Binding BindingContext.Commands[SaveQuery], Source={x:Reference sessionPage}}" Command="{Binding BindingContext.Commands[SaveQuery], Source={x:Reference sessionPage}}"
CommandParameter="{Binding .}" /> CommandParameter="{Binding .}" />
<Button Grid.Column="1" <Button Grid.Column="1"
Text="{x:Static fonts:FontAwesomeSolid.Expand}" Text="{x:Static fonts:FontAwesomeSolid.Expand}"
FontFamily="{StaticResource FontAwesomeSolid}" FontSize="15" FontFamily="{StaticResource FontAwesomeSolid}" FontSize="13"
BackgroundColor="Transparent" BackgroundColor="Transparent"
IsEnabled="{Binding CanDisplayGraph}" IsEnabled="{Binding CanDisplayGraph}"
TextColor="{DynamicResource SecondaryTextColor}" TextColor="{DynamicResource SecondaryTextColor}"
HeightRequest="40" HeightRequest="32"
Command="{Binding BindingContext.Commands[OpenGraph], Source={x:Reference sessionPage}}" Command="{Binding BindingContext.Commands[OpenGraph], Source={x:Reference sessionPage}}"
CommandParameter="{Binding .}" /> CommandParameter="{Binding .}" />
<Button Grid.Column="2" <Button Grid.Column="2"
Text="{x:Static fonts:FontAwesomeSolid.Code}" Text="{x:Static fonts:FontAwesomeSolid.Code}"
FontFamily="{StaticResource FontAwesomeSolid}" FontSize="15" FontFamily="{StaticResource FontAwesomeSolid}" FontSize="13"
BackgroundColor="Transparent" BackgroundColor="Transparent"
IsEnabled="{Binding Success}" IsEnabled="{Binding Success}"
TextColor="{DynamicResource SecondaryTextColor}" TextColor="{DynamicResource SecondaryTextColor}"
HeightRequest="40" HeightRequest="32"
Command="{Binding BindingContext.Commands[OpenTable], Source={x:Reference sessionPage}}" Command="{Binding BindingContext.Commands[OpenTable], Source={x:Reference sessionPage}}"
CommandParameter="{Binding .}" /> CommandParameter="{Binding .}" />
<Button Grid.Column="3" <Button Grid.Column="3"
Text="{x:Static fonts:FontAwesomeSolid.TrashAlt}" Text="{x:Static fonts:FontAwesomeSolid.TrashAlt}"
FontFamily="{StaticResource FontAwesomeSolid}" FontSize="15" FontFamily="{StaticResource FontAwesomeSolid}" FontSize="13"
BackgroundColor="Transparent" BackgroundColor="Transparent"
TextColor="{DynamicResource SecondaryTextColor}" TextColor="{DynamicResource SecondaryTextColor}"
HeightRequest="40" HeightRequest="32"
Command="{Binding BindingContext.Commands[DeleteResult], Source={x:Reference sessionPage}}" Command="{Binding BindingContext.Commands[DeleteResult], Source={x:Reference sessionPage}}"
CommandParameter="{Binding .}" /> CommandParameter="{Binding .}" />
<Button Grid.Column="4" <Button Grid.Column="4"
Text="{x:Static fonts:FontAwesomeSolid.ChevronUp}" Text="{x:Static fonts:FontAwesomeSolid.ChevronUp}"
FontFamily="{StaticResource FontAwesomeSolid}" FontSize="12" FontFamily="{StaticResource FontAwesomeSolid}" FontSize="10"
BackgroundColor="Transparent" BackgroundColor="Transparent"
TextColor="{DynamicResource SecondaryTextColor}" TextColor="{DynamicResource SecondaryTextColor}"
WidthRequest="40" HeightRequest="40" WidthRequest="32" HeightRequest="32"
Clicked="ToggleResultCollapse" /> Clicked="ToggleResultCollapse" />
</Grid> </Grid>
<!-- Query label --> <!-- Query label -->
<Label Text="{Binding DisplayQuery}" <Label Text="{Binding DisplayQuery}"
Padding="12,0,12,8" Padding="12,0,12,4"
FontSize="12" FontSize="11"
TextColor="{DynamicResource SecondaryTextColor}" TextColor="{DynamicResource SecondaryTextColor}"
LineBreakMode="TailTruncation" LineBreakMode="TailTruncation"
MaxLines="2"> MaxLines="1">
<Label.GestureRecognizers> <Label.GestureRecognizers>
<TapGestureRecognizer <TapGestureRecognizer
Command="{Binding BindingContext.Commands[LoadResultQuery], Source={x:Reference sessionPage}}" Command="{Binding BindingContext.Commands[LoadResultQuery], Source={x:Reference sessionPage}}"
@@ -219,27 +220,28 @@
</StackLayout> </StackLayout>
</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> </StackLayout>
</ScrollView> </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> </Grid>
</ContentPage.Content> </ContentPage.Content>
</ContentPage> </ContentPage>

View File

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

View File

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

View File

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