Layers and top bar icons

src/PixiEditor.AvaloniaUI/Views/Main/Tools/Toolbar.axaml

@@ -11,60 +11,31 @@
                 Orientation="Horizontal">
                 <Button
                     Margin="12.5,0,0,0"
-                    Width="24" Height="24"
+                    Width="36" Height="36"
+                    Classes="pixi-icon"
                     Command="{cmds:Command PixiEditor.Undo.Undo}"
-                    Classes="ImageButtonStyle"
                     ui:Translator.TooltipKey="UNDO">
-                    <Button.Background>
-                        <ImageBrush Source="/Images/Undo.png" />
-                    </Button.Background>
+                    <TextBlock Text="{DynamicResource icon-undo}" FontSize="20"/>
                 </Button>
                 <Button
 				Command="{cmds:Command PixiEditor.Undo.Redo}"
-                Width="24" Height="24"
-                Classes="ImageButtonStyle"
+                Width="36" Height="36"
+                Classes="pixi-icon" 
                 Margin="0, 0, 5, 0"
 				ui:Translator.TooltipKey="REDO">
-                    <Button.Background>
-                        <ImageBrush Source="/Images/Redo.png"/>
-                    </Button.Background>
+                    <TextBlock Text="{DynamicResource icon-redo}" FontSize="20"/>
                 </Button>
                 <ToggleButton
 				Width="30"
 				BorderThickness="0"
 				ui:Translator.TooltipKey="PEN_MODE"
 				Focusable="False"
+                Classes="pixi-icon"
+                Content="{DynamicResource icon-edit}"
+                FontSize="20"
                 IsChecked="{Binding StylusSubViewModel.IsPenModeEnabled}">
-                    <ToggleButton.Styles>
-                        <Style Selector="ToggleButton">
-                            <Setter Property="Template">
-                                <Setter.Value>
-                                    <ControlTemplate TargetType="ToggleButton">
-                                        <Border BorderBrush="{TemplateBinding BorderBrush}"
-                                            Background="{TemplateBinding Background}" Focusable="False">
-                                            <ContentPresenter HorizontalAlignment="Center"
-                                              VerticalAlignment="Center" Focusable="False"/>
-                                        </Border>
-                                    </ControlTemplate>
-                                </Setter.Value>
-                            </Setter>
-                            <!--TODO: Implement-->
-                            <!--<Style.Triggers>
-                                <Trigger Property="IsChecked" Value="False">
-                                    <Setter Property="Background" Value="Transparent"/>
-                                </Trigger>
-                                <Trigger Property="IsMouseOver" Value="True">
-                                    <Setter Property="Background" Value="#404040"/>
-                                </Trigger>
-                                <Trigger Property="IsChecked" Value="True">
-                                    <Setter Property="Background" Value="#707070"/>
-                                </Trigger>
-                            </Style.Triggers>-->
-                        </Style>
-                    </ToggleButton.Styles>
-                    <Image Height="20" Source="/Images/penMode.png"/>
                 </ToggleButton>
-                <Grid Margin="5,5,10,5" Background="{StaticResource BrighterAccentColor}" Width="5"/>
+                <Grid Margin="5,5,10,5" Background="{DynamicResource ThemeBackgroundBrush2}" Width="5"/>
                 <Label Classes="BaseLabel" FontSize="12"
                    VerticalAlignment="Center" ui:Translator.Key="{Binding ToolsSubViewModel.ActiveTool.DisplayName.Key}"
                    ui:Translator.TooltipLocalizedString="{Binding ToolsSubViewModel.ActiveTool.ActionDisplay}"

src/PixiEditor.AvaloniaUI/Views/Palettes/PaletteColorAdder.axaml

@@ -8,28 +8,22 @@
              xmlns:ui="clr-namespace:PixiEditor.Extensions.UI;assembly=PixiEditor.Extensions"
              mc:Ignorable="d" Name="paletteColorAdder"
              d:DesignHeight="36" d:DesignWidth="120">
-    <StackPanel Orientation="Horizontal" VerticalAlignment="Center">
+    <StackPanel Orientation="Horizontal" VerticalAlignment="Center" Spacing="5">
         <colorPicker:PortableColorPicker
             ColorChanged="PortableColorPicker_ColorChanged"
             SelectedColor="{Binding SelectedColor, ElementName=paletteColorAdder, Mode=TwoWay}"
             UseHintColor="True" HintColor="{Binding ElementName=paletteColorAdder, Path=HintColor}"
