Gradient picker - Updated design

Color picker - Fixed opacity slider

src/Artemis.UI.Shared/Controls/ColorPicker.xaml

@@ -9,26 +9,12 @@
     d:DesignHeight="101.848" d:DesignWidth="242.956">
     <UserControl.Resources>
         <ResourceDictionary>
+            <ResourceDictionary.MergedDictionaries>
+                <ResourceDictionary Source="pack://application:,,,/Artemis.UI.Shared;component/Resources/ArtemisShared.xaml" />
+                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.ColorPicker.xaml" />
+            </ResourceDictionary.MergedDictionaries>
             <converters:ColorToStringConverter x:Key="ColorToStringConverter" />
             <converters:ColorToSolidColorConverter x:Key="ColorToSolidColorConverter" />
-            <VisualBrush x:Key="Checkerboard" TileMode="Tile" Stretch="Uniform" ViewportUnits="Absolute" Viewport="0,0,10,10">
-                <VisualBrush.Visual>
-                    <Grid Width="10" Height="10">
-                        <Grid.RowDefinitions>
-                            <RowDefinition />
-                            <RowDefinition />
-                        </Grid.RowDefinitions>
-                        <Grid.ColumnDefinitions>
-                            <ColumnDefinition />
-                            <ColumnDefinition />
-                        </Grid.ColumnDefinitions>
-                        <Rectangle Grid.Row="0" Grid.Column="0" Fill="Gray" />
-                        <Rectangle Grid.Row="0" Grid.Column="1" Fill="White" />
-                        <Rectangle Grid.Row="1" Grid.Column="0" Fill="White" />
-                        <Rectangle Grid.Row="1" Grid.Column="1" Fill="Gray" />
-                    </Grid>
-                </VisualBrush.Visual>
-            </VisualBrush>
             <ControlTemplate x:Key="MaterialDesignOpacitySlider" TargetType="{x:Type Slider}">
                 <Border
                     x:Name="border"

src/Artemis.UI.Shared/Resources/ArtemisShared.xaml

@@ -0,0 +1,22 @@
+<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+                    xmlns:local="clr-namespace:Artemis.UI.Shared.Resources">
+    <VisualBrush x:Key="Checkerboard" TileMode="Tile" Stretch="Uniform" ViewportUnits="Absolute" Viewport="0,0,10,10">
+        <VisualBrush.Visual>
+            <Grid Width="10" Height="10">
+                <Grid.RowDefinitions>
+                    <RowDefinition />
+                    <RowDefinition />
+                </Grid.RowDefinitions>
+                <Grid.ColumnDefinitions>
+                    <ColumnDefinition />
+                    <ColumnDefinition />
+                </Grid.ColumnDefinitions>
+                <Rectangle Grid.Row="0" Grid.Column="0" Fill="Gray" />
+                <Rectangle Grid.Row="0" Grid.Column="1" Fill="White" />
+                <Rectangle Grid.Row="1" Grid.Column="0" Fill="White" />
+                <Rectangle Grid.Row="1" Grid.Column="1" Fill="Gray" />
+            </Grid>
+        </VisualBrush.Visual>
+    </VisualBrush>
+</ResourceDictionary>

src/Artemis.UI.Shared/Screens/GradientEditor/ColorStopView.xaml

@@ -12,6 +12,10 @@
              d:DesignHeight="450" d:DesignWidth="800"
              d:DataContext="{d:DesignInstance local:ColorStopViewModel}" Opacity="1">
     <UserControl.Resources>
+        <ResourceDictionary>
+            <ResourceDictionary.MergedDictionaries>
+                <ResourceDictionary Source="pack://application:,,,/Artemis.UI.Shared;component/Resources/ArtemisShared.xaml" />
+            </ResourceDictionary.MergedDictionaries>
             <converters:SKColorToColorConverter x:Key="SKColorToColorConverter" />
             <Style TargetType="Path" x:Key="ColorStopStyle">
                 <Style.Triggers>
@@ -49,6 +53,7 @@
                     </DataTrigger>
                 </Style.Triggers>
             </Style>
+        </ResourceDictionary>
     </UserControl.Resources>
     <Path Style="{StaticResource ColorStopStyle}"
           Data="M13.437011,33.065002 C9.7268463,29.334181 7.812011,26.379009 4.874511,23.379009 1.687011,19.566509 0.12600673,17.206803 5.6843419E-14,14.127608 0.062010996,2.0027046 11.158781,-0.062991121 13.43702,0.0014351187 M13.438011,33.065016 C17.148173,29.334199 19.063008,26.379023 22.00051,23.379017 25.188007,19.566519 26.749013,17.206806 26.875018,14.127613 26.813007,2.002704 15.716239,-0.062987381 13.438,0.0014388781"
