From 6ae7d6dd8d810b4662bf97fe0b357ff2492ef863 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andre=CC=81=20Bispo?= <abispo@bitwarden.com>
Date: Wed, 15 Jun 2022 20:54:00 +0100
Subject: [PATCH] PS-70 Fixed grid cell width. Added red progress at 20
 percent. Refactored circular progress view.

---
 .../AuthenticatorViewCell.xaml                | 44 ++++++-------
 .../Controls/CircularProgressbarView.xaml.cs  | 62 +++++--------------
 2 files changed, 34 insertions(+), 72 deletions(-)

diff --git a/src/App/Controls/AuthenticatorViewCell/AuthenticatorViewCell.xaml b/src/App/Controls/AuthenticatorViewCell/AuthenticatorViewCell.xaml
index ceed4f7fc..9385ad925 100644
--- a/src/App/Controls/AuthenticatorViewCell/AuthenticatorViewCell.xaml
+++ b/src/App/Controls/AuthenticatorViewCell/AuthenticatorViewCell.xaml
@@ -10,6 +10,7 @@
     StyleClass="list-row, list-row-platform"
     RowSpacing="0"
     ColumnSpacing="0"
+    HorizontalOptions="FillAndExpand"
     x:DataType="pages:GroupingsPageTOTPListItem">
 
     <Grid.Resources>
@@ -26,8 +27,8 @@
     <Grid.ColumnDefinitions>
         <ColumnDefinition Width="40" />
         <ColumnDefinition Width="*" />
-        <ColumnDefinition Width="60" />
-        <ColumnDefinition Width="Auto" />
+        <ColumnDefinition Width="40" />
+        <ColumnDefinition Width="Auto"/>
         <ColumnDefinition Width="40" />
     </Grid.ColumnDefinitions>
 
@@ -59,63 +60,55 @@
         Grid.Row="0"
         Grid.Column="1"
         VerticalOptions="Center"
+        HorizontalOptions="FillAndExpand"
         Padding="0, 7">
         <Grid.RowDefinitions>
             <RowDefinition Height="Auto" />
             <RowDefinition Height="Auto" />
         </Grid.RowDefinitions>
 
-        <Grid.ColumnDefinitions>
-            <ColumnDefinition Width="Auto" />
-            <ColumnDefinition Width="Auto" />
-            <ColumnDefinition Width="*" />
-        </Grid.ColumnDefinitions>
-
         <controls:MonoLabel
             LineBreakMode="TailTruncation"
             Grid.Column="0"
             Grid.Row="0"
-            Grid.ColumnSpan="3"
             StyleClass="list-title, list-title-platform"
-            Text="{Binding TotpCodeFormatted, Mode=OneWay}" />
+            Text="{Binding Cipher.Name}" />
         <Label 
             LineBreakMode="TailTruncation"
             Grid.Column="0"
             Grid.Row="1"
             StyleClass="list-subtitle, list-subtitle-platform"
-            Text="{Binding Cipher.Name}" />
+            Text="{Binding Cipher.SubTitle}" />
     </Grid>
 
     <controls:CircularProgressbarView
         Progress="{Binding Progress}" 
-        Margin="0, 10, 0, 0"
         Grid.Row="0"
         Grid.Column="2"
-        Grid.RowSpan="2"
+        HorizontalOptions="FillAndExpand"
         VerticalOptions="CenterAndExpand" />
     
     <Label
         Text="{Binding TotpSec, Mode=OneWay}"
         Style="{DynamicResource textTotp}"
-        Margin="0, 0, 0, 10"
         Grid.Row="0"
         Grid.Column="2"
-        Grid.RowSpan="2"
         StyleClass="text-sm"
-        HorizontalTextAlignment="Center"
-        VerticalOptions="CenterAndExpand" /> 
+        XAlign="Center"
+        YAlign="Center"
+        HorizontalOptions="FillAndExpand"
+        VerticalOptions="FillAndExpand"/> 
 
-    <Label
+    <controls:MonoLabel
         Text="{Binding TotpCodeFormatted, Mode=OneWay}"
         Style="{DynamicResource textTotp}"
-        Margin="0, 0, 0, 0"
         Grid.Row="0"
         Grid.Column="3"
-        Grid.RowSpan="2"
-        StyleClass="text-sm"
-        HorizontalOptions="CenterAndExpand"
-        HorizontalTextAlignment="Center"
-        VerticalOptions="CenterAndExpand" />
+        StyleClass="list-title, list-title-platform"
+        XAlign="Center"
+        YAlign="Center"
+        HorizontalOptions="FillAndExpand"
+        VerticalOptions="FillAndExpand" />
 
     <controls:IconButton 
         StyleClass="box-row-button, box-row-button-platform"
@@ -124,8 +117,9 @@
         CommandParameter="LoginTotp"
         Grid.Row="0"
         Grid.Column="4"
-        Grid.RowSpan="2"
         Padding="0,0,1,0"
+        HorizontalOptions="FillAndExpand"
+        VerticalOptions="CenterAndExpand"
         AutomationProperties.IsInAccessibleTree="True"
         AutomationProperties.Name="{u:I18n CopyTotp}" />
 </controls:ExtendedGrid>
