Skip to content

Commit

Permalink
Merge pull request #351 from dme-compunet/buttons
Browse files Browse the repository at this point in the history 
UI Button
  • Loading branch information
@sirdoombox
sirdoombox authored Dec 11, 2024
2 parents e8dcd17 + 6a50a42 commit 9da3472
Show file tree
Hide file tree
Showing 2 changed files with 106 additions and 0 deletions.
58 changes: 58 additions & 0 deletions SukiUI.Demo/Features/ControlsLibrary/ButtonsView.axaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:suki="https://github.com/kikipoulet/SukiUI"
xmlns:content="using:SukiUI.Content"
xmlns:controlsLibrary="clr-namespace:SukiUI.Demo.Features.ControlsLibrary"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
Expand All @@ -17,6 +18,14 @@
<Setter Property="Command" Value="{Binding ButtonClickedCommand}" />
<Setter Property="IsEnabled" Value="{Binding IsEnabled}" />
</Style>
<Style Selector="Button.Icon">
<Setter Property="Content">
<Template>
<PathIcon Data="{x:Static content:Icons.Star}"
Foreground="{Binding Foreground, RelativeSource={RelativeSource FindAncestor, AncestorType=Button}}"/>
</Template>
</Setter>
</Style>
</UserControl.Styles>
<Grid RowDefinitions="Auto,*">
<suki:GlassCard Classes="HeaderCard">
Expand Down Expand Up @@ -128,6 +137,55 @@
</showMeTheXaml:XamlDisplay>
</suki:GroupBox>
</suki:GlassCard>
<suki:GlassCard>
<suki:GroupBox Header="Standard Icon Button">
<showMeTheXaml:XamlDisplay UniqueId="Button13">
<Button Classes="Icon"/>
</showMeTheXaml:XamlDisplay>
</suki:GroupBox>
</suki:GlassCard>
<suki:GlassCard>
<suki:GroupBox Header="Basic Icon Button">
<showMeTheXaml:XamlDisplay UniqueId="Button14">
<Button Classes="Basic Icon" />
</showMeTheXaml:XamlDisplay>
</suki:GroupBox>
</suki:GlassCard>
<suki:GlassCard>
<suki:GroupBox Header="Flat Icon Button">
<showMeTheXaml:XamlDisplay UniqueId="Button15">
<Button Classes="Flat Icon" />
</showMeTheXaml:XamlDisplay>
</suki:GroupBox>
</suki:GlassCard>
<suki:GlassCard>
<suki:GroupBox Header="Outlined Icon Button">
<showMeTheXaml:XamlDisplay UniqueId="Button16">
<Button Classes="Outlined Icon" />
</showMeTheXaml:XamlDisplay>
</suki:GroupBox>
</suki:GlassCard>
<suki:GlassCard>
<suki:GroupBox Header="Basic Accent Icon Button">
<showMeTheXaml:XamlDisplay UniqueId="Button17">
<Button Classes="Basic Accent Icon" />
</showMeTheXaml:XamlDisplay>
</suki:GroupBox>
</suki:GlassCard>
<suki:GlassCard>
<suki:GroupBox Header="Flat Accent Icon Button">
<showMeTheXaml:XamlDisplay UniqueId="Button18">
<Button Classes="Flat Accent Icon" />
</showMeTheXaml:XamlDisplay>
</suki:GroupBox>
</suki:GlassCard>
<suki:GlassCard>
<suki:GroupBox Header="Outlined Accent Icon Button">
<showMeTheXaml:XamlDisplay UniqueId="Button19">
<Button Classes="Outlined Accent Icon" />
</showMeTheXaml:XamlDisplay>
</suki:GroupBox>
</suki:GlassCard>
</WrapPanel>
</ScrollViewer>
</Grid>
Expand Down
48 changes: 48 additions & 0 deletions SukiUI/Theme/Button.axaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -98,6 +98,7 @@

