Editor - Tweaked profile tree visuals

Editor - Add current profile name display, added smooth zooming

src/Artemis.UI.Avalonia.Shared/Artemis.UI.Avalonia.Shared.xml

@@ -201,7 +201,12 @@
         </member>
         <member name="F:Artemis.UI.Shared.Controls.SelectionRectangle.BorderThicknessProperty">
             <summary>
-                Defines the <see cref="P:Artemis.UI.Shared.Controls.SelectionRectangle.BorderBrush" /> property.
+                Defines the <see cref="P:Artemis.UI.Shared.Controls.SelectionRectangle.BorderThickness" /> property.
+            </summary>
+        </member>
+        <member name="F:Artemis.UI.Shared.Controls.SelectionRectangle.BorderRadiusProperty">
+            <summary>
+                Defines the <see cref="P:Artemis.UI.Shared.Controls.SelectionRectangle.BorderRadius" /> property.
             </summary>
         </member>
         <member name="F:Artemis.UI.Shared.Controls.SelectionRectangle.InputElementProperty">
@@ -227,6 +232,11 @@
                 Gets or sets the width of the control's border
             </summary>
         </member>
+        <member name="P:Artemis.UI.Shared.Controls.SelectionRectangle.BorderRadius">
+            <summary>
+                Gets or sets the radius of the control's border
+            </summary>
+        </member>
         <member name="P:Artemis.UI.Shared.Controls.SelectionRectangle.InputElement">
             <summary>
                 Gets or sets the element that captures input for the selection rectangle.

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

@@ -26,11 +26,17 @@ namespace Artemis.UI.Shared.Controls
             AvaloniaProperty.Register<SelectionRectangle, IBrush>(nameof(BorderBrush), new SolidColorBrush(Colors.CadetBlue));
 
         /// <summary>
-        ///     Defines the <see cref="BorderBrush" /> property.
+        ///     Defines the <see cref="BorderThickness" /> property.
         /// </summary>
         public static readonly StyledProperty<double> BorderThicknessProperty =
             AvaloniaProperty.Register<SelectionRectangle, double>(nameof(BorderThickness), 1);
 
+        /// <summary>
+        ///     Defines the <see cref="BorderRadius" /> property.
+        /// </summary>
+        public static readonly StyledProperty<double> BorderRadiusProperty =
+            AvaloniaProperty.Register<SelectionRectangle, double>(nameof(BorderRadius), 0);
+
         /// <summary>
         ///     Defines the <see cref="InputElement" /> property.
         /// </summary>
@@ -75,6 +81,15 @@ namespace Artemis.UI.Shared.Controls
             set => SetValue(BorderThicknessProperty, value);
         }
 
+        /// <summary>
+        ///     Gets or sets the radius of the control's border
+        /// </summary>
+        public double BorderRadius
+        {
+            get => GetValue(BorderRadiusProperty);
+            set => SetValue(BorderRadiusProperty, value);
+        }
+
         /// <summary>
         ///     Gets or sets the element that captures input for the selection rectangle.
         /// </summary>
@@ -181,7 +196,7 @@ namespace Artemis.UI.Shared.Controls
         public override void Render(DrawingContext drawingContext)
         {
             if (_displayRect != null)
-                drawingContext.DrawRectangle(Background, new Pen(BorderBrush, BorderThickness), _displayRect.Value, 4, 4);
+                drawingContext.DrawRectangle(Background, new Pen(BorderBrush, BorderThickness), _displayRect.Value, BorderRadius, BorderRadius);
         }
 
         /// <inheritdoc />

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

@@ -64,7 +64,7 @@
 								  ColumnDefinitions="Auto, *"
 								  Margin="{TemplateBinding Level, Mode=OneWay, Converter={StaticResource TreeViewItemLeftMarginConverter}}">
 								<Panel Name="PART_ExpandCollapseChevronContainer"
-                                       Margin="{StaticResource TreeViewItemExpandCollapseChevronMargin}">
+                                       Margin="8 0 4 0">
 									<ToggleButton Name="PART_ExpandCollapseChevron"
                                                   Classes="ExpandCollapseChevron"
                                                   Focusable="False"
@@ -90,6 +90,10 @@
 		</Setter>
 	</Style>
 
+	<Style Selector="Border#TreeViewItemLayoutRoot Panel.PART_ExpandCollapseChevronContainer">
+        <Setter Property="Margin" Value="0"></Setter>
+    </Style>
+
 	<!-- <Style Selector="TreeView.no-right-margin TreeViewItem /template/ Border#TreeViewItemLayoutRoot"> -->
 	<!-- 	<Setter Property="Margin" Value="2 2 0 2"/> -->
 	<!-- </Style> -->

