Browser importing works

PixiEditor/Models/ExternalServices/LospecPaletteFetcher.cs

@@ -1,5 +1,6 @@
 using Newtonsoft.Json;
 using PixiEditor.Models.DataHolders;
+using System;
 using System.Net;
 using System.Net.Http;
 using System.Threading.Tasks;
@@ -18,11 +19,21 @@ namespace PixiEditor.Models.ExternalServices
                 if (response.StatusCode == HttpStatusCode.OK)
                 {
                     string content = await response.Content.ReadAsStringAsync();
-                    return JsonConvert.DeserializeObject<PaletteList>(content);
+                    var obj = JsonConvert.DeserializeObject<PaletteList>(content);
+                    obj.Palettes.ForEach(x => ReadjustColors(x.Colors));
+                    return obj;
                 }
             }
 
             return null;
         }
+
+        private static void ReadjustColors(ObservableCollection<string> colors)
+        {
+            for (int i = 0; i < colors.Count; i++)
+            {
+                colors[i] = colors[i].Insert(0, "#");
+            }
+        }
     }
 }

PixiEditor/PixiEditor.csproj

@@ -137,6 +137,7 @@
 		<None Remove="Images\CheckerTile.png" />
 		<None Remove="Images\ChevronDown.png" />
 		<None Remove="Images\DiagonalRed.png" />
+		<None Remove="Images\Download.png" />
 		<None Remove="Images\Eye-off.png" />
 		<None Remove="Images\Eye.png" />
 		<None Remove="Images\Folder-add.png" />
@@ -208,6 +209,7 @@
 		<Resource Include="Images\CheckerTile.png" />
 		<Resource Include="Images\ChevronDown.png" />
 		<Resource Include="Images\DiagonalRed.png" />
+		<Resource Include="Images\Download.png" />
 		<Resource Include="Images\Eye-off.png" />
 		<Resource Include="Images\Eye.png" />
 		<Resource Include="Images\Folder-add.png" />

PixiEditor/Styles/ThemeStyle.xaml

@@ -3,6 +3,7 @@
 
     <Style TargetType="{x:Type Control}">
         <Setter Property="Foreground" Value="White" />
+        <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
     </Style>
 
     <Style TargetType="Button" x:Key="BaseDarkButton">

PixiEditor/ViewModels/SubViewModels/Main/ColorsViewModel.cs

@@ -1,6 +1,10 @@
 using PixiEditor.Helpers;
+using PixiEditor.Models.Dialogs;
+using PixiEditor.Models.Enums;
 using SkiaSharp;
 using System;
+using System.Collections.ObjectModel;
+using System.Linq;
 
 namespace PixiEditor.ViewModels.SubViewModels.Main
 {
@@ -12,6 +16,9 @@ namespace PixiEditor.ViewModels.SubViewModels.Main
 
         public RelayCommand RemoveSwatchCommand { get; set; }
 
+        public RelayCommand<ObservableCollection<string>> ImportPaletteCommand { get; set; }
+
+
         public RelayCommand<int> SelectPaletteColorCommand { get; set; }
 
         private SKColor primaryColor = SKColors.Black;
@@ -52,6 +59,15 @@ namespace PixiEditor.ViewModels.SubViewModels.Main
             RemoveSwatchCommand = new RelayCommand(RemoveSwatch);
             SwapColorsCommand = new RelayCommand(SwapColors);
             SelectPaletteColorCommand = new RelayCommand<int>(SelectPaletteColor);
+            ImportPaletteCommand = new RelayCommand<ObservableCollection<string>>(ImportPalette);
+        }
+
+        public void ImportPalette(ObservableCollection<string> palette)
+        {
+            if (ConfirmationDialog.Show("Replace current palette with selected one?", "Replace current palette") == ConfirmationType.Yes)
+            {
+                Owner.BitmapManager.ActiveDocument.Palette.ReplaceRange(palette.Select(x => SKColor.Parse(x)));
+            }
         }
 
         private void SelectPaletteColor(int index)

PixiEditor/ViewModels/SubViewModels/Main/DocumentViewModel.cs

@@ -2,6 +2,8 @@
 using PixiEditor.Models.DataHolders;
 using PixiEditor.Models.Dialogs;
 using PixiEditor.Models.Enums;
+using SkiaSharp;
+using System;
 using System.Linq;
 
 namespace PixiEditor.ViewModels.SubViewModels.Main
@@ -11,13 +13,9 @@ namespace PixiEditor.ViewModels.SubViewModels.Main
         public const string ConfirmationDialogMessage = "Document was modified. Do you want to save changes?";
 
         public RelayCommand CenterContentCommand { get; set; }
