Merge pull request #562 from irihitech/iconbutton

using IconButton in ThemeSelector Template & fix Loading Direction
irihitech · Feb 7, 2025 · ada5385 · ada5385
2 parents b97a7d2 + 5db3e85
commit ada5385
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 41 deletions.
diff --git a/demo/Ursa.Demo/Views/TitleBarRightContent.axaml b/demo/Ursa.Demo/Views/TitleBarRightContent.axaml
@@ -6,17 +6,11 @@
              mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
              x:Class="Ursa.Demo.Views.TitleBarRightContent">
     <StackPanel Orientation="Horizontal">
-        <Button
-            Padding="8"
-            Width="32"
-            Height="32"
-            Theme="{DynamicResource BorderlessButton}"
-            Click="OpenRepository">
-            <PathIcon
-                Theme="{StaticResource InnerPathIcon}"
-                Data="{StaticResource SemiIconGithubLogo}"
-                Foreground="{DynamicResource SemiColorText1}" />
-        </Button>
+        <u:IconButton
+            Theme="{StaticResource BorderlessIconButton}"
+            Classes="Tertiary"
+            Icon="{StaticResource SemiIconGithubLogo}"
+            Click="OpenRepository" />
         <u:ThemeToggleButton
             IsThreeState="True"
             Mode="Controller" />

diff --git a/src/Ursa.Themes.Semi/Controls/Loading.axaml b/src/Ursa.Themes.Semi/Controls/Loading.axaml
@@ -2,9 +2,14 @@
     xmlns="https://github.com/avaloniaui"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:converters="clr-namespace:Ursa.Themes.Semi.Converters"
-    xmlns:u="clr-namespace:Ursa.Controls;assembly=Ursa"
-    xmlns:iri="https://irihi.tech/shared">
+    xmlns:iri="https://irihi.tech/shared"
+    xmlns:u="clr-namespace:Ursa.Controls;assembly=Ursa">
     <!--  Add Resources Here  -->
+    <Design.PreviewWith>
+        <StackPanel Margin="20">
+            <u:LoadingIcon Classes="Large"/>
+        </StackPanel>
+    </Design.PreviewWith>
     <converters:BrushToColorConverter x:Key="BrushToColorConverter" />
     <ControlTheme x:Key="{x:Type u:LoadingIcon}" TargetType="u:LoadingIcon">
         <Setter Property="IsLoading" Value="True" />
@@ -14,19 +19,19 @@
                 <Arc
                     Name="PART_Arc"
                     Width="20"
-                    IsVisible="{TemplateBinding IsVisible}"
                     Height="20"
+                    IsVisible="{TemplateBinding IsVisible}"
                     StartAngle="0"
                     StrokeJoin="Round"
                     StrokeLineCap="Round"
                     StrokeThickness="3"
                     SweepAngle="300">
                     <Arc.Stroke>
-                        <ConicGradientBrush Angle="70">
+                        <ConicGradientBrush Angle="50">
                             <GradientStops>
-                                <GradientStop Offset="0" Color="{Binding Foreground, Converter={StaticResource BrushToColorConverter}, RelativeSource={RelativeSource TemplatedParent}}" />
-                                <GradientStop Offset="0.2" Color="{Binding Foreground, Converter={StaticResource BrushToColorConverter}, RelativeSource={RelativeSource TemplatedParent}}" />
-                                <GradientStop Offset="0.6" Color="Transparent" />
+                                <GradientStop Offset="0.4" Color="Transparent" />
+                                <GradientStop Offset="0.8" Color="{Binding Foreground, Converter={StaticResource BrushToColorConverter}, RelativeSource={RelativeSource TemplatedParent}}" />
+                                <GradientStop Offset="1.0" Color="{Binding Foreground, Converter={StaticResource BrushToColorConverter}, RelativeSource={RelativeSource TemplatedParent}}" />
                             </GradientStops>
                         </ConicGradientBrush>
                     </Arc.Stroke>
@@ -45,12 +50,12 @@
         </Style>
         <Style Selector="^[IsLoading=True] /template/ Arc#PART_Arc">
             <Style.Animations>
-                <Animation IterationCount="Infinite" Duration="0:0:0.5">
+                <Animation IterationCount="Infinite" Duration="0:0:0.6">
                     <KeyFrame Cue="0%">
                         <Setter Property="RotateTransform.Angle" Value="0.0" />
                     </KeyFrame>
                     <KeyFrame Cue="100%">
-                        <Setter Property="RotateTransform.Angle" Value="-360.0" />
+                        <Setter Property="RotateTransform.Angle" Value="360.0" />
                     </KeyFrame>
                 </Animation>
             </Style.Animations>
