Color brush - Added linear gradient rotation

Profile editor - Updated conditions UI

src/Artemis.UI/Screens/Module/ProfileEditor/DisplayConditions/DisplayConditionGroupView.xaml

@@ -38,7 +38,8 @@
                 Command="{s:Action Delete}">
             <materialDesign:PackIcon Kind="Close" Width="18" Height="18" />
         </Button>
-        <Button Grid.Row="0"
+        <Button x:Name="BooleanOperatorButton"
+            Grid.Row="0"
                 Grid.Column="1"
                 Style="{StaticResource DisplayConditionButtonLeftClickMenu}"
                 Background="#E74C4C"

src/Artemis.UI/Screens/Module/ProfileEditor/DisplayConditions/DisplayConditionGroupViewModel.cs

@@ -16,6 +16,7 @@ namespace Artemis.UI.Screens.Module.ProfileEditor.DisplayConditions
         private readonly IDisplayConditionsVmFactory _displayConditionsVmFactory;
         private bool _isRootGroup;
         private bool _isInitialized;
+        private bool _isSelectedBooleanOperatorOpen;
 
         public DisplayConditionGroupViewModel(DisplayConditionGroup displayConditionGroup, DisplayConditionViewModel parent, 
             IProfileEditorService profileEditorService, IDisplayConditionsVmFactory displayConditionsVmFactory) : base(displayConditionGroup, parent)
@@ -43,6 +44,12 @@ namespace Artemis.UI.Screens.Module.ProfileEditor.DisplayConditions
             set => SetAndNotify(ref _isInitialized, value);
         }
 
+        public bool IsSelectedBooleanOperatorOpen
+        {
+            get => _isSelectedBooleanOperatorOpen;
+            set => SetAndNotify(ref _isSelectedBooleanOperatorOpen, value);
+        }
+
         public string SelectedBooleanOperator => DisplayConditionGroup.BooleanOperator.Humanize();
 
         public void SelectBooleanOperator(string type)

src/Artemis.UI/Screens/Module/ProfileEditor/DisplayConditions/DisplayConditionPredicateView.xaml

@@ -150,7 +150,7 @@
                         Command="{s:Action ActivateRightSideInputViewModel}"
                         HorizontalAlignment="Left">
                     <Grid>
-                        <StackPanel Visibility="{Binding RightStaticValue, Converter={StaticResource NullToVisibilityConverter}}" Orientation="Horizontal">
+                        <StackPanel x:Name="StaticValueDisplay" Visibility="{Binding RightStaticValue, Converter={StaticResource NullToVisibilityConverter}}" Orientation="Horizontal" >
                             <TextBlock FontWeight="Light"
                                        Text="{Binding SelectedLeftSideProperty.PropertyDescription.Prefix}"
                                        Visibility="{Binding SelectedLeftSideProperty.PropertyDescription.Prefix, Converter={StaticResource NullToVisibilityConverter}}" />
@@ -169,7 +169,6 @@
                         Background="{DynamicResource MaterialDesignPaper}"
                         CornerRadius="3"
                         Padding="3"
-                        Width="140"
                         HorizontalAlignment="Left">
                     <ContentControl s:View.Model="{Binding RightSideInputViewModel}" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" />
                 </Border>

src/Artemis.UI/Screens/Module/ProfileEditor/DisplayConditions/DisplayConditionsView.xaml

@@ -14,67 +14,166 @@
     <UserControl.Resources>
         <converters:InverseBooleanConverter x:Key="InverseBooleanConverter" />
     </UserControl.Resources>
-    <Grid>
-        <Grid.RowDefinitions>
-            <RowDefinition Height="Auto" />
-            <RowDefinition Height="Auto" />
-            <RowDefinition Height="*" />
-            <RowDefinition Height="Auto" />
-        </Grid.RowDefinitions>
-        <TextBlock Style="{StaticResource MaterialDesignSubtitle1TextBlock}" Margin="10 5 0 -4">
-            Display conditions
-        </TextBlock>
-        <Separator Grid.Row="1" Grid.Column="0" Style="{StaticResource MaterialDesignDarkSeparator}" Margin="8 0" />
 