-
         public RelayCommand ClipCanvasCommand { get; set; }
-
         public RelayCommand DeletePixelsCommand { get; set; }
-
         public RelayCommand OpenResizePopupCommand { get; set; }
-
         public RelayCommand RotateToRightCommand { get; set; }
         public RelayCommand FlipCommand { get; set; }
 

PixiEditor/Views/MainWindow.xaml

@@ -356,7 +356,7 @@
                                     <avalondock:LayoutAnchorable ContentId="paletteBrowser" Title="Palette Browser" CanHide="False"
                                                                  CanClose="False" CanAutoHide="False"
                                                                  CanDockAsTabbedDocument="False" CanFloat="True">
-                                        <lospec:LospecPalettesBrowser/>
+                                        <lospec:LospecPalettesBrowser ImportPaletteCommand="{Binding ColorsSubViewModel.ImportPaletteCommand}"/>
                                     </avalondock:LayoutAnchorable>
 
                                 </LayoutAnchorablePane>

PixiEditor/Views/UserControls/Lospec/LospecPaletteItem.xaml

@@ -3,21 +3,22 @@
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
              xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
-             xmlns:local="clr-namespace:PixiEditor.Views.UserControls.Lospec"
+             xmlns:local="clr-namespace:PixiEditor.Views.UserControls.Lospec" 
+             xmlns:controls="clr-namespace:PixiEditor.Views.UserControls"
              mc:Ignorable="d" 
              d:DesignHeight="100" d:DesignWidth="250" Name="paletteItem">
     <Grid>
         <Grid.ColumnDefinitions>
-            <ColumnDefinition Width="84*"/>
-            <ColumnDefinition Width="41*"/>
+            <ColumnDefinition Width="100*"/>
+            <ColumnDefinition Width="30"/>
         </Grid.ColumnDefinitions>
         <Grid.RowDefinitions>
             <RowDefinition Height="35"/>
             <RowDefinition Height="65"/>
         </Grid.RowDefinitions>
         <StackPanel Orientation="Vertical" Grid.RowSpan="2" Grid.ColumnSpan="2">
-            <TextBlock Text="{Binding Palette.Title, ElementName=paletteItem}" Foreground="White"/>
-            <TextBlock Text="{Binding Palette.User.Name, ElementName=paletteItem}" Foreground="White"/>
+            <controls:PrependTextBlock PrependColor="Gray" Prepend="Title: " Text="{Binding Palette.Title, ElementName=paletteItem}" Foreground="White"/>
+            <controls:PrependTextBlock PrependColor="Gray" Prepend="Author: " Text="{Binding Palette.User.Name, ElementName=paletteItem}" Foreground="White"/>
         </StackPanel>
         <ItemsControl Grid.Row="1" Grid.Column="0" ItemsSource="{Binding ElementName=paletteItem, Path=Palette.Colors}">
             <ItemsControl.ItemsPanel>
@@ -27,10 +28,17 @@
             </ItemsControl.ItemsPanel>
             <ItemsControl.ItemTemplate>
                 <DataTemplate>
-                    <Rectangle Fill="{Binding}"/>
+                    <Rectangle Fill="{Binding}" Width="20" Height="20"/>
                 </DataTemplate>
             </ItemsControl.ItemTemplate>
         </ItemsControl>
-        <Button Grid.Row="1" Grid.Column="1"  Content="Import" Style="{StaticResource AccentDarkRoundButton}"/>
+        <Button Grid.Row="0" Grid.RowSpan="2" Grid.Column="1" VerticalAlignment="Center" 
+                Style="{StaticResource ToolButtonStyle}" Cursor="Hand" 
+                Command="{Binding ImportPaletteCommand, ElementName=paletteItem}"
+                CommandParameter="{Binding ElementName=paletteItem, Path=Palette.Colors}">
+            <Button.Background>
+                <ImageBrush ImageSource="/Images/Download.png"/>
+            </Button.Background>
+        </Button>
     </Grid>
 </UserControl>

PixiEditor/Views/UserControls/Lospec/LospecPaletteItem.xaml.cs

@@ -33,6 +33,16 @@ namespace PixiEditor.Views.UserControls.Lospec
         public static readonly DependencyProperty PaletteProperty =
             DependencyProperty.Register("Palette", typeof(Palette), typeof(LospecPaletteItem), new PropertyMetadata(null));
 
