ux: improve macOS window control button colors for a more native look

This commit is contained in:
Chiahong Hong 2024-09-01 13:47:13 +08:00
parent ef9396bf57
commit 2b056ee644
No known key found for this signature in database
GPG key ID: 77021906D88E7150
15 changed files with 124 additions and 51 deletions

View file

@ -445,13 +445,59 @@
<Setter Property="StrokeThickness" Value=".5"/>
<Setter Property="Stroke" Value="#40000000"/>
</Style>
<Style Selector="Button.caption_button_macos.close Ellipse">
<Setter Property="Fill" Value="{DynamicResource Brush.MacOS.Close}"/>
</Style>
<Style Selector="Button.caption_button_macos.minimize Ellipse">
<Setter Property="Fill" Value="{DynamicResource Brush.MacOS.Minimize}"/>
</Style>
<Style Selector="Button.caption_button_macos.maximize Ellipse">
<Setter Property="Fill" Value="{DynamicResource Brush.MacOS.Maximize}"/>
</Style>
<Style Selector="Button.caption_button_macos.close:pressed Ellipse">
<Setter Property="Fill" Value="{DynamicResource Brush.MacOS.ClosePressed}"/>
</Style>
<Style Selector="Button.caption_button_macos.minimize:pressed Ellipse">
<Setter Property="Fill" Value="{DynamicResource Brush.MacOS.MinimizePressed}"/>
</Style>
<Style Selector="Button.caption_button_macos.maximize:pressed Ellipse">
<Setter Property="Fill" Value="{DynamicResource Brush.MacOS.MaximizePressed}"/>
</Style>
<Style Selector="Button.caption_button_macos Path">
<Setter Property="Width" Value="8"/>
<Setter Property="Height" Value="8"/>
<Setter Property="Stretch" Value="Fill"/>
<Setter Property="Fill" Value="Black"/>
<Setter Property="IsVisible" Value="False"/>
<Setter Property="VerticalAlignment" Value="Center"/>
</Style>
<Style Selector="Button.caption_button_macos.close Path">
<Setter Property="Width" Value="6"/>
<Setter Property="Height" Value="6"/>
<Setter Property="Fill" Value="{DynamicResource Brush.MacOS.CloseFG}"/>
<Setter Property="Data" Value="{StaticResource Icons.MacOS.Close}"/>
</Style>
<Style Selector="Button.caption_button_macos.minimize Path">
<Setter Property="Width" Value="8"/>
<Setter Property="Height" Value="2"/>
<Setter Property="Fill" Value="{DynamicResource Brush.MacOS.MinimizeFG}"/>
<Setter Property="Data" Value="{StaticResource Icons.MacOS.Minimize}"/>
</Style>
<Style Selector="Button.caption_button_macos.maximize Path">
<Setter Property="Width" Value="6"/>
<Setter Property="Height" Value="6"/>
<Setter Property="Fill" Value="{DynamicResource Brush.MacOS.MaximizeFG}"/>
<Setter Property="Data" Value="{StaticResource Icons.MacOS.Maximize}"/>
</Style>
<Style Selector="Button.caption_button_macos.close:pressed Path">
<Setter Property="Fill" Value="{DynamicResource Brush.MacOS.ClosePressedFG}"/>
</Style>
<Style Selector="Button.caption_button_macos.minimize:pressed Path">
<Setter Property="Fill" Value="{DynamicResource Brush.MacOS.MinimizePressedFG}"/>
</Style>
<Style Selector="Button.caption_button_macos.maximize:pressed Path">
<Setter Property="Fill" Value="{DynamicResource Brush.MacOS.MaximizePressedFG}"/>
</Style>
<Style Selector="Grid.caption_button_box:pointerover Button.caption_button_macos Path">
<Setter Property="IsVisible" Value="True"/>
</Style>

View file

