Notifications UI web view2 (#13096)

* Create the notifications button * Notification ui popup * fit webview2 into the popup * pointer tooltip and shadow * ViewExtension project * creation of viewextension * Inserting the notification ui into the NotificationsExtension * Load local files * Unit tests * Notifications Icon * Removing old created notifications center * Code refactor * Reverting dynamo sln * Assigning comments * PR comments * Addressing comments * updates * Addressing comments * inserting npm install notifications package * misspelling fix * commenting npm build command * undoing npm command comment * Commenting npm command and adding the js bundle file Co-authored-by: tanga <[email protected]>
DynamoDS · Jul 19, 2022 · 468d604 · 468d604
1 parent c88bbf8
commit 468d604
Show file tree

Hide file tree

Showing 16 changed files with 517 additions and 78 deletions.
diff --git a/.gitignore b/.gitignore
@@ -100,3 +100,6 @@ test/core/customast/test.txt
 test/core/files/test.png
 test/core/migration/writetext.txt
 logo.png
+/src/Notifications/node_modules
+/src/Notifications/package.json
+/src/Notifications/package-lock.json
diff --git a/src/DynamoCoreWpf/Controls/ShortcutToolbar.xaml b/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"
@@ -131,14 +132,42 @@
                     </ItemsControl.ItemTemplate>
                     <ItemsControl.ItemsPanel>
                         <ItemsPanelTemplate>
-                            <StackPanel x:Name="ShortcutBarLeft" Orientation="Horizontal" />
+                            <StackPanel x:Name="ShortcutBarRight" Orientation="Horizontal" />
                         </ItemsPanelTemplate>
                     </ItemsControl.ItemsPanel>
                 </ItemsControl>
 
                 <Menu HorizontalAlignment="Right"
                       Style="{StaticResource MainMenu}"
                       IsMainMenu="True">
+                    <MenuItem Name="MenuItem"
+                              Margin="0 0 -30 0">
+                        <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"

diff --git a/src/DynamoCoreWpf/Controls/ShortcutToolbar.xaml.cs b/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;

diff --git a/src/DynamoCoreWpf/Properties/AssemblyInfo.cs b/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")]
 

diff --git a/src/DynamoCoreWpf/Utilities/ResourceUtilities.cs b/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())

diff --git a/src/DynamoCoreWpf/Views/Core/DynamoView.xaml.cs b/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>

diff --git a/src/Notifications/NotificationCenterController.cs b/src/Notifications/NotificationCenterController.cs
@@ -0,0 +1,100 @@
+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 jsEmbeddedFile = "Dynamo.Notifications.node_modules._dynam0.notificati0ns.index.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);
+            }
+
+            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();
+        }        
+    }
+}
diff --git a/src/Notifications/Notifications.csproj b/src/Notifications/Notifications.csproj
@@ -1,76 +1,102 @@
 <Project Sdk="Microsoft.NET.Sdk">