-        <Grid Grid.Row="2" Grid.Column="0">
-            <ScrollViewer Margin="8 0" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
-                <ContentControl s:View.Model="{Binding RootGroup}" />
-            </ScrollViewer>
+    <materialDesign:Transitioner AutoApplyTransitionOrigins="True" SelectedIndex="{Binding TransitionerIndex}">
+        <!-- Conditions intro -->
+        <materialDesign:ColorZone Mode="PrimaryDark"  VerticalAlignment="Stretch" HorizontalAlignment="Stretch" VerticalContentAlignment="Stretch">
+            <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center" Margin="32">
+                <TextBlock Style="{StaticResource MaterialDesignHeadline6TextBlock}" TextWrapping="Wrap" TextAlignment="Center" Margin="0 15">Unleash Artemis's true potential</TextBlock>
+                <TextBlock TextWrapping="Wrap" TextAlignment="Center">Start using conditions to dynamically show and hide groups and layers</TextBlock>
+
+                <Button Style="{DynamicResource MaterialDesignFloatingActionAccentButton}" Command="{x:Static materialDesign:Transitioner.MoveNextCommand}" Margin="16">
+                    <materialDesign:PackIcon Kind="ArrowRight" />
+                </Button>
+            </StackPanel>
+        </materialDesign:ColorZone>
+
+        <!-- Conditions content -->
+        <Grid Margin="10">
+            <Grid.RowDefinitions>
+                <RowDefinition Height="Auto" />
+                <RowDefinition Height="Auto" />
+                <RowDefinition Height="*" />
+                <RowDefinition Height="Auto" />
+            </Grid.RowDefinitions>
+            <TextBlock Style="{StaticResource MaterialDesignSubtitle1TextBlock}" Margin="0 0 0 -4">
+            Display conditions
+            </TextBlock>
+            <Separator Grid.Row="1" Grid.Column="0" Style="{StaticResource MaterialDesignDarkSeparator}" Margin="-2 0" />
+
+            <Grid Grid.Row="2" Grid.Column="0">
+                <ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" Background="{StaticResource MaterialDesignCardBackground}">
+                    <ContentControl s:View.Model="{Binding RootGroup}" />
+                </ScrollViewer>
+            </Grid>
+
+            <Grid Grid.Row="3">
+                <Grid.RowDefinitions>
+                    <RowDefinition Height="20" />
+                    <RowDefinition />
+                </Grid.RowDefinitions>
+                <Grid.ColumnDefinitions>
+                    <ColumnDefinition Width="*" MinWidth="140" />
+                    <ColumnDefinition Width="*" MinWidth="170" />
+                </Grid.ColumnDefinitions>
+
+                <!-- Play mode -->
+                <StackPanel Grid.Column="0" Orientation="Horizontal">
+                    <materialDesign:PackIcon Kind="PlayOutline" VerticalAlignment="Center" />
+                    <TextBlock Text="Play mode" VerticalAlignment="Center">
+                        <TextBlock.ToolTip>
+                            <ToolTip Placement="Center" VerticalOffset="-30">
+                                <TextBlock>
+                                Configure how the layer should act while the conditions above are met
+                                </TextBlock>
+                            </ToolTip>
+                        </TextBlock.ToolTip>
+                </TextBlock>
+                </StackPanel>
+
+                <materialDesign:ColorZone Grid.Row="1" Grid.Column="0" Mode="Standard" CornerRadius="3" Margin="0 0 2 0">
+                    <Grid>
+                        <Grid.ColumnDefinitions>
+                            <ColumnDefinition />
+                            <ColumnDefinition />
+                        </Grid.ColumnDefinitions>
+                        <RadioButton Grid.Column="0"
+                                 Style="{StaticResource MaterialDesignTabRadioButton}"
+                                 IsChecked="{Binding RenderProfileElement.DisplayContinuously}"
+                                 MinWidth="0"
+                                 Padding="5 0">
+                            <RadioButton.ToolTip>
+                                <ToolTip Placement="Center" VerticalOffset="-40">
+                                    <TextBlock>
+                                    Continue repeating the main segment of the timeline while the condition is met
+                                    </TextBlock>
+                                </ToolTip>
+                            </RadioButton.ToolTip>
+                            <StackPanel Orientation="Horizontal">
+                                <materialDesign:PackIcon Kind="Repeat" VerticalAlignment="Center" />
+                                <TextBlock FontSize="12" VerticalAlignment="Center">REPEAT</TextBlock>
+                            </StackPanel>
+                        </RadioButton>
+                        <RadioButton Grid.Column="1"
+                                 Style="{StaticResource MaterialDesignTabRadioButton}"
+                                 IsChecked="{Binding RenderProfileElement.DisplayContinuously, Converter={StaticResource InverseBooleanConverter}}"
+                                 MinWidth="0"
+                                 Padding="5 0">
+                            <RadioButton.ToolTip>
+                                <ToolTip Placement="Center" VerticalOffset="-40">
+                                    <TextBlock>
+                                    Only play the timeline once when the condition is met
+                                    </TextBlock>
+                                </ToolTip>
+                            </RadioButton.ToolTip>
+                            <StackPanel Orientation="Horizontal">
+                                <materialDesign:PackIcon Kind="StopwatchOutline" VerticalAlignment="Center" />
+                                <TextBlock FontSize="12" VerticalAlignment="Center">ONCE</TextBlock>
+                            </StackPanel>
+                        </RadioButton>
+                    </Grid>
+                </materialDesign:ColorZone>
+
+                <!-- Stop mode -->
+                <StackPanel Grid.Column="1" Orientation="Horizontal">
+                    <materialDesign:PackIcon Kind="Stop" VerticalAlignment="Center" />
+                    <TextBlock Text="Stop mode" VerticalAlignment="Center">
+                        <TextBlock.ToolTip>
+                            <ToolTip Placement="Center" VerticalOffset="-30">
+                                <TextBlock>
+                                Configure how the layer should act when the conditions above are no longer met
+                                </TextBlock>
+                            </ToolTip>
+                        </TextBlock.ToolTip>
+                </TextBlock>
+                </StackPanel>
+                <materialDesign:ColorZone Grid.Row="1" Grid.Column="1" Mode="Standard" CornerRadius="3" Margin="2 0 0 0" HorizontalAlignment="Stretch">
+                    <Grid>
+                        <Grid.ColumnDefinitions>
+                            <ColumnDefinition />
+                            <ColumnDefinition MinWidth="100" />
+                        </Grid.ColumnDefinitions>
+                        <RadioButton Grid.Column="0"
+                                 Style="{StaticResource MaterialDesignTabRadioButton}"
+                                 IsChecked="{Binding RenderProfileElement.AlwaysFinishTimeline}"
+                                 MinWidth="0"
+                                 Padding="5 0">
+                            <RadioButton.ToolTip>
+                                <ToolTip Placement="Center" VerticalOffset="-40">
+                                    <TextBlock>
+                                    When conditions are no longer met, finish the the current run of the main timeline
+                                    </TextBlock>
+                                </ToolTip>
+                            </RadioButton.ToolTip>
+                            <StackPanel Orientation="Horizontal">
+                                <materialDesign:PackIcon Kind="PlayOutline" VerticalAlignment="Center" />
+                                <TextBlock FontSize="12" VerticalAlignment="Center">FINISH</TextBlock>
+                            </StackPanel>
+                        </RadioButton>
+                        <RadioButton Grid.Column="1"
+                                 Style="{StaticResource MaterialDesignTabRadioButton}"
+                                 IsChecked="{Binding RenderProfileElement.AlwaysFinishTimeline, Converter={StaticResource InverseBooleanConverter}}"
+                                 MinWidth="0"
+                                 Padding="5 0">
+                            <RadioButton.ToolTip>
+                                <ToolTip Placement="Center" VerticalOffset="-40">
+                                    <TextBlock>
+                                    When conditions are no longer met, skip to the end segment of the timeline
+                                    </TextBlock>
+                                </ToolTip>
+                            </RadioButton.ToolTip>
+                            <StackPanel Orientation="Horizontal">
+                                <materialDesign:PackIcon Kind="SkipNextOutline" VerticalAlignment="Center" />
+                                <TextBlock FontSize="12" VerticalAlignment="Center">SKIP TO END</TextBlock>
+                            </StackPanel>
+                        </RadioButton>
+                    </Grid>
+                </materialDesign:ColorZone>
+            </Grid>
         </Grid>
 
