✨ Application UI

Meio.App/App.axaml

@@ -5,6 +5,32 @@
     <!-- "Default" ThemeVariant follows system theme variant. "Dark" or "Light" are other available options. -->
 
     <Application.Styles>
-        <FluentTheme />
+        <FluentTheme>
+            <FluentTheme.Palettes>
+                <!--<ColorPaletteResources x:Key="Light" Accent="{DynamicResource PrimaryAccentColor}"
+                                       RegionColor="{StaticResource LightBackgroundColor}"
+                                       ErrorText="{StaticResource SecondaryAccentColor}" />
+                <ColorPaletteResources x:Key="Dark" Accent="{DynamicResource PrimaryAccentColor}"
+                                       RegionColor="{StaticResource DarkBackgroundColor}"
+                                       ErrorText="{StaticResource PrimaryAccentColor}" /> TODO-->
+                <ColorPaletteResources x:Key="Light" Accent="{DynamicResource PrimaryAccentColor}" />
+                <ColorPaletteResources x:Key="Dark" Accent="{DynamicResource PrimaryAccentColor}" />
+            </FluentTheme.Palettes>
+        </FluentTheme>
+
+        <StyleInclude Source="avares://Meio.App/Resources/Styles.axaml" />
+        <StyleInclude Source="avares://Meio.App/Resources/Settings.axaml" />
+        <StyleInclude Source="avares://Meio.App/Resources/Home.axaml" />
+        <StyleInclude Source="avares://Meio.App/Controls/Card.axaml" />
+        <StyleInclude Source="avares://Meio.App/Controls/PlaylistCard.axaml" />
+        <StyleInclude Source="avares://Meio.App/Controls/PlayingWidget.axaml" />
     </Application.Styles>
+    <Application.Resources>
+        <ResourceDictionary>
+            <ResourceDictionary.MergedDictionaries>
+                <ResourceInclude Source="avares://Meio.App/Resources/ColorPalette.axaml" />
+            </ResourceDictionary.MergedDictionaries>
+        </ResourceDictionary>
+    </Application.Resources>
+
 </Application>

Meio.App/App.axaml.cs

@@ -1,6 +1,7 @@
 using Avalonia;
 using Avalonia.Controls.ApplicationLifetimes;
 using Avalonia.Markup.Xaml;
+using Meio.app.Views;
 using Microsoft.Extensions.Logging;
 using Microsoft.Extensions.Logging.Console;
 using PrettyLogging.Console;

Meio.App/Controls/Card.axaml

@@ -0,0 +1,28 @@
+<Styles xmlns="https://github.com/avaloniaui"
+        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+        xmlns:controls="using:Meio.app.Controls">
+    <Design.PreviewWith>
+        <controls:Card />
+    </Design.PreviewWith>
+
+    <Style Selector="controls|Card">
+        <!-- Set Defaults -->
+        <Setter Property="Template">
+            <ControlTemplate>
+                <Border Cursor="Hand">
+                    <StackPanel Spacing="16">
+                        <Border Width="150"
+                                Height="150"
+                                CornerRadius="16"
+                                BoxShadow="1 4 4 0 #4F000000"
+                                Background="{TemplateBinding CoverBrush}" />
+                        <Label>
+                            <TextBlock HorizontalAlignment="Center"
+                                       Text="{TemplateBinding Title}" />
+                        </Label>
+                    </StackPanel>
+                </Border>
+            </ControlTemplate>
+        </Setter>
+    </Style>
+</Styles>

Meio.App/Controls/Card.axaml.cs

@@ -0,0 +1,44 @@
+using System.Windows.Input;
+using Avalonia;
+using Avalonia.Controls.Primitives;
+using Avalonia.Input;
+using Avalonia.Media;
+
+namespace Meio.app.Controls;
+
+public class Card : TemplatedControl
+{
+    public static readonly StyledProperty<string> TitleProperty =
+        AvaloniaProperty.Register<Card, string>(nameof(Title));
+
+    public static readonly StyledProperty<IBrush?> CoverBrushProperty =
+        AvaloniaProperty.Register<Card, IBrush?>(nameof(CoverBrush));
+
+    public static readonly StyledProperty<ICommand?> CommandProperty =
+        AvaloniaProperty.Register<Card, ICommand?>(nameof(Command));
+
+    public string Title
+    {
+        get => GetValue(TitleProperty);
+        set => SetValue(TitleProperty, value);
+    }
+
+    public IBrush? CoverBrush
+    {
+        get => GetValue(CoverBrushProperty);
+        set => SetValue(CoverBrushProperty, value);
+    }
+
+    public ICommand? Command
+    {
+        get => GetValue(CommandProperty);
+        set => SetValue(CommandProperty, value);
+    }
+
+    protected override void OnPointerPressed(PointerPressedEventArgs e)
+    {
+        base.OnPointerPressed(e);
+        if (Command?.CanExecute(null) == true)
+            Command.Execute(null);
+    }
+}

Meio.App/Controls/HomeBar.axaml

