Recent files btn and social icons

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

@@ -50,6 +50,7 @@
             <system:String x:Key="icon-crossroad">&#xE91D;</system:String>
             <system:String x:Key="icon-database">&#xE93D;</system:String>
             <system:String x:Key="icon-deselect">&#xE93E;</system:String>
+            <system:String x:Key="icon-discord">&#xE911;</system:String>
             <system:String x:Key="icon-dot">&#xE983;</system:String>
             <system:String x:Key="icon-download">&#xE99F;</system:String>
             <system:String x:Key="icon-download-cloud">&#xE989;</system:String>
@@ -79,6 +80,7 @@
             <system:String x:Key="icon-grid">&#xE94F;</system:String>
             <system:String x:Key="icon-gridlines">&#xE961;</system:String>
             <system:String x:Key="icon-hard-drive">&#xE98C;</system:String>
+            <system:String x:Key="icon-heart-handshake">&#xE902;</system:String>
             <system:String x:Key="icon-help">&#xE99B;</system:String>
             <system:String x:Key="icon-home">&#xE950;</system:String>
             <system:String x:Key="icon-image">&#xE952;</system:String>
@@ -139,6 +141,7 @@
             <system:String x:Key="icon-points-crossed">&#xE918;</system:String>
             <system:String x:Key="icon-put-image">&#xE908;</system:String>
             <system:String x:Key="icon-rectangle-selection">&#xE968;</system:String>
+            <system:String x:Key="icon-reddit">&#xE905;</system:String>
             <system:String x:Key="icon-redo">&#xE969;</system:String>
             <system:String x:Key="icon-reset">&#xE9AA;</system:String>
             <system:String x:Key="icon-resize">&#xE96B;</system:String>
@@ -158,6 +161,7 @@
             <system:String x:Key="icon-star">&#xE99C;</system:String>
             <system:String x:Key="icon-star-filled">&#xE999;</system:String>
             <system:String x:Key="icon-star-half">&#xE9AB;</system:String>
+            <system:String x:Key="icon-steam">&#xE901;</system:String>
             <system:String x:Key="icon-step-back">&#xE9C0;</system:String>
             <system:String x:Key="icon-step-end">&#xE9C2;</system:String>
             <system:String x:Key="icon-step-forward">&#xE9C1;</system:String>
@@ -178,6 +182,7 @@
             <system:String x:Key="icon-timeline">&#xE9A3;</system:String>
             <system:String x:Key="icon-tool">&#xE977;</system:String>
             <system:String x:Key="icon-trash">&#xE978;</system:String>
+            <system:String x:Key="icon-twitter">&#xE904;</system:String>
             <system:String x:Key="icon-undo">&#xE979;</system:String>
             <system:String x:Key="icon-unlock">&#xE97A;</system:String>
             <system:String x:Key="icon-up-vector">&#xE91A;</system:String>
@@ -189,6 +194,7 @@
             <system:String x:Key="icon-x-symmetry">&#xE980;</system:String>
             <system:String x:Key="icon-y-symmetry">&#xE97D;</system:String>
             <system:String x:Key="icon-youtube">&#xE995;</system:String>
+            <system:String x:Key="icon-youtube-filled">&#xE903;</system:String>
             <system:String x:Key="icon-zoom-in">&#xE981;</system:String>
             <system:String x:Key="icon-zoom-out">&#xE982;</system:String>
         </ResourceDictionary>

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

@@ -46,6 +46,7 @@ public static partial class PixiPerfectIcons
     public const string Crossroad = "\uE91D";
     public const string Database = "\uE93D";
     public const string Deselect = "\uE93E";
+    public const string Discord = "\uE911";
     public const string Dot = "\uE983";
     public const string Download = "\uE99F";
     public const string DownloadCloud = "\uE989";
@@ -75,6 +76,7 @@ public static partial class PixiPerfectIcons
     public const string Grid = "\uE94F";
     public const string Gridlines = "\uE961";
     public const string HardDrive = "\uE98C";
+    public const string HeartHandshake = "\uE902";
     public const string Help = "\uE99B";
     public const string Home = "\uE950";
     public const string Image = "\uE952";
@@ -135,6 +137,7 @@ public static partial class PixiPerfectIcons
     public const string PointsCrossed = "\uE918";
     public const string PutImage = "\uE908";
     public const string RectangleSelection = "\uE968";
+    public const string Reddit = "\uE905";
     public const string Redo = "\uE969";
     public const string Reset = "\uE9AA";
     public const string Resize = "\uE96B";
