feature: search in ranking page

Pixiview/Illust/IllustCollectionPage.cs

@@ -1,6 +1,5 @@
 using System;
 using System.Collections.Generic;
-using System.Collections.ObjectModel;
 using System.Linq;
 using System.Threading.Tasks;
 using System.Windows.Input;
@@ -17,6 +16,7 @@ namespace Pixiview.Illust
     public interface IIllustCollectionPage
     {
         List<IllustItem> Favorites { get; }
+        IllustCollection IllustCollection { get; set; }
     }
 
     public abstract class IllustDataCollectionPage : IllustCollectionPage<IllustData> { }
@@ -61,6 +61,7 @@ namespace Pixiview.Illust
         }
 
         public List<IllustItem> Favorites { get; } = new List<IllustItem>();
+        public IllustCollection IllustCollection { get; set; }
 
         protected virtual bool IsFavoriteVisible => true;
 
@@ -122,14 +123,7 @@ namespace Pixiview.Illust
                     columns = 2;
                     break;
                 case Orientation.PortraitUpsideDown:
-                    if (DeviceInfo.Idiom == DeviceIdiom.Phone)
+                    columns = isPhone ? 4 : 2;
-                    {
-                        columns = 4;
-                    }
-                    else
-                    {
-                        columns = 2;
-                    }
                     break;
                 case Orientation.Unknown:
                 case Orientation.LandscapeLeft:
@@ -323,6 +317,7 @@ namespace Pixiview.Illust
                     item.IsFavorite = Favorites.Any(i => i.Id == item.Id);
                 }
             }
+            IllustCollection = collection;
             Illusts = collection;
             Loading = false;
 
@@ -361,7 +356,7 @@ namespace Pixiview.Illust
         #endregion
     }
 
