Skip to content

[MacOS] Fix tabs #165

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

Merged
merged 2 commits into from
Jun 5, 2025
Merged

[MacOS] Fix tabs #165

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
6bd6f77
Fix vertical offset
apman Jun 5, 2025
f835566
Various fixes
apman Jun 5, 2025
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
10 changes: 7 additions & 3 deletions src/Devolutions.AvaloniaTheme.MacOS/Accents/ThemeResources.axaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,6 +61,8 @@
<SolidColorBrush x:Key="TextBoxBorderBrush" Color="{DynamicResource ForegroundColor}" Opacity="0.10" />
<SolidColorBrush x:Key="TextBoxBottomBorderBrush" Color="{DynamicResource ForegroundColor}" Opacity="0.20" />

<SolidColorBrush x:Key="TabItemSelectedPressedBrush" Color="#f0f0f0" />

<BoxShadows x:Key="TextBoxBorderShadows">0 0.5 2.5 0 #4d000000, 0 0 0 0.5 #03000000</BoxShadows>
<BoxShadows x:Key="ControlBorderBoxShadow">0 0.5 2.5 0 #4d000000, 0 0 0 0.5 #03000000</BoxShadows>
<BoxShadows x:Key="ComboBoxDisabledBoxShadow">0 0.5 2.5 0 #26000000, 0 0 0 0.5 #08000000</BoxShadows>
Expand Down Expand Up @@ -149,7 +151,7 @@

<SolidColorBrush x:Key="LayoutBackgroundHighBrush" Color="{DynamicResource ForegroundColor}" Opacity="0.24" />
<SolidColorBrush x:Key="LayoutBackgroundMidBrush" Color="{DynamicResource ForegroundColor}" Opacity="0.17" />
<SolidColorBrush x:Key="LayoutBackgroundLowBrush" Color="{DynamicResource ForegroundColor}" Opacity="0.09" />
<SolidColorBrush x:Key="LayoutBackgroundLowBrush" Color="{DynamicResource ForegroundColor}" Opacity="0.05" />

<SolidColorBrush x:Key="LayoutBorderHighBrush" Color="{DynamicResource ForegroundColor}" Opacity="0.2" />
<SolidColorBrush x:Key="LayoutBorderMidBrush" Color="{DynamicResource ForegroundColor}" Opacity="0.17" />
Expand All @@ -169,6 +171,8 @@
<SolidColorBrush x:Key="TextBoxBorderBrush" Color="{DynamicResource ForegroundColor}" Opacity="0.14" />
<SolidColorBrush x:Key="TextBoxBottomBorderBrush" Color="{DynamicResource ForegroundColor}" Opacity="0.24" />

<SolidColorBrush x:Key="TabItemSelectedPressedBrush" Color="#666666" />

<BoxShadows x:Key="TextBoxBorderShadows">0 1 1 0 #4dffffff</BoxShadows>
<BoxShadows x:Key="ControlBorderBoxShadow">0 0 Transparent</BoxShadows>
<BoxShadows x:Key="ComboBoxDisabledBoxShadow">0 0.5 2.5 0 #26ffffff, 0 0 0 0.5 #08ffffff</BoxShadows>
Expand Down Expand Up @@ -257,7 +261,7 @@
<Thickness x:Key="BorderThickness">1</Thickness>

<Thickness x:Key="InputControlsSpaceForFocusBorder">1.5</Thickness>
<Thickness x:Key="TabControlSpaceForFocusFactors">3</Thickness>
<Thickness x:Key="TabControlSpaceForFocusFactors">2 2 2 0</Thickness>

<x:Double x:Key="DefaultFontSize">13</x:Double>
<x:Double x:Key="ControlFontSize">13</x:Double>
Expand Down Expand Up @@ -344,7 +348,7 @@
</VisualBrush>

<!-- TabControl & TabItem Resources -->
<Thickness x:Key="TabItemPadding">8 2</Thickness>
<Thickness x:Key="TabItemPadding">16 2</Thickness>
<SolidColorBrush x:Key="TabControlBackgroundBrush" Color="{DynamicResource TabControlBackgroundColor}" />

