bitwarden/mobile
1
0
Fork 0
mirror of https://github.com/bitwarden/mobile synced 2025-12-21 10:43:22 +00:00
Code Issues Releases Wiki Activity

PS-70 Fixed grid cell width. Added red progress at 20 percent. Refactored circular progress view.

Browse Source
This commit is contained in:
André Bispo
2022-06-15 20:54:00 +01:00
parent a3218aed26
commit 6ae7d6dd8d
2 changed files with 34 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
src/App/Controls/AuthenticatorViewCell/AuthenticatorViewCell.xaml
View File

@@ -10,6 +10,7 @@
StyleClass="list-row, list-row-platform"
RowSpacing="0"
ColumnSpacing="0"
HorizontalOptions="FillAndExpand"
x:DataType="pages:GroupingsPageTOTPListItem">
<Grid.Resources>
@@ -26,7 +27,7 @@
<Grid.ColumnDefinitions>
<ColumnDefinition Width="40" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="60" />
<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>

62
src/App/Controls/CircularProgressbarView.xaml.cs
View File

@@ -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
});
}