AlignableWrapPanel and NewsItem

src/PixiEditor.Avalonia/PixiEditor.Avalonia/PixiEditor.Avalonia.csproj

@@ -55,4 +55,5 @@
     <ItemGroup>
       <Folder Include="Views\Buttons\" />
     </ItemGroup>
+  
 </Project>

src/PixiEditor.Avalonia/PixiEditor.Avalonia/Styles/PixiEditor.Controls.axaml

@@ -5,6 +5,7 @@
         <ResourceDictionary>
             <ResourceDictionary.MergedDictionaries>
                 <MergeResourceInclude Source="avares://PixiEditor.Avalonia/Styles/CommandsMenu.axaml"/>
+                <MergeResourceInclude Source="avares://PixiEditor.Avalonia/Styles/PortingWipStyles.axaml"/>
             </ResourceDictionary.MergedDictionaries>
         </ResourceDictionary>
     </Styles.Resources>

src/PixiEditor.Avalonia/PixiEditor.Avalonia/Styles/PortingWipStyles.axaml

@@ -0,0 +1,12 @@
+<Styles xmlns="https://github.com/avaloniaui"
+        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <Design.PreviewWith>
+        <Border Padding="20">
+            <!-- Add Controls for Previewer Here -->
+        </Border>
+    </Design.PreviewWith>
+
+    <Style Selector="Button.SocialMediaButton">
+
+    </Style>
+</Styles>

src/PixiEditor.Avalonia/PixiEditor.Avalonia/Views/NewsFeed/NewsItem.axaml

@@ -0,0 +1,53 @@
+<UserControl x:Class="PixiEditor.Views.UserControls.NewsFeed.NewsItem"
+             x:ClassModifier="internal"
+             xmlns="https://github.com/avaloniaui"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+             xmlns:local="clr-namespace:PixiEditor.Views.UserControls.NewsFeed"
+             xmlns:xaml="clr-namespace:PixiEditor.Models.Commands.XAML"
+             xmlns:converters="clr-namespace:PixiEditor.Helpers.Converters"
+             xmlns:b="http://schemas.microsoft.com/xaml/behaviors"
+             xmlns:gl="clr-namespace:System.Globalization;assembly=System.Runtime"
+             xmlns:helpers="clr-namespace:PixiEditor.Avalonia.Helpers"
+             mc:Ignorable="d" Name="newsItem"
+             d:DesignHeight="300" d:DesignWidth="300">
+    <Border Background="{StaticResource MainColor}" CornerRadius="5">
+        <StackPanel Orientation="Vertical">
+            <Grid>
+                <Border Background="White" Name="Mask" CornerRadius="8 8 0 0"/>
+                <StackPanel>
+                    <Image Cursor="Hand" Margin="-1" Source="{Binding ElementName=newsItem, Path=News.CoverImageUrl}"
+                           PointerPressed="CoverImageClicked" Name="coverImage"/>
+                    <StackPanel.OpacityMask>
+                        <VisualBrush Visual="{Binding ElementName=Mask}" />
+                    </StackPanel.OpacityMask>
+                </StackPanel>
+            </Grid>
+            <StackPanel Margin="8 0" Orientation="Horizontal">
+                <Image Margin="0 0 5 0" Width="25"
+                       Source="{Binding ElementName=newsItem, Path=News.ResolvedIconUrl}"/>
+                <Label VerticalAlignment="Center" Foreground="White" FontSize="14" HorizontalAlignment="Center">
+                    <StackPanel Orientation="Horizontal">
+                        <TextBlock Width="200" TextTrimming="CharacterEllipsis" MaxHeight="50"
+                                   helpers:Hyperlink.Url="{Binding ElementName=newsItem, Path=News.Url}"
+                                   ToolTip.Tip="{Binding ElementName=newsItem, Path=News.Title}"
+                                   TextWrapping="Wrap"
+                                   Text="{Binding ElementName=newsItem, Path=News.Title}"/>
+                        <TextBlock Text="" FontFamily="{StaticResource Feather}"/>
+                    </StackPanel>
+                </Label>
+            </StackPanel>
+            <Grid>
+                <Border IsVisible="{Binding ElementName=newsItem, Path=News.IsNew}"
+                        Margin="2.5 2.5" Background="{StaticResource AccentRed}" HorizontalAlignment="Left"
+                        Padding="5 2.5" CornerRadius="5">
+                    <TextBlock Text="New!" Foreground="White" FontSize="12" FontStyle="Italic"/>
+                </Border>
+                <TextBlock Margin="8 5" HorizontalAlignment="Right" FontSize="12" Foreground="LightGray"
+                           Text="{Binding ElementName=newsItem, Path=News.Date, StringFormat=d}"/>
+                <!--TODO: Converter culture was in above date-->
+            </Grid>
+        </StackPanel>
+    </Border>
+</UserControl>

