✨ add dark theme topAppBar

ZeroGachis · Nov 5, 2020 · 10eace5 · 10eace5
1 parent 4ca943e
commit 10eace5
Show file tree

Hide file tree

Showing 7 changed files with 51 additions and 47 deletions.
diff --git a/Smartway.UiComponent.Sample/MainPage.xaml b/Smartway.UiComponent.Sample/MainPage.xaml
@@ -6,9 +6,10 @@
              xmlns:sample="clr-namespace:Smartway.UiComponent.Sample;assembly=Smartway.UiComponent.Sample"
              mc:Ignorable="d"
              x:Class="Smartway.UiComponent.Sample.MainPage"
-             x:DataType="sample:MainPageViewModel">
+             x:DataType="sample:MainPageViewModel"
+             x:Name="Self">
     <StackLayout>
-        <Button x:Name="SwitchThemeBtn" Text="Switch ALL APP Theme" />
+        <Button x:Name="SwitchThemeBtn" Text="Switch ALL APP Theme" Command="{Binding Source={x:Reference Self}, Path=SwitchTheme}"/>
         <Button Text="BasicComponents" Command="{Binding BasicComponents}"/>
         <Button Text="SectionForm" Command="{Binding SectionForm}"/>
         <Button Text="Indicators" Command="{Binding Indicators}"/>

diff --git a/Smartway.UiComponent.Sample/MainPage.xaml.cs b/Smartway.UiComponent.Sample/MainPage.xaml.cs
@@ -1,5 +1,6 @@
 using System;
 using System.ComponentModel;
+using System.Windows.Input;
 using Xamarin.Forms;
 
 namespace Smartway.UiComponent.Sample
@@ -12,13 +13,12 @@ public partial class MainPage
         public MainPage()
         {
             InitializeComponent();
-            SwitchThemeBtn.Clicked += SwitchTheme;
         }
 
-        private void SwitchTheme(object sender, EventArgs e)
+        public ICommand SwitchTheme => new Command( () =>
         {
             var currentTheme = Application.Current.RequestedTheme;
             Application.Current.UserAppTheme = currentTheme == OSAppTheme.Light ? OSAppTheme.Dark : OSAppTheme.Light;
-        }
+        });
     }
 }
diff --git a/Smartway.UiComponent/Resources/Images/white_icon_close.png b/Smartway.UiComponent/Resources/Images/white_icon_close.png
diff --git a/Smartway.UiComponent/Resources/Themes.xaml b/Smartway.UiComponent/Resources/Themes.xaml
@@ -1,26 +1,25 @@
 <ResourceDictionary xmlns="http://xamarin.com/schemas/2014/forms"
                     xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                     x:Class="Smartway.UiComponent.Resources.Themes">
-    <!-- Colors -->
-    <Color x:Key="ZgDarkBlue">#010142</Color>
-    <Color x:Key="ZgNightBlue">#27304A</Color>
-    <Color x:Key="ZgDarkBackground">#010627</Color>
-    <Color x:Key="ZgSecondaryDarkBackground">#141937</Color>
-    <Color x:Key="ZgLoaderColor">Gray</Color>
-    <Color x:Key="ZgGrey">#8B8B8B</Color>
-    <Color x:Key="ZgWarning">#FF6C3B</Color>
-    <Color x:Key="ZgColdGrey2">#E2E4F0</Color>
-    <Color x:Key="ZgHighGrey">#A2A2BA</Color>
-    <Color x:Key="ZgMediumGrey">#B2B2B2</Color>
-    <Color x:Key="ZgLightGrey">#E2E4F0</Color>
+    <!-- Light theme colors -->
+    <Color x:Key="LightPrimaryBackgroundColor">White</Color>
+    <Color x:Key="LightSecondaryBackgroundColor">White</Color>
+    <Color x:Key="LightPrimaryTextColor">Black</Color>
+    <Color x:Key="LightSecondaryTextColor">#B2B2B2</Color>
+
+    <!-- Dark theme colors -->
+    <Color x:Key="DarkPrimaryBackgroundColor">#010627</Color>
+    <Color x:Key="DarkSecondaryBackgroundColor">#141937</Color>
+    <Color x:Key="DarkPrimaryTextColor">White</Color>
+    <Color x:Key="DarkSecondaryTextColor">#A2A2BA</Color>
 
     <!-- Label Styles -->
     <Style TargetType="Label">
         <Setter Property="FontFamily" Value="OpenSans" />
         <Setter Property="TextColor" 
                 Value="{AppThemeBinding 
