DYN-3767 PopupWindow UI (#11802)

* DYN-3767 PopupWindow The changes are basically the creation of the PopupWindow UI, also I included some classes that will be needed later for supporting the Step hierarchy in which the child classes are Survey, Tooltip, Welcome and ExitTour. One of the functionalities included is that when you press the close button the popup is closed (as expected). Three buttons were added in the PopupWindow but for Welcome screen just the "Start Tour" button is shown, the popup pointer is hidden. For Tooltips the navigation controls and the pointer are shown. Also the CustomRichTextBox class was added to enable adding a TextBox in a Tooltip/Welcome screen with functionalities like showing hyperlinks, text in bold, bullet point and images. * DYN-3767 PopupWindow Moving colors to DynamoModern.xaml and replacing some hardcoded values and colors. * Squashed commit of the following: commit 7b74464 Author: Jorgen Dahl <[email protected]> Date: Thu Jul 1 09:56:05 2021 -0400 Remove old installed packages view (#11791) * update * update * update * update * Update InstalledPackagesControl.xaml * Update icons and icon sizes. * More tweaking.. * More tweaking. Remove delete button. Restore delete button in context menu. * More tweaking * MergeFixes * Some more tweaks * Add contest menu style * update colors * More context menu tweaking. * One small tweak. * add mark for uninstall label * simplify control * Update DynamoModern.xaml * Change ListBox to ItemsControl * More tweaks * More tweaks * Restore Scollbar * Remove unused icon * align content with header and remove border * update * update menu icon * Remove old Installed packages view. * Update InstalledPackagesControl.xaml.cs * Fix Colors * Move style * Use FlatIconButtonStyle * Update comment and use nameof() * Fix merge error. * Update comment. * Fix tests * Keep ManagePackage tracking * Fix project file * Fix command * Update track implementation * More command tweaks Co-authored-by: pinzart <[email protected]> Co-authored-by: pinzart90 <[email protected]> commit ce29111 Author: Michael Kirschner <[email protected]> Date: Wed Jun 30 15:07:57 2021 -0400 Dyn 3598 (#11800) * small adjustment * align titles * add names to buttons for ui automation tests * missing button name * disable program data in ui add some todos to try to eliminate properties that are redudant some name changes I hope help * add some todos for reducing use of package loader defaultpackagesdir spelling use pathmanager instead of package loder at package man extension startup test that both defautldirectories are the same * create failing test... * remove todo * fix package tests - this check is already done in tech debt test Co-authored-by: michael kirschner <[email protected]> commit 3c700d9 Author: Aaron (Qilong) <[email protected]> Date: Tue Jun 29 09:05:52 2021 -0700 CopyFile Improvement (#11798) * CopyFile Improvement * Use resource string * Update validation condition commit 0a18bfa Author: Sylvester Knudsen <[email protected]> Date: Tue Jun 29 14:24:26 2021 +0100 Dynamo UI visual status of issues (#11776) * initial commit * Update DynamoViewModelDelegates.cs * Update Dynamo.All.sln * update test * event updates * test update * initial commit * Update DynamoViewModel.cs * add open linter view to issue count * Update Resources.en-US.resx * initial commit * initial commit * Update DynamoViewModelDelegates.cs * Update Dynamo.All.sln * test update * add open linter view to issue count * remove duplicated OnRequestOpenLinterView * revert assembly info changes * LinterManager null checks * comment updates * move linter count converter * Update NotificationsControl.xaml.cs * Update NotificationsControl.xaml.cs commit 04da16e Author: Michael Kirschner <[email protected]> Date: Mon Jun 28 14:56:43 2021 -0400 py migration test for imaginary change type (#11795) * small adjustment * align titles * add names to buttons for ui automation tests * missing button name * add test for imaginary diff change type Co-authored-by: michael kirschner <[email protected]> commit 2fbc0da Author: pinzart90 <[email protected]> Date: Mon Jun 28 10:43:35 2021 -0400 Add installed package UI in Preferences TAB (#11750) * update * update * update * update * Update InstalledPackagesControl.xaml * Update icons and icon sizes. * More tweaking.. * More tweaking. Remove delete button. Restore delete button in context menu. * More tweaking * MergeFixes * Some more tweaks * Add contest menu style * update colors * More context menu tweaking. * One small tweak. * add mark for uninstall label * simplify control * Update DynamoModern.xaml * Change ListBox to ItemsControl * More tweaks * More tweaks * Restore Scollbar * Remove unused icon * align content with header and remove border * update * update menu icon * Update InstalledPackagesControl.xaml.cs * Fix Colors * Move style * Use FlatIconButtonStyle * Update comment and use nameof() * Update comment. Co-authored-by: pinzart <[email protected]> Co-authored-by: Jorgen Dahl <[email protected]> commit 66818b7 Author: Michael Kirschner <[email protected]> Date: Mon Jun 28 10:41:59 2021 -0400 don't do anything if line is imaginary (#11794) commit beb408e Author: Sylvester Knudsen <[email protected]> Date: Mon Jun 28 14:23:16 2021 +0100 [DYN-3774] selected graph type in properties view (#11777) * initial commit * Update DynamoViewModelDelegates.cs * Update Dynamo.All.sln * update test * event updates * test update * Update DynamoViewModel.cs * Update Resources.en-US.resx * comment updates * Fix the crash when opening Preferences dialog. (#11749) * DYN-3780 : fix modified flag for default home workspace (#11761) * fix modified flag for default home workspace * add reg test * handle modified flag for graph type change (#11754) * initial commit * updates * implement OpenLinterView * open OnRequestOpenLinterView switches tab if it exists * Update LintingViewExtension.cs * Remove dependency on DynamoWindow DataContext * Update GraphMetadataView.xaml * comment updates * make converters internal Co-authored-by: reddyashish <[email protected]> Co-authored-by: Bogdan Zavu <[email protected]> Co-authored-by: Craig Long <[email protected]> commit 1d85e29 Author: Ashish Aggarwal <[email protected]> Date: Mon Jun 28 02:33:44 2021 -0400 Fix Publish Locally button in publish package dialog box (#11783) * DYN-3753 Adjust btn width * Update margin instead commit 56b9e57 Author: Michael Kirschner <[email protected]> Date: Fri Jun 25 16:10:11 2021 -0400 Packagepaths issues (#11793) * small adjustment * align titles * add names to buttons for ui automation tests * missing button name * add dispose to packagepathview remove unused constructor raise can execute change when paths are shifted to update icons give pathview a name dispose package paths on prefs window close Co-authored-by: michael kirschner <[email protected]> commit 56fc0bd Author: aparajit-pratap <[email protected]> Date: Fri Jun 25 15:20:43 2021 -0400 fix setting preferences view owner (#11792) commit ab8b5a1 Author: aparajit-pratap <[email protected]> Date: Fri Jun 25 12:16:07 2021 -0400 Fix for crash in host due to Preferences dialog (#11790) * fix for crash due to Preferences dialog * cleanup * removed unused usings commit 4125985 Author: Aaron (Qilong) <[email protected]> Date: Thu Jun 24 21:08:13 2021 -0700 Enable NTML Authenticator (#11385) * Initial Commit * Revert "Initial Commit" This reverts commit eb9e271. * Update Greg reference commit 4ad5255 Author: Ashish Aggarwal <[email protected]> Date: Fri Jun 25 00:06:45 2021 -0400 Properly align nodes placed after using autocomplete on output ports (#11782) * Update PortModel.cs * Add unit test * add out nodes to selection commit fc7f47f Author: Ashish Aggarwal <[email protected]> Date: Thu Jun 24 17:14:55 2021 -0400 Fix node autocomplete documentation alignment issues (#11781) DYN-3754 commit 0130703 Author: aparajit-pratap <[email protected]> Date: Thu Jun 24 16:10:11 2021 -0400 add name to UI control for UI automation tests (#11789) commit 843e4bd Author: Michael Kirschner <[email protected]> Date: Thu Jun 24 11:24:53 2021 -0400 Add button names to package path item template. (#11787) * small adjustment * align titles * add names to buttons for ui automation tests * missing button name Co-authored-by: michael kirschner <[email protected]> commit 04faeaf Author: Craig Long <[email protected]> Date: Thu Jun 24 09:46:47 2021 -0400 Add Modified to the LinterExtensionBase notification infrastructure (#11774) Co-authored-by: Craig Long <[email protected]> commit bac165b Author: aparajit-pratap <[email protected]> Date: Thu Jun 24 02:37:13 2021 -0400 fix duplicate protogeom reference in dynamocorewpf.csproj (#11785) commit da3628b Author: Michael Kirschner <[email protected]> Date: Thu Jun 24 00:03:07 2021 -0400 small adjustment to package paths ui (#11784) * small adjustment * align titles Co-authored-by: michael kirschner <[email protected]> * DYN-3657 - Code Review 1 - Deleted the CustomRichTextBox constructor because is not needed (by default .net will create a public one). - Renamed the HostInfo property to HostControlInfo- - Also moving several styles from the PopupWindow.xaml to the DynamoModern.xaml * DYN-3657 - Code Review 1 Forgot to rename the filename from HostInfo to HostControlInfo.
DynamoDS · Jul 7, 2021 · c3861b6 · c3861b6
1 parent 11668c9
commit c3861b6
Show file tree

Hide file tree

Showing 12 changed files with 1,103 additions and 0 deletions.
diff --git a/src/DynamoCoreWpf/DynamoCoreWpf.csproj b/src/DynamoCoreWpf/DynamoCoreWpf.csproj
@@ -174,6 +174,13 @@
       <DesignTime>True</DesignTime>
       <DependentUpon>Resources.resx</DependentUpon>
     </Compile>
+    <Compile Include="UI\GuidedTour\CustomRichTextBox.cs" />
+    <Compile Include="UI\GuidedTour\HostControlInfo.cs" />
+    <Compile Include="UI\GuidedTour\Step.cs" />
+    <Compile Include="UI\GuidedTour\Survey.cs" />
+    <Compile Include="UI\GuidedTour\Tooltip.cs" />
+    <Compile Include="UI\GuidedTour\ExitTour.cs" />
+    <Compile Include="UI\GuidedTour\Welcome.cs" />
     <Compile Include="Utilities\CompactBubbleHandler.cs" />
     <Compile Include="Interfaces\IShellCom.cs" />
     <Compile Include="Rendering\HelixRenderPackage.cs" />
@@ -290,6 +297,7 @@
     <Compile Include="ViewModels\Core\GalleryViewModel.cs" />
     <Compile Include="ViewModels\Core\HomeWorkspaceViewModel.cs" />
     <Compile Include="ViewModels\Core\SerializationExtensions.cs" />
+    <Compile Include="ViewModels\GuidedTour\PopupWindowViewModel.cs" />
     <Compile Include="ViewModels\Menu\PreferencesViewModel.cs" />
     <Compile Include="ViewModels\PackageManager\IPackageInstaller.cs" />
     <Compile Include="ViewModels\PackageManager\PackagePathViewModel.cs" />
@@ -327,6 +335,9 @@
     <Compile Include="Views\CodeCompletion\CodeCompletionEditor.xaml.cs">
       <DependentUpon>CodeCompletionEditor.xaml</DependentUpon>
     </Compile>
+    <Compile Include="Views\GuidedTour\PopupWindow.xaml.cs">
+      <DependentUpon>PopupWindow.xaml</DependentUpon>
+    </Compile>
     <Compile Include="Views\Input\ParameterEditor.cs" />
     <Compile Include="Views\Output\OutputEditor.cs" />
     <Compile Include="Views\PackageManager\PackagePathView.xaml.cs">
@@ -439,6 +450,10 @@
       <Generator>MSBuild:Compile</Generator>
       <SubType>Designer</SubType>
     </Page>
+    <Page Include="Views\GuidedTour\PopupWindow.xaml">
+      <SubType>Designer</SubType>
+      <Generator>MSBuild:Compile</Generator>
+    </Page>
     <Page Include="Views\Menu\PreferencesView.xaml">
       <Generator>MSBuild:Compile</Generator>
       <SubType>Designer</SubType>

diff --git a/src/DynamoCoreWpf/UI/GuidedTour/CustomRichTextBox.cs b/src/DynamoCoreWpf/UI/GuidedTour/CustomRichTextBox.cs
@@ -0,0 +1,169 @@
+using System;
+using System.Diagnostics;
+using System.Linq;
+using System.Windows;
+using System.Windows.Controls;
+using System.Windows.Documents;
+using System.Windows.Media.Imaging;
+
+namespace Dynamo.Wpf.UI.GuidedTour
+{
+    /// <summary>
+    /// This class represent a RichTextBox that will be used in Popups to show hyperlinks, texts, images, bullet points, gifs and other media items.
+    /// </summary>
+    public class CustomRichTextBox : RichTextBox
+    {
+
+        #region CustomText Dependency Property
+
+        public static readonly DependencyProperty CustomTextProperty = DependencyProperty.Register("CustomText", typeof(string), typeof(CustomRichTextBox),
+       new PropertyMetadata(string.Empty, CustomTextChangedCallback), CustomTextValidateCallback);
+
+        private static void CustomTextChangedCallback(
+            DependencyObject obj, DependencyPropertyChangedEventArgs e)
+        {
+            (obj as CustomRichTextBox).Document = GetCustomDocument(e.NewValue as string);
+        }
+
+        private static bool CustomTextValidateCallback(object value)
+        {
+            return value != null;
+        }
+
+        /// <summary>
+        /// This Custom property is used for registing the dependency property
+        /// </summary>
+        public string CustomText
+        {
+            get
+            {
+                return (string)GetValue(CustomTextProperty);
+            }
+            set
+            {
+                SetValue(CustomTextProperty, value);
+            }
+        }
+
+        #endregion
+
+        /// <summary>
+        /// This is the main method of the CustomRichTextBox and is parsing the text provided in order to show hyperlinks, images, bullet points, words in bold
+        /// </summary>
+        /// <param name="Text">Text using a specific format for showing hyperlinks, images, bullet points, words in bold</param>
+        /// <returns></returns>
+        private static FlowDocument GetCustomDocument(string Text)
+        {
+            FlowDocument document = new FlowDocument();
+            BlockUIContainer imageContainer = new BlockUIContainer();
+            List bulletedItemsList = null;
+
+            Paragraph para = new Paragraph();
+            para.Margin = new Thickness(0); // remove indent between paragraphs
+
+            bool bBoldActive = false;
+            bool bImageActive = false;
+            bool bBulletListActive = false;
+            string bulletEntryText = string.Empty;
+            string imageName = string.Empty;
+
+            //This iteration is just for words in a paragraph if the text provided has several paragraphs then an additional foreach cycle needs to be added for iterating paragraphs
+            foreach (string word in Text.Split(' ').ToList())
+            {
+                //A format for bold text was found
+                if (word.StartsWith("**"))
+                {
+                    bBoldActive = true;
+                }
+
+                //A format for inserting a image between text was found
+                if (word.StartsWith("%"))
+                {
+                    bImageActive = true;
+                }
+
+                //A format for inserting bullet points was found (consider that for now we are just supporting bullet points ONLY at the end of the text)
+                if (word.StartsWith("-"))
+                {
+                    if (bulletedItemsList == null && bBulletListActive == false)
+                        bulletedItemsList = new List();
+
+                    bBulletListActive = true;
+                }
+
+                //A format for inserting a hyperlink between text was found
+                //The hyperlink name is the next word followed by the # char and the URL value is the one followed after the = char
+                if (word.StartsWith("#"))
+                {
+                    string fullHyperlinkText = word.Substring(1, word.Length - 1);
+                    string linkName = fullHyperlinkText.Split('=')[1];
+                    string linkURL = linkName;
+
+                    Run run3 = new Run(fullHyperlinkText.Split('=')[0]);
+                    Hyperlink link = new Hyperlink(run3);
+                    link.IsEnabled = true;
+                    link.NavigateUri = new Uri(linkURL);
+                    link.RequestNavigate += (sender, args) => Process.Start(args.Uri.ToString());
+                    para.Inlines.Add(link);
+                }
+                else if (bBoldActive)
+                {
+                    string boldText = word;
+                    boldText = boldText.Replace("**", "");
+                    para.Inlines.Add(new Bold(new Run(boldText)));
+                }
+                else if (bImageActive)
+                {
+                    //this will contatenate each word so at the end we will have the full image path
+                    imageName += word;
+                }
+                else if (bBulletListActive == true)
+                {
+                    bulletEntryText += (word + " ");
+                }
+                else
+                {
+                    para.Inlines.Add(word);
+                }
+
+                //End of the text with bold formatting.
+                if (word.EndsWith("**"))
+                {
+                    bBoldActive = false;
+                }
+                //End of the image between text formatting.
+                if (word.EndsWith("%"))
+                {
+                    bImageActive = false;
+
+                    var tmpImage = new Image();
+                    tmpImage.Source = new BitmapImage(new Uri(imageName.Replace("%", ""), UriKind.RelativeOrAbsolute));
+                    imageContainer.Child = tmpImage;
+                    Figure imageFig = new Figure(imageContainer);
+                    imageFig.Width = new FigureLength(30);
+                    imageFig.Height = new FigureLength(30);
+                    para.Inlines.Add(imageFig);
+                }
+                //End fo the Bullet Items formatting
+                if (word.EndsWith("-"))
+                {
+                    bBulletListActive = false;
+                    bulletedItemsList.ListItems.Add(new ListItem(new Paragraph(new Run(bulletEntryText.Replace("-", "")))));
+                    bulletEntryText = string.Empty;
+                }
+
+                para.Inlines.Add(" ");
+            }
+            document.Blocks.Add(para);
+
+            //Not all the tooltips contain bullet point when we insert the bullet points only if it was set
+            if(bulletedItemsList != null)
+            {
+                document.Blocks.Add(bulletedItemsList);
+                bulletedItemsList = null;
+            }
+
+            return document;
+        }
+    }
+}
diff --git a/src/DynamoCoreWpf/UI/GuidedTour/ExitTour.cs b/src/DynamoCoreWpf/UI/GuidedTour/ExitTour.cs
@@ -0,0 +1,24 @@
+using System.Windows;
+using System.Windows.Controls.Primitives;
+using Dynamo.Wpf.ViewModels.GuidedTour;
+using Dynamo.Wpf.Views.GuidedTour;
+
+namespace Dynamo.Wpf.UI.GuidedTour
+{
+    /// <summary>
+    /// This class represent the Notification Toast popup that will be shown when a Dynamo Guided Tour is closed
+    /// </summary>
+    public class ExitTour : Step
+    {
+        public ExitTour(HostControlInfo host, double width, double height)
+            : base(host, width, height)
+        {
+            //In the ExitTour constructor we call the base constructor passing the host information and the popup width and height
+        }
+
+        protected override void CreatePopup()
+        {
+            //In this place will go the code for creating a ExitTourWindow window (Notification Toast)
+        }
+    }
+}
diff --git a/src/DynamoCoreWpf/UI/GuidedTour/HostControlInfo.cs b/src/DynamoCoreWpf/UI/GuidedTour/HostControlInfo.cs
@@ -0,0 +1,97 @@
+using System.Windows;
+using System.Windows.Controls.Primitives;
+
+namespace Dynamo.Wpf.UI.GuidedTour
+{
+    /// <summary>
+    /// This class will contain info related to the popup location and the host control in which the popup will appear over
+    /// </summary>
+    public class HostControlInfo
+    {
+        private string name;
+        private string hostClass;
+        private UIElement hostUIElement;
+        private double verticalPopupOffSet;
+        private double horizontalPopupOffSet;
+
+        /// <summary>
+        /// Host Name, this property will contain the name of the host control located in the TreeView
+        /// </summary>
+        public string Name 
+        {
+            get
+            {
+                return name;
+            }
+            set
+            {
+                name = value;
+            }
+        }
+
+        /// <summary>
+        /// Host Class, this property will contain the class of the host control located in the TreeView
+        /// </summary>
+        public string HostClass
+        {
+            get
+            {
+                return hostClass;
+            }
+            set
+            {
+                hostClass = value;
+            }
+        }
+
+        /// <summary>
+        /// This property will hold the UI Element over which the popup will be shown (it should be any item in the TreeView) 
+        /// </summary>
+        public UIElement HostUIElement
+        {
+            get
+            {
+                return hostUIElement;
+            }
+            set
+            {
+                hostUIElement = value;
+            }
+        }
+
+        /// <summary>
+        /// This property will hold the placement location of the popup, for now we are just using Right, Left, Top and Bottom
+        /// </summary>
+        public PlacementMode PopupPlacement { get; set; }
+
+        /// <summary>
+        /// Once the popup host control and placecement is set we can use this property for moving the popup location Vertically (by specifying an offset) 
+        /// </summary>
+        public double VerticalPopupOffSet
+        {
+            get
+            {
+                return verticalPopupOffSet;
+            }
+            set
+            {
+                verticalPopupOffSet = value;
+            }
+        }
+
+        /// <summary>
+        /// Once the popup host control and placecement is set we can use this property for moving the popup location Horizontally (by specifying an offset) 
+        /// </summary>
+        public double HorizontalPopupOffSet
+        {
+            get
+            {
+                return horizontalPopupOffSet;
+            }
+            set
+            {
+                horizontalPopupOffSet  = value;
+            }
+        }
+    }
+}