Skip to content
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.

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

feat: add lightweight styling to divider (backport #765) #784

Merged
merged 1 commit into from
Aug 30, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
2 changes: 1 addition & 1 deletion doc/controls-styles.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ The `Uno.Toolkit.UI` library adds the following controls:
- `AutoLayout`: A custom panel used by the [Figma plugin](https://platform.uno/unofigma/) to bridge the gap between Figma and UWP layout implementation.
- [`Card` and `CardContentControl`](controls/CardAndCardContentControl.md): \[Material control\] Cards contain content and actions that relate information about a subject.
- [`Chip` and `ChipGroup`](controls/ChipAndChipGroup.md): \[Material control\] Chips are compact elements that represent an input, attribute, or action.
- `Divider`: \[Material control\] A divider is a thin line that groups content in lists and layouts.
- [`Divider`](controls/Divider.md): \[Material control\] A divider is a thin line that groups content in lists and layouts.
- [`DrawerControl`](controls/DrawerControl.md): A container to display additional content, in a hidden pane that can be revealed using a swipe gesture, like a drawer.
- [`DrawerFlyoutPresenter`](controls/DrawerFlyoutPresenter.md): A specialized `ContentPresenter` to be used in the template of a `FlyoutPresenter` to enable gesture support.
- [`LoadingView`](controls/LoadingView.md): A control that indicates that the UI is waiting on a task to complete.
Expand Down
40 changes: 40 additions & 0 deletions doc/controls/Divider.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
---
uid: Toolkit.Controls.Divider
---
# Divider
A divider is a thin line that groups content in lists and layouts.

## Properties
Property|Type|Description
-|-|-
SubHeader|String|Gets or sets the text of the text below the Divider.
SubHeaderForeground|Brush|Gets or sets the foreground of the subheader.

### C#
```csharp
public partial class Divider : Control
```

### XAML
```xml
xmlns:utu="using:Uno.Toolkit.UI"
...

content
<utu:Divider/>
content

```

## Lightweight Styling

Key|Type|Value
-|-|-
DividerForeground|SolidColorBrush|OutlineVariantBrush
DividerSubHeaderForeground|SolidColorBrush|OnSurfaceLowBrush
DividerSubHeaderFontFamily|FontFamily|MaterialMediumFontFamily
DividerSubHeaderFontWeight|FontWeight|BodySmallFontWeight
DividerSubHeaderFontSize|FontSize|BodySmallFontSize
DividerSubHeaderCharacterSpacing|CharacterSpacing|BodySmallCharacterSpacing
DividerSubHeaderMargin|Thickness|0,4,0,0
DividerHeight|Double|1
1 change: 1 addition & 0 deletions doc/lightweight-styling.md
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,7 @@ For more information about the lightweight styling resource keys used in each co
- [Card](controls/CardAndCardContentControl.md#lightweight-styling)
- [CardContentControl](controls/CardAndCardContentControl.md#lightweight-styling-1)
- [Chip](controls/ChipAndChipGroup.md#lightweight-styling)
- [Divider](controls/Divider.md#lightweight-styling)
- [NavigationBar](controls/NavigationBar.md#lightweight-styling)
- [TabBar](controls/TabBarAndTabBarItem.md#lightweight-styling)

Expand Down
2 changes: 2 additions & 0 deletions doc/toc.yml
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,8 @@
href: controls/CardAndCardContentControl.md
- name: Chip and ChipGroup
href: controls/ChipAndChipGroup.md
- name: Divider
href: controls/Divider.md
- name: DrawerControl
href: controls/DrawerControl.md
- name: DrawerFlyoutPresenter
Expand Down
8 changes: 4 additions & 4 deletions samples/Directory.Packages.props
Original file line number Diff line number Diff line change
Expand Up @@ -23,12 +23,12 @@
<PackageVersion Include="SkiaSharp.Views.Uno.WinUI" Version="2.88.5" />
<PackageVersion Include="Uno.Core.Extensions.Compatibility" Version="4.0.1" />
<PackageVersion Include="Uno.Core.Extensions.Logging.Singleton" Version="4.0.1" />
<PackageVersion Include="Uno.Cupertino" Version="2.7.0-dev.102" />
<PackageVersion Include="Uno.Cupertino.WinUI" Version="2.7.0-dev.102" />
<PackageVersion Include="Uno.Cupertino" Version="2.8.0-dev.6" />
<PackageVersion Include="Uno.Cupertino.WinUI" Version="2.8.0-dev.6" />
<PackageVersion Include="Uno.Extensions.Logging.OSLog" Version="1.3.0" />
<PackageVersion Include="Uno.Extensions.Logging.WebAssembly.Console" Version="1.4.0" />
<PackageVersion Include="Uno.Material" Version="2.7.0-dev.102" />
<PackageVersion Include="Uno.Material.WinUI" Version="2.7.0-dev.102" />
<PackageVersion Include="Uno.Material" Version="2.8.0-dev.6" />
<PackageVersion Include="Uno.Material.WinUI" Version="2.8.0-dev.6" />
<PackageVersion Include="Uno.UI" Version="4.10.0-dev.85" />
<PackageVersion Include="Uno.UI.Adapter.Microsoft.Extensions.Logging" Version="4.5.9" />
<PackageVersion Include="Uno.UI.RemoteControl" Version="4.10.0-dev.85" />
Expand Down
8 changes: 4 additions & 4 deletions src/Directory.Packages.props
Original file line number Diff line number Diff line change
Expand Up @@ -15,11 +15,11 @@
<PackageVersion Include="Uno.Core.Extensions.Collections" Version="4.0.1" />
<PackageVersion Include="Uno.Core.Extensions.Logging.Singleton" Version="4.0.1" />
<PackageVersion Include="Uno.Core.Extensions.Logging" Version="4.0.1" />
<PackageVersion Include="Uno.Cupertino" Version="2.7.0-dev.102" />
<PackageVersion Include="Uno.Cupertino.WinUI" Version="2.7.0-dev.102" />
<PackageVersion Include="Uno.Cupertino" Version="2.8.0-dev.6" />
<PackageVersion Include="Uno.Cupertino.WinUI" Version="2.8.0-dev.6" />
<PackageVersion Include="Uno.SourceGenerationTasks" Version="4.2.0" />
<PackageVersion Include="Uno.Material" Version="2.7.0-dev.102" />
<PackageVersion Include="Uno.Material.WinUI" Version="2.7.0-dev.102" />
<PackageVersion Include="Uno.Material" Version="2.8.0-dev.6" />
<PackageVersion Include="Uno.Material.WinUI" Version="2.8.0-dev.6" />
<PackageVersion Include="Uno.UI" Version="4.7.37" />
<PackageVersion Include="Uno.WinUI" Version="4.7.37" />
<PackageVersion Include="Uno.XamlMerge.Task" Version="1.1.0-dev.12" />
Expand Down
50 changes: 38 additions & 12 deletions src/library/Uno.Toolkit.Material/Styles/Controls/v2/Divider.xaml
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,39 @@
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:utu="using:Uno.Toolkit.UI">

<x:Double x:Key="MaterialDividerHeight">1</x:Double>

<Style x:Key="MaterialDividerStyle"
TargetType="utu:Divider">
<ResourceDictionary.ThemeDictionaries>
<ResourceDictionary x:Key="Default">
<StaticResource x:Key="DividerForeground" ResourceKey="OutlineVariantBrush" />
<StaticResource x:Key="DividerSubHeaderForeground" ResourceKey="OnSurfaceLowBrush" />

<Setter Property="Foreground"
Value="{ThemeResource OnSurfaceFocusedBrush}" />
<Setter Property="SubHeaderForeground"
Value="{ThemeResource OnSurfaceLowBrush}" />
<StaticResource x:Key="DividerSubHeaderFontFamily" ResourceKey="MaterialMediumFontFamily" />
<StaticResource x:Key="DividerSubHeaderFontWeight" ResourceKey="BodySmallFontWeight" />
<StaticResource x:Key="DividerSubHeaderFontSize" ResourceKey="BodySmallFontSize" />
<StaticResource x:Key="DividerSubHeaderCharacterSpacing" ResourceKey="BodySmallCharacterSpacing" />

<Thickness x:Key="DividerSubHeaderMargin">0,4,0,0</Thickness>
<x:Double x:Key="DividerHeight">1</x:Double>
</ResourceDictionary>
<ResourceDictionary x:Key="Light">
<StaticResource x:Key="DividerForeground" ResourceKey="OutlineVariantBrush" />
<StaticResource x:Key="DividerSubHeaderForeground" ResourceKey="OnSurfaceLowBrush" />

<StaticResource x:Key="DividerSubHeaderFontFamily" ResourceKey="MaterialMediumFontFamily" />
<StaticResource x:Key="DividerSubHeaderFontWeight" ResourceKey="BodySmallFontWeight" />
<StaticResource x:Key="DividerSubHeaderFontSize" ResourceKey="BodySmallFontSize" />
<StaticResource x:Key="DividerSubHeaderCharacterSpacing" ResourceKey="BodySmallCharacterSpacing" />

<Thickness x:Key="DividerSubHeaderMargin">0,4,0,0</Thickness>
<x:Double x:Key="DividerHeight">1</x:Double>
</ResourceDictionary>
</ResourceDictionary.ThemeDictionaries>


<Style x:Key="MaterialDividerStyle" TargetType="utu:Divider">

<Setter Property="Foreground" Value="{ThemeResource DividerForeground}" />
<Setter Property="SubHeaderForeground" Value="{ThemeResource DividerSubHeaderForeground}" />

<Setter Property="Template">
<Setter.Value>
Expand All @@ -21,21 +45,23 @@
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>

<Rectangle Fill="{TemplateBinding Foreground}"
Height="{StaticResource MaterialDividerHeight}" />
<Rectangle Fill="{TemplateBinding Foreground}" Height="{ThemeResource DividerHeight}" />

<TextBlock Text="{TemplateBinding SubHeader}"
Visibility="{Binding SubHeader, RelativeSource={RelativeSource Mode=TemplatedParent}, Converter={StaticResource MaterialEmptyToCollapsed}, FallbackValue=Collapsed}"
Style="{StaticResource BodySmall}"
FontFamily="{ThemeResource DividerSubHeaderFontFamily}"
FontWeight="{ThemeResource DividerSubHeaderFontWeight}"
CharacterSpacing="{ThemeResource DividerSubHeaderCharacterSpacing}"
FontSize="{ThemeResource DividerSubHeaderFontSize}"
Foreground="{TemplateBinding SubHeaderForeground}"
Margin="0,4,0,0"
Margin="{ThemeResource DividerSubHeaderMargin}"
Grid.Row="1" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

<Style x:Key="MaterialDefaultDividerStyle"
TargetType="utu:Divider"
BasedOn="{StaticResource MaterialDividerStyle}" />
Expand Down
Loading