From f0b854e90857c29f8b83a6f6fbbd4e2e641a5c1f Mon Sep 17 00:00:00 2001
From: jjie <jjie.choi@samsung.com>
Date: Fri, 30 Jun 2017 12:55:20 +0900
Subject: [PATCH] Implement mediahub music list gui

Change-Id: Id966973933b2334ae481eacdc2aa1d88fe90b768
Signed-off-by: jjie <jjie.choi@samsung.com>
---
 TVMediaHub/TVMediaHub.Tizen/Views/MusicGroup.xaml  |   6 +-
 .../TVMediaHub.Tizen/Views/MusicGroup.xaml.cs      |   7 +-
 TVMediaHub/TVMediaHub.Tizen/Views/MusicItem.xaml   |  15 ++-
 .../TVMediaHub.Tizen/Views/MusicItem.xaml.cs       | 130 ++++++++++++++++++---
 TVMediaHub/TVMediaHub.Tizen/Views/MusicTab.xaml    |   6 +-
 5 files changed, 132 insertions(+), 32 deletions(-)

diff --git a/TVMediaHub/TVMediaHub.Tizen/Views/MusicGroup.xaml b/TVMediaHub/TVMediaHub.Tizen/Views/MusicGroup.xaml
index 41301b1..1b9dbad 100644
--- a/TVMediaHub/TVMediaHub.Tizen/Views/MusicGroup.xaml
+++ b/TVMediaHub/TVMediaHub.Tizen/Views/MusicGroup.xaml
@@ -4,13 +4,13 @@
                 x:Class="TVMediaHub.Tizen.Views.MusicGroup"
                 ItemsSource="{Binding Contents}">
     <Button x:Name="TitleFocusArea" Opacity ="0"
-            RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.085}"/>
+            RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.0737}"/>
 
     <Label x:Name="GroupTitle" Text="{Binding Title}"
-           RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.085}"/>
+           RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.0737}"/>
 
     <Grid x:Name="GroupContentArea"
-          RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.915}"
+          RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.926}"
           RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.085}">
     </Grid>
 </RelativeLayout>
\ No newline at end of file
diff --git a/TVMediaHub/TVMediaHub.Tizen/Views/MusicGroup.xaml.cs b/TVMediaHub/TVMediaHub.Tizen/Views/MusicGroup.xaml.cs
index 307f1b5..2056a21 100644
--- a/TVMediaHub/TVMediaHub.Tizen/Views/MusicGroup.xaml.cs
+++ b/TVMediaHub/TVMediaHub.Tizen/Views/MusicGroup.xaml.cs
@@ -63,8 +63,7 @@ namespace TVMediaHub.Tizen.Views
         private void InitializeSize()
         {
             GroupTitle.FontSize = Utils.SizeUtils.GetFontSize(28);
-            GroupTitle.HeightRequest = Utils.SizeUtils.GetHeightSize(50);
-            GroupTitle.Margin = new Thickness(SizeUtils.GetWidthSize(60), 0, 0, 0);
+            GroupTitle.Margin = new Thickness(SizeUtils.GetWidthSize(4), 0, 0, 0);
 
             TitleFocusArea.WidthRequest = SizeUtils.GetWidthSize(180);
             GroupContentArea.RowSpacing = SizeUtils.GetHeightSize(-134);
@@ -90,6 +89,10 @@ namespace TVMediaHub.Tizen.Views
                 {
                     var itemView = new MusicItem();
                     itemView.BindingContext = item;
+                    itemView.OnFocusedEventHandler += (se, ev) =>
+                    {
+                        GroupContentArea.RaiseChild(itemView);
+                    };
                     GroupContentArea.Children.Add(itemView, index / 4, index % 4);
                     index++;
                 }
diff --git a/TVMediaHub/TVMediaHub.Tizen/Views/MusicItem.xaml b/TVMediaHub/TVMediaHub.Tizen/Views/MusicItem.xaml
index 1c262e0..077d2da 100644
--- a/TVMediaHub/TVMediaHub.Tizen/Views/MusicItem.xaml
+++ b/TVMediaHub/TVMediaHub.Tizen/Views/MusicItem.xaml
@@ -6,6 +6,11 @@
                 xmlns:Views="clr-namespace:TVMediaHub.Tizen.Views"
                 MusicInfo="{Binding Information}">
 
+    <Utils:NinePatch x:Name="Shadow"
+                     Source=""
+                     VerticalOptions="CenterAndExpand"
+                     HorizontalOptions="CenterAndExpand"
+                     Aspect="Fill"/>
     <StackLayout Orientation="Vertical" x:Name="TextArea" BackgroundColor="#171717" Spacing="0"
                  RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.2518}"
                  RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.2821}">
