UI - Added home screen

src/Artemis.UI.Avalonia/App.axaml

@@ -18,6 +18,7 @@
         <StyleInclude Source="avares://Avalonia.Themes.Fluent/Controls/CaptionButtons.xaml" />
 
         <!-- Global styles -->
+        <StyleInclude Source="/Styles/Border.axaml" />
         <StyleInclude Source="/Styles/Button.axaml" />
         <StyleInclude Source="/Styles/Sidebar.axaml" />
     </Application.Styles>

src/Artemis.UI.Avalonia/Artemis.UI.Avalonia.csproj

@@ -9,6 +9,9 @@
 		<Folder Include="Models\" />
 		<AvaloniaResource Include="Assets\**" />
 	</ItemGroup>
+	<ItemGroup>
+	  <None Remove="Assets\Images\home-banner.png" />
+	</ItemGroup>
 	<ItemGroup>
 		<PackageReference Include="Avalonia" Version="0.10.7" />
 		<PackageReference Include="Avalonia.Desktop" Version="0.10.7" />

src/Artemis.UI.Avalonia/MainWindow.axaml

@@ -8,6 +8,19 @@
         Title="Artemis.UI.Avalonia"
         ExtendClientAreaToDecorationsHint="True"
         TransparencyLevelHint="AcrylicBlur"
-        Background="Transparent"
+        Background="Transparent">
-        Content="{Binding}">
+
+    <Panel>
+        <ExperimentalAcrylicBorder IsHitTestVisible="False">
+            <ExperimentalAcrylicBorder.Material>
+                <ExperimentalAcrylicMaterial
+                    BackgroundSource="Digger"
+                    TintColor="Black"
+                    TintOpacity="1"
+                    MaterialOpacity="0.85" />
+            </ExperimentalAcrylicBorder.Material>
+        </ExperimentalAcrylicBorder>
+
+        <ContentControl Content="{Binding}" />
+    </Panel>
 </Window>

src/Artemis.UI.Avalonia/Screens/Home/Views/HomeView.axaml

@@ -2,7 +2,139 @@
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
              xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-             mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
+             xmlns:svg="clr-namespace:Avalonia.Svg.Skia;assembly=Avalonia.Svg.Skia"
+             xmlns:avalonia="clr-namespace:Material.Icons.Avalonia;assembly=Material.Icons.Avalonia"
+             xmlns:controls="clr-namespace:FluentAvalonia.UI.Controls;assembly=FluentAvalonia"
+             mc:Ignorable="d" d:DesignWidth="1200" d:DesignHeight="900"
              x:Class="Artemis.UI.Avalonia.Screens.Home.Views.HomeView">
