Modify Home list menu layout
authorHyerim Kim <rimi.kim@samsung.com>
Fri, 10 Mar 2017 11:52:14 +0000 (20:52 +0900)
committerChulSeung Kim <charles0.kim@samsung.com>
Thu, 8 Jun 2017 09:34:46 +0000 (18:34 +0900)
Change-Id: I3699f0dbe9f8bbfd619bc896c5add462cc318af4
Signed-off-by: Hyerim Kim <rimi.kim@samsung.com>
TVHome/TVHome/Controls/SubPanelAllAppsButton.xaml [new file with mode: 0755]
TVHome/TVHome/Controls/SubPanelAllAppsButton.xaml.cs [new file with mode: 0755]
TVHome/TVHome/Controls/SubPanelButton.xaml
TVHome/TVHome/Controls/SubPanelButton.xaml.cs [changed mode: 0644->0755]
TVHome/TVHome/Controls/SubPanelReservedButton.xaml
TVHome/TVHome/Controls/SubPanelReservedButton.xaml.cs
TVHome/TVHome/TVHome.csproj
TVHome/TVHome/Views/MainPage.xaml
TVHome/TVHome/Views/SubPanel.xaml [changed mode: 0644->0755]
TVHome/TVHome/Views/SubPanel.xaml.cs

