Added loading image

Review mobile apps UI
Changes in Basket API integration

Author: Javier Suárez Ruiz

src/Mobile/eShopOnContainers/eShopOnContainers.Core/App.xaml

@@ -104,6 +104,7 @@
             <converters:ItemTappedEventArgsConverter x:Key="ItemTappedEventArgsConverter" />
             <converters:InverseCountToBoolConverter x:Key="InverseCountToBoolConverter" />
             <converters:InverseBoolConverter x:Key="InverseBoolConverter" />
+            <converters:ItemsToHeightConverter x:Key="ItemsToHeightConverter" />
             <converters:ToUpperConverter x:Key="ToUpperConverter" />
 
             <!-- STYLES -->

src/Mobile/eShopOnContainers/eShopOnContainers.Core/Converters/ItemsToHeightConverter.cs

@@ -0,0 +1,26 @@
+using System;
+using System.Globalization;
+using Xamarin.Forms;
+
+namespace eShopOnContainers.Core.Converters
+{
+    public class ItemsToHeightConverter : IValueConverter
+    {
+        private const int ItemHeight = 144;
+
+        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
+        {
+            if(value is int)
+            {
+                return System.Convert.ToInt32(value) * ItemHeight;
+            }
+
+            return 0;
+        }
+
+        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
+        {
+            return null;
+        }
+    }
+}

src/Mobile/eShopOnContainers/eShopOnContainers.Core/Views/BasketView.xaml

@@ -55,7 +55,7 @@
                 <RowDefinition Height="60" />
             </Grid.RowDefinitions>
             <!-- CART ITEMS -->
-            <ScrollView
+            <Grid
                 Grid.Row="0">
                 <Grid>
                     <Grid.RowDefinitions>
@@ -73,7 +73,8 @@
                     <!-- ITEMS -->
                     <ListView 
                         Grid.Row="1"
-                        ItemsSource="{Binding BasketItems}"     
+                        ItemsSource="{Binding BasketItems}"    
+                        HeightRequest="{Binding BasketItems.Count, Converter={StaticResource ItemsToHeightConverter}}"
                         HasUnevenRows="True"
                         SeparatorVisibility="None"
                         VerticalOptions="FillAndExpand"
@@ -102,7 +103,7 @@
                             Style="{StaticResource CartTotalStyle}"/>
                     </StackLayout>
                 </Grid>
-            </ScrollView>
+            </Grid>
             <!-- CHECKOUT -->
             <Grid
                 Grid.Row="1"           

src/Mobile/eShopOnContainers/eShopOnContainers.Core/Views/FiltersView.xaml

@@ -69,6 +69,7 @@
       <RowDefinition Height="Auto" />
       <RowDefinition Height="Auto" />
     </Grid.RowDefinitions>
+    <!-- BRAND -->
     <controls:BindablePicker
       Grid.Row="0"
       Title="BRAND" 
@@ -83,6 +84,7 @@
           WinPhone="36"/>
       </controls:BindablePicker.HeightRequest> 
     </controls:BindablePicker>
+    <!-- TYPE -->
     <controls:BindablePicker
       Grid.Row="1"
       Title="TYPE"

src/Mobile/eShopOnContainers/eShopOnContainers.Core/Views/MainView.xaml

@@ -21,6 +21,7 @@
             </ToolbarItem.Icon>
         </ToolbarItem>
     </ContentPage.ToolbarItems>
+    <!-- CATALOG -->
     <views:CatalogView  
         x:Name="HomeView">
         <views:CatalogView.Icon>
@@ -31,6 +32,7 @@
                 WinPhone="Assets\menu_filter.png"/>
         </views:CatalogView.Icon>
     </views:CatalogView>
+    <!-- PROFILE -->
     <views:ProfileView
         x:Name="ProfileView">
         <views:ProfileView.Icon>
@@ -41,6 +43,7 @@
                 WinPhone="Assets\menu_profile.png"/>
         </views:ProfileView.Icon>
     </views:ProfileView>
+    <!-- BASKET -->
     <views:BasketView
         x:Name="BasketView"
         controls:CustomTabbedPage.BadgeText="{Binding BadgeCount}"

src/Mobile/eShopOnContainers/eShopOnContainers.Core/Views/SettingsView.xaml

@@ -89,7 +89,7 @@
                         Grid.Column="0"
                         Grid.ColumnSpan="2"
                         BackgroundColor="Gray"/>
-                    <StackLayout
+                    <StackLayout 
                         Grid.Column="0"                       
                         Grid.Row="1">
                         <Label 