-        <StackPanel Grid.Row="3" Margin="10" HorizontalAlignment="Right" Orientation="Horizontal">
-            <TextBlock VerticalAlignment="Center" Margin="0 0 5 0">On end: </TextBlock>
 
-            <StackPanel Orientation="Horizontal">
-                <RadioButton Style="{StaticResource MaterialDesignTabRadioButton}"  
-                             IsChecked="{Binding RenderProfileElement.AlwaysFinishTimeline}" 
-                             Padding="5 0">
-                    <RadioButton.ToolTip>
-                        <ToolTip Placement="Top" VerticalOffset="-5">
-                            <StackPanel>
-                                <TextBlock>
-                                    When conditions are no longer met, finish the timelines and then stop displaying.
-                                </TextBlock>
-                            </StackPanel>
-                        </ToolTip>
-                    </RadioButton.ToolTip>
-                    <StackPanel Orientation="Horizontal">
-                        <materialDesign:PackIcon Kind="PlayArrow" Width="20" Height="20" VerticalAlignment="Center" />
-                        <TextBlock Margin="5 0 0 0" FontSize="12" VerticalAlignment="Center">
-                            WAIT FOR FINISH
-                        </TextBlock>
-                    </StackPanel>
-                </RadioButton>
-                <RadioButton Style="{StaticResource MaterialDesignTabRadioButton}" 
-                             IsChecked="{Binding RenderProfileElement.AlwaysFinishTimeline, Converter={StaticResource InverseBooleanConverter}}" 
-                             Padding="0">
-                    <RadioButton.ToolTip>
-                        <ToolTip Placement="Top" VerticalOffset="-5">
-                            <StackPanel>
-                                <TextBlock>
-                                    When conditions are no longer met, stop displaying immediately.
-                                </TextBlock>
-                            </StackPanel>
-                        </ToolTip>
-                    </RadioButton.ToolTip>
-                    <StackPanel Orientation="Horizontal">
-                        <materialDesign:PackIcon Kind="SkipNext" Width="20" Height="20" VerticalAlignment="Center" Margin="-5 0 0 0"/>
-                        <TextBlock Margin="5 0 0 0" FontSize="12" VerticalAlignment="Center">
-                            SKIP
-                        </TextBlock>
-                    </StackPanel>
-                </RadioButton>
-            </StackPanel>
-        </StackPanel>
-    </Grid>
+    </materialDesign:Transitioner>
+
+   
 </UserControl>