src/PixiEditor.Avalonia/PixiEditor.Avalonia/Views/NewsFeed/NewsItem.axaml.cs

@@ -0,0 +1,31 @@
+using Avalonia;
+using Avalonia.Controls;
+using Avalonia.Input;
+using PixiEditor.Models.Services.NewsFeed;
+using PixiEditor.OperatingSystem;
+
+namespace PixiEditor.Views.UserControls.NewsFeed;
+
+internal partial class NewsItem : UserControl
+{
+    public static readonly StyledProperty<News> NewsProperty =
+        AvaloniaProperty.Register<NewsItem, News>(
+        nameof(News));
+
+    public News News
+    {
+        get { return (News)GetValue(NewsProperty); }
+        set { SetValue(NewsProperty, value); }
+    }
+    
+    public NewsItem()
+    {
+        InitializeComponent();
+    }
+
+    private void CoverImageClicked(object sender, PointerPressedEventArgs e)
+    {
+        IOperatingSystem.Current.OpenHyperlink(News.Url);
+    }
+}
+

src/PixiEditor.Avalonia/PixiEditor.Avalonia/Views/Panels/AlignableWrapPanel.cs

@@ -22,11 +22,11 @@ internal class AlignableWrapPanel : Panel
         Size curLineSize = default;
         Size panelSize = default;
 
-        UIElementCollection children = InternalChildren;
+        Controls children = Children;
 
         for (int i = 0; i < children.Count; i++)
         {
-            UIElement child = children[i];
+            Control child = children[i];
 
             // Flow passes its own constraint to children
             child.Measure(constraint);
@@ -34,26 +34,27 @@ internal class AlignableWrapPanel : Panel
 
             if (curLineSize.Width + sz.Width > constraint.Width)
             {
-                panelSize.Width = Math.Max(curLineSize.Width, panelSize.Width);
-                panelSize.Height += curLineSize.Height;
+                panelSize = panelSize.WithWidth(Math.Max(curLineSize.Width, panelSize.Width))
+                .WithHeight(panelSize.Height + curLineSize.Height);
                 curLineSize = sz;
 
                 if (sz.Width > constraint.Width)
                 {
-                    panelSize.Width = Math.Max(sz.Width, panelSize.Width);
-                    panelSize.Height += sz.Height;
+                    panelSize = panelSize
+                        .WithWidth(Math.Max(sz.Width, panelSize.Width))
+                        .WithHeight(panelSize.Height + sz.Height);
                     curLineSize = default;
                 }
             }
             else
             {
-                curLineSize.Width += sz.Width;
-                curLineSize.Height = Math.Max(sz.Height, curLineSize.Height);
+                curLineSize = panelSize.WithWidth(panelSize.Width + sz.Width)
+                .WithHeight(Math.Max(sz.Height, curLineSize.Height));
             }
         }
 
-        panelSize.Width = Math.Max(curLineSize.Width, panelSize.Width);
-        panelSize.Height += curLineSize.Height;
+        panelSize = panelSize.WithWidth(Math.Max(curLineSize.Width, panelSize.Width))
+            .WithHeight(panelSize.Height + curLineSize.Height);
 
         return panelSize;
     }
@@ -63,7 +64,7 @@ internal class AlignableWrapPanel : Panel
         int firstInLine = 0;
         Size curLineSize = default;
         double accumulatedHeight = 0;
