Skip to content

Commit

Permalink
Improved the layout of many tools in "Keep on top" view. (#531)
Browse files Browse the repository at this point in the history
  • Loading branch information
@veler
veler authored May 18, 2022
1 parent b555bb0 commit 6a46e1a
Show file tree
Hide file tree
Showing 10 changed files with 464 additions and 86 deletions.
2 changes: 1 addition & 1 deletion src/dev/impl/DevToys/App.xaml.cs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -196,7 +196,7 @@ private async void OnUnhandledException(object sender, Windows.UI.Xaml.Unhandled
private async Task<Frame> EnsureWindowIsInitializedAsync()
{
var applicationView = ApplicationView.GetForCurrentView();
applicationView.SetPreferredMinSize(new Windows.Foundation.Size(300, 200));
applicationView.SetPreferredMinSize(new Windows.Foundation.Size(500, 500));

// Do not repeat app initialization when the Window already has content,
// just ensure that the window is active
Expand Down
7 changes: 5 additions & 2 deletions src/dev/impl/DevToys/Views/MainPage.xaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,8 @@
<Setter Target="NonCompactOverlayButton.Visibility" Value="Visible" />
<Setter Target="NavigationView.AlwaysShowHeader" Value="False" />
<Setter Target="NavigationView.IsPaneVisible" Value="False" />
<Setter Target="ScrollViewerContent.Margin" Value="12,36,12,0"/>
<Setter Target="ScrollViewerContent.Margin" Value="12,0,12,0"/>
<Setter Target="ContentRootScrollViewer.Margin" Value="0,36,0,0"/>
<Setter Target="ContentFrame.Padding" Value="0,0,0,0"/>
<Setter Target="HeaderTextBlock.Visibility" Value="Collapsed" />
<Setter Target="AppTitleLeftBorder.Width" Value="16" />
Expand All @@ -55,7 +56,8 @@
</VisualState>
<VisualState x:Name="NavigationViewMinimal">
<VisualState.Setters>
<Setter Target="ScrollViewerContent.Margin" Value="12,48,12,0"/>
<Setter Target="ContentRootScrollViewer.Margin" Value="0,48,0,0"/>
<Setter Target="ScrollViewerContent.Margin" Value="12,0,12,0"/>
<Setter Target="ContentFrame.Padding" Value="0,12,0,0"/>
</VisualState.Setters>
</VisualState>
Expand Down Expand Up @@ -317,6 +319,7 @@
</muxc:NavigationView.MenuItemTemplateSelector>

<ScrollViewer
x:Name="ContentRootScrollViewer"
HorizontalScrollMode="Disabled"
VerticalScrollMode="{x:Bind ViewModel.SelectedMenuItem.Metadata.NotScrollable, Mode=OneWay, Converter={StaticResource BooleanToScrollModeConverter}}">
<Grid
Expand Down
49 changes: 46 additions & 3 deletions src/dev/impl/DevToys/Views/Tools/Converters/JsonYaml/JsonYamlToolPage.xaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,17 @@
<ex:IsCompactOverlayModeTrigger TargetElement="{x:Bind}" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="ConfigurationStackPanel.Visibility" Value="Collapsed" />
<Setter Target="IndentationSetting.Visibility" Value="Collapsed"/>
<Setter Target="VerticalGridSplitter.Visibility" Value="Collapsed"/>
<Setter Target="HorizontalGridSplitter.Visibility" Value="Visible"/>
<Setter Target="InputCodeEditor.(Grid.Row)" Value="0" />
<Setter Target="InputCodeEditor.(Grid.RowSpan)" Value="1" />
<Setter Target="InputCodeEditor.(Grid.Column)" Value="0" />
<Setter Target="InputCodeEditor.(Grid.ColumnSpan)" Value="3" />
<Setter Target="OutputCodeEditor.(Grid.Row)" Value="2" />
<Setter Target="OutputCodeEditor.(Grid.RowSpan)" Value="1" />
<Setter Target="OutputCodeEditor.(Grid.Column)" Value="0" />
<Setter Target="OutputCodeEditor.(Grid.ColumnSpan)" Value="3" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
Expand All @@ -35,7 +45,9 @@
<RowDefinition Height="*"/>
</Grid.RowDefinitions>

<StackPanel x:Name="ConfigurationStackPanel" Grid.Row="0" Spacing="4" >
<StackPanel
Grid.Row="0"
Spacing="4">
<TextBlock Style="{StaticResource SubTitleTextBlock}" Text="{x:Bind ViewModel.Strings.Configuration}" />

<controls:ExpandableSettingControl
Expand All @@ -53,6 +65,7 @@
</controls:ExpandableSettingControl>

<controls:ExpandableSettingControl
x:Name="IndentationSetting"
Title="{x:Bind ViewModel.Strings.Indentation}">
<controls:ExpandableSettingControl.Icon>
<FontIcon Glyph="&#xF6F8;" />
Expand All @@ -71,29 +84,59 @@
<ColumnDefinition Width="16"/>
<ColumnDefinition MinWidth="100"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition MinHeight="100"/>
<RowDefinition Height="16"/>
<RowDefinition MinHeight="100"/>
</Grid.RowDefinitions>

<controls:CodeEditor
x:Name="InputCodeEditor"
Grid.Column="0"
Grid.Row="0"
Grid.RowSpan="3"
Header="{x:Bind ViewModel.Strings.Input}"
SettingsProvider="{x:Bind ViewModel.SettingsProvider}"
Text="{x:Bind ViewModel.InputValue, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
CodeLanguage="{x:Bind ViewModel.InputValueLanguage, Mode=OneWay}"/>

<toolkit:GridSplitter
x:Name="VerticalGridSplitter"
Grid.Column="1"
Grid.Row="0"
Grid.RowSpan="3"
Width="16"
Margin="0,42,0,0"
ResizeBehavior="BasedOnAlignment"
ResizeDirection="Auto">
ResizeDirection="Columns">
<toolkit:GridSplitter.Element>
<FontIcon
Glyph="&#xFD55;"
FontSize="13"/>
</toolkit:GridSplitter.Element>
</toolkit:GridSplitter>

<toolkit:GridSplitter
x:Name="HorizontalGridSplitter"
Grid.Row="1"
Grid.Column="0"
Grid.ColumnSpan="3"
Height="16"
ResizeBehavior="BasedOnAlignment"
ResizeDirection="Rows"
Visibility="Collapsed">
<toolkit:GridSplitter.Element>
<FontIcon
Glyph="&#xFD52;"
FontSize="13"/>
</toolkit:GridSplitter.Element>
</toolkit:GridSplitter>

<controls:CodeEditor
x:Name="OutputCodeEditor"
Grid.Column="2"
Grid.Row="0"
Grid.RowSpan="3"
IsReadOnly="True"
Header="{x:Bind ViewModel.Strings.Output}"
SettingsProvider="{x:Bind ViewModel.SettingsProvider}"
Expand Down
69 changes: 67 additions & 2 deletions ...s/Tools/EncodersDecoders/Base64ImageEncoderDecoder/Base64ImageEncoderDecoderToolPage.xaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,45 @@
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:controls="using:DevToys.UI.Controls"
xmlns:ex="using:DevToys.UI.Extensions"
xmlns:toolkit="using:Microsoft.Toolkit.Uwp.UI.Controls"
mc:Ignorable="d"
NavigationCacheMode="Disabled">

<Grid x:Name="RootGrid" RowSpacing="12" Margin="0,0,0,16">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup>
<VisualState>
<VisualState.StateTriggers>
<ex:IsCompactOverlayModeTrigger TargetElement="{x:Bind}" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="VerticalGridSplitter.Visibility" Value="Collapsed"/>
<Setter Target="HorizontalGridSplitter.Visibility" Value="Visible"/>
<Setter Target="Base64TextEditor.(Grid.Row)" Value="0" />
<Setter Target="Base64TextEditor.(Grid.RowSpan)" Value="1" />
<Setter Target="Base64TextEditor.(Grid.Column)" Value="0" />
<Setter Target="Base64TextEditor.(Grid.ColumnSpan)" Value="3" />
<Setter Target="ImageRelativePanel.(Grid.Row)" Value="2" />
<Setter Target="ImageRelativePanel.(Grid.RowSpan)" Value="1" />
<Setter Target="ImageRelativePanel.(Grid.Column)" Value="0" />
<Setter Target="ImageRelativePanel.(Grid.ColumnSpan)" Value="3" />
<Setter Target="ImageInputHeader.Margin" Value="0,-12,0,0"/>
<Setter Target="ImageFilePicker.(RelativePanel.AlignTopWithPanel)" Value="True" />
<Setter Target="ImageFilePicker.(RelativePanel.AlignBottomWithPanel)" Value="True" />
<Setter Target="ImageFilePicker.(RelativePanel.AlignRightWithPanel)" Value="False" />
<Setter Target="ImageFilePicker.MaxWidth" Value="235" />
<Setter Target="ImagePreview.Margin" Value="12,12,0,0" />
<Setter Target="ImagePreview.(RelativePanel.Below)" Value="" />
<Setter Target="ImagePreview.(RelativePanel.RightOf)" Value="ImageFilePicker" />
<Setter Target="ImagePreview.(RelativePanel.AlignLeftWithPanel)" Value="False" />
<Setter Target="ImagePreview.(RelativePanel.AlignTopWithPanel)" Value="True" />
<Setter Target="ImagePreview.(RelativePanel.AlignBottomWithPanel)" Value="True" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>

<Grid.ChildrenTransitions>
<TransitionCollection>
<EntranceThemeTransition IsStaggeringEnabled="True" FromVerticalOffset="50"/>
Expand All @@ -21,9 +55,17 @@
<ColumnDefinition Width="16"/>
<ColumnDefinition MinWidth="100"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition MinHeight="100"/>
<RowDefinition Height="16"/>
<RowDefinition MinHeight="100"/>
</Grid.RowDefinitions>

<controls:CustomTextBox
x:Name="Base64TextEditor"
Grid.Column="0"
Grid.Row="0"
Grid.RowSpan="3"
MinHeight="150"
AcceptsReturn="True"
IsRichTextEdit="True"
Expand All @@ -32,20 +74,42 @@
Text="{x:Bind ViewModel.Base64Data, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"/>

<toolkit:GridSplitter
x:Name="VerticalGridSplitter"
Grid.Column="1"
Grid.Row="0"
Grid.RowSpan="3"
Width="16"
Margin="0,42,0,0"
ResizeBehavior="BasedOnAlignment"
ResizeDirection="Auto">
ResizeDirection="Columns">
<toolkit:GridSplitter.Element>
<FontIcon
Glyph="&#xFD55;"
FontSize="13"/>
</toolkit:GridSplitter.Element>
</toolkit:GridSplitter>

<toolkit:GridSplitter
x:Name="HorizontalGridSplitter"
Grid.Row="1"
Grid.Column="0"
Grid.ColumnSpan="3"
Height="16"
ResizeBehavior="BasedOnAlignment"
ResizeDirection="Rows"
Visibility="Collapsed">
<toolkit:GridSplitter.Element>
<FontIcon
Glyph="&#xFD52;"
FontSize="13"/>
</toolkit:GridSplitter.Element>
</toolkit:GridSplitter>

<RelativePanel
Grid.Column="2">
x:Name="ImageRelativePanel"
Grid.Column="2"
Grid.Row="0"
Grid.RowSpan="3">
<TextBlock
x:Name="ImageInputHeader"
Text="{x:Bind ViewModel.Strings.ImageInputTitle}"
Expand All @@ -64,6 +128,7 @@
RelativePanel.AlignLeftWithPanel="True"
RelativePanel.AlignRightWithPanel="True"/>
<controls:ImagePreview
x:Name="ImagePreview"
Margin="0,12,0,0"
Source="{x:Bind ViewModel.ImageFile, Mode=OneWay}"
RelativePanel.Below="ImageFilePicker"
Expand Down
59 changes: 57 additions & 2 deletions src/dev/impl/DevToys/Views/Tools/Formatters/JsonFormatter/JsonFormatterToolPage.xaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,35 @@
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:controls="using:DevToys.UI.Controls"
xmlns:ex="using:DevToys.UI.Extensions"
xmlns:toolkit="using:Microsoft.Toolkit.Uwp.UI.Controls"
mc:Ignorable="d"
NavigationCacheMode="Required">

<Grid Margin="0,0,0,16" RowSpacing="12">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup>
<VisualState>
<VisualState.StateTriggers>
<ex:IsCompactOverlayModeTrigger TargetElement="{x:Bind}" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="SettingsStackPanel.Visibility" Value="Collapsed"/>
<Setter Target="VerticalGridSplitter.Visibility" Value="Collapsed"/>
<Setter Target="HorizontalGridSplitter.Visibility" Value="Visible"/>
<Setter Target="InputCodeEditor.(Grid.Row)" Value="0" />
<Setter Target="InputCodeEditor.(Grid.RowSpan)" Value="1" />
<Setter Target="InputCodeEditor.(Grid.Column)" Value="0" />
<Setter Target="InputCodeEditor.(Grid.ColumnSpan)" Value="3" />
<Setter Target="OutputCodeEditor.(Grid.Row)" Value="2" />
<Setter Target="OutputCodeEditor.(Grid.RowSpan)" Value="1" />
<Setter Target="OutputCodeEditor.(Grid.Column)" Value="0" />
<Setter Target="OutputCodeEditor.(Grid.ColumnSpan)" Value="3" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>

<Grid.ChildrenTransitions>
<TransitionCollection>
<EntranceThemeTransition IsStaggeringEnabled="True" FromVerticalOffset="50"/>
Expand All @@ -21,7 +45,10 @@
<RowDefinition Height="*"/>
</Grid.RowDefinitions>

<StackPanel Grid.Row="0" Spacing="4" >
<StackPanel
x:Name="SettingsStackPanel"
Grid.Row="0"
Spacing="4">
<TextBlock Style="{StaticResource SubTitleTextBlock}" Text="{x:Bind ViewModel.Strings.Configuration}" />

<controls:ExpandableSettingControl
Expand All @@ -45,31 +72,59 @@
<ColumnDefinition Width="16"/>
<ColumnDefinition MinWidth="100"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition MinHeight="100"/>
<RowDefinition Height="16"/>
<RowDefinition MinHeight="100"/>
</Grid.RowDefinitions>

<controls:CodeEditor
x:Name="InputCodeEditor"
Grid.Column="0"
Grid.Row="0"
Grid.RowSpan="3"
Header="{x:Bind ViewModel.Strings.Input}"
SettingsProvider="{x:Bind ViewModel.SettingsProvider}"
Text="{x:Bind ViewModel.InputValue, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
CodeLanguage="json"/>

<toolkit:GridSplitter
x:Name="VerticalGridSplitter"
Grid.Column="1"
Grid.Row="0"
Grid.RowSpan="3"
Width="16"
Margin="0,42,0,0"
ResizeBehavior="BasedOnAlignment"
ResizeDirection="Auto">
ResizeDirection="Columns">
<toolkit:GridSplitter.Element>
<FontIcon
Glyph="&#xFD55;"
FontSize="13"/>
</toolkit:GridSplitter.Element>
</toolkit:GridSplitter>

<toolkit:GridSplitter
x:Name="HorizontalGridSplitter"
Grid.Row="1"
Grid.Column="0"
Grid.ColumnSpan="3"
Height="16"
ResizeBehavior="BasedOnAlignment"
ResizeDirection="Rows"
Visibility="Collapsed">
<toolkit:GridSplitter.Element>
<FontIcon
Glyph="&#xFD52;"
FontSize="13"/>
</toolkit:GridSplitter.Element>
</toolkit:GridSplitter>

<controls:CodeEditor
x:Name="OutputCodeEditor"
Grid.Column="2"
Grid.Row="0"
Grid.RowSpan="3"
Header="{x:Bind ViewModel.Strings.Output}"
SettingsProvider="{x:Bind ViewModel.SettingsProvider}"
Text="{x:Bind ViewModel.OutputValue, Mode=OneWay}"
Expand Down
Loading

0 comments on commit 6a46e1a

Please sign in to comment.