@ -2,9 +2,18 @@
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<ResourceDictionary.ThemeDictionaries>
<ResourceDictionary x:Key="Light">
<Color x:Key="Color.MacOS.Close">#FFFF6059</Color>
<Color x:Key="Color.MacOS.Minimize">#FFFFBE2F</Color>
<Color x:Key="Color.MacOS.Maximize">#FF29c941</Color>
<Color x:Key="Color.MacOS.Close">#FFED6A5E</Color>
<Color x:Key="Color.MacOS.CloseFG">#FF69110A</Color>
<Color x:Key="Color.MacOS.ClosePressed">#FFB24F46</Color>
<Color x:Key="Color.MacOS.ClosePressedFG">#FF2E0402</Color>
<Color x:Key="Color.MacOS.Minimize">#FFF4BF4F</Color>
<Color x:Key="Color.MacOS.MinimizeFG">#FF8F591D</Color>
<Color x:Key="Color.MacOS.MinimizePressed">#FFB78F3A</Color>
<Color x:Key="Color.MacOS.MinimizePressedFG">#FF522A0A</Color>
<Color x:Key="Color.MacOS.Maximize">#FF61C554</Color>
<Color x:Key="Color.MacOS.MaximizeFG">#FF296017</Color>
<Color x:Key="Color.MacOS.MaximizePressed">#FF48943F</Color>
<Color x:Key="Color.MacOS.MaximizePressedFG">#FF102F07</Color>
<Color x:Key="Color.Window">#FFF0F5F9</Color>
<Color x:Key="Color.WindowBorder">#00000000</Color>
<Color x:Key="Color.TitleBar">#FFCFDEEA</Color>
@ -37,9 +46,18 @@
</ResourceDictionary>
<ResourceDictionary x:Key="Dark">
<Color x:Key="Color.MacOS.Close">#FFFF5E56</Color>
<Color x:Key="Color.MacOS.Minimize">#FFFCBB2D</Color>
<Color x:Key="Color.MacOS.Maximize">#FF25C53C</Color>
<Color x:Key="Color.MacOS.Close">#FFED6A5E</Color>
<Color x:Key="Color.MacOS.CloseFG">#FF8C1A10</Color>
<Color x:Key="Color.MacOS.ClosePressed">#FFF09389</Color>
<Color x:Key="Color.MacOS.ClosePressedFG">#FF69120A</Color>
<Color x:Key="Color.MacOS.Minimize">#FFF4BF4F</Color>
<Color x:Key="Color.MacOS.MinimizeFG">#FF8F591D</Color>
<Color x:Key="Color.MacOS.MinimizePressed">#FFFBEB74</Color>
<Color x:Key="Color.MacOS.MinimizePressedFG">#FF705F1B</Color>
<Color x:Key="Color.MacOS.Maximize">#FF61C554</Color>
<Color x:Key="Color.MacOS.MaximizeFG">#FF296017</Color>
<Color x:Key="Color.MacOS.MaximizePressed">#FF86F37F</Color>
<Color x:Key="Color.MacOS.MaximizePressedFG">#FF2C681A</Color>
<Color x:Key="Color.Window">#FF252525</Color>
<Color x:Key="Color.WindowBorder">#FF444444</Color>
<Color x:Key="Color.TitleBar">#FF1F1F1F</Color>
@ -73,8 +91,17 @@
</ResourceDictionary.ThemeDictionaries>
<SolidColorBrush x:Key="Brush.MacOS.Close" Color="{DynamicResource Color.MacOS.Close}"/>
<SolidColorBrush x:Key="Brush.MacOS.CloseFG" Color="{DynamicResource Color.MacOS.CloseFG}"/>
<SolidColorBrush x:Key="Brush.MacOS.ClosePressed" Color="{DynamicResource Color.MacOS.ClosePressed}"/>
<SolidColorBrush x:Key="Brush.MacOS.ClosePressedFG" Color="{DynamicResource Color.MacOS.ClosePressedFG}"/>
<SolidColorBrush x:Key="Brush.MacOS.Minimize" Color="{DynamicResource Color.MacOS.Minimize}"/>
<SolidColorBrush x:Key="Brush.MacOS.MinimizeFG" Color="{DynamicResource Color.MacOS.MinimizeFG}"/>
<SolidColorBrush x:Key="Brush.MacOS.MinimizePressed" Color="{DynamicResource Color.MacOS.MinimizePressed}"/>
<SolidColorBrush x:Key="Brush.MacOS.MinimizePressedFG" Color="{DynamicResource Color.MacOS.MinimizePressedFG}"/>
<SolidColorBrush x:Key="Brush.MacOS.Maximize" Color="{DynamicResource Color.MacOS.Maximize}"/>
<SolidColorBrush x:Key="Brush.MacOS.MaximizeFG" Color="{DynamicResource Color.MacOS.MaximizeFG}"/>
<SolidColorBrush x:Key="Brush.MacOS.MaximizePressed" Color="{DynamicResource Color.MacOS.MaximizePressed}"/>
<SolidColorBrush x:Key="Brush.MacOS.MaximizePressedFG" Color="{DynamicResource Color.MacOS.MaximizePressedFG}"/>
<SolidColorBrush x:Key="Brush.Window" Color="{DynamicResource Color.Window}"/>
<SolidColorBrush x:Key="Brush.WindowBorder" Color="{DynamicResource Color.WindowBorder}"/>
<SolidColorBrush x:Key="Brush.TitleBar" Color="{DynamicResource Color.TitleBar}"/>