@@ -70,8 +75,8 @@
                     <iri:PureRectangle
                         HorizontalAlignment="Stretch"
                         VerticalAlignment="Stretch"
-                        IsHitTestVisible="True"
-                        Background="{TemplateBinding Background}" />
+                        Background="{TemplateBinding Background}"
+                        IsHitTestVisible="True" />
                     <Grid
                         HorizontalAlignment="Center"
                         VerticalAlignment="Center"
@@ -92,7 +97,7 @@
 
     <ControlTheme x:Key="{x:Type u:LoadingContainer}" TargetType="u:LoadingContainer">
         <Setter Property="HorizontalContentAlignment" Value="Center" />
-        <Setter Property="MessageForeground" Value="{DynamicResource TextBlockDefaultForeground}"/>
+        <Setter Property="MessageForeground" Value="{DynamicResource TextBlockDefaultForeground}" />
         <Setter Property="Background" Value="{DynamicResource LoadingMaskBackground}" />
         <Setter Property="VerticalContentAlignment" Value="Center" />
         <Setter Property="Indicator">
@@ -111,9 +116,9 @@
                         ContentTemplate="{TemplateBinding ContentTemplate}" />
                     <u:Loading
                         Background="{TemplateBinding Background}"
-                        Foreground="{TemplateBinding MessageForeground}"
                         Content="{TemplateBinding LoadingMessage}"
                         ContentTemplate="{TemplateBinding LoadingMessageTemplate}"
+                        Foreground="{TemplateBinding MessageForeground}"
                         Indicator="{TemplateBinding Indicator}"
                         IsLoading="{TemplateBinding IsLoading}" />
                 </Panel>

diff --git a/src/Ursa.Themes.Semi/Controls/ThemeSelector.axaml b/src/Ursa.Themes.Semi/Controls/ThemeSelector.axaml
@@ -2,32 +2,27 @@
                     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                     xmlns:u="https://irihi.tech/ursa">
     <ControlTheme TargetType="u:ThemeToggleButton" x:Key="{x:Type u:ThemeToggleButton}">
-        <Setter Property="Padding" Value="8" />
-        <Setter Property="Width" Value="32" />
-        <Setter Property="Height" Value="32" />
         <Setter Property="Template">
             <ControlTemplate TargetType="u:ThemeToggleButton">
-                <Button
+                <u:IconButton
                     Name="{x:Static u:ThemeToggleButton.PART_ThemeButton}"
-                    Theme="{DynamicResource BorderlessButton}"
-                    Padding="{TemplateBinding Padding}">
-                    <PathIcon
-                        Name="PART_Icon"
-                        Theme="{StaticResource InnerPathIcon}"
-                        Foreground="{DynamicResource ButtonDefaultTertiaryForeground}" />
-                </Button>
+                    Theme="{StaticResource BorderlessIconButton}"
+                    Classes="Tertiary"
+                    Padding="{TemplateBinding Padding}"
+                    Width="{TemplateBinding Width}"
+                    Height="{TemplateBinding Height}" />
             </ControlTemplate>
         </Setter>
-        <Style Selector="^:dark /template/ PathIcon#PART_Icon">
-            <Setter Property="Data" Value="{DynamicResource ThemeSelectorButtonDarkGlyph}" />
+        <Style Selector="^:dark /template/ u|IconButton#PART_ThemeButton">
+            <Setter Property="Icon" Value="{StaticResource ThemeSelectorButtonDarkGlyph}" />
             <Setter Property="ToolTip.Tip" Value="{DynamicResource STRING_THEME_TOGGLE_DARK}" />
         </Style>
-        <Style Selector="^:light /template/ PathIcon#PART_Icon">
-            <Setter Property="Data" Value="{DynamicResource ThemeSelectorButtonLightGlyph}" />
+        <Style Selector="^:light /template/ u|IconButton#PART_ThemeButton">
+            <Setter Property="Icon" Value="{StaticResource ThemeSelectorButtonLightGlyph}" />
             <Setter Property="ToolTip.Tip" Value="{DynamicResource STRING_THEME_TOGGLE_LIGHT}" />
         </Style>
-        <Style Selector="^ /template/ PathIcon#PART_Icon">
-            <Setter Property="Data" Value="{DynamicResource ThemeSelectorButtonDefaultGlyph}" />
+        <Style Selector="^ /template/ u|IconButton#PART_ThemeButton">
+            <Setter Property="Icon" Value="{StaticResource ThemeSelectorButtonDefaultGlyph}" />
             <Setter Property="ToolTip.Tip" Value="{DynamicResource STRING_THEME_TOGGLE_SYSTEM}" />
         </Style>
     </ControlTheme>