Pm search for packages - versions updates (#14355)

* cherrypicking versions updates - versions now a drop-down allowing to install selected version instead of always installing the latest - install to selected folder option resurrection - UI design updates as per Firgma * selectedversion moved to the VM - selected version property moved to the PackageManagerSearchElementViewModel * test fix - fixed test failing when creating PackageManagerSearchElement because of versions not present at the moment of creation
DynamoDS · Sep 12, 2023 · 5acf18b · 5acf18b
1 parent 76599dd
commit 5acf18b
Show file tree

Hide file tree

Showing 9 changed files with 317 additions and 21 deletions.
diff --git a/src/DynamoCoreWpf/DynamoCoreWpf.csproj b/src/DynamoCoreWpf/DynamoCoreWpf.csproj
@@ -56,6 +56,7 @@
     <None Remove="Packages\SplashScreen\build\index.bundle.js" />
     <None Remove="Packages\SplashScreen\build\index.html" />
     <None Remove="UI\Images\Canvas\canvas-button-geometry-scaling.png" />
+    <None Remove="UI\Images\caret_drop_down.png" />
     <None Remove="UI\Images\NodeStates\package-64px.png" />
     <None Remove="UI\Images\PackageManager\empty-state-first-use-light-gray.png" />
     <None Remove="UI\Images\search_icon_20px.png" />
@@ -784,6 +785,7 @@
     <Resource Include="UI\Images\Alignment\align_y_average.png" />
     <Resource Include="UI\Images\Alignment\align_y_distribute.png" />
     <Resource Include="UI\Images\Canvas\canvas-button-geometry-scaling.png" />
+    <Resource Include="UI\Images\caret_drop_down.png" />
     <Resource Include="UI\Images\caret_up.png" />
     <EmbeddedResource Include="Views\GuidedTour\HtmlPages\Resources\ArtifaktElement-Regular.woff" />
     <Resource Include="UI\Images\cursors.psd" />

diff --git a/src/DynamoCoreWpf/UI/Images/Favorite.png b/src/DynamoCoreWpf/UI/Images/Favorite.png
diff --git a/src/DynamoCoreWpf/UI/Images/caret_drop_down.png b/src/DynamoCoreWpf/UI/Images/caret_drop_down.png
diff --git a/src/DynamoCoreWpf/UI/Themes/Modern/DynamoModern.xaml b/src/DynamoCoreWpf/UI/Themes/Modern/DynamoModern.xaml
@@ -318,7 +318,186 @@
         </Setter>
         <Style.Triggers />
     </Style>
+
+    <!-- Package Manager Styles -->
+    <ControlTemplate x:Key="PackageManagerComboBoxToggleButton"
+                     TargetType="ToggleButton">
+        <Grid>
+            <Border x:Name="Border"
+                    Background="Transparent"
+                    BorderBrush="#a9a9a9"
+                    BorderThickness="0 0 0 1" />
+            <Path x:Name="Arrow"
+                  Margin="0"
+                  HorizontalAlignment="Right"
+                  VerticalAlignment="Center"
+                  Data="M 0 0 L 4 4 L 8 0 Z"
+                  Fill="#999" />
+        </Grid>
+        <ControlTemplate.Triggers>
+            <Trigger Property="ToggleButton.IsMouseOver"
+                     Value="true">
+                <Setter TargetName="Arrow"
+                        Property="Fill"
+                        Value="#fff" />
+            </Trigger>
+            <Trigger Property="ToggleButton.IsChecked"
+                     Value="true">
+                <Setter TargetName="Border"
+                        Property="BorderBrush"
+                        Value="{DynamicResource BlueBrush}" />
+            </Trigger>
+        </ControlTemplate.Triggers>
+    </ControlTemplate>
+
+    <Style x:Key="PackageManagerComboBoxItemStyle"
+           TargetType="{x:Type ComboBoxItem}">
+        <Setter Property="Template">
+            <Setter.Value>
+                <ControlTemplate TargetType="{x:Type ComboBoxItem}">
+                    <Border Name="Border"
+                            Padding="10,5"
+                            SnapsToDevicePixels="true">
+                        <ContentPresenter />
+                    </Border>
+                    <ControlTemplate.Triggers>
+                        <Trigger Property="IsHighlighted"
+                                 Value="true">
+                            <Setter TargetName="Border"
+                                    Property="Background"
+                                    Value="#474747" />
+                        </Trigger>
+                        <Trigger Property="IsEnabled"
+                                 Value="false">
+                            <Setter Property="Foreground"
+                                    Value="#888888" />
+                        </Trigger>
+                    </ControlTemplate.Triggers>
+                </ControlTemplate>
+            </Setter.Value>
+        </Setter>
+    </Style>
 
+    <Style x:Key="PackageManagerSmallComboBox"
+           TargetType="{x:Type ComboBox}">
+        <Setter Property="SnapsToDevicePixels"
+                Value="true" />
+        <Setter Property="OverridesDefaultStyle"
+                Value="true" />
+        <Setter Property="ScrollViewer.HorizontalScrollBarVisibility"
+                Value="Auto" />
+        <Setter Property="ScrollViewer.VerticalScrollBarVisibility"
+                Value="Auto" />
+        <Setter Property="ScrollViewer.CanContentScroll"
+                Value="true" />
+        <Setter Property="MinWidth"
+                Value="40" />
+        <Setter Property="Padding"
+                Value="0" />
+        <Setter Property="MinHeight"
+                Value="20" />
+        <Setter Property="MaxHeight"
+                Value="40" />
+        <Setter Property="FontSize"
+                Value="10" />
+        <Setter Property="Foreground"
+                Value="#C7C7C7" />
+        <Setter Property="ItemContainerStyle"
+                Value="{DynamicResource PackageManagerComboBoxItemStyle}" />
+        <Setter Property="Template">
+            <Setter.Value>
+                <ControlTemplate TargetType="ComboBox">
+                    <Grid>
+                        <ToggleButton Name="ToggleButton"
+                                      Grid.Column="2"
+                                      ClickMode="Press"
+                                      Focusable="false"
+                                      IsChecked="{Binding Path=IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
+                                      Template="{DynamicResource PackageManagerComboBoxToggleButton}" />
+                        <ContentPresenter Name="ContentSite"
+                                          Margin="1,3,12,3"
+                                          HorizontalAlignment="Left"
+                                          VerticalAlignment="Center"
+                                          Content="{TemplateBinding SelectionBoxItem}"
+                                          ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}"
+                                          ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}"
+                                          IsHitTestVisible="False" />
+                        <TextBox x:Name="PART_EditableTextBox"
+                                 Margin="3,3,23,3"
+                                 Padding="10"
+                                 HorizontalAlignment="Left"
+                                 VerticalAlignment="Center"
+                                 Background="#666666"
+                                 CaretBrush="#bbbbbb"
+                                 Focusable="True"
+                                 Foreground="#bbbbbb"
+                                 IsReadOnly="{TemplateBinding IsReadOnly}"
+                                 Style="{x:Null}"
+                                 Template="{StaticResource ComboBoxTextBox}"
+                                 Visibility="Hidden" />
+                        <Popup Name="Popup"
+                               AllowsTransparency="True"
+                               Focusable="False"
+                               IsOpen="{TemplateBinding IsDropDownOpen}"
+                               Placement="Bottom"
+                               PopupAnimation="Slide">
+                            <Grid Name="DropDown"
+                                  MinWidth="{TemplateBinding ActualWidth}"
+                                  MaxHeight="{TemplateBinding MaxDropDownHeight}"
+                                  SnapsToDevicePixels="True">
+                                <Border x:Name="DropDownBorder"
+                                        Background="#535353"
+                                        BorderBrush="{DynamicResource MidLightBlueBrush}"
+                                        BorderThickness="0,6,0,0" />
+                                <ScrollViewer Margin="0,6,0,6"
+                                              SnapsToDevicePixels="True">
+                                    <StackPanel IsItemsHost="True"
+                                                KeyboardNavigation.DirectionalNavigation="Contained" />
+                                </ScrollViewer>
+                            </Grid>
+                        </Popup>
+                    </Grid>
+                    <ControlTemplate.Triggers>
+                        <Trigger Property="HasItems"
+                                 Value="false">
+                            <Setter TargetName="DropDownBorder"
+                                    Property="MinHeight"
+                                    Value="95" />
+                        </Trigger>
+                        <Trigger Property="IsGrouping"
+                                 Value="true">
+                            <Setter Property="ScrollViewer.CanContentScroll"
+                                    Value="false" />
+                        </Trigger>
+                        <Trigger SourceName="Popup"
+                                 Property="Popup.AllowsTransparency"
+                                 Value="true">
+                            <Setter TargetName="DropDownBorder"
+                                    Property="CornerRadius"
+                                    Value="0" />
+                            <Setter TargetName="DropDownBorder"
+                                    Property="Margin"
+                                    Value="0,0,0,0" />
+                        </Trigger>
+                        <Trigger Property="IsEditable"
+                                 Value="true">
+                            <Setter Property="IsTabStop"
+                                    Value="false" />
+                            <Setter TargetName="PART_EditableTextBox"
+                                    Property="Visibility"
+                                    Value="Visible" />
+                            <Setter TargetName="ContentSite"
+                                    Property="Visibility"
+                                    Value="Hidden" />
+                        </Trigger>
+                    </ControlTemplate.Triggers>
+                </ControlTemplate>
+            </Setter.Value>
+        </Setter>
+        <Style.Triggers />
+    </Style>
+    <!-- End Package Manager Styles -->
+
     <Style x:Key="SComboBox_Update" TargetType="{x:Type ComboBox}">
         <Setter Property="SnapsToDevicePixels" Value="true" />
         <Setter Property="OverridesDefaultStyle" Value="true" />