View file

@ -26,10 +26,10 @@
IsVisible="{OnPlatform True, macOS=False}"/>
<Grid Grid.Column="0" Classes="caption_button_box" Margin="2,4,0,0" IsVisible="{OnPlatform False, macOS=True}">
<Button Classes="caption_button_macos" Click="CloseWindow">
<Button Classes="caption_button_macos close" Click="CloseWindow">
<Grid>
<Ellipse Fill="{DynamicResource Brush.MacOS.Close}"/>
<Path Height="6" Width="6" Stretch="Fill" Fill="#505050" Data="{StaticResource Icons.MacOS.Close}"/>
<Ellipse/>
<Path/>
</Grid>
</Button>
</Grid>

View file

@ -26,10 +26,10 @@
IsVisible="{OnPlatform True, macOS=False}"/>
<Grid Grid.Column="0" Classes="caption_button_box" Margin="2,4,0,0" IsVisible="{OnPlatform False, macOS=True}">
<Button Classes="caption_button_macos" Click="CloseWindow">
<Button Classes="caption_button_macos close" Click="CloseWindow">
<Grid>
<Ellipse Fill="{DynamicResource Brush.MacOS.Close}"/>
<Path Height="6" Width="6" Stretch="Fill" Fill="#505050" Data="{StaticResource Icons.MacOS.Close}"/>
<Ellipse/>
<Path/>
</Grid>
</Button>
</Grid>

View file

@ -29,10 +29,10 @@
IsVisible="{OnPlatform True, macOS=False}"/>
<Grid Grid.Column="0" Classes="caption_button_box" Margin="2,4,0,0" IsVisible="{OnPlatform False, macOS=True}">
<Button Classes="caption_button_macos" Click="CloseWindow">
<Button Classes="caption_button_macos close" Click="CloseWindow">
<Grid>
<Ellipse Fill="{DynamicResource Brush.MacOS.Close}"/>
<Path Height="6" Width="6" Stretch="Fill" Fill="#505050" Data="{StaticResource Icons.MacOS.Close}"/>
<Ellipse/>
<Path/>
</Grid>
</Button>
</Grid>

View file

