Notifications UI web view2

src/DynamoCoreWpf/Controls/ShortcutToolbar.xaml

@@ -8,6 +8,7 @@
              xmlns:um="clr-namespace:Dynamo.Updates"
              xmlns:updateManager="clr-namespace:Dynamo.Updates;assembly=DynamoCore"
              xmlns:p="clr-namespace:Dynamo.Wpf.Properties"
+             xmlns:fa="http://schemas.fontawesome.io/icons/"
              mc:Ignorable="d"
              Height="Auto"
              Width="Auto"
@@ -139,6 +140,29 @@
                 <Menu HorizontalAlignment="Right"
                       Style="{StaticResource MainMenu}"
                       IsMainMenu="True">
+                    <MenuItem Name="MenuItem">
+                        <MenuItem.Header>
+                                <Button x:Name="notificationsButton" 
+                                        BorderBrush="Transparent"                                         
+                                        Background="Transparent">
+                                    <DockPanel>
+                                    <fa:FontAwesome Margin="0,0,20,0"  DockPanel.Dock="Bottom" Icon="BellOutline" Foreground="{StaticResource Blue400Brush}" FontSize="20px"/>
+                                    <Border DockPanel.Dock="Top" Background="{StaticResource Blue400Brush}" CornerRadius="2" 
+                                                Padding="2" Height="15" Width="15" VerticalAlignment="Center" 
+                                                HorizontalAlignment="Center">
+                                            <!--TODO insert data bind for the notifications -->
+                                        <TextBlock     
+                                                FontFamily="{StaticResource ArtifaktElementRegular}"
+                                                Foreground="White" 
+                                                FontWeight="Bold" 
+                                                TextAlignment="Center"
+                                                FontSize="9">99
+                                        </TextBlock>
+                                        </Border>                                   
+                                    </DockPanel>                                   
+                                </Button>                                
+                        </MenuItem.Header>
+                    </MenuItem>
                     <MenuItem Name="exportMenu"
                               Cursor="Hand"
                               Focusable="False"

src/DynamoCoreWpf/Controls/ShortcutToolbar.xaml.cs

@@ -1,6 +1,5 @@
 using System.Collections.ObjectModel;
 using System.ComponentModel;
-using System.Windows;
 using System.Windows.Controls;
 using System.Windows.Media;
 using System.Windows.Media.Imaging;

src/DynamoCoreWpf/Properties/AssemblyInfo.cs

@@ -45,6 +45,7 @@
 [assembly: InternalsVisibleTo("LintingViewExtension")]
 [assembly: InternalsVisibleTo("GraphMetadataViewExtension")]
 [assembly: InternalsVisibleTo("PackageDetailsViewExtension")]
+[assembly: InternalsVisibleTo("Notifications")]
 [assembly: InternalsVisibleTo("IronPythonTests")]
 [assembly: InternalsVisibleTo("DynamoPackagesWPF")]
 

src/DynamoCoreWpf/Utilities/ResourceUtilities.cs

@@ -263,8 +263,12 @@ internal static Stream LoadResourceByUrl(string url)
             return textStream;
         }
 