@@ -19,17 +24,17 @@
         <Label x:Name="AlbumTitle"
                FontFamily="BreezeSans"
                LineBreakMode="TailTruncation"
-               Opacity="0.6"/>
+               Opacity="0.5"/>
     </StackLayout>
     <Image x:Name="AlbumCover"
            RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.2518}"
            RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.0951}"
            Source="img_music_nocover_focused.png"/>
     <Button x:Name="FocusArea"
-            RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=1}"
-            RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1}"
-            RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0}"
-            RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0}"
+            RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.496}"
+            RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.81}"
+            RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.2518}"
+            RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.0951}"
             Opacity="0"
             Clicked="OnItemClicked"
             Focused="OnItemFocused"
diff --git a/TVMediaHub/TVMediaHub.Tizen/Views/MusicItem.xaml.cs b/TVMediaHub/TVMediaHub.Tizen/Views/MusicItem.xaml.cs
index abf663e..92b2cad 100755
--- a/TVMediaHub/TVMediaHub.Tizen/Views/MusicItem.xaml.cs
+++ b/TVMediaHub/TVMediaHub.Tizen/Views/MusicItem.xaml.cs
@@ -17,6 +17,7 @@
 using System;
 using System.ComponentModel;
 using Tizen.Content.MediaContent;
+using Tizen.Xamarin.Forms.Extension;
 using TVMediaHub.Tizen.DataModels;
 using TVMediaHub.Tizen.Utils;
 using TVMediaHub.Tizen.ViewModels;
@@ -54,7 +55,24 @@ namespace TVMediaHub.Tizen.Views
             }
         }
 
+        /// <summary>
+        /// An EventHandler for focus event of the item
+        /// </summary>
+        public EventHandler OnFocusedEventHandler;
+        /// <summary>
+        /// An EventHandler for unfocus event of the item
+        /// </summary>
+        public EventHandler OnUnfocusedEventHandler;
+
+        /// <summary>
+        /// Bounds for TextArea when item is unfocused
+        /// </summary>
+        private Rectangle TextAreaNormalBounds;
 
+        /// <summary>
+        /// Bounds for TextArea when item is focused
+        /// </summary>
+        private Rectangle TextAreaFocusedBounds;
 
         /// <summary>
         /// A constructor
@@ -64,35 +82,69 @@ namespace TVMediaHub.Tizen.Views
         {
             InitializeComponent();
             InitializeSize();
+            InitializeLabel();
             PropertyChanged += MusicItemPropertyChanged;
         }
 
         /// <summary>
