Skip to content

Commit

Permalink
Python Node Editor Visual Update (#13732)
Browse files Browse the repository at this point in the history 
* Python editor visual restyle - initial commit

- initial commit for python editor visual restyle
- for general idea of the desired scope, visit https://www.figma.com/file/1q7EWQGYO7pPDhyLf8nuwW/Python-node-editor-restyling?node-id=0%3A1&t=QGCSTKllX8Q7OnhK-0

* Icon Update

- updated python scrip editor icons

* Hover icon update

- minor update for one of the icons
  • Loading branch information
@dnenov @sm6srw
dnenov authored and sm6srw committed Apr 5, 2023
1 parent 435d24f commit e41b5fc
Show file tree
Hide file tree
Showing 24 changed files with 521 additions and 164 deletions.
134 changes: 122 additions & 12 deletions src/DynamoCoreWpf/UI/Themes/Modern/DynamoModern.xaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -206,6 +206,30 @@
</ControlTemplate.Triggers>
</ControlTemplate>


<ControlTemplate x:Key="ComboBoxToggleButtonUpdated" TargetType="ToggleButton">
<Grid>
<Border x:Name="Border"
Background="Transparent"
BorderBrush="#a9a9a9"
BorderThickness="0 0 0 1" />
<Path x:Name="Arrow"
Margin="0,0,10,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="Background" Value="#333" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>

<ControlTemplate x:Key="ComboBoxTextBox" TargetType="TextBox">
<Border x:Name="PART_ContentHost" Focusable="False" />
</ControlTemplate>
Expand Down Expand Up @@ -295,6 +319,90 @@
<Style.Triggers />
</Style>

<Style x:Key="SComboBox_Update" 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="120" />
<Setter Property="Padding" Value="12,3" />
<Setter Property="MinHeight" Value="20" />
<Setter Property="MaxHeight" Value="40" />
<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="{StaticResource ComboBoxToggleButtonUpdated}" />
<ContentPresenter Name="ContentSite"
Margin="9,3,23,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="#2c2c2c"
BorderBrush="#444444"
BorderThickness="1,0,1,1" />
<ScrollViewer Margin="4,6,4,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="4" />
<Setter TargetName="DropDownBorder" Property="Margin" Value="0,2,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>

<Style x:Key="SSearchOnlineToggleButton" TargetType="{x:Type ToggleButton}">
<Setter Property="Template">
<Setter.Value>
Expand Down Expand Up @@ -1273,35 +1381,36 @@
</Style>

<Style x:Key="SButtonWithShapeIcon" TargetType="{x:Type Button}">
<Setter Property="SnapsToDevicePixels" Value="True"/>
<Setter Property="UseLayoutRounding" Value="True"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Border x:Name="container"
Background="Transparent"
BorderBrush="#3c3c3c"
BorderThickness="1">
<Grid x:Name="inner" Background="#373737">
<StackPanel Orientation="Horizontal">
<ContentControl Content="{DynamicResource ResourceKey=Shape}" />
</StackPanel>
BorderBrush="Transparent"
BorderThickness="0">
<Grid x:Name="inner" Background="Transparent">
<ContentControl Name="shapeIcon"
Content="{DynamicResource ResourceKey=Shape}"
Width="24" Height="24"
SnapsToDevicePixels="True"
UseLayoutRounding="True"/>
</Grid>
</Border>

<ControlTemplate.Triggers>

<Trigger Property="Button.IsMouseOver" Value="true">
<Setter TargetName="container" Property="BorderBrush" Value="#656565" />
<Setter TargetName="inner" Property="Background" Value="#373737" />
<Setter TargetName="shapeIcon" Property="Content" Value="{DynamicResource ResourceKey=HighlightShape}" />
</Trigger>

<Trigger Property="Button.IsPressed" Value="true">
<Setter TargetName="container" Property="BorderBrush" Value="#656565" />
<Setter TargetName="inner" Property="Background" Value="#272727" />
<Setter TargetName="shapeIcon" Property="Opacity" Value="0.2" />
</Trigger>

<Trigger Property="IsEnabled" Value="false">
<Setter TargetName="container" Property="BorderBrush" Value="Transparent" />
<Setter TargetName="inner" Property="Background" Value="#373737" />
<Setter TargetName="shapeIcon" Property="Opacity" Value="0.5" />
</Trigger>

</ControlTemplate.Triggers>
Expand Down Expand Up @@ -2872,6 +2981,7 @@
<Style x:Key="BaseButtonStyle" TargetType="Button">
<Setter Property="Cursor" Value="Hand"/>
<Setter Property="SnapsToDevicePixels" Value="True"/>
<Setter Property="UseLayoutRounding" Value="True"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
Expand Down
2 changes: 1 addition & 1 deletion src/Libraries/PythonNodeModels/Properties/Resources.Designer.cs
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

14 changes: 7 additions & 7 deletions src/Libraries/PythonNodeModels/Properties/Resources.en-US.resx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -162,7 +162,7 @@
<comment>It is comment in the code. IN shouldn't be translated.</comment>
</data>
<data name="PythonScriptEditorMoreInfoButtonTooltip" xml:space="preserve">
<value>Learn about Python3 updates.</value>
<value>Learn about the Python 2 to Python 3 conversion</value>
</data>
<data name="PythonScriptEditorOutputComment" xml:space="preserve">
<value>Assign your output to the OUT variable.</value>
Expand All @@ -172,13 +172,13 @@
<value>Revert the changes made to current Python node editor and close it.</value>
</data>
<data name="PythonScriptEditorRunButton" xml:space="preserve">
<value>Run</value>
<value>Save and run</value>
</data>
<data name="PythonScriptEditorRunButtonTooltip" xml:space="preserve">
<value>Save current code in Python node editor and run graph with it.</value>
<value>Save Python script and run it with the graph</value>
</data>
<data name="PythonScriptEditorSaveChangesButtonTooltip" xml:space="preserve">
<value>Save the changes made to current Python node editor.</value>
<value>Save changes made in Python Script editor</value>
</data>
<data name="PythonScriptFromStringDescription" xml:space="preserve">
<value>Runs a Python script from a string.</value>
Expand All @@ -188,12 +188,12 @@
<value>Python script to run.</value>
</data>
<data name="PythonScriptEditorEngineDropdownTooltip" xml:space="preserve">
<value>Use this dropdown to choose the python version/engine to execute your code.</value>
<value>Select the Python version/engine to execute the script</value>
</data>
<data name="PythonScriptEditorMigrationAssistantButtonTooltip" xml:space="preserve">
<value>Run migration utility tool to make the script Python 3 compliant.</value>
<value>Convert script to Python 3...</value>
</data>
<data name="PythonSearchTags" xml:space="preserve">
<value>IronPython;CPython;</value>
</data>
</root>
</root>
14 changes: 7 additions & 7 deletions src/Libraries/PythonNodeModels/Properties/Resources.resx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -163,7 +163,7 @@
<comment>It is comment in the code. IN shouldn't be translated.</comment>
</data>
<data name="PythonScriptEditorMoreInfoButtonTooltip" xml:space="preserve">
<value>Learn about Python3 updates.</value>
<value>Learn about the Python 2 to Python 3 conversion</value>
</data>
<data name="PythonScriptEditorOutputComment" xml:space="preserve">
<value>Assign your output to the OUT variable.</value>
Expand All @@ -173,13 +173,13 @@
<value>Revert the changes made to current Python node editor and close it.</value>
</data>
<data name="PythonScriptEditorRunButton" xml:space="preserve">
<value>Run</value>
<value>Save and run</value>
</data>
<data name="PythonScriptEditorRunButtonTooltip" xml:space="preserve">
<value>Save current code in Python node editor and run graph with it.</value>
<value>Save Python script and run it with the graph</value>
</data>
<data name="PythonScriptEditorSaveChangesButtonTooltip" xml:space="preserve">
<value>Save the changes made to current Python node editor.</value>
<value>Save changes made in Python Script editor</value>
</data>
<data name="PythonScriptFromStringDescription" xml:space="preserve">
<value>Runs a Python script from a string.</value>
Expand All @@ -189,12 +189,12 @@
<value>Python script to run.</value>
</data>
<data name="PythonScriptEditorEngineDropdownTooltip" xml:space="preserve">
<value>Use this dropdown to choose the python version/engine to execute your code.</value>
<value>Select the Python version/engine to execute the script</value>
</data>
<data name="PythonScriptEditorMigrationAssistantButtonTooltip" xml:space="preserve">
<value>Run migration utility tool to make the script Python 3 compliant.</value>
<value>Convert script to Python 3...</value>
</data>
<data name="PythonSearchTags" xml:space="preserve">
<value>IronPython;CPython;</value>
</data>
</root>
</root>
34 changes: 34 additions & 0 deletions src/Libraries/PythonNodeModelsWpf/PythonNodeModelsWpf.csproj
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,24 @@
<DestinationSubDirectory>..\</DestinationSubDirectory>
</ReferenceCopyLocalPaths>
</ItemDefinitionGroup>
<ItemGroup>
<None Remove="Resources\convert.png" />
<None Remove="Resources\convert_hover.png" />
<None Remove="Resources\question-filled.png" />
<None Remove="Resources\question-filled_hover.png" />
<None Remove="Resources\redo.png" />
<None Remove="Resources\redo_hover.png" />
<None Remove="Resources\reset.png" />
<None Remove="Resources\reset_hover.png" />
<None Remove="Resources\save.png" />
<None Remove="Resources\save_hover.png" />
<None Remove="Resources\undo.png" />
<None Remove="Resources\undo_hover.png" />
<None Remove="Resources\zoom-in.png" />
<None Remove="Resources\zoom-in_hover.png" />
<None Remove="Resources\zoom-out.png" />
<None Remove="Resources\zoom-out_hover.png" />
</ItemGroup>
<ItemGroup>
<PackageReference Include="AvalonEdit" Version="4.3.1.9430" />
<PackageReference Include="FontAwesome.WPF" Version="4.7.0.9" />
Expand Down Expand Up @@ -60,9 +78,24 @@
</ProjectReference>
</ItemGroup>
<ItemGroup>
<Resource Include="Resources\convert.png" />
<EmbeddedResource Include="Resources\ICSharpCode.PythonBinding.Resources.Python.xshd">
<SubType>Designer</SubType>
</EmbeddedResource>
<Resource Include="Resources\convert_hover.png" />
<Resource Include="Resources\question-filled.png" />
<Resource Include="Resources\question-filled_hover.png" />
<Resource Include="Resources\redo.png" />
<Resource Include="Resources\redo_hover.png" />
<Resource Include="Resources\reset.png" />
<Resource Include="Resources\reset_hover.png" />
<Resource Include="Resources\save.png" />
<Resource Include="Resources\save_hover.png" />
<Resource Include="Resources\undo.png" />
<Resource Include="Resources\undo_hover.png" />
<Resource Include="Resources\zoom-in.png" />
<Resource Include="Resources\zoom-in_hover.png" />
<Resource Include="Resources\zoom-out.png" />
</ItemGroup>
<ItemGroup>
<Page Include="Controls\EngineLabel.xaml">
Expand Down Expand Up @@ -94,5 +127,6 @@
</ItemGroup>
<ItemGroup>
<Resource Include="Resources\2to3Icon.png" />
<Resource Include="Resources\zoom-out_hover.png" />
</ItemGroup>
</Project>
Loading

0 comments on commit e41b5fc

Please sign in to comment.