@@ -59,7 +64,17 @@
           MouseUp="{s:Action StopMouseUp}"
           MouseMove="{s:Action StopMouseMove}">
         <Path.Fill>
+            <VisualBrush>
+                <VisualBrush.Visual>
+                    <Border Background="{StaticResource Checkerboard}">
+                        <Rectangle Width="15" Height="20">
+                            <Rectangle.Fill>
                                 <SolidColorBrush Color="{Binding Path=ColorStop.Color, Converter={StaticResource SKColorToColorConverter}}" />
+                            </Rectangle.Fill>
+                        </Rectangle>
+                    </Border>
+                </VisualBrush.Visual>
+            </VisualBrush>
         </Path.Fill>
         <Path.RenderTransform>
             <TransformGroup>

src/Artemis.UI.Shared/Screens/GradientEditor/GradientEditorView.xaml

@@ -7,50 +7,62 @@
              xmlns:controls="clr-namespace:MaterialDesignExtensions.Controls;assembly=MaterialDesignExtensions"
              xmlns:converters="clr-namespace:Artemis.UI.Shared.Converters"
              xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
-             xmlns:shared="clr-namespace:Artemis.UI.Shared"
              xmlns:s="https://github.com/canton7/Stylet"
              xmlns:controls1="clr-namespace:Artemis.UI.Shared.Controls"
              xmlns:utilities="clr-namespace:Artemis.UI.Shared.Utilities"
              mc:Ignorable="d"
              Background="{DynamicResource MaterialDesignPaper}"
              FontFamily="pack://application:,,,/MaterialDesignThemes.Wpf;component/Resources/Roboto/#Roboto"
-             Width="500"
+             Width="400"
-             Height="500"
+             Height="400"
              d:DesignHeight="450"
              d:DesignWidth="800"
              d:DataContext="{d:DesignInstance local:GradientEditorViewModel}">
     <UserControl.Resources>
         <converters:ColorGradientToGradientStopsConverter x:Key="ColorGradientToGradientStopsConverter" />
         <converters:SKColorToColorConverter x:Key="SKColorToColorConverter" />
+
+        <VisualBrush x:Key="Checkerboard" TileMode="Tile" Stretch="Uniform" ViewportUnits="Absolute" Viewport="0,0,10,10">
+            <VisualBrush.Visual>
+                <Grid Width="10" Height="10">
+                    <Grid.RowDefinitions>
+                        <RowDefinition />
+                        <RowDefinition />
+                    </Grid.RowDefinitions>
+                    <Grid.ColumnDefinitions>
+                        <ColumnDefinition />
+                        <ColumnDefinition />
+                    </Grid.ColumnDefinitions>
+                    <Rectangle Grid.Row="0" Grid.Column="0" Fill="Gray" />
+                    <Rectangle Grid.Row="0" Grid.Column="1" Fill="White" />
+                    <Rectangle Grid.Row="1" Grid.Column="0" Fill="White" />
+                    <Rectangle Grid.Row="1" Grid.Column="1" Fill="Gray" />
+                </Grid>
+            </VisualBrush.Visual>
+        </VisualBrush>
     </UserControl.Resources>
     <Grid Margin="16">
         <Grid.RowDefinitions>
             <RowDefinition Height="*" />
             <RowDefinition Height="Auto" />
             <RowDefinition Height="Auto" />
+            <RowDefinition Height="Auto" />
         </Grid.RowDefinitions>
-        <materialDesign:Card Grid.Row="0" Margin="15 15 15 7">
+        <StackPanel Grid.Row="0" Margin="0 5" HorizontalAlignment="Center" VerticalAlignment="Center">
-            <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center" Margin="16">
             <materialDesign:PackIcon Kind="Crane" Width="80" Height="80" HorizontalAlignment="Center" />
-                <TextBlock Style="{StaticResource MaterialDesignBody1TextBlock}" TextWrapping="Wrap"
+            <TextBlock Style="{StaticResource MaterialDesignBody1TextBlock}" TextWrapping="Wrap" HorizontalAlignment="Center">
-                           HorizontalAlignment="Center">
                 Gradient saving not implemented yet
             </TextBlock>
-                <TextBlock Style="{StaticResource MaterialDesignCaptionTextBlock}" TextWrapping="Wrap"
+            <TextBlock Style="{StaticResource MaterialDesignCaptionTextBlock}" TextWrapping="Wrap" HorizontalAlignment="Center">
-                           HorizontalAlignment="Center">
                 Soon you'll be able to store different gradients for usage throughout your profiles and quickly select them
             </TextBlock>
         </StackPanel>
