Notifications - Fixed positioning in main window,

Notifications - Added vertical stacking

src/Avalonia/Artemis.UI.Shared/Controls/DeviceVisualizer.cs

@@ -69,7 +69,14 @@ namespace Artemis.UI.Shared.Controls
 
                 // Render device and LED images 
                 if (_deviceImage != null)
-                    drawingContext.DrawImage(_deviceImage, new Rect(0, 0, Device.RgbDevice.ActualSize.Width, Device.RgbDevice.ActualSize.Height));
+                {
+                    drawingContext.DrawImage(
+                        _deviceImage,
+                        new Rect(_deviceImage.Size),
+                        new Rect(0, 0, Device.RgbDevice.ActualSize.Width, Device.RgbDevice.ActualSize.Height),
+                        RenderOptions.GetBitmapInterpolationMode(this)
+                    );
+                }
 
                 if (!ShowColors)
                     return;

src/Avalonia/Artemis.UI.Shared/Services/Builders/NotificationBuilder.cs

@@ -26,12 +26,7 @@ public class NotificationBuilder
     public NotificationBuilder(Window parent)
     {
         _parent = parent;
-        _infoBar = new InfoBar
+        _infoBar = new InfoBar {Classes = Classes.Parse("notification-info-bar")};
-        {
-            Classes = Classes.Parse("notification-info-bar"),
-            VerticalAlignment = VerticalAlignment.Bottom,
-            HorizontalAlignment = HorizontalAlignment.Right
-        };
     }
 
     /// <summary>
