Show badge counter if count is above 99 (#257)

* Badge now shows count if its above 99 * Pixel pushing * iOS pixel pushing Co-authored-by: Erling Moxnes Kristiansen <emk@dips.no>
DIPSAS · Feb 1, 2021 · f63f5b8 · f63f5b8
1 parent 4b58d6a
commit f63f5b8
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 17 deletions.
diff --git a/src/DIPS.Xamarin.UI/Controls/FloatingActionMenu/MenuButton.xaml b/src/DIPS.Xamarin.UI/Controls/FloatingActionMenu/MenuButton.xaml
@@ -83,9 +83,6 @@
                Grid.Column="1"
                IsVisible="{Binding Source={x:Reference CodeBehind}, Path= IsBadgeVisible}"
                BackgroundColor="{Binding Source={x:Reference CodeBehind}, Path= BadgeColor}"
-               HeightRequest="20"
-               WidthRequest="20"
-               CornerRadius="10"
                InputTransparent="True"
                Padding="0"
                VerticalOptions="Start"
@@ -97,9 +94,9 @@
                    FontFamily="{Binding Source={x:Reference CodeBehind}, Path= BadgeFontFamily}"
                    FontSize="12"
                    LineBreakMode="NoWrap"
-                   BackgroundColor="Transparent"
-                   VerticalTextAlignment="Center"
-                   HorizontalTextAlignment="Center" />
+                   BackgroundColor="Transparent" 
+                   VerticalOptions="Center"
+                   HorizontalOptions="Center"/>
 
         </Frame>
     </Grid>

diff --git a/src/DIPS.Xamarin.UI/Controls/FloatingActionMenu/MenuButton.xaml.cs b/src/DIPS.Xamarin.UI/Controls/FloatingActionMenu/MenuButton.xaml.cs
@@ -395,16 +395,28 @@ private static object CoerceValue(BindableObject bindable, object value)
                 {
                     if (newCount > 99)
                     {
-                        menuButton.BadgeFrame.HeightRequest = 25;
-                        menuButton.BadgeFrame.WidthRequest = 25;
-                        menuButton.BadgeFrame.CornerRadius = 12.5f;
-                        return "99+";
+                        menuButton.BadgeFrame.HeightRequest = 20;
+                        menuButton.BadgeFrame.WidthRequest = -1;
+                        menuButton.BadgeFrame.Padding = new Thickness(5, 0);
+                        menuButton.BadgeFrame.CornerRadius = 8;
+                        return value;
                     }
                 }
 
-                menuButton.BadgeFrame.HeightRequest = 20;
-                menuButton.BadgeFrame.WidthRequest = 20;
-                menuButton.BadgeFrame.CornerRadius = 10;
+                if (Device.RuntimePlatform == Device.Android)
+                {
+                    menuButton.BadgeFrame.HeightRequest = 20;
+                    menuButton.BadgeFrame.WidthRequest = 20;
+                    menuButton.BadgeFrame.CornerRadius = 10;
+                    menuButton.BadgeFrame.Padding = new Thickness(1);
+                }
+                else
+                {
+                    menuButton.BadgeFrame.HeightRequest = 22;
+                    menuButton.BadgeFrame.WidthRequest = 22;
+                    menuButton.BadgeFrame.CornerRadius = 11;
+                    menuButton.BadgeFrame.Padding = new Thickness(0);
+                }
             }
 
             return value;

diff --git a/src/Samples/DIPS.Xamarin.UI.Samples/Controls/FloatingActionMenu/FloatingActionMenuPage.xaml b/src/Samples/DIPS.Xamarin.UI.Samples/Controls/FloatingActionMenu/FloatingActionMenuPage.xaml
@@ -71,6 +71,7 @@
                                  IsBadgeVisible="{Binding ShowBadge}"
                                  BadgeColor="{Binding BadgeColor}"
                                  BadgeCount="{Binding BadgeCounter}"
+                                 BadgeTextColor="White"
                                  IsVisible="{Binding IsMenuButtonVisible}"
                                  Source="https://www.pngitem.com/pimgs/m/549-5493065_xamarin-logo-png-transparent-xamarin-forms-logo-png.png"
                                  Title="Second page"

diff --git a/...amples/DIPS.Xamarin.UI.Samples/Controls/FloatingActionMenu/FloatingActionMenuPage.xaml.cs b/...amples/DIPS.Xamarin.UI.Samples/Controls/FloatingActionMenu/FloatingActionMenuPage.xaml.cs
@@ -52,8 +52,8 @@ public class FloatingActionMenuPageViewmodel : INotifyPropertyChanged
     {
         private string m_text;
         private bool m_showBadge;
-        private int m_badgeCounter;
-        private Color m_badgeColor;
+        private int m_badgeCounter = 99;
+        private Color m_badgeColor = Color.Green;
         private string m_currentEvent;
         private bool m_isMenuButtonVisible = true;
 
@@ -65,8 +65,8 @@ public FloatingActionMenuPageViewmodel()
             DecreaseCounterCommand = new Command(() => BadgeCounter--);
             ChangeBadgeColorCommand = new Command(() =>
             {
-                if ( BadgeColor != Color.BlueViolet) BadgeColor = Color.BlueViolet;
-                else BadgeColor = Color.IndianRed;
+                if (BadgeColor != Color.Green) BadgeColor = Color.Red;
+                else BadgeColor = Color.Red;
             });
             ToggleButtonVisibilityCommand = new Command(() => IsMenuButtonVisible = !IsMenuButtonVisible);