-        </materialDesign:Card>
+        <Separator Grid.Row="1" Margin="0 5" />
+        <StackPanel Grid.Row="2" Margin="0 5" ClipToBounds="False">
+            <TextBlock Margin="0 5">Gradient</TextBlock>
 
-        <materialDesign:Card Grid.Row="1" Margin="15 7 15 15" ClipToBounds="False">
+            <Border Background="{StaticResource Checkerboard}">
-            <StackPanel ClipToBounds="False">
+                <Rectangle x:Name="Preview" Height="40" utilities:SizeObserver.Observe="True" utilities:SizeObserver.ObservedWidth="{Binding PreviewWidth, Mode=OneWayToSource}">
-                <TextBlock Margin="15 15 0 0">Gradient</TextBlock>
-                <Separator Margin="15 5" />
-
-                <Rectangle x:Name="Preview" Height="40" Margin="15 0"
-                           utilities:SizeObserver.Observe="True"
-                           utilities:SizeObserver.ObservedWidth="{Binding PreviewWidth, Mode=OneWayToSource}">
                     <Rectangle.Fill>
                         <LinearGradientBrush
                             GradientStops="{Binding ColorGradient.Stops, Converter={StaticResource ColorGradientToGradientStopsConverter}}"
@@ -58,9 +70,9 @@
                             StartPoint="0,0" />
                     </Rectangle.Fill>
                 </Rectangle>
+            </Border>
 
-                <ItemsControl ItemsSource="{Binding ColorStopViewModels}" Margin="15 0"
+            <ItemsControl ItemsSource="{Binding ColorStopViewModels}" MouseLeftButtonUp="{s:Action AddColorStop}" Cursor="Cross">
-                              MouseLeftButtonUp="{s:Action AddColorStop}" Cursor="Cross">
                 <ItemsControl.ItemsPanel>
                     <ItemsPanelTemplate>
                         <Canvas Height="16" Width="440" x:Name="PreviewCanvas" Background="Transparent" />
@@ -78,52 +90,48 @@
                 </ItemsControl.ItemTemplate>
             </ItemsControl>
 
-                <TextBlock Margin="15 15 0 0">Selected stop</TextBlock>
+            <TextBlock Margin="0 5">Selected stop</TextBlock>
-                <Separator Margin="15 5" />
 
-                <Grid Margin="15">
+            <Grid Margin="0 5">
                 <Grid.ColumnDefinitions>
-                        <ColumnDefinition Width="70" />
                     <ColumnDefinition Width="Auto" />
-                        <ColumnDefinition Width="70" />
+                    <ColumnDefinition Width="*" />
-                        <ColumnDefinition Width="Auto" />
-                        <ColumnDefinition Width="140" />
                 </Grid.ColumnDefinitions>
 
-                    <Label Grid.Column="0" HorizontalAlignment="Right">Color:</Label>
+                <StackPanel Grid.Column="0" Orientation="Horizontal">
+                    <Label HorizontalAlignment="Left" Margin="-5,0,0,0">Color:</Label>
                     <controls1:ColorPicker
-                        Grid.Row="0"
-                        Grid.Column="1"
                         x:Name="CurrentColor"
                         Width="85"
+                        Margin="5,0,15,0"
                         Color="{Binding Path=SelectedColorStopViewModel.ColorStop.Color, Converter={StaticResource SKColorToColorConverter}}"
                         IsEnabled="{Binding HasSelectedColorStopViewModel}" />
 
-                    <Label Grid.Row="0" Grid.Column="2" HorizontalAlignment="Right">Location:</Label>
+                    <Label HorizontalAlignment="Center">Location:</Label>
-                    <StackPanel Grid.Row="0" Grid.Column="3" Orientation="Horizontal">
+                    <TextBox Width="40"
-                        <TextBox Width="40" Text="{Binding SelectedColorStopViewModel.OffsetPercent}"
+                             Text="{Binding SelectedColorStopViewModel.OffsetPercent}"
-                                 IsEnabled="{Binding HasSelectedColorStopViewModel}" materialDesign:HintAssist.Hint="0" />
+                             IsEnabled="{Binding HasSelectedColorStopViewModel}"
+                             materialDesign:HintAssist.Hint="0"
+                             Margin="5 0 0 0" />
                     <Label>%</Label>
                 </StackPanel>
-
+                <Button Grid.Column="1"
-                    <Button Grid.Row="0" Grid.Column="4"
+                        Style="{StaticResource MaterialDesignOutlinedButton}"
-                            Style="{StaticResource MaterialDesignRaisedButton}"
-                            Width="80"
                         Height="25"