-    Home :>
+    <Grid RowDefinitions="200,*">
+        <Image Grid.Row="0"
+               Grid.RowSpan="2"
+               VerticalAlignment="Top"
+               Source="/Assets/Images/home-banner.png"
+               Height="200"
+               Stretch="UniformToFill" />
+
+        <!-- TODO: Replace with a shadow when available -->
+        <TextBlock Grid.Row="0"
+                   TextWrapping="Wrap"
+                   Foreground="Black"
+                   FontSize="32"
+                   Margin="32"
+                   Text=" Welcome to Artemis, the unified RGB platform." />
+        <TextBlock Grid.Row="0"
+                   TextWrapping="Wrap"
+                   FontSize="32"
+                   Margin="30"
+                   Text=" Welcome to Artemis, the unified RGB platform." />
+
+        <Grid Grid.Row="1" MaxWidth="840" Margin="30" VerticalAlignment="Bottom">
+            <Grid.ColumnDefinitions>
+                <ColumnDefinition />
+                <ColumnDefinition />
+            </Grid.ColumnDefinitions>
+            <Grid.RowDefinitions>
+                <RowDefinition />
+                <RowDefinition />
+            </Grid.RowDefinitions>
+            <Border Classes="card" Margin="8" Grid.ColumnSpan="2">
+				<Grid VerticalAlignment="Stretch" RowDefinitions="Auto,Auto" ColumnDefinitions="150,*">
+					<avalonia:MaterialIcon Kind="Plug" Width="100" Height="100" HorizontalAlignment="Center" VerticalAlignment="Center" />
+					<StackPanel Grid.Row="0" Grid.Column="1">
+						<TextBlock FontSize="24" Margin="16 16 16 8">Plugins</TextBlock>
+						<TextBlock TextWrapping="Wrap" Margin="16 0 16 8" VerticalAlignment="Top">
+							Artemis is built up using plugins. This means devices, brushes, effects and modules (for supporting games!) can all be added via plugins.
+						</TextBlock>
+						<TextBlock TextWrapping="Wrap" Margin="16 0 16 8" VerticalAlignment="Top">
+							Under Settings > Plugins you can find your currently installed plugins, these default plugins are created by Artemis developers.
+						</TextBlock>
+						<TextBlock TextWrapping="Wrap" Margin="16 0 16 8" VerticalAlignment="Top">
+							We're also keeping track of a list of third-party plugins on our wiki.
+						</TextBlock>
+					</StackPanel>
+					<Border Grid.Row="1" Grid.ColumnSpan="2" Grid.Column="0" BorderThickness="0 1 0 0" BorderBrush="{DynamicResource MaterialDesignDivider}" Padding="8">
+						<controls:HyperlinkButton NavigateUri="https://wiki.artemis-rgb.com/en/guides/user/plugins" HorizontalAlignment="Right">
+							<StackPanel Orientation="Horizontal">
+								<avalonia:MaterialIcon Kind="OpenInBrowser" />
+								<TextBlock Margin="8 0 0 0" VerticalAlignment="Center">Get more plugins</TextBlock>
+							</StackPanel>
+						</controls:HyperlinkButton>
+					</Border>
+				</Grid>
+			</Border>
+
+			<Border Classes="card" Margin="8" Grid.Row="1" Grid.Column="0">
+				<Grid VerticalAlignment="Stretch" RowDefinitions="175,95" ColumnDefinitions="150,*">
+					<avalonia:MaterialIcon Kind="Discord" Width="100" Height="100"
+										   HorizontalAlignment="Center" VerticalAlignment="Center" />
+					<StackPanel Grid.Row="0" Grid.Column="1">
+						<TextBlock FontSize="24" Margin="16 16 16 8">Have a chat</TextBlock>
+						<TextBlock TextWrapping="Wrap" Margin="16 0 16 8" VerticalAlignment="Top">
+							If you need help, have some feedback or have any other questions feel free to contact us through any of the following channels.
+						</TextBlock>
+					</StackPanel>
+					<Border Grid.Row="1" Grid.ColumnSpan="2" Grid.Column="0" BorderThickness="0 1 0 0"
+							BorderBrush="{DynamicResource MaterialDesignDivider}" Padding="8">
+						<DockPanel>
+							<Grid Margin="8" RowDefinitions="*,*">
+								<controls:HyperlinkButton Grid.Row="0" NavigateUri="https://github.com/Artemis-RGB/Artemis">
+									<StackPanel Orientation="Horizontal">
+										<avalonia:MaterialIcon Kind="Gift" />
+										<TextBlock Margin="8 0 0 0" VerticalAlignment="Center">GitHub</TextBlock>
+									</StackPanel>
+								</controls:HyperlinkButton>
+								<controls:HyperlinkButton Grid.Row="0" NavigateUri="https://artemis-rgb.com" HorizontalAlignment="Right">
+									<StackPanel Orientation="Horizontal">
+										<avalonia:MaterialIcon Kind="Web" />
+										<TextBlock Margin="8 0 0 0" VerticalAlignment="Center">Website</TextBlock>
+									</StackPanel>
+								</controls:HyperlinkButton>
+								<controls:HyperlinkButton Grid.Row="1" NavigateUri="https://discordapp.com/invite/S3MVaC9">
+									<StackPanel Orientation="Horizontal">
+										<avalonia:MaterialIcon Kind="Discord" />
+										<TextBlock Margin="8 0 0 0" VerticalAlignment="Center">Discord</TextBlock>
+									</StackPanel>
+								</controls:HyperlinkButton>
+								<controls:HyperlinkButton Grid.Row="1" NavigateUri="mailto:spoinky.nl@gmail.com" HorizontalAlignment="Right">
+									<StackPanel Orientation="Horizontal">
+										<avalonia:MaterialIcon Kind="Email" />
+										<TextBlock Margin="8 0 0 0" VerticalAlignment="Center">E-mail</TextBlock>
+									</StackPanel>
+								</controls:HyperlinkButton>
+							</Grid>
+						</DockPanel>
+					</Border>
+				</Grid>
+			</Border>
+			<Border Classes="card" Margin="8" Grid.Row="1" Grid.Column="1">
+				<Grid VerticalAlignment="Stretch" RowDefinitions="175,95" ColumnDefinitions="150,*">
+					<avalonia:MaterialIcon Kind="Github" Width="100" Height="100" HorizontalAlignment="Center" VerticalAlignment="Center" />
+					<StackPanel Grid.Row="0" Grid.Column="1">
+						<TextBlock FontSize="16" Margin="16 16 16 8">Open Source</TextBlock>
+						<TextBlock TextWrapping="Wrap" Margin="16 0 16 8" VerticalAlignment="Top">
+							This project is completely open source. If you like it and want to say thanks you could hit the GitHub Star button, I like numbers. You could even make plugins, there's a full documentation on the website
+						</TextBlock>
+					</StackPanel>
+					<Border Grid.Row="1" Grid.ColumnSpan="2" Grid.Column="0" BorderThickness="0 1 0 0"
+							BorderBrush="{DynamicResource MaterialDesignDivider}" Padding="8">
+						<DockPanel>
+							<controls:HyperlinkButton NavigateUri="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&amp;hosted_button_id=VQBAEJYUFLU4J"
+													  HorizontalAlignment="Right">
+								<StackPanel Orientation="Horizontal">
+									<avalonia:MaterialIcon Kind="Gift" />
+									<TextBlock Margin="8 0 0 0" VerticalAlignment="Center">Donate</TextBlock>
+								</StackPanel>
+							</controls:HyperlinkButton>
+							<TextBlock Foreground="{DynamicResource MaterialDesignBodyLight}"
+									   TextWrapping="Wrap"
+									   Margin="16"
+									   VerticalAlignment="Center">
+								Feel like you want to make a donation? It would be gratefully received. Click the button to donate via PayPal.
+							</TextBlock>
+						</DockPanel>
+					</Border>
+				</Grid>
+			</Border>
+		</Grid>
+    </Grid>
 </UserControl>

