extended slider

src/Android/Android.csproj

@@ -79,6 +79,7 @@
     <Compile Include="Autofill\FilledItem.cs" />
     <Compile Include="Autofill\Parser.cs" />
     <Compile Include="Autofill\SavedItem.cs" />
+    <Compile Include="Renderers\ExtendedSliderRenderer.cs" />
     <Compile Include="Renderers\CustomEditorRenderer.cs" />
     <Compile Include="Renderers\CustomPickerRenderer.cs" />
     <Compile Include="Renderers\CustomEntryRenderer.cs" />
@@ -475,5 +476,8 @@
   <ItemGroup>
     <AndroidResource Include="Resources\drawable-xxxhdpi\pencil.png" />
   </ItemGroup>
+  <ItemGroup>
+    <AndroidResource Include="Resources\drawable\slider_thumb.xml" />
+  </ItemGroup>
   <Import Project="$(MSBuildExtensionsPath)\Xamarin\Android\Xamarin.Android.CSharp.targets" />
 </Project>

src/Android/Renderers/ExtendedSliderRenderer.cs

@@ -0,0 +1,33 @@
+using Android.Content;
+using Android.Graphics.Drawables;
+using Android.Support.V4.Content.Res;
+using Bit.App.Controls;
+using Bit.Droid.Renderers;
+using Xamarin.Forms;
+using Xamarin.Forms.Platform.Android;
+
+[assembly: ExportRenderer(typeof(ExtendedSlider), typeof(ExtendedSliderRenderer))]
+namespace Bit.Droid.Renderers
+{
+    public class ExtendedSliderRenderer : SliderRenderer
+    {
+        public ExtendedSliderRenderer(Context context)
+            : base(context)
+        {}
+
+        protected override void OnElementChanged(ElementChangedEventArgs<Slider> e)
+        {
+            base.OnElementChanged(e);
+            if(Control != null && Element is ExtendedSlider view)
+            {
+                var t = ResourcesCompat.GetDrawable(Resources, Resource.Drawable.slider_thumb, null);
+                if(t is GradientDrawable thumb)
+                {
+                    thumb.SetColor(view.ThumbColor.ToAndroid());
+                    thumb.SetStroke(1, view.ThumbBorderColor.ToAndroid());
+                    Control.SetThumb(thumb);
+                }
+            }
+        }
+    }
+}

src/Android/Resources/Resource.designer.cs

@@ -7993,26 +7993,26 @@ namespace Bit.Droid
 			// aapt resource value: 0x7f02005a
 			public const int avd_hide_password = 2130837594;
 			
-			// aapt resource value: 0x7f02014c
-			public const int avd_hide_password_1 = 2130837836;
-			
 			// aapt resource value: 0x7f02014d
-			public const int avd_hide_password_2 = 2130837837;
+			public const int avd_hide_password_1 = 2130837837;
 			
 			// aapt resource value: 0x7f02014e
-			public const int avd_hide_password_3 = 2130837838;
+			public const int avd_hide_password_2 = 2130837838;
+			
+			// aapt resource value: 0x7f02014f
+			public const int avd_hide_password_3 = 2130837839;
 			
 			// aapt resource value: 0x7f02005b
 			public const int avd_show_password = 2130837595;
 			
-			// aapt resource value: 0x7f02014f
-			public const int avd_show_password_1 = 2130837839;
-			
 			// aapt resource value: 0x7f020150
-			public const int avd_show_password_2 = 2130837840;
+			public const int avd_show_password_1 = 2130837840;
 			
 			// aapt resource value: 0x7f020151
-			public const int avd_show_password_3 = 2130837841;
+			public const int avd_show_password_2 = 2130837841;
+			
+			// aapt resource value: 0x7f020152
+			public const int avd_show_password_3 = 2130837842;
 			
 			// aapt resource value: 0x7f02005c
 			public const int card = 2130837596;
@@ -8698,11 +8698,11 @@ namespace Bit.Droid
 			// aapt resource value: 0x7f02013f
 			public const int notification_sm = 2130837823;
 			
-			// aapt resource value: 0x7f02014a
-			public const int notification_template_icon_bg = 2130837834;
-			
 			// aapt resource value: 0x7f02014b
-			public const int notification_template_icon_low_bg = 2130837835;
+			public const int notification_template_icon_bg = 2130837835;
+			
+			// aapt resource value: 0x7f02014c
+			public const int notification_template_icon_low_bg = 2130837836;
 			
 			// aapt resource value: 0x7f020140
 			public const int notification_tile_bg = 2130837824;
@@ -8723,16 +8723,19 @@ namespace Bit.Droid
 			public const int shield = 2130837829;
 			
 			// aapt resource value: 0x7f020146
-			public const int splash_screen = 2130837830;
+			public const int slider_thumb = 2130837830;
 			
 			// aapt resource value: 0x7f020147
-			public const int tooltip_frame_dark = 2130837831;
+			public const int splash_screen = 2130837831;
 			
 			// aapt resource value: 0x7f020148
-			public const int tooltip_frame_light = 2130837832;
+			public const int tooltip_frame_dark = 2130837832;
 			
 			// aapt resource value: 0x7f020149
