Created Palette Browser window

PixiEditor/Models/DataHolders/LospecPalette/LospecUser.cs

@@ -1,13 +1,9 @@
-using System;
-using System.Collections.Generic;
-using System.Linq;
-using System.Text;
-using System.Threading.Tasks;
-
-namespace PixiEditor.Models.DataHolders.LospecPalette
+namespace PixiEditor.Models.DataHolders.LospecPalette
 {
     public class LospecUser
     {
         public string Name { get; set; }
+        public string Slug { get; set; }
+        public string Url => $"https://lospec.com/{Slug}";
     }
 }

PixiEditor/Models/DataHolders/LospecPalette/Palette.cs

@@ -7,7 +7,11 @@ namespace PixiEditor.Models.DataHolders
     public class Palette
     {
         public string Title { get; set; }
+        public string Slug { get; set; }
+        public string Url => $"https://lospec.com/palette-list/{Slug}";
         public LospecUser User { get; set; }
         public ObservableCollection<string> Colors { get; set; }
+        public int Likes { get; set; }
+        public string[] Tags { get; set; }
     }
 }

PixiEditor/PixiEditor.csproj

@@ -142,6 +142,8 @@
 		<None Remove="Images\Eye.png" />
 		<None Remove="Images\Folder-add.png" />
 		<None Remove="Images\Folder.png" />
+		<None Remove="Images\Globe.png" />
+		<None Remove="Images\Heart.png" />
 		<None Remove="Images\Layer-add.png" />
 		<None Remove="Images\MoveImage.png" />
 		<None Remove="Images\MoveViewportImage.png" />
@@ -214,6 +216,8 @@
 		<Resource Include="Images\Eye.png" />
 		<Resource Include="Images\Folder-add.png" />
 		<Resource Include="Images\Folder.png" />
+		<Resource Include="Images\Globe.png" />
+		<Resource Include="Images\Heart.png" />
 		<Resource Include="Images\Layer-add.png" />
 		<Resource Include="Images\penMode.png" />
 		<Resource Include="Images\PixiBotLogo.png" />

PixiEditor/Styles/ThemeStyle.xaml

@@ -3,7 +3,6 @@
 
     <Style TargetType="{x:Type Control}">
         <Setter Property="Foreground" Value="White" />
-        <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
     </Style>
 
     <Style TargetType="Button" x:Key="BaseDarkButton">
@@ -39,6 +38,17 @@
         </Setter>
     </Style>
 
+    <Style TargetType="Hyperlink">
+        <Setter Property="TextBlock.TextDecorations" Value="{x:Null}" />
+        <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
+        <Setter Property="Foreground" Value="White"/>
+        <Style.Triggers>
+            <Trigger Property="IsMouseOver" Value="True">
+                <Setter Property="TextBlock.TextDecorations" Value="Underline" />
+            </Trigger>
+        </Style.Triggers>
+    </Style>
+
     <Style TargetType="Button" x:Key="DarkRoundButton" BasedOn="{StaticResource BaseDarkButton}">
         <Setter Property="OverridesDefaultStyle" Value="True" />
         <Setter Property="Background" Value="#303030" />

PixiEditor/Views/Dialogs/LospecPalettesBrowser.xaml