<!-- CheckBox Resources -->
Expand Down
21 changes: 9 additions & 12 deletions src/Devolutions.AvaloniaTheme.MacOS/Controls/TabControl.axaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,6 @@
<Thickness x:Key="TabControlTopPlacementItemMargin">0 0 0 2</Thickness>

<ControlTheme x:Key="{x:Type TabControl}" TargetType="TabControl">
<!-- <Setter Property="Margin" Value="5" /> -->
<Setter Property="Padding" Value="10" />
<Setter Property="Background" Value="Transparent" />

Expand All @@ -51,6 +50,7 @@
<Setter Property="BorderThickness" Value="{DynamicResource BorderThickness}" />
<Setter Property="CornerRadius" Value="{DynamicResource LayoutCornerRadius}" />
<Setter Property="ClipToBounds" Value="False" />
<Setter Property="Padding" Value="10 -10 10 10" />
<Setter Property="Template">
<ControlTemplate>
<Border Background="{TemplateBinding Background}"
Expand All @@ -61,6 +61,13 @@
<Border Name="TabstripPanel"
ClipToBounds="False"
UseLayoutRounding="False"
Background="{DynamicResource TabControlBackgroundBrush}"
HorizontalAlignment="Center"
BorderBrush="{DynamicResource LayoutBorderMidBrush}"
BorderThickness="0.5 1 0.5 0.6"
CornerRadius="{DynamicResource ControlCornerRadius}"
Padding="0"
ZIndex="1"
DockPanel.Dock="{TemplateBinding TabStripPlacement}">
<Border.Margin>
<Binding Source="{StaticResource InputControlsSpaceForFocusBorder}"
Expand All @@ -84,21 +91,11 @@
</Border>
</ControlTemplate>
</Setter>
<Setter Property="Padding" Value="10 -10 10 10" />
<Style Selector="^/template/ Border#TabstripPanel">
<Setter Property="Background" Value="{DynamicResource TabControlBackgroundBrush}" />
<Setter Property="HorizontalAlignment" Value="Center" />
<Setter Property="BorderBrush" Value="{DynamicResource LayoutBorderMidBrush}" />
<Setter Property="BorderThickness" Value="0 1 0 0.6" />
<Setter Property="CornerRadius" Value="{DynamicResource ControlCornerRadius}" />
<Setter Property="Padding" Value="0" />
<Setter Property="ZIndex" Value="1" />
</Style>
<Style Selector="^/template/ ItemsPresenter#PART_ItemsPresenter">
<Setter Property="Margin" Value="0" />
</Style>
<Style Selector="^/template/ ItemsPresenter#PART_ItemsPresenter > WrapPanel">
<Setter Property="Margin" Value="-4 0 0 0" />
<Setter Property="Margin" Value="0 0 0 0" />
</Style>
<Style Selector="^/template/ ContentPresenter#PART_SelectedContentHost">
<Setter Property="Padding" Value="20" />
Expand Down
71 changes: 28 additions & 43 deletions src/Devolutions.AvaloniaTheme.MacOS/Controls/TabItem.axaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@

<Design.PreviewWith>
<ThemeVariantScope RequestedThemeVariant="Dark">
<Border Background="#212121">
<Border Background="{DynamicResource BackgroundBrush}">
<StackPanel Orientation="Horizontal" VerticalAlignment="Top">
<Border Width="500">
<TabControl TabStripPlacement="Left" Margin="5">
Expand Down Expand Up @@ -66,12 +66,9 @@
</ThemeVariantScope>
</Design.PreviewWith>

<!-- Shifting the divider right up to the left neighbour -->
<!-- Shifting the tab to the left to cover the divider of its left neighbour -->
<Thickness x:Key="TabItemDividerMargin">-2, 0, 0, 0</Thickness>
<!-- Shifting the 'selected' border to the right to hide the divider -->
<Thickness x:Key="TabItemSelectedMargin">1, 0, -1, 0</Thickness>
<!-- = ButtonDefaultPadding + 1px horizontal offset to keep the text position stable as the margin shifts -->
<Thickness x:Key="TabItemSelectedOffsetPadding">7, 2, 9, 2</Thickness>


