ux: Style the SplitButton

This commit is contained in:
walterlv 2024-04-08 10:16:37 +08:00
parent 8f70778ec2
commit 718788e07e
2 changed files with 52 additions and 5 deletions

View file

@ -243,6 +243,37 @@
<Setter Property="Opacity" Value="1"/>
</Style>
<Style Selector="SplitButton.icon_button">
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="VerticalAlignment" Value="Center"/>
<Setter Property="Padding" Value="4,0,0,0" />
<Setter Property="MinHeight" Value="26" />
<Style.Resources>
<x:Double x:Key="SplitButtonPrimaryButtonSize">24</x:Double>
<x:Double x:Key="SplitButtonSecondaryButtonSize">40</x:Double>
<x:Double x:Key="SplitButtonSeparatorWidth">0</x:Double>
<SolidColorBrush x:Key="SplitButtonBackgroundPressed" Color="Transparent" />
</Style.Resources>
</Style>
<Style Selector="SplitButton.icon_button /template/ Button#PART_SecondaryButton">
<Setter Property="Margin" Value="-24,0,0,0"/>
<Setter Property="Padding" Value="24,0,4,0"/>
<Setter Property="ZIndex" Value="-1"/>
<Setter Property="CornerRadius" Value="{DynamicResource ControlCornerRadius}"/>
</Style>
<Style Selector="SplitButton.icon_button /template/ PathIcon">
<Setter Property="Width" Value="8"/>
<Setter Property="Height" Value="8"/>
</Style>
<Style Selector="SplitButton.icon_button /template/ Button#PART_PrimaryButton /template/ ContentPresenter#PART_ContentPresenter">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="Opacity" Value="0.8"/>
</Style>
<Style Selector="SplitButton.icon_button:pointerover /template/ Button#PART_PrimaryButton /template/ ContentPresenter#PART_ContentPresenter">
<Setter Property="Opacity" Value="1"/>
</Style>
<Style Selector="Button.flat">
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="FontWeight" Value="Bold"/>

View file

@ -9,6 +9,18 @@
mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
x:Class="SourceGit.Views.Repository"
x:DataType="vm:Repository">
<UserControl.Resources>
<MenuFlyout x:Key="TerminalShellsMenuFlyout" Placement="Bottom">
<MenuItem Header="git bash" />
<MenuItem Header="PowerShell" />
</MenuFlyout>
<MenuFlyout x:Key="ExternalToolsMenuFlyout" Placement="Bottom">
<MenuItem Header="Visual Studio Code" />
<MenuItem Header="Sublime Text" />
</MenuFlyout>
</UserControl.Resources>
<Grid RowDefinitions="36,*" Background="{DynamicResource Brush.Window}">
<!-- Toolbar -->
<Border Grid.Row="0" BorderBrush="{DynamicResource Brush.Border0}" BorderThickness="0,0,0,1" Background="{DynamicResource Brush.ToolBar}">
@ -18,13 +30,17 @@
<Path Width="15" Height="13" Data="{StaticResource Icons.Folder.Open}" Margin="0,1,0,0"/>
</Button>
<Button Classes="icon_button" Width="32" Command="{Binding OpenInTerminal}" ToolTip.Tip="{DynamicResource Text.Repository.Terminal}">
<SplitButton Classes="icon_button" Command="{Binding OpenInTerminal}"
Flyout="{StaticResource TerminalShellsMenuFlyout}"
ToolTip.Tip="{DynamicResource Text.Repository.Terminal}">
<Path Width="13" Height="13" Data="{StaticResource Icons.Terminal}"/>
</Button>
</SplitButton>
<Button Classes="icon_button" Width="32" Click="OnOpenWithExternalEditor" ToolTip.Tip="{DynamicResource Text.Repository.OpenWithExternalTools}">
<SplitButton Classes="icon_button" Click="OnOpenWithExternalEditor"
Flyout="{StaticResource ExternalToolsMenuFlyout}"
ToolTip.Tip="{DynamicResource Text.Repository.OpenWithExternalTools}">
<Path Width="13" Height="13" Data="{StaticResource Icons.OpenWith}"/>
</Button>
</SplitButton>
<ToggleButton Width="32"
Background="Transparent"