@@ -0,0 +1,52 @@
+<Window x:Class="PixiEditor.Views.Dialogs.LospecPalettesBrowser"
+             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+             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:converters="clr-namespace:PixiEditor.Helpers.Converters"
+             mc:Ignorable="d" 
+             Title="Palettes Browser" WindowStartupLocation="CenterScreen" MinWidth="200" Height="600" Width="800" WindowStyle="None"
+             Name="lospecPalettesBrowser">
+    <Window.Resources>
+        <BooleanToVisibilityConverter x:Key="BoolToVisibilityConverter"/>
+    </Window.Resources>
+    <WindowChrome.WindowChrome>
+        <WindowChrome CaptionHeight="32"  GlassFrameThickness="0.1"
+                      ResizeBorderThickness="{x:Static SystemParameters.WindowResizeBorderThickness}" />
+    </WindowChrome.WindowChrome>
+
+    <Window.CommandBindings>
+        <CommandBinding Command="{x:Static SystemCommands.CloseWindowCommand}" CanExecute="CommandBinding_CanExecute"
+                        Executed="CommandBinding_Executed_Close" />
+    </Window.CommandBindings>
+
+    <Grid Background="{StaticResource AccentColor}" FocusVisualStyle="{x:Null}">
+        <Grid.RowDefinitions>
+            <RowDefinition Height="35" />
+            <RowDefinition Height="1*"/>
+        </Grid.RowDefinitions>
+
+        <DockPanel Grid.Row="0" Background="{StaticResource MainColor}">
+            <Button DockPanel.Dock="Right" HorizontalAlignment="Right" Style="{StaticResource CloseButtonStyle}"
+                    WindowChrome.IsHitTestVisibleInChrome="True" ToolTip="Close"
+                    Command="{x:Static SystemCommands.CloseWindowCommand}" />
+        </DockPanel>
+        <Grid Grid.Row="1" Margin="10">
+            <TextBlock Text="Couldn't fetch palettes" Foreground="White" FontSize="20" HorizontalAlignment="Center" 
+                       VerticalAlignment="Center" Visibility="{Binding ElementName=itemsControl, 
+                Path=Visibility, Converter={converters:OppositeVisibilityConverter}}"/>
+            <ScrollViewer Margin="5" HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Auto">
+                <ItemsControl Name="itemsControl" ItemsSource="{Binding ElementName=lospecPalettesBrowser, Path=PaletteList.Palettes}" 
+                          Visibility="{Binding ElementName=lospecPalettesBrowser, Path=PaletteList.FetchedCorrectly,
+                Converter={StaticResource BoolToVisibilityConverter}}">
+                    <ItemsControl.ItemTemplate>
+                        <DataTemplate>
+                            <local:LospecPaletteItem Palette="{Binding}" 
+                                                     ImportPaletteCommand="{Binding ImportPaletteCommand, ElementName=lospecPalettesBrowser}"/>
+                        </DataTemplate>
+                    </ItemsControl.ItemTemplate>
+                </ItemsControl>
+            </ScrollViewer>
+        </Grid>
+    </Grid>
+</Window>

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

@@ -15,13 +15,16 @@ using System.Windows.Media.Imaging;
 using System.Windows.Navigation;
 using System.Windows.Shapes;
 
-namespace PixiEditor.Views.UserControls.Lospec
+namespace PixiEditor.Views.Dialogs
 {
+    public delegate void ListFetched(PaletteList list);
+
     /// <summary>
     /// Interaction logic for LospecPalettesBrowser.xaml
     /// </summary>
-    public partial class LospecPalettesBrowser : UserControl
+    public partial class LospecPalettesBrowser : Window
     {
+        public event ListFetched OnListFetched;
         public PaletteList PaletteList
         {
             get { return (PaletteList)GetValue(PaletteListProperty); }
@@ -42,7 +45,15 @@ namespace PixiEditor.Views.UserControls.Lospec
         public static readonly DependencyProperty ImportPaletteCommandProperty =
             DependencyProperty.Register("ImportPaletteCommand", typeof(ICommand), typeof(LospecPalettesBrowser));
 
+        private void CommandBinding_CanExecute(object sender, CanExecuteRoutedEventArgs e)
+        {
+            e.CanExecute = true;
+        }
 
+        private void CommandBinding_Executed_Close(object sender, ExecutedRoutedEventArgs e)
+        {
+            SystemCommands.CloseWindow(this);
+        }
 
 
         public LospecPalettesBrowser()
@@ -50,10 +61,13 @@ namespace PixiEditor.Views.UserControls.Lospec
             InitializeComponent();
         }
 
-        private async void UserControl_GotFocus(object sender, RoutedEventArgs e)
+        public async void FetchPalettes()
         {
-            if(PaletteList == null)
+            if (PaletteList == null)
+            {
                 PaletteList = await LospecPaletteFetcher.FetchPage(0);
+                OnListFetched.Invoke(PaletteList);
+            }
         }
     }
 }

PixiEditor/Views/MainWindow.xaml

@@ -344,7 +344,8 @@
                                                                  CanClose="False" CanAutoHide="False"
                                                                  CanDockAsTabbedDocument="False" CanFloat="True">
                                         <usercontrols:PaletteViewer Colors="{Binding BitmapManager.ActiveDocument.Palette}"
-                                                              SelectColorCommand="{Binding ColorsSubViewModel.SelectColorCommand}"/>
+                                                              SelectColorCommand="{Binding ColorsSubViewModel.SelectColorCommand}"
+                                                                    ImportPaletteCommand="{Binding ColorsSubViewModel.ImportPaletteCommand}"/>
                                     </avalondock:LayoutAnchorable>
                                     <avalondock:LayoutAnchorable ContentId="swatches" Title="Swatches" CanHide="False"
                                                                  CanClose="False" CanAutoHide="False"