src/Artemis.UI/Screens/Module/ProfileEditor/DisplayConditions/DisplayConditionsViewModel.cs

@@ -1,4 +1,5 @@
-using System.Threading.Tasks;
+using System.Linq;
+using System.Threading.Tasks;
 using Artemis.Core.Models.Profile;
 using Artemis.Core.Models.Profile.Conditions;
 using Artemis.Storage.Entities.Profile.Abstract;
@@ -15,12 +16,18 @@ namespace Artemis.UI.Screens.Module.ProfileEditor.DisplayConditions
         private readonly IDisplayConditionsVmFactory _displayConditionsVmFactory;
         private DisplayConditionGroupViewModel _rootGroup;
         private RenderProfileElement _renderProfileElement;
+        private int _transitionerIndex;
 
         public DisplayConditionsViewModel(IProfileEditorService profileEditorService, IDisplayConditionsVmFactory displayConditionsVmFactory)
         {
             _profileEditorService = profileEditorService;
             _displayConditionsVmFactory = displayConditionsVmFactory;
-           
+        }
+
+        public int TransitionerIndex
+        {
+            get => _transitionerIndex;
+            set => SetAndNotify(ref _transitionerIndex, value);
         }
 
         public DisplayConditionGroupViewModel RootGroup
@@ -69,6 +76,10 @@ namespace Artemis.UI.Screens.Module.ProfileEditor.DisplayConditions
             RootGroup = _displayConditionsVmFactory.DisplayConditionGroupViewModel(e.RenderProfileElement.DisplayConditionGroup, null);
             RootGroup.IsRootGroup = true;
             RootGroup.Update();
+
+            // Only show the intro to conditions once, and only if the layer has no conditions
+            if (TransitionerIndex != 1)
+                TransitionerIndex = RootGroup.Children.Any() ? 1 : 0;
         }
 
         protected override void OnActivate()

src/Artemis.UI/Screens/Module/ProfileEditor/LayerProperties/LayerEffects/EffectsViewModel.cs

@@ -50,6 +50,15 @@ namespace Artemis.UI.Screens.Module.ProfileEditor.LayerProperties.LayerEffects
             LayerEffectDescriptors.AddRange(descriptors.Except(LayerEffectDescriptors));
             LayerEffectDescriptors.RemoveRange(LayerEffectDescriptors.Except(descriptors));
 
+            // Sort by display name
+            var index = 0;
+            foreach (var layerEffectDescriptor in LayerEffectDescriptors.OrderBy(d => d.DisplayName).ToList())
+            {
+                if (LayerEffectDescriptors.IndexOf(layerEffectDescriptor) != index)
+                    LayerEffectDescriptors.Move(LayerEffectDescriptors.IndexOf(layerEffectDescriptor), index);
+                index++;
+            }
+
             SelectedLayerEffectDescriptor = null;
             NotifyOfPropertyChange(nameof(HasLayerEffectDescriptors));
         }