src/Artemis.UI.Avalonia/Screens/Root/ViewModels/SidebarScreenViewModel.cs

@@ -33,10 +33,5 @@ namespace Artemis.UI.Avalonia.Screens.Root.ViewModels
 
         public abstract Type ScreenType { get; }
         public abstract MainScreenViewModel CreateInstance(IKernel kernel, IScreen screen);
-
-        public bool IsActive(IObservable<IRoutableViewModel?> routerCurrentViewModel)
-        {
-            return false;
-        }
     }
 }

src/Artemis.UI.Avalonia/Screens/Root/Views/RootView.axaml

@@ -5,29 +5,22 @@
              xmlns:reactiveUi="http://reactiveui.net"
              mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
              x:Class="Artemis.UI.Avalonia.Screens.Root.Views.RootView">
-
     <Grid>
         <Grid.ColumnDefinitions>
             <ColumnDefinition Width="240" MinWidth="175" MaxWidth="400" />
             <ColumnDefinition />
         </Grid.ColumnDefinitions>
-        <ExperimentalAcrylicBorder Grid.Column="0">
-            <ExperimentalAcrylicBorder.Material>
-                <ExperimentalAcrylicMaterial
-                    BackgroundSource="Digger"
-                    TintColor="Black"
-                    TintOpacity="1"
-                    MaterialOpacity="0.65" />
-            </ExperimentalAcrylicBorder.Material>
-            <ContentControl Content="{Binding SidebarViewModel}" />
-        </ExperimentalAcrylicBorder>
 