@@ -353,11 +354,6 @@
                                             SelectSwatchCommand="{Binding ColorsSubViewModel.SelectColorCommand}"
                                             Swatches="{Binding BitmapManager.ActiveDocument.Swatches}"/>
                                     </avalondock:LayoutAnchorable>
-                                    <avalondock:LayoutAnchorable ContentId="paletteBrowser" Title="Palette Browser" CanHide="False"
-                                                                 CanClose="False" CanAutoHide="False"
-                                                                 CanDockAsTabbedDocument="False" CanFloat="True">
-                                        <lospec:LospecPalettesBrowser ImportPaletteCommand="{Binding ColorsSubViewModel.ImportPaletteCommand}"/>
-                                    </avalondock:LayoutAnchorable>
 
                                 </LayoutAnchorablePane>
                                 <LayoutAnchorablePane>

PixiEditor/Views/UserControls/Lospec/LospecPaletteItem.xaml

@@ -6,21 +6,32 @@
              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">
+             d:DesignHeight="200" d:DesignWidth="800" Name="paletteItem">
     <Grid>
         <Grid.ColumnDefinitions>
             <ColumnDefinition Width="100*"/>
-            <ColumnDefinition Width="30"/>
+            <ColumnDefinition Width="60"/>
         </Grid.ColumnDefinitions>
         <Grid.RowDefinitions>
-            <RowDefinition Height="35"/>
-            <RowDefinition Height="65"/>
+            <RowDefinition Height="60"/>
+            <RowDefinition Height="60*"/>
+            <RowDefinition Height="30"/>
         </Grid.RowDefinitions>
         <StackPanel Orientation="Vertical" Grid.RowSpan="2" Grid.ColumnSpan="2">
-            <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"/>
+            <Separator Background="{StaticResource MainColor}"/>
+            <TextBlock>
+                <Hyperlink NavigateUri="{Binding ElementName=paletteItem, Path=Palette.Url}"
+                           RequestNavigate="Hyperlink_RequestNavigate">                 
+                    <TextBlock Text="{Binding Palette.Title, ElementName=paletteItem}" Foreground="White" FontSize="20"/>
+                </Hyperlink>
+            </TextBlock>
+            <TextBlock Margin="0 5 0 0">
+                <Hyperlink RequestNavigate="Hyperlink_RequestNavigate" NavigateUri="{Binding ElementName=paletteItem, Path=Palette.User.Url}">
+                    <controls:PrependTextBlock PrependColor="Gray" Prepend="Author: " Text="{Binding Palette.User.Name, ElementName=paletteItem}" Foreground="White"/>
+                </Hyperlink>
+            </TextBlock>
         </StackPanel>
-        <ItemsControl Grid.Row="1" Grid.Column="0" ItemsSource="{Binding ElementName=paletteItem, Path=Palette.Colors}">
+        <ItemsControl Margin="0 0 0 0" Grid.Row="1" Grid.Column="0" ItemsSource="{Binding ElementName=paletteItem, Path=Palette.Colors}">
             <ItemsControl.ItemsPanel>
                 <ItemsPanelTemplate>
                     <WrapPanel Orientation="Horizontal" IsItemsHost="True"/>
@@ -28,17 +39,36 @@
             </ItemsControl.ItemsPanel>
             <ItemsControl.ItemTemplate>
                 <DataTemplate>
-                    <Rectangle Fill="{Binding}" Width="20" Height="20"/>
+                    <Rectangle Fill="{Binding}" ToolTip="{Binding}" Width="30" Height="30"/>
                 </DataTemplate>
             </ItemsControl.ItemTemplate>
         </ItemsControl>