-            Width="50" Focusable="False" Margin="0 0 10 0"
+            Width="50" Focusable="False"
             ShowAlpha="False"/>
-        <Button Name="AddButton" Margin="0" Width="24" Height="24" 
-                Classes="ToolButtonStyle"
+        <Button Name="AddButton" Width="24" Height="24" 
+                Classes="pixi-icon"
+                Content="{DynamicResource icon-plus-square}"
                 ui:Translator.TooltipKey="ADD_COLOR_TO_PALETTE"
-                Cursor="Hand" Click="Button_Click">
-            <Button.Background>
-                <ImageBrush Source="/Images/Plus-square.png"/>
-            </Button.Background>
-        </Button>
-        <Button Name="AddFromSwatches" Margin="10 2 0 0" Width="24" Height="24" 
-                Classes="ToolButtonStyle"
+                Cursor="Hand" Click="Button_Click"/>
+        <Button Name="AddFromSwatches" Width="24" Height="24" 
+                Classes="pixi-icon"
                 ui:Translator.TooltipKey="ADD_FROM_SWATCHES"
-                Cursor="Hand" Click="AddFromSwatches_OnClick">
-            <Button.Background>
-                <ImageBrush Source="/Images/CopyAdd.png"/>
-            </Button.Background>
-        </Button>
+                Cursor="Hand" Click="AddFromSwatches_OnClick"
+                Content="{DynamicResource icon-copy-add}"/>
     </StackPanel>
 </UserControl>

src/PixiEditor.AvaloniaUI/Views/Palettes/PaletteViewer.axaml

@@ -18,47 +18,36 @@
                   ui1:DragDropEvents.DragLeave="Grid_PreviewDragLeave"
                   ui1:DragDropEvents.Drop="Grid_Drop">
                 <Grid.RowDefinitions>
-                    <RowDefinition Height="37.5" />
+                    <RowDefinition Height="40" />
                     <RowDefinition Height="5" />
                     <RowDefinition Height="*" />
                 </Grid.RowDefinitions>
-                <StackPanel Orientation="Vertical" Grid.Row="0" Background="{DynamicResource ThemeBackgroundBrush}">
+                <StackPanel Orientation="Vertical" Grid.Row="0" Background="{DynamicResource ThemeBackgroundBrush1}">
                     <DockPanel VerticalAlignment="Center" Margin="0 5 0 0">
                         <palettes:PaletteColorAdder DockPanel.Dock="Left" Margin="5 0 0 0"
                                                     Swatches="{Binding ElementName=paletteControl, Path=Swatches}"
                                                     HintColor="{Binding ElementName=paletteControl, Path=HintColor}"
                                                     Colors="{Binding ElementName=paletteControl, Path=Colors}" />
-                        <StackPanel Margin="0, 0, 5, 0" HorizontalAlignment="Right" Width="110"
+                        <StackPanel Margin="0, 0, 5, 0" HorizontalAlignment="Right" Width="120"
+                                    Spacing="5"
                                     VerticalAlignment="Center" Orientation="Horizontal">
-                            <Button Margin="0, 0, 5, 0"
-                                    Classes="ToolButtonStyle" Click="BrowsePalettes_Click"
-                                    Cursor="Hand" Height="24" Width="24" ui:Translator.TooltipKey="BROWSE_PALETTES">
-                                <Button.Background>
-                                    <ImageBrush Source="/Images/Database.png" />
-                                </Button.Background>
-                            </Button>
-                            <Button Margin="0, 0, 5, 0" Classes="ToolButtonStyle"
+                            <Button
+                                    Classes="pixi-icon" Click="BrowsePalettes_Click"
+                                    Content="{DynamicResource icon-database}"
+                                    Cursor="Hand" Height="24" Width="24" ui:Translator.TooltipKey="BROWSE_PALETTES"/>
+                            <Button Classes="pixi-icon"
                                     Cursor="Hand" Height="24" Width="24" ui:Translator.TooltipKey="LOAD_PALETTE"
-                                    Click="ImportPalette_OnClick">
-                                <Button.Background>
-                                    <ImageBrush Source="/Images/Folder.png" />
-                                </Button.Background>
-                            </Button>
-                            <Button Height="24" Width="24" Margin="0, 0, 2.5, 0" Classes="ToolButtonStyle"
+                                    Content="{DynamicResource icon-folder}"
+                                    Click="ImportPalette_OnClick"/>
+                            <Button Height="24" Width="24" Classes="pixi-icon"
+                                    Content="{DynamicResource icon-save}"
                                     IsEnabled="{Binding ElementName=paletteControl, Path=Colors.Count}"