@@ -100,7 +100,8 @@
                             Text="{Binding Description}"
                             Style="{StaticResource SettingsDescriptionStyle}"/>
                     </StackLayout>
-                    <controls:ToggleButton
+                    <!-- ON / OFF -->
+                    <controls:ToggleButton 
                         Grid.Column="1" 
                         Grid.Row="1" 
                         Animate="True"     
@@ -109,14 +110,14 @@
                         Style="{StaticResource SettingsToggleButtonStyle}">
                         <controls:ToggleButton.CheckedImage>
                             <OnPlatform x:TypeArguments="ImageSource"
-                              Android="switchOn"
-                              iOS="switchOn"
+                              Android="switch_on.png"
+                              iOS="switchOn.png"
                               WinPhone="Assets/switchOn.png"/>
                         </controls:ToggleButton.CheckedImage>
                         <controls:ToggleButton.UnCheckedImage>
                             <OnPlatform x:TypeArguments="ImageSource"
-                              Android="switchOff"
-                              iOS="switchOff"
+                              Android="switch_off.png"
+                              iOS="switchOff.png"
                               WinPhone="Assets/switchOff.png"/>
                         </controls:ToggleButton.UnCheckedImage>
                     </controls:ToggleButton>

src/Mobile/eShopOnContainers/eShopOnContainers.Core/Views/Templates/BasketItemTemplate.xaml

@@ -56,8 +56,6 @@
 
             <Style x:Key="QuantityPickerStyle"  
              TargetType="{x:Type controls:BindablePicker}">
-                <Setter Property="WidthRequest"
-                        Value="36" />
                 <Setter Property="BackgroundColor"
                         Value="Transparent" />
                 <Setter Property="HorizontalOptions"
@@ -71,6 +69,13 @@
     <ContentView.Content>
         <Grid   
             BackgroundColor="{StaticResource BackgroundColor}">
+            <Grid.Padding>
+                <OnPlatform         
+                    x:TypeArguments="Thickness"
+                    Android="0"
+                    iOS="0"
+                    WinPhone="12, 0"/>
+            </Grid.Padding>
             <Grid.ColumnDefinitions>
                 <ColumnDefinition Width="Auto" />
                 <ColumnDefinition Width="*" />
@@ -79,6 +84,7 @@
                 <RowDefinition Height="*" />
                 <RowDefinition Height="1" />
             </Grid.RowDefinitions>
+            <!-- IMAGE -->
             <ffimageloading:CachedImage
                 Grid.Column="0"
                 Grid.Row="0"
@@ -91,6 +97,13 @@
                 Aspect="AspectFit"
                 VerticalOptions="Start"
                 Margin="12,0,0,0">
+                <ffimageloading:CachedImage.LoadingPlaceholder>
+                    <OnPlatform   
+                        x:TypeArguments="ImageSource"
+                        iOS="default_product"
+                        Android="default_product"
+                        WinPhone="Assets/default_product.png"/>
+                </ffimageloading:CachedImage.LoadingPlaceholder>
                 <ffimageloading:CachedImage.ErrorPlaceholder>
                     <OnPlatform   
                         x:TypeArguments="ImageSource"
@@ -108,6 +121,7 @@
                     <RowDefinition />
                     <RowDefinition />
                 </Grid.RowDefinitions>
+                <!-- NAME -->
                 <Label
                     Grid.Row="0"
                     Text="{Binding ProductName, Converter={StaticResource ToUpperConverter}}"/>
@@ -117,6 +131,7 @@
                         <ColumnDefinition />
                         <ColumnDefinition />
                     </Grid.ColumnDefinitions>
+                    <!-- PRICE -->
                     <Label 
                         Grid.Column="0"
                         Text="{Binding UnitPrice, StringFormat='${0:N}'}"
@@ -125,8 +140,17 @@
                         Grid.Column="1"
                         ItemsSource="{Binding Numbers}"
                         SelectedItem="{Binding Quantity, Mode=TwoWay}"
-                        Style="{StaticResource QuantityPickerStyle}"/>
+                        Style="{StaticResource QuantityPickerStyle}">
+                        <controls:BindablePicker.WidthRequest>
+                            <OnPlatform         
+                                x:TypeArguments="x:Double"
+                                Android="36"
+                                iOS="36"
+                                WinPhone="72"/>
+                        </controls:BindablePicker.WidthRequest>
+                    </controls:BindablePicker>
                 </Grid>
+                <!-- TOTAL -->
                 <Label
                     Grid.Row="2"
                     Text="{Binding Total, StringFormat='${0:N}'}"