-                        Light=Black, 
-                        Dark=White
+                        Light={StaticResource LightPrimaryTextColor}, 
+                        Dark={StaticResource DarkPrimaryTextColor}
                     }"  />
         <Style.Triggers>
             <Trigger TargetType="Label" Property="FontAttributes" Value="Bold">
@@ -32,8 +31,8 @@
     <Style TargetType="Label" x:Key="SecondaryTextStyle">
         <Setter Property="TextColor" 
                 Value="{AppThemeBinding 
-                        Light={StaticResource ZgMediumGrey}, 
-                        Dark={StaticResource ZgHighGrey}
+                        Light={StaticResource LightSecondaryTextColor}, 
+                        Dark={StaticResource DarkSecondaryTextColor}
                     }"  />
         <Setter Property="FontSize" Value="14"/>
     </Style>
@@ -42,17 +41,17 @@
     <Style TargetType="StackLayout">
         <Setter Property="BackgroundColor"
                 Value="{AppThemeBinding 
-                        Light=White, 
-                        Dark={StaticResource ZgDarkBlue}
+                        Light={StaticResource LightPrimaryBackgroundColor}, 
+                        Dark={StaticResource DarkPrimaryBackgroundColor}
                     }" />
     </Style>
 
     <!-- Frame Style -->
     <Style TargetType="Frame" x:Key="SecondaryFrame">
         <Setter Property="BackgroundColor"
-            Value="{AppThemeBinding 
-                    Light=White,
-                    Dark={StaticResource ZgSecondaryDarkBackground}
-                }" />
+                Value="{AppThemeBinding 
+                        Light={StaticResource LightSecondaryBackgroundColor},
+                        Dark={StaticResource DarkSecondaryBackgroundColor}
+                    }" />
     </Style>
 </ResourceDictionary>
diff --git a/Smartway.UiComponent/Smartway.UiComponent.csproj b/Smartway.UiComponent/Smartway.UiComponent.csproj
@@ -17,6 +17,7 @@
     <None Remove="Resources\Images\img_product_placeholder.png" />
     <None Remove="Resources\Images\img_product_placeholder_multilocation.png" />
     <None Remove="Resources\Images\logo_easyturn.png" />
+    <None Remove="Resources\Images\white_icon_close.png" />
   </ItemGroup>
 
   <ItemGroup>
@@ -29,6 +30,7 @@
     <EmbeddedResource Include="Resources\Images\img_product_placeholder.png" />
     <EmbeddedResource Include="Resources\Images\img_product_placeholder_multilocation.png" />
     <EmbeddedResource Include="Resources\Images\logo_easyturn.png" />
+    <EmbeddedResource Include="Resources\Images\white_icon_close.png" />
   </ItemGroup>
 
   <ItemGroup>

diff --git a/Smartway.UiComponent/TopAppBar/TopAppBar.xaml b/Smartway.UiComponent/TopAppBar/TopAppBar.xaml
@@ -13,43 +13,52 @@
                 <Setter Property="HorizontalOptions" Value="Start"></Setter>
                 <Setter Property="WidthRequest" Value="24"></Setter>
                 <Setter Property="BackgroundColor" Value="Transparent"></Setter>
+                <Setter Property="Source" 
+                        Value="">
+                </Setter>
             </Style>
             <Style x:Key="LabelTitle" TargetType="Label">
                 <Setter Property="FontSize" Value="20"></Setter>
                 <Setter Property="HorizontalTextAlignment" Value="Start"></Setter>
                 <Setter Property="HorizontalOptions" Value="Start"></Setter>
                 <Setter Property="VerticalTextAlignment" Value="Center"></Setter>
                 <Setter Property="FontAttributes" Value="Bold"></Setter>
-                <Setter Property="TextColor" Value="#010142"></Setter>
                 <Setter Property="WidthRequest" Value="200"></Setter>
             </Style>
             <Style x:Key="ExtraLabel" TargetType="Label">
                 <Setter Property="FontSize" Value="16"></Setter>