-    public class IllustCollection : ObservableCollection<IllustItem>
+    public class IllustCollection : List<IllustItem>
     {
         private static readonly object sync = new object();
         private static IllustCollection empty;

Pixiview/Illust/RankingPage.xaml

@@ -3,19 +3,28 @@
                             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                             xmlns:i="clr-namespace:Pixiview.Illust"
                             xmlns:u="clr-namespace:Pixiview.UI"
+                            xmlns:r="clr-namespace:Pixiview.Resources"
                             x:Class="Pixiview.Illust.RankingPage"
                             BackgroundColor="{DynamicResource WindowColor}">
     <ContentPage.ToolbarItems>
         <ToolbarItem Order="Primary" Clicked="Refresh_Clicked"
                      IconImageSource="{DynamicResource FontIconRefresh}"/>
     </ContentPage.ToolbarItems>
-    <Grid>
+    <Grid Padding="{Binding PageTopMargin}">
         <ScrollView HorizontalOptions="Fill">
             <u:FlowLayout ItemsSource="{Binding Illusts}"
                           HorizontalOptions="Fill" Column="{Binding Columns}"
-                          Margin="16" RowSpacing="16" ColumnSpacing="16"
+                          Margin="16, 10, 16, 16" RowSpacing="16" ColumnSpacing="16"
                           ItemTemplate="{StaticResource cardView}"/>
         </ScrollView>
+        <SearchBar Placeholder="{r:Text Search}" VerticalOptions="Start"
+                   Margin="0, -46, 0, 0" HeightRequest="50"
+                   BackgroundColor="{DynamicResource WindowColor}"
+                   CancelButtonColor="{DynamicResource SubTextColor}"
+                   Text="{Binding Keywords, Mode=TwoWay}"
+                   SearchButtonPressed="SearchBar_SearchButtonPressed"
+                   Unfocused="SearchBar_Unfocused"
+                   />
         <Frame HasShadow="False" Margin="0" Padding="20" CornerRadius="8"
                IsVisible="{Binding Loading}"
                HorizontalOptions="Center" VerticalOptions="Center"

Pixiview/Illust/RankingPage.xaml.cs

@@ -2,6 +2,7 @@
 using System.Collections.Generic;
 using System.Linq;
 using System.Windows.Input;
+using Pixiview.UI;
 using Pixiview.Utils;
 using Xamarin.Forms;
 
@@ -9,8 +10,23 @@ namespace Pixiview.Illust
 {
     public partial class RankingPage : IllustDataCollectionPage
     {
+        public static readonly BindableProperty KeywordsProperty = BindableProperty.Create(
+            nameof(Keywords), typeof(string), typeof(RankingPage));
+
+        public string Keywords
+        {
+            get => (string)GetValue(KeywordsProperty);
+            set => SetValue(KeywordsProperty, value);
+        }
+
+        private readonly Thickness totalBarOffset;
+        private readonly Thickness navigationBarOffset;
+
         public RankingPage()
         {
+            totalBarOffset = new Thickness(0, AppShell.TotalBarOffset.Top + 50, 0, 0);
+            navigationBarOffset = new Thickness(0, AppShell.NavigationBarOffset.Top + 50, 0, 0);
+
             Resources.Add("cardView", GetCardViewTemplate());
             InitializeComponent();
         }
@@ -26,6 +42,34 @@ namespace Pixiview.Illust
             loaded = false;
         }
 
+        public override void OnOrientationChanged(Orientation orientation)
+        {
+            int columns;
+            switch (orientation)
+            {
+                case Orientation.Portrait:
+                    columns = 2;
+                    PageTopMargin = totalBarOffset;
+                    break;
+                case Orientation.PortraitUpsideDown:
+                    columns = isPhone ? 4 : 2;
+                    PageTopMargin = isPhone ? navigationBarOffset : totalBarOffset;
+                    break;
+                case Orientation.Unknown:
+                case Orientation.LandscapeLeft:
+                case Orientation.LandscapeRight:
+                default:
+                    columns = 4;
+                    PageTopMargin = navigationBarOffset;
+                    break;
+            }
+            if (Columns != columns)
+            {
+                App.DebugPrint($"ranking page, change columns to {columns}");
+                Columns = columns;
+            }
+        }
+
         protected override IEnumerable<IllustItem> DoGetIllustList(IllustData data, ICommand command)
         {
             return data.body.page.ranking.items.Select(i =>
@@ -62,5 +106,34 @@ namespace Pixiview.Illust
             }
             StartLoad(true);
         }
+
+        private void SearchBar_SearchButtonPressed(object sender, EventArgs e)
+        {
+            var key = Keywords;
+            if (key != null)
+            {
+                key = key.Trim().ToLower();
+            }
+
+            if (string.IsNullOrEmpty(key))
+            {
+                Illusts = IllustCollection;
+            }
+            else
+            {
+                var list = IllustCollection.Where(i =>
+                    (i.UserName != null && i.UserName.ToLower().Contains(key)) ||
+                    (i.Title != null && i.Title.ToLower().Contains(key)));
+                Illusts = new IllustCollection(list);
+            }
+        }
+
+        private void SearchBar_Unfocused(object sender, FocusEventArgs e)
+        {
+            if (!e.IsFocused)
+            {
+                SearchBar_SearchButtonPressed(sender, e);
+            }
+        }
     }
 }

Pixiview/Illust/ViewIllustPage.xaml.cs

@@ -23,8 +23,6 @@ namespace Pixiview.Illust
             nameof(IsPageVisible), typeof(bool), typeof(ViewIllustPage));
         public static readonly BindableProperty IllustItemProperty = BindableProperty.Create(
             nameof(IllustItem), typeof(IllustItem), typeof(ViewIllustPage));
-        public static readonly BindableProperty PageTopMarginProperty = BindableProperty.Create(
-            nameof(PageTopMargin), typeof(Thickness), typeof(ViewIllustPage));
 
         public ImageSource IsFavorite => (ImageSource)GetValue(IsFavoriteProperty);
 
@@ -48,11 +46,6 @@ namespace Pixiview.Illust
             get => (IllustItem)GetValue(IllustItemProperty);
             set => SetValue(IllustItemProperty, value);
         }
-        public Thickness PageTopMargin
-        {
-            get => (Thickness)GetValue(PageTopMarginProperty);
-            private set => SetValue(PageTopMarginProperty, value);
-        }
 
         public int CurrentPage { get; private set; }
 
