Add thumbnail overlay in reader

Hover mouse above bottom edge.
Guerra24 · Oct 26, 2023 · 52c6445 · 52c6445
1 parent 02ce35d
commit 52c6445
Show file tree

Hide file tree

Showing 9 changed files with 492 additions and 45 deletions.
diff --git a/LRReader.Shared/LRReader.Shared.csproj b/LRReader.Shared/LRReader.Shared.csproj
@@ -10,7 +10,7 @@
   </PropertyGroup>
 
   <ItemGroup>
-    <PackageReference Include="CommunityToolkit.Mvvm" Version="8.2.1" />
+    <PackageReference Include="CommunityToolkit.Mvvm" Version="8.2.2" />
     <PackageReference Include="Microsoft.AppCenter.Crashes" Version="5.0.3" Condition="'$(TargetFramework)' == 'uap10.0.17763'" />
     <PackageReference Include="Caching.dll" Version="2.0.0.1" />
     <PackageReference Include="KeyedSemaphores" Version="5.0.0" />

diff --git a/LRReader.UWP/App.xaml b/LRReader.UWP/App.xaml
@@ -9,10 +9,10 @@
 			<ResourceDictionary.MergedDictionaries>
 				<controls:XamlControlsResources>
 					<controls:XamlControlsResources.MergedDictionaries>
-						<ResourceDictionary Source="/Resources/ThemeDictionary.xaml" />
-						<ResourceDictionary Source="/Resources/Converters.xaml" />
-						<ResourceDictionary Source="/Resources/NotificationStyle.xaml" />
-						<ResourceDictionary Source="/Resources/WinUITemplates.xaml" />
+						<ResourceDictionary Source="ms-appx:///Resources/ThemeDictionary.xaml" />
+						<ResourceDictionary Source="ms-appx:///Resources/Converters.xaml" />
+						<ResourceDictionary Source="ms-appx:///Resources/NotificationStyle.xaml" />
+						<ResourceDictionary Source="ms-appx:///Resources/WinUITemplates.xaml" />
 						<Templates xmlns="using:LRReader.UWP.Resources" />
 					</controls:XamlControlsResources.MergedDictionaries>
 				</controls:XamlControlsResources>

diff --git a/LRReader.UWP/Extensions/Extensions.cs b/LRReader.UWP/Extensions/Extensions.cs
@@ -35,6 +35,8 @@ public static class Animations
 
 		public static void SetVisualOpacity(this UIElement element, float opacity) => ElementCompositionPreview.GetElementVisual(element).Opacity = opacity;
 
+		//public static void SetVisualTranslation(this UIElement element, Vector3 transform) => ElementCompositionPreview.GetElementVisual(element).TransformMatrix = Matrix4x4.CreateTranslation(transform);
+
 		public static void Start(this UIElement element, AnimationBuilder animation) => animation.Start(element);
 		public static Task StartAsync(this UIElement element, AnimationBuilder animation) => animation.StartAsync(element);
 