-        <Border Grid.Column="1" Background="#101010" IsHitTestVisible="False" />
+        <ContentControl Grid.Column="0" Content="{Binding SidebarViewModel}" />
 
-        <reactiveUi:RoutedViewHost Grid.Column="1" Margin="0 20 0 0" Padding="15" Router="{Binding Router}">
+        <Border Classes="router-container" Grid.Column="1">
-            <reactiveUi:RoutedViewHost.PageTransition>
+            <ScrollViewer HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Auto" >
-                <CrossFade Duration="0.1" />
+                <reactiveUi:RoutedViewHost Router="{Binding Router}">
-            </reactiveUi:RoutedViewHost.PageTransition>
+                    <reactiveUi:RoutedViewHost.PageTransition>
-        </reactiveUi:RoutedViewHost>
+                        <CrossFade Duration="0.1" />
+                    </reactiveUi:RoutedViewHost.PageTransition>
+                </reactiveUi:RoutedViewHost>
+            </ScrollViewer>
+        </Border>
     </Grid>
 </UserControl>

src/Artemis.UI.Avalonia/Screens/Root/Views/SidebarView.axaml

@@ -24,27 +24,6 @@
                 <ColumnDefinition Width="*" />
             </Grid.ColumnDefinitions>
 
-            <Border Grid.Column="0"
-                    Grid.ColumnSpan="2">
-                <shared:DeviceVisualizer Device="{Binding HeaderDevice}"
-                                         ShowColors="True"
-                                         VerticalAlignment="Center"
-                                         HorizontalAlignment="Center">
-                    <shared:DeviceVisualizer.RenderTransform>
-                        <TransformGroup>
-                            <RotateTransform Angle="20" />
-                            <ScaleTransform ScaleX="2" ScaleY="2" />
-                        </TransformGroup>
-                    </shared:DeviceVisualizer.RenderTransform>
-                </shared:DeviceVisualizer>
-                <Border.OpacityMask>
-                    <LinearGradientBrush StartPoint="0,0" EndPoint="0,60">
-                        <GradientStop Color="White" Offset="0" />
-                        <GradientStop Color="Transparent" Offset="1" />
-                    </LinearGradientBrush>
-                </Border.OpacityMask>
-            </Border>
-
             <Image Grid.Column="0">
                 <Image.Source>
                     <svg:SvgImage Source="/Assets/Images/Logo/bow.svg" />

src/Artemis.UI.Avalonia/Styles/Border.axaml

@@ -0,0 +1,24 @@
+<Styles xmlns="https://github.com/avaloniaui"
+        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <Design.PreviewWith>
+        <Border Classes="router-container">
+            <Border Classes="card" Margin="40">
+                <TextBlock>I'm in a panel yo!</TextBlock>
+            </Border>
+        </Border>
+    </Design.PreviewWith>
+
+    <!-- Add Styles Here -->
+	<Style Selector="Border.router-container">
+		<Setter Property="Margin" Value="0 40 0 0"/>
+		<Setter Property="Background" Value="{DynamicResource SolidBackgroundFillColorTertiary}" />
+		<Setter Property="CornerRadius" Value="6 0 0 0" />
+		<Setter Property="ClipToBounds" Value="True" />
+	</Style>
+
+    <Style Selector="Border.card">
+        <Setter Property="Padding" Value="{DynamicResource FlyoutContentThemePadding}" />
+        <Setter Property="Background" Value="{DynamicResource ControlFillColorDefaultBrush}" />
+        <Setter Property="CornerRadius" Value="{DynamicResource ControlCornerRadius}" />
+    </Style>
+</Styles>

src/Artemis.UI/Screens/Home/HomeView.xaml

@@ -27,7 +27,7 @@
             </ResourceDictionary.MergedDictionaries>
         </ResourceDictionary>
     </UserControl.Resources>
-    <Grid>
+    <Grid Margin="0,0,0,-188">
         <Grid.RowDefinitions>
             <RowDefinition Height="Auto" />
             <RowDefinition Height="*" />