-        UIElementCollection children = this.InternalChildren;
+        Controls children = this.Children;
 
         for (int i = 0; i < children.Count; i++)
         {
@@ -87,8 +88,8 @@ internal class AlignableWrapPanel : Panel
             }
             else
             {
-                curLineSize.Width += sz.Width;
-                curLineSize.Height = Math.Max(sz.Height, curLineSize.Height);
+                curLineSize = curLineSize.WithWidth(curLineSize.Width + sz.Width)
+                    .WithHeight(Math.Max(sz.Height, curLineSize.Height));
             }
         }
 
@@ -112,10 +113,10 @@ internal class AlignableWrapPanel : Panel
             x = boundsWidth - lineSize.Width;
         }
 
-        UIElementCollection children = InternalChildren;
+        Controls children = Children;
         for (int i = start; i < end; i++)
         {
-            UIElement child = children[i];
+            Control child = children[i];
             child.Arrange(new Rect(x, y, child.DesiredSize.Width, lineSize.Height));
             x += child.DesiredSize.Width;
         }

src/PixiEditor.Avalonia/PixiEditor.Avalonia/Views/Windows/HelloTherePopup.axaml

@@ -104,7 +104,7 @@
                                ui:Translator.Key="RECENT_EMPTY_TEXT">
                         <TextBlock.IsVisible>
                             <Binding Path="RecentlyOpened.Count"
-                                     Converter="{converters:EqualityBoolToVisibilityConverter}">
+                                     Converter="{converters:EqualityBoolToIsVisibleConverter}">
                                 <Binding.ConverterParameter>
                                     <system:Int32/>
                                 </Binding.ConverterParameter>
@@ -215,22 +215,17 @@
                                                         <TextBlock x:Name="extension" VerticalAlignment="Top" Text="{Binding FileExtension}" FontSize="15" TextAlignment="Center"/>
                                                         <StackPanel Orientation="Horizontal" VerticalAlignment="Bottom" HorizontalAlignment="Center">
                                                             <StackPanel.Resources>
-                                                                <Style TargetType="Button" BasedOn="{StaticResource BaseDarkButton}">
+                                                                <Style Selector="Button">
                                                                     <Setter Property="Margin" Value="0,0,0,5"/>
                                                                     <Setter Property="Width" Value="25"/>
                                                                     <Setter Property="Height" Value="25"/>
                                                                     <Setter Property="MinWidth" Value="25"/>
                                                                     <Setter Property="MinHeight" Value="25"/>
-                                                                    
-                                                                    <Style.Triggers>
-                                                                        <Trigger Property="IsMouseOver" Value="False">
-                                                                            <Setter Property="Background" Value="Transparent"/>
-                                                                        </Trigger>
-                                                                        <Trigger Property="IsMouseOver" Value="True">
-                                                                            <Setter Property="Background" Value="#70FFFFFF"/>
-                                                                        </Trigger>
-                                                                    </Style.Triggers>
-                                                                </Style>
+                                                                    <Setter Property="Background" Value="Transparent"/>
+                                                                    </Style>
+                                                                  <Style Selector="Button:hover">
+                                                                      <Setter Property="Background" Value="#70FFFFFF"/>
+                                                                  </Style>
                                                             </StackPanel.Resources>
                                                             <Button Command="{Binding DataContext.OpenInExplorerCommand, RelativeSource={RelativeSource AncestorType=uc:AlignableWrapPanel}}"
                                                                     CommandParameter="{Binding FilePath}"
@@ -267,49 +262,47 @@
 
                 <uc:AlignableWrapPanel Grid.Row="3" HorizontalContentAlignment="Center" HorizontalAlignment="Center" Margin="0,5,0,15">
                     <Button Command="{cmds:Command PixiEditor.Links.OpenHyperlink, UseProvided=True}" CommandParameter="https://pixieditor.net"
-                            ui:Translator.ToolTip.TipKey="WEBSITE"
-                            Style="{StaticResource SocialMediaButton}" Tag="#e3002d"
+                            ui:Translator.TooltipKey="WEBSITE"
+                            Classes="SocialMediaButton" Tag="#e3002d"
                             Content="/Images/SocialMedia/WebsiteIcon.png"/>
                     <Button Command="{cmds:Command PixiEditor.Links.OpenHyperlink, UseProvided=True}" CommandParameter="https://discord.gg/tzkQFDkqQS"
