Expand Settings TimePicker tap recognition to entire row (#1714)

* move timepicker to separate DataTemplate
- activate timepicker when selecting row

* null check on TimePicker

src/App/Pages/Settings/SettingsPage/SettingsPage.xaml

@@ -45,20 +45,47 @@
                            VerticalOptions="CenterAndExpand"
                            TextColor="{Binding SubLabelColor}"
                            StyleClass="list-sub" />
-                    <TimePicker IsVisible="{Binding ShowTimeInput}"
+                </controls:ExtendedStackLayout>
-                                Time="{Binding Time}" Format="HH:mm"
+            </DataTemplate>
+            <DataTemplate
+                x:Key="timePickerTemplate"
+                x:DataType="pages:SettingsPageListItem">
+                <controls:ExtendedStackLayout Orientation="Horizontal"
+                             StyleClass="list-row, list-row-platform">
+                    <Frame
+                        IsVisible="{Binding UseFrame}"
+                        Padding="10"
+                        HasShadow="False"
+                        BackgroundColor="Transparent"
+                        BorderColor="Accent">
+                        <Label
+                            Text="{Binding Name, Mode=OneWay}"
+                            StyleClass="text-muted, text-sm, text-bold"
+                            HorizontalTextAlignment="Center" />
+                    </Frame>
+                    <Label IsVisible="{Binding UseFrame, Converter={StaticResource inverseBool}}"
+                           Text="{Binding Name, Mode=OneWay}"
+                           LineBreakMode="{Binding LineBreakMode}"
+                           HorizontalOptions="StartAndExpand"
+                           VerticalOptions="CenterAndExpand"
+                           StyleClass="list-title"/>
+                    <TimePicker Time="{Binding Time}" Format="HH:mm"
                                 PropertyChanged="OnTimePickerPropertyChanged"
                                 HorizontalOptions="End"
                                 VerticalOptions="Center"
                                 FontSize="Small"
                                 TextColor="{Binding SubLabelColor}"
-                                StyleClass="list-sub" Margin="-5" />
+                                StyleClass="list-sub" Margin="-5"/>
+                    <controls:ExtendedStackLayout.GestureRecognizers>
+			            <TapGestureRecognizer Tapped="ActivateTimePicker"/>
+		            </controls:ExtendedStackLayout.GestureRecognizers>
                 </controls:ExtendedStackLayout>
 	        </DataTemplate>
 
             <pages:SettingsPageListItemSelector
                 x:Key="listItemDataTemplateSelector"
-                RegularTemplate="{StaticResource regularTemplate}" />
+                RegularTemplate="{StaticResource regularTemplate}"
+                TimePickerTemplate="{StaticResource timePickerTemplate}" />
         </ResourceDictionary>
     </ContentPage.Resources>
 

src/App/Pages/Settings/SettingsPage/SettingsPage.xaml.cs

@@ -1,4 +1,5 @@
-using System.ComponentModel;
+using System;
+using System.ComponentModel;
 using System.Linq;
 using System.Threading.Tasks;
 using Bit.App.Abstractions;
@@ -45,6 +46,17 @@ namespace Bit.App.Pages
             return base.OnBackButtonPressed();
         }
 
+        void ActivateTimePicker(object sender, EventArgs args)
+        {
+            var stackLayout = (ExtendedStackLayout)sender;
+            SettingsPageListItem item = (SettingsPageListItem)stackLayout.BindingContext;
+            if (item.ShowTimeInput)
+            {
+                var timePicker = stackLayout.Children.Where(x => x is TimePicker).FirstOrDefault();
+                ((TimePicker)timePicker)?.Focus();
+            }
+        }
+
         async void OnTimePickerPropertyChanged(object sender, PropertyChangedEventArgs args)
         {
             var s = (TimePicker) sender;

src/App/Pages/Settings/SettingsPage/SettingsPageListItemSelector.cs

@@ -5,13 +5,21 @@ namespace Bit.App.Pages
     public class SettingsPageListItemSelector : DataTemplateSelector
     {
         public DataTemplate RegularTemplate { get; set; }
+        public DataTemplate TimePickerTemplate { get; set; }
 
         protected override DataTemplate OnSelectTemplate(object item, BindableObject container)
         {
             if (item is SettingsPageListItem listItem)
+            {
+                if (listItem.ShowTimeInput)
+                {
+                    return TimePickerTemplate;
+                }
+                else
                 {
                     return RegularTemplate;
                 }
+            }
             return null;
         }
     }