Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Make side panel handles size to content #11057

Merged
merged 1 commit into from
Aug 27, 2020
Merged

Make side panel handles size to content #11057

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
39 changes: 22 additions & 17 deletions src/DynamoCoreWpf/Views/Core/DynamoView.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1516,7 +1516,7 @@
VerticalAlignment="Top"
Margin="0,310,0,0">
<Grid Background="#353535"
Width="100"
Width="Auto"
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Seems this is the only changed needed to fix the left side?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes. No further gymnastics required on that side.

Cursor="Hand">
<Button Click="OnCollapsedLeftSidebarClick"
Template="{DynamicResource BackgroundButton}">
Expand All @@ -1533,8 +1533,8 @@
</Border>
</ControlTemplate>
</Button.Resources>
<Grid Mouse.MouseEnter="Button_MouseEnter"
Mouse.MouseLeave="Button_MouseLeave">
<Grid Mouse.MouseEnter="LibraryHandle_MouseEnter"
Mouse.MouseLeave="LibraryHandle_MouseLeave">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
Expand Down Expand Up @@ -1581,9 +1581,10 @@
Background="{StaticResource HighlightedBrush}"
HorizontalAlignment="Right"
VerticalAlignment="Top"
Margin="0,310,-79,0">
Margin="0,310,0,0"
RenderTransformOrigin="1,0">
<Grid Background="#353535"
Width="100"
Width="Auto"
Cursor="Hand">
<Button Click="OnCollapsedRightSidebarClick"
Template="{DynamicResource BackgroundButton}">
Expand All @@ -1600,22 +1601,14 @@
</Border>
</ControlTemplate>
</Button.Resources>
<Grid Mouse.MouseEnter="Button_MouseEnter"
Mouse.MouseLeave="Button_MouseLeave">
<Grid Mouse.MouseEnter="ExtensionHandle_MouseEnter"
Mouse.MouseLeave="ExtensionHandle_MouseLeave">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<StackPanel Orientation="Horizontal"
HorizontalAlignment="Center">
<TextBlock Grid.Column="0"
Name="ExtensionSidebarText"
VerticalAlignment="Center"
Foreground="#aaaaaa"
FontWeight="Normal"
Margin="5,0,0,5"
Text="{x:Static p:Resources.ExtensionsViewTitle}">
</TextBlock>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Curious why did we only move this textblock for the right side but keep the change for left?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Without getting into much detail, the main difference is that the centre of the rotation is different for each side, which in turn requires to do things differently in order to show the handles as we expect them.

<Image Grid.Column="0"
Name="ExtensionSidebarIcon"
Source="/DynamoCoreWpf;component/UI/Images/expand_normal.png"
Expand All @@ -1625,17 +1618,29 @@
Margin="5,5,5,5"
RenderTransformOrigin="0.5, 0.5">
<Image.RenderTransform>
<RotateTransform Angle="90" />
<RotateTransform Angle="-90" />
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Curious what this is for?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That's for rotating a UI element. This is related to the gymnastics I mentioned. Since the rotation of the panel changed directions, this one needs to change as well.

</Image.RenderTransform>
</Image>
<TextBlock Grid.Column="0"
Name="ExtensionSidebarText"
VerticalAlignment="Center"
Foreground="#aaaaaa"
FontWeight="Normal"
Margin="0,5,5,0"
Text="{x:Static p:Resources.ExtensionsViewTitle}"
RenderTransformOrigin="0.5,0.5">
<TextBlock.RenderTransform>
<RotateTransform Angle="180"/>
</TextBlock.RenderTransform>
</TextBlock>
</StackPanel>
</Grid>
</Button>

</Grid>

<StackPanel.RenderTransform>
<RotateTransform Angle="-90" />
<RotateTransform Angle="90" />
</StackPanel.RenderTransform>
</StackPanel>

Expand Down
60 changes: 45 additions & 15 deletions src/DynamoCoreWpf/Views/Core/DynamoView.xaml.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -120,7 +120,7 @@ public DynamoView(DynamoViewModel dynamoViewModel)
LocationChanged += DynamoView_LocationChanged;

// Apply appropriate expand/collapse library button state depending on initial width
updateCollapseIcon();
UpdateLibraryCollapseIcon();

// Check that preference bounds are actually within one
// of the available monitors.
Expand Down Expand Up @@ -1780,25 +1780,40 @@ private void SlideWindowToIncludeTab(int tabSelected)
}
}

