btw toggle switch design couldn t be better change my mind

kikipoulet · Aug 10, 2024 · 4eb86af · 4eb86af
1 parent b6f9800
commit 4eb86af
Show file tree

Hide file tree

Showing 7 changed files with 73 additions and 102 deletions.
diff --git a/SukiUI/Controls/GlassMorphism/GlassCard.axaml b/SukiUI/Controls/GlassMorphism/GlassCard.axaml
@@ -3,13 +3,14 @@
                     xmlns:suki="clr-namespace:SukiUI.Controls">
     <ControlTheme x:Key="SukiGlassCardStyle" TargetType="suki:GlassCard">
         <Setter Property="BorderBrush" Value="{DynamicResource GlassBorderBrush}" />
+        <Setter Property="Background" Value="{DynamicResource SukiGlassCardBackground}" />
         <Setter Property="Padding" Value="20" />
         <Setter Property="Template">
             <ControlTemplate>
 
                 <Panel Name="RootPanel" Opacity="0">
                     <Border Name="PART_BorderCard" RenderTransformOrigin="50%,50%"
-                            Background="{DynamicResource SukiGlassCardBackground}"
+                            Background="{TemplateBinding Background}"
                             BorderBrush="{TemplateBinding BorderBrush}"
                             BorderThickness="{TemplateBinding BorderThickness}"
                             ClipToBounds="{TemplateBinding ClipToBounds}"
@@ -95,6 +96,11 @@
             <Setter Property="Background" Value="{DynamicResource SukiPrimaryColor25}" />
         </Style>
 
+        <Style Selector="^.PrimaryOpaque /template/ Border#PART_BorderCard">
+            <Setter Property="Opacity" Value="1"/>
+            <Setter Property="Background" Value="{DynamicResource SukiPrimaryColor}" />
+        </Style>
+
         <Style Selector="^[IsVisible=True] /template/ Panel#RootPanel">
             <Setter Property="Opacity" Value="1" />
         </Style>

diff --git a/SukiUI/Controls/SukiSideMenu.axaml b/SukiUI/Controls/SukiSideMenu.axaml
@@ -16,8 +16,8 @@
                     <SplitView.Pane>
                         <Border>
                             <Grid Background="Transparent">
-                                <suki:GlassCard Name="Glass"
-                                                BorderThickness="0"
+                                <suki:GlassCard Name="Glass" Classes=""
+                                                BorderThickness="0,0,1,0"
                                                 CornerRadius="0"
                                                 IsAnimated="False" />
                                 <DockPanel>
@@ -57,12 +57,12 @@
                                     <DockPanel>
                                         <StackPanel IsVisible="{TemplateBinding IsSearchEnabled}" DockPanel.Dock="Top">
                                             <StackPanel.Styles>
-                                                <Style Selector="suki|GlassCard:pointerover">
+                                                <Style Selector="suki|GlassCard.Search:pointerover">
                                                     <Setter Property="Width" Value="190"></Setter>
                                                     <Setter Property="CornerRadius" Value="12" />
                                                 </Style>
                                             </StackPanel.Styles>
-                                            <suki:GlassCard HorizontalAlignment="Right" IsAnimated="False" Width="42" Margin="15,10,15,15" CornerRadius="22" Height="42">
+                                            <suki:GlassCard Classes="Search" HorizontalAlignment="Right" IsAnimated="False" Width="42" Margin="15,10,15,15" CornerRadius="22" Height="42">
                                                 <suki:GlassCard.Transitions>
                                                     <Transitions>
                                                         <CornerRadiusTransition Property="CornerRadius" Duration="0:0:0.35"></CornerRadiusTransition>
@@ -73,7 +73,7 @@
                                                 <PathIcon Width="13" DockPanel.Dock="Left" VerticalAlignment="Center" Foreground="{DynamicResource SukiLowText}"
                                                           Height="13"
                                                           Data="{x:Static content:Icons.Search}" />
-                                                <TextBox Text="{Binding Search, Mode=TwoWay}" x:DataType="suki:SukiSideMenuService" DataContext="{x:Static suki:SukiSideMenuService.Instance}" BorderThickness="0" Watermark="Search"></TextBox>
+                                                <TextBox theme:TextBoxExtensions.AddDeleteButton="True" Classes="NoShadow" Text="{Binding Search, Mode=TwoWay}" x:DataType="suki:SukiSideMenuService" DataContext="{x:Static suki:SukiSideMenuService.Instance}" BorderThickness="0" Watermark="Search"></TextBox>
                                             </DockPanel>
                                         </suki:GlassCard>
 

