🪄 🔥 Remove magic numbers from templates

pull/3/head
Alexis Drai 2 years ago
parent bc1518d906
commit 3cd13d9bf5

@ -86,6 +86,9 @@
</ItemGroup>
<ItemGroup>
<MauiXaml Update="Resources\Styles\Values.xaml">
<Generator>MSBuild:Compile</Generator>
</MauiXaml>
<MauiXaml Update="Views\AlbumPage.xaml">
<Generator>MSBuild:Compile</Generator>
</MauiXaml>

@ -8,6 +8,7 @@
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="Resources/Styles/Colors.xaml" />
<ResourceDictionary Source="Resources/Styles/Styles.xaml" />
<ResourceDictionary Source="Resources/Styles/Values.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>

@ -4,21 +4,21 @@
x:Class="AMC.View.Controls.LibraryCategoryItem">
<StackLayout Orientation="Horizontal"
Padding="8"
Padding="{StaticResource SpaceXS}"
BackgroundColor="{AppThemeBinding Light={StaticResource Background}, Dark={StaticResource BackgroundDark}}">
<Image x:Name="IconImage"
WidthRequest="24"
HeightRequest="24"
Margin="0, 0, 8, 0"
WidthRequest="{StaticResource SpaceM}"
HeightRequest="{StaticResource SpaceM}"
Margin="{StaticResource RightSpaceLittle}"
HorizontalOptions="Start" />
<Label x:Name="CategoryLabel"
FontSize="16"
FontSize="{StaticResource SubSubtitleFontSize}"
TextColor="{AppThemeBinding Light={StaticResource Primary}, Dark={StaticResource PrimaryDark}}"
HorizontalOptions="StartAndExpand" />
<Image Source="icon_chevron_right.png"
WidthRequest="24"
HeightRequest="24"
Margin="8, 0, 0, 0"
WidthRequest="{StaticResource SpaceM}"
HeightRequest="{StaticResource SpaceM}"
Margin="{StaticResource LeftSpaceLittle}"
HorizontalOptions="End" />
</StackLayout>

@ -8,7 +8,14 @@
<Setter Property="HeightRequest" Value="1"/>
<Setter Property="Color" Value="{StaticResource Gray200}"/>
<Setter Property="HorizontalOptions" Value="FillAndExpand"/>
<Setter Property="Margin" Value="32,0,8,0"/>
<Setter Property="Margin" Value="32, 0, 8, 0"/>
</Style>
<Style TargetType="BoxView" x:Key="HeadGraySeparator">
<Setter Property="HeightRequest" Value="1"/>
<Setter Property="Color" Value="{StaticResource Gray200}"/>
<Setter Property="HorizontalOptions" Value="FillAndExpand"/>
<Setter Property="Margin" Value="8, 8, 8, 8"/>
</Style>
<Style TargetType="Label" x:Key="FooterLabel">

@ -0,0 +1,33 @@
<?xml version="1.0" encoding="UTF-8" ?>
<?xaml-comp compile="true" ?>
<ResourceDictionary
xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">
<x:Double x:Key="SpaceXXS">4</x:Double>
<x:Double x:Key="SpaceXS">8</x:Double>
<x:Double x:Key="SpaceS">12</x:Double>
<x:Double x:Key="SpaceM">16</x:Double>
<x:Double x:Key="SpaceL">32</x:Double>
<x:Double x:Key="SpaceXL">64</x:Double>
<x:Double x:Key="SpaceXXL">128</x:Double>
<x:Double x:Key="AlbumPageCoverHeight">320</x:Double>
<Thickness x:Key="BottomBarSpace">0, 0, 0, 128</Thickness>
<Thickness x:Key="TopSpaceSome">0, 24, 0, 0</Thickness>
<Thickness x:Key="TopBottomSpaceLittle">0, 8, 0, 8</Thickness>
<Thickness x:Key="RightSpaceLittle">0, 0, 8, 0</Thickness>
<Thickness x:Key="LeftSpaceLittle">8, 0, 0, 0</Thickness>
<Thickness x:Key="BottomSpaceLittle">0, 0, 0, 8</Thickness>
<Thickness x:Key="LeftRightSpaceLarge">32, 0, 32, 0</Thickness>
<Thickness x:Key="WideButtonLeft">16, 16, 8, 16</Thickness>
<Thickness x:Key="WideButtonRight">8, 16, 16, 16</Thickness>
<CornerRadius x:Key="SlightlyRoundedCorner">8, 8, 8, 8</CornerRadius>
<x:Double x:Key="TitleFontSize">32</x:Double>
<x:Double x:Key="SubtitleFontSize">24</x:Double>
<x:Double x:Key="SubSubtitleFontSize">16</x:Double>
<x:Double x:Key="DetailsFontSize">12</x:Double>
</ResourceDictionary>