@@ -131,7 +133,7 @@ public static void SetModernShadow(FrameworkElement element, Shadow shadow)
 
 		private static void Grid_ContainerContentChanging(ListViewBase sender, ContainerContentChangingEventArgs args)
 		{
-			var item = (GridViewItem)args.ItemContainer;
+			var item = args.ItemContainer;
 			var shadow = (Shadow)sender.GetValue(ModernShadowProperty);
 			if (item.GetValue(ModernShadowProperty) == null)
 			{

diff --git a/LRReader.UWP/LRReader.UWP.csproj b/LRReader.UWP/LRReader.UWP.csproj
@@ -199,6 +199,7 @@
     </Compile>
     <Compile Include="Views\Controls\ModernTab.cs" />
     <Compile Include="Views\Controls\ModernWebView.cs" />
+    <Compile Include="Views\Controls\NoBorderListViewItemPresenter.cs" />
     <Compile Include="Views\Dialogs\CategoryArchive.xaml.cs">
       <DependentUpon>CategoryArchive.xaml</DependentUpon>
     </Compile>

diff --git a/LRReader.UWP/Resources/WinUITemplates.xaml b/LRReader.UWP/Resources/WinUITemplates.xaml
diff --git a/LRReader.UWP/Views/Controls/NoBorderListViewItemPresenter.cs b/LRReader.UWP/Views/Controls/NoBorderListViewItemPresenter.cs
@@ -0,0 +1,25 @@
+#nullable enable
+using CommunityToolkit.WinUI;
+using Windows.UI.Xaml;
+using Windows.UI.Xaml.Controls;
+using Windows.UI.Xaml.Controls.Primitives;
+
+namespace LRReader.UWP.Views.Controls
+{
+	// Why
+	public class NoBorderListViewItemPresenter : ListViewItemPresenter
+	{
+		public NoBorderListViewItemPresenter()
+		{
+			Loaded += NoBorderListViewItemPresenter_Loaded;
+		}
+
+		private void NoBorderListViewItemPresenter_Loaded(object sender, RoutedEventArgs e)
+		{
+			var border = this.FindDescendant<Border>();
+			border!.Margin = new Thickness(0);
+			Loaded -= NoBorderListViewItemPresenter_Loaded;
+		}
+
+	}
+}
diff --git a/LRReader.UWP/Views/Items/GenericArchiveItem.cs b/LRReader.UWP/Views/Items/GenericArchiveItem.cs
@@ -185,13 +185,10 @@ public void TagsGrid_PointerExited(object sender, PointerRoutedEventArgs e)
 		private void Control_PointerPressed(object sender, PointerRoutedEventArgs e)
 		{
 			var pointerPoint = e.GetCurrentPoint(this);
-			if (e.Pointer.PointerDeviceType == PointerDeviceType.Mouse)
+			if (e.Pointer.PointerDeviceType == PointerDeviceType.Mouse && pointerPoint.Properties.IsMiddleButtonPressed)
 			{
-				if (pointerPoint.Properties.IsMiddleButtonPressed)
-				{
-					Service.Archives.OpenTab(ViewModel.Archive, false, Group);
-					e.Handled = true;
-				}
+				Service.Archives.OpenTab(ViewModel.Archive, false, Group);
+				e.Handled = true;
 			}
 		}
 

diff --git a/LRReader.UWP/Views/Tabs/Content/ArchiveTabContent.xaml b/LRReader.UWP/Views/Tabs/Content/ArchiveTabContent.xaml
@@ -13,6 +13,7 @@
 	xmlns:services="using:LRReader.Shared.Services"
 	xmlns:ui="using:Microsoft.Toolkit.Uwp.UI"
 	xmlns:util="using:LRReader.UWP.Util"
+	xmlns:contract8="http://schemas.microsoft.com/winfx/2006/xaml/presentation?IsApiContractPresent(Windows.Foundation.UniversalApiContract, 8)"
 	DataContext="{Binding ArchivePageInstance, Source={StaticResource Locator}}"
 	Loaded="UserControl_Loaded"
 	mc:Ignorable="d">
@@ -181,37 +182,86 @@
 				</Grid>
 			</ContentControl>
 		</ScrollViewer>
-		<!--<Grid Height="300" VerticalAlignment="Bottom" Background="{ThemeResource SystemControlAcrylicElementMediumHighBrush}" x:Load="{x:Bind Data.ShowReader, Mode=OneWay}">
-			<ListView ItemsSource="{x:Bind Data.ArchiveImages}"
-					  ScrollViewer.HorizontalScrollBarVisibility="Auto" ScrollViewer.HorizontalScrollMode="Enabled" ScrollViewer.IsHorizontalRailEnabled="True">
-				<ListView.ItemTemplate>
-					<DataTemplate>
-						<items:ArchiveImage />
-					</DataTemplate>
-				</ListView.ItemTemplate>
-				<ListView.ItemsPanel>
-					<ItemsPanelTemplate>
-						<ItemsStackPanel Orientation="Horizontal" />
-					</ItemsPanelTemplate>
-				</ListView.ItemsPanel>
-				<ListView.ItemContainerStyle>
-					<Style TargetType="ListViewItem">
-						<Setter Property="Padding" Value="0" />
-						<Setter Property="Margin" Value="5" />
-					</Style>
-				</ListView.ItemContainerStyle>
-			</ListView>-->
-			<!--<muxc:ItemsRepeater ItemsSource="{x:Bind Data.ArchiveImages}">
-		<muxc:ItemsRepeater.ItemTemplate>
-			<DataTemplate x:DataType="main:ImagePageSet">
-				<items:ArchiveImage DataContext="{x:Bind}" />
-			</DataTemplate>
-		</muxc:ItemsRepeater.ItemTemplate>
-		<muxc:ItemsRepeater.Layout>
-			<muxc:StackLayout Orientation="Horizontal" />
-		</muxc:ItemsRepeater.Layout>
-	</muxc:ItemsRepeater>-->
-		<!--</Grid>-->
+		<Grid
+			Height="48" VerticalAlignment="Bottom" Background="Transparent"
+			PointerEntered="Trigger_PointerEntered" PointerExited="Trigger_PointerExited"
+			Visibility="{x:Bind Data.ShowReader, Mode=OneWay}" />
+		<Popup
+			x:Name="ReaderThumbnailOverlay" Height="342" HorizontalAlignment="Center"
+			VerticalAlignment="Bottom" IsLightDismissEnabled="True">
+			<Popup.ChildTransitions>
+				<TransitionCollection>
+					<PaneThemeTransition Edge="Bottom" />
+				</TransitionCollection>
+			</Popup.ChildTransitions>
+			<Grid Width="{x:Bind ReaderThumbnailOverlay.Width, Mode=OneWay}" Height="{x:Bind ReaderThumbnailOverlay.Height, Mode=OneWay}">
+				<!-- We can't use listview because listview -->
+				<!--<ListView x:Name="OverlayThumbnails"
+					VerticalAlignment="Top"
+					Padding="16"
+					Margin="16,0,16,16"
+					ext:Element.ModernShadow="{StaticResource ElementShadow}"
+					Background="{ThemeResource SystemControlAcrylicElementMediumHighBrush}"
+					BorderBrush="{ThemeResource FlyoutBorderThemeBrush}"
+					BorderThickness="{ThemeResource FlyoutBorderThemeThickness}"
+					CornerRadius="{ThemeResource OverlayCornerRadius}"
+					ItemsSource="{x:Bind Data.ArchiveImages}"
+					ScrollViewer.HorizontalScrollBarVisibility="Auto" ScrollViewer.HorizontalScrollMode="Enabled" ScrollViewer.IsHorizontalRailEnabled="True"
+					ScrollViewer.VerticalScrollMode="Disabled" SelectionMode="Single" Translation="0,0,32">
+					<contract8:ListView.Shadow>
+						<contract8:ThemeShadow />
+					</contract8:ListView.Shadow>
+					<ListView.ItemTemplate>
+						<DataTemplate>
+							<items:ArchiveImage KeepOverlayOpen="True" />
+						</DataTemplate>
+					</ListView.ItemTemplate>
+					<ListView.ItemsPanel>
+						<ItemsPanelTemplate>
+							<ItemsStackPanel Orientation="Horizontal" />
+						</ItemsPanelTemplate>
+					</ListView.ItemsPanel>
+					<ListView.ItemContainerStyle>
+						<Style BasedOn="{StaticResource WinUIListViewItemStyle}" TargetType="ListViewItem">
+							<Setter Property="Padding" Value="4" />
+							<Setter Property="Margin" Value="5" />
+						</Style>
+					</ListView.ItemContainerStyle>
+				</ListView>-->
+				<GridView
+					x:Name="OverlayThumbnails" Margin="16,0,16,16" Padding="16"
+					VerticalAlignment="Top"
+					ext:Element.ModernShadow="{StaticResource ElementShadow}"
+					Background="{ThemeResource SystemControlAcrylicElementMediumHighBrush}"
+					BorderBrush="{ThemeResource FlyoutBorderThemeBrush}"
+					BorderThickness="{ThemeResource FlyoutBorderThemeThickness}"
+					CornerRadius="{ThemeResource OverlayCornerRadius}"
+					IsItemClickEnabled="True" ItemClick="OverlayThumbnails_ItemClick"
+					ItemsSource="{x:Bind Data.ArchiveImages}"
+					ScrollViewer.HorizontalScrollBarVisibility="Auto" ScrollViewer.HorizontalScrollMode="Enabled" ScrollViewer.IsHorizontalRailEnabled="True"
+					ScrollViewer.VerticalScrollMode="Disabled" SelectionMode="Single" Translation="0,0,32">
+					<contract8:GridView.Shadow>
+						<contract8:ThemeShadow />
+					</contract8:GridView.Shadow>
+					<GridView.ItemTemplate>
+						<DataTemplate>
+							<items:ArchiveImage KeepOverlayOpen="True" />
+						</DataTemplate>
+					</GridView.ItemTemplate>
+					<GridView.ItemsPanel>
+						<ItemsPanelTemplate>
+							<ItemsStackPanel Orientation="Horizontal" />
+						</ItemsPanelTemplate>
+					</GridView.ItemsPanel>
+					<GridView.ItemContainerStyle>
+						<Style BasedOn="{StaticResource WinUIGridViewItemStyle}" TargetType="GridViewItem">
+							<Setter Property="Padding" Value="4" />
+							<Setter Property="Margin" Value="5" />
+						</Style>
+					</GridView.ItemContainerStyle>
+				</GridView>
+			</Grid>
+		</Popup>
 		<!--<Border x:Name="LeftHitTargetOverlay" Background="#40FF0000" BorderThickness="2" BorderBrush="#90FF0000" HorizontalAlignment="Left" IsHitTestVisible="False" />
 		<Border x:Name="RightHitTargetOverlay" Background="#40FF0000" BorderThickness="2" BorderBrush="#90FF0000" HorizontalAlignment="Right" IsHitTestVisible="False" />-->
 		<Button

diff --git a/LRReader.UWP/Views/Tabs/Content/ArchiveTabContent.xaml.cs b/LRReader.UWP/Views/Tabs/Content/ArchiveTabContent.xaml.cs
@@ -6,14 +6,14 @@
 using System.Threading;
 using System.Threading.Tasks;
 using CommunityToolkit.Mvvm.Input;
+using CommunityToolkit.WinUI;
 using CommunityToolkit.WinUI.Animations;
 using LRReader.Shared.Extensions;
 using LRReader.Shared.Models.Main;
 using LRReader.Shared.Services;
 using LRReader.Shared.ViewModels;
 using LRReader.UWP.Extensions;
 using LRReader.UWP.Views.Items;
-using Microsoft.Toolkit.Uwp.UI;
 using Windows.Devices.Input;
 using Windows.Foundation;
 using Windows.Storage;
@@ -46,6 +46,8 @@ public sealed partial class ArchiveTabContent : UserControl
 		private bool _changingPage;
 		private float _lastZoom;
 		private double _fitAgainstFixedWidth;
+		private bool _handleDoubleTap;
+		private bool _overlayDelayOpen;
 
 		private bool _transition;
 
@@ -58,6 +60,10 @@ public ArchiveTabContent()
 			this.InitializeComponent();
 			ReaderBackground.SetVisualOpacity(0);
 			ScrollViewer.SetVisualOpacity(0);
+			/*
+			ElementCompositionPreview.SetIsTranslationEnabled(ReaderThumbnailOverlay, true);
+			ElementCompositionPreview.GetElementVisual(ReaderThumbnailOverlay).Properties.InsertVector3("Translation", new Vector3(0, 317, 0));
+			*/
 
 			Data = (ArchivePageViewModel)DataContext;
 			Data.ZoomChangedEvent += FitImages;
@@ -462,6 +468,7 @@ private void ReaderControl_PointerWheelChanged(object sender, PointerRoutedEvent
 		private void ScrollViewer_PointerPressed(object sender, PointerRoutedEventArgs e)
 		{
 			var pointerPoint = e.GetCurrentPoint(ScrollViewer);
+			_handleDoubleTap = pointerPoint.Properties.IsLeftButtonPressed;
 			if (e.Pointer.PointerDeviceType == PointerDeviceType.Mouse)
 			{
 				if (pointerPoint.Properties.IsXButton1Pressed)
@@ -484,6 +491,8 @@ private void ScrollViewer_PointerPressed(object sender, PointerRoutedEventArgs e
 
 		private void ScrollViewer_DoubleTapped(object sender, DoubleTappedRoutedEventArgs e)
 		{
+			if (!_handleDoubleTap)
+				return;
 			var point = e.GetPosition(ScrollViewer);
 			double distance = ScrollViewer.ActualWidth / 6.0;
 			if (point.X > distance && point.X < ScrollViewer.ActualWidth - distance)
@@ -615,6 +624,7 @@ private async void Preload(ReaderImageSet set)
 		private void ScrollViewer_SizeChanged(object sender, SizeChangedEventArgs e)
 		{
 			FitImages(Data.UseVerticalReader);
+			ReaderThumbnailOverlay.Width = e.NewSize.Width;
 			//LeftHitTargetOverlay.Width = RightHitTargetOverlay.Width = ScrollViewer.ActualWidth / 6.0;
 		}
 
@@ -820,5 +830,54 @@ private string GetOpenTarget(ReaderImageSet target, int item)
 			return targetAnim;
 		}
 
+		private async void Trigger_PointerEntered(object sender, PointerRoutedEventArgs e)
+		{
+			if (!Data.ShowReader)
+				return;
+			_overlayDelayOpen = true;
+			await Task.Delay(TimeSpan.FromMilliseconds(Service.Platform.HoverTime));
+			if (_overlayDelayOpen)
+			{
+				ReaderThumbnailOverlay.IsOpen = true;
+				await Task.Delay(100);
+				OverlayThumbnails.SelectedIndex = Data.ReaderContent.Page;
+				await OverlayThumbnails.SmoothScrollIntoViewWithIndexAsync(Data.ReaderContent.Page, ScrollItemPlacement.Center);
+			}
+		}
+
+		private void Trigger_PointerExited(object sender, PointerRoutedEventArgs e)
+		{
+			if (!_overlayDelayOpen)
+				return;
+			_overlayDelayOpen = false;
+		}
+
+		private async void OverlayThumbnails_ItemClick(object sender, ItemClickEventArgs e)
+		{
+			var readerSet = Data.ArchiveImagesReader.FirstOrDefault(s => s.Page >= Data.ArchiveImages.IndexOf((ImagePageSet)e.ClickedItem));
+			if (readerSet == null)
+				return;
+
+			int index = Data.ArchiveImagesReader.IndexOf(readerSet);
+
+			if (Data.UseVerticalReader)
+			{
+				await Task.Delay(100);
+				var element = ReaderVertical.GetOrCreateElement(index);
+				element.UpdateLayout();
+				element.StartBringIntoView(new BringIntoViewOptions { AnimationDesired = true, VerticalAlignmentRatio = 0f });
+			}
+			else
+			{
+				_changingPage = true;
+
+				Data.ReaderIndex = index;
+				await ReaderImage.FadeOutPage();
+				ScrollViewer.ChangeView(null, 0, null, true);
+				await ChangePage();
+
+				_changingPage = false;
+			}
+		}
 	}
 }