src/Avalonia/Artemis.UI/Screens/ProfileEditor/Panels/ProfileTree/FolderTreeItemView.axaml

@@ -13,16 +13,17 @@
                 Foreground="White"
                 Background="#E74C4C"
                 BorderBrush="#E74C4C"
+                Margin="0 0 5 0"
                 Command="{Binding ShowBrokenStateExceptions}">
             <avalonia:MaterialIcon Kind="AlertCircle" />
         </Button>
         <avalonia:MaterialIcon Grid.Column="1"
                                Kind="Folder"
-                               Margin="5 0"
+                               Margin="0 0 5 0"
                                IsVisible="{Binding !IsExpanded, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type TreeViewItem}}}" />
         <avalonia:MaterialIcon Grid.Column="1"
                                Kind="FolderOpen"
-                               Margin="5 0"
+                               Margin="0 0 5 0"
                                IsVisible="{Binding IsExpanded, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type TreeViewItem}}}" />
         <TextBlock Grid.Column="2" Text="{Binding Folder.Name}" VerticalAlignment="Center" />
         <ToggleButton Grid.Column="3"

src/Avalonia/Artemis.UI/Screens/ProfileEditor/Panels/ProfileTree/LayerTreeItemView.axaml

@@ -11,10 +11,11 @@
                 IsVisible="{Binding ProfileElement.BrokenState, Converter={x:Static ObjectConverters.IsNotNull}}"
                 Classes="icon-button icon-button-small"
                 Foreground="#E74C4C"
+                Margin="0 0 5 0"
                 Command="{Binding ShowBrokenStateExceptions}">
             <avalonia:MaterialIcon Kind="AlertCircle" />
         </Button>
-        <avalonia:MaterialIcon Grid.Column="1" Kind="{Binding Layer.LayerBrush.Descriptor.Icon}" Margin="5 0" />
+        <avalonia:MaterialIcon Grid.Column="1" Kind="{Binding Layer.LayerBrush.Descriptor.Icon}" Margin="0 0 5 0" />
         <TextBlock Grid.Column="2" Text="{Binding Layer.Name}" VerticalAlignment="Center" />
         <ToggleButton Grid.Column="3"
                       Classes="icon-button icon-button-small"

src/Avalonia/Artemis.UI/Screens/ProfileEditor/Panels/VisualEditor/VisualEditorView.axaml

@@ -7,9 +7,9 @@
              xmlns:controls="clr-namespace:Artemis.UI.Shared.Controls;assembly=Artemis.UI.Shared"
              mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
              x:Class="Artemis.UI.Screens.ProfileEditor.VisualEditor.VisualEditorView">
+    <Grid>
         <paz:ZoomBorder Name="ZoomBorder"
                         Stretch="None"
-                    ZoomSpeed="1.2"
                         ClipToBounds="True"
                         Focusable="True"
                         VerticalAlignment="Stretch"
@@ -18,6 +18,11 @@
                         ZoomChanged="ZoomBorder_OnZoomChanged">
             <Grid Name="ContainerGrid"
                   Background="Transparent">
+                <Grid.Transitions>
+                    <Transitions>
+                        <TransformOperationsTransition Property="RenderTransform" Duration="0:0:0.2" Easing="CubicEaseOut"/>
+                    </Transitions>
+                </Grid.Transitions>
                 <ItemsControl Items="{Binding Devices}" ClipToBounds="False">
                     <ItemsControl.Styles>
                         <Style Selector="ContentPresenter">
@@ -38,4 +43,14 @@
                 </ItemsControl>
             </Grid>
         </paz:ZoomBorder>
+        <Border CornerRadius="0 0 8 0" VerticalAlignment="Top" HorizontalAlignment="Left">
+            <Border.Background>
+                <SolidColorBrush Color="{DynamicResource CardStrokeColorDefaultSolid}" Opacity="0.65"></SolidColorBrush>
+            </Border.Background>
+            <StackPanel Orientation="Horizontal" Margin="8">
+                <controls:ProfileConfigurationIcon ConfigurationIcon="{Binding ProfileConfiguration.Icon}" Margin="0 0 5 0"></controls:ProfileConfigurationIcon>
+                <TextBlock  Text="{Binding ProfileConfiguration.Name}"/>
+            </StackPanel>
+        </Border>
+    </Grid>
 </UserControl>