-        <Button Grid.Row="0" Grid.RowSpan="2" Grid.Column="1" VerticalAlignment="Center" 
+        <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>
+                    Command="{Binding ImportPaletteCommand, ElementName=paletteItem}"
+                    CommandParameter="{Binding ElementName=paletteItem, Path=Palette.Colors}">
+                <Button.Background>
+                    <ImageBrush ImageSource="/Images/Download.png"/>
+                </Button.Background>
+            </Button>
+        <StackPanel Orientation="Horizontal" HorizontalAlignment="Right" VerticalAlignment="Center" Grid.Row="2" Grid.Column="2">
+            <controls:PrependTextBlock AppendColor="Gray" Append=" likes" Text="{Binding ElementName=paletteItem, Path=Palette.Likes}" Foreground="Gray"/>
+            <Image Source="/Images/Heart.png" Height="16" Margin="2.5 0 0 0"/>
+        </StackPanel>
+        <StackPanel Grid.Row="2" Margin="0 10 0 0" Orientation="Horizontal">
+            <TextBlock Text="Tags: " Foreground="Gray"/>
+            <ItemsControl  ItemsSource="{Binding ElementName=paletteItem, Path=Palette.Tags}">
+                <ItemsControl.ItemsPanel>
+                    <ItemsPanelTemplate>
+                        <StackPanel Orientation="Horizontal"/>
+                    </ItemsPanelTemplate>
+                </ItemsControl.ItemsPanel>
+                <ItemsControl.ItemTemplate>
+                    <DataTemplate d:DataType="{x:Type TextBlock}">
+                        <TextBlock Text="{Binding}" Margin="5 0 0 0" Foreground="White"/>
+                    </DataTemplate>
+                </ItemsControl.ItemTemplate>
+            </ItemsControl>
+        </StackPanel>
     </Grid>
 </UserControl>

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

@@ -3,6 +3,7 @@ using SkiaSharp;
 using System;
 using System.Collections.Generic;
 using System.Collections.ObjectModel;
+using System.Diagnostics;
 using System.Linq;
 using System.Text;
 using System.Threading.Tasks;
@@ -48,5 +49,14 @@ namespace PixiEditor.Views.UserControls.Lospec
         {
             InitializeComponent();
         }
+
+        private void Hyperlink_RequestNavigate(object sender, RequestNavigateEventArgs e)
+        {
+            using Process openProcess = new Process();
+
+            openProcess.StartInfo.UseShellExecute = true;
+            openProcess.StartInfo.FileName = e.Uri.AbsoluteUri;
+            openProcess.Start();
+        }
     }
 }

PixiEditor/Views/UserControls/Lospec/LospecPalettesBrowser.xaml

@@ -1,28 +0,0 @@
-<UserControl x:Class="PixiEditor.Views.UserControls.Lospec.LospecPalettesBrowser"
-             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
-             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:converters="clr-namespace:PixiEditor.Helpers.Converters"
-             mc:Ignorable="d" 
-             d:DesignHeight="400" d:DesignWidth="250" GotFocus="UserControl_GotFocus" Name="lospecPalettesBrowser">
-    <UserControl.Resources>
-        <BooleanToVisibilityConverter x:Key="BoolToVisibilityConverter"/>
-    </UserControl.Resources>
-    <Grid>
-        <TextBlock Text="Couldn't fetch palettes" Foreground="White" FontSize="20" HorizontalAlignment="Center" 
-                   VerticalAlignment="Center" Visibility="{Binding ElementName=itemsControl, 
-            Path=Visibility, Converter={converters:OppositeVisibilityConverter}}"/>
-        <ScrollViewer Margin="5" HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Auto">
-            <ItemsControl Name="itemsControl" ItemsSource="{Binding ElementName=lospecPalettesBrowser, Path=PaletteList.Palettes}" 
-                      Visibility="{Binding ElementName=lospecPalettesBrowser, Path=PaletteList.FetchedCorrectly,
-            Converter={StaticResource BoolToVisibilityConverter}}">
-                <ItemsControl.ItemTemplate>
-                    <DataTemplate>
-                        <local:LospecPaletteItem Palette="{Binding}" ImportPaletteCommand="{Binding ImportPaletteCommand, ElementName=lospecPalettesBrowser}"/>
-                    </DataTemplate>
-                </ItemsControl.ItemTemplate>
-            </ItemsControl>
-        </ScrollViewer>
-    </Grid>
-</UserControl>

PixiEditor/Views/UserControls/PaletteViewer.xaml

@@ -18,8 +18,14 @@
         <StackPanel Orientation="Vertical" Grid.Row="0" Background="{StaticResource MainColor}">
             <DockPanel VerticalAlignment="Center" Margin="0 5 0 0">
                 <local:PaletteColorAdder DockPanel.Dock="Left" Margin="5 0 0 0" Colors="{Binding ElementName=paletteControl, Path=Colors}"/>
