Done search layout

2019-12-04 12:33:06 +03:00
parent 6293037ae5
commit 3b08b18d4f
12 changed files with 347 additions and 81 deletions
@@ -5,7 +5,16 @@ namespace FoxTube.Core.Models
 {
    public class PageView : Page
    {
-        public string Header { get; set; }
+        public string Header
+        {
+            get => _header;
+            set
+            {
+                _header = value;
+                UpdateTitle();
+            }
+        }
+        string _header;
        public object Parameter { get; private set; }

        protected override void OnNavigatedTo(NavigationEventArgs e)
@@ -13,5 +22,7 @@ namespace FoxTube.Core.Models
            base.OnNavigatedTo(e);
            Parameter = e.Parameter;
        }
+
+        public virtual void UpdateTitle() { }
    }
 }
@@ -13,11 +13,6 @@
    Margin="3"
    SizeChanged="UserControl_SizeChanged">

-    <controls:DropShadowPanel BlurRadius="10" ShadowOpacity=".5"
-                              OffsetX="2" OffsetY="2"
-                              Color="Black"
-                              HorizontalContentAlignment="Stretch"
-                              VerticalContentAlignment="Stretch">
    <Button Background="{ThemeResource SystemControlBackgroundChromeMediumBrush}" Style="{StaticResource ButtonRevealStyle}" Windows10version1809:CornerRadius="5" Padding="0" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
        <Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch" RowSpacing="5">
            <Grid.RowDefinitions>
@@ -92,5 +87,4 @@
            </MenuFlyout>
        </Button.ContextFlyout>
    </Button>
-    </controls:DropShadowPanel>
 </UserControl>
@@ -130,6 +130,9 @@
    <Compile Include="Views\Home.xaml.cs">
      <DependentUpon>Home.xaml</DependentUpon>
    </Compile>
+    <Compile Include="Views\Search.xaml.cs">
+      <DependentUpon>Search.xaml</DependentUpon>
+    </Compile>
    <Compile Include="Views\Settings.xaml.cs">
      <DependentUpon>Settings.xaml</DependentUpon>
    </Compile>
@@ -145,6 +148,9 @@
    <Compile Include="Views\SettingsSections\Translate.xaml.cs">
      <DependentUpon>Translate.xaml</DependentUpon>
    </Compile>
+    <Compile Include="Views\Subscriptions.xaml.cs">
+      <DependentUpon>Subscriptions.xaml</DependentUpon>
+    </Compile>
  </ItemGroup>
  <ItemGroup>
    <AppxManifest Include="Package.appxmanifest">
@@ -246,6 +252,10 @@
      <SubType>Designer</SubType>
      <Generator>MSBuild:Compile</Generator>
    </Page>
+    <Page Include="Views\Search.xaml">
+      <SubType>Designer</SubType>
+      <Generator>MSBuild:Compile</Generator>
+    </Page>
    <Page Include="Views\Settings.xaml">
      <SubType>Designer</SubType>
      <Generator>MSBuild:Compile</Generator>
@@ -266,6 +276,10 @@
      <SubType>Designer</SubType>
      <Generator>MSBuild:Compile</Generator>
    </Page>
+    <Page Include="Views\Subscriptions.xaml">
+      <SubType>Designer</SubType>
+      <Generator>MSBuild:Compile</Generator>
+    </Page>
  </ItemGroup>
  <ItemGroup>
    <PackageReference Include="Microsoft.Advertising.XAML">
@@ -127,6 +127,9 @@ namespace FoxTube
            Current.content.Navigate(pageType, param);
        }