@@ -154,6 +157,7 @@ public static partial class PixiPerfectIcons
     public const string Star = "\uE99C";
     public const string StarFilled = "\uE999";
     public const string StarHalf = "\uE9AB";
+    public const string Steam = "\uE901";
     public const string StepBack = "\uE9C0";
     public const string StepEnd = "\uE9C2";
     public const string StepForward = "\uE9C1";
@@ -174,6 +178,7 @@ public static partial class PixiPerfectIcons
     public const string Timeline = "\uE9A3";
     public const string Tool = "\uE977";
     public const string Trash = "\uE978";
+    public const string Twitter = "\uE904";
     public const string Undo = "\uE979";
     public const string Unlock = "\uE97A";
     public const string UpVector = "\uE91A";
@@ -185,6 +190,7 @@ public static partial class PixiPerfectIcons
     public const string XSymmetry = "\uE980";
     public const string YSymmetry = "\uE97D";
     public const string Youtube = "\uE995";
+    public const string YoutubeFilled = "\uE903";
     public const string ZoomIn = "\uE981";
     public const string ZoomOut = "\uE982";
 }

src/PixiEditor/Data/Localization/Languages/en.json

@@ -676,8 +676,8 @@
   "NORMALIZED_TIME": "Normalized Time",
   "WITHOUT_FILTERS": "Without filters",
   "RAW_LAYER_OUTPUT": "Raw",
-  "BETA_EXAMPLE_FILES": "Beta Example Files",
-  "BETA_PROCEDURAL_GENERATION": "Procedural Animation",
+  "EXAMPLE_FILES": "Example Files",
+  "PROCEDURAL_GENERATION": "Procedural Animation",
   "POND_EXAMPLE": "Pond",
   "TREE_EXAMPLE": "Windy Tree",
   "OUTLINE_EXAMPLE": "Automatic Outline",

src/PixiEditor/Styles/PortingWipStyles.axaml

@@ -120,10 +120,10 @@
                         BorderBrush="{TemplateBinding BorderBrush}"
                         CornerRadius="5">
                         <ContentControl>
-                            <Image Margin="8"
-                                   Source="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Content,
-                            Converter={converters:ImagePathToBitmapConverter}}"
-                                   RenderOptions.BitmapInterpolationMode="HighQuality" />
+                            <TextBlock Classes="pixi-icon"
+                                       HorizontalAlignment="Center"
+                                       FontSize="30"
+                                   Text="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Content}" />
                         </ContentControl>
                     </Border>
                 </ControlTemplate>

src/PixiEditor/Views/Dialogs/AboutPopup.axaml

@@ -101,40 +101,41 @@
 
         <panels:AlignableWrapPanel DockPanel.Dock="Bottom" HorizontalContentAlignment="Center"
                                    HorizontalAlignment="Center" Margin="0,20,0,15">