-                                    Cursor="Hand" ui:Translator.TooltipKey="SAVE_PALETTE" Click="SavePalette_OnClick">
-                                <Button.Background>
-                                    <ImageBrush Source="/Images/Save.png" />
-                                </Button.Background>
-                            </Button>
-                            <Button Height="24" Width="24" Margin="0, 0, 5, 0" Classes="ToolButtonStyle"
+                                    Cursor="Hand" ui:Translator.TooltipKey="SAVE_PALETTE" Click="SavePalette_OnClick"/>
+                            <Button Height="24" Width="24" Classes="pixi-icon"
+                                    Content="{DynamicResource icon-trash}"
                                     IsEnabled="{Binding ElementName=paletteControl, Path=Colors.Count}"
                                     Cursor="Hand" ui:Translator.TooltipKey="DISCARD_PALETTE"
-                                    Click="DiscardPalette_OnClick">
-                                <Button.Background>
-                                    <ImageBrush Source="/Images/Trash.png" />
-                                </Button.Background>
-                            </Button>
+                                    Click="DiscardPalette_OnClick"/>
                         </StackPanel>
                     </DockPanel>
                 </StackPanel>
@@ -132,7 +121,7 @@
                             <palettes:PaletteColorControl Cursor="Hand"
                                                           ui:Translator.TooltipKey="PALETTE_COLOR_TOOLTIP"
                                                           DragDrop.AllowDrop="True" Color="{Binding}"
-                                                          Height="30" Width="30" CornerRadius="0"
+                                                          Height="24" Width="24" CornerRadius="0"
                                                           ui1:DragDropEvents.Drop="PaletteColor_Drop">
                                 <Interaction.Behaviors>
                                     <EventTriggerBehavior EventName="PointerReleased">

src/PixiEditor.UI.Common/Accents/Base.axaml

@@ -6,7 +6,7 @@
         <ResourceDictionary x:Key="Dark">
             <Color x:Key="ThemeBackgroundColor">#252525</Color> <!--This is the lowest elevation color-->
             <Color x:Key="ThemeBackgroundColor1">#2D2D30</Color>
-            <Color x:Key="ThemeBackgroundColor2">#303030</Color>
+            <Color x:Key="ThemeBackgroundColor2">#3f3f46</Color>
 
             <Color x:Key="AccentLowColor">#8d001b</Color>
             <Color x:Key="AccentColor">#B00022</Color>

src/PixiEditor.UI.Common/Fonts/PixiPerfectIcons.axaml

@@ -103,10 +103,35 @@
             <system:String x:Key="icon-y-symmetry">&#xE960;</system:String>
             <system:String x:Key="icon-zoom-in">&#xE961;</system:String>
             <system:String x:Key="icon-zoom-out">&#xE962;</system:String>
+            <system:String x:Key="icon-copy-add">&#x25a1;</system:String>
+            <system:String x:Key="icon-paste-reference-layer">&#x25a1;</system:String>
+            <system:String x:Key="icon-paste-as-new-layer">&#x25a1;</system:String>
         </ResourceDictionary>
     </Styles.Resources>
     
     <Style Selector="TextBlock.pixi-icon">
         <Setter Property="FontFamily" Value="{DynamicResource PixiPerfectIcons}"/>
     </Style>
+    
+    <Style Selector="Button.pixi-icon">
+        <Setter Property="FontFamily" Value="{DynamicResource PixiPerfectIcons}"/>
+        <Setter Property="Background" Value="Transparent"/>
+        <Setter Property="FontSize" Value="24"/>
+        <Setter Property="Padding" Value="0"/>
+        <Setter Property="HorizontalContentAlignment" Value="Center"/>
+        <Setter Property="VerticalContentAlignment" Value="Center"/>
+    </Style>
+    
+    <Style Selector="Button.pixi-icon:pointerover ContentPresenter">
+        <Setter Property="Background" Value="Transparent"/>
+    </Style>
+    
+    <Style Selector="ToggleButton.pixi-icon">
+        <Setter Property="FontFamily" Value="{DynamicResource PixiPerfectIcons}"/>
+        <Setter Property="Background" Value="Transparent"/>
+        <Setter Property="FontSize" Value="24"/>
+        <Setter Property="Padding" Value="0"/>
+        <Setter Property="HorizontalContentAlignment" Value="Center"/>
+        <Setter Property="VerticalContentAlignment" Value="Center"/>
+    </Style>
 </Styles>