diff --git a/SukiUI/Theme/CheckBoxStyles.axaml b/SukiUI/Theme/CheckBoxStyles.axaml
@@ -1,4 +1,5 @@
-<Styles xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+<Styles xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+        xmlns:suki="https://github.com/kikipoulet/SukiUI">
     <Design.PreviewWith>
         <Border Padding="20" Background="White">
             <StackPanel Spacing="20">
@@ -25,20 +26,14 @@
         <Setter Property="Template">
             <ControlTemplate>
                 <Grid ColumnDefinitions="Auto,*">
-                    <Border Name="border"
+                    <suki:GlassCard IsInteractive="True" Classes="Control" Name="border"
                             Width="20"
                             Height="20"
-                            VerticalAlignment="Center"
-                            Background="{TemplateBinding Background}"
-                            BorderBrush="{DynamicResource SukiStrongBackground}"
-                            BorderThickness="1"
+                            VerticalAlignment="Center"  
+                        Classes.PrimaryOpaque="{TemplateBinding IsChecked}"
+
                             CornerRadius="6">
-                        <Border.Transitions>
-                            <Transitions>
-                                <BrushTransition Property="Background" Duration="0:0:0.15" />
-
-                            </Transitions>
-                        </Border.Transitions>
+
                         <Panel>
                             <Path Name="checkMark"
                                   Width="9"
@@ -63,7 +58,7 @@
                                 </Border.Transitions>
                             </Border>
                         </Panel>
-                    </Border>
+                    </suki:GlassCard>
                     <ContentPresenter Name="PART_ContentPresenter"
                                       Grid.Column="1"
                                       Margin="{TemplateBinding Padding}"
@@ -82,15 +77,7 @@
     <Style Selector="CheckBox TextBlock">
         <Setter Property="Foreground" Value="{DynamicResource SukiText}" />
     </Style>
-    <Style Selector="CheckBox:pointerover /template/ Border#border">
-        <Setter Property="BorderBrush" Value="{DynamicResource SukiBorderBrush}" />
-    </Style>
-    <Style Selector="CheckBox /template/ Border#border">
-        <Setter Property="BorderBrush" Value="{DynamicResource SukiControlBorderBrush}" />
-    </Style>
-    <Style Selector="CheckBox:checked /template/ Border#border">
-        <Setter Property="Background" Value="{DynamicResource SukiPrimaryColor}" />
-    </Style>
+
     <Style Selector="CheckBox /template/ Path#checkMark">
         <Setter Property="Opacity" Value="0"></Setter>
     </Style>
@@ -108,10 +95,7 @@
         <Setter Property="Opacity" Value="1"></Setter>
     </Style>
 
-    <Style Selector="CheckBox:indeterminate /template/ Border#border">
-        <Setter Property="Background" Value="{DynamicResource SukiPrimaryColor}" />
-    </Style>
-    <Style Selector="CheckBox:disabled /template/ Border#border">
-        <Setter Property="Opacity" Value="1"></Setter>
+    <Style Selector="CheckBox:disabled /template/ suki|GlassCard#border">
+        <Setter Property="Opacity" Value="0.7"></Setter>
     </Style>
 </Styles>
diff --git a/SukiUI/Theme/ComboBoxStyles.xaml b/SukiUI/Theme/ComboBoxStyles.xaml
@@ -1,11 +1,13 @@
 <Styles xmlns="https://github.com/avaloniaui"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:glassMorphism="clr-namespace:SukiUI.Controls.GlassMorphism"
-        xmlns:theme="clr-namespace:SukiUI.Theme">
+        xmlns:theme="clr-namespace:SukiUI.Theme"
+        xmlns:suki="https://github.com/kikipoulet/SukiUI">
 
     <Design.PreviewWith>
-        <Border Padding="20">
-            <StackPanel Spacing="10">
+        <Border Background="Transparent" Padding="20">
+            <StackPanel Background="AliceBlue" Orientation="Horizontal" Spacing="10">
+                <TextBox Text="TEst"></TextBox>
                 <ComboBox Margin="0,0,50,0" PlaceholderText="Select an item">
                     <ComboBoxItem>Item 1</ComboBoxItem>
                     <ComboBoxItem>Item 2</ComboBoxItem>
@@ -22,13 +24,13 @@
     </Design.PreviewWith>
 
     <Style Selector="ComboBox">
-        <Setter Property="BorderThickness" Value="0,0,0,1" />
+        <Setter Property="BorderThickness" Value="1,1,1,1" />
         <Setter Property="BorderBrush" Value="{DynamicResource SukiControlBorderBrush}" />