@@ -119,32 +112,6 @@ namespace Pixiview.Illust
             Task.Run(DoLoadImages);
         }
 
-        public override void OnOrientationChanged(Orientation orientation)
-        {
-            switch (orientation)
-            {
-                case Orientation.Portrait:
-                    PageTopMargin = AppShell.TotalBarOffset;
-                    break;
-                case Orientation.PortraitUpsideDown:
-                    if (DeviceInfo.Idiom == DeviceIdiom.Phone)
-                    {
-                        PageTopMargin = AppShell.NavigationBarOffset;
-                    }
-                    else
-                    {
-                        PageTopMargin = AppShell.TotalBarOffset;
-                    }
-                    break;
-                case Orientation.Unknown:
-                case Orientation.LandscapeLeft:
-                case Orientation.LandscapeRight:
-                default:
-                    PageTopMargin = AppShell.NavigationBarOffset;
-                    break;
-            }
-        }
-
         protected override void OnAppearing()
         {
             base.OnAppearing();

Pixiview/Resources/Languages/zh-CN.xml

@@ -7,6 +7,7 @@
     <Recommends>推荐</Recommends>
     <ByUser>按用户</ByUser>
     <Ranking>排行榜</Ranking>
+    <Search>搜索</Search>
     <Favorites>收藏夹</Favorites>
     <Option>选项</Option>
     <Preview>预览</Preview>

Pixiview/UI/AdaptedPage.cs

@@ -1,18 +1,29 @@
 using System;
 using Pixiview.UI.Theme;
 using Pixiview.Utils;
+using Xamarin.Essentials;
 using Xamarin.Forms;
 
 namespace Pixiview.UI
 {
     public class AdaptedPage : ContentPage
     {
+        public static readonly BindableProperty PageTopMarginProperty = BindableProperty.Create(
+            nameof(PageTopMargin), typeof(Thickness), typeof(AdaptedPage));
+
+        public Thickness PageTopMargin
+        {
+            get => (Thickness)GetValue(PageTopMarginProperty);
+            protected set => SetValue(PageTopMarginProperty, value);
+        }
         public Orientation CurrentOrientation { get; private set; }
 
         public event EventHandler Load;
         public event EventHandler Unload;
         public event EventHandler<OrientationEventArgs> OrientationChanged;
 
+        protected readonly bool isPhone = DeviceInfo.Idiom == DeviceIdiom.Phone;
+
         public AdaptedPage()
         {
             SetDynamicResource(Screen.StatusBarStyleProperty, ThemeBase.StatusBarStyle);
@@ -31,6 +42,21 @@ namespace Pixiview.UI
 
         public virtual void OnOrientationChanged(Orientation orientation)
         {
+            switch (orientation)
+            {
+                case Orientation.Portrait:
+                    PageTopMargin = AppShell.TotalBarOffset;
+                    break;
+                case Orientation.PortraitUpsideDown:
+                    PageTopMargin = isPhone ? AppShell.NavigationBarOffset : AppShell.TotalBarOffset;
+                    break;
+                case Orientation.Unknown:
+                case Orientation.LandscapeLeft:
+                case Orientation.LandscapeRight:
+                default:
+                    PageTopMargin = AppShell.NavigationBarOffset;
+                    break;
+            }
             OrientationChanged?.Invoke(this, new OrientationEventArgs { CurrentOrientation = orientation });
         }
 

Pixiview/UI/Theme/DarkTheme.cs

@@ -31,7 +31,7 @@ namespace Pixiview.UI.Theme
             Add(WindowColor, Color.Black);
             Add(TextColor, Color.White);
             Add(SubTextColor, Color.LightGray);
-            Add(MainColor, Color.FromRgb(0x33, 0x33, 0x33));
+            Add(MainColor, Color.FromRgb(0x11, 0x11, 0x11));
             Add(MainTextColor, Color.White);
             Add(SubColor, Color.FromRgb(0x33, 0x33, 0x33));
             Add(MaskColor, Color.FromRgba(0xff, 0xff, 0xff, 0x50));