<!-- Events For Basic Button -->
<Style Selector="^:pointerover">
<Setter Property="Foreground" Value="{DynamicResource SukiPrimaryColor}"/>
<Style Selector="^ /template/ TextBlock">
<Setter Property="Foreground" Value="{DynamicResource SukiPrimaryColor}" />
</Style>
Expand All @@ -110,6 +111,7 @@
</Style>
</Style>
<Style Selector="^:pressed">
<Setter Property="Foreground" Value="{DynamicResource SukiPrimaryColor}" />
<Style Selector="^ /template/ TextBlock">
<Setter Property="Foreground" Value="{DynamicResource SukiPrimaryColor}" />
</Style>
Expand All @@ -121,6 +123,15 @@
<ScaleTransform ScaleX="0.97" ScaleY="0.97" />
</Setter.Value>
</Setter>
</Style>
<Style Selector="^.Icon /template/ Border">
<!-- <Setter Property="Background" Value="{DynamicResource SukiCardBackground}" /> -->
<Setter Property="BorderBrush" Value="{DynamicResource SukiPrimaryColor}" />
<Setter Property="RenderTransform">
<Setter.Value>
<ScaleTransform ScaleX="0.95" ScaleY="0.95" />
</Setter.Value>
</Setter>
</Style>
<Style Selector="^ /template/ ContentPresenter">
<Setter Property="Foreground" Value="{DynamicResource SukiPrimaryColor}" />
Expand All @@ -131,6 +142,7 @@
<!-- Classes -->
<Style Selector="^.NoPressedAnimation">
<Style Selector="^:pressed">
<Setter Property="Foreground" Value="{DynamicResource SukiPrimaryColor}" />
<Style Selector="^ /template/ TextBlock">
<Setter Property="Foreground" Value="{DynamicResource SukiPrimaryColor}" />
</Style>
Expand All @@ -151,6 +163,7 @@

<!-- Classes -->
<Style Selector="^.Accent">
<Setter Property="Foreground" Value="{DynamicResource SukiAccentColor75}"/>
<Style Selector="^:pointerover">
<Style Selector="^ /template/ TextBlock">
<Setter Property="Foreground" Value="{DynamicResource SukiAccentColor75}" />
Expand All @@ -164,6 +177,7 @@
</Style>
</Style>
<Style Selector="^:pressed">
<Setter Property="Foreground" Value="{DynamicResource SukiAccentColor}" />
<Style Selector="^ /template/ TextBlock">
<Setter Property="Foreground" Value="{DynamicResource SukiAccentColor}" />
</Style>
Expand All @@ -176,6 +190,15 @@
</Setter.Value>
</Setter>
</Style>
<Style Selector="^.Icon /template/ Border">
<Setter Property="Background" Value="{DynamicResource SukiCardBackground}" />
<Setter Property="BorderBrush" Value="{DynamicResource SukiAccentColor}" />
<Setter Property="RenderTransform">
<Setter.Value>
<ScaleTransform ScaleX="0.95" ScaleY="0.95" />
</Setter.Value>
</Setter>
</Style>
<Style Selector="^ /template/ ContentPresenter">
<Setter Property="Foreground" Value="{DynamicResource SukiAccentColor}" />
</Style>
Expand All @@ -188,6 +211,7 @@
<Setter Property="Padding" Value="11,8" />
<Setter Property="CornerRadius" Value="5" />
<Setter Property="Background" Value="Transparent" />
<Setter Property="Foreground" Value="{DynamicResource SukiPrimaryColor}" />
<!-- Nested Selectors -->
<Style Selector="^ /template/ TextBlock">
<Setter Property="Foreground" Value="{DynamicResource SukiPrimaryColor}" />
Expand All @@ -212,12 +236,23 @@
</Setter>
</Style>
</Style>
<Style Selector="^.Icon:pointerover">
<Setter Property="Background" Value="Transparent" />
<Style Selector="^ /template/ Border">
<Setter Property="RenderTransform">
<Setter.Value>
<ScaleTransform ScaleX="1.07" ScaleY="1.07" />
</Setter.Value>
</Setter>
</Style>
</Style>
<Style Selector="^:pressed /template/ Border">
<Setter Property="Background" Value="Transparent" />
</Style>