+        public static void SetHeader(string title) =>
+            Current.title.Text = title;
+
        void Content_Navigated(object sender, NavigationEventArgs e)
        {
            refresh.Visibility = (e.Content is IRefreshable) ? Visibility.Visible : Visibility.Collapsed;
@@ -140,6 +143,9 @@ namespace FoxTube
                case "Settings":
                    NavigationViewControl.SelectedItem = NavigationViewControl.SettingsItem;
                    break;
+                case "Subscriptions":
+                    NavigationViewControl.SelectedItem = subscriptions;
+                    break;
                default:
                    NavigationViewControl.SelectedItem = null;
                    break;
@@ -177,7 +183,10 @@ namespace FoxTube

        void AutoSuggestBox_QuerySubmitted(AutoSuggestBox sender, AutoSuggestBoxQuerySubmittedEventArgs args)
        {
+            if (args.QueryText.Length < 3)
+                return;
            // TODO: Go to search
+            Navigate(typeof(Views.Search));
        }

        void NavigationViewControl_BackRequested(Microsoft.UI.Xaml.Controls.NavigationView sender, Microsoft.UI.Xaml.Controls.NavigationViewBackRequestedEventArgs args)
@@ -198,6 +207,7 @@ namespace FoxTube
                        Navigate(typeof(Views.Home));
                        break;
                    case "subscriptions":
+                        Navigate(typeof(Views.Subscriptions));
                        break;
                    case "history":
                        break;
@@ -23,6 +23,9 @@ namespace FoxTube.Views
        {
            base.OnNavigatedTo(e);

+            if (e.NavigationMode != NavigationMode.New)
+                return;
+
            for (int i = 0; i < 25; i++)
            {
                recommendedItems.Add(new VideoCard());
@@ -0,0 +1,101 @@
+<models:PageView
+    xmlns:models="using:FoxTube.Core.Models"
+    x:Class="FoxTube.Views.Search"
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:local="using:FoxTube.Views"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    xmlns:controls="using:FoxTube.Controls"
+    xmlns:toolkit="using:Microsoft.Toolkit.Uwp.UI.Controls"
+    mc:Ignorable="d"
+    Header="Search">
+
+    <Grid>
+        <Grid.RowDefinitions>
+            <RowDefinition Height="auto"/>
+            <RowDefinition/>
+        </Grid.RowDefinitions>
+
+        <StackPanel Margin="10,0">
+            <StackPanel.ChildrenTransitions>
+                <TransitionCollection>
+                    <EntranceThemeTransition IsStaggeringEnabled="True"/>
+                    <AddDeleteThemeTransition/>
+                </TransitionCollection>
+            </StackPanel.ChildrenTransitions>
+
+            <TextBlock Style="{StaticResource SubtitleTextBlockStyle}" Text="Found [num] item(s)"/>
+
+            <HyperlinkButton Click="ToggleFilters_Click" Content="Show filters &#xE71C;" FontFamily="Default, Segoe MDL2 Assets"/>
+            <StackPanel Name="filters" Visibility="Collapsed">
+                <GridView Padding="5" SelectionMode="None">
+                    <GridView.Resources>
+                        <Style TargetType="ComboBox">
+                            <Setter Property="Width" Value="150"/>
+                            <Setter Property="SelectedIndex" Value="0"/>
+                        </Style>
+                    </GridView.Resources>
+                    <ComboBox Name="order" Header="Sort by">
+                        <ComboBoxItem Content="Relevance"/>
+                        <ComboBoxItem Content="Upload date"/>
+                        <ComboBoxItem Content="View count"/>
+                        <ComboBoxItem Content="Rating"/>
+                        <ComboBoxItem Content="Title"/>
+                    </ComboBox>
+                    <ComboBox Name="type" Header="Type">
+                        <ComboBoxItem Content="All"/>
+                        <ComboBoxItem Content="Video"/>
+                        <ComboBoxItem Content="Channel"/>
+                        <ComboBoxItem Content="Playlist"/>
+                    </ComboBox>
+                    <ComboBox Name="date" Header="Upload date">
+                        <ComboBoxItem Content="Anytime"/>
+                        <ComboBoxItem Content="Last hour"/>
+                        <ComboBoxItem Content="Today"/>
+                        <ComboBoxItem Content="This week"/>
+                        <ComboBoxItem Content="This month"/>
+                        <ComboBoxItem Content="This year"/>
+                    </ComboBox>
+                    <ComboBox Visibility="Visible" Name="duration" Header="Duration">
+                        <ComboBoxItem Content="Any"/>
+                        <ComboBoxItem Content="Long (&#x3E; 20 minutes)"/>
+                        <ComboBoxItem Content="Medium"/>
+                        <ComboBoxItem Content="Short (&#x3C; 4 minutes)"/>
+                    </ComboBox>
+                </GridView>
+                <Grid ColumnSpacing="10" Margin="5,0">
+                    <Grid.ColumnDefinitions>
+                        <ColumnDefinition Width="auto"/>
+                        <ColumnDefinition Width="auto"/>
+                    </Grid.ColumnDefinitions>
+                    <Button Visibility="Visible" Content="Features" Name="features">
+                        <Button.Flyout>
+                            <MenuFlyout Closing="MenuFlyout_Closing">
+                                <ToggleMenuFlyoutItem Text="HD" Click="ToggleMenuFlyoutItem_Click"/>
+                                <ToggleMenuFlyoutItem Text="3D" Click="ToggleMenuFlyoutItem_Click"/>
+                                <ToggleMenuFlyoutItem Text="Subtitles/CC" Click="ToggleMenuFlyoutItem_Click"/>
+                                <ToggleMenuFlyoutItem Text="Live" Click="ToggleMenuFlyoutItem_Click"/>
+                                <ToggleMenuFlyoutItem Text="Creative Commons License" Click="ToggleMenuFlyoutItem_Click"/>
+                            </MenuFlyout>
+                        </Button.Flyout>
+                    </Button>
+                    <Button Grid.Column="1" Content="Apply"/>
+                </Grid>
+            </StackPanel>
+        </StackPanel>
+
+        <RefreshContainer Grid.Row="1">
+            <ScrollViewer Padding="5,0">
+                <controls:ItemsGrid Grid.Row="1" x:Name="collection"/>
+            </ScrollViewer>
+        </RefreshContainer>
+        
+        <toolkit:Loading Grid.RowSpan="2" IsLoading="False" x:Name="recommendedLoading" VerticalContentAlignment="Center">
+            <toolkit:Loading.Background>
+                <AcrylicBrush BackgroundSource="HostBackdrop" TintColor="{ThemeResource SystemColorBackgroundColor}" TintOpacity=".5"/>
+            </toolkit:Loading.Background>
+            <ProgressRing Height="100" Width="100" IsActive="True"/>
+        </toolkit:Loading>
+    </Grid>
+</models:PageView>
@@ -0,0 +1,60 @@
+using FoxTube.Core.Models;
+using System;
+using System.Collections.Generic;
+using System.IO;
+using System.Linq;
+using System.Runtime.InteropServices.WindowsRuntime;
+using Windows.Foundation;
+using Windows.Foundation.Collections;
+using Windows.UI.Xaml;
+using Windows.UI.Xaml.Controls;
+using Windows.UI.Xaml.Controls.Primitives;
+using Windows.UI.Xaml.Data;
+using Windows.UI.Xaml.Input;
+using Windows.UI.Xaml.Media;
+using Windows.UI.Xaml.Navigation;
+
+namespace FoxTube.Views
+{
+    /// <summary>
+    /// Search results page
+    /// </summary>
+    public sealed partial class Search : PageView, IRefreshable
+    {
+        bool closingByToggle = false;
+
+        public Search() =>
+            InitializeComponent();
+
+        public void RefreshPage()
+        {
+            throw new NotImplementedException();
+        }
+
+        void ToggleFilters_Click(object sender, RoutedEventArgs e)
+        {
+            if(filters.Visibility == Visibility.Visible)
+            {
+                filters.Visibility = Visibility.Collapsed;
+                (sender as HyperlinkButton).Content = "Show filters \xE71C";
+            }
+            else
+            {
+                filters.Visibility = Visibility.Visible;
+                (sender as HyperlinkButton).Content = "Hide filters \xE71C";
+            }
+        }
+
+        private void MenuFlyout_Closing(FlyoutBase sender, FlyoutBaseClosingEventArgs args)
+        {
+            if(closingByToggle)
+            {
+                args.Cancel = true;
+                closingByToggle = false;
+            }
+        }
+
+        void ToggleMenuFlyoutItem_Click(object sender, RoutedEventArgs e) =>
+            closingByToggle = true;
+    }
+}
@@ -16,7 +16,7 @@
    </Page.Resources>

    <Pivot SelectedIndex="0" Name="pivot" IsHeaderItemsCarouselEnabled="False">
-        <PivotItem Name="generalTab" Header="General">
+        <PivotItem Name="generalTab" Header="Preferences">
            <ScrollViewer>
                <settingssections:General/>
            </ScrollViewer>
@@ -17,6 +17,12 @@
        </controls:DropShadowPanel>

        <StackPanel>
+            <StackPanel.ChildrenTransitions>
+                <TransitionCollection>
+                    <EntranceThemeTransition IsStaggeringEnabled="True"/>
+                </TransitionCollection>
+            </StackPanel.ChildrenTransitions>
+            
            <TextBlock Text="FoxTube" Style="{StaticResource SubheaderTextBlockStyle}"/>
            <TextBlock Name="version" Text="[currentVersion]" Style="{StaticResource CaptionTextBlockStyle}" FontStyle="Italic" Margin="0,-5,0,0"/>

@@ -7,14 +7,13 @@
    mc:Ignorable="d">

    <StackPanel>
-        <TextBlock Text="Preferences" Style="{StaticResource SubheaderTextBlockStyle}"/>
-
-        <StackPanel Margin="0,0,0,10">
        <StackPanel.ChildrenTransitions>
            <TransitionCollection>
-                    <AddDeleteThemeTransition/>
+                <EntranceThemeTransition IsStaggeringEnabled="True"/>
            </TransitionCollection>
        </StackPanel.ChildrenTransitions>
+        
+        <StackPanel Margin="0,0,0,10">
            <TextBlock Text="Region &#x26; search" Style="{StaticResource TitleTextBlockStyle}"/>
            <ComboBox Header="App interface language" Width="250" Name="language" SelectionChanged="LanguageChanged">
                <ComboBoxItem Content="English (United States)" Tag="en-US"/>
@@ -0,0 +1,41 @@
+<models:PageView
+    xmlns:models="using:FoxTube.Core.Models"
+    x:Class="FoxTube.Views.Subscriptions"
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:local="using:FoxTube.Views"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    xmlns:controls="using:Microsoft.Toolkit.Uwp.UI.Controls"
+    mc:Ignorable="d"
+    Header="Subscriptions">
+
+    <ListView Padding="10" SelectionMode="None">
+        <ListViewItem Padding="0" HorizontalAlignment="Left">
+            <Grid Height="150" Width="700" Padding="20" ColumnSpacing="20" CornerRadius="20">
+                <Grid.ColumnDefinitions>
+                    <ColumnDefinition Width="auto"/>
+                    <ColumnDefinition/>
+                    <ColumnDefinition Width="auto"/>
+                </Grid.ColumnDefinitions>
+
+                <Grid.Background>
+                    <ImageBrush ImageSource="https://yt3.ggpht.com/TckH7MhPH7UcxPnHeEj6R78xe1uOmrlHdUD1Usy7sr36xLDzl86NxAyfmDOIUrxl6kpiBgtKgA=w1060-fcrop64=1,00005a57ffffa5a8-k-c0xffffffff-no-nd-rj"/>
+                </Grid.Background>
+
+                <Grid Grid.ColumnSpan="3" Margin="-20">
+                    <Grid.Background>
+                        <AcrylicBrush TintColor="Black" TintOpacity=".5" Opacity=".97"/>
+                    </Grid.Background>
+                </Grid>
+
+                <controls:ImageEx CornerRadius="999" Source="https://yt3.ggpht.com/a/AGF-l7_hHK5yjEPhlM72Tmk26zoOVkNx88pWoZnFVQ=s88-c-k-c0xffffffff-no-rj-mo"/>
+
+                <StackPanel Grid.Column="1">
+                    <TextBlock Style="{StaticResource SubtitleTextBlockStyle}" Text="[BadComedian]"/>
+                    <TextBlock Text="Обзоры кино. Юмор, ирония, ненависть, плохие российские / зарубежные фильмы. &#xD;ПРИЯТНОГО ПРОСМОТРА." TextTrimming="CharacterEllipsis" TextWrapping="WrapWholeWords" MaxLines="4"/>
+                </StackPanel>
+            </Grid>
+        </ListViewItem>
+    </ListView>
+</models:PageView>
@@ -0,0 +1,27 @@
+using FoxTube.Core.Models;
+using System;
+using System.Collections.Generic;
+using System.IO;
+using System.Linq;
+using System.Runtime.InteropServices.WindowsRuntime;
+using Windows.Foundation;
+using Windows.Foundation.Collections;
+using Windows.UI.Xaml;
+using Windows.UI.Xaml.Controls;
+using Windows.UI.Xaml.Controls.Primitives;
+using Windows.UI.Xaml.Data;
+using Windows.UI.Xaml.Input;
+using Windows.UI.Xaml.Media;
+using Windows.UI.Xaml.Navigation;
+
+namespace FoxTube.Views
+{
+    /// <summary>
+    /// User's subscriptions list
+    /// </summary>
+    public sealed partial class Subscriptions : PageView
+    {
+        public Subscriptions() =>
+            InitializeComponent();
+    }
+}