+        public ICommand ImportPaletteCommand
+        {
+            get { return (ICommand)GetValue(ImportPaletteCommandProperty); }
+            set { SetValue(ImportPaletteCommandProperty, value); }
+        }
+
+        // Using a DependencyProperty as the backing store for ImportPaletteCommand.  This enables animation, styling, binding, etc...
+        public static readonly DependencyProperty ImportPaletteCommandProperty =
+            DependencyProperty.Register("ImportPaletteCommand", typeof(ICommand), typeof(LospecPaletteItem));
+
 
         public LospecPaletteItem()
         {

PixiEditor/Views/UserControls/Lospec/LospecPalettesBrowser.xaml

@@ -6,13 +6,13 @@
              xmlns:local="clr-namespace:PixiEditor.Views.UserControls.Lospec"
              mc:Ignorable="d" 
              d:DesignHeight="400" d:DesignWidth="250" GotFocus="UserControl_GotFocus" Name="lospecPalettesBrowser">
-    <Grid>
+    <ScrollViewer Margin="5" HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Auto">
         <ItemsControl ItemsSource="{Binding ElementName=lospecPalettesBrowser, Path=PaletteList.Palettes}">
             <ItemsControl.ItemTemplate>
                 <DataTemplate>
-                    <local:LospecPaletteItem Palette="{Binding}"/>
+                    <local:LospecPaletteItem Palette="{Binding}" ImportPaletteCommand="{Binding ImportPaletteCommand, ElementName=lospecPalettesBrowser}"/>
                 </DataTemplate>
             </ItemsControl.ItemTemplate>
         </ItemsControl>   
-    </Grid>
+    </ScrollViewer>
 </UserControl>

PixiEditor/Views/UserControls/Lospec/LospecPalettesBrowser.xaml.cs

@@ -32,6 +32,18 @@ namespace PixiEditor.Views.UserControls.Lospec
         public static readonly DependencyProperty PaletteListProperty =
             DependencyProperty.Register("PaletteList", typeof(PaletteList), typeof(LospecPalettesBrowser));
 
+        public ICommand ImportPaletteCommand
+        {
+            get { return (ICommand)GetValue(ImportPaletteCommandProperty); }
+            set { SetValue(ImportPaletteCommandProperty, value); }
+        }
+
+        // Using a DependencyProperty as the backing store for ImportPaletteCommand.  This enables animation, styling, binding, etc...
+        public static readonly DependencyProperty ImportPaletteCommandProperty =
+            DependencyProperty.Register("ImportPaletteCommand", typeof(ICommand), typeof(LospecPalettesBrowser));
+
+
+
 
         public LospecPalettesBrowser()
         {

PixiEditor/Views/UserControls/PaletteColor.xaml

@@ -25,8 +25,11 @@
                 <SolidColorBrush Color="{Binding Color, Converter={StaticResource SKColorToMediaColorConverter}, ElementName=uc}" />
             </Border.Background>
         </Border>
-        <usercontrols:OutlinedTextBlock Stroke="White" StrokeThickness="2" FontSize="16" Margin="0, 0, 4, 2" 
-                                        Text="{Binding AssociatedKey, ElementName=uc}" 
-                                        Visibility="{Binding ElementName=uc, Path=AssociatedKey, Converter={converters:NotNullToVisibilityConverter}}" HorizontalAlignment="Right" VerticalAlignment="Bottom"/>
+        <Border HorizontalAlignment="Right" VerticalAlignment="Bottom" Margin="1 0 0 -1" Width="15"
+                Visibility="{Binding ElementName=uc, Path=AssociatedKey, Converter={converters:NotNullToVisibilityConverter}}"
+                Background="{StaticResource AccentColor}" CornerRadius="3.5">
+            <TextBlock Foreground="White" FontSize="16" HorizontalAlignment="Center" Margin="1 0 0 0"
+                                        Text="{Binding AssociatedKey, ElementName=uc}"/>
+        </Border>
     </Grid>
 </UserControl>

PixiEditor/Views/UserControls/PrependTextBlock.xaml

@@ -18,7 +18,7 @@
                 </Style.Triggers>
             </Style>
         </StackPanel.Resources>
-        <TextBlock Visibility="{Binding HidePrepend, ElementName=uc, Converter={InverseBoolToVisibilityConverter}}" Text="{Binding Prepend, ElementName=uc}" IsEnabled="{Binding ElementName=uc, Path=IsEnabled}"/>
+        <TextBlock Visibility="{Binding HidePrepend, ElementName=uc, Converter={InverseBoolToVisibilityConverter}}" Foreground="{Binding PrependColor, ElementName=uc}" Text="{Binding Prepend, ElementName=uc}" IsEnabled="{Binding ElementName=uc, Path=IsEnabled}"/>
 
         <TextBlock IsEnabled="{Binding ElementName=uc, Path=IsEnabled}">
             <TextBlock.Text>