<!-- Color Variants -->
<Style Selector="^.Accent">
<Setter Property="Foreground" Value="{DynamicResource SukiAccentColor}" />
<Style Selector="^ /template/ TextBlock">
<Setter Property="Foreground" Value="{DynamicResource SukiAccentColor}" />
</Style>
Expand Down Expand Up @@ -256,6 +291,7 @@
<Setter Property="Padding" Value="20,8,20,8" />
<Setter Property="BorderThickness" Value="0" />
<Setter Property="Background" Value="{DynamicResource SukiPrimaryColor}" />
<Setter Property="Foreground" Value="White" />
<Setter Property="Transitions">
<Transitions>
<BrushTransition Property="Background" Duration="0:0:0.2" />
Expand Down Expand Up @@ -300,6 +336,7 @@
<Setter Property="BorderThickness" Value="1" />
<Setter Property="BorderBrush" Value="{DynamicResource SukiPrimaryColor}" />
<Setter Property="Background" Value="Transparent" />
<Setter Property="Foreground" Value="{DynamicResource SukiPrimaryColor}" />
<Setter Property="Transitions">
<Transitions>
<BrushTransition Property="Background" Duration="0:0:0.3" />
Expand Down Expand Up @@ -331,6 +368,7 @@
<Style Selector="^:pointerover">
<Setter Property="BorderBrush" Value="Transparent" />
<Setter Property="Background" Value="{DynamicResource SukiPrimaryColor}" />
<Setter Property="Foreground" Value="White" />
<Style Selector="^ /template/ ContentPresenter">
<Setter Property="Foreground" Value="White" />
</Style>
Expand All @@ -345,6 +383,7 @@

<!-- Color Variants -->
<Style Selector="^.Accent">
<Setter Property="Foreground" Value="{DynamicResource SukiAccentColor}" />
<Setter Property="BorderBrush" Value="{DynamicResource SukiAccentColor}" />
<Style Selector="^ /template/ TextBlock">
<Setter Property="Foreground" Value="{DynamicResource SukiAccentColor}" />
Expand All @@ -356,6 +395,7 @@
<Setter Property="Foreground" Value="{DynamicResource SukiAccentColor}" />
</Style>
<Style Selector="^:pointerover">
<Setter Property="Foreground" Value="White" />
<Setter Property="Background" Value="{DynamicResource SukiAccentColor}" />
<Style Selector="^ /template/ ContentPresenter">
<Setter Property="Foreground" Value="White" />
Expand All @@ -374,6 +414,7 @@
<Style Selector="^.Success">
<Setter Property="Background" Value="#cdf2ca" />
<Setter Property="BorderBrush" Value="#b2e1ae" />
<Setter Property="Foreground" Value="#13831c" />
<Style Selector="^ /template/ TextBlock">
<Setter Property="Foreground" Value="#13831c" />
</Style>
Expand All @@ -388,6 +429,7 @@
<Style Selector="^.Danger">
<Setter Property="Background" Value="#f2caca" />
<Setter Property="BorderBrush" Value="#e4b5b5" />
<Setter Property="Foreground" Value="#831313" />
<Style Selector="^ /template/ TextBlock">
<Setter Property="Foreground" Value="#831313" />
</Style>
Expand Down Expand Up @@ -457,6 +499,12 @@
<Setter Property="Padding" Value="30,12" />
<Setter Property="CornerRadius" Value="9" />
</Style>
<Style Selector="^.Icon">
<Setter Property="CornerRadius" Value="100"/>
<Setter Property="Width" Value="40"/>
<Setter Property="Height" Value="40"/>
<Setter Property="Padding" Value="0"/>
</Style>
</ControlTheme>
<ControlTheme x:Key="{x:Type Button}"
BasedOn="{StaticResource SukiButtonStyle}"
Expand Down

0 comments on commit 9da3472

Please sign in to comment.