mirror of
https://github.com/claunia/marechai.git
synced 2025-12-16 19:14:25 +00:00
311 lines
16 KiB
XML
311 lines
16 KiB
XML
<?xml version="1.0"
|
|
encoding="utf-8"?>
|
|
|
|
<Page x:Class="Marechai.App.Presentation.Views.ComputersPage"
|
|
x:Name="PageRoot"
|
|
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
|
|
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
|
|
xmlns:utu="using:Uno.Toolkit.UI"
|
|
NavigationCacheMode="Required"
|
|
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
|
|
|
|
<Grid utu:SafeArea.Insets="VisibleBounds">
|
|
<Grid.RowDefinitions>
|
|
<RowDefinition Height="Auto" /> <RowDefinition Height="*" />
|
|
</Grid.RowDefinitions>
|
|
|
|
<!-- Header -->
|
|
<utu:NavigationBar Grid.Row="0"
|
|
Content="{Binding Path=Title}">
|
|
<utu:NavigationBar.MainCommand>
|
|
<AppBarButton Icon="Back"
|
|
Label="Back"
|
|
Command="{Binding GoBackCommand}"
|
|
AutomationProperties.Name="Go back" />
|
|
</utu:NavigationBar.MainCommand>
|
|
</utu:NavigationBar>
|
|
|
|
<!-- Content -->
|
|
<ScrollViewer Grid.Row="1">
|
|
<StackPanel Padding="16"
|
|
Spacing="24">
|
|
|
|
<!-- Computer Count Display -->
|
|
<StackPanel HorizontalAlignment="Center"
|
|
Spacing="8">
|
|
<TextBlock Text="{Binding ComputerCountText}"
|
|
TextAlignment="Center"
|
|
FontSize="18"
|
|
FontWeight="SemiBold"
|
|
Foreground="{ThemeResource SystemBaseMediumColor}" />
|
|
<TextBlock Text="{Binding ComputerCount}"
|
|
TextAlignment="Center"
|
|
FontSize="48"
|
|
FontWeight="Bold"
|
|
Foreground="{ThemeResource SystemAccentColor}" />
|
|
</StackPanel>
|
|
|
|
<!-- Loading State -->
|
|
<StackPanel Visibility="{Binding IsLoading}"
|
|
VerticalAlignment="Center"
|
|
HorizontalAlignment="Center"
|
|
Padding="32"
|
|
Spacing="16">
|
|
<ProgressRing IsActive="True"
|
|
IsIndeterminate="True"
|
|
Height="48"
|
|
Width="48" />
|
|
<TextBlock Text="Loading..."
|
|
TextAlignment="Center"
|
|
FontSize="14" />
|
|
</StackPanel>
|
|
|
|
<!-- Error State -->
|
|
<StackPanel Visibility="{Binding HasError}"
|
|
Padding="16"
|
|
Background="{ThemeResource SystemErrorBackgroundColor}"
|
|
CornerRadius="8"
|
|
Spacing="8">
|
|
<TextBlock Text="Error"
|
|
FontWeight="Bold"
|
|
Foreground="{ThemeResource SystemErrorTextForegroundColor}" />
|
|
<TextBlock Text="{Binding ErrorMessage}"
|
|
Foreground="{ThemeResource SystemErrorTextForegroundColor}"
|
|
TextWrapping="Wrap" />
|
|
</StackPanel>
|
|
|
|
<!-- Main Content (visible when loaded and no error) -->
|
|
<StackPanel Visibility="{Binding IsDataLoaded}"
|
|
Spacing="24">
|
|
|
|
<!-- Letters Grid Section -->
|
|
<StackPanel Spacing="12">
|
|
<TextBlock Text="Browse by Letter"
|
|
FontSize="16"
|
|
FontWeight="SemiBold"
|
|
Foreground="{ThemeResource SystemBaseMediumColor}" />
|
|
<ItemsRepeater ItemsSource="{Binding LettersList}"
|
|
Layout="{StaticResource LettersGridLayout}">
|
|
<ItemsRepeater.ItemTemplate>
|
|
<DataTemplate>
|
|
<Button Content="{Binding}"
|
|
Command="{Binding DataContext.NavigateByLetterCommand, ElementName=PageRoot}"
|
|
CommandParameter="{Binding}"
|
|
Style="{StaticResource KeyboardKeyButtonStyle}" />
|
|
</DataTemplate>
|
|
</ItemsRepeater.ItemTemplate>
|
|
</ItemsRepeater>
|
|
</StackPanel>
|
|
|
|
<!-- Years Grid Section -->
|
|
<StackPanel Spacing="12">
|
|
<TextBlock Text="{Binding YearsGridTitle}"
|
|
FontSize="16"
|
|
FontWeight="SemiBold"
|
|
Foreground="{ThemeResource SystemBaseMediumColor}" />
|
|
<ItemsRepeater ItemsSource="{Binding YearsList}"
|
|
Layout="{StaticResource YearsGridLayout}">
|
|
<ItemsRepeater.ItemTemplate>
|
|
<DataTemplate>
|
|
<Button Content="{Binding}"
|
|
Command="{Binding DataContext.NavigateByYearCommand, ElementName=PageRoot}"
|
|
CommandParameter="{Binding}"
|
|
Style="{StaticResource KeyboardKeyButtonStyle}" />
|
|
</DataTemplate>
|
|
</ItemsRepeater.ItemTemplate>
|
|
</ItemsRepeater>
|
|
</StackPanel>
|
|
|
|
<!-- All Computers and Search Section -->
|
|
<StackPanel Spacing="12">
|
|
<Button Content="All Computers"
|
|
Padding="16,12"
|
|
HorizontalAlignment="Stretch"
|
|
FontSize="16"
|
|
FontWeight="SemiBold"
|
|
Command="{Binding NavigateAllComputersCommand}"
|
|
Style="{StaticResource AccentButtonStyle}" />
|
|
|
|
<!-- Search Field (placeholder for future implementation) -->
|
|
<TextBox PlaceholderText="Search computers..."
|
|
Padding="12"
|
|
IsEnabled="False"
|
|
Opacity="0.5" />
|
|
</StackPanel>
|
|
|
|
</StackPanel>
|
|
|
|
</StackPanel>
|
|
</ScrollViewer>
|
|
|
|
</Grid>
|
|
|
|
<Page.Resources>
|
|
<!-- Keyboard Key Button Style (revised: more padding, simplified borders to avoid clipping, darker scheme) -->
|
|
<Style x:Key="KeyboardKeyButtonStyle"
|
|
TargetType="Button">
|
|
<!-- Base appearance -->
|
|
<Setter Property="Foreground"
|
|
Value="#1A1A1A" />
|
|
<Setter Property="Background">
|
|
<Setter.Value>
|
|
<LinearGradientBrush StartPoint="0,0"
|
|
EndPoint="0,1">
|
|
<GradientStop Color="#D6D6D6"
|
|
Offset="0" />
|
|
<GradientStop Color="#C2C2C2"
|
|
Offset="0.55" />
|
|
<GradientStop Color="#B0B0B0"
|
|
Offset="1" />
|
|
</LinearGradientBrush>
|
|
</Setter.Value>
|
|
</Setter>
|
|
<Setter Property="BorderBrush"
|
|
Value="#7A7A7A" />
|
|
<Setter Property="BorderThickness"
|
|
Value="1" />
|
|
<Setter Property="CornerRadius"
|
|
Value="6" />
|
|
<Setter Property="Padding"
|
|
Value="14,12" /> <!-- Increased vertical padding to prevent cutoff -->
|
|
<Setter Property="Margin"
|
|
Value="4" />
|
|
<Setter Property="FontFamily"
|
|
Value="Segoe UI" />
|
|
<Setter Property="FontWeight"
|
|
Value="SemiBold" />
|
|
<Setter Property="FontSize"
|
|
Value="15" />
|
|
<Setter Property="HorizontalAlignment"
|
|
Value="Stretch" />
|
|
<Setter Property="VerticalAlignment"
|
|
Value="Stretch" />
|
|
<Setter Property="HorizontalContentAlignment"
|
|
Value="Center" />
|
|
<Setter Property="VerticalContentAlignment"
|
|
Value="Center" />
|
|
<Setter Property="MinWidth"
|
|
Value="52" />
|
|
<Setter Property="MinHeight"
|
|
Value="52" /> <!-- Larger min height avoids clipping ascenders/descenders -->
|
|
<Setter Property="Template">
|
|
<Setter.Value>
|
|
<ControlTemplate TargetType="Button">
|
|
<Grid>
|
|
<!-- Shadow (simple) -->
|
|
<Border x:Name="Shadow"
|
|
CornerRadius="6"
|
|
Background="#33000000"
|
|
Margin="2,4,4,2" />
|
|
<!-- Key surface -->
|
|
<Border x:Name="KeyBorder"
|
|
Background="{TemplateBinding Background}"
|
|
BorderBrush="{TemplateBinding BorderBrush}"
|
|
BorderThickness="{TemplateBinding BorderThickness}"
|
|
CornerRadius="{TemplateBinding CornerRadius}">
|
|
<!-- Inner highlight & content -->
|
|
<Grid>
|
|
<Border CornerRadius="{TemplateBinding CornerRadius}"
|
|
BorderBrush="#60FFFFFF"
|
|
BorderThickness="1,1,0,0" />
|
|
<Border CornerRadius="{TemplateBinding CornerRadius}"
|
|
BorderBrush="#30000000"
|
|
BorderThickness="0,0,1,1" />
|
|
<ContentPresenter x:Name="ContentPresenter"
|
|
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
|
|
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
|
|
Margin="0"
|
|
TextWrapping="NoWrap" />
|
|
</Grid>
|
|
</Border>
|
|
<VisualStateManager.VisualStateGroups>
|
|
<VisualStateGroup x:Name="CommonStates">
|
|
<VisualState x:Name="Normal" />
|
|
<VisualState x:Name="PointerOver">
|
|
<VisualState.Setters>
|
|
<Setter Target="KeyBorder.Background">
|
|
<Setter.Value>
|
|
<LinearGradientBrush StartPoint="0,0"
|
|
EndPoint="0,1">
|
|
<GradientStop Color="#E0E0E0"
|
|
Offset="0" />
|
|
<GradientStop Color="#CFCFCF"
|
|
Offset="0.55" />
|
|
<GradientStop Color="#BDBDBD"
|
|
Offset="1" />
|
|
</LinearGradientBrush>
|
|
</Setter.Value>
|
|
</Setter>
|
|
<Setter Target="KeyBorder.BorderBrush"
|
|
Value="#5F5F5F" />
|
|
</VisualState.Setters>
|
|
</VisualState>
|
|
<VisualState x:Name="Pressed">
|
|
<VisualState.Setters>
|
|
<Setter Target="KeyBorder.Background">
|
|
<Setter.Value>
|
|
<LinearGradientBrush StartPoint="0,0"
|
|
EndPoint="0,1">
|
|
<GradientStop Color="#9C9C9C"
|
|
Offset="0" />
|
|
<GradientStop Color="#A8A8A8"
|
|
Offset="0.55" />
|
|
<GradientStop Color="#B4B4B4"
|
|
Offset="1" />
|
|
</LinearGradientBrush>
|
|
</Setter.Value>
|
|
</Setter>
|
|
<Setter Target="KeyBorder.BorderBrush"
|
|
Value="#4A4A4A" />
|
|
<Setter Target="KeyBorder.RenderTransform">
|
|
<Setter.Value>
|
|
<TranslateTransform Y="2" />
|
|
</Setter.Value>
|
|
</Setter>
|
|
<Setter Target="Shadow.Opacity"
|
|
Value="0.15" />
|
|
</VisualState.Setters>
|
|
</VisualState>
|
|
<VisualState x:Name="Disabled">
|
|
<VisualState.Setters>
|
|
<Setter Target="KeyBorder.Opacity"
|
|
Value="0.45" />
|
|
<Setter Target="ContentPresenter.Foreground"
|
|
Value="#777777" />
|
|
</VisualState.Setters>
|
|
</VisualState>
|
|
</VisualStateGroup>
|
|
<VisualStateGroup x:Name="FocusStates">
|
|
<VisualState x:Name="Focused">
|
|
<VisualState.Setters>
|
|
<Setter Target="KeyBorder.BorderBrush"
|
|
Value="#3A7AFE" />
|
|
<Setter Target="KeyBorder.BorderThickness"
|
|
Value="2" />
|
|
</VisualState.Setters>
|
|
</VisualState>
|
|
<VisualState x:Name="Unfocused" />
|
|
</VisualStateGroup>
|
|
</VisualStateManager.VisualStateGroups>
|
|
</Grid>
|
|
</ControlTemplate>
|
|
</Setter.Value>
|
|
</Setter>
|
|
</Style>
|
|
|
|
<!-- Responsive Grid Layouts -->
|
|
<UniformGridLayout x:Key="LettersGridLayout"
|
|
ItemsStretch="Fill"
|
|
MinItemWidth="44"
|
|
MinItemHeight="44"
|
|
MaximumRowsOrColumns="13" />
|
|
|
|
<UniformGridLayout x:Key="YearsGridLayout"
|
|
ItemsStretch="Fill"
|
|
MinItemWidth="54"
|
|
MinItemHeight="44"
|
|
MaximumRowsOrColumns="10" />
|
|
|
|
</Page.Resources>
|
|
|
|
</Page> |