-        <Setter Property="CornerRadius" Value="0" />
+        <Setter Property="CornerRadius" Value="{DynamicResource SmallCornerRadius}" />
         <Setter Property="Background" Value="{DynamicResource SukiBackground}" />
         <Setter Property="HorizontalContentAlignment" Value="Stretch" />
         <Setter Property="VerticalContentAlignment" Value="Center" />
-        <Setter Property="Padding" Value="4" />
+        <Setter Property="Padding" Value="6,6,-6,6" />
         <Setter Property="MinHeight" Value="45" />
         <Setter Property="PlaceholderForeground" Value="{DynamicResource SukiLowText}" />
         <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled" />
@@ -49,17 +51,17 @@
                                     <Setter Property="Background" Value="Transparent" />
                                 </Style>
                             </Border.Styles>
-                    <Border Name="border"
-                            Background="{TemplateBinding Background}"
+                    <suki:GlassCard Name="border"
+                            Classes="Discrete" Padding="{TemplateBinding Padding}"
                             BorderBrush="{TemplateBinding BorderBrush}"
                             BorderThickness="{TemplateBinding BorderThickness}"
-                            BoxShadow="{DynamicResource SukiLowShadow}"
+
                             CornerRadius="{TemplateBinding CornerRadius}">
-                        <Border.Transitions>
+                        <suki:GlassCard.Transitions>
                             <Transitions>
                                 <BrushTransition Property="BorderBrush" Duration="0:0:0.2" />
                             </Transitions>
-                        </Border.Transitions>
+                        </suki:GlassCard.Transitions>
                         <Grid ColumnDefinitions="*,Auto">
 
                             <Grid.Resources>
@@ -138,7 +140,7 @@
                                     </LayoutTransformControl>
                             </Popup>
                         </Grid>
-                    </Border>
+                    </suki:GlassCard>
                 </Border>
             </ControlTemplate>
         </Setter>
@@ -188,10 +190,10 @@
         </Style.Animations>
     </Style>
 
-    <Style Selector="ComboBox:pointerover /template/ Border#border">
+    <Style Selector="ComboBox:pointerover /template/ suki|GlassCard#border">
         <Setter Property="BorderBrush" Value="{DynamicResource SukiLightBorderBrush}" />
     </Style>
-    <Style Selector="ComboBox:disabled /template/ Border#border">
+    <Style Selector="ComboBox:disabled /template/ suki|GlassCard#border">
         <Setter Property="Opacity" Value="{DynamicResource ThemeDisabledOpacity}" />
     </Style>
 

diff --git a/SukiUI/Theme/NumericUpDownStyles.xaml b/SukiUI/Theme/NumericUpDownStyles.xaml
@@ -1,22 +1,28 @@
 <Styles xmlns="https://github.com/avaloniaui"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-        xmlns:theme="clr-namespace:SukiUI.Theme">
+        xmlns:theme="clr-namespace:SukiUI.Theme"
+        xmlns:suki="https://github.com/kikipoulet/SukiUI">
     <Design.PreviewWith>
         <Border Padding="20">
-            <NumericUpDown />
+            <StackPanel Orientation="Horizontal" Spacing="5" >
+            <NumericUpDown Value="4" />
+            <TextBox Text="test"></TextBox>
+            </StackPanel>
         </Border>
     </Design.PreviewWith>
     <Style Selector="NumericUpDown">
-        <Setter Property="BorderThickness" Value="0,0,0,1" />
+        <Setter Property="BorderThickness" Value="0,0,0,0" />
         <Setter Property="BorderBrush" Value="{DynamicResource SukiControlBorderBrush}" />
-        <Setter Property="CornerRadius" Value="0" />
+        <Setter Property="CornerRadius" Value="{DynamicResource SmallCornerRadius}" />
         <Setter Property="Background" Value="{DynamicResource SukiBackground}" />
         <Setter Property="VerticalContentAlignment" Value="Center" />
         <Setter Property="Padding" Value="4" />
         <Setter Property="Template">
             <ControlTemplate>
+                <suki:GlassCard VerticalAlignment="Center" CornerRadius="{TemplateBinding CornerRadius}" Padding="0">
                 <ButtonSpinner Name="PART_Spinner" 
-                               Margin="5,1" 
+                               Margin="5,4" 
+                               Height="26"
                                HorizontalContentAlignment="Stretch"
                                VerticalContentAlignment="Stretch"
                                AllowSpin="{TemplateBinding AllowSpin}"
@@ -51,6 +57,7 @@
                     </Grid>
 
                 </ButtonSpinner>
+                    </suki:GlassCard>
             </ControlTemplate>
         </Setter>
     </Style>

