feat: display source image (#261)

* UI - Article Preview | display the logo of the source if available

* UI - Article Page | Add source image or badge as title

closes #249

Author: bricefriha

App/Controls/ArticlePreview.xaml

@@ -89,13 +89,23 @@
                         HeightRequest="25"
                         Padding="4,0"
                         BackgroundColor="{Binding Article.Source.PrimaryColour, Mode=OneWay, Source={x:Reference preview}}">
-                    <Label FontSize="13"
+                    <Grid>
+                        <Label FontSize="13"
                            HorizontalOptions="Center"
                            VerticalOptions="Center"
                            Text="{Binding Article.Source.Name, Mode=OneWay, Source={x:Reference preview}}"
                            FontFamily="P-Bold"
+                           IsVisible="{Binding Article.Source.Logo, Converter={StaticResource NullOrEmptyStringConverter}, Source={x:Reference preview}}"
                            TextColor="{Binding Article.Source.SecondaryColour, Mode=OneWay, Source={x:Reference preview}}"
-                           />
+                           
+                           >
+                        </Label>
+                        <Image HorizontalOptions="Fill"
+                               MaximumWidthRequest="90"
+                               MaximumHeightRequest="25"
+                               Source="{Binding Article.Source.Logo, Source={x:Reference preview}}"/>
+
+                    </Grid>
                 </Border>
 
                  <!-- Share and save-->

App/Helpers/Converters/NullOrEmptyStringConverter.cs

@@ -0,0 +1,20 @@
+using System.Globalization;
+
+namespace GamHubApp.Helpers;
+
+class NullOrEmptyStringConverter : IValueConverter
+{
+    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
+    {
+        if (value is string val)
+        {
+            return string.IsNullOrEmpty(val);
+        }
+        return true;
+    }
+
+    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
+    {
+        throw new NotImplementedException();
+    }
+}

App/Models/Source.cs

@@ -21,6 +21,8 @@ public class Source
     public string SecondaryColour { get; set; }
     [JsonProperty("domain")]
     public string Domain { get; set; }
+    [JsonProperty("logo")]
+    public string Logo { get; set; }
     [JsonProperty("isActive")]
     public bool IsActive { get; set; }
     [OneToMany(CascadeOperations = CascadeOperation.All)]

App/Resources/Styles/Styles.xaml

@@ -19,6 +19,7 @@
     <helpers:ZeroToFalseConverter x:Key="ZeroToFalseConverter"/>
     <helpers:ZeroToTrueConverter x:Key="ZeroToTrueConverter"/>
     <helpers:NotNullOrEmptyStringConverter x:Key="NotNullOrEmptyStringConverter"/>
+    <helpers:NullOrEmptyStringConverter x:Key="NullOrEmptyStringConverter"/>
 
     <ResourceDictionary>
         <OnPlatform x:Key="TitleRightMargin" x:TypeArguments="x:Double">

App/Views/ArticlePage.xaml

@@ -16,14 +16,32 @@
     <Shell.TitleView>
         <ContentView Margin="0,0,0,0" >
             <Grid ColumnDefinitions="4*,*">
-                
-                <Label Text="{Binding SelectedArticle.Source.Name}"
-                       VerticalOptions="Center"
-                       HorizontalOptions="Center"
-                       FontSize="20"
-                       TextColor="{StaticResource FontColor}"
-                       FontFamily="P-Bold"
-                       Grid.Column="0" />
+
+                <Border Grid.Column="0"
+                        Grid.Row="0"
+                        HorizontalOptions="Center"
+                        VerticalOptions="Center"
+                        StrokeShape="RoundRectangle 8"
+                        HeightRequest="35"
+                        Padding="4,0"
+                        BackgroundColor="{Binding SelectedArticle.Source.PrimaryColour, Mode=OneWay}">
+                    <Grid>
+                        <Label FontSize="13"
+                            HorizontalOptions="Center"
+                            VerticalOptions="Center"
+                            Text="{Binding SelectedArticle.Source.Name, Mode=OneWay}"
+                            FontFamily="P-Bold"
+                            IsVisible="{Binding SelectedArticle.Source.Logo, Converter={StaticResource NullOrEmptyStringConverter}}"
+                            TextColor="{Binding SelectedArticle.Source.SecondaryColour, Mode=OneWay}"
+                            >
+                        </Label>
+                        <Image HorizontalOptions="Fill"
+                               MaximumWidthRequest="120"
+                               MaximumHeightRequest="35"
+                               Source="{Binding SelectedArticle.Source.Logo}"/>
+
+                    </Grid>
+                </Border>
 
 
                 <!-- Sub Menu button -->