+        /// A method for initializing font and slide effect
+        /// </summary>
+        public void InitializeLabel()
+        {
+            SongTitle.On<Xamarin.Forms.PlatformConfiguration.Tizen>().SetFontWeight(FontWeight.Normal);
+            Artist.On<Xamarin.Forms.PlatformConfiguration.Tizen>().SetFontWeight(FontWeight.Normal);
+            AlbumTitle.On<Xamarin.Forms.PlatformConfiguration.Tizen>().SetFontWeight(FontWeight.Light);
+
+            SlideEffect.SetSlideDuration(SongTitle, 15000);
+            SlideEffect.SetSlideMode(SongTitle, SlideMode.Auto);
+
+            SlideEffect.SetSlideDuration(Artist, 15000);
+            SlideEffect.SetSlideMode(Artist, SlideMode.Auto);
+
+            SlideEffect.SetSlideDuration(AlbumTitle, 15000);
+            SlideEffect.SetSlideMode(AlbumTitle, SlideMode.Auto);
+        }
+
+        /// <summary>
         /// A method for initializing size of the items that are used in this class
         /// </summary>
         private void InitializeSize()
         {
+            int h28 = SizeUtils.GetHeightSize(28);
+            int h32 = SizeUtils.GetHeightSize(32);
+            int w32 = SizeUtils.GetWidthSize(32);
+            int h134 = SizeUtils.GetHeightSize(134);
+            int w134 = SizeUtils.GetWidthSize(134);
+            int w382 = SizeUtils.GetWidthSize(382);
+            int w446 = SizeUtils.GetWidthSize(446);
+
             WidthRequest = SizeUtils.GetWidthSize(716);
             HeightRequest = SizeUtils.GetHeightSize(270);
-            AlbumCover.WidthRequest = SizeUtils.GetWidthSize(134);
-            AlbumCover.HeightRequest = SizeUtils.GetHeightSize(134);
-            TextArea.WidthRequest = SizeUtils.GetWidthSize(446);
-            TextArea.HeightRequest = SizeUtils.GetHeightSize(134);
-            SongTitle.WidthRequest = SizeUtils.GetWidthSize(382);
-            SongTitle.HeightRequest = SizeUtils.GetHeightSize(32);
+
+            TextAreaNormalBounds = new Rectangle(SizeUtils.GetWidthSize(202), SizeUtils.GetHeightSize(68), w446, SizeUtils.GetHeightSize(134));
+            TextAreaFocusedBounds = new Rectangle(SizeUtils.GetWidthSize(206), SizeUtils.GetHeightSize(64), w446, SizeUtils.GetHeightSize(142));
+
+            AlbumCover.WidthRequest = w134;
+            AlbumCover.HeightRequest = h134;
+
+            TextArea.WidthRequest = w446;
+            TextArea.HeightRequest = h134;
+
+            SongTitle.WidthRequest = w382;
+            SongTitle.HeightRequest = h32;
             SongTitle.FontSize = SizeUtils.GetFontSize(28);
-            SongTitle.Margin = new Thickness(SizeUtils.GetWidthSize(32), SizeUtils.GetHeightSize(18), SizeUtils.GetWidthSize(32), 0);
-            SongTitle.On<Xamarin.Forms.PlatformConfiguration.Tizen>().SetFontWeight(FontWeight.Normal);
-            Artist.WidthRequest = SizeUtils.GetWidthSize(382);
-            Artist.HeightRequest = SizeUtils.GetHeightSize(32);
-            Artist.Margin = new Thickness(SizeUtils.GetWidthSize(32), SizeUtils.GetHeightSize(12), SizeUtils.GetWidthSize(32), 0);
-            Artist.FontSize = SizeUtils.GetFontSize(28);
-            Artist.On<Xamarin.Forms.PlatformConfiguration.Tizen>().SetFontWeight(FontWeight.Normal);
-            AlbumTitle.WidthRequest = SizeUtils.GetWidthSize(382);
-            AlbumTitle.HeightRequest = SizeUtils.GetHeightSize(28);
-            AlbumTitle.Margin = new Thickness(SizeUtils.GetWidthSize(32), SizeUtils.GetHeightSize(4), SizeUtils.GetWidthSize(32), 0);
+            SongTitle.Margin = new Thickness(w32, SizeUtils.GetHeightSize(18), w32, 0);
+
+            Artist.WidthRequest = w382;
+            Artist.HeightRequest = h28;
+            Artist.Margin = new Thickness(w32, SizeUtils.GetHeightSize(12), w32, 0);
+            Artist.FontSize = SizeUtils.GetFontSize(24);
+
+            AlbumTitle.WidthRequest = w382;
+            AlbumTitle.HeightRequest = h28;
+            AlbumTitle.Margin = new Thickness(w32, SizeUtils.GetHeightSize(4), w32, 0);
             AlbumTitle.FontSize = SizeUtils.GetFontSize(24);
-            AlbumTitle.On<Xamarin.Forms.PlatformConfiguration.Tizen>().SetFontWeight(FontWeight.Light);
+
         }
 
         /// <summary>
