Styles: add shared Typography/Scroll resources; add platform overrides (Desktop/Android/Browser) and load via App; switch icons to resource-based sizes and cap history text lines.

This commit is contained in:
Codex CLI 2025-08-27 03:15:47 -05:00
commit 7e40c1dc0b
8 changed files with 144 additions and 6 deletions

View file

@ -0,0 +1,17 @@
<ResourceDictionary xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<!-- Android overrides: larger, touch-first -->
<x:Double x:Key="FontSizeBase">16</x:Double>
<x:Double x:Key="FontSizeLarge">18</x:Double>
<x:Double x:Key="IconSizeM">24</x:Double>
<x:Double x:Key="LineHeightBase">1.35</x:Double>
<!-- Thin overlay-like scrollbars -->
<Style Selector="ScrollBar:vertical">
<Setter Property="Width" Value="8"/>
</Style>
<Style Selector="ScrollBar:horizontal">
<Setter Property="Height" Value="8"/>
</Style>
</ResourceDictionary>

View file

@ -0,0 +1,16 @@
<ResourceDictionary xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<!-- Browser overrides: middle ground -->
<x:Double x:Key="FontSizeBase">15</x:Double>
<x:Double x:Key="IconSizeM">22</x:Double>
<x:Double x:Key="LineHeightBase">1.3</x:Double>
<!-- Slightly thinner scrollbars on web -->
<Style Selector="ScrollBar:vertical">
<Setter Property="Width" Value="8"/>
</Style>
<Style Selector="ScrollBar:horizontal">
<Setter Property="Height" Value="8"/>
</Style>
</ResourceDictionary>

View file

@ -0,0 +1,16 @@
<ResourceDictionary xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<!-- Desktop overrides: slightly denser -->
<x:Double x:Key="FontSizeBase">13</x:Double>
<x:Double x:Key="LineHeightBase">1.2</x:Double>
<x:Double x:Key="IconSizeM">20</x:Double>
<!-- Scrollbars a bit thicker on desktop -->
<Style Selector="ScrollBar:vertical">
<Setter Property="Width" Value="12"/>
</Style>
<Style Selector="ScrollBar:horizontal">
<Setter Property="Height" Value="12"/>
</Style>
</ResourceDictionary>

View file

@ -6,6 +6,8 @@
<Application.Styles>
<FluentTheme />
<StyleInclude Source="avares://AdvancedCalculator/Styles/Typography.axaml"/>
<StyleInclude Source="avares://AdvancedCalculator/Styles/Scroll.axaml"/>
</Application.Styles>
<Application.Resources>

View file