@@ -121,8 +116,9 @@ public class NotificationBuilder
     /// <exception cref="ArtemisSharedUIException" />
     public Action Show()
     {
-        if (_parent.Content is not Panel panel)
+        IPanel? panel = _parent.Find<IPanel>("NotificationContainer");
-            throw new ArtemisSharedUIException("Can't display a notification on a window without a panel at its root.");
+        if (panel == null)
+            throw new ArtemisSharedUIException("Can't display a notification on a window without a NotificationContainer.");
 
         Dispatcher.UIThread.Post(() =>
         {

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

@@ -35,9 +35,10 @@
     <StyleInclude Source="/Styles/Sidebar.axaml" />
     <StyleInclude Source="/Styles/InfoBar.axaml" />
     <StyleInclude Source="/Styles/TextBox.axaml" />
+    <StyleInclude Source="/Styles/Notifications.axaml" />
     <StyleInclude Source="/Styles/NumberBox.axaml" />
     <StyleInclude Source="/Styles/TreeView.axaml" />
-
+    
     <Style Selector="Window:windows:windows10 /template/ Border#RootBorder">
         <!-- This will show if custom accent color setting is used in Settings page-->
         <Setter Property="BorderBrush" Value="{DynamicResource SystemAccentColor}" />

src/Avalonia/Artemis.UI.Shared/Styles/Controls/GradientPickerButton.axaml

@@ -3,8 +3,13 @@
         xmlns:gradientPicker="clr-namespace:Artemis.UI.Shared.Controls.GradientPicker"
         xmlns:controls="clr-namespace:FluentAvalonia.UI.Controls;assembly=FluentAvalonia">
     <Design.PreviewWith>
-        <Border Padding="20">
+        <Border Padding="20" Width="200">
-            <gradientPicker:GradientPickerButton IsCompact="True" />
+            <StackPanel Spacing="5">
+                <gradientPicker:GradientPickerButton IsCompact="True" />
+                <ComboBox HorizontalAlignment="Stretch"></ComboBox>
+                <controls:DropDownButton HorizontalAlignment="Stretch"></controls:DropDownButton>
+            </StackPanel>
+
         </Border>
     </Design.PreviewWith>
 
@@ -25,31 +30,33 @@
         <Setter Property="CornerRadius" Value="{DynamicResource ControlCornerRadius}" />
         <Setter Property="Template">
             <ControlTemplate>
-                <Grid ColumnDefinitions="*,Auto">
+
-                    <controls:Button Grid.Column="0"
+                <controls:Button Grid.Column="0"
-                                     Name="MainButton"
+                                 Name="MainButton"
-                                     Padding="0 0 25 0"
+                                 Padding="0 0 12 0"
-                                     CornerRadius="{TemplateBinding CornerRadius}"
+                                 CornerRadius="{TemplateBinding CornerRadius}"
-                                     HorizontalAlignment="Stretch"
+                                 HorizontalAlignment="Stretch"
-                                     VerticalAlignment="Stretch"
+                                 VerticalAlignment="Stretch"
-                                     HorizontalContentAlignment="Stretch"
+                                 HorizontalContentAlignment="Stretch"
-                                     VerticalContentAlignment="Stretch">
+                                 VerticalContentAlignment="Stretch">
+                    <Grid ColumnDefinitions="*,Auto">
                         <Border Classes="gradient-display"
                                 HorizontalAlignment="Stretch"
                                 VerticalAlignment="Stretch"
                                 Background="{TemplateBinding LinearGradientBrush}" />
-                    </controls:Button>
+                        <TextBlock Name="ChevronTextBlock"
+                                   Grid.Column="1"
+                                   FontFamily="{DynamicResource SymbolThemeFontFamily}"
+                                   FontSize="13"
+                                   Text="&#xE70D;"
+                                   VerticalAlignment="Center"
+                                   Padding="2,2,2,0"
+                                   Margin="4,0,0,0" />
+
+                    </Grid>
+                </controls:Button>
+
 
-                    <Viewbox Grid.Column="1"
-                             Width="18"
-                             Height="18"
-                             IsHitTestVisible="False"
-                             VerticalAlignment="Center"
-                             Margin="-25 0 8 0"
-                             Name="Chevron">
-                        <controls:SymbolIcon Symbol="ChevronDown" />
-                    </Viewbox>
-                </Grid>
             </ControlTemplate>
         </Setter>
     </Style>
@@ -60,4 +67,11 @@
         <Setter Property="BorderThickness" Value="1" />
         <Setter Property="CornerRadius" Value="{TemplateBinding CornerRadius}" />
     </Style>
+
+    <Style Selector="gradientPicker|GradientPickerButton /template/ TextBlock#ChevronTextBlock">
+        <Setter Property="Foreground" Value="{DynamicResource ButtonForegroundPressed}" />
+    </Style>
+    <Style Selector="gradientPicker|GradientPickerButton[IsEnabled=False] /template/ TextBlock#ChevronTextBlock">
+        <Setter Property="Foreground" Value="{DynamicResource ButtonForegroundDisabled}" />
+    </Style>
 </Styles>

src/Avalonia/Artemis.UI.Shared/Styles/Notifications.axaml

@@ -0,0 +1,27 @@
+<Styles xmlns="https://github.com/avaloniaui"
+        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+        xmlns:controls="clr-namespace:FluentAvalonia.UI.Controls;assembly=FluentAvalonia">
+    <Design.PreviewWith>
+        <Border Padding="20">
+            <!-- Add Controls for Previewer Here -->
+        </Border>
+    </Design.PreviewWith>
+
+    <Style Selector="StackPanel.notification-container">
+        <Setter Property="Spacing" Value="-25" />
+    </Style>
+
+    <Style Selector="StackPanel.notification-container controls|InfoBar">
+        <Setter Property="MaxHeight" Value="0" />
+        <Style.Animations>
+            <Animation Duration="0:0:0.2" Easing="CubicEaseOut" FillMode="Forward">
+                <KeyFrame Cue="0%">
+                    <Setter Property="MaxHeight" Value="0" />
+                </KeyFrame>
+                <KeyFrame Cue="100%">
+                    <Setter Property="MaxHeight" Value="50" />
+                </KeyFrame>
+            </Animation>
+        </Style.Animations>
+    </Style>
+</Styles>

src/Avalonia/Artemis.UI/MainWindow.axaml

@@ -7,11 +7,14 @@
                      x:Class="Artemis.UI.MainWindow"
                      Icon="/Assets/Images/Logo/application.ico"
                      Title="Artemis 2.0">
-    <DockPanel>
+    <Panel>
-        <ContentControl Content="{Binding SidebarViewModel}" DockPanel.Dock="Left"></ContentControl>
+        <DockPanel>
-        <Border Background="Transparent" Name="TitleBar" DockPanel.Dock="Top">
+            <ContentControl Content="{Binding SidebarViewModel}" DockPanel.Dock="Left"></ContentControl>
-            <ContentControl Content="{Binding TitleBarViewModel}" />
+            <Border Background="Transparent" Name="TitleBar" DockPanel.Dock="Top">
-        </Border>
+                <ContentControl Content="{Binding TitleBarViewModel}" />
-        <ContentControl Content="{Binding}" />
+            </Border>
-    </DockPanel>
+            <ContentControl Content="{Binding}" />
+        </DockPanel>
+        <StackPanel Classes="notification-container" Name="NotificationContainer" VerticalAlignment="Bottom" HorizontalAlignment="Right"/>
+    </Panel>
 </controls:CoreWindow>

src/Avalonia/Artemis.UI/Screens/Debugger/DebugView.axaml

@@ -20,51 +20,56 @@
             <Setter Property="Margin" Value="15 0 0 0" />
         </Style>
     </Window.Styles>
-    <controls:NavigationView x:Name="Navigation"
-                             SelectedItem="{Binding SelectedItem}"
-                             IsPaneToggleButtonVisible="False"
-                             PaneDisplayMode="Left"
-                             Margin="0 10 0 0">
-        <controls:NavigationView.MenuItems>
-            <controls:NavigationViewItem Tag="Rendering">
-                <controls:NavigationViewItem.Content>
-                    <StackPanel Orientation="Horizontal" Classes="sidebar-stackpanel">
-                        <avalonia:MaterialIcon Kind="Paint" />
-                        <TextBlock>Rendering</TextBlock>
-                    </StackPanel>
-                </controls:NavigationViewItem.Content>
-            </controls:NavigationViewItem>
-            <controls:NavigationViewItem Tag="DataModel">
-                <controls:NavigationViewItem.Content>
-                    <StackPanel Orientation="Horizontal" Classes="sidebar-stackpanel">
-                        <avalonia:MaterialIcon Kind="FormatListBulletedType" />
-                        <TextBlock>Data Model</TextBlock>
-                    </StackPanel>
-                </controls:NavigationViewItem.Content>
-            </controls:NavigationViewItem>
-            <controls:NavigationViewItem Tag="Performance">
-                <controls:NavigationViewItem.Content>
-                    <StackPanel Orientation="Horizontal" Classes="sidebar-stackpanel">
-                        <avalonia:MaterialIcon Kind="Gauge" />
-                        <TextBlock>Performance</TextBlock>
-                    </StackPanel>
-                </controls:NavigationViewItem.Content>
-            </controls:NavigationViewItem>
-            <controls:NavigationViewItem Tag="Logging">
-                <controls:NavigationViewItem.Content>
-                    <StackPanel Orientation="Horizontal" Classes="sidebar-stackpanel">
-                        <avalonia:MaterialIcon Kind="Text" />
-                        <TextBlock>Logging</TextBlock>
-                    </StackPanel>
-                </controls:NavigationViewItem.Content>
-            </controls:NavigationViewItem>
-        </controls:NavigationView.MenuItems>
 
-        <reactiveUi:RoutedViewHost Router="{Binding Router}" Padding="12">
+	<Panel>
-            <reactiveUi:RoutedViewHost.PageTransition>
+		<controls:NavigationView x:Name="Navigation"
-                <CrossFade Duration="0.1" />
+								 SelectedItem="{Binding SelectedItem}"
-            </reactiveUi:RoutedViewHost.PageTransition>
+								 IsPaneToggleButtonVisible="False"
-        </reactiveUi:RoutedViewHost>
+								 PaneDisplayMode="Left"
+								 Margin="0 10 0 0">
+			<controls:NavigationView.MenuItems>
+				<controls:NavigationViewItem Tag="Rendering">
+					<controls:NavigationViewItem.Content>
+						<StackPanel Orientation="Horizontal" Classes="sidebar-stackpanel">
+							<avalonia:MaterialIcon Kind="Paint" />
+							<TextBlock>Rendering</TextBlock>
+						</StackPanel>
+					</controls:NavigationViewItem.Content>
+				</controls:NavigationViewItem>
+				<controls:NavigationViewItem Tag="DataModel">
+					<controls:NavigationViewItem.Content>
+						<StackPanel Orientation="Horizontal" Classes="sidebar-stackpanel">
+							<avalonia:MaterialIcon Kind="FormatListBulletedType" />
+							<TextBlock>Data Model</TextBlock>
+						</StackPanel>
+					</controls:NavigationViewItem.Content>
+				</controls:NavigationViewItem>
+				<controls:NavigationViewItem Tag="Performance">
+					<controls:NavigationViewItem.Content>
+						<StackPanel Orientation="Horizontal" Classes="sidebar-stackpanel">
+							<avalonia:MaterialIcon Kind="Gauge" />
+							<TextBlock>Performance</TextBlock>
+						</StackPanel>
+					</controls:NavigationViewItem.Content>
+				</controls:NavigationViewItem>
+				<controls:NavigationViewItem Tag="Logging">
+					<controls:NavigationViewItem.Content>
+						<StackPanel Orientation="Horizontal" Classes="sidebar-stackpanel">
+							<avalonia:MaterialIcon Kind="Text" />
+							<TextBlock>Logging</TextBlock>
+						</StackPanel>
+					</controls:NavigationViewItem.Content>
+				</controls:NavigationViewItem>
+			</controls:NavigationView.MenuItems>
 
-    </controls:NavigationView>
+			<reactiveUi:RoutedViewHost Router="{Binding Router}" Padding="12">
+				<reactiveUi:RoutedViewHost.PageTransition>
+					<CrossFade Duration="0.1" />
+				</reactiveUi:RoutedViewHost.PageTransition>
+			</reactiveUi:RoutedViewHost>
+
+		</controls:NavigationView>
+		<StackPanel Classes="notification-container" Name="NotificationContainer" VerticalAlignment="Bottom" HorizontalAlignment="Right"/>
+	</Panel>
+    
 </controls:CoreWindow>

src/Avalonia/Artemis.UI/Screens/Debugger/Tabs/Render/RenderDebugView.axaml

@@ -24,7 +24,7 @@
             <TextBlock Text="{Binding Renderer}"></TextBlock>
         </StackPanel>
 
-        <Border Classes="card">
+        <Border Classes="card" Padding="10">
         <ZoomBorder Name="ZoomBorder"
                     Stretch="None"
                     ClipToBounds="True"

src/Avalonia/Artemis.UI/Screens/Device/DevicePropertiesView.axaml

@@ -61,6 +61,8 @@
                 </TabControl.ContentTemplate>
             </TabControl>
         </Border>
+
+        <StackPanel Grid.Column="0" Grid.ColumnSpan="3" Classes="notification-container" Name="NotificationContainer" VerticalAlignment="Bottom" HorizontalAlignment="Right"/>
     </Grid>
 
 </controls1:CoreWindow>

src/Avalonia/Artemis.UI/Screens/Plugins/PluginSettingsWindowView.axaml

@@ -12,5 +12,6 @@
         WindowStartupLocation="CenterOwner">
 	<Panel>
         <ContentControl Content="{Binding ConfigurationViewModel}"></ContentControl>
+        <StackPanel Classes="notification-container" Name="NotificationContainer" VerticalAlignment="Bottom" HorizontalAlignment="Right"/>
 	</Panel>
 </controls:CoreWindow>

src/Avalonia/Artemis.UI/Screens/ProfileEditor/Panels/Properties/PropertyGroupViewModel.cs

@@ -12,11 +12,10 @@ using Artemis.UI.Screens.ProfileEditor.Properties.Timeline.Keyframes;
 using Artemis.UI.Screens.ProfileEditor.Properties.Tree;
 using Artemis.UI.Shared;
 using Artemis.UI.Shared.Services.PropertyInput;
-using ReactiveUI;
 
 namespace Artemis.UI.Screens.ProfileEditor.Properties;
 
-public class PropertyGroupViewModel : ViewModelBase
+public class PropertyGroupViewModel : ViewModelBase, IDisposable
 {
     private readonly ILayerPropertyVmFactory _layerPropertyVmFactory;
     private readonly IPropertyInputService _propertyInputService;
@@ -33,7 +32,7 @@ public class PropertyGroupViewModel : ViewModelBase
         TreeGroupViewModel = layerPropertyVmFactory.TreeGroupViewModel(this);
         TimelineGroupViewModel = layerPropertyVmFactory.TimelineGroupViewModel(this);
 
-        // TODO: Centralize visibility updating or do it here and dispose
+        LayerPropertyGroup.VisibilityChanged += LayerPropertyGroupOnVisibilityChanged;
         _isVisible = !LayerPropertyGroup.IsHidden;
 
         PopulateChildren();
@@ -86,10 +85,12 @@ public class PropertyGroupViewModel : ViewModelBase
             return result;
 
         foreach (ViewModelBase child in Children)
+        {
             if (child is PropertyViewModel profileElementPropertyViewModel)
                 result.AddRange(profileElementPropertyViewModel.TimelinePropertyViewModel.GetAllKeyframeViewModels());
             else if (child is PropertyGroupViewModel profileElementPropertyGroupViewModel)
                 result.AddRange(profileElementPropertyGroupViewModel.GetAllKeyframeViewModels(expandedOnly));
+        }
 
         return result;
     }
@@ -120,4 +121,20 @@ public class PropertyGroupViewModel : ViewModelBase
 
         HasChildren = Children.Any(i => i is PropertyViewModel {IsVisible: true} || i is PropertyGroupViewModel {IsVisible: true});
     }
+
+    private void LayerPropertyGroupOnVisibilityChanged(object? sender, EventArgs e)
+    {
+        IsVisible = !LayerPropertyGroup.IsHidden;
+    }
+
+    /// <inheritdoc />
+    public void Dispose()
+    {
+        LayerPropertyGroup.VisibilityChanged -= LayerPropertyGroupOnVisibilityChanged;
+        foreach (ViewModelBase viewModelBase in Children)
+        {
+            if (viewModelBase is IDisposable disposable)
+                disposable.Dispose();
+        }
+    }
 }

src/Avalonia/Artemis.UI/Screens/ProfileEditor/Panels/Properties/PropertyViewModel.cs

@@ -1,13 +1,13 @@
-using Artemis.Core;
+using System;
+using Artemis.Core;
 using Artemis.UI.Ninject.Factories;
 using Artemis.UI.Screens.ProfileEditor.Properties.Timeline;
 using Artemis.UI.Screens.ProfileEditor.Properties.Tree;
 using Artemis.UI.Shared;
-using ReactiveUI;
 
 namespace Artemis.UI.Screens.ProfileEditor.Properties;
 
-public class PropertyViewModel : ViewModelBase
+public class PropertyViewModel : ViewModelBase, IDisposable
 {
     private bool _isExpanded;
     private bool _isHighlighted;
@@ -19,7 +19,7 @@ public class PropertyViewModel : ViewModelBase
         TreePropertyViewModel = propertyVmFactory.TreePropertyViewModel(LayerProperty, this);
         TimelinePropertyViewModel = propertyVmFactory.TimelinePropertyViewModel(LayerProperty, this);
 
-        // TODO: Centralize visibility updating or do it here and dispose
+        LayerProperty.VisibilityChanged += LayerPropertyOnVisibilityChanged;
         _isVisible = !LayerProperty.IsHidden;
     }
 
@@ -44,4 +44,15 @@ public class PropertyViewModel : ViewModelBase
         get => _isExpanded;
         set => RaiseAndSetIfChanged(ref _isExpanded, value);
     }
+
+    private void LayerPropertyOnVisibilityChanged(object? sender, LayerPropertyEventArgs e)
+    {
+        IsVisible = !LayerProperty.IsHidden;
+    }
+
+    /// <inheritdoc />
+    public void Dispose()
+    {
+        LayerProperty.VisibilityChanged -= LayerPropertyOnVisibilityChanged;
+    }
 }

src/Avalonia/Artemis.UI/Screens/Workshop/WorkshopViewModel.cs

@@ -1,4 +1,5 @@
-using System.Reactive;
+using System;
+using System.Reactive;
 using System.Reactive.Linq;
 using Artemis.Core;
 using Artemis.UI.Shared.Services.Builders;