@ -6,22 +6,22 @@
x:Class="SourceGit.Views.CaptionButtonsMacOS">
<Grid Classes="caption_button_box">
<StackPanel Orientation="Horizontal">
<Button Classes="caption_button_macos" Click="CloseWindow" Margin="10,0,0,0">
<Button Classes="caption_button_macos close" Click="CloseWindow" Margin="10,0,0,0">
<Grid>
<Ellipse Fill="{DynamicResource Brush.MacOS.Close}"/>
<Path Height="6" Width="6" Stretch="Fill" Fill="#505050" Data="{StaticResource Icons.MacOS.Close}"/>
<Ellipse/>
<Path/>
</Grid>
</Button>
<Button Classes="caption_button_macos" Click="MinimizeWindow">
<Button Classes="caption_button_macos minimize" Click="MinimizeWindow">
<Grid>
<Ellipse Fill="{DynamicResource Brush.MacOS.Minimize}"/>
<Path Height="2" Width="8" Stretch="Fill" Fill="#404040" Data="{StaticResource Icons.MacOS.Minimize}"/>
<Ellipse/>
<Path/>
</Grid>
</Button>
<Button Classes="caption_button_macos" Click="MaximizeOrRestoreWindow">
<Button Classes="caption_button_macos maximize" Click="MaximizeOrRestoreWindow">
<Grid>
<Ellipse Fill="{DynamicResource Brush.MacOS.Maximize}"/>
<Path Height="6" Width="6" Stretch="Fill" Fill="#404040" Data="{StaticResource Icons.MacOS.Maximize}"/>
<Ellipse/>
<Path/>
</Grid>
</Button>
</StackPanel>

View file

@ -26,10 +26,10 @@
IsVisible="{OnPlatform True, macOS=False}"/>
<Grid Grid.Column="0" Classes="caption_button_box" Margin="2,4,0,0" IsVisible="{OnPlatform False, macOS=True}">
<Button Classes="caption_button_macos" Click="CloseWindow">
<Button Classes="caption_button_macos close" Click="CloseWindow">
<Grid>
<Ellipse Fill="{DynamicResource Brush.MacOS.Close}"/>
<Path Height="6" Width="6" Stretch="Fill" Fill="#505050" Data="{StaticResource Icons.MacOS.Close}"/>
<Ellipse/>
<Path/>
</Grid>
</Button>
</Grid>

View file

@ -28,10 +28,10 @@
IsVisible="{OnPlatform True, macOS=False}"/>
<Grid Grid.Column="0" Classes="caption_button_box" Margin="2,4,0,0" IsVisible="{OnPlatform False, macOS=True}">
<Button Classes="caption_button_macos" Click="CloseWindow">
<Button Classes="caption_button_macos close" Click="CloseWindow">
<Grid>
<Ellipse Fill="{DynamicResource Brush.MacOS.Close}"/>
<Path Height="6" Width="6" Stretch="Fill" Fill="#505050" Data="{StaticResource Icons.MacOS.Close}"/>
<Ellipse/>
<Path/>
</Grid>
</Button>
</Grid>

View file

@ -29,10 +29,10 @@
IsVisible="{OnPlatform True, macOS=False}"/>
<Grid Grid.Column="0" Classes="caption_button_box" Margin="2,4,0,0" IsVisible="{OnPlatform False, macOS=True}">
<Button Classes="caption_button_macos" Click="CloseWindow">
<Button Classes="caption_button_macos close" Click="CloseWindow">
<Grid>
<Ellipse Fill="{DynamicResource Brush.MacOS.Close}"/>
<Path Height="6" Width="6" Stretch="Fill" Fill="#505050" Data="{StaticResource Icons.MacOS.Close}"/>
<Ellipse/>
<Path/>
</Grid>
</Button>
</Grid>

View file