-  <ImportGroup Label="PropertySheets">
-    <Import Project="$(SolutionDir)Config\CS_SDK.props" />
-  </ImportGroup>
-  <PropertyGroup>
-    <ProjectGuid>{09F48994-BB2F-4A26-8CCD-469FE3F7F904}</ProjectGuid>
-    <OutputType>Library</OutputType>
-    <AppDesignerFolder>Properties</AppDesignerFolder>
-    <RootNamespace>Dynamo.Notifications</RootNamespace>
-    <AssemblyName>Notifications</AssemblyName>
-  </PropertyGroup>
-  <ItemGroup>
-	<PackageReference Include="FontAwesome.WPF" Version="4.7.0.9" />
-    <Reference Include="Microsoft.Practices.Prism">
-      <HintPath>..\..\extern\prism\Microsoft.Practices.Prism.dll</HintPath>
-      <Private>False</Private>
-    </Reference>
-    <Reference Include="PresentationCore" />
-    <Reference Include="PresentationFramework" />
-    <Reference Include="System.Xaml" />
-    <Reference Include="WindowsBase" />
-  </ItemGroup>
-  <ItemGroup>
-    <ProjectReference Include="..\DynamoCoreWpf\DynamoCoreWpf.csproj">
-      <Project>{51bb6014-43f7-4f31-b8d3-e3c37ebedaf4}</Project>
-      <Name>DynamoCoreWpf</Name>
-      <Private>False</Private>
-    </ProjectReference>
-    <ProjectReference Include="..\DynamoCore\DynamoCore.csproj">
-      <Project>{7858fa8c-475f-4b8e-b468-1f8200778cf8}</Project>
-      <Name>DynamoCore</Name>
-    </ProjectReference>
-  </ItemGroup>
-  <ItemGroup>
-    <Page Include="NotificationsMenuItem.xaml">
-      <SubType>Designer</SubType>
-      <Generator>MSBuild:Compile</Generator>
-    </Page>
-    <Page Include="NotificationsView.xaml">
-      <SubType>Designer</SubType>
-      <Generator>MSBuild:Compile</Generator>
-    </Page>
-    <Page Include="Styles\DynamoModern.xaml">
-      <Generator>MSBuild:Compile</Generator>
-      <SubType>Designer</SubType>
-    </Page>
-  </ItemGroup>
-  <ItemGroup>
-    <Compile Update="Properties\Resources.Designer.cs">
-      <AutoGen>True</AutoGen>
-      <DesignTime>True</DesignTime>
-      <DependentUpon>Resources.resx</DependentUpon>
-    </Compile>
-    <Compile Update="Properties\Resources.en-US.Designer.cs">
-      <AutoGen>True</AutoGen>
-      <DesignTime>True</DesignTime>
-      <DependentUpon>Resources.en-US.resx</DependentUpon>
-    </Compile>
-  </ItemGroup>
-  <ItemGroup>
-    <EmbeddedResource Update="Properties\Resources.resx">
-      <Generator>PublicResXFileCodeGenerator</Generator>
-      <LastGenOutput>Resources.Designer.cs</LastGenOutput>
-    </EmbeddedResource>
-    <EmbeddedResource Update="Properties\Resources.en-US.resx">
-      <Generator>PublicResXFileCodeGenerator</Generator>
-      <LastGenOutput>Resources.en-US.Designer.cs</LastGenOutput>
-    </EmbeddedResource>
-  </ItemGroup>
-  <Target Name="AfterBuildOps" AfterTargets="Build">
-    <ItemGroup>
-      <ExtensionDefinition Include="Notifications_ViewExtensionDefinition.xml" />
-    </ItemGroup>
-    <Copy SourceFiles="@(ExtensionDefinition)" DestinationFolder="$(OutputPath)\viewExtensions\" />
-  </Target>
+	<ImportGroup Label="PropertySheets">
+		<Import Project="$(SolutionDir)Config\CS_SDK.props" />
+	</ImportGroup>
+	<PropertyGroup>
+		<ProjectGuid>{09F48994-BB2F-4A26-8CCD-469FE3F7F904}</ProjectGuid>
+		<OutputType>Library</OutputType>
+		<AppDesignerFolder>Properties</AppDesignerFolder>
+		<RootNamespace>Dynamo.Notifications</RootNamespace>
+		<AssemblyName>Notifications</AssemblyName>
+	</PropertyGroup>
+
+	<!--<Target Name="NpmInstall" Inputs="package.json" Outputs="node_modules/.install-stamp">
+		<Exec Command="npm install @dynam0/notificati0ns" />	
+	</Target>
+
+	<Target Name="NpmRunBuild" DependsOnTargets="NpmInstall" BeforeTargets="BeforeBuild">
+		<Exec Command="npm install" />
+	</Target>-->
+
+	<ItemGroup>
+		<None Remove="node_modules\%40dynam0\notificati0ns\index.js" />
+		<None Remove="View\NotificationUI.xaml" />
+		<None Remove="Web\index.html" />
+	</ItemGroup>
+	<ItemGroup>
+		<EmbeddedResource Include="node_modules\@dynam0\notificati0ns\index.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>
+		</Reference>
+		<Reference Include="PresentationCore" />
+		<Reference Include="PresentationFramework" />
+		<Reference Include="System.Xaml" />
+		<Reference Include="WindowsBase" />
+	</ItemGroup>
+	<ItemGroup>
+		<ProjectReference Include="..\DynamoCoreWpf\DynamoCoreWpf.csproj">
+			<Project>{51bb6014-43f7-4f31-b8d3-e3c37ebedaf4}</Project>
+			<Name>DynamoCoreWpf</Name>
+			<Private>False</Private>
+		</ProjectReference>
+		<ProjectReference Include="..\DynamoCore\DynamoCore.csproj">
+			<Project>{7858fa8c-475f-4b8e-b468-1f8200778cf8}</Project>
+			<Name>DynamoCore</Name>
+		</ProjectReference>
+	</ItemGroup>
+	<ItemGroup>
+		<Page Include="NotificationsMenuItem.xaml">
+			<SubType>Designer</SubType>
+			<Generator>MSBuild:Compile</Generator>
+		</Page>
+		<Page Include="NotificationsView.xaml">
+			<SubType>Designer</SubType>
+			<Generator>MSBuild:Compile</Generator>
+		</Page>
+		<Page Include="Styles\DynamoModern.xaml">
+			<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">
+			<AutoGen>True</AutoGen>
+			<DesignTime>True</DesignTime>
+			<DependentUpon>Resources.resx</DependentUpon>
+		</Compile>
+		<Compile Update="Properties\Resources.en-US.Designer.cs">
+			<AutoGen>True</AutoGen>
+			<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">
+			<Generator>PublicResXFileCodeGenerator</Generator>
+			<LastGenOutput>Resources.Designer.cs</LastGenOutput>
+		</EmbeddedResource>
+		<EmbeddedResource Update="Properties\Resources.en-US.resx">
+			<Generator>PublicResXFileCodeGenerator</Generator>
+			<LastGenOutput>Resources.en-US.Designer.cs</LastGenOutput>
+		</EmbeddedResource>
+	</ItemGroup>
+	<Target Name="AfterBuildOps" AfterTargets="Build">
+		<ItemGroup>
+			<ExtensionDefinition Include="Notifications_ViewExtensionDefinition.xml" />
+		</ItemGroup>
+		<Copy SourceFiles="@(ExtensionDefinition)" DestinationFolder="$(OutputPath)\viewExtensions\" />
+	</Target>
 </Project>