+                        Margin="8,0,0,0"
                         IsEnabled="{Binding HasSelectedColorStopViewModel}"
                         Command="{s:Action RemoveColorStop}"
                         CommandParameter="{Binding SelectedColorStopViewModel}">
-                        Delete
+                    DELETE
                 </Button>
             </Grid>
         </StackPanel>
-        </materialDesign:Card>
 
-        <StackPanel Grid.Row="2" Orientation="Horizontal" HorizontalAlignment="Right">
+        <StackPanel Grid.Row="3" Orientation="Horizontal" HorizontalAlignment="Right">
-            <Button Style="{StaticResource MaterialDesignFlatButton}" IsCancel="True" Margin="0 8 8 0"
+            <Button Style="{StaticResource MaterialDesignOutlinedButton}" IsCancel="True" Margin="0 8 8 0"
-                    Command="{s:Action Cancel}" Content="Cancel" />
+                    Command="{s:Action Cancel}" Content="CANCEL" />
-            <Button Style="{StaticResource MaterialDesignFlatButton}" IsDefault="True" Margin="0 8 0 0"
+            <Button Style="{StaticResource MaterialDesignFlatMidBgButton}" IsDefault="True" Margin="0 8 0 0"
-                    Command="{s:Action Confirm}" Content="Accept" />
+                    Command="{s:Action Confirm}" Content="ACCEPT" />
         </StackPanel>
     </Grid>
 </UserControl>

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

@@ -190,21 +190,53 @@
         </Grid>
 
         <!-- Bottom row, a bit hacky but has a ZIndex of 2 to cut off the time caret that overlaps the entire timeline -->
-        <StackPanel Grid.Row="1"
+        <Grid Grid.Row="1"
               Grid.ColumnSpan="2"
               Grid.Column="0"
               HorizontalAlignment="Stretch"
               ZIndex="2"
               Background="{DynamicResource MaterialDesignCardBackground}">
+            <!-- Selected layer controls -->
+            <Grid.ColumnDefinitions>
+                <ColumnDefinition Width="*" />
+                <ColumnDefinition Width="*" />
+            </Grid.ColumnDefinitions>
+            <Grid Grid.Column="0">
+                <Grid.ColumnDefinitions>
+                    <ColumnDefinition />
+                    <ColumnDefinition Width="Auto"/>
+                </Grid.ColumnDefinitions>
+                <StackPanel Grid.Column="0" Orientation="Horizontal" Margin="6">
+                    <materialDesign:PackIcon Kind="Layers" Width="16" />
+                    <materialDesign:PackIcon Kind="{Binding SelectedLayer.LayerBrush.Descriptor.Icon}"
+                                             Width="16"
+                                             Margin="5 0 0 0"
+                                             ToolTip="{Binding SelectedLayer.LayerBrush.Descriptor.DisplayName, Mode=OneWay}"
+                                             Background="Transparent" />
+                    <TextBlock Text="{Binding SelectedLayer.Name}" Margin="5 0 0 0" />
+                </StackPanel>
+                <Button Grid.Column="1"
+                        Style="{StaticResource MaterialDesignFlatMidBgButton}"
+                        Margin="0 -2"
+                        Padding="10 0"
+                        Height="20"
+                        Width="82"
+                        ToolTip="Change the property's data binding"
+                        
+                        VerticalAlignment="Center">
+                    <TextBlock FontSize="10">ADD EFFECT</TextBlock>
+                </Button>
+            </Grid>
 
             <!-- Zoom control -->
-            <Slider Orientation="Horizontal"
+            <Slider Grid.Column="1"
+                    Orientation="Horizontal"
                     HorizontalAlignment="Right"
                     Margin="10 5"
                     Minimum="31"
                     Maximum="350"
                     Value="{Binding ProfileEditorService.PixelsPerSecond}"
                     Width="319" />
-        </StackPanel>
+        </Grid>
     </Grid>
 </UserControl>

src/Artemis.UI/Screens/Module/ProfileEditor/ProfileEditorView.xaml

@@ -45,7 +45,7 @@
                 <!-- Bottom panels resize -->
                 <RowDefinition Height="Auto" />
                 <!-- Bottom panels -->
-                <RowDefinition Height="{Binding BottomPanelsHeight.Value, Mode=TwoWay}" MinHeight="100" />
+                <RowDefinition Height="{Binding BottomPanelsHeight.Value, Mode=TwoWay}" MinHeight="108" />
             </Grid.RowDefinitions>
 
             <!-- Introduction -->