-
-        internal static string ConvertToBase64(Stream stream)
+        /// <summary>
+        /// This method converts a stream to base64 string
+        /// </summary>
+        /// <param name="stream"></param>
+        /// <returns></returns>
+        public static string ConvertToBase64(Stream stream)
         {
             byte[] bytes;
             using (var memoryStream = new MemoryStream())

src/DynamoCoreWpf/Views/Core/DynamoView.xaml.cs

@@ -95,6 +95,8 @@ public partial class DynamoView : Window, IDisposable
 
         private FileTrustWarning fileTrustWarningPopup = null;
 
+        internal ShortcutToolbar ShortcutBar { get { return shortcutBar; } }
+
         /// <summary>
         /// Constructor
         /// </summary>

src/Notifications/NotificationCenterController.cs

@@ -0,0 +1,107 @@
+using Dynamo.Controls;
+using Dynamo.Notifications.View;
+using System;
+using System.Collections.Generic;
+using System.IO;
+using System.Linq;
+using System.Reflection;
+using System.Text;
+using System.Threading.Tasks;
+using System.Windows;
+using System.Windows.Controls;
+using System.Windows.Controls.Primitives;
+
+namespace Dynamo.Notifications
+{
+    public class NotificationCenterController
+    {
+        NotificationUI notificationUIPopup;
+        DynamoView dynamoView;
+        Button notificationsButton;
+
+        private static int notificationPopupHorizontalOffset = -285;
+        private static int notificationPopupVerticalOffset = 10;
+
+        private static string htmlEmbeddedFile = "Dynamo.Notifications.Web.index.html";
+        private static string fontEmbeddedFile = "Dynamo.Notifications.Web.ArtifaktElement-Regular.woff";
+        private static string jsEmbeddedFile = "Dynamo.Notifications.Web.index.bundle.js";
+
+        public NotificationCenterController(DynamoView dynamoView)
+        {
+            var shortcutBar = dynamoView.ShortcutBar;
+            var notificationsButton = (Button)shortcutBar.FindName("notificationsButton");
+
+            notificationUIPopup = new NotificationUI();
+            notificationUIPopup.IsOpen = false;
+            notificationUIPopup.PlacementTarget = notificationsButton;
+            notificationUIPopup.Placement = PlacementMode.Bottom;
+            notificationUIPopup.HorizontalOffset = notificationPopupHorizontalOffset;
+            notificationUIPopup.VerticalOffset = notificationPopupVerticalOffset;
+
+            this.dynamoView = dynamoView;
+            this.notificationsButton = notificationsButton;
+
+            this.dynamoView.SizeChanged += DynamoView_SizeChanged;
+            this.dynamoView.LocationChanged += DynamoView_LocationChanged;
+            this.notificationsButton.Click += NotificationsButton_Click;
+
+            notificationUIPopup.webView.EnsureCoreWebView2Async();
+            notificationUIPopup.webView.CoreWebView2InitializationCompleted += WebView_CoreWebView2InitializationCompleted;            
+        }
+
+        private void WebView_CoreWebView2InitializationCompleted(object sender, Microsoft.Web.WebView2.Core.CoreWebView2InitializationCompletedEventArgs e)
+        {
+            var assembly = Assembly.GetExecutingAssembly();
+            string htmlString = string.Empty;
+
+            using (Stream stream = assembly.GetManifestResourceStream(htmlEmbeddedFile))
+            using (StreamReader reader = new StreamReader(stream))
+            {
+                htmlString = reader.ReadToEnd();
+            }
+
+            using (Stream stream = assembly.GetManifestResourceStream(jsEmbeddedFile))
+            using (StreamReader reader = new StreamReader(stream))
+            {
+                var jsString = reader.ReadToEnd();
+                htmlString = htmlString.Replace("#mainJs", jsString);
+            }
+
+            using (Stream stream = assembly.GetManifestResourceStream(fontEmbeddedFile))
+            {
+                var resourceBase64 = Utilities.ResourceUtilities.ConvertToBase64(stream);
+                htmlString = htmlString.Replace("#fontStyle", resourceBase64);
+            }
+
+            if(notificationUIPopup.webView.CoreWebView2 != null)
+                notificationUIPopup.webView.CoreWebView2.NavigateToString(htmlString);
+        }
+
+        internal void Dispose()
+        {
+            notificationUIPopup.webView.CoreWebView2InitializationCompleted -= WebView_CoreWebView2InitializationCompleted;
+            dynamoView.SizeChanged -= DynamoView_SizeChanged;
+            dynamoView.LocationChanged -= DynamoView_LocationChanged;
+            notificationsButton.Click -= NotificationsButton_Click;
+        }
+
+        private void DynamoView_LocationChanged(object sender, EventArgs e)
+        {
+            notificationUIPopup.Placement = PlacementMode.Bottom;
+            notificationUIPopup.UpdatePopupLocation();
+        }
+
+        private void DynamoView_SizeChanged(object sender, SizeChangedEventArgs e)
+        {
+            notificationUIPopup.Placement = PlacementMode.Bottom;
+            notificationUIPopup.UpdatePopupLocation();
+        }
+
+        private void NotificationsButton_Click(object sender, RoutedEventArgs e)
+        {
+            notificationUIPopup.IsOpen = !notificationUIPopup.IsOpen;
+            if (notificationUIPopup.IsOpen)
+                notificationUIPopup.webView.Focus();
+        }        
+    }
+}

src/Notifications/Notifications.csproj

@@ -9,8 +9,20 @@
     <RootNamespace>Dynamo.Notifications</RootNamespace>
     <AssemblyName>Notifications</AssemblyName>
   </PropertyGroup>
+  <ItemGroup>
+    <None Remove="View\NotificationUI.xaml" />
+    <None Remove="Web\ArtifaktElement-Regular.woff" />
+    <None Remove="Web\index.bundle.js" />
+    <None Remove="Web\index.html" />
+  </ItemGroup>
+  <ItemGroup>
+    <EmbeddedResource Include="Web\ArtifaktElement-Regular.woff" />
+    <EmbeddedResource Include="Web\index.bundle.js" />
+    <EmbeddedResource Include="Web\index.html" />
+  </ItemGroup>
   <ItemGroup>
 	<PackageReference Include="FontAwesome.WPF" Version="4.7.0.9" />
+	<PackageReference Include="Microsoft.Web.WebView2" Version="1.0.1264.42" />
     <Reference Include="Microsoft.Practices.Prism">
       <HintPath>..\..\extern\prism\Microsoft.Practices.Prism.dll</HintPath>
       <Private>False</Private>
@@ -44,6 +56,10 @@
       <Generator>MSBuild:Compile</Generator>
       <SubType>Designer</SubType>
     </Page>
+    <Page Include="View\NotificationUI.xaml">
+      <SubType>Designer</SubType>
+      <Generator>MSBuild:Compile</Generator>
+    </Page>
   </ItemGroup>
   <ItemGroup>
     <Compile Update="Properties\Resources.Designer.cs">
@@ -56,6 +72,9 @@
       <DesignTime>True</DesignTime>
       <DependentUpon>Resources.en-US.resx</DependentUpon>
     </Compile>
+    <Compile Update="View\NotificationUI.xaml.cs">
+      <DependentUpon>NotificationUI.xaml</DependentUpon>
+    </Compile>
   </ItemGroup>
   <ItemGroup>
     <EmbeddedResource Update="Properties\Resources.resx">

src/Notifications/NotificationsUIViewModel.cs

@@ -0,0 +1,53 @@
+using System.Windows;
+using System.Windows.Media;
+using Dynamo.ViewModels;
+
+namespace Dynamo.Notifications
+{
+    class NotificationsUIViewModel : ViewModelBase
+    {
+        public PointCollection TooltipPointerPoints { get; set; }
+
+        //Direction of the shadow shown in the Popup
+        public double ShadowTooltipDirection { get; set; } = 90;
+
+        //This value will describe the needed space for drawing pointers inside the Popup
+        public int PopupBordersOffSet { get; set; } = 15;
+
+        /// <summary>
+        /// Popup Width, by default it will have an exaggerated Width to accommodate localized languages
+        /// TODO it should really be responsive either using grid of auto canvas:
+        /// https://stackoverflow.com/questions/855334/wpf-how-to-make-canvas-auto-resize
+        /// </summary>
+        public double PopupRectangleWidth { get; set; } = 310;
+
+        /// <summary>
+        /// Popup Height, by default it will have a Height of 568
+        /// </summary>
+        public double PopupRectangleHeight { get; set; } = 568;
+
+        double PointerWidth = 25;
+
+        public NotificationsUIViewModel()
+        {
+            var PointerVerticalOffset = PopupRectangleHeight / 8;
+
+            //First X,Y coordinate
+            double pointX1 = PopupRectangleWidth - PointerWidth;
+            double pointY1 = PopupBordersOffSet;
+
+            ////Second X,Y coordinate
+            double pointX2 = PopupRectangleWidth;
+            double pointY2 = PopupBordersOffSet;
+
+            ////Third X,Y coordinate
+            double pointX3 = PopupRectangleWidth - PointerWidth / 2;
+            double pointY3 = 0;
+
+            //Creating the pointer pointing to the Run section of Dynamo
+            TooltipPointerPoints = new PointCollection(new[] { new Point(pointX1, pointY1),
+                                                               new Point(pointX2, pointY2),
+                                                               new Point(pointX3, pointY3)});
+        }
+    }
+}

src/Notifications/NotificationsViewExtension.cs

@@ -5,6 +5,7 @@
 using System.Windows;
 using System.Windows.Controls;
 using System.Windows.Data;
+using Dynamo.Controls;
 using Dynamo.Logging;
 using Dynamo.ViewModels;
 using Dynamo.Wpf.Extensions;
@@ -18,6 +19,7 @@ public class NotificationsViewExtension : IViewExtension, INotifyPropertyChanged
         private Action<Logging.NotificationMessage> notificationHandler;
         private ObservableCollection<Logging.NotificationMessage> notifications;
         private bool disposed;
+        private NotificationCenterController notificationCenterController;
         /// <summary>
         /// Notifications data collection. PropertyChanged event is raised to help dealing WPF bind dispose.
         /// </summary>
@@ -65,6 +67,7 @@ public void Dispose()
                 BindingOperations.ClearAllBindings(notificationsMenuItem.CountLabel);
                 notificationsMenuItem = null;
                 disposed = true;
+                notificationCenterController.Dispose();
             }
         }
 
