mirror of
https://github.com/awatertrevi/xamarin-neo4j.git
synced 2026-09-22 09:05:29 +00:00
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:
@@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|
||||||
|
|||||||
@@ -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);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user