private void Button_MouseEnter(object sender, MouseEventArgs e)
private void LibraryHandle_MouseEnter(object sender, MouseEventArgs e)
{
Grid g = (Grid)sender;
StackPanel sp = (StackPanel)(g.Children[0]);
TextBlock tb = (TextBlock)(sp.Children[0]);
var bc = new BrushConverter();
tb.Foreground = (Brush)bc.ConvertFrom("#cccccc");
Image collapseIcon = (Image)sp.Children[1];

// When hovered swap appropriate expand/collapse button state
UpdateHandleHoveredStyle(tb, collapseIcon);
}

private void UpdateHandleHoveredStyle(TextBlock text, Image icon)
{
var bc = new BrushConverter();
text.Foreground = (Brush)bc.ConvertFrom("#cccccc");

if (LibraryCollapsed || ExtensionsCollapsed)
{
Uri imageUri;
imageUri = new Uri(@"pack://application:,,,/DynamoCoreWpf;component/UI/Images/expand_hover.png");
BitmapImage hover = new BitmapImage(imageUri);
collapseIcon.Source = hover;
icon.Source = hover;
}
}

private void ExtensionHandle_MouseEnter(object sender, MouseEventArgs e)
{
Grid g = (Grid)sender;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should we check the type of sender here is Grid before doing all of the following?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This part did not really change. I would say it is fine like this given it is an event handler, and as such should not be reused.

StackPanel sp = (StackPanel)(g.Children[0]);
TextBlock tb = (TextBlock)(sp.Children[1]);
Image collapseIcon = (Image)sp.Children[0];

UpdateHandleHoveredStyle(tb, collapseIcon);
}

private bool libraryCollapsed;
private bool extensionsCollapsed;

Expand Down Expand Up @@ -1842,7 +1857,7 @@ public bool ExtensionsCollapsed
}

// Check if library is collapsed or expanded and apply appropriate button state
private void updateCollapseIcon()
private void UpdateLibraryCollapseIcon()
{
if (LibraryCollapsed)
{
Expand Down Expand Up @@ -1882,7 +1897,7 @@ private void OnCollapsedLeftSidebarClick(object sender, EventArgs e)
LeftExtensionsViewColumn.Width = new GridLength(0, GridUnitType.Star);
}

updateCollapseIcon();
UpdateLibraryCollapseIcon();
}

private void OnCollapsedRightSidebarClick(object sender, EventArgs e)
Expand All @@ -1898,24 +1913,39 @@ private void OnCollapsedRightSidebarClick(object sender, EventArgs e)
}

// TODO: Maynot need this depending on tab design
updateCollapseIcon();
UpdateLibraryCollapseIcon();
}

private void Button_MouseLeave(object sender, MouseEventArgs e)
private void LibraryHandle_MouseLeave(object sender, MouseEventArgs e)
{
Grid g = (Grid)sender;
StackPanel sp = (StackPanel)(g.Children[0]);
TextBlock tb = (TextBlock)(sp.Children[0]);
var bc = new BrushConverter();
tb.Foreground = (Brush)bc.ConvertFromString("#aaaaaa");
Image collapseIcon = (Image)sp.Children[1];

UpdateHandleUnhoveredStyle(tb, collapseIcon);
UpdateLibraryCollapseIcon();
}

private void UpdateHandleUnhoveredStyle(TextBlock text, Image icon)
{
var bc = new BrushConverter();
text.Foreground = (Brush)bc.ConvertFromString("#aaaaaa");

Uri imageUri;
imageUri = new Uri(@"pack://application:,,,/DynamoCoreWpf;component/UI/Images/expand_normal.png");
BitmapImage hover = new BitmapImage(imageUri);
collapseIcon.Source = hover;
icon.Source = hover;
}

private void ExtensionHandle_MouseLeave(object sender, MouseEventArgs e)
{
Grid g = (Grid)sender;
StackPanel sp = (StackPanel)(g.Children[0]);
TextBlock tb = (TextBlock)(sp.Children[1]);
Image collapseIcon = (Image)sp.Children[0];

updateCollapseIcon();
UpdateHandleUnhoveredStyle(tb, collapseIcon);
}

private double restoreWidth = 0;
Expand Down Expand Up @@ -2004,7 +2034,7 @@ private void WorkspaceTabs_SizeChanged(object sender, SizeChangedEventArgs e)
ToggleWorkspaceTabVisibility(WorkspaceTabs.SelectedIndex);

// When workspace is resized apply appropriate library expand/collapse icon
updateCollapseIcon();
UpdateLibraryCollapseIcon();
}

private void DynamoView_OnDrop(object sender, DragEventArgs e)
Expand Down