@@ -0,0 +1,17 @@
+<Styles xmlns="https://github.com/avaloniaui"
+        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+        xmlns:controls="using:Meio.app.Controls">
+    <Design.PreviewWith>
+        <controls:HomeBar />
+    </Design.PreviewWith>
+
+    <Style Selector="controls|HomeBar">
+        <!-- Set Defaults -->
+        <Setter Property="Template">
+            <ControlTemplate>
+                <TextBlock Text="Templated Control" />
+                <!-- TODO -->
+            </ControlTemplate>
+        </Setter>
+    </Style>
+</Styles>

Meio.App/Controls/HomeBar.axaml.cs

@@ -0,0 +1,7 @@
+using Avalonia.Controls.Primitives;
+
+namespace Meio.app.Controls;
+
+public class HomeBar : TemplatedControl
+{
+}

Meio.App/Controls/PlayingWidget.axaml

@@ -0,0 +1,62 @@
+<Styles xmlns="https://github.com/avaloniaui"
+        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+        xmlns:controls="using:Meio.app.Controls">
+    <Design.PreviewWith>
+        <controls:PlayingWidget />
+    </Design.PreviewWith>
+
+    <Style Selector="controls|PlayingWidget">
+        <!-- Set Defaults -->
+        <Setter Property="Template">
+            <ControlTemplate>
+                <StackPanel>
+                    <Border Name="FloatingWidget"
+                            Width="470"
+                            Height="135"
+                            Background="{DynamicResource MenuColor}"
+                            CornerRadius="16"
+                            Margin="27"
+                            BoxShadow="0 0 4 4 #4F000000">
+                        <StackPanel Orientation="Horizontal" Spacing="27" Margin="10">
+                            <Border Width="115"
+                                    Height="115"
+                                    CornerRadius="16"
+                                    Background="{DynamicResource SecondaryAccentBrush}" />
+                            <StackPanel>
+                                <StackPanel Orientation="Horizontal" Spacing="225">
+                                    <StackPanel>
+                                        <TextBlock FontWeight="Bold" FontSize="24">Title</TextBlock>
+                                        <TextBlock FontWeight="Light" FontSize="12">Artist</TextBlock>
+                                    </StackPanel>
+
+                                    <Svg Classes="Icon" Path="avares://Meio.app/Assets/svg/PlayerWidget/playerWidget_spectre.svg" />
+                                </StackPanel>
+                                <StackPanel>
+                                    <StackPanel Orientation="Horizontal" Spacing="15">
+                                        <StackPanel Spacing="6" Orientation="Horizontal">
+                                            <Svg Classes="Icon" Path="avares://Meio.app/Assets/svg/PlayerWidget/playerWidget_backward.svg" />
+                                            <Svg Classes="Icon" Path="avares://Meio.app/Assets/svg/PlayerWidget/playerWidget_play.svg" />
+                                            <Svg Classes="Icon" Path="avares://Meio.app/Assets/svg/PlayerWidget/playerWidget_forward.svg" /> <!-- TODO change stroke color according to theme -->
+                                        </StackPanel>
+                                        <StackPanel Spacing="7" Orientation="Horizontal">
+                                            <StackPanel Orientation="Horizontal" Spacing="8">
+                                                <Svg Classes="Icon" Path="avares://Meio.app/Assets/svg/shuffle.svg" />
+                                                <Svg Classes="Icon" Path="avares://Meio.app/Assets/svg/PlayerWidget/playerWidget_volume.svg" />
+                                            </StackPanel>
+                                            <ProgressBar Width="66" Height="6" Value="15" />
+                                        </StackPanel>
+                                    </StackPanel>
+                                    <StackPanel Orientation="Horizontal" Spacing="7">
+                                        <TextBlock>03:48</TextBlock>
+                                        <ProgressBar Value="50" Width="256" Height="6" />
+                                    </StackPanel>
+                                </StackPanel>
+                                <!-- Pour le son, quand on hover la souris, ShowProgressText = True-->
+                            </StackPanel>
+                        </StackPanel>
+                    </Border>
+                </StackPanel>
+            </ControlTemplate>
+        </Setter>
+    </Style>
+</Styles>

Meio.App/Controls/PlayingWidget.axaml.cs

@@ -0,0 +1,7 @@
+using Avalonia.Controls.Primitives;
+
+namespace Meio.app.Controls;
+
+public class PlayingWidget : TemplatedControl
+{
+}

Meio.App/Controls/PlaylistCard.axaml

@@ -0,0 +1,22 @@
+<Styles xmlns="https://github.com/avaloniaui"
+        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+        xmlns:controls="using:Meio.app.Controls">
+    <Design.PreviewWith>
+        <controls:PlaylistCard />
+    </Design.PreviewWith>
+
+    <Style Selector="controls|PlaylistCard">
+        <!-- Set Defaults -->
+        <Setter Property="Template">
+            <ControlTemplate>
+                <Border Cursor="Hand">
+                    <Border Width="80"
+                            Height="80"
+                            Background="{TemplateBinding CoverBrush}"
+                            CornerRadius="16"
+                            BoxShadow="1 4 4 0 #4F000000" />
+                </Border>
+            </ControlTemplate>
+        </Setter>
+    </Style>
+</Styles>