265 lines
18 KiB
XML
265 lines
18 KiB
XML
<Page
|
|
x:Class="FoxTube.MainPage"
|
|
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
|
|
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
|
|
xmlns:local="using:FoxTube"
|
|
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
|
|
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
|
|
mc:Ignorable="d">
|
|
|
|
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
|
|
<Grid.RowDefinitions>
|
|
<RowDefinition Height="50" />
|
|
<RowDefinition Height="*" />
|
|
</Grid.RowDefinitions>
|
|
<Grid Grid.Row="0" Background="Red">
|
|
<Grid.ColumnDefinitions>
|
|
<ColumnDefinition Width="50" />
|
|
<ColumnDefinition Width="*"/>
|
|
<ColumnDefinition Width="50"/>
|
|
<ColumnDefinition Width="50"/>
|
|
<ColumnDefinition Width="4"/>
|
|
<ColumnDefinition Width="50"/>
|
|
<ColumnDefinition Width="50"/>
|
|
<ColumnDefinition Width="50"/>
|
|
<ColumnDefinition Width="50"/>
|
|
<ColumnDefinition Width="350"/>
|
|
</Grid.ColumnDefinitions>
|
|
<Button Name="menuButton"
|
|
FontFamily="Segoe MDL2 Assets" FontSize="20" Content=""
|
|
Foreground="White" Background="Red"
|
|
Grid.Column="0"
|
|
Click="menuButton_Click"
|
|
HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
|
|
<TextBlock Grid.Column="1" Text="Home" FontSize="20" FontWeight="Bold" Margin="5, 0, 0, 0" HorizontalAlignment="Left" VerticalAlignment="Center" Foreground="White"/>
|
|
<Button Name="goLive" Grid.Column="2" ToolTipService.ToolTip="Go to Live!" Visibility="Collapsed"
|
|
FontFamily="Segoe MDL2 Assets" Content="" Foreground="White"
|
|
Width="50" Height="50" Background="#00000000" RelativePanel.LeftOf="searchField"/>
|
|
<Button Name="upload" Grid.Column="3" ToolTipService.ToolTip="Upload a video" Visibility="Collapsed"
|
|
FontFamily="Segoe MDL2 Assets" Content="" Foreground="White"
|
|
Width="50" Height="50" Background="#00000000" RelativePanel.LeftOf="searchField"/>
|
|
<Line Grid.Column="4" Y1="40" Y2="10" StrokeThickness="1" Stroke="White" HorizontalAlignment="Center" Visibility="Collapsed"/>
|
|
<Button Name="refresh" Grid.Column="5" ToolTipService.ToolTip="Refresh" Click="refresh_Click"
|
|
FontFamily="Segoe MDL2 Assets" Content="" Foreground="White"
|
|
Width="50" Height="50" Background="#00000000" RelativePanel.LeftOf="searchField"/>
|
|
<Button Name="notificationMenu" Grid.Column="6" ToolTipService.ToolTip="Notifications" Click="notification_Click"
|
|
FontFamily="Segoe MDL2 Assets" Content="" Foreground="White"
|
|
Width="50" Height="50" Background="#00000000" RelativePanel.LeftOf="searchField"/>
|
|
<Popup Grid.Column="6" Margin="0,50,0,0" Name="notificationPane" IsOpen="True" IsLightDismissEnabled="True">
|
|
<StackPanel Width="350" Background="WhiteSmoke" Padding="0,10,0,0">
|
|
<TextBlock Text="Notifications" HorizontalAlignment="Center" FontWeight="Bold"/>
|
|
<StackPanel Margin="0,10,0,0">
|
|
<TextBlock Text="You have no any notification" Name="noNotifText" Foreground="Gray" FontStyle="Italic" Padding="10" Visibility="Collapsed"/>
|
|
<StackPanel Name="notificationPanel" Visibility="Visible">
|
|
<ListBox Width="350" Padding="0,0,0,10" Name="notificationArray">
|
|
<ListBoxItem Padding="10" MinHeight="80">
|
|
<StackPanel Orientation="Horizontal">
|
|
<PersonPicture Height="50" HorizontalAlignment="Left" Margin="0,0,10,0" VerticalAlignment="Top" ProfilePicture="Assets/LogoAvatar.png"/>
|
|
<StackPanel MaxWidth="270">
|
|
<TextBlock FontSize="14" FontStyle="Italic" Foreground="Gray" Text="Channel name"/>
|
|
<TextBlock TextWrapping="WrapWholeWords" Text="This is very long notification. One, two, three, four, five, six, seven, eight, nine, ten."/>
|
|
<TextBlock Foreground="Gray" Text="HH:MM TT" FontSize="13"/>
|
|
</StackPanel>
|
|
</StackPanel>
|
|
</ListBoxItem>
|
|
<ListBoxItem Padding="10" VerticalAlignment="Stretch" Background="LightGray" MinHeight="80" Height="100">
|
|
<StackPanel>
|
|
<TextBlock FontSize="14" FontStyle="Italic" Foreground="Gray" Text="Channel name"/>
|
|
<TextBlock TextWrapping="WrapWholeWords" Text="This is very long notification. One, two, three, four, five, six, seven, eight, nine, ten."/>
|
|
<TextBlock Foreground="Gray" Text="HH:MM TT" FontSize="13"/>
|
|
</StackPanel>
|
|
</ListBoxItem>
|
|
</ListBox>
|
|
<Button Content="Clear all" HorizontalAlignment="Right" Margin="10,0,10,10" Name="clearNotifications" Click="clearNotifications_Click"/>
|
|
</StackPanel>
|
|
</StackPanel>
|
|
</StackPanel>
|
|
</Popup>
|
|
<Button Name="feddback" Grid.Column="7" ToolTipService.ToolTip="Send feedback"
|
|
FontFamily="Segoe MDL2 Assets" Content="" Foreground="White"
|
|
Width="50" Height="50" Background="#00000000" RelativePanel.LeftOf="searchField"/>
|
|
<Button Name="account" Grid.Column="8" ToolTipService.ToolTip="Sign in"
|
|
FontFamily="Segoe MDL2 Assets" Content="" Foreground="White"
|
|
Width="50" Height="50" Background="#00000000" RelativePanel.LeftOf="searchField">
|
|
<Button.Flyout>
|
|
<MenuFlyout>
|
|
<MenuFlyoutItem Text="Sign in with existing account"/>
|
|
<MenuFlyoutItem Text="Create a new Google account"/>
|
|
</MenuFlyout>
|
|
</Button.Flyout>
|
|
</Button>
|
|
<Popup Grid.Column="8" Margin="0,50,0,0" IsOpen="False" IsLightDismissEnabled="True">
|
|
<StackPanel Width="300" Background="WhiteSmoke">
|
|
<ListBox>
|
|
<ListBoxItem Height="75">
|
|
<StackPanel Orientation="Horizontal">
|
|
<!--<Ellipse Height="50" Width="50" >
|
|
<Ellipse.Fill>
|
|
<ImageBrush ImageSource="Assets/Square150x150Logo.scale-100.png" Stretch="UniformToFill"/>
|
|
</Ellipse.Fill>
|
|
</Ellipse>-->
|
|
<PersonPicture Height="50" Margin="0,0,5,0"></PersonPicture>
|
|
<!--<Image Width="50" Height="50" Source="Assets/Square150x150Logo.scale-100.png" Margin="0,0,5,0" />-->
|
|
<StackPanel VerticalAlignment="Center">
|
|
<TextBlock Text="Account name"/>
|
|
<TextBlock Foreground="Gray" FontStyle="Italic" Text="example@mail.com"/>
|
|
</StackPanel>
|
|
</StackPanel>
|
|
</ListBoxItem>
|
|
<ListBoxItem>
|
|
<TextBlock Text="Add another account"/>
|
|
</ListBoxItem>
|
|
<ListBoxItem Height="10" Margin="0" Padding="0" IsEnabled="False">
|
|
<Line X1="10" X2="290" Stroke="Gray" StrokeThickness="2"/>
|
|
</ListBoxItem>
|
|
<ListBoxItem>
|
|
<TextBlock Text="Log out"/>
|
|
</ListBoxItem>
|
|
</ListBox>
|
|
</StackPanel>
|
|
</Popup>
|
|
<TextBox Name="searchField" Grid.Column="9" ToolTipService.ToolTip="Search" Margin="4" Width="350" Height="50" Padding="14,11,55,14" PlaceholderText="Search" BorderThickness="0" Background="#7FFFFFFF" Text="" AcceptsReturn="True"/>
|
|
<Button Name="searchButton" Grid.Column="9" HorizontalAlignment="Right"
|
|
Width="42" Height="42" Margin="4"
|
|
RelativePanel.AlignRightWithPanel="True"
|
|
Background="Transparent"
|
|
FontFamily="Segoe MDL2 Assets" Content="" FontSize="20" FocusVisualSecondaryBrush="#66FFFFFF" FocusVisualPrimaryBrush="White" Foreground="Black"/>
|
|
<Popup Margin="0,50,0,0" Grid.Column="9" Name="searchSuggestions" IsOpen="False">
|
|
<StackPanel>
|
|
<StackPanel Width="350" Background="WhiteSmoke" Name="searchStandby">
|
|
<TextBlock Padding="10,0,0,0" Text="Loading results... Please, wait."/>
|
|
</StackPanel>
|
|
<StackPanel Name="searchSuggestionsList">
|
|
<ListBox Width="350">
|
|
<ListBoxItem Height="35" Padding="10,0,0,0">
|
|
<StackPanel Orientation="Horizontal">
|
|
<TextBlock Style="{StaticResource ItemIcon}" Text=""/>
|
|
<TextBlock Style="{StaticResource MenuItem}" Text="Suggestion 1"/>
|
|
</StackPanel>
|
|
</ListBoxItem>
|
|
<ListBoxItem Height="35" Padding="10,0,0,0">
|
|
<StackPanel Orientation="Horizontal">
|
|
<TextBlock Style="{StaticResource ItemIcon}" Text=""/>
|
|
<TextBlock Style="{StaticResource MenuItem}" Text="Suggestion 2"/>
|
|
</StackPanel>
|
|
</ListBoxItem>
|
|
<ListBoxItem Height="35" Padding="10,0,0,0">
|
|
<StackPanel Orientation="Horizontal">
|
|
<TextBlock Style="{StaticResource ItemIcon}" Text=""/>
|
|
<TextBlock Style="{StaticResource MenuItem}" Text="Suggestion 3"/>
|
|
</StackPanel>
|
|
</ListBoxItem>
|
|
</ListBox>
|
|
<ListBox Width="350">
|
|
<ListBoxItem Height="17" Margin="0" Padding="10,0,0,0" IsEnabled="False">
|
|
<StackPanel Orientation="Horizontal" Margin="0" Padding="0, 0, 0, 0">
|
|
<TextBlock Text="Search history" Foreground="Gray" FontSize="12" Margin="0" Padding="0, 0, 5, 0"/>
|
|
<Line X1="0" Y1="10" X2="250" Y2="10" Stroke="Gray" StrokeThickness="2"/>
|
|
</StackPanel>
|
|
</ListBoxItem>
|
|
<ListBoxItem Height="35" Padding="10,0,0,0">
|
|
<StackPanel Orientation="Horizontal">
|
|
<TextBlock Style="{StaticResource ItemIcon}" Text=""/>
|
|
<TextBlock Style="{StaticResource MenuItem}" Text="Suggestion 4"/>
|
|
</StackPanel>
|
|
</ListBoxItem>
|
|
<ListBoxItem Height="35" Padding="10,0,0,0">
|
|
<StackPanel Orientation="Horizontal">
|
|
<TextBlock Style="{StaticResource ItemIcon}" Text=""/>
|
|
<TextBlock Style="{StaticResource MenuItem}" Text="Suggestion 5"/>
|
|
</StackPanel>
|
|
</ListBoxItem>
|
|
</ListBox>
|
|
</StackPanel>
|
|
</StackPanel>
|
|
</Popup>
|
|
</Grid>
|
|
<SplitView Name="menu" Grid.Row="1" OpenPaneLength="250" CompactPaneLength="50" DisplayMode="CompactInline" IsPaneOpen="True">
|
|
<SplitView.Pane>
|
|
<RelativePanel>
|
|
<ListBox SelectionChanged="ListBox_SelectionChanged" Name="topHamburger">
|
|
<ListBoxItem Name="homeMenu" IsSelected="True">
|
|
<StackPanel Orientation="Horizontal">
|
|
<TextBlock Style="{StaticResource ItemIcon}" Text=""/>
|
|
<TextBlock Style="{StaticResource MenuItem}" Text="Home"/>
|
|
</StackPanel>
|
|
</ListBoxItem>
|
|
<ListBoxItem Name="gamingMenu">
|
|
<StackPanel Orientation="Horizontal">
|
|
<TextBlock Style="{StaticResource ItemIcon}" Text=""/>
|
|
<TextBlock Style="{StaticResource MenuItem}" Text="Gaming"/>
|
|
</StackPanel>
|
|
</ListBoxItem>
|
|
<ListBoxItem Name="historyMenu">
|
|
<StackPanel Orientation="Horizontal">
|
|
<TextBlock Style="{StaticResource ItemIcon}" Text=""/>
|
|
<TextBlock Style="{StaticResource MenuItem}" Text="History"/>
|
|
</StackPanel>
|
|
</ListBoxItem>
|
|
<ListBoxItem Name="likedMenu">
|
|
<StackPanel Orientation="Horizontal">
|
|
<TextBlock Style="{StaticResource ItemIcon}" Text=""/>
|
|
<TextBlock Style="{StaticResource MenuItem}" Text="Liked videos"/>
|
|
</StackPanel>
|
|
</ListBoxItem>
|
|
<ListBoxItem Name="watchLaterMenu">
|
|
<StackPanel Orientation="Horizontal">
|
|
<TextBlock Style="{StaticResource ItemIcon}" Text=""/>
|
|
<TextBlock Style="{StaticResource MenuItem}" Text="Watch later"/>
|
|
</StackPanel>
|
|
</ListBoxItem>
|
|
<ListBoxItem Name="subscriptionsTitle" Height="17" Margin="0" Padding="5, 0, 0, 0" IsEnabled="False">
|
|
<StackPanel Orientation="Horizontal" Margin="0" Padding="0, 0, 0, 0">
|
|
<TextBlock Name="subsMenuTitle" Text="Subscriptions" Foreground="Gray" FontSize="12" Margin="0" Padding="0, 0, 5, 0"/>
|
|
<Line Name="subsMenuStroke" X1="0" Y1="10" X2="165" Y2="10" Stroke="Gray" StrokeThickness="2"/>
|
|
</StackPanel>
|
|
</ListBoxItem>
|
|
<ListBoxItem Height="60" IsEnabled="False" Name="subsLogErr" Visibility="Visible">
|
|
<StackPanel Orientation="Horizontal">
|
|
<TextBlock FontFamily="Default, Segoe MDL2 Assets" Text="Press  and add an account to see your featured channels here" Width="225" Height="35" HorizontalTextAlignment="Center" Foreground="Gray" TextWrapping="WrapWholeWords"/>
|
|
</StackPanel>
|
|
</ListBoxItem>
|
|
</ListBox>
|
|
<ListBox RelativePanel.Below="topHamburger" Visibility="Collapsed">
|
|
<ListBoxItem>
|
|
<StackPanel Orientation="Horizontal">
|
|
<PersonPicture Height="23" Margin="0,0,17,0" Padding="0"/>
|
|
<TextBlock Style="{StaticResource MenuItem}" Text="Channel name"/>
|
|
</StackPanel>
|
|
</ListBoxItem>
|
|
</ListBox>
|
|
<ListBox RelativePanel.AlignBottomWithPanel="True" SelectionChanged="bottomHaburgerSelectionChanged" Name="bottomHaburger">
|
|
<ListBoxItem Name="channelMenu">
|
|
<StackPanel Orientation="Horizontal">
|
|
<TextBlock Style="{StaticResource ItemIcon}" Text=""/>
|
|
<TextBlock Style="{StaticResource MenuItem}" Text="My channel"/>
|
|
</StackPanel>
|
|
</ListBoxItem>
|
|
<ListBoxItem Name="dashboardMenu" Visibility="Collapsed">
|
|
<StackPanel Orientation="Horizontal">
|
|
<TextBlock Style="{StaticResource ItemIcon}" Text=""/>
|
|
<TextBlock Style="{StaticResource MenuItem}" Text="Creator studio"/>
|
|
</StackPanel>
|
|
</ListBoxItem>
|
|
<ListBoxItem Name="noadsMenu" Visibility="Visible">
|
|
<StackPanel Orientation="Horizontal">
|
|
<TextBlock Style="{StaticResource ItemIcon}" Text=""/>
|
|
<TextBlock Style="{StaticResource MenuItem}" Text="Remove ads (2$)"/>
|
|
</StackPanel>
|
|
</ListBoxItem>
|
|
<ListBoxItem Name="settingsMenu">
|
|
<StackPanel Orientation="Horizontal">
|
|
<TextBlock Style="{StaticResource ItemIcon}" Text=""/>
|
|
<TextBlock Style="{StaticResource MenuItem}" Text="Settings"/>
|
|
</StackPanel>
|
|
</ListBoxItem>
|
|
</ListBox>
|
|
</RelativePanel>
|
|
</SplitView.Pane>
|
|
<SplitView.Content>
|
|
<Frame Name="content"/>
|
|
</SplitView.Content>
|
|
</SplitView>
|
|
</Grid>
|
|
</Page>
|