\ No newline at end of file
diff --git a/src/App/Controls/CircularProgressbarView.xaml.cs b/src/App/Controls/CircularProgressbarView.xaml.cs
index 69c7d2f2e..b29e065ef 100644
--- a/src/App/Controls/CircularProgressbarView.xaml.cs
+++ b/src/App/Controls/CircularProgressbarView.xaml.cs
@@ -2,6 +2,7 @@
 using System.Collections.Generic;
 using SkiaSharp;
 using SkiaSharp.Views.Forms;
+using Xamarin.Essentials;
 using Xamarin.Forms;
 
 namespace Bit.App.Controls
@@ -13,8 +14,6 @@ namespace Bit.App.Controls
         public static readonly BindableProperty ProgressProperty = BindableProperty.Create(
             "Progress", typeof(double), typeof(CircularProgressbarView), propertyChanged: OnProgressChanged);
 
-        public SKColor Color => Progress > 90 ? SKColors.Red : SKColors.Blue;
-
         public double Progress
         {
             get { return (double)GetValue(ProgressProperty); }
@@ -30,8 +29,9 @@ namespace Bit.App.Controls
         public CircularProgressbarView()
         {
             InitializeComponent();
-            var circle = new Circle(25, (info) => new SKPoint((float)info.Width / 2, (float)info.Height / 2));
-            _progressDrawer = new ProgressDrawer(SkCanvasView, circle, () => (float)Progress, 5, SKColors.White, Color);
+            var pixels = DeviceDisplay.MainDisplayInfo.Density * 15;
+            var circle = new Circle((float)pixels, (info) => new SKPoint((float)info.Width / 2, (float)info.Height / 2));
+            _progressDrawer = new ProgressDrawer(SkCanvasView, circle, () => (float)Progress, 5, SKColors.White, SKColors.Blue, SKColors.Red);
         }
     }
 
@@ -48,59 +48,22 @@ namespace Bit.App.Controls
         public float Redius { get; set; }
         public SKRect Rect => new SKRect(Center.X - Redius, Center.Y - Redius, Center.X + Redius, Center.Y + Redius);
 
-        public class ProgressDrawer
-        {
-
-            public ProgressDrawer(SKCanvasView canvas, Circle circle, Func<float> progress, float strokeWidth, SKColor progressColor, SKColor foregroundColor)
-            {
-                canvas.PaintSurface += (sender, args) =>
-                {
-                    circle.CalculateCenter(args.Info);
-                    args.Surface.Canvas.Clear();
-                    DrawCircle(args.Surface.Canvas, circle, strokeWidth, progressColor);
-                    DrawArc(args.Surface.Canvas, circle, progress, strokeWidth, foregroundColor);
-
-                };
-            }
-
-            private void DrawCircle(SKCanvas canvas, Circle circle, float strokewidth, SKColor color)
-            {
-                canvas.DrawCircle(circle.Center, circle.Redius,
-                    new SKPaint()
-                    {
-                        StrokeWidth = strokewidth,
-                        Color = color,
-                        IsStroke = true,
-                        IsAntialias = true,
-                    });
-
-            }
-
-            private void DrawArc(SKCanvas canvas, Circle circle, Func<float> progress, float strokewidth, SKColor color)
-            {
-                var angle = progress.Invoke() * 3.6f;
-                canvas.DrawArc(circle.Rect, 270, angle, false,
-                    new SKPaint() { StrokeWidth = strokewidth, Color = color, IsStroke = true, IsAntialias = true });
-            }
-
-        }
-
         public void CalculateCenter(SKImageInfo argsInfo)
         {
             Center = _centerfunc.Invoke(argsInfo);
         }
     }
+
     public class ProgressDrawer
     {
-        public ProgressDrawer(SKCanvasView canvas, Circle circle, Func<float> progress, float strokeWidth, SKColor progressColor, SKColor foregroundColor)
+        public ProgressDrawer(SKCanvasView canvas, Circle circle, Func<float> progress, float strokeWidth, SKColor progressColor, SKColor foregroundColor, SKColor progressEndColor)
         {
             canvas.PaintSurface += (sender, args) =>
             {
                 circle.CalculateCenter(args.Info);
                 args.Surface.Canvas.Clear();
                 DrawCircle(args.Surface.Canvas, circle, strokeWidth, progressColor);
-                DrawArc(args.Surface.Canvas, circle, progress, strokeWidth, foregroundColor);
-
+                DrawArc(args.Surface.Canvas, circle, progress, strokeWidth, foregroundColor, progressEndColor);
             };
         }
 
@@ -116,11 +79,16 @@ namespace Bit.App.Controls
                 });
         }
 
-        private void DrawArc(SKCanvas canvas, Circle circle, Func<float> progress, float strokewidth, SKColor color)
+        private void DrawArc(SKCanvas canvas, Circle circle, Func<float> progress, float strokewidth, SKColor color, SKColor progressEndColor)
         {
-            var angle = progress.Invoke() * 3.6f;
+            var progressValue = progress.Invoke();
+            var angle = progressValue * 3.6f;
             canvas.DrawArc(circle.Rect, 270, angle, false,
-                new SKPaint() { StrokeWidth = strokewidth, Color = color, IsStroke = true,
+                new SKPaint()
+                {
+                    StrokeWidth = strokewidth,
+                    Color = progressValue < 20f ? progressEndColor : color,
+                    IsStroke = true,
                     IsAntialias = true
                 });
         }