@ -15,130 +15,123 @@
<ScrollView
Padding="0, 0, 0, 128"
Padding="{StaticResource BottomBarSpace}"
BackgroundColor="{AppThemeBinding Light={StaticResource Background}, Dark={StaticResource BackgroundDark}}">
<Grid Margin="8">
<Grid Margin="{StaticResource SpaceXS}">
<Grid.RowDefinitions>
<RowDefinition Height="300"/>
<RowDefinition Height="{StaticResource AlbumPageCoverHeight}"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Border
Grid.Row="0"
Margin="32,0,32,0">
Margin="{StaticResource LeftRightSpaceLarge}">
<Border.StrokeShape>
<RoundRectangle CornerRadius="8,8,8,8" />
<RoundRectangle CornerRadius="{StaticResource SlightlyRoundedCorner}" />
</Border.StrokeShape>
<Image Source="{Binding CoverImage}"
Aspect="AspectFill"/>
</Border>
<StackLayout Padding="8"
<StackLayout Padding="{StaticResource SpaceXS}"
Grid.Row="1">
<Label Text="{Binding Title}"
FontSize="24"
FontSize="{StaticResource SubtitleFontSize}"
TextColor="{AppThemeBinding Light={StaticResource Primary}, Dark={StaticResource PrimaryDark}}"
HorizontalTextAlignment="Center"/>
<Label Text="{Binding Artist}"
FontSize="16"
FontSize="{StaticResource SubSubtitleFontSize}"
TextColor="{StaticResource Secondary}"
HorizontalTextAlignment="Center" />
</StackLayout>
<StackLayout Grid.Row="2">
<Label Text="{Binding Details, StringFormat='\{0\} · \{1\}'}"
FontSize="12"
FontSize="{StaticResource DetailsFontSize}"
TextColor="{StaticResource Gray}"
HorizontalTextAlignment="Center"/>
<Grid Margin="8">
<Grid Margin="{StaticResource SpaceXS}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Button Text="{x:Static strings:Strings.PlayButton}"
Margin="16,16,8,16"
Margin="{StaticResource WideButtonLeft}"
Grid.Column="0"/>
<Button Text="{x:Static strings:Strings.ShuffleButton}"
Margin="8,16,16,16"
Margin="{StaticResource WideButtonRight}"
Grid.Column="1"/>
</Grid>
</StackLayout>
<BoxView HeightRequest="1"
Color="{StaticResource Gray300}"
HorizontalOptions="FillAndExpand"
Margin="8"
<BoxView Style="{StaticResource HeadGraySeparator}"
Grid.Row="3" />
<CollectionView ItemsSource="{Binding Songs}"
Margin="0,0,0,24"
Grid.Row="4">
<CollectionView.ItemTemplate>
<DataTemplate x:DataType="vm:SongViewModel">
<StackLayout>
<Grid Margin="0,8,0,8">
<Grid Margin="{StaticResource TopBottomSpaceLittle}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="32"/>
<ColumnDefinition Width="{StaticResource SpaceL}"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Label Text="{Binding Index}"
FontSize="16"
FontSize="{StaticResource SubSubtitleFontSize}"
TextColor="{StaticResource Gray}"
Margin="0,0,8,0"
Margin="{StaticResource RightSpaceLittle}"
HorizontalTextAlignment="Center"
HorizontalOptions="Center"
Grid.Column="0"/>
<Label Text="{Binding Title}"
FontSize="16"
FontSize="{StaticResource SubSubtitleFontSize}"
TextColor="{AppThemeBinding Light={StaticResource Primary}, Dark={StaticResource PrimaryDark}}"
LineBreakMode="TailTruncation"
Grid.Column="1"/>
<Label Text="{x:Static strings:Strings.HThreeDotsMenu}"
FontSize="16"
FontSize="{StaticResource SubSubtitleFontSize}"
TextColor="{AppThemeBinding Light={StaticResource Primary}, Dark={StaticResource PrimaryDark}}"
FontAttributes="Bold"
HorizontalOptions="End"
Margin="0,0,8,0"
Margin="{StaticResource RightSpaceLittle}"
Grid.Column="2"/>
</Grid>
<BoxView HeightRequest="1"
Color="{StaticResource Gray300}"
HorizontalOptions="FillAndExpand"
Margin="32,0,8,0"/>
<BoxView Style="{StaticResource GraySeparator}"/>
</StackLayout>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
<StackLayout Margin="{StaticResource TopSpaceSome}"
Grid.Row="5">
<Label Text="{Binding ReleaseDate, StringFormat='{0:d MMMM yyyy}'}"
Style="{StaticResource FooterLabel}"
Grid.Row="5" />
Style="{StaticResource FooterLabel}" />
<Label Text="{Binding SongsInfo, Converter={StaticResource SongsInfo}}"
Style="{StaticResource FooterLabel}"
Grid.Row="6" />
Style="{StaticResource FooterLabel}" />
<Label Text="{Binding CopyrightInfo, StringFormat='℗ \{0\} \{1\}'}"
Style="{StaticResource FooterLabel}"
Grid.Row="7" />
Style="{StaticResource FooterLabel}" />
</StackLayout>
</Grid>
</ScrollView>
</ContentPage>