-            <Button Command="{cmds:Command PixiEditor.Links.OpenHyperlink, UseProvided=True}"
-                    CommandParameter="https://pixieditor.net"
-                    Classes="SocialMediaButton" Tag="#e3002d" ui:Translator.TooltipKey="WEBSITE"
-                    Content="/Images/SocialMedia/WebsiteIcon.png" />
-            <Button Command="{cmds:Command PixiEditor.Links.OpenHyperlink, UseProvided=True}"
-                    CommandParameter="https://discord.gg/tzkQFDkqQS"
-                    Classes="SocialMediaButton" Tag="#7289DA" ui:Translator.TooltipKey="DISCORD"
-                    Content="/Images/SocialMedia/DiscordIcon.png" />
-            <Button Command="{cmds:Command PixiEditor.Links.OpenHyperlink, UseProvided=True}"
-                    CommandParameter="https://reddit.com/r/PixiEditor"
-                    Classes="SocialMediaButton" Tag="#FF4500" ui:Translator.TooltipKey="REDDIT"
-                    Content="/Images/SocialMedia/RedditIcon.png" />
-            <Button Command="{cmds:Command PixiEditor.Links.OpenHyperlink, UseProvided=True}"
-                    CommandParameter="https://store.steampowered.com/app/2218560"
-                    Classes="SocialMediaButton" Tag="#00adee" ui:Translator.TooltipKey="STEAM"
-                    Content="/Images/SocialMedia/SteamIcon.png" />
-            <Button Command="{cmds:Command PixiEditor.Links.OpenHyperlink, UseProvided=True}"
-                    CommandParameter="https://github.com/PixiEditor/PixiEditor"
-                    Classes="SocialMediaButton" Tag="Black" ui:Translator.TooltipKey="GITHUB"
-                    Content="/Images/SocialMedia/GitHubIcon.png" />
-            <Button Command="{cmds:Command PixiEditor.Links.OpenHyperlink, UseProvided=True}"
-                    CommandParameter="https://www.youtube.com/channel/UCT5XvyvX1q5PAIaXfWmpsMQ"
-                    Classes="SocialMediaButton" Tag="#FF0000" ui:Translator.TooltipKey="YOUTUBE"
-                    Content="/Images/SocialMedia/YouTubeIcon.png" />
-            <Button Command="{cmds:Command PixiEditor.Links.OpenHyperlink, UseProvided=True}"
-                    IsVisible="{Binding DisplayDonationButton}"
-                    CommandParameter="https://opencollective.com/pixieditor"
-                    Classes="SocialMediaButton" Tag="#d4af37" ui:Translator.TooltipKey="DONATE"
-                    Content="/Images/SocialMedia/DonateIcon.png" />
-            <Button Command="{cmds:Command PixiEditor.Links.OpenHyperlink, UseProvided=True}"
-                    IsVisible="{Binding !DisplayDonationButton}"
-                    CommandParameter="https://store.steampowered.com/app/2435860/PixiEditor__Supporter_Pack/"
-                    Classes="SocialMediaButton" Tag="#d4af37" ui:Translator.TooltipKey="BUY_SUPPORTER_PACK"
-                    Content="/Images/SocialMedia/DonateIcon.png" />
+             <Button Command="{cmds:Command PixiEditor.Links.OpenHyperlink, UseProvided=True}"
+                                CommandParameter="https://pixieditor.net"
+                                ui:Translator.TooltipKey="WEBSITE"
+                                Classes="SocialMediaButton" Tag="#e3002d"
+                                Content="{DynamicResource icon-globe}" />
+                        <Button Command="{cmds:Command PixiEditor.Links.OpenHyperlink, UseProvided=True}"
+                                CommandParameter="https://discord.gg/tzkQFDkqQS"
+                                Classes="SocialMediaButton" Tag="#5865F2" ui:Translator.TooltipKey="DISCORD"
+                                Content="{DynamicResource icon-discord}" />
+                        <Button Command="{cmds:Command PixiEditor.Links.OpenHyperlink, UseProvided=True}"
+                                CommandParameter="https://reddit.com/r/PixiEditor"
+                                Classes="SocialMediaButton" Tag="#FF4500" ui:Translator.TooltipKey="REDDIT"
+                                Content="{DynamicResource icon-reddit}" />
+                        <Button Command="{cmds:Command PixiEditor.Links.OpenHyperlink, UseProvided=True}"
+                                CommandParameter="https://store.steampowered.com/app/2218560"
+                                Classes="SocialMediaButton" Tag="#00adee" ui:Translator.TooltipKey="STEAM"
+                                Content="{DynamicResource icon-steam}" />
+                        <Button Command="{cmds:Command PixiEditor.Links.OpenHyperlink, UseProvided=True}"
+                                CommandParameter="https://github.com/PixiEditor/PixiEditor"
+                                Classes="SocialMediaButton" Tag="Black" ui:Translator.TooltipKey="GITHUB"
+                                Content="{DynamicResource icon-github}" />
+                        <Button Command="{cmds:Command PixiEditor.Links.OpenHyperlink, UseProvided=True}"
+                                CommandParameter="https://www.youtube.com/channel/UCT5XvyvX1q5PAIaXfWmpsMQ"
+                                Classes="SocialMediaButton" Tag="#FF0000" ui:Translator.TooltipKey="YOUTUBE"
+                                Content="{DynamicResource icon-youtube-filled}" />
+                        <Button Command="{cmds:Command PixiEditor.Links.OpenHyperlink, UseProvided=True}"
+                                IsVisible="{Binding ShowDonateButton}"
+                                CommandParameter="https://opencollective.com/pixieditor"
+                                Classes="SocialMediaButton" Tag="#d4af37" ui:Translator.TooltipKey="DONATE"
+                                Content="{DynamicResource icon-heart-handshake}" />
+                        <Button Command="{cmds:Command PixiEditor.Links.OpenHyperlink, UseProvided=True}"
+                                IsVisible="{Binding !ShowDonateButton}"
+                                CommandParameter="https://store.steampowered.com/app/2435860/PixiEditor__Supporter_Pack/"
+                                Classes="SocialMediaButton" Tag="#d4af37" ui:Translator.TooltipKey="BUY_SUPPORTER_PACK"
+                                Content="{DynamicResource icon-heart-handshake}" />
         </panels:AlignableWrapPanel>
     </StackPanel>
 </dialogs:PixiEditorPopup>

