UI adjustment

This commit is contained in:
2020-05-09 08:38:31 +08:00
parent 33cac052f6
commit 8c9f79f06d
19 changed files with 492 additions and 314 deletions

View File

@@ -15,7 +15,7 @@
ItemTemplate="{StaticResource cardView}"/>
</ScrollView>
<Frame HasShadow="False" Margin="0" Padding="20" CornerRadius="8"
IsVisible="{Binding Loading}"
IsVisible="{Binding IsLoading}"
HorizontalOptions="Center" VerticalOptions="Center"
BackgroundColor="{DynamicResource MaskColor}">
<ActivityIndicator IsRunning="True" IsVisible="True"

View File

@@ -13,14 +13,17 @@ using Xamarin.Forms;
namespace Pixiview.Illust
{
public abstract class FavoriteIllustCollectionPage : IllustCollectionPage<IllustItem[]>
{
public override void OnUnload() { }
}
public abstract class IllustDataCollectionPage : IllustCollectionPage<IllustData> { }
public abstract class IllustUserDataCollectionPage : IllustCollectionPage<IllustUserData> { }
public interface IIllustCollectionPage
{
IllustCollection IllustCollection { get; set; }
}
public abstract class IllustDataCollectionPage : IllustCollectionPage<IllustData> { }
public abstract class FavoriteIllustCollectionPage : IllustCollectionPage<IllustItem[]> { }
public abstract class IllustCollectionPage<T> : AdaptedPage, IIllustCollectionPage
{
#region - Properties -
@@ -29,19 +32,8 @@ namespace Pixiview.Illust
nameof(Illusts), typeof(IllustCollection), typeof(IllustCollectionPage<T>));
public static readonly BindableProperty ColumnsProperty = BindableProperty.Create(
nameof(Columns), typeof(int), typeof(IllustCollectionPage<T>), 2);
public static readonly BindableProperty LoadingProperty = BindableProperty.Create(
nameof(Loading), typeof(bool), typeof(IllustCollectionPage<T>), propertyChanged: OnLoadingPropertyChanged);
private static void OnLoadingPropertyChanged(BindableObject obj, object oldValue, object newValue)
{
var page = (IllustCollectionPage<T>)obj;
var now = (bool)newValue;
if (!page.loaded && now && Stores.NetworkAvailable)
{
page.loaded = true;
Task.Run(() => page.DoLoadIllusts());
}
}
public static readonly BindableProperty IsLoadingProperty = BindableProperty.Create(
nameof(IsLoading), typeof(bool), typeof(IllustCollectionPage<T>), true);
public IllustCollection Illusts
{
@@ -53,15 +45,15 @@ namespace Pixiview.Illust
get => (int)GetValue(ColumnsProperty);
set => SetValue(ColumnsProperty, value);
}
public bool Loading
public bool IsLoading
{
get => (bool)GetValue(LoadingProperty);
set => SetValue(LoadingProperty, value);
get => (bool)GetValue(IsLoadingProperty);
set => SetValue(IsLoadingProperty, value);
}
#endregion
protected static bool IsUpdated { get; private set; } = true;
protected static bool NeedUpdate { get; private set; } = true;
public IllustCollection IllustCollection { get; set; }
@@ -76,8 +68,8 @@ namespace Pixiview.Illust
public IllustCollectionPage()
{
BindingContext = this;
commandIllustImageTapped = new Command<IllustItem>(IllustImageTapped);
BindingContext = this;
}
private void IllustImageTapped(IllustItem illust)
@@ -87,14 +79,20 @@ namespace Pixiview.Illust
#region - Overrides -
public override void OnUnload()
{
Illusts = IllustCollection.Empty;
loaded = false;
}
protected override void OnAppearing()
{
base.OnAppearing();
Connectivity.ConnectivityChanged += Connectivity_ConnectivityChanged;
if (IsUpdated || !loaded)
if (NeedUpdate || !loaded)
{
IsUpdated = false;
NeedUpdate = false;
loaded = false;
StartLoad();
}
@@ -163,21 +161,133 @@ namespace Pixiview.Illust
protected void StartLoad(bool force = false)
{
if (force)
if (force || !loaded)
{
Loading = true;
Task.Run(() => DoLoadIllusts(true));
}
else if (!loaded)
{
Loading = true;
loaded = true;
IsLoading = true;
Task.Run(() => DoLoadIllusts(force));
}
}
protected DataTemplate GetCardViewTemplate()
protected DataTemplate GetCardViewTemplate(bool hideUser = false)
{
return new DataTemplate(() =>
{
#region - components -
// image
var image = new RoundImage
{
BackgroundColor = Color.LightGray,
CornerRadius = 10,
CornerMasks = CornerMask.Top,
HorizontalOptions = LayoutOptions.Fill,
Aspect = Aspect.AspectFill,
GestureRecognizers =
{
new TapGestureRecognizer()
.Binding(TapGestureRecognizer.CommandProperty, nameof(IllustItem.IllustTapped))
.Binding(TapGestureRecognizer.CommandParameterProperty, ".")
}
}
.Binding(Image.SourceProperty, nameof(IllustItem.Image));
// label: r-18
var r18 = new RoundLabel
{
Text = ResourceHelper.R18,
BackgroundColor = StyleDefinition.ColorRedBackground,
Margin = new Thickness(6, 6, 0, 0),
Padding = new Thickness(6, 2),
CornerRadius = 4,
HorizontalOptions = LayoutOptions.Start,
VerticalOptions = LayoutOptions.Start,
FontSize = StyleDefinition.FontSizeMicro,
TextColor = Color.White
}
.Binding(IsVisibleProperty, nameof(IllustItem.IsRestrict));
// label: pages
var pages = new RoundLabel
{
BackgroundColor = StyleDefinition.ColorDeepShadow,
Margin = new Thickness(0, 6, 6, 0),
Padding = new Thickness(6, 4),
CornerRadius = 6,
HorizontalOptions = LayoutOptions.End,
VerticalOptions = LayoutOptions.Start,
FontSize = StyleDefinition.FontSizeMicro,
TextColor = Color.White
}
.Binding(Label.TextProperty, nameof(IllustItem.PageCountText))
.Binding(IsVisibleProperty, nameof(IllustItem.IsPageVisible))
.DynamicResource(Label.FontFamilyProperty, ThemeBase.IconSolidFontFamily);
// label: title
var title = new Label
{
Padding = new Thickness(8, 2),
HorizontalOptions = LayoutOptions.FillAndExpand,
LineBreakMode = LineBreakMode.TailTruncation,
FontSize = StyleDefinition.FontSizeSmall
}
.Binding(Label.TextProperty, nameof(IllustItem.Title))
.DynamicResource(Label.TextColorProperty, ThemeBase.TextColor);
// label: favorite
var favorite = new Label
{
WidthRequest = 26,
HorizontalOptions = LayoutOptions.End,
HorizontalTextAlignment = TextAlignment.End,
VerticalOptions = LayoutOptions.Center,
FontSize = StyleDefinition.FontSizeSmall,
TextColor = StyleDefinition.ColorRedBackground,
Text = StyleDefinition.IconLove
}
.Binding(IsVisibleProperty, IsFavoriteVisible ? nameof(IllustItem.IsFavorite) : null)
.DynamicResource(Label.FontFamilyProperty, ThemeBase.IconSolidFontFamily);
#endregion
if (hideUser)
{
return new CardView
{
Padding = 0,
Margin = 0,
CornerRadius = 10,
ShadowColor = StyleDefinition.ColorLightShadow,
ShadowOffset = new Size(2, 2),
Content = new Grid
{
HorizontalOptions = LayoutOptions.Fill,
RowDefinitions =
{
new RowDefinition().Binding(RowDefinition.HeightProperty, nameof(IllustItem.ImageHeight)),
new RowDefinition { Height = GridLength.Auto }
},
Children =
{
image,
r18,
pages,
title,
// stacklayout: user
new StackLayout
{
Orientation = StackOrientation.Horizontal,
Padding = new Thickness(0, 0, 8, 0),
Children = { title, favorite }
}
.GridRow(1)
}
}
}
.DynamicResource(BackgroundColorProperty, ThemeBase.CardBackgroundColor);
}
return new CardView
{
Padding = 0,
@@ -196,65 +306,10 @@ namespace Pixiview.Illust
},
Children =
{
// image
new RoundImage
{
BackgroundColor = Color.LightGray,
CornerRadius = 10,
CornerMasks = CornerMask.Top,
HorizontalOptions = LayoutOptions.Fill,
Aspect = Aspect.AspectFill,
GestureRecognizers =
{
new TapGestureRecognizer()
.Binding(TapGestureRecognizer.CommandProperty, nameof(IllustItem.IllustTapped))
.Binding(TapGestureRecognizer.CommandParameterProperty, ".")
}
}
.Binding(Image.SourceProperty, nameof(IllustItem.Image)),
// label: r-18
new RoundLabel
{
Text = ResourceHelper.R18,
BackgroundColor = StyleDefinition.ColorRedBackground,
Margin = new Thickness(6, 6, 0, 0),
Padding = new Thickness(6, 2),
CornerRadius = 4,
HorizontalOptions = LayoutOptions.Start,
VerticalOptions = LayoutOptions.Start,
FontSize = StyleDefinition.FontSizeMicro,
TextColor = Color.White
}
.Binding(IsVisibleProperty, nameof(IllustItem.IsRestrict)),
// label: pages
new RoundLabel
{
BackgroundColor = StyleDefinition.ColorDeepShadow,
Margin = new Thickness(0, 6, 6, 0),
Padding = new Thickness(6, 4),
CornerRadius = 6,
HorizontalOptions = LayoutOptions.End,
VerticalOptions = LayoutOptions.Start,
FontSize = StyleDefinition.FontSizeMicro,
TextColor = Color.White
}
.Binding(Label.TextProperty, nameof(IllustItem.PageCountText))
.Binding(IsVisibleProperty, nameof(IllustItem.IsPageVisible))
.DynamicResource(Label.FontFamilyProperty, ThemeBase.IconSolidFontFamily),
// label: title
new Label
{
Padding = new Thickness(8, 2),
HorizontalOptions = LayoutOptions.Start,
LineBreakMode = LineBreakMode.TailTruncation,
FontSize = StyleDefinition.FontSizeSmall
}
.Binding(Label.TextProperty, nameof(IllustItem.Title))
.DynamicResource(Label.TextColorProperty, ThemeBase.TextColor)
.GridRow(1),
image,
r18,
pages,
title.GridRow(1),
// stacklayout: user
new StackLayout
@@ -284,18 +339,7 @@ namespace Pixiview.Illust
.DynamicResource(Label.TextColorProperty, ThemeBase.SubTextColor),
// label: favorite
new Label
{
WidthRequest = 26,
HorizontalOptions = LayoutOptions.End,
HorizontalTextAlignment = TextAlignment.End,
VerticalOptions = LayoutOptions.Center,
FontSize = StyleDefinition.FontSizeSmall,
TextColor = StyleDefinition.ColorRedBackground,
Text = StyleDefinition.IconLove
}
.Binding(IsVisibleProperty, IsFavoriteVisible ? nameof(IllustItem.IsFavorite) : null)
.DynamicResource(Label.FontFamilyProperty, ThemeBase.IconSolidFontFamily)
favorite
}
}
.GridRow(2)
@@ -308,18 +352,18 @@ namespace Pixiview.Illust
#region - Illust Tasks -
protected void DoLoadIllusts(bool force = false, bool skipImage = false)
protected void DoLoadIllusts(bool force = false)
{
illustData = DoLoadIllustData(force);
if (illustData == null)
{
//App.DebugError("illusts.load", "failed to load illusts data.");
Loading = false;
IsLoading = false;
return;
}
if (force)
{
IsUpdated = true;
NeedUpdate = true;
}
var data = DoGetIllustList(illustData, commandIllustImageTapped).Where(i => i != null);
@@ -335,12 +379,9 @@ namespace Pixiview.Illust
}
IllustCollection = collection;
Illusts = collection;
Loading = false;
IsLoading = false;
if (!skipImage)
{
DoLoadImages(collection);
}
DoLoadImages(collection);
}
void DoLoadImages(IllustCollection collection)
@@ -354,7 +395,11 @@ namespace Pixiview.Illust
if (illust.ImageUrl != null)
{
var url = Configs.GetThumbnailUrl(illust.ImageUrl);
var image = Stores.LoadThumbnailImage(url);
var image = Stores.LoadPreviewImage(url, false);
if (image == null)
{
image = Stores.LoadThumbnailImage(url);
}
if (image != null)
{
illust.Image = image;

View File

@@ -19,7 +19,7 @@
ItemTemplate="{StaticResource cardView}"/>
</ScrollView>
<Frame HasShadow="False" Margin="0" Padding="20" CornerRadius="8"
IsVisible="{Binding Loading}"
IsVisible="{Binding IsLoading}"
HorizontalOptions="Center" VerticalOptions="Center"
BackgroundColor="{DynamicResource MaskColor}">
<ActivityIndicator IsRunning="True" IsVisible="True"

View File

@@ -14,12 +14,6 @@ namespace Pixiview.Illust
InitializeComponent();
}
public override void OnUnload()
{
Illusts = IllustCollection.Empty;
loaded = false;
}
protected override IEnumerable<IllustItem> DoGetIllustList(IllustData data, ICommand command)
{
return data.body.page.follow.Select(i =>
@@ -40,7 +34,7 @@ namespace Pixiview.Illust
private void Refresh_Clicked(object sender, EventArgs e)
{
if (Loading)
if (IsLoading)
{
return;
}

View File

@@ -25,7 +25,7 @@
SearchButtonPressed="SearchBar_SearchButtonPressed"
Unfocused="SearchBar_Unfocused"/>
<Frame HasShadow="False" Margin="0" Padding="20" CornerRadius="8"
IsVisible="{Binding Loading}"
IsVisible="{Binding IsLoading}"
HorizontalOptions="Center" VerticalOptions="Center"
BackgroundColor="{DynamicResource MaskColor}">
<ActivityIndicator IsRunning="True" IsVisible="True"

View File

@@ -28,12 +28,6 @@ namespace Pixiview.Illust
InitializeComponent();
}
public override void OnUnload()
{
Illusts = IllustCollection.Empty;
loaded = false;
}
public override void OnOrientationChanged(Orientation orientation)
{
int columns;
@@ -92,7 +86,7 @@ namespace Pixiview.Illust
private void Refresh_Clicked(object sender, EventArgs e)
{
if (Loading)
if (IsLoading)
{
return;
}

View File

@@ -32,7 +32,7 @@
</u:SegmentedControl>
</Grid>
<Frame HasShadow="False" Margin="0" Padding="20" CornerRadius="8"
IsVisible="{Binding Loading}"
IsVisible="{Binding IsLoading}"
HorizontalOptions="Center" VerticalOptions="Center"
BackgroundColor="{DynamicResource MaskColor}">
<ActivityIndicator IsRunning="True" IsVisible="True"

View File

@@ -35,12 +35,6 @@ namespace Pixiview.Illust
InitializeComponent();
}
public override void OnUnload()
{
Illusts = IllustCollection.Empty;
loaded = false;
}
public override void OnOrientationChanged(Orientation orientation)
{
int columns;
@@ -108,7 +102,7 @@ namespace Pixiview.Illust
private void Refresh_Clicked(object sender, EventArgs e)
{
if (Loading)
if (IsLoading)
{
return;
}

View File

@@ -0,0 +1,35 @@
<?xml version="1.0" encoding="UTF-8"?>
<i:IllustUserDataCollectionPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:i="clr-namespace:Pixiview.Illust"
xmlns:u="clr-namespace:Pixiview.UI"
x:Class="Pixiview.Illust.UserIllustPage"
BackgroundColor="{DynamicResource WindowColor}">
<Shell.TitleView>
<StackLayout Orientation="Horizontal" Padding="0, 2, 0, 4">
<u:CircleImage Aspect="AspectFill" Source="{Binding UserIcon}"/>
<Label Text="{Binding IllustItem.UserName}" Margin="10, 0, 0, 0"
VerticalOptions="Center" LineBreakMode="TailTruncation"
TextColor="{DynamicResource TextColor}"/>
</StackLayout>
</Shell.TitleView>
<ContentPage.ToolbarItems>
<ToolbarItem Order="Primary" Clicked="Refresh_Clicked"
IconImageSource="{DynamicResource FontIconRefresh}"/>
</ContentPage.ToolbarItems>
<Grid>
<ScrollView HorizontalOptions="Fill">
<u:FlowLayout ItemsSource="{Binding Illusts}"
HorizontalOptions="Fill" Column="{Binding Columns}"
Margin="16" RowSpacing="16" ColumnSpacing="16"
ItemTemplate="{StaticResource cardView}"/>
</ScrollView>
<Frame HasShadow="False" Margin="0" Padding="20" CornerRadius="8"
IsVisible="{Binding IsLoading}"
HorizontalOptions="Center" VerticalOptions="Center"
BackgroundColor="{DynamicResource MaskColor}">
<ActivityIndicator IsRunning="True" IsVisible="True"
Color="{DynamicResource WindowColor}"/>
</Frame>
</Grid>
</i:IllustUserDataCollectionPage>

View File

@@ -0,0 +1,59 @@
using System;
using System.Collections.Generic;
using System.Linq;
using System.Windows.Input;
using Pixiview.Utils;
using Xamarin.Forms;
namespace Pixiview.Illust
{
public partial class UserIllustPage : IllustUserDataCollectionPage
{
public static readonly BindableProperty UserIconProperty = BindableProperty.Create(
nameof(UserIcon), typeof(ImageSource), typeof(UserIllustPage));
public ImageSource UserIcon
{
get => (ImageSource)GetValue(UserIconProperty);
set => SetValue(UserIconProperty, value);
}
public IllustItem IllustItem { get; }
public UserIllustPage(IllustItem illust)
{
IllustItem = illust;
UserIcon = illust.ProfileImage;
Resources.Add("cardView", GetCardViewTemplate(true));
InitializeComponent();
}
protected override IEnumerable<IllustItem> DoGetIllustList(IllustUserData data, ICommand command)
{
return data.body.works.Select(i =>
{
var item = i.Value?.ConvertToItem();
if (item != null)
{
item.IllustTapped = command;
}
return item;
});
}
protected override IllustUserData DoLoadIllustData(bool force)
{
return Stores.LoadIllustUserData(IllustItem.UserId, force);
}
private void Refresh_Clicked(object sender, EventArgs e)
{
if (IsLoading)
{
return;
}
StartLoad(true);
}
}
}

View File

@@ -1,4 +1,5 @@
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using System.Windows.Input;
@@ -69,12 +70,9 @@ namespace Pixiview.Illust
fontIconLove = (ImageSource)Application.Current.Resources[ThemeBase.FontIconLove];
fontIconNotLove = (ImageSource)Application.Current.Resources[ThemeBase.FontIconNotLove];
var favorites = Stores.Favorites;
if (favorites != null)
{
FavoriteIcon = favorites.Any(i => i.Id == illust.Id)
? fontIconLove
: fontIconNotLove;
}
FavoriteIcon = favorites.Any(i => i.Id == illust.Id)
? fontIconLove
: fontIconNotLove;
InitializeComponent();
@@ -143,10 +141,11 @@ namespace Pixiview.Illust
private void DoLoadImages()
{
var pages = Stores.LoadIllustPageData(IllustItem.Id);
var illustItem = IllustItem;
var pages = Stores.LoadIllustPageData(illustItem.Id);
if (pages == null)
{
App.DebugError("illustPage.load", $"failed to load illust page data, id: {IllustItem.Id}");
App.DebugError("illustPage.load", $"failed to load illust page data, id: {illustItem.Id}");
return;
}
var items = Illusts;
@@ -174,6 +173,11 @@ namespace Pixiview.Illust
}
DoLoadImage(0, true);
var image = items[0].Image;
if (image != null)
{
illustItem.Image = image;
}
if (items.Length > 1)
{
DoLoadImage(1);
@@ -233,10 +237,6 @@ namespace Pixiview.Illust
private void Favorite_Clicked(object sender, EventArgs e)
{
var favorites = Stores.Favorites;
if (favorites == null)
{
return;
}
var illust = IllustItem;
var index = favorites.FindIndex(i => i.Id == illust.Id);
if (index < 0)
@@ -255,23 +255,23 @@ namespace Pixiview.Illust
private async void Illust_LongPressed(IllustDetailItem item)
{
List<string> extras = new List<string>();
var share = ResourceHelper.Share;
string[] extras;
var preview = Stores.GetPreviewImagePath(item.PreviewUrl);
if (string.IsNullOrEmpty(preview))
if (preview != null)
{
extras = new string[0];
}
else
{
extras = new[] { share };
extras.Add(share);
}
var saveOriginal = ResourceHelper.SaveOriginal;
var userDetail = ResourceHelper.UserDetail;
extras.Add(userDetail);
var illustItem = IllustItem;
var result = await DisplayActionSheet(
IllustItem.Title,
illustItem.Title,
ResourceHelper.Cancel,
saveOriginal,
extras);
extras.ToArray());
if (result == saveOriginal)
{
SaveOriginalImage(item);
@@ -280,10 +280,15 @@ namespace Pixiview.Illust
{
await Share.RequestAsync(new ShareFileRequest
{
Title = IllustItem.Title,
Title = illustItem.Title,
File = new ShareFile(preview)
});
}
else if (result == userDetail)
{
var page = new UserIllustPage(illustItem);
await Navigation.PushAsync(page);
}
}
private async void SaveOriginalImage(IllustDetailItem item)