diff --git a/TVHome/TVHome/Controls/SubPanelAllAppsButton.xaml b/TVHome/TVHome/Controls/SubPanelAllAppsButton.xaml
new file mode 100755 (executable)
index 0000000..02cad5a
--- /dev/null
@@ -0,0 +1,50 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<Controls:PanelButton xmlns="http://xamarin.com/schemas/2014/forms"
+                      xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+                      xmlns:Controls="clr-namespace:TVHome.Controls"
+                      x:Class="TVHome.Controls.SubPanelAllAppsButton">
+  <RelativeLayout>
+    <BoxView x:Name = "ButtonBox"
+             HeightRequest="186"
+             WidthRequest="138"
+             Opacity="0"/>
+    <Image x:Name="ButtonBgImage"
+           RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToView, ElementName=ButtonBox, Property=Width, Factor=0}"
+           RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToView, ElementName=ButtonBox, Property=Height, Factor=0}"
+           RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToView, ElementName=ButtonBox, Property=Height, Factor=0.7419}"
+           RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToView, ElementName=ButtonBox, Property=Width, Factor=1}"
+           Source="img_tizen_home_list_bg_normal.png" />
+    <Image x:Name="ButtonImage"
+           RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToView, ElementName=ButtonBgImage, Property=Width, Factor=0.3116}"
+           RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToView, ElementName=ButtonBgImage, Property=Height, Factor=0.3116}"
+           RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToView, ElementName=ButtonBgImage, Property=Height, Factor=0.3768}"
+           RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToView, ElementName=ButtonBgImage, Property=Width, Factor=0.3768}"
+           Source="{Binding CurrentStateDescription.IconPath}" />
+    <Image x:Name="ButtonDimmedImage"
+             RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToView, ElementName=ButtonBgImage, Property=Width, Factor=0}"
+             RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToView, ElementName=ButtonBgImage, Property=Height, Factor=0}"
+             RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToView, ElementName=ButtonBgImage, Property=Height, Factor=1}"
+             RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToView, ElementName=ButtonBgImage, Property=Width, Factor=1}"
+             Source="img_tizen_home_list_dim_apps.png" />
+    <Label x:Name="ButtonTitle"
+           RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToView, ElementName=ButtonBox, Property=Width, Factor=0}"
+           RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToView, ElementName=ButtonBox, Property=Height, Factor=0.8387}"
+           RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToView, ElementName=ButtonBox, Property=Height, Factor=0.1613}"
+           RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToView, ElementName=ButtonBox, Property=Width, Factor=1}"
+           Opacity="0.6"
+           TextColor="White"
+           FontSize="52"
+           LineBreakMode="TailTruncation"
+           HorizontalTextAlignment="Center"
+           Text="{Binding CurrentStateDescription.Label}" />
+    <Button x:Name = "ButtonFocusArea"
+           RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToView, ElementName=ButtonBox, Property=Width, Factor=0}"
+           RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToView, ElementName=ButtonBox, Property=Height, Factor=0}"
+           RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToView, ElementName=ButtonBox, Property=Height, Factor=1}"
+           RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToView, ElementName=ButtonBox, Property=Width, Factor=1}"
+            Focused="OnFocused"
+            Unfocused="OnUnfocused"
+            Clicked="OnClicked"
+            Opacity="0" />
+  </RelativeLayout>
+</Controls:PanelButton>
\ No newline at end of file
diff --git a/TVHome/TVHome/Controls/SubPanelAllAppsButton.xaml.cs b/TVHome/TVHome/Controls/SubPanelAllAppsButton.xaml.cs
new file mode 100755 (executable)
index 0000000..4167a13
--- /dev/null
@@ -0,0 +1,69 @@
+/*
+ * Copyright (c) 2017 Samsung Electronics Co., Ltd
+ *
+ * Licensed under the Flora License, Version 1.1 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://floralicense.org/license/
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+using System;
+
+using LibTVRefCommmonPortable.Utils;
+
+using Xamarin.Forms;
+
+namespace TVHome.Controls
+{
+    public partial class SubPanelAllAppsButton : PanelButton
+    {
+        public SubPanelAllAppsButton()
+        {
+            InitializeComponent();
+        }
+
+        public override async void OnClicked(object sender, EventArgs e)
+        {
+            if (OnClickedCommand != null)
+            {
+                OnClickedCommand.Execute("");
+            }
+
+            await View.FadeTo(0.99, 300);
+        }
+
+        public override async void OnFocused(object sender, FocusEventArgs e)
+        {
+            DebuggingUtils.Dbg(View.Width.ToString() + ", " + View.Height.ToString());
+            if (OnFocusedCommand != null)
+            {
+                OnFocusedCommand.Execute("");
+            }
+
+#pragma warning disable CS4014
+            ButtonTitle.FadeTo(0.8, 300);
+            ButtonTitle.TranslateTo(0, 22, 300);
+            ButtonImage.ScaleTo(1.3, 300);
+#pragma warning restore CS4014
+            await ButtonBgImage.ScaleTo(1.3, 300);
+        }
+
+        public override async void OnUnfocused(object sender, FocusEventArgs e)
+        {
+            DebuggingUtils.Dbg(View.Width.ToString() + ", " + View.Height.ToString());
+#pragma warning disable CS4014
+            ButtonTitle.FadeTo(0.6, 300);
+            ButtonTitle.TranslateTo(0, 0, 300);
+            ButtonImage.ScaleTo(1.0, 300);
+#pragma warning restore CS4014
+            await ButtonBgImage.ScaleTo(1, 300);
+        }
+    }
+}
index 27c56e7..c948ee5 100755 (executable)
@@ -3,10 +3,10 @@
                       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"\r
                       xmlns:Controls="clr-namespace:TVHome.Controls"\r
                       x:Class="TVHome.Controls.SubPanelButton">\r
-    <RelativeLayout Opacity="0.38">\r
+    <RelativeLayout>\r
         <BoxView x:Name = "ButtonBox"\r
-                 RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=1}"\r
-                 RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.7419}"\r
+                 HeightRequest="186"\r
+                 WidthRequest="138"\r
                  Opacity="0"/>\r
         <Image x:Name="ButtonImage"\r
                RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToView, ElementName=ButtonBox, Property=Width, Factor=0}"\r
@@ -27,7 +27,7 @@
                RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToView, ElementName=ButtonBox, Property=Width, Factor=1}"\r
                Opacity="0.6"\r
                TextColor="White"\r
-               FontSize="26"\r
+               FontSize="52"\r
                LineBreakMode="TailTruncation"\r
                HorizontalTextAlignment="Center"\r
                Text="{Binding CurrentStateDescription.Label}" />\r
old mode 100644 (file)
new mode 100755 (executable)
index e9c917f..0b7e367
@@ -50,18 +50,18 @@ namespace TVHome.Controls
 \r
 #pragma warning disable CS4014\r
             ButtonTitle.FadeTo(0.8, 300);\r
-            View.FadeTo(0.8, 300);\r
+            ButtonTitle.TranslateTo(0, 22, 300);\r
 #pragma warning restore CS4014\r
-            await View.ScaleTo(1.3, 300);\r
+            await ButtonImage.ScaleTo(1.3, 300);\r
         }\r
 \r
         public override async void OnUnfocused(object sender, FocusEventArgs e)\r
         {\r
 #pragma warning disable CS4014\r
             ButtonTitle.FadeTo(0.6, 300);\r
-            View.FadeTo(0.6, 300);\r
+            ButtonTitle.TranslateTo(0, 0, 300);\r
 #pragma warning restore CS4014\r
-            await View.ScaleTo(1, 300);\r
+            await ButtonImage.ScaleTo(1, 300);\r
         }\r
     }\r
 }
\ No newline at end of file
index 4b5c49c..26ecd62 100755 (executable)
@@ -5,8 +5,8 @@
                       x:Class="TVHome.Controls.SubPanelReservedButton">
     <RelativeLayout>
         <BoxView x:Name = "ButtonBox"
-                 RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=1}"
-                 RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.7419}"
+                 HeightRequest="186"
+                 WidthRequest="138"
                  Opacity="0"/>
         <Image x:Name="ButtonBgImage"
                RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToView, ElementName=ButtonBox, Property=Width, Factor=0}"
index 83c1a19..2fad076 100755 (executable)
@@ -49,23 +49,21 @@ namespace TVHome.Controls
             }
 
 #pragma warning disable CS4014
-            View.FadeTo(0.8, 300);
             ButtonTitle.FadeTo(0.8, 300);
-            ButtonBgImage.ScaleTo(1.32, 300);
+            ButtonTitle.TranslateTo(0, 22, 300);
+            ButtonImage.ScaleTo(1.3, 300);
 #pragma warning restore CS4014
-            //await View.ScaleTo(1.3, 300);
-            await ButtonImage.ScaleTo(1.32, 300);
+            await ButtonBgImage.ScaleTo(1.3, 300);
         }
 
         public override async void OnUnfocused(object sender, FocusEventArgs e)
         {
 #pragma warning disable CS4014
-            View.FadeTo(0.6, 300);
-            ButtonTitle.FadeTo(0.6, 300);
-            ButtonBgImage.ScaleTo(1, 300);
+            ButtonTitle.FadeTo(0.8, 300);
+            ButtonTitle.TranslateTo(0, 0, 300);
+            ButtonImage.ScaleTo(1, 300);
 #pragma warning restore CS4014
-            //await View.ScaleTo(1, 300);
-            await ButtonImage.ScaleTo(1, 300);
+            await ButtonBgImage.ScaleTo(1, 300);
         }
     }
 }
\ No newline at end of file
index 9f65c3d..c44dc6f 100755 (executable)
@@ -38,6 +38,9 @@
       <DependentUpon>MainPanelButton.xaml</DependentUpon>\r
     </Compile>\r
     <Compile Include="Controls\PanelButton.cs" />\r
+    <Compile Include="Controls\SubPanelAllAppsButton.xaml.cs">\r
+      <DependentUpon>SubPanelAllAppsButton.xaml</DependentUpon>\r
+    </Compile>\r
     <Compile Include="Controls\SubPanelReservedButton.xaml.cs">\r
       <DependentUpon>SubPanelReservedButton.xaml</DependentUpon>\r
     </Compile>\r
       <SubType>Designer</SubType>\r
     </EmbeddedResource>\r
   </ItemGroup>\r
+  <ItemGroup>\r
+    <EmbeddedResource Include="Controls\SubPanelAllAppsButton.xaml">\r
+      <Generator>MSBuild:UpdateDesignTimeXaml</Generator>\r
+      <SubType>Designer</SubType>\r
+    </EmbeddedResource>\r
+  </ItemGroup>\r
   <Import Project="$(MSBuildExtensionsPath32)\Microsoft\Portable\$(TargetFrameworkVersion)\Microsoft.Portable.CSharp.targets" />\r
   <Import Project="..\..\packages\Xamarin.Forms.2.3.3.193\build\portable-win+net45+wp80+win81+wpa81+MonoAndroid10+Xamarin.iOS10+xamarinmac20\Xamarin.Forms.targets" Condition="Exists('..\..\packages\Xamarin.Forms.2.3.3.193\build\portable-win+net45+wp80+win81+wpa81+MonoAndroid10+Xamarin.iOS10+xamarinmac20\Xamarin.Forms.targets')" />\r
   <Target Name="EnsureNuGetPackageBuildImports" BeforeTargets="PrepareForBuild">\r
index c6bf648..f4ede16 100755 (executable)
             </Views:SubThumbnailPanel>
 
             <Views:SubPanel x:Name="AppsSubPanel"
-                            RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.224}"
+                            RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.2370}"
                             RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1}"
-                            RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.89}"
+                            RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.8981}"
                             ItemsSource="{Binding AppList}">
             </Views:SubPanel>
 
             <Views:SubPanel x:Name="SettingsSubPanel"
-                            RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.224}"
+                            RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.2370}"
                             RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1}"
-                            RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.89}"
+                            RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.8981}"
                             ItemsSource="{Binding SettingsList}">
                 <Views:SubPanel.ItemTemplate>
                     <DataTemplate>
old mode 100644 (file)
new mode 100755 (executable)
index ea4d1c1..543ef6b
@@ -8,7 +8,7 @@
                 HorizontalOptions="Center">\r
         <StackLayout x:Name="PanelButtonStack"\r
                      Orientation="Horizontal"\r
-                     Padding="96,28,96,28"\r
+                     Padding="96,22,96,26"\r
                      Spacing="78">\r
         </StackLayout>\r
     </ScrollView>\r
index 79226f3..48ae9a1 100755 (executable)
@@ -50,9 +50,13 @@ namespace TVHome.Views
             {\r
                 PanelButton button;\r
 \r
-                if (item.StateDescriptions["default"].Label.Equals("All apps") || item.StateDescriptions["default"].Label.Equals("Media Hub")\r
+                if (item.StateDescriptions["default"].Label.Equals("All apps")\r
                     || item.StateDescriptions["default"].Label.Equals("Add pin"))\r
                 {\r
+                    button = new SubPanelAllAppsButton();\r
+                }\r
+                else if (item.StateDescriptions["default"].Label.Equals("Media Hub"))\r
+                {\r
                     button = new SubPanelReservedButton();\r
                 }\r
                 else\r
@@ -96,11 +100,7 @@ namespace TVHome.Views
             foreach (var item in PanelButtonStack.Children)\r
             {\r
                 item.IsEnabled = true;\r
-            }\r
-\r
-            foreach (var item in PanelButtonStack.Children)\r
-            {\r
-                item.FindByName<Image>("ButtonDimmedImage").Opacity = 1;\r
+                item.FindByName<Image>("ButtonDimmedImage").Opacity = 0.99;\r
             }\r
 \r
 #pragma warning disable CS4014\r
@@ -128,7 +128,7 @@ namespace TVHome.Views
             }\r
 \r
 #pragma warning disable CS4014\r
-            this.TranslateTo(0, -140, 300);\r
+            this.TranslateTo(0, -146, 300);\r
 #pragma warning restore CS4014\r
             await this.FadeTo(0.99, 300);\r
         }\r