src/PixiEditor/Views/Windows/HelloTherePopup.axaml

@@ -81,45 +81,29 @@
                                     Command="{Binding NewFromClipboardCommand}"
                                     ui:Translator.TooltipKey="NEW_FROM_CLIPBOARD" />
                         </StackPanel>
-                        <Button Command="{xaml:Command Name=PixiEditor.FoundersPack:Workspaces.Browse}"
-                                IsVisible="{xaml:CommandExists Name=PixiEditor.FoundersPack:Workspaces.Browse}"
-                                Name="workspacesButton"
-                                Margin="10, 0, 34, 0"
-                                ui:Translator.Key="PixiEditor.FoundersPack:BROWSE_TEMPLATES" />
-                    </StackPanel>
-
-                    <StackPanel Grid.Row="2" HorizontalAlignment="Center" Margin="0,30,0,0">
-                        <TextBlock FontSize="23" FontWeight="SemiBold" HorizontalAlignment="Center"
-                                   ui:Translator.Key="BETA_EXAMPLE_FILES" />
-
-                        <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
-                            <windows:BetaExampleButton FileName="Disco Ball.pixi" DisplayName="DISCO_BALL_EXAMPLE"
-                                                       CloseCommand="{Binding CloseCommand, RelativeSource={RelativeSource AncestorType=windows:HelloTherePopup}}" />
-                            <windows:BetaExampleButton FileName="Tree.pixi" DisplayName="TREE_EXAMPLE"
-                                                       CloseCommand="{Binding CloseCommand, RelativeSource={RelativeSource AncestorType=windows:HelloTherePopup}}" />
-                            <windows:BetaExampleButton FileName="Island.pixi" DisplayName="ISLAND_EXAMPLE"
-                                                       CloseCommand="{Binding CloseCommand, RelativeSource={RelativeSource AncestorType=windows:HelloTherePopup}}" />
-
-                            <StackPanel>
-                                <Button Margin="0,10,0,0" HorizontalAlignment="Center"
-                                        Width="100" Height="100"
-                                        Padding="0"
-                                        Background="{DynamicResource ThemeAccentBrush2}"
-                                        Command="{Binding SetShowAllBetaExamplesCommand, RelativeSource={RelativeSource AncestorType=windows:HelloTherePopup}}"
-                                        CommandParameter="{x:True}">
-                                    <Grid Width="100" Height="100">
-                                        <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center"
-                                                   ui:Translator.Key="SHOW_ALL_EXAMPLES" />
-                                    </Grid>
-                                </Button>
 
-                                <TextBlock Text=" "
-                                           Width="110" TextAlignment="Center"
-                                           TextTrimming="CharacterEllipsis"
-                                           FontSize="18" Margin="10,10,10,2" HorizontalAlignment="Center" />
-                            </StackPanel>
+                        <StackPanel Orientation="Horizontal">
+                            <StackPanel.Styles>
+                                <Style Selector="Button.fullWidth">
+                                    <Setter Property="Width" Value="320" />
+                                </Style>
+                            </StackPanel.Styles>
+                            <Button Command="{xaml:Command Name=PixiEditor.FoundersPack:Workspaces.Browse}"
+                                    IsVisible="{xaml:CommandExists Name=PixiEditor.FoundersPack:Workspaces.Browse}"
+                                    Name="workspacesButton"
+                                    MinWidth="150" Margin="10, 0"
+                                    ui:Translator.Key="PixiEditor.FoundersPack:BROWSE_TEMPLATES" />
+                            <Button
+                                    Background="{DynamicResource ThemeAccentBrush2}"
+                                    ui:Translator.Key="EXAMPLE_FILES"
+                                    Margin="10, 0" MinWidth="150"
+                                    Classes.fullWidth="{Binding ElementName=workspacesButton, Path=!IsEffectivelyVisible}"
+                                    Command="{Binding SetShowAllBetaExamplesCommand, RelativeSource={RelativeSource AncestorType=windows:HelloTherePopup}}"
+                                    CommandParameter="{x:True}" />
                         </StackPanel>
+                    </StackPanel>
 
+                    <StackPanel Grid.Row="2" HorizontalAlignment="Center">
                         <TextBlock Margin="0,8,0,0" FontSize="23" FontWeight="SemiBold" HorizontalAlignment="Center"
                                    ui:Translator.Key="RECENT_FILES" />
                         <TextBlock Margin="0,12.5,0,0" Foreground="LightGray" HorizontalAlignment="Center"
@@ -306,37 +290,37 @@
                                 CommandParameter="https://pixieditor.net"
                                 ui:Translator.TooltipKey="WEBSITE"
                                 Classes="SocialMediaButton" Tag="#e3002d"
