Skip to content

Commit

Permalink
Fix text scaling issues in settings UI (#17910)
Browse files Browse the repository at this point in the history
## Summary of the Pull Request
Fixes some issues with truncated text in the settings UI when 200% text
scaling is applied.

For #17897, a minimum height was applied instead of a plain "height".
This ensures that the desired height is applied in general, but under
200% text scaling, we are allowed to grow past that, thus preventing the
truncation of the text.

For #17898, flyouts have a scroll viewer inside them by default. We
actually don't want the scroll viewer because that means the text will
appear "truncated" when in reality, the user is expected to notice the
small scrollbar and scroll horizontally (why that's the default, I will
never know). This PR introduces a new style that can be applied to these
flyouts to cause text wrapping instead of horizontal scrolling. Looked
through the app for any instances where this happens.

For #12006, simply changing the column width from a static value to
"auto" fixes the issue. Frankly, we care more about the text appearing
as a whole (and as whole words). The name of the actions wrap properly
anyways.

Closes #17897
Closes #17898
Closes #12006
  • Loading branch information
carlos-zamora committed Sep 17, 2024
1 parent 2c97c05 commit a7e47b7
Show file tree
Hide file tree
Showing 4 changed files with 26 additions and 5 deletions.
4 changes: 2 additions & 2 deletions src/cascadia/TerminalSettingsEditor/Actions.xaml
Original file line number Diff line number Diff line change
Expand Up @@ -178,7 +178,7 @@
<!-- command name -->
<ColumnDefinition Width="*" />
<!-- key chord -->
<ColumnDefinition Width="150" />
<ColumnDefinition Width="auto" />
<!-- edit buttons -->
<!--
This needs to be 112 because that is the width of the row of buttons in edit mode + padding.
Expand Down Expand Up @@ -307,7 +307,7 @@
Glyph="&#xE74D;" />
</Button.Content>
<Button.Flyout>
<Flyout>
<Flyout FlyoutPresenterStyle="{StaticResource CustomFlyoutPresenterStyle}">
<StackPanel>
<TextBlock x:Uid="Actions_DeleteConfirmationMessage"
Style="{StaticResource CustomFlyoutTextStyle}" />
Expand Down
13 changes: 13 additions & 0 deletions src/cascadia/TerminalSettingsEditor/ActionsViewModel.cpp
Original file line number Diff line number Diff line change
Expand Up @@ -289,14 +289,17 @@ namespace winrt::Microsoft::Terminal::Settings::Editor::implementation
// Display a confirmation dialog.
TextBlock errorMessageTB{};
errorMessageTB.Text(RS_(L"Actions_RenameConflictConfirmationMessage"));
errorMessageTB.TextWrapping(TextWrapping::Wrap);

const auto conflictingCmdName{ conflictingCmd.Name() };
TextBlock conflictingCommandNameTB{};
conflictingCommandNameTB.Text(fmt::format(L"\"{}\"", conflictingCmdName.empty() ? RS_(L"Actions_UnnamedCommandName") : conflictingCmdName));
conflictingCommandNameTB.FontStyle(Windows::UI::Text::FontStyle::Italic);
conflictingCommandNameTB.TextWrapping(TextWrapping::Wrap);

TextBlock confirmationQuestionTB{};
confirmationQuestionTB.Text(RS_(L"Actions_RenameConflictConfirmationQuestion"));
confirmationQuestionTB.TextWrapping(TextWrapping::Wrap);

Button acceptBTN{};
acceptBTN.Content(box_value(RS_(L"Actions_RenameConflictConfirmationAcceptButton")));
Expand All @@ -320,7 +323,17 @@ namespace winrt::Microsoft::Terminal::Settings::Editor::implementation
flyoutStack.Children().Append(confirmationQuestionTB);
flyoutStack.Children().Append(acceptBTN);

// This should match CustomFlyoutPresenterStyle in CommonResources.xaml!
// We don't have access to those resources here, so it's easier to just copy them over.
// This allows the flyout text to wrap
Style acceptChangesFlyoutStyle{ winrt::xaml_typename<FlyoutPresenter>() };
Setter horizontalScrollModeStyleSetter{ ScrollViewer::HorizontalScrollModeProperty(), box_value(ScrollMode::Disabled) };
Setter horizontalScrollBarVisibilityStyleSetter{ ScrollViewer::HorizontalScrollBarVisibilityProperty(), box_value(ScrollBarVisibility::Disabled) };
acceptChangesFlyoutStyle.Setters().Append(horizontalScrollModeStyleSetter);
acceptChangesFlyoutStyle.Setters().Append(horizontalScrollBarVisibilityStyleSetter);

Flyout acceptChangesFlyout{};
acceptChangesFlyout.FlyoutPresenterStyle(acceptChangesFlyoutStyle);
acceptChangesFlyout.Content(flyoutStack);
senderVM.AcceptChangesFlyout(acceptChangesFlyout);
}
Expand Down
12 changes: 10 additions & 2 deletions src/cascadia/TerminalSettingsEditor/CommonResources.xaml
Original file line number Diff line number Diff line change
Expand Up @@ -115,7 +115,7 @@
<!-- Used for disclaimers -->
<Style x:Key="DisclaimerStyle"
TargetType="TextBlock">
<Setter Property="TextWrapping" Value="WrapWholeWords" />
<Setter Property="TextWrapping" Value="Wrap" />
<Setter Property="MaxWidth" Value="1000" />
</Style>

Expand All @@ -125,6 +125,14 @@
TargetType="TextBlock">
<Setter Property="FontWeight" Value="Bold" />
<Setter Property="Margin" Value="0,0,0,10" />
<Setter Property="TextWrapping" Value="Wrap" />
</Style>

<!-- Used for the flyout itself. Removes scroll bar to allow for text wrapping. -->
<Style x:Key="CustomFlyoutPresenterStyle"
TargetType="FlyoutPresenter">
<Setter Property="ScrollViewer.HorizontalScrollMode" Value="Disabled" />
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled" />
</Style>

<!-- Number Box -->
Expand All @@ -145,7 +153,7 @@
BasedOn="{StaticResource BaseButtonStyle}"
TargetType="Button">
<Setter Property="Margin" Value="10,0,0,0" />
<Setter Property="Height" Value="33" />
<Setter Property="MinHeight" Value="33" />
</Style>

<!-- Delete button based on Accent button template -->
Expand Down
2 changes: 1 addition & 1 deletion src/cascadia/TerminalSettingsEditor/EditColorScheme.xaml
Original file line number Diff line number Diff line change
Expand Up @@ -488,7 +488,7 @@
</StackPanel>
</Button.Content>
<Button.Flyout>
<Flyout>
<Flyout FlyoutPresenterStyle="{StaticResource CustomFlyoutPresenterStyle}">
<StackPanel>
<TextBlock x:Uid="ColorScheme_DeleteConfirmationMessage"
Style="{StaticResource CustomFlyoutTextStyle}" />
Expand Down

0 comments on commit a7e47b7

Please sign in to comment.