From 98c7ce1735f34794d12c2ac959b9e6c4b6dcb67e Mon Sep 17 00:00:00 2001
From: Michael Gordeev <mikhailagord@gmail.com>
Date: Fri, 27 Jul 2018 00:07:48 +0300
Subject: [PATCH] Playlist page markup & adaptive triggers

---
 FoxTube/FoxTube.csproj                        |  6 +-
 FoxTube/Pages/MainPage.xaml.cs                |  2 +-
 FoxTube/Pages/Playlist.xaml                   | 40 -----------
 FoxTube/Pages/PlaylistPage.xaml               | 68 +++++++++++++++++++
 ...{Playlist.xaml.cs => PlaylistPage.xaml.cs} |  4 +-
 FoxTube/Pages/Search.xaml                     |  1 +
 FoxTube/Pages/Search.xaml.cs                  |  5 ++
 7 files changed, 80 insertions(+), 46 deletions(-)
 delete mode 100644 FoxTube/Pages/Playlist.xaml
 create mode 100644 FoxTube/Pages/PlaylistPage.xaml
 rename FoxTube/Pages/{Playlist.xaml.cs => PlaylistPage.xaml.cs} (90%)

diff --git a/FoxTube/FoxTube.csproj b/FoxTube/FoxTube.csproj
index 2daefb6..cbbab59 100644
--- a/FoxTube/FoxTube.csproj
+++ b/FoxTube/FoxTube.csproj
@@ -153,8 +153,8 @@
     <Compile Include="Controls\PlaylistCardWide.xaml.cs">
       <DependentUpon>PlaylistCardWide.xaml</DependentUpon>
     </Compile>
-    <Compile Include="Pages\Playlist.xaml.cs">
-      <DependentUpon>Playlist.xaml</DependentUpon>
+    <Compile Include="Pages\PlaylistPage.xaml.cs">
+      <DependentUpon>PlaylistPage.xaml</DependentUpon>
     </Compile>
     <Compile Include="Properties\AssemblyInfo.cs" />
     <Compile Include="Pages\Search.xaml.cs">
@@ -345,7 +345,7 @@
       <SubType>Designer</SubType>
       <Generator>MSBuild:Compile</Generator>
     </Page>
-    <Page Include="Pages\Playlist.xaml">
+    <Page Include="Pages\PlaylistPage.xaml">
       <SubType>Designer</SubType>
       <Generator>MSBuild:Compile</Generator>
     </Page>
diff --git a/FoxTube/Pages/MainPage.xaml.cs b/FoxTube/Pages/MainPage.xaml.cs
index 40060f1..680290e 100644
--- a/FoxTube/Pages/MainPage.xaml.cs
+++ b/FoxTube/Pages/MainPage.xaml.cs
@@ -270,7 +270,7 @@ namespace FoxTube
             if (s == toHistory)
                 content.Navigate(typeof(Settings));
             else if (s == toLiked)
-                content.Navigate(typeof(Settings));
+                content.Navigate(typeof(PlaylistPage));
             else if (s == toLater)
                 content.Navigate(typeof(Settings));
             else if (s == toSubscriptions)