@@ -98,6 +101,14 @@ public void Loaded(ViewLoadedParams viewStartupParams)
             (notificationsMenuItem.MenuItem.Parent as ContentControl).Content = null;
             //place the menu into the DynamoMenu
             viewStartupParams.dynamoMenu.Items.Add(notificationsMenuItem.MenuItem);
+
+            LoadNotificationCenter();
+        }
+
+        private void LoadNotificationCenter()
+        {
+            var dynamoView = viewLoadedParams.DynamoWindow as DynamoView;
+            var notificationCenterController = new NotificationCenterController(dynamoView);
         }
 
         internal void AddNotifications()

src/Notifications/View/NotificationUI.xaml

@@ -0,0 +1,78 @@
+<Popup x:Class="Dynamo.Notifications.View.NotificationUI"
+        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+       xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
+       xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
+       xmlns:ui="clr-namespace:Dynamo.UI;assembly=DynamoCoreWpf"
+       xmlns:controls="clr-namespace:Dynamo.Controls;assembly=DynamoCoreWpf"
+       xmlns:p="clr-namespace:Dynamo.Wpf.Properties;assembly=DynamoCoreWpf" 
+       xmlns:fa="http://schemas.fontawesome.io/icons/" 
+       xmlns:wv2="clr-namespace:Microsoft.Web.WebView2.Wpf;assembly=Microsoft.Web.WebView2.Wpf"
+       mc:Ignorable="d" 
+       AllowsTransparency="True"
+       Opacity="0.5"
+       Width="340"
+       Height="598">
+    <Popup.Resources>
+        <ResourceDictionary>
+            <ResourceDictionary.MergedDictionaries>
+                <ui:SharedResourceDictionary Source="{x:Static ui:SharedDictionaryManager.DynamoConvertersDictionaryUri}" />
+                <ui:SharedResourceDictionary Source="{x:Static ui:SharedDictionaryManager.DynamoModernDictionaryUri}" />
+            </ResourceDictionary.MergedDictionaries>
+            <BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter"/>
+            <controls:PointsToPathConverter x:Key="PointsToPathConverter"/>
+        </ResourceDictionary>
+    </Popup.Resources>
+    <Canvas Background="Transparent"
+            Name="RootLayout" >
+        <Path x:Name="PopupPathRectangle" 
+              Style="{StaticResource PoupPathRectangleStyle}">
+            <Path.Data>
+                <RectangleGeometry x:Name="BackgroundRectangle">
+                </RectangleGeometry>
+            </Path.Data>
+            <!--This effect will show a 4px shadow of 20% of tranparency with a angle of 135 grades-->
+            <Path.Effect>
+                <DropShadowEffect Opacity="0.2" 
+                                  Color="Black"
+                                  ShadowDepth="4"
+                                  BlurRadius="4"
+                                  Direction="135"/>
+            </Path.Effect>
+        </Path>
+
+        <Path x:Name="PopupPathRectangleShadow"   
+              Style="{StaticResource PoupPathRectangleStyle}">
+            <Path.Data>
+                <RectangleGeometry Rect="{Binding ElementName=BackgroundRectangle, Path=Rect}">
+                </RectangleGeometry>
+            </Path.Data>
+            <!--This effect will show a 4px shadow of 20% of tranparency with a angle of 315 grades-->
+            <Path.Effect>
+                <DropShadowEffect Opacity="0.2" 
+                                  Color="Black"
+                                  ShadowDepth="4"
+                                  BlurRadius="4"
+                                  Direction="315"/>
+            </Path.Effect>
+        </Path>
+
+        <!--This Path will draw on the Canvas the pointer (a triangle)-->
+        <Path  x:Name="TooltipPointer"
+               Data="{Binding Path=TooltipPointerPoints, Converter={StaticResource PointsToPathConverter}}"
+               Style="{StaticResource PoupPathPointerStyle}">
+            <Path.Effect>
+                <DropShadowEffect Opacity="0.2" 
+                                  Color="Black"
+                                  ShadowDepth="4"
+                                  BlurRadius="4"
+                                  Direction="{Binding Path=ShadowTooltipDirection}"/>
+            </Path.Effect>
+        </Path>
+
+        <Grid  x:Name="mainPopupGrid" Background="White"                
+               Width="{Binding PopupRectangleWidth}">
+            <wv2:WebView2 Name="webView" ></wv2:WebView2>
+        </Grid>
+    </Canvas>
+</Popup>