-                <StackPanel Margin="0, 0, 5, 0" HorizontalAlignment="Right" Width="55" VerticalAlignment="Center" Orientation="Horizontal">
-                <Button Margin="0, 0, 5, 0" Style="{StaticResource ToolButtonStyle}" 
+                <StackPanel Margin="0, 0, 5, 0" HorizontalAlignment="Right" Width="85" VerticalAlignment="Center" Orientation="Horizontal">
+                <Button Margin="0, 0, 5, 0" Style="{StaticResource ToolButtonStyle}" Click="BrowsePalettes_Click" 
+                Cursor="Hand" Height="24" Width="24" ToolTip="Browse Palettes">
+                        <Button.Background>
+                            <ImageBrush ImageSource="/Images/Globe.png"/>
+                        </Button.Background>
+                    </Button>
+                    <Button Margin="0, 0, 5, 0" Style="{StaticResource ToolButtonStyle}" 
                 Cursor="Hand" Height="24" Width="24"  ToolTip="Load Palette" Click="ImportPalette_OnClick">
                     <Button.Background>
                         <ImageBrush ImageSource="/Images/Load.png"/>

PixiEditor/Views/UserControls/PaletteViewer.xaml.cs

@@ -5,6 +5,7 @@ using System.Windows.Input;
 using Microsoft.Win32;
 using PixiEditor.Models.DataHolders;
 using PixiEditor.Models.IO.JascPalFile;
+using PixiEditor.Views.Dialogs;
 using SkiaSharp;
 
 namespace PixiEditor.Views.UserControls
@@ -35,6 +36,18 @@ namespace PixiEditor.Views.UserControls
         public static readonly DependencyProperty SelectColorCommandProperty =
             DependencyProperty.Register("SelectColorCommand", typeof(ICommand), typeof(PaletteViewer));
 
+        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(PaletteViewer));
+
+        private PaletteList _cachedPaletteList;
+
         public PaletteViewer()
         {
             InitializeComponent();
@@ -148,5 +161,27 @@ namespace PixiEditor.Views.UserControls
                 }
             }
         }
+
+        private async void BrowsePalettes_Click(object sender, RoutedEventArgs e)
+        {
+            LospecPalettesBrowser browser = new LospecPalettesBrowser
+            {
+                Owner = Application.Current.MainWindow,
+                ImportPaletteCommand = this.ImportPaletteCommand
+            };
+
+            if(_cachedPaletteList != null)
+            {
+                browser.PaletteList = _cachedPaletteList;
+            }
+
+            browser.OnListFetched += (PaletteList list) =>
+            {
+                _cachedPaletteList = list;
+            };
+
+            browser.Show();
+            browser.FetchPalettes();
+        }
     }
 }

PixiEditor/Views/UserControls/PrependTextBlock.xaml

@@ -29,6 +29,6 @@
             </TextBlock.Text>
         </TextBlock>
 
-        <TextBlock IsEnabled="{Binding ElementName=uc, Path=IsEnabled}" Visibility="{Binding HidePrepend, ElementName=uc, Converter={InverseBoolToVisibilityConverter}}" Text="{Binding Append, ElementName=uc}"/>
+        <TextBlock IsEnabled="{Binding ElementName=uc, Path=IsEnabled}" Visibility="{Binding HidePrepend, ElementName=uc, Converter={InverseBoolToVisibilityConverter}}" Text="{Binding Append, ElementName=uc}" Foreground="{Binding ElementName=uc, Path=AppendColor}"/>
     </StackPanel>
 </UserControl>

PixiEditor/Views/UserControls/PrependTextBlock.xaml.cs

@@ -48,7 +48,7 @@ namespace PixiEditor.Views.UserControls
         }
 
         public static readonly DependencyProperty PrependColorProperty =
-            DependencyProperty.Register(nameof(PrependColor), typeof(Brush), typeof(PrependTextBlock));
+            DependencyProperty.Register(nameof(PrependColor), typeof(Brush), typeof(PrependTextBlock), new PropertyMetadata(Brushes.White));
 
         public Brush PrependColor
         {
@@ -57,7 +57,7 @@ namespace PixiEditor.Views.UserControls
         }
 
         public static readonly DependencyProperty AppendColorProperty =
-            DependencyProperty.Register(nameof(AppendColor), typeof(Brush), typeof(PrependTextBlock));
+            DependencyProperty.Register(nameof(AppendColor), typeof(Brush), typeof(PrependTextBlock), new PropertyMetadata(Brushes.White));
 
         public Brush AppendColor
         {