diff --git a/FoxTube/Pages/Playlist.xaml b/FoxTube/Pages/Playlist.xaml
deleted file mode 100644
index 3555b5a..0000000
--- a/FoxTube/Pages/Playlist.xaml
+++ /dev/null
@@ -1,40 +0,0 @@
-<Page
-    x:Class="FoxTube.Pages.Playlist"
-    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
-    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:local="using:FoxTube.Pages"
-    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
-    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-    mc:Ignorable="d"
-    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
-
-    <Grid>
-        <Grid.ColumnDefinitions>
-            <ColumnDefinition Width="auto"/>
-            <ColumnDefinition/>
-        </Grid.ColumnDefinitions>
-        <Grid.RowDefinitions>
-            <RowDefinition Height="auto"/>
-            <RowDefinition/>
-            <RowDefinition Height="auto"/>
-        </Grid.RowDefinitions>
-        <StackPanel Grid.Row="1" Margin="20" Grid.Column="0" MaxWidth="650">
-            <Image Source="/Assets/videoThumbSample.png"/>
-            <TextBlock FontSize="36" Text="[Title]" TextWrapping="WrapWholeWords"/>
-            <TextBlock Foreground="Gray" Text="# videos | # views | Updated at: ##-##-## ##:##:##" FontSize="26"/>
-            
-        </StackPanel>
-
-        <CommandBar Grid.Row="2" Grid.ColumnSpan="2">
-            <AppBarButton Icon="Globe" Label="Open in browser"/>
-            <AppBarButton Icon="Add" Label="Add to">
-                <AppBarButton.Flyout>
-                    <MenuFlyout>
-                        
-                    </MenuFlyout>
-                </AppBarButton.Flyout>
-            </AppBarButton>
-            <AppBarButton Icon="Refresh" Label="Refresh"/>
-        </CommandBar>
-    </Grid>
-</Page>
diff --git a/FoxTube/Pages/PlaylistPage.xaml b/FoxTube/Pages/PlaylistPage.xaml
new file mode 100644
index 0000000..31de07f
--- /dev/null
+++ b/FoxTube/Pages/PlaylistPage.xaml
@@ -0,0 +1,68 @@
+<Page
+    x:Class="FoxTube.Pages.PlaylistPage"
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:local="using:FoxTube.Pages"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    mc:Ignorable="d"
+    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
+
+    <ScrollViewer>
+        <VisualStateManager.VisualStateGroups>
+            <VisualStateGroup>
+                <VisualState>
+                    <VisualState.StateTriggers>
+                        <AdaptiveTrigger MinWindowWidth="800"/>
+                    </VisualState.StateTriggers>
+
+                    <VisualState.Setters>
+                        <Setter Target="cover.(Grid.Column)" Value="0"/>
+                        <Setter Target="cover.(Grid.Row)" Value="1"/>
+                        <Setter Target="cover.(MaxWidth)" Value="300"/>
+                    </VisualState.Setters>
+                </VisualState>
+            </VisualStateGroup>
+        </VisualStateManager.VisualStateGroups>
+        <Grid>
+            <Grid.ColumnDefinitions>
+                <ColumnDefinition Width="auto"/>
+                <ColumnDefinition Width="*"/>
+            </Grid.ColumnDefinitions>
+            <Grid.RowDefinitions>
+                <RowDefinition Height="auto"/>
+                <RowDefinition/>
+                <RowDefinition Height="auto"/>
+            </Grid.RowDefinitions>
+            <StackPanel Grid.Row="0" Margin="20" Grid.Column="1" x:Name="cover" HorizontalAlignment="Left">
+                <Image Source="/Assets/videoThumbSample.png"/>
+                <TextBlock FontSize="20" Text="[Title]" TextWrapping="WrapWholeWords"/>
+                <TextBlock Foreground="Gray" Text="# videos | # views | Updated at: ##-##-## ##:##:##" TextWrapping="WrapWholeWords"/>
+                <Button Margin="0,10,0,0" Background="Transparent">
+                    <Grid>
+                        <Grid.ColumnDefinitions>
+                            <ColumnDefinition Width="Auto"/>
+                            <ColumnDefinition/>
+                        </Grid.ColumnDefinitions>
+                        <PersonPicture Height="50"/>
+                        <TextBlock Grid.Column="1" Text="Channel name" FontSize="18" VerticalAlignment="Center" Margin="10,0,0,0" TextWrapping="WrapWholeWords"/>
+                    </Grid>
+                </Button>
+            </StackPanel>
+
+            <local:VideoGrid Grid.Column="1" Grid.Row="1"/>
+
+            <CommandBar Grid.Row="2" Grid.ColumnSpan="2">
+                <AppBarButton Icon="Globe" Label="Open in browser"/>
+                <AppBarButton Icon="Add" Label="Add to">
+                    <AppBarButton.Flyout>
+                        <MenuFlyout>
+
+                        </MenuFlyout>
+                    </AppBarButton.Flyout>
+                </AppBarButton>
+                <AppBarButton Icon="Refresh" Label="Refresh"/>
+            </CommandBar>
+        </Grid>
+    </ScrollViewer>
+</Page>
diff --git a/FoxTube/Pages/Playlist.xaml.cs b/FoxTube/Pages/PlaylistPage.xaml.cs
similarity index 90%
rename from FoxTube/Pages/Playlist.xaml.cs
rename to FoxTube/Pages/PlaylistPage.xaml.cs
index 2622298..2ec6f8e 100644
--- a/FoxTube/Pages/Playlist.xaml.cs
+++ b/FoxTube/Pages/PlaylistPage.xaml.cs
@@ -20,9 +20,9 @@ namespace FoxTube.Pages
     /// <summary>
     /// An empty page that can be used on its own or navigated to within a Frame.
     /// </summary>
-    public sealed partial class Playlist : Page
+    public sealed partial class PlaylistPage : Page
     {
-        public Playlist()
+        public PlaylistPage()
         {
             this.InitializeComponent();
         }
diff --git a/FoxTube/Pages/Search.xaml b/FoxTube/Pages/Search.xaml
index b943f79..e363e49 100644
--- a/FoxTube/Pages/Search.xaml
+++ b/FoxTube/Pages/Search.xaml
@@ -73,6 +73,7 @@
         </ScrollViewer>
 
         <CommandBar Grid.Row="1" DefaultLabelPosition="Right">
+            <AppBarButton Label="Open in browser" Icon="Globe" Name="inBrowser" Click="inBrowser_Click" IsEnabled="False"/>
             <AppBarButton Label="Refresh" Icon="Refresh" Click="AppBarButton_Click"/>
         </CommandBar>
 
diff --git a/FoxTube/Pages/Search.xaml.cs b/FoxTube/Pages/Search.xaml.cs
index b212af5..c5f37de 100644
--- a/FoxTube/Pages/Search.xaml.cs
+++ b/FoxTube/Pages/Search.xaml.cs
@@ -280,5 +280,10 @@ namespace FoxTube
             }
             catch (NullReferenceException) { }
         }
+
+        private void inBrowser_Click(object sender, RoutedEventArgs e)
+        {
+
+        }
     }
 }