-			public const int yubikey = 2130837833;
+			public const int tooltip_frame_light = 2130837833;
+			
+			// aapt resource value: 0x7f02014a
+			public const int yubikey = 2130837834;
 			
 			static Drawable()
 			{

src/Android/Resources/drawable/slider_thumb.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval">
+  <solid android:color="@color/white"/>
+  <stroke android:width="1dp" android:color="#B5B5B5"/>
+  <size android:width="28dp" android:height="28dp"/>
+</shape>

src/App/Controls/ExtendedSlider.cs

@@ -0,0 +1,16 @@
+using Xamarin.Forms;
+
+namespace Bit.App.Controls
+{
+    public class ExtendedSlider : Slider
+    {
+        public static readonly BindableProperty ThumbBorderColorProperty = BindableProperty.Create(
+            nameof(ThumbBorderColor), typeof(Color), typeof(ExtendedSlider), Color.Gray);
+
+        public Color ThumbBorderColor
+        {
+            get => (Color)GetValue(ThumbBorderColorProperty);
+            set => SetValue(ThumbBorderColorProperty, value);
+        }
+    }
+}

src/App/Pages/Generator/GeneratorPage.xaml

@@ -35,7 +35,8 @@
                     Text="{Binding Password}"
                     Margin="0, 20"
                     StyleClass="text-lg"
-                    HorizontalOptions="Center" />
+                    HorizontalOptions="Center"
+                    LineBreakMode="CharacterWrap" />
                 <StackLayout Orientation="Horizontal">
                     <Button Text="{u:I18n RegeneratePassword}"
                         HorizontalOptions="FillAndExpand"
@@ -92,6 +93,25 @@
                     </StackLayout>
                 </StackLayout>
                 <StackLayout Spacing="0" Padding="0" IsVisible="{Binding IsPassword}">
+                    <StackLayout StyleClass="box-row, box-row-slider">
+                        <Label
+                            Text="{u:I18n Length}"
+                            StyleClass="box-label, box-label-regular"
+                            VerticalOptions="CenterAndExpand" />
+                        <Label
+                            Text="{Binding Length}"
+                            StyleClass="box-label, box-sub-label"
+                            VerticalOptions="CenterAndExpand"
+                            HorizontalTextAlignment="End" />
+                        <controls:ExtendedSlider
+                            Value="{Binding Length}"
+                            StyleClass="box-value"
+                            VerticalOptions="CenterAndExpand"
+                            HorizontalOptions="FillAndExpand"
+                            Minimum="0"
+                            Maximum="128" />
+                    </StackLayout>
+                    <BoxView StyleClass="box-row-separator" />
                     <StackLayout StyleClass="box-row, box-row-switch">
                         <Label
                             Text="A-Z"

src/App/Styles/Base.xaml

@@ -2,7 +2,8 @@
 <ResourceDictionary xmlns="http://xamarin.com/schemas/2014/forms"
                     xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                     x:Class="Bit.App.Styles.Base"
-                    xmlns:fab="clr-namespace:Refractored.FabControl;assembly=Refractored.FabControl">
+                    xmlns:fab="clr-namespace:Refractored.FabControl;assembly=Refractored.FabControl"
+                    xmlns:controls="clr-namespace:Bit.App.Controls">
 
     <!-- General -->
     <Style TargetType="Label"
@@ -50,6 +51,16 @@
         <Setter Property="FontAttributes"
                 Value="Bold" />
     </Style>
+    <Style TargetType="controls:ExtendedSlider">
+        <Setter Property="MinimumTrackColor"
+                Value="{StaticResource SliderTrackColor}" />
+        <Setter Property="MaximumTrackColor"
+                Value="{StaticResource SliderTrackColor}" />
+        <Setter Property="ThumbColor"
+                Value="{StaticResource SliderThumbColor}" />
+        <Setter Property="ThumbBorderColor"
+                Value="{StaticResource SliderThumbBorderColor}" />
+    </Style>
     
     <!-- Buttons -->
     <Style TargetType="Button"
@@ -264,6 +275,13 @@
         <Setter Property="Spacing"
                 Value="10" />
     </Style>
+    <Style TargetType="StackLayout"
+           Class="box-row-slider">
+        <Setter Property="Orientation"
+                Value="Horizontal" />
+        <Setter Property="Spacing"
+                Value="10" />
+    </Style>
     <Style TargetType="Button"
            ApplyToDerivedTypes="True"
            Class="box-row-button">

src/App/Styles/Dark.xaml

@@ -25,6 +25,10 @@
     <Color x:Key="ListItemBorderColor">#f0f0f0</Color>
     <Color x:Key="ListHeaderTextColor">#3c8dbc</Color>
 
+    <Color x:Key="SliderThumbColor">#ffffff</Color>
+    <Color x:Key="SliderThumbBorderColor">#b5b5b5</Color>
+    <Color x:Key="SliderTrackColor">#3c8dbc</Color>
+
     <Color x:Key="FabColor">#3c8dbc</Color>
     <Color x:Key="FabPressedColor">#3883af</Color>
 </ResourceDictionary>

src/App/Styles/Light.xaml

@@ -25,6 +25,10 @@
     <Color x:Key="ListItemBorderColor">#f0f0f0</Color>
     <Color x:Key="ListHeaderTextColor">#3c8dbc</Color>
 
+    <Color x:Key="SliderThumbColor">#ffffff</Color>
+    <Color x:Key="SliderThumbBorderColor">#b5b5b5</Color>
+    <Color x:Key="SliderTrackColor">#dddddd</Color>
+
     <Color x:Key="FabColor">#3c8dbc</Color>
     <Color x:Key="FabPressedColor">#3883af</Color>
 </ResourceDictionary>