@ -28,10 +28,10 @@
IsVisible="{OnPlatform True, macOS=False}"/>
<Grid Grid.Column="0" Classes="caption_button_box" Margin="2,4,0,0" IsVisible="{OnPlatform False, macOS=True}">
<Button Classes="caption_button_macos" Click="CloseWindow">
<Button Classes="caption_button_macos close" Click="CloseWindow">
<Grid>
<Ellipse Fill="{DynamicResource Brush.MacOS.Close}"/>
<Path Height="6" Width="6" Stretch="Fill" Fill="#505050" Data="{StaticResource Icons.MacOS.Close}"/>
<Ellipse/>
<Path/>
</Grid>
</Button>
</Grid>

View file

@ -30,10 +30,10 @@
IsVisible="{OnPlatform True, macOS=False}"/>
<Grid Grid.Column="0" Classes="caption_button_box" Margin="2,4,0,0" IsVisible="{OnPlatform False, macOS=True}">
<Button Classes="caption_button_macos" Click="CloseWindow">
<Button Classes="caption_button_macos close" Click="CloseWindow">
<Grid>
<Ellipse Fill="{DynamicResource Brush.MacOS.Close}"/>
<Path Height="6" Width="6" Stretch="Fill" Fill="#505050" Data="{StaticResource Icons.MacOS.Close}"/>
<Ellipse/>
<Path/>
</Grid>
</Button>
</Grid>

View file

@ -29,10 +29,10 @@
IsVisible="{OnPlatform True, macOS=False}"/>
<Grid Grid.Column="0" Classes="caption_button_box" Margin="2,4,0,0" IsVisible="{OnPlatform False, macOS=True}">
<Button Classes="caption_button_macos" Click="CloseWindow">
<Button Classes="caption_button_macos close" Click="CloseWindow">
<Grid>
<Ellipse Fill="{DynamicResource Brush.MacOS.Close}"/>
<Path Height="6" Width="6" Stretch="Fill" Fill="#505050" Data="{StaticResource Icons.MacOS.Close}"/>
<Ellipse/>
<Path/>
</Grid>
</Button>
</Grid>

View file

@ -30,10 +30,10 @@
IsVisible="{OnPlatform True, macOS=False}"/>
<Grid Grid.Column="0" Classes="caption_button_box" Margin="2,4,0,0" IsVisible="{OnPlatform False, macOS=True}">
<Button Classes="caption_button_macos" Click="CloseWindow">
<Button Classes="caption_button_macos close" Click="CloseWindow">
<Grid>
<Ellipse Fill="{DynamicResource Brush.MacOS.Close}"/>
<Path Height="6" Width="6" Stretch="Fill" Fill="#505050" Data="{StaticResource Icons.MacOS.Close}"/>
<Ellipse/>
<Path/>
</Grid>
</Button>
</Grid>

View file

@ -27,10 +27,10 @@
IsVisible="{OnPlatform True, macOS=False}"/>
<Grid Grid.Column="0" Classes="caption_button_box" Margin="2,4,0,0" IsVisible="{OnPlatform False, macOS=True}">
<Button Classes="caption_button_macos" Click="CloseWindow">
<Button Classes="caption_button_macos close" Click="CloseWindow">
<Grid>
<Ellipse Fill="{DynamicResource Brush.MacOS.Close}"/>
<Path Height="6" Width="6" Stretch="Fill" Fill="#505050" Data="{StaticResource Icons.MacOS.Close}"/>
<Ellipse/>
<Path/>
</Grid>
</Button>
</Grid>

View file

@ -28,10 +28,10 @@
IsVisible="{OnPlatform True, macOS=False}"/>
<Grid Grid.Column="0" Classes="caption_button_box" Margin="2,4,0,0" IsVisible="{OnPlatform False, macOS=True}">
<Button Classes="caption_button_macos" Click="CloseWindow">
<Button Classes="caption_button_macos close" Click="CloseWindow">
<Grid>
<Ellipse Fill="{DynamicResource Brush.MacOS.Close}"/>
<Path Height="6" Width="6" Stretch="Fill" Fill="#505050" Data="{StaticResource Icons.MacOS.Close}"/>
<Ellipse/>
<Path/>
</Grid>
</Button>
</Grid>