DYN-1897 API to add extensions to right side bar. (#9786)

reddyashish · web-flow · commit 55482f600fdf · 2019-06-14T12:58:52.000-04:00
* API

* First commit

* second commit

* Comments and some reverts

* Addressing comments and adding event handler to the tabitems list

* making it private

* API change and addressing comments.

* Some more comments

* Adding test

* Adjusting margins

* Adding border property to static resource field

* Adding loggers to console

* Removing the entry from DynamoCoreWPF assembly info.

* Spacing
diff --git a/src/DynamoCore/Configuration/Configurations.cs b/src/DynamoCore/Configuration/Configurations.cs
@@ -130,6 +130,12 @@ public class Configurations
         /// Default width of tab
         /// </summary>
         public static readonly int TabDefaultWidth = 250;
+
+        /// <summary>
+        /// Minimum width of tab in the extensions side bar
+        /// </summary>
+        public static readonly int ExtensionsSideBarTabMinWidth = 150;
+
         #endregion
 
         #region Information Bubble
diff --git a/src/DynamoCoreWpf/Extensions/ViewLoadedParams.cs b/src/DynamoCoreWpf/Extensions/ViewLoadedParams.cs
@@ -69,14 +69,33 @@ internal ViewLoadedParams(DynamoView dynamoV, DynamoViewModel dynamoVM) :
             dynamoMenu = dynamoView.titleBar.ChildOfType<Menu>();
             viewStartupParams = new ViewStartupParams(dynamoVM);
             DynamoSelection.Instance.Selection.CollectionChanged += OnSelectionCollectionChanged;
-
         }
 
         public void AddMenuItem(MenuBarType type, MenuItem menuItem, int index = -1)
         {
             AddItemToMenu(type, menuItem, index);
         }
 