src/Artemis.UI/Screens/Module/ProfileEditor/LayerProperties/LayerPropertiesView.xaml

@@ -18,6 +18,7 @@
     behaviors:InputBindingBehavior.PropagateInputBindingsToWindow="True">
     <UserControl.Resources>
         <Converters:NullToVisibilityConverter x:Key="NullToVisibilityConverter" />
+        <Converters:NullToBooleanConverter x:Key="NullToBooleanConverter" />
         <utilities:BindingProxy x:Key="DataContextProxy" Data="{Binding}" />
         <Style x:Key="SvStyle" TargetType="{x:Type ScrollViewer}">
             <Setter Property="OverridesDefaultStyle" Value="True" />
@@ -273,6 +274,7 @@
                     ToolTip="Select an effect to add"
                     VerticalAlignment="Center"
                     Visibility="{Binding PropertyTreeVisible, Converter={x:Static s:BoolToVisibilityConverter.Instance}}"
+                    IsEnabled="{Binding SelectedProfileElement, Converter={StaticResource NullToBooleanConverter}}"
                     Command="{x:Static materialDesign:Transitioner.MoveLastCommand}"
                     CommandTarget="{Binding ElementName=TransitionCommandAnchor}">
                 <TextBlock FontSize="11">
@@ -315,7 +317,7 @@
                     ToolTip="Select an effect to add"
                     VerticalAlignment="Center"
                     Visibility="{Binding PropertyTreeVisible, Converter={x:Static s:BoolToVisibilityConverter.Instance}}"
-                    IsEnabled="{Binding CanAddSegment}">
+                    IsEnabled="{Binding SelectedProfileElement, Converter={StaticResource NullToBooleanConverter}}">
                 <Button.Style>
                     <Style TargetType="{x:Type Button}" BasedOn="{StaticResource MaterialDesignFlatMidBgButton}">
                         <Style.Triggers>
@@ -362,7 +364,7 @@
                     Orientation="Horizontal"
                     HorizontalAlignment="Right"
                     Margin="10 5"
-                    Minimum="100"
+                    Minimum="31"
                     Maximum="350"
                     TickFrequency="1"
                     IsSnapToTickEnabled="True"

src/Artemis.UI/Screens/Module/ProfileEditor/LayerProperties/Timeline/TimelineSegmentViewModel.cs

@@ -78,14 +78,14 @@ namespace Artemis.UI.Screens.Module.ProfileEditor.LayerProperties.Timeline
                 if (Segment != SegmentViewModelType.Main)
                     return false;
 
-                return SelectedProfileElement?.RepeatMainSegment ?? false;
+                return SelectedProfileElement?.DisplayContinuously ?? false;
             }
             set
             {
                 if (Segment != SegmentViewModelType.Main)
                     return;
 
-                SelectedProfileElement.RepeatMainSegment = value;
+                SelectedProfileElement.DisplayContinuously = value;
                 ProfileEditorService.UpdateSelectedProfileElement();
                 NotifyOfPropertyChange(nameof(RepeatSegment));
             }
@@ -171,7 +171,7 @@ namespace Artemis.UI.Screens.Module.ProfileEditor.LayerProperties.Timeline
                 SelectedProfileElement.StartSegmentLength = TimeSpan.FromSeconds(1);
             else if (Segment == SegmentViewModelType.Main)
                 SelectedProfileElement.MainSegmentLength = TimeSpan.FromSeconds(1);
-            else if (Segment == SegmentViewModelType.End) 
+            else if (Segment == SegmentViewModelType.End)
                 SelectedProfileElement.EndSegmentLength = TimeSpan.FromSeconds(1);
 
             NotifyOfPropertyChange(nameof(SegmentEnabled));
@@ -269,6 +269,8 @@ namespace Artemis.UI.Screens.Module.ProfileEditor.LayerProperties.Timeline
                 NotifyOfPropertyChange(nameof(SegmentStartPosition));
                 NotifyOfPropertyChange(nameof(SegmentWidth));
             }
+            else if (e.PropertyName == nameof(RenderProfileElement.DisplayContinuously))
+                NotifyOfPropertyChange(nameof(RepeatSegment));
         }