-                                Content="/Images/SocialMedia/WebsiteIcon.png" />
+                                Content="{DynamicResource icon-globe}" />
                         <Button Command="{xaml:Command PixiEditor.Links.OpenHyperlink, UseProvided=True}"
                                 CommandParameter="https://discord.gg/tzkQFDkqQS"
                                 Classes="SocialMediaButton" Tag="#5865F2" ui:Translator.TooltipKey="DISCORD"
-                                Content="/Images/SocialMedia/DiscordIcon.png" />
+                                Content="{DynamicResource icon-discord}" />
                         <Button Command="{xaml:Command PixiEditor.Links.OpenHyperlink, UseProvided=True}"
                                 CommandParameter="https://reddit.com/r/PixiEditor"
                                 Classes="SocialMediaButton" Tag="#FF4500" ui:Translator.TooltipKey="REDDIT"
-                                Content="/Images/SocialMedia/RedditIcon.png" />
+                                Content="{DynamicResource icon-reddit}" />
                         <Button Command="{xaml:Command PixiEditor.Links.OpenHyperlink, UseProvided=True}"
                                 CommandParameter="https://store.steampowered.com/app/2218560"
                                 Classes="SocialMediaButton" Tag="#00adee" ui:Translator.TooltipKey="STEAM"
-                                Content="/Images/SocialMedia/SteamIcon.png" />
+                                Content="{DynamicResource icon-steam}" />
                         <Button Command="{xaml:Command PixiEditor.Links.OpenHyperlink, UseProvided=True}"
                                 CommandParameter="https://github.com/PixiEditor/PixiEditor"
                                 Classes="SocialMediaButton" Tag="Black" ui:Translator.TooltipKey="GITHUB"
-                                Content="/Images/SocialMedia/GitHubIcon.png" />
+                                Content="{DynamicResource icon-github}" />
                         <Button Command="{xaml:Command PixiEditor.Links.OpenHyperlink, UseProvided=True}"
                                 CommandParameter="https://www.youtube.com/channel/UCT5XvyvX1q5PAIaXfWmpsMQ"
                                 Classes="SocialMediaButton" Tag="#FF0000" ui:Translator.TooltipKey="YOUTUBE"
-                                Content="/Images/SocialMedia/YouTubeIcon.png" />
+                                Content="{DynamicResource icon-youtube-filled}" />
                         <Button Command="{xaml:Command PixiEditor.Links.OpenHyperlink, UseProvided=True}"
                                 IsVisible="{Binding ShowDonateButton}"
                                 CommandParameter="https://opencollective.com/pixieditor"
                                 Classes="SocialMediaButton" Tag="#d4af37" ui:Translator.TooltipKey="DONATE"
-                                Content="/Images/SocialMedia/DonateIcon.png" />
+                                Content="{DynamicResource icon-heart-handshake}" />
                         <Button Command="{xaml:Command PixiEditor.Links.OpenHyperlink, UseProvided=True}"
                                 IsVisible="{Binding !ShowDonateButton}"
                                 CommandParameter="https://store.steampowered.com/app/2435860/PixiEditor__Supporter_Pack/"
                                 Classes="SocialMediaButton" Tag="#d4af37" ui:Translator.TooltipKey="BUY_SUPPORTER_PACK"
-                                Content="/Images/SocialMedia/DonateIcon.png" />
+                                Content="{DynamicResource icon-heart-handshake}" />
                     </panels:AlignableWrapPanel>
                 </Grid>
             </ScrollViewer>
@@ -350,10 +334,10 @@
                             CommandParameter="{x:False}"
                             Content="Go back" HorizontalContentAlignment="Left" />
 
-                    <TextBlock ui:Translator.Key="BETA_EXAMPLE_FILES" Margin="0,-9,0,5" HorizontalAlignment="Center"
+                    <TextBlock ui:Translator.Key="EXAMPLE_FILES" Margin="0,-9,0,5" HorizontalAlignment="Center"
                                TextAlignment="Center" FontSize="22" FontWeight="Bold" />
 
-                    <TextBlock ui:Translator.Key="BETA_PROCEDURAL_GENERATION" Margin="0,2" HorizontalAlignment="Center"
+                    <TextBlock ui:Translator.Key="PROCEDURAL_GENERATION" Margin="0,2" HorizontalAlignment="Center"
                                TextAlignment="Center" FontSize="18" FontWeight="SemiBold" />
 
                     <ScrollViewer HorizontalAlignment="Center" VerticalScrollBarVisibility="Auto">