src/Avalonia/Artemis.UI/Screens/ProfileEditor/Panels/VisualEditor/VisualEditorViewModel.cs

@@ -1,17 +1,28 @@
-using System.Collections.ObjectModel;
+using System;
+using System.Collections.ObjectModel;
+using System.Reactive.Disposables;
 using Artemis.Core;
 using Artemis.Core.Services;
-using Artemis.UI.Services;
 using Artemis.UI.Services.ProfileEditor;
 using Artemis.UI.Shared;
+using ReactiveUI;
 
 namespace Artemis.UI.Screens.ProfileEditor.VisualEditor
 {
     public class VisualEditorViewModel : ActivatableViewModelBase
     {
+        private ProfileConfiguration? _profileConfiguration;
+
         public VisualEditorViewModel(IProfileEditorService profileEditorService, IRgbService rgbService)
         {
             Devices = new ObservableCollection<ArtemisDevice>(rgbService.EnabledDevices);
+            this.WhenActivated(d => profileEditorService.ProfileConfiguration.Subscribe(configuration => ProfileConfiguration = configuration).DisposeWith(d));
+        }
+
+        public ProfileConfiguration? ProfileConfiguration
+        {
+            get => _profileConfiguration;
+            set => this.RaiseAndSetIfChanged(ref _profileConfiguration, value);
         }
 
         public ObservableCollection<ArtemisDevice> Devices { get; }

src/Avalonia/Artemis.UI/Screens/SurfaceEditor/SurfaceDeviceView.axaml

@@ -26,10 +26,10 @@
                 Classes.selection-border-selected="{Binding Highlighted}"
                 BorderThickness="1">
             <Border.BorderBrush>
-				<SolidColorBrush Color="{DynamicResource SystemAccentColor}"></SolidColorBrush>
+				<SolidColorBrush Color="{DynamicResource SystemAccentColorLight2}"></SolidColorBrush>
 			</Border.BorderBrush>
             <Border.Background>
-                <SolidColorBrush Color="{DynamicResource SystemAccentColor}" Opacity="0.2"></SolidColorBrush>
+                <SolidColorBrush Color="{DynamicResource SystemAccentColorLight2}" Opacity="0.2"></SolidColorBrush>
 			</Border.Background>
         </Border>
     </Grid>

src/Avalonia/Artemis.UI/Screens/SurfaceEditor/SurfaceEditorView.axaml

@@ -11,7 +11,6 @@
     <Border Classes="router-container">
         <paz:ZoomBorder Name="ZoomBorder"
                         Stretch="None"
-                        ZoomSpeed="1.2"
                         ClipToBounds="True"
                         Focusable="True"
                         VerticalAlignment="Stretch"
@@ -22,6 +21,11 @@
                         PointerMoved="ZoomBorder_OnPointerMoved"
                         PointerReleased="ZoomBorder_OnPointerReleased">
             <Grid Name="ContainerGrid" Background="Transparent">
+                <Grid.Transitions>
+                    <Transitions>
+                        <TransformOperationsTransition Property="RenderTransform" Duration="0:0:0.2" Easing="CubicEaseOut"/>
+                    </Transitions>
+                </Grid.Transitions>
                 <ItemsControl Items="{Binding SurfaceDeviceViewModels}" ClipToBounds="False">
                     <ItemsControl.Styles>
                         <Style Selector="ContentPresenter">
@@ -89,9 +93,10 @@
                 <controls:SelectionRectangle Name="SelectionRectangle"
                                              InputElement="{Binding #ZoomBorder}"
                                              SelectionUpdated="SelectionRectangle_OnSelectionUpdated"
-                                             BorderBrush="{DynamicResource SystemAccentColor}">
+                                             BorderBrush="{DynamicResource SystemAccentColor}"
+                                             BorderRadius="8">
                     <controls:SelectionRectangle.Background>
-                        <SolidColorBrush Color="{DynamicResource SystemAccentColor}" Opacity="0.2"></SolidColorBrush>
+                        <SolidColorBrush Color="{DynamicResource SystemAccentColorLight1}" Opacity="0.2"></SolidColorBrush>
                     </controls:SelectionRectangle.Background>
                 </controls:SelectionRectangle>
 
@@ -101,7 +106,7 @@
                         Width="{Binding MaxTextureSize}"
                         Height="{Binding MaxTextureSize}"
                         BorderThickness="2"
-                        BorderBrush="{DynamicResource SystemAccentColorDark3}"
+                        BorderBrush="{DynamicResource SystemAccentColorLight3}"
                         CornerRadius="8" />
             </Grid>
         </paz:ZoomBorder>