-                            Style="{StaticResource SocialMediaButton}" Tag="#5865F2" ui:Translator.ToolTip.TipKey="DISCORD"
+                            Classes="SocialMediaButton" Tag="#5865F2" ui:Translator.TooltipKey="DISCORD"
                             Content="/Images/SocialMedia/DiscordIcon.png"/>
                     <Button Command="{cmds:Command PixiEditor.Links.OpenHyperlink, UseProvided=True}" CommandParameter="https://reddit.com/r/PixiEditor"
-                            Style="{StaticResource SocialMediaButton}" Tag="#FF4500" ui:Translator.ToolTip.TipKey="REDDIT"
+                            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"
-                            Style="{StaticResource SocialMediaButton}" Tag="#00adee" ui:Translator.ToolTip.TipKey="STEAM"
+                            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"
-                            Style="{StaticResource SocialMediaButton}" Tag="Black" ui:Translator.ToolTip.TipKey="GITHUB"
+                            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"
-                            Style="{StaticResource SocialMediaButton}" Tag="#FF0000" ui:Translator.ToolTip.TipKey="YOUTUBE"
+                            Classes="SocialMediaButton" Tag="#FF0000" ui:Translator.TooltipKey="YOUTUBE"
                             Content="/Images/SocialMedia/YouTubeIcon.png"/>
                     <Button Command="{cmds:Command PixiEditor.Links.OpenHyperlink, UseProvided=True}"
-                            Visibility="{Binding ShowDonateButton,
-                            Converter={BoolToVisibilityConverter}}"
+                            IsVisible="{Binding ShowDonateButton}"
                             CommandParameter="https://opencollective.com/pixieditor"
-                            Style="{StaticResource SocialMediaButton}" Tag="#d4af37" ui:Translator.ToolTip.TipKey="DONATE"
+                            Classes="SocialMediaButton" Tag="#d4af37" ui:Translator.TooltipKey="DONATE"
                             Content="/Images/SocialMedia/DonateIcon.png"/>
                     <Button Command="{cmds:Command PixiEditor.Links.OpenHyperlink, UseProvided=True}"
-                            Visibility="{Binding ShowDonateButton,
-                            Converter={InverseBoolToVisibilityConverter}}"
+                            IsVisible="{Binding !ShowDonateButton}"
                             CommandParameter="https://store.steampowered.com/app/2435860/PixiEditor__Supporter_Pack/"
-                            Style="{StaticResource SocialMediaButton}" Tag="#d4af37" ui:Translator.ToolTip.TipKey="BUY_SUPPORTER_PACK"
+                            Classes="SocialMediaButton" Tag="#d4af37" ui:Translator.TooltipKey="BUY_SUPPORTER_PACK"
                             Content="/Images/SocialMedia/DonateIcon.png"/>
                 </uc:AlignableWrapPanel>
             </Grid>
         </ScrollViewer>
 
         <ScrollViewer Grid.Row="1" Grid.Column="1"
-                      Visibility="{Binding NewsPanelCollapsed, Converter={converters:InverseBoolToVisibilityConverter}}">
+                      IsVisible="{Binding !NewsPanelCollapsed}">
             <Border Padding="5" BorderThickness="3 0 0 0" BorderBrush="{StaticResource MainColor}">
                 <Grid>
                     <indicators:LoadingIndicator IsVisible="{Binding IsFetchingNews}"/>
                     <TextBlock ui:Translator.Key="FAILED_FETCH_NEWS" Foreground="White" FontSize="20"
                                VerticalAlignment="Center" TextAlignment="Center"
-                               Visibility="{Binding Path=FailedFetchingNews, Converter={converters:BoolToVisibilityConverter}}"/>
-                    <StackPanel Orientation="Vertical" Visibility="{Binding IsFetchingNews, Converter={converters:InverseBoolToVisibilityConverter}}">
+                               IsVisible="{Binding Path=FailedFetchingNews}"/>
+                    <StackPanel Orientation="Vertical" IsVisible="{Binding !IsFetchingNews}">
                         <TextBlock HorizontalAlignment="Center" ui:Translator.Key="NEWS" FontSize="18"/>
                         <ItemsControl ItemsSource="{Binding Path=News}">
                             <ItemsControl.ItemTemplate>