@ -10,72 +10,64 @@
x:DataType="vm:LibraryViewModel">
<ScrollView
Padding="0, 0, 0, 128"
Padding="{StaticResource BottomBarSpace}"
BackgroundColor="{AppThemeBinding Light={StaticResource Background}, Dark={StaticResource BackgroundDark}}">
<StackLayout Spacing="8">
<StackLayout Spacing="{StaticResource SpaceXS}"
Margin="{StaticResource BottomSpaceLittle}">
<Label Text="{x:Static strings:Strings.LibraryTitle}"
FontSize="32"
FontSize="{StaticResource TitleFontSize}"
FontAttributes="Bold"
TextColor="{AppThemeBinding Light={StaticResource Primary}, Dark={StaticResource PrimaryDark}}"
Margin="8" />
Margin="{StaticResource SpaceXS}" />
<StackLayout Orientation="Vertical" Spacing="0">
<ctl:LibraryCategoryItem
CategoryText="{x:Static strings:Strings.PlaylistsCategory}"
<ctl:LibraryCategoryItem CategoryText="{x:Static strings:Strings.PlaylistsCategory}"
IconSource="icon_playlists.png" />
<BoxView Style="{StaticResource GraySeparator}"/>
<ctl:LibraryCategoryItem
CategoryText="{x:Static strings:Strings.ArtistsCategory}"
<ctl:LibraryCategoryItem CategoryText="{x:Static strings:Strings.ArtistsCategory}"
IconSource="icon_artists.png" />
<BoxView Style="{StaticResource GraySeparator}"/>
<ctl:LibraryCategoryItem
CategoryText="{x:Static strings:Strings.AlbumsCategory}"
<ctl:LibraryCategoryItem CategoryText="{x:Static strings:Strings.AlbumsCategory}"
IconSource="icon_albums.png" />
<BoxView Style="{StaticResource GraySeparator}"/>
<ctl:LibraryCategoryItem
CategoryText="{x:Static strings:Strings.SongsCategory}"
<ctl:LibraryCategoryItem CategoryText="{x:Static strings:Strings.SongsCategory}"
IconSource="icon_songs.png" />
<BoxView Style="{StaticResource GraySeparator}"/>
<ctl:LibraryCategoryItem
CategoryText="{x:Static strings:Strings.GenresCategory}"
<ctl:LibraryCategoryItem CategoryText="{x:Static strings:Strings.GenresCategory}"
IconSource="icon_genres.png" />
<BoxView Style="{StaticResource GraySeparator}"/>
</StackLayout>
<Label Text="{x:Static strings:Strings.RecentlyAddedHeader}"
FontSize="16"
FontSize="{StaticResource SubSubtitleFontSize}"
FontAttributes="Bold"
TextColor="{AppThemeBinding Light={StaticResource Primary}, Dark={StaticResource PrimaryDark}}"
Margin="8, 16, 8, 8" />
Margin="{StaticResource SpaceXS}" />
<CollectionView
ItemsSource="{Binding Albums}"
<CollectionView ItemsSource="{Binding Albums}"
ItemsLayout="VerticalGrid, 2"
SelectionMode="Single"
SelectionChanged="OnAlbumSelected">
<CollectionView.ItemTemplate>
<DataTemplate x:DataType="vm:AlbumViewModel">
<StackLayout Margin="16">
<StackLayout Margin="{StaticResource SpaceS}">
<Border>
<Border.StrokeShape>
<RoundRectangle CornerRadius="8,8,8,8" />
<RoundRectangle CornerRadius="{StaticResource SlightlyRoundedCorner}" />
</Border.StrokeShape>
<Image
Source="{Binding CoverImage}"
<Image Source="{Binding CoverImage}"
Aspect="AspectFill" />
</Border>
<Label
Text="{Binding Title}"
<Label Text="{Binding Title}"
TextColor="{AppThemeBinding Light={StaticResource Primary}, Dark={StaticResource PrimaryDark}}"
LineBreakMode="TailTruncation" />
<Label
Text="{Binding Artist}"
<Label Text="{Binding Artist}"
TextColor="{StaticResource Gray}"
LineBreakMode="TailTruncation" />
</StackLayout>

Loading…
Cancel
Save