+        /// <summary>
+        /// Adds the extension UI control element to a new tab in the extensions side bar.
+        /// </summary>
+        /// <param name="viewExtension">Instance of the view extension object that is being added to the extensions side bar.</param>
+        /// <param name="contentControl">Control UI element with a single piece of content of any type.</param>
+        /// <returns></returns>
+        internal void AddToExtensionsSideBar(IViewExtension viewExtension, ContentControl contentControl)
+        {
+            TabItem tabItem  = dynamoView.AddTabItem(viewExtension, contentControl);
+
+            if (tabItem != null)
+            {
+                dynamoViewModel.Model.Logger.Log(Wpf.Properties.Resources.ExtensionAdded);
+            }
+            else
+            {
+                dynamoViewModel.Model.Logger.Log(Wpf.Properties.Resources.ExtensionAlreadyPresent);
+            }
+        }
+
         public void AddSeparator(MenuBarType type, Separator separatorObj, int index = -1)
         {
             AddItemToMenu(type, separatorObj, index);
diff --git a/src/DynamoCoreWpf/Properties/Resources.Designer.cs b/src/DynamoCoreWpf/Properties/Resources.Designer.cs
diff --git a/src/DynamoCoreWpf/Properties/Resources.en-US.resx b/src/DynamoCoreWpf/Properties/Resources.en-US.resx
@@ -2193,4 +2193,10 @@ Do you want to install the latest Dynamo update?</value>
   <data name="ExtensionsViewTitle" xml:space="preserve">
     <value>Extensions</value>
   </data>
+  <data name="ExtensionAdded" xml:space="preserve">
+    <value>Extension tab added to the extensions side bar.</value>
+  </data>
+  <data name="ExtensionAlreadyPresent" xml:space="preserve">
+    <value>No new tab is added, as the extension is already present in the extensions side bar.</value>
+  </data>
 </root>
diff --git a/src/DynamoCoreWpf/Properties/Resources.resx b/src/DynamoCoreWpf/Properties/Resources.resx
@@ -2196,4 +2196,10 @@ Want to publish a different package?</value>
   <data name="ExtensionsViewTitle" xml:space="preserve">
     <value>Extensions</value>
   </data>
+  <data name="ExtensionAdded" xml:space="preserve">
+    <value>Extension tab added to the extensions side bar.</value>
+  </data>
+  <data name="ExtensionAlreadyPresent" xml:space="preserve">
+    <value>No new tab is added, as the extension is already present in the extensions side bar.</value>
+  </data>
 </root>
diff --git a/src/DynamoCoreWpf/UI/Themes/Modern/DynamoColorsAndBrushes.xaml b/src/DynamoCoreWpf/UI/Themes/Modern/DynamoColorsAndBrushes.xaml
@@ -69,6 +69,7 @@
     <Color x:Key="MaterialColor">#efede4</Color>
 
     <!--Sidebar-->
+    <SolidColorBrush x:Key="BorderBrushWhite" Color="#FF3F4040" />
     
     <!-- Library background-->
     <SolidColorBrush x:Key="SearchTextBoxBackground" Color="#F1F2F2" />
diff --git a/src/DynamoCoreWpf/Views/Core/DynamoView.xaml b/src/DynamoCoreWpf/Views/Core/DynamoView.xaml
@@ -214,7 +214,7 @@
         </Grid.ColumnDefinitions>
 
         <!--Titlebar-->
-        <Border BorderBrush="#FF3F4040"
+        <Border BorderBrush="{StaticResource BorderBrushWhite}"
                 BorderThickness="0,0,0,1"
                 Grid.Row="0"
                 Grid.Column="0"
@@ -847,7 +847,7 @@
                 Grid.Row="0"
                 Grid.Column="0"
                 Height="32"
-                BorderBrush="#FF3F4040"
+                BorderBrush="{StaticResource BorderBrushWhite}"
                 BorderThickness="0,0,0,1">
                 <Grid Name="shortcutBarGrid">
                 </Grid>
@@ -917,7 +917,7 @@
                                                 <RowDefinition Height="Auto" />
                                                 <RowDefinition Height="*" />
                                             </Grid.RowDefinitions>
-                                            <Border BorderBrush="#FF3F4040"
+                                            <Border BorderBrush="{StaticResource BorderBrushWhite}"
                                                     BorderThickness="1,0,0,1"
                                                     Grid.Row="0">
                                                 <Grid>
@@ -1255,7 +1255,7 @@
                                 <Setter.Value>
                                     <ControlTemplate TargetType="{x:Type TabItem}">
                                         <Border Name="Border"
-                                                BorderBrush="#FF3F4040"
+                                                BorderBrush="{StaticResource BorderBrushWhite}"
                                                 CornerRadius="0,0,0,0">
                                             <Border.Style>
                                                 <Style TargetType="Border">
@@ -1612,6 +1612,7 @@
                         </StackPanel>
                     </Grid>
                 </Button>
+
             </Grid>
 
             <StackPanel.RenderTransform>
@@ -1666,7 +1667,7 @@
               Grid.RowSpan="2">
         </Grid>
 
-        <!--Right Sidebar Extensions-->
+        <!--Right Extensions Sidebar-->
         <Grid Height="Auto"
               Width="Auto"
               HorizontalAlignment="Stretch"
@@ -1676,6 +1677,102 @@
               Grid.Row="2"
               Grid.Column="4"
               Grid.RowSpan="2">
+            <TabControl Name="tabDynamic" ItemsSource="{Binding}">
+                <TabControl.Resources>
+                    <!--Styling for the close button in the tab-->
+                    <Style TargetType="{x:Type Button}"
+                               x:Key="CloseButtonStyle">
+                        <Setter Property="OverridesDefaultStyle"
+                                    Value="True" />
+                        <Setter Property="SnapsToDevicePixels"
+                                    Value="true" />
+                        <Setter Property="VerticalAlignment"
+                                    Value="Center" />
+                        <Setter Property="HorizontalAlignment"
+                                    Value="Right" />
+                        <Setter Property="Margin"
+                                    Value="8,2,0,0" />
+                        <Setter Property="Background"
+                                    Value="Transparent" />
+                        <Setter Property="BorderThickness"
+                                    Value="0" />
+                        <Setter Property="Padding"
+                                    Value="0" />
+                        <Setter Property="Template">
+                            <Setter.Value>
+                                <ControlTemplate TargetType="Button">
+                                    <Border x:Name="Border"
+                                                Background="Transparent"
+                                                BorderThickness="0 0 0 0">
+                                        <ContentPresenter Margin="0 0 0 0" />
+                                    </Border>
+                                </ControlTemplate>
+                            </Setter.Value>
+                        </Setter>
+                    </Style>
+                    
+                    <!--Template for each tab item in the extensions side bar-->
+                    <DataTemplate x:Key="TabHeader" DataType="TabItem">
+                        <DockPanel HorizontalAlignment="Stretch" MinWidth="{Binding Source={x:Static configuration:Configurations.ExtensionsSideBarTabMinWidth}}">
+                            <TextBlock Text="{Binding RelativeSource={RelativeSource AncestorType={x:Type TabItem}}, Path=Header}" HorizontalAlignment="Stretch"/>
+                            <!--Button to close a particular tab-->
+                            <Button Name="CloseButton" Style="{StaticResource CloseButtonStyle}" DockPanel.Dock="Right" Click="CloseTab"
+                                              CommandParameter="{Binding RelativeSource={RelativeSource AncestorType={x:Type TabItem}}, Path=Name}">
+                                <Image Width="14" Height="14" HorizontalAlignment="Right" VerticalAlignment="Center">
+                                    <Image.Style>
+                                        <Style TargetType="{x:Type Image}">
+                                            <Style.Triggers>
+                                                <Trigger Property="IsMouseOver" Value="False">
+                                                    <Setter Property="Source"
+                                                            Value="/DynamoCoreWpf;component/UI/Images/closetab_normal.png" />
+                                                </Trigger>
+                                                <Trigger Property="IsMouseOver" Value="True">
+                                                    <Setter Property="Source"
+                                                            Value="/DynamoCoreWpf;component/UI/Images/closetab_hover.png" />
+                                                </Trigger>
+                                            </Style.Triggers>
+                                        </Style>
+                                    </Image.Style>
+                                </Image>
+                            </Button>
+                        </DockPanel>
+                    </DataTemplate>
+                    
+                    <!--Styling for the tab in the extensions side bar-->
+                    <Style TargetType="{x:Type TabItem}">
+                        <Setter Property="MinWidth" Value="{Binding Source={x:Static configuration:Configurations.ExtensionsSideBarTabMinWidth}}" />
+                        <Setter Property="Template">
+                            <Setter.Value>
+                                <ControlTemplate TargetType="{x:Type TabItem}">
+                                    <Grid>
+                                        <Border Name="Border" Margin="0,0,0,0"  BorderThickness="1 0 1 0" 
+                                                        BorderBrush="{StaticResource BorderBrushWhite}">
+                                            <ContentPresenter x:Name="ContentSite" VerticalAlignment="Center"
+                                                     HorizontalAlignment="Stretch"
+                                                     ContentSource="Header" Margin="3,0,0,3"
+                                                     RecognizesAccessKey="True">
+                                            </ContentPresenter>
+                                        </Border>
+                                    </Grid>
+                                    <!--Properties for selected and unselected tabs-->
+                                    <ControlTemplate.Triggers>
+                                        <Trigger Property="IsSelected" Value="true">
+                                            <Setter Property="Foreground"
+                                                         Value="{StaticResource WorkspaceTabHeaderActiveTextBrush}" />
+                                        </Trigger>
+                                        <Trigger Property="IsSelected" Value="false">
+                                            <Setter Property="Foreground"
+                                                         Value="{StaticResource WorkspaceTabHeaderInactiveTextBrush}" />
+                                            <Setter TargetName="Border" Property="Background"
+                                                         Value="{StaticResource HighlightedBrush}" />
+                                        </Trigger>
+                                    </ControlTemplate.Triggers>
+                                </ControlTemplate>
+                            </Setter.Value>
+                        </Setter>
+                    </Style>
+                </TabControl.Resources>
+            </TabControl>
         </Grid>
 
         <!--Bottom Panel including RunMode etc-->
diff --git a/src/DynamoCoreWpf/Views/Core/DynamoView.xaml.cs b/src/DynamoCoreWpf/Views/Core/DynamoView.xaml.cs
diff --git a/test/DynamoCoreWpfTests/ViewExtensionTests.cs b/test/DynamoCoreWpfTests/ViewExtensionTests.cs