src/Mobile/eShopOnContainers/eShopOnContainers.Core/Views/Templates/OrderItemTemplate.xaml

@@ -40,7 +40,7 @@
                 <Setter Property="HorizontalOptions" 
                         Value="End" />
             </Style>
-            
+
             <Style x:Key="OrderTotalStyle" 
                TargetType="{x:Type Label}">
                 <Setter Property="FontFamily"
@@ -67,6 +67,7 @@
                 <RowDefinition Height="*" />
                 <RowDefinition Height="1" />
             </Grid.RowDefinitions>
+            <!-- IMAGE -->
             <ffimageloading:CachedImage
                 Grid.Column="0"
                 Grid.Row="0"
@@ -79,6 +80,13 @@
                 Aspect="AspectFit"
                 VerticalOptions="Start"
                 Margin="12,0,0,0">
+                <ffimageloading:CachedImage.LoadingPlaceholder>
+                    <OnPlatform   
+                        x:TypeArguments="ImageSource"
+                        iOS="default_product"
+                        Android="default_product"
+                        WinPhone="Assets/default_product.png"/>
+                </ffimageloading:CachedImage.LoadingPlaceholder>
                 <ffimageloading:CachedImage.ErrorPlaceholder>
                     <OnPlatform   
                         x:TypeArguments="ImageSource"
@@ -96,6 +104,7 @@
                     <RowDefinition />
                     <RowDefinition />
                 </Grid.RowDefinitions>
+                <!-- NAME -->
                 <Label
                     Grid.Row="0"
                     Text="{Binding ProductName, Converter={StaticResource ToUpperConverter}}"/>
@@ -105,6 +114,7 @@
                         <ColumnDefinition />
                         <ColumnDefinition />
                     </Grid.ColumnDefinitions>
+                    <!-- PRICE -->
                     <Label 
                         Grid.Column="0"
                         Text="{Binding UnitPrice, StringFormat='${0:N}'}"
@@ -114,6 +124,7 @@
                         Text="{Binding Quantity}"
                         Style="{StaticResource OrderItemQuantityStyle}"/>
                 </Grid>
+                <!-- TOTAL -->
                 <Label
                     Grid.Row="2"
                     Text="{Binding Total, StringFormat='${0:N}'}"

src/Mobile/eShopOnContainers/eShopOnContainers.Core/Views/Templates/ProductTemplate.xaml

@@ -70,13 +70,21 @@
                 <RowDefinition Height="Auto" />
                 <RowDefinition Height="Auto" />
             </Grid.RowDefinitions>
+            <!-- IMAGE -->
             <ffimageloading:CachedImage 
                 Grid.Row="0"
                 Source="{Binding PictureUri}"     
                 CacheDuration="30"                      
                 CacheType="Disk"             
                 DownsampleToViewSize="True"
                 Aspect="AspectFill">
+                <ffimageloading:CachedImage.LoadingPlaceholder>
+                    <OnPlatform   
+                        x:TypeArguments="ImageSource"
+                        iOS="default_product"
+                        Android="default_product"
+                        WinPhone="Assets/default_product.png"/>
+                </ffimageloading:CachedImage.LoadingPlaceholder>
                 <ffimageloading:CachedImage.ErrorPlaceholder>
                     <OnPlatform   
                         x:TypeArguments="ImageSource"
@@ -91,10 +99,12 @@
                 Style="{StaticResource AddButtonStyle}">
                 <controls:AddBasketButton />
             </Grid>
+            <!-- NAME -->
             <Label 
                 Grid.Row="1"
                 Text="{Binding Name, Converter={StaticResource ToUpperConverter}}"
                 Style="{StaticResource ProductNameStyle}"/>
+            <!-- PRICE -->
             <Label 
                 Grid.Row="2"
                 Text="{Binding Price, StringFormat='${0:N}'}"

src/Mobile/eShopOnContainers/eShopOnContainers.Core/eShopOnContainers.Core.csproj

@@ -55,6 +55,7 @@
     <Compile Include="Converters\ImageConverter.cs" />
     <Compile Include="Converters\InverseBoolConverter.cs" />
     <Compile Include="Converters\InverseCountToBoolConverter.cs" />
+    <Compile Include="Converters\ItemsToHeightConverter.cs" />
     <Compile Include="Converters\ItemTappedConverter.cs" />
     <Compile Include="Converters\ToUpperConverter.cs" />
     <Compile Include="Effects\LineColorEffect.cs" />