diff --git a/SukiUI/Theme/RadioButtonStyles.xaml b/SukiUI/Theme/RadioButtonStyles.xaml
@@ -1,6 +1,7 @@
 <Styles xmlns="https://github.com/avaloniaui"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-        xmlns:content="clr-namespace:SukiUI.Content">
+        xmlns:content="clr-namespace:SukiUI.Content"
+        xmlns:suki="https://github.com/kikipoulet/SukiUI">
     <Design.PreviewWith>
         <Border Padding="20" Background="White">
             <StackPanel Orientation="Horizontal">
@@ -203,52 +204,11 @@
         <Setter Property="Template">
             <ControlTemplate>
                 <Grid Background="{TemplateBinding Background}" ColumnDefinitions="Auto,*">
-                    <Ellipse Name="border"
-                             Width="18"
-                             Height="18"
-                             VerticalAlignment="Center"
-                             Stroke="{TemplateBinding BorderBrush}"
-                             StrokeThickness="1.5">
-                        <Ellipse.Transitions>
-                            <Transitions>
-                                <BrushTransition Property="Fill" Duration="0:0:0.4" />
-                                <DoubleTransition Property="Width" Duration="0:0:0.4" />
-                                <DoubleTransition Property="Height" Duration="0:0:0.4" />
-                            </Transitions>
-                        </Ellipse.Transitions>
-                    </Ellipse>
-                    <Ellipse Name="checkMark"
-                             Width="16"
-                             Height="16"
-                             Margin="0,0,0,0"
-                             HorizontalAlignment="Center"
-                             VerticalAlignment="Center"
-                             Stretch="Uniform"
-                             UseLayoutRounding="False">
-                        <Ellipse.Transitions>
-                            <Transitions>
-                                <BrushTransition Property="Fill" Duration="0:0:0.1" />
-                                <DoubleTransition Property="Width" Duration="0:0:0.3" />
-                                <DoubleTransition Property="Height" Duration="0:0:0.3" />
-                            </Transitions>
-                        </Ellipse.Transitions>
-                    </Ellipse>
-                    <Ellipse Name="indeterminateMark"
-                             Width="9"
-                             Height="9"
-                             HorizontalAlignment="Center"
-                             VerticalAlignment="Center"
-                             Fill="{DynamicResource ThemeAccentBrush}"
-                             Stretch="Uniform"
-                             UseLayoutRounding="False">
-                        <Ellipse.Transitions>
-                            <Transitions>
-                                <BrushTransition Property="Fill" Duration="0:0:0.4" />
-                                <DoubleTransition Property="Width" Duration="0:0:0.4" />
-                                <DoubleTransition Property="Height" Duration="0:0:0.4" />
-                            </Transitions>
-                        </Ellipse.Transitions>
-                    </Ellipse>
+                    <suki:GlassCard Width="20" Height="20" CornerRadius="50" Classes="Control"
+                                    Classes.PrimaryOpaque="{TemplateBinding IsChecked}"
+                                    />
+
+                    <Ellipse Height="8" Width="8" HorizontalAlignment="Center" VerticalAlignment="Center" IsVisible="{TemplateBinding IsChecked}"  Fill="White"/>
                     <ContentPresenter Name="PART_ContentPresenter"
                                       Grid.Column="1"
                                       Margin="10,0,0,0"

diff --git a/SukiUI/Theme/TextBoxStyles.xaml b/SukiUI/Theme/TextBoxStyles.xaml
@@ -223,9 +223,7 @@
         </Setter>
     </Style>
 
-    <Style Selector="TextBox.NoShadow /template/ Border">
-        <Setter Property="BoxShadow" Value="0 0 0 0 Gray" />
-    </Style>
+
 
     <Style Selector="TextBox.Suffix">
         <Setter Property="VerticalContentAlignment" Value="Center" />
@@ -603,5 +601,19 @@
         <Setter Property="Focusable" Value="False" />
     </Style>
 
+    <Style Selector="TextBox.NoShadow /template/ Border">
+        <Setter Property="BoxShadow" Value="0 0 0 0 Gray" />
+    </Style>
+
+    <Style Selector="TextBox.NoShadow /template/ suki|GlassCard#border">
+        <Setter Property="Background" Value="Transparent" />
+        <Setter Property="BorderThickness" Value="0" />
+    </Style>
+
+    <Style Selector="TextBox.NoShadow:focus /template/ suki|GlassCard#border">
+        <Setter Property="Background" Value="Transparent" />
+        <Setter Property="BorderThickness" Value="0" />
+    </Style>
 
+
 </Styles>