diff --git a/src/DynamoCoreWpf/ViewModels/PackageManager/PackageManagerSearchElementViewModel.cs b/src/DynamoCoreWpf/ViewModels/PackageManager/PackageManagerSearchElementViewModel.cs
@@ -27,6 +27,12 @@ public class PackageManagerSearchElementViewModel : BrowserItemViewModel, IEquat
 
         public new PackageManagerSearchElement Model { get; internal set; }
 
+
+        /// <summary>
+        /// The currently selected version of a package
+        /// </summary>
+        public string SelectedVersion { get; set; }
+
         /// <summary>
         /// Alternative constructor to assist communication between the 
         /// PackageManagerSearchViewModel and the PackageManagerSearchElementViewModel.
@@ -42,12 +48,14 @@ public PackageManagerSearchElementViewModel(PackageManagerSearchElement element,
             CanInstall = install;
             IsEnabledForInstall = isEnabledForInstall;
 
+            this.SelectedVersion = this.Model.LatestVersion;
+
             this.ToggleIsExpandedCommand = new DelegateCommand(() => this.Model.IsExpanded = !this.Model.IsExpanded);
 
             this.DownloadLatestCommand = new DelegateCommand(
-                () => OnRequestDownload(Model.Header.versions.Last(), false),
+                () => OnRequestDownload(Model.Header.versions.First(x => x.version.Equals(SelectedVersion)), false),
                 () => !Model.IsDeprecated && CanInstall);
-            this.DownloadLatestToCustomPathCommand = new DelegateCommand(() => OnRequestDownload(Model.Header.versions.Last(), true));
+            this.DownloadLatestToCustomPathCommand = new DelegateCommand(() => OnRequestDownload(Model.Header.versions.First(x => x.version.Equals(SelectedVersion)), true));
 
             this.UpvoteCommand = new DelegateCommand(Model.Upvote, () => canLogin);