-                <Setter Property="TextColor" Value="#010142"></Setter>
                 <Setter Property="VerticalTextAlignment" Value="Center"></Setter>
                 <Setter Property="HorizontalOptions" Value="EndAndExpand"></Setter>
             </Style>
         </ResourceDictionary>
     </ContentView.Resources>
     <ContentView.Content>
         <StackLayout Orientation="Horizontal">
-                <ImageButton Style="{StaticResource ImageButton}" 
-                             Command="{Binding Source={x:Reference Self}, Path=Command}">
+                <ImageButton x:Name="ImageButton" Style="{StaticResource ImageButton}" 
+                             Command="{Binding Source={x:Reference Self}, Path=Command}"
+                             Source="{Binding Source={x:Reference Self}, Path=ImageContent}">
                     <ImageButton.Triggers>
                         <DataTrigger TargetType="ImageButton" 
-                                 Binding="{Binding Source={x:Reference Self}, Path=Type}" Value="Default">
-                        <Setter Property="Source" Value="{utils:ImageResource Source=Smartway.UiComponent.Resources.Images.icon_arrow_back.png }"/>
+                                     Binding="{Binding Source={x:Reference Self}, Path=Type}" Value="Default">
+                            <Setter Property="Source" Value="{utils:ImageResource Source=Smartway.UiComponent.Resources.Images.icon_arrow_back.png }"/>
                         </DataTrigger>
                         <DataTrigger TargetType="ImageButton" 
-                                 Binding="{Binding Source={x:Reference Self}, Path=Type}" Value="Modal">
+                                     Binding="{Binding Source={x:Reference Self}, Path=Type}" Value="Modal">
                             <Setter Property="Source" Value="{utils:ImageResource Source=Smartway.UiComponent.Resources.Images.icon_close.png}"/>
                         </DataTrigger>
                         <DataTrigger TargetType="ImageButton" 
-                                 Binding="{Binding Source={x:Reference Self}, Path=Type}" Value="Custom">
+                                     Binding="{Binding Source={x:Reference Self}, Path=Type}" Value="Custom">
                             <Setter Property="Source" Value="{Binding Source={x:Reference Self}, Path=IconSource}"/>
                         </DataTrigger>
-                    </ImageButton.Triggers>
-                </ImageButton>
+                        <MultiTrigger TargetType="ImageButton">
+                            <MultiTrigger.Conditions>
+                                <BindingCondition Binding="{Binding Source={x:Reference Self}, Path=Type}" Value="Modal" />
+                                <BindingCondition Binding="{Binding Source={x:Reference Self}, Path=IsDarkTheme}" Value="true" />
+                            </MultiTrigger.Conditions>
+                            <Setter Property="Source" Value="{utils:ImageResource Source=Smartway.UiComponent.Resources.Images.white_icon_close.png}"/>
+                        </MultiTrigger>
+                </ImageButton.Triggers>
+            </ImageButton>
                 <Label Style="{StaticResource LabelTitle}"
                        Text="{Binding Source={x:Reference Self}, Path=Title}" 
                        LineBreakMode="TailTruncation"/>

diff --git a/Smartway.UiComponent/TopAppBar/TopAppBar.xaml.cs b/Smartway.UiComponent/TopAppBar/TopAppBar.xaml.cs
@@ -1,19 +1,11 @@
-using System;
-using System.Collections.Generic;
-using System.Linq;
-using System.Reflection;
-using System.Text;
-using System.Threading.Tasks;
-using System.Windows.Input;
-using System.Xml;
-using Smartway.UiComponent.Utils;
+using System.Windows.Input;
 using Xamarin.Forms;
 using Xamarin.Forms.Xaml;
 
 namespace Smartway.UiComponent.TopAppBar
 {
     [XamlCompilation(XamlCompilationOptions.Compile)]
-    public partial class TopAppBar : ContentView
+    public partial class TopAppBar
     {
         public static readonly BindableProperty TitleProperty = BindableProperty.Create(nameof(Title), typeof(string), typeof(TopAppBar));
         public static readonly BindableProperty CommandProperty = BindableProperty.Create(nameof(Command), typeof(ICommand), typeof(TopAppBar));
@@ -52,6 +44,7 @@ public string IconSource
             get => (string) GetValue(IconSourceProperty);
             set => SetValue(IconSourceProperty, value);
         }
+        public bool IsDarkTheme => Application.Current.RequestedTheme == OSAppTheme.Dark;
 
         public TopAppBar()
         {