@@ -114,7 +166,28 @@ namespace TVMediaHub.Tizen.Views
         /// <param name="e">A Focus event's argument</param>
         private void OnItemFocused(object sender, FocusEventArgs e)
         {
-            DbgPort.D("MusicItem is focused : " + (MusicInfo.MediaContentInformation as AudioInformation).Title);
+            Easing easing = new Easing(EasingFunction.EasyIn1);
+            TextArea.LayoutTo(TextAreaFocusedBounds, 300, easing);
+
+            AlbumCover.ScaleTo(1.0597, 300, easing);
+            TextArea.BackgroundColor = Color.FromHex("ffffff");
+
+            SongTitle.On<Xamarin.Forms.PlatformConfiguration.Tizen>().SetFontWeight(FontWeight.Medium);
+            SongTitle.TextColor = Color.FromHex("000000");
+            SlideEffect.SetHasSlide(SongTitle, true);
+
+
+            Artist.On<Xamarin.Forms.PlatformConfiguration.Tizen>().SetFontWeight(FontWeight.Medium);
+            Artist.Opacity = 0.8;
+            Artist.TextColor = Color.FromHex("000000");
+            SlideEffect.SetHasSlide(Artist, true);
+
+            AlbumTitle.On<Xamarin.Forms.PlatformConfiguration.Tizen>().SetFontWeight(FontWeight.Normal);
+            AlbumTitle.Opacity = 0.7;
+            AlbumTitle.TextColor = Color.FromHex("000000");
+            SlideEffect.SetHasSlide(AlbumTitle, true);
+
+            OnFocusedEventHandler?.Invoke(sender, e);
         }
 
         /// <summary>
@@ -124,7 +197,25 @@ namespace TVMediaHub.Tizen.Views
         /// <param name="e">A Focus event's argument</param>
         private void OnItemUnfocused(object sender, FocusEventArgs e)
         {
-            DbgPort.D("MusicItem is unfocused : " + (MusicInfo.MediaContentInformation as AudioInformation).Title);
+            Easing easing = new Easing(EasingFunction.EasyIn2);
+            TextArea.LayoutTo(TextAreaNormalBounds, 300, easing);
+
+            AlbumCover.ScaleTo(1.0, 300, easing);
+            TextArea.BackgroundColor = Color.FromHex("171717");
+
+            SongTitle.On<Xamarin.Forms.PlatformConfiguration.Tizen>().SetFontWeight(FontWeight.Normal);
+            SongTitle.TextColor = Color.FromHex("ffffff");
+            SlideEffect.SetHasSlide(SongTitle, false);
+
+            Artist.On<Xamarin.Forms.PlatformConfiguration.Tizen>().SetFontWeight(FontWeight.Normal);
+            Artist.Opacity = 0.6;
+            Artist.TextColor = Color.FromHex("ffffff");
+            SlideEffect.SetHasSlide(Artist, false);
+
+            AlbumTitle.On<Xamarin.Forms.PlatformConfiguration.Tizen>().SetFontWeight(FontWeight.Light);
+            AlbumTitle.Opacity = 0.5;
+            AlbumTitle.TextColor = Color.FromHex("ffffff");
+            SlideEffect.SetHasSlide(AlbumTitle, false);
         }
 
         /// <summary>
@@ -144,5 +235,6 @@ namespace TVMediaHub.Tizen.Views
                 AlbumTitle.Text = info.Album;
             }
         }
+
     }
 }
\ No newline at end of file
diff --git a/TVMediaHub/TVMediaHub.Tizen/Views/MusicTab.xaml b/TVMediaHub/TVMediaHub.Tizen/Views/MusicTab.xaml
index de3b73f..445a45d 100755
--- a/TVMediaHub/TVMediaHub.Tizen/Views/MusicTab.xaml
+++ b/TVMediaHub/TVMediaHub.Tizen/Views/MusicTab.xaml
@@ -33,9 +33,9 @@
                            RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.0}">
         </Views:MusicPlayer>
         <ScrollView x:Name="MusicTabScrollView"
-                    RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=1}"
-                    RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.7}"
-                    RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.3}"
+                    RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.8545}"
+                    RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.7386}"
+                    RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.2614}"
                     Orientation="Horizontal" IsVisible="False">
             <StackLayout x:Name="MusicContentView"
                          Orientation="Horizontal"
-- 
2.7.4