@ -5,6 +5,8 @@ using Avalonia;
using Avalonia.Controls.ApplicationLifetimes;
using Avalonia.Data.Core.Plugins;
using Avalonia.Markup.Xaml;
using Avalonia.Styling;
using System;
namespace AdvancedCalculator;
@ -21,6 +23,40 @@ public partial class App : Application
// Without this line you will get duplicate validations from both Avalonia and CT
BindingPlugins.DataValidators.RemoveAt(0);
// Load platform-specific styles (typography, scrollbars overrides)
try
{
var styles = Current?.Styles;
if (styles is not null)
{
if (OperatingSystem.IsAndroid())
{
styles.Add(new StyleInclude(new Uri("avares://AdvancedCalculator/"))
{
Source = new Uri("avares://AdvancedCalculator.Android/Styles/Android.axaml")
});
}
else if (OperatingSystem.IsBrowser())
{
styles.Add(new StyleInclude(new Uri("avares://AdvancedCalculator/"))
{
Source = new Uri("avares://AdvancedCalculator.Browser/Styles/Browser.axaml")
});
}
else
{
styles.Add(new StyleInclude(new Uri("avares://AdvancedCalculator/"))
{
Source = new Uri("avares://AdvancedCalculator.Desktop/Styles/Desktop.axaml")
});
}
}
}
catch
{
// If a platform-specific style dictionary is missing, continue without failing.
}
if (ApplicationLifetime is IClassicDesktopStyleApplicationLifetime desktop)
{
desktop.MainWindow = new MainWindow

View file

@ -0,0 +1,21 @@
<ResourceDictionary xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<!-- Shared scrolling defaults -->
<Style Selector="ListBox">
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled"/>
</Style>
<Style Selector="ScrollViewer">
<Setter Property="CanScrollHorizontally" Value="False"/>
</Style>
<!-- Thin-ish scrollbars by default; platform overrides will adjust -->
<Style Selector="ScrollBar:vertical">
<Setter Property="Width" Value="10"/>
</Style>
<Style Selector="ScrollBar:horizontal">
<Setter Property="Height" Value="10"/>
</Style>
</ResourceDictionary>

View file

@ -0,0 +1,30 @@
<ResourceDictionary xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<!-- Shared typography resources -->
<x:Double x:Key="FontSizeSmall">12</x:Double>
<x:Double x:Key="FontSizeBase">14</x:Double>
<x:Double x:Key="FontSizeLarge">16</x:Double>
<x:Double x:Key="FontSizeXL">20</x:Double>
<x:Double x:Key="IconSizeS">18</x:Double>
<x:Double x:Key="IconSizeM">22</x:Double>
<x:Double x:Key="IconSizeL">26</x:Double>
<x:Double x:Key="LineHeightTight">1.1</x:Double>
<x:Double x:Key="LineHeightBase">1.25</x:Double>
<x:Double x:Key="LineHeightRelaxed">1.4</x:Double>
<!-- Defaults for text -->
<Style Selector="TextBlock">
<Setter Property="TextElement.FontSize" Value="{DynamicResource FontSizeBase}"/>
<Setter Property="TextWrapping" Value="Wrap"/>
<Setter Property="LineHeight" Value="{DynamicResource LineHeightBase}"/>
</Style>
<!-- Subtle caption text helper -->
<Style Selector="TextBlock.caption">
<Setter Property="TextElement.FontSize" Value="{DynamicResource FontSizeSmall}"/>
<Setter Property="Opacity" Value="0.85"/>
</Style>
</ResourceDictionary>

View file

@ -59,8 +59,8 @@
Background="Transparent" BorderThickness="0" Padding="8" MinHeight="44"
AutomationProperties.Name="Insert variable">
<Grid ColumnDefinitions="Auto,*,Auto">
<TextBlock Grid.Column="0" FontFamily="{StaticResource MDI}"
FontSize="22" Text="{Binding Icon}" VerticalAlignment="Center" Margin="0,0,8,0" />
<TextBlock Grid.Column="0" FontFamily="{StaticResource MDI}"
FontSize="{DynamicResource IconSizeM}" Text="{Binding Icon}" VerticalAlignment="Center" Margin="0,0,8,0" />
<TextBlock Grid.Column="1" Text="{Binding VariableName}" FontWeight="Bold" VerticalAlignment="Center" />
<StackPanel Grid.Column="2" Spacing="6" VerticalAlignment="Center">
<TextBlock Text="{Binding Value}" />
@ -132,11 +132,11 @@
<ListBox.ItemTemplate>
<DataTemplate x:DataType="m:HistoryItem">
<Grid ColumnDefinitions="Auto,*" Margin="4,2">
<TextBlock FontFamily="{StaticResource MDI}" Text="{x:Static m:IconFont.ArrowRightDropCircle}"
FontSize="22" VerticalAlignment="Center" Margin="0,0,8,0" />
<TextBlock FontFamily="{StaticResource MDI}" Text="{x:Static m:IconFont.ArrowRightDropCircle}"
FontSize="{DynamicResource IconSizeM}" VerticalAlignment="Center" Margin="0,0,8,0" />
<StackPanel Grid.Column="1">
<TextBlock Text="{Binding Input}" />
<TextBlock Text="{Binding Output}" FontWeight="Bold" />
<TextBlock Text="{Binding Input}" MaxLines="3" />
<TextBlock Text="{Binding Output}" FontWeight="Bold" MaxLines="2" />
</StackPanel>
</Grid>
</DataTemplate>