<ControlTheme x:Key="{x:Type TabItem}" TargetType="TabItem">
<Setter Property="Background" Value="Transparent" />
Expand All @@ -81,8 +78,8 @@
<Setter Property="BorderBrush" Value="Transparent" />
<Setter Property="HorizontalAlignment" Value="Stretch" />
<Setter Property="HorizontalContentAlignment" Value="Center" />
<Setter Property="Margin" Value="0" />
<Setter Property="Padding" Value="{DynamicResource TabItemPadding}" />
<Setter Property="Margin" Value="{DynamicResource TabItemDividerMargin}" />
<Setter Property="Padding" Value="{DynamicResource TabItemPadding} " />
<Setter Property="FocusAdorner" Value="{x:Null}" />
<Setter Property="ClipToBounds" Value="False" />

Expand All @@ -94,34 +91,23 @@
<Setter Property="Template">
<ControlTemplate>
<Panel>
<StackPanel Orientation="Horizontal">
<!-- POTENTIALLY FRAGILE HACK (TODO: test with different user font size settings ...?)
The TextBlock as divider works better than Rectangle, because the pipe character is anti-aliased.
A better option might be to track the selected tab in code-behind and attach a property addressing the
tab to the right of it somehow ... Or check DataGrid ColumnHeader - that works fine with Rectangle TODO: ??? -->
<TextBlock Name="TabDivider"
Foreground="{DynamicResource ForegroundLowBrush}"
VerticalAlignment="Center"
Margin="{DynamicResource TabItemDividerMargin}">
|
</TextBlock>
<!-- <Rectangle Name="TabDivider" -->
<!-- Height="14" -->
<!-- Width="1" -->
<!-- Fill="{DynamicResource ForegroundLowBrush}" -->
<!-- VerticalAlignment="Center" /> -->
<ContentPresenter Name="PART_ContentPresenter"
Padding="{TemplateBinding Padding}"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Content="{TemplateBinding Header}"
ContentTemplate="{TemplateBinding HeaderTemplate}"
CornerRadius="{TemplateBinding CornerRadius}"
RecognizesAccessKey="True" />
</StackPanel>
<Border Name="TabDivider"
Height="12"
VerticalAlignment="Center"
Background="Transparent"
BorderThickness=" 0 0 1 0"
BorderBrush="{DynamicResource ForegroundLowBrush}" />
<ContentPresenter Name="PART_ContentPresenter"
Padding="{TemplateBinding Padding}"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Content="{TemplateBinding Header}"
ContentTemplate="{TemplateBinding HeaderTemplate}"
CornerRadius="{TemplateBinding CornerRadius}"
RecognizesAccessKey="True" />
<Border Name="FocusBorderElement"
Margin="-1 -3 -3 -3"
BorderThickness="{StaticResource FocusBorderThickness}"
Expand All @@ -137,21 +123,20 @@
</Style>
</Style>

<Style Selector="^:nth-child(1) /template/ TextBlock#TabDivider">
<Setter Property="Foreground" Value="Transparent" />
<Style Selector="^:nth-last-child(1) /template/ Border#TabDivider">
<Setter Property="BorderBrush" Value="Transparent" />
</Style>
<Style Selector="^:selected /template/ TextBlock#TabDivider">
<Setter Property="Foreground" Value="Transparent" />
<Style Selector="^:selected /template/ Border#TabDivider">
<Setter Property="BorderBrush" Value="Transparent" />
</Style>
<Style Selector="^:selected /template/ ContentPresenter#PART_ContentPresenter">
<Setter Property="Background" Value="{DynamicResource ControlBackgroundHighBrush}" />
<!-- Border deliberately a bit darker, to hide right neighbour's divider better -->
<Setter Property="BorderBrush" Value="{DynamicResource ForegroundLowBrush}" />
<Setter Property="CornerRadius" Value="{DynamicResource ControlCornerRadius}" />
</Style>
<Style Selector="^:selected:not(:nth-last-child(1)) /template/ ContentPresenter#PART_ContentPresenter">
<Setter Property="Margin" Value="{DynamicResource TabItemSelectedMargin}" />
<Setter Property="Padding" Value="{DynamicResource TabItemSelectedOffsetPadding}" />
<Style Selector="^:selected:pressed /template/ ContentPresenter#PART_ContentPresenter">
<Setter Property="Background" Value="{DynamicResource TabItemSelectedPressedBrush}" />
</Style>
</Style>

Expand Down