Changed icon

Setting up notification system

FoxTube/FoxTube.csproj

@@ -101,6 +101,7 @@
     <Compile Include="MainPage.xaml.cs">
       <DependentUpon>MainPage.xaml</DependentUpon>
     </Compile>
+    <Compile Include="Notification.cs" />
     <Compile Include="Properties\AssemblyInfo.cs" />
   </ItemGroup>
   <ItemGroup>
@@ -176,6 +177,9 @@
     <PackageReference Include="Microsoft.NETCore.UniversalWindowsPlatform">
       <Version>6.0.8</Version>
     </PackageReference>
+    <PackageReference Include="Microsoft.Toolkit.Uwp.Notifications">
+      <Version>2.2.0</Version>
+    </PackageReference>
   </ItemGroup>
   <ItemGroup />
   <PropertyGroup Condition=" '$(VisualStudioVersion)' == '' or '$(VisualStudioVersion)' &lt; '14.0' ">

FoxTube/MainPage.xaml

@@ -42,23 +42,33 @@
             <Button Name="refresh" Grid.Column="5" ToolTipService.ToolTip="Refresh"
                         FontFamily="Segoe MDL2 Assets" Content="&#xE149;" Foreground="White"
                         Width="50" Height="50" Background="#00000000" RelativePanel.LeftOf="searchField"/>
-            <Button Name="notification" Grid.Column="6" ToolTipService.ToolTip="Notifications" Click="notification_Click"
+            <Button Name="notificationMenu" Grid.Column="6" ToolTipService.ToolTip="Notifications" Click="notification_Click"
                         FontFamily="Segoe MDL2 Assets" Content="&#xED0D;" Foreground="White"
                         Width="50" Height="50" Background="#00000000" RelativePanel.LeftOf="searchField"/>
-            <Popup Grid.Column="6" Margin="0,50,0,0" Name="notificationPane" LostFocus="notificationPane_LostFocus">
-                <StackPanel Width="350" Background="WhiteSmoke">
+            <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>
-                        <TextBlock Text="You have no any notification" Foreground="Gray" FontStyle="Italic" Padding="10" Name="noNotifications"/>
-                        <ListBox Width="350" Padding="0,0,0,10" Name="notificationArray">
-                            <ListBoxItem Padding="10,0,10,0" Height="Auto">
-                                <StackPanel>
-                                    <TextBlock FontSize="14" FontStyle="Italic" Foreground="Gray" Text="Channel name"/>
-                                    <TextBlock Style="{StaticResource MenuItem}" TextWrapping="WrapWholeWords" Text="Message"/>
-                                    <TextBlock Foreground="Gray" Text="Timecode" FontSize="13"/>
-                                </StackPanel>
-                            </ListBoxItem>
-                        </ListBox>
+                    <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>
+                                        <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>
+                                <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>
@@ -75,13 +85,43 @@
                     </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="&#xE11A;" FontSize="20" FocusVisualSecondaryBrush="#66FFFFFF" FocusVisualPrimaryBrush="White" Foreground="Black"/>
-            <Popup Margin="0,50,0,0" Grid.Column="9" Name="searchSuggestions">
+            <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."/>
@@ -114,8 +154,6 @@
                                     <Line X1="0" Y1="10" X2="250" Y2="10" Stroke="Gray" StrokeThickness="2"/>
                                 </StackPanel>
                             </ListBoxItem>
-                        </ListBox>
-                        <ListBox Width="350">
                             <ListBoxItem Height="35" Padding="10,0,0,0">
                                 <StackPanel Orientation="Horizontal">
                                     <TextBlock Style="{StaticResource ItemIcon}" Text="&#xE81C;"/>

FoxTube/MainPage.xaml.cs

@@ -15,6 +15,7 @@ using Windows.UI.Xaml.Input;
 using Windows.UI.Xaml.Media;
 using Windows.UI.Xaml.Navigation;
 using System.Diagnostics;
+using Microsoft.Toolkit.Uwp.Notifications;
 
 // The Blank Page item template is documented at https://go.microsoft.com/fwlink/?LinkId=402352&clcid=0x409
 
@@ -25,6 +26,7 @@ namespace FoxTube
     /// </summary>
     public sealed partial class MainPage : Page
     {
+        List<Notification> notifications = new List<Notification>();
         public MainPage()
         {
             this.InitializeComponent();
@@ -49,6 +51,7 @@ namespace FoxTube
         private void menuButton_Click(object sender, RoutedEventArgs e)
         {
             menu.IsPaneOpen = !menu.IsPaneOpen;
+            AddNotification(new Notification("Internal notification", "Menu state has been changed", DateTime.Now, NotificationType.Update));
 
             if(menu.IsPaneOpen)
             {
@@ -68,6 +71,46 @@ namespace FoxTube
             }
         }
 
+        public void AddNotification(Notification notification , bool needNotify = true)
+        {
+            notificationMenu.Content = "";
+            notifications.Add(notification);
+            noNotifText.Visibility = Visibility.Collapsed;
+            notificationPanel.Visibility = Visibility.Visible;
+            StackPanel stackPanel = new StackPanel();
+            //Channel
+            stackPanel.Children.Add(new TextBlock()
+            {
+                FontSize = 14,
+                FontStyle = Windows.UI.Text.FontStyle.Italic,
+                Foreground = new SolidColorBrush(Colors.Gray),
+                Text = notification.author
+            });
+            //Content
+            stackPanel.Children.Add(new TextBlock()
+            {
+                TextWrapping = TextWrapping.WrapWholeWords,
+                Text = notification.message,
+            });
+            //Time
+            stackPanel.Children.Add(new TextBlock()
+            {
+                FontSize = 13,
+                Foreground = new SolidColorBrush(Colors.Gray),
+                Text = notification.returnTimecode()
+            });
+
+            notificationArray.Items.Add(new ListBoxItem()
+            {
+                Padding = new Thickness(10),
+                MinHeight = 80,
+                Content = stackPanel
+            });
+
+            //Sending notification
+
+        }
+
         private void ListBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
         {
             try
@@ -89,13 +132,16 @@ namespace FoxTube
         private void notification_Click(object sender, RoutedEventArgs e)
         {
             notificationPane.IsOpen = !notificationPane.IsOpen;
-            noNotifications.Visibility = Visibility.Visible;
-            notificationArray.Visibility = Visibility.Collapsed;
+            notificationMenu.Content = "";
         }
 
-        private void notificationPane_LostFocus(object sender, RoutedEventArgs e)
+        private void clearNotifications_Click(object sender, RoutedEventArgs e)
         {
-            notificationPane.IsOpen = false;
+            notifications.Clear();
+            notificationArray.Items.Clear();
+
+            noNotifText.Visibility = Visibility.Visible;
+            notificationPanel.Visibility = Visibility.Collapsed;
         }
     }
 }

FoxTube/Notification.cs

@@ -0,0 +1,38 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+
+namespace FoxTube
+{
+    public enum NotificationType
+    {
+        NewVideo, NewComment, NewPost, Update
+    }
+
+    public class Notification
+    {
+        public string author { get; set; }
+        public string message { get; set; }
+        public DateTime time { get; set; }
+        public NotificationType Type { get; set; }
+
+        public Notification(string channelName, string content, DateTime date, NotificationType type)
+        {
+            author = channelName;
+            message = content;
+            time = date;
+            Type = type;
+        }
+
+        public string returnTimecode(bool twelveFormat = true)
+        {
+            TimeSpan diff = DateTime.Now - time;
+            if (diff.TotalDays == 0)
+                return string.Format("{0}:{1}", time.Hour, time.Minute);
+            else
+                return string.Format("{0}/{1} {2}:{3}", time.Month, time.Day, time.Hour, time.Minute);
+        }
+    }
+}

FoxTube/Package.appxmanifest

@@ -15,7 +15,7 @@
   </Resources>
   <Applications>
     <Application Id="App" Executable="$targetnametoken$.exe" EntryPoint="FoxTube.App">
-      <uap:VisualElements DisplayName="FoxTube" Square150x150Logo="Assets\Square150x150Logo.png" Square44x44Logo="Assets\Square44x44Logo.png" Description="FoxTube" BackgroundColor="transparent">
+      <uap:VisualElements DisplayName="FoxTube" Square150x150Logo="Assets\Square150x150Logo.png" Square44x44Logo="Assets\Square44x44Logo.png" Description="YouTube Client" BackgroundColor="transparent">
         <uap:DefaultTile Wide310x150Logo="Assets\Wide310x150Logo.png" ShortName="FoxTube" Square310x310Logo="Assets\LargeTile.png" Square71x71Logo="Assets\SmallTile.png">
           <uap:ShowNameOnTiles>
             <uap:ShowOn Tile="square150x150Logo" />