From: k.stepaniuk <k.stepaniuk@samsung.com>
Date: Fri, 27 Nov 2020 15:15:31 +0000 (+0100)
Subject: Styling buttons
X-Git-Tag: accepted/tizen/unified/20210915.100113~133
X-Git-Url: http://review.tizen.org/git/?a=commitdiff_plain;h=cc33dbd447cc43182790f6111a7f03d059ce10b9;p=profile%2Fiot%2Fapps%2Fdotnet%2Ffitness.git

Styling buttons

Signed-off-by: k.stepaniuk <k.stepaniuk@samsung.com>
---

diff --git a/Fitness/FitnessApp.cs b/Fitness/FitnessApp.cs
index 80a889c..a1508f1 100644
--- a/Fitness/FitnessApp.cs
+++ b/Fitness/FitnessApp.cs
@@ -15,8 +15,7 @@ namespace Fitness
 
         public void Initialize()
         {
-            //NavigationService.Instance.NavigateToMainView();
-            NavigationService.Instance.NavigateToExercisingView();
+            NavigationService.Instance.NavigateToMainView();
         }
 
         protected override void OnCreate()
diff --git a/Fitness/Services/NavigationService.cs b/Fitness/Services/NavigationService.cs
index 9fde18d..5bda695 100644
--- a/Fitness/Services/NavigationService.cs
+++ b/Fitness/Services/NavigationService.cs
@@ -57,5 +57,10 @@ namespace Fitness.Services
         {
             navigation.Push(new SummaryView());
         }
+
+        public void Pop()
+        {
+            navigation.Pop();
+        }
     }
 }
diff --git a/Fitness/ViewModels/ExercisingViewModel.cs b/Fitness/ViewModels/ExercisingViewModel.cs
index cc4d4f0..4600bdd 100644
--- a/Fitness/ViewModels/ExercisingViewModel.cs
+++ b/Fitness/ViewModels/ExercisingViewModel.cs
@@ -1,7 +1,7 @@
-using Fitness.Models;
 using System;
 using System.Windows.Input;
 using Tizen.NUI.Binding;
+using Fitness.Models;
 
 namespace Fitness.ViewModels
 {
@@ -11,6 +11,8 @@ namespace Fitness.ViewModels
         {
             PauseResumeWorkout = new Command(TriggerPauseResumeWorkout);
             EndWorkout = new Command(ExecuteEndWorkout);
+            Prev = new Command(ExecutePrev);
+            Next = new Command(ExecuteNext);
             State = WorkoutState.Playing;
         }
 
@@ -60,6 +62,16 @@ namespace Fitness.ViewModels
         public string PreviewVideoUrl { get; private set; }
 
         /// <summary>
+        /// Gets Prev Command.
+        /// </summary>
+        public ICommand Prev { get; private set; }
+
+        /// <summary>
+        /// Gets Next Command.
+        /// </summary>
+        public ICommand Next { get; private set; }
+
+        /// <summary>
         /// Gets PauseWorkout Command.
         /// </summary>
         public ICommand PauseResumeWorkout { get; private set; }
@@ -92,7 +104,15 @@ namespace Fitness.ViewModels
 
         private void ExecuteEndWorkout()
         {
-            //NavigationService.Instance.Pop();
+            Services.NavigationService.Instance.Pop();
+        }
+
+        private void ExecutePrev()
+        {
+        }
+
+        private void ExecuteNext()
+        {
         }
     }
 }
diff --git a/Fitness/Views/BarView.xaml.cs b/Fitness/Views/BarView.xaml.cs
index 2413b42..91b52af 100644
--- a/Fitness/Views/BarView.xaml.cs
+++ b/Fitness/Views/BarView.xaml.cs
@@ -1,10 +1,42 @@
-namespace Fitness.Views
+using Tizen.NUI.Binding;
+
+namespace Fitness.Views
 {
     public partial class BarView
     {
+        public static readonly BindableProperty PrevCommandProperty = BindableProperty.Create(
+            "PrevCommand",
+            typeof(Command),
+            typeof(BarView),
+            null,
+            propertyChanged: OnPrevCommandChanged);
+
+        public static readonly BindableProperty NextCommandProperty = BindableProperty.Create(
+            "NextCommand",
+            typeof(Command),
+            typeof(BarView),
+            null,
+            propertyChanged: OnNextCommandChanged);
+
         public BarView()
         {
             InitializeComponent();
         }
+
+        private static void OnPrevCommandChanged(BindableObject bindable, object oldValue, object newValue)
+        {
+            if (bindable is BarView view && newValue is Command command)
+            {
+                view.prev.Command = command;
+            }
+        }
+
+        private static void OnNextCommandChanged(BindableObject bindable, object oldValue, object newValue)
+        {
+            if (bindable is BarView view && newValue is Command command)
+            {
+                view.next.Command = command;
+            }
+        }
     }
 }
diff --git a/Fitness/Views/ExercisingView.xaml.cs b/Fitness/Views/ExercisingView.xaml.cs
index 31eecec..e62fb07 100644
--- a/Fitness/Views/ExercisingView.xaml.cs
+++ b/Fitness/Views/ExercisingView.xaml.cs
@@ -8,37 +8,29 @@ namespace Fitness.Views
 {
     public partial class ExercisingView : Fitness.Controls.Page
     {
-        struct Coordinates
-        {
-            public Position Position;
-            public Size Size;
-        }
-
+        public static readonly BindableProperty IsPlayingProperty = BindableProperty.Create(
+            "IsPlaying",
+            typeof(bool),
+            typeof(ExercisingView),
+            true,
+            propertyChanged: OnIsPlayingChanged);
+
+        private const int TransitionTime = 500;
         private CancellationTokenSource source;
         private bool isInitialized = false;
-        private const int TransitionTime = 1_000;
         private (Coordinates Preview, Coordinates Camera) playing;
         private (Coordinates Preview, Coordinates Camera) pause =
         (
-            Preview: new Coordinates() //fixed for now
+            Preview: new Coordinates() // fixed for now
             {
                 Position = new Position(0, 0),
                 Size = new Size(1920, 1080),
             },
-            Camera: new Coordinates() //fixed for now
+            Camera: new Coordinates() // fixed for now
             {
                 Position = new Position(1464, 138),
                 Size = new Size(392, 220),
-            }
-        );
-
-        public static readonly BindableProperty IsPlayingProperty =
-            BindableProperty.Create(
-                "IsPlaying",
-                typeof(bool),
-                typeof(ExercisingView),
-                true,
-                propertyChanged: OnIsPlayingChanged);
+            });
 
         public ExercisingView()
         {
@@ -47,7 +39,7 @@ namespace Fitness.Views
             PlayingView.PreviewStub.Relayout += OnPlayingViewRelayout;
         }
 
-        public static void OnIsPlayingChanged(BindableObject bindable, object oldValue, object newValue)
+        private static void OnIsPlayingChanged(BindableObject bindable, object oldValue, object newValue)
         {
             if (newValue is bool isPlaying && bindable is ExercisingView view)
             {
@@ -55,6 +47,43 @@ namespace Fitness.Views
             }
         }
 
+        private static Task Animate(View view, Coordinates from, Coordinates to, CancellationToken token)
+        {
+            Task Scale()
+            {
+                view.PivotPoint = new Position(0, 0);
+                float scale = view.ScaleX * (to.Size.Width / from.Size.Width);
+                var animation = new Animation(TransitionTime);
+                animation.AnimateTo(view, "ScaleX", scale, new AlphaFunction(AlphaFunction.BuiltinFunctions.Linear));
+                animation.AnimateTo(view, "ScaleY", scale, new AlphaFunction(AlphaFunction.BuiltinFunctions.Linear));
+                return animation.PlayAndDispose(token);
+            }
+
+            Task Move()
+            {
+                var frames = new KeyFrames();
+                frames.Add(0.0f, from.Position);
+                frames.Add(1.0f, to.Position);
+
+                var animation = new Animation(TransitionTime);
+                animation.AnimateBetween(view, nameof(from.Position), frames);
+                return animation.PlayAndDispose(token);
+            }
+
+            return Task.WhenAll(Scale(), Move());
+        }
+
+        private static Position GetPosition(View view)
+        {
+            Position position = view.Position;
+            if (view.GetParent() is View parent)
+            {
+                position += GetPosition(parent);
+            }
+
+            return position;
+        }
+
         private async Task TriggerStates(bool isPlaying)
         {
             if (isInitialized)
@@ -145,41 +174,10 @@ namespace Fitness.Views
             }
         }
 
-        private static Task Animate(View view, Coordinates from, Coordinates to, CancellationToken token)
-        {
-            Task Scale()
-            {
-                view.PivotPoint = new Position(0, 0);
-                float scale = view.ScaleX * (to.Size.Width / from.Size.Width);
-                var animation = new Animation(TransitionTime);
-                animation.AnimateTo(view, "ScaleX", scale, new AlphaFunction(AlphaFunction.BuiltinFunctions.Linear));
-                animation.AnimateTo(view, "ScaleY", scale, new AlphaFunction(AlphaFunction.BuiltinFunctions.Linear));
-                return animation.PlayAndDispose(token);
-            }
-
-            Task Move()
-            {
-                var frames = new KeyFrames();
-                frames.Add(0.0f, from.Position);
-                frames.Add(1.0f, to.Position);
-
-                var animation = new Animation(TransitionTime);
-                animation.AnimateBetween(view, nameof(from.Position), frames);
-                return animation.PlayAndDispose(token);
-            }
-
-            return Task.WhenAll(Scale(), Move());
-        }
-
-        private static Position GetPosition(View view)
+        private struct Coordinates
         {
-            Position position = view.Position;
-            if (view.GetParent() is View parent)
-            {
-                position += GetPosition(parent);
-            }
-
-            return position;
+            public Position Position;
+            public Size Size;
         }
     }
 }
diff --git a/Fitness/Views/Styles/Buttons.cs b/Fitness/Views/Styles/Buttons.cs
index 43a6793..6c5103b 100644
--- a/Fitness/Views/Styles/Buttons.cs
+++ b/Fitness/Views/Styles/Buttons.cs
@@ -45,12 +45,18 @@ namespace Fitness.Views.Styles
 
         public static ButtonStyle Previous => new ButtonStyle
         {
-            BackgroundColor = Color.Transparent,
+            BackgroundImage = new Selector<string>
+            {
+                Normal = NUIApplication.Current.DirectoryInfo.Resource + "styles/button/button_regular.png",
+                Pressed = NUIApplication.Current.DirectoryInfo.Resource + "styles/button/button_pressed.png",
+                Disabled = NUIApplication.Current.DirectoryInfo.Resource + "styles/button/button_disabled.png",
+            },
             Text = new TextLabelStyle
             {
                 PixelSize = 24.0f,
                 TextColor = Color.Black,
                 FontFamily = GetNavigationFont(),
+                HorizontalAlignment = HorizontalAlignment.Begin,
             },
             Icon = new ImageViewStyle
             {
@@ -61,17 +67,24 @@ namespace Fitness.Views.Styles
                     Disabled = NUIApplication.Current.DirectoryInfo.Resource + "styles/button/12_icon_back_arrow_active.png",
                 },
             },
+            TextPadding = new Extents(20, 0, 0, 0),
             IconRelativeOrientation = Button.IconOrientation.Left,
         };
 
         public static ButtonStyle Next => new ButtonStyle
         {
-            BackgroundColor = Color.Transparent,
+            BackgroundImage = new Selector<string>
+            {
+                Normal = NUIApplication.Current.DirectoryInfo.Resource + "styles/button/button_regular.png",
+                Pressed = NUIApplication.Current.DirectoryInfo.Resource + "styles/button/button_pressed.png",
+                Disabled = NUIApplication.Current.DirectoryInfo.Resource + "styles/button/button_disabled.png",
+            },
             Text = new TextLabelStyle
             {
                 PixelSize = 24.0f,
                 TextColor = Color.Black,
                 FontFamily = GetNavigationFont(),
+                HorizontalAlignment = HorizontalAlignment.End,
             },
             Icon = new ImageViewStyle
             {
@@ -82,6 +95,7 @@ namespace Fitness.Views.Styles
                     Disabled = NUIApplication.Current.DirectoryInfo.Resource + "styles/button/12_icon_back_arrow_active_reverse.png",
                 },
             },
+            IconPadding = new Extents(20, 0, 0, 0),
             IconRelativeOrientation = Button.IconOrientation.Right,
         };
 
@@ -119,6 +133,52 @@ namespace Fitness.Views.Styles
             IconRelativeOrientation = Button.IconOrientation.Left,
         };
 
+        public static ButtonStyle ReviewMovement => new ButtonStyle
+        {
+            BackgroundColor = Color.Transparent,
+            Text = new TextLabelStyle
+            {
+                PixelSize = 32.0f,
+                EnableMarkup = true,
+                TextColor = new Selector<Color>
+                {
+                    Normal = new Color(0.0f, 20.0f / 255.0f, 71 / 255.0f, 1.0f),
+                    Pressed = new Color(41.0f / 255.0f, 91.0f / 255.0f, 178 / 255.0f, 1.0f),
+                },
+                FontFamily = GetNavigationFont(),
+                HorizontalAlignment = HorizontalAlignment.Begin,
+            },
+            Icon = new ImageViewStyle
+            {
+                ResourceUrl = new Selector<string>
+                {
+                    Normal = NUIApplication.Current.DirectoryInfo.Resource + "styles/button/icon-feather-repeat.png",
+                    Pressed = NUIApplication.Current.DirectoryInfo.Resource + "styles/button/icon-feather-repeat.png",
+                    Disabled = NUIApplication.Current.DirectoryInfo.Resource + "styles/button/icon-feather-repeat.png",
+                },
+            },
+            IconPadding = new Extents(76, 0, 0, 0),
+            TextPadding = new Extents(24, 0, 0, 0),
+            IconRelativeOrientation = Button.IconOrientation.Left,
+        };
+
+        public static ButtonStyle Transparent => new ButtonStyle
+        {
+            BackgroundColor = Color.Transparent,
+            Text = new TextLabelStyle
+            {
+                PixelSize = 32.0f,
+                EnableMarkup = true,
+                TextColor = new Selector<Color>
+                {
+                    Normal = new Color(0.0f, 20.0f / 255.0f, 71 / 255.0f, 1.0f),
+                    Pressed = new Color(41.0f / 255.0f, 91.0f / 255.0f, 178 / 255.0f, 1.0f),
+                },
+                FontFamily = GetNavigationFont(),
+                HorizontalAlignment = HorizontalAlignment.Center,
+            },
+        };
+
         private static Selector<string> GetNavigationFont()
         {
             return new Selector<string>
diff --git a/Fitness/res/layout/BarView.xaml b/Fitness/res/layout/BarView.xaml
index a4377b0..835a6ff 100644
--- a/Fitness/res/layout/BarView.xaml
+++ b/Fitness/res/layout/BarView.xaml
@@ -6,34 +6,26 @@
   xmlns:ctrl="clr-namespace:Fitness.Controls"
   xmlns:views="clr-namespace:Fitness.Views"
   xmlns:nui="clr-namespace:Tizen.NUI.Components;assembly=Tizen.NUI.Components"
-  xmlns:style="clr-namespace:Fitness.Views.Styles"
+  xmlns:styles="clr-namespace:Fitness.Views.Styles"
+  xmlns:behaviors="clr-namespace:Fitness.Views.Behaviors"
   WidthResizePolicy="FillToParent"
   Size="{views:SizeInUnits Height=30}"
   x:Name="Root">
-    <ImageView Position="{views:PositionInUnits X=17, Y=5}"
-                Size="{views:SizeInUnits Width=20, Height=20}"
-                ResourceUrl="*Resource*/layout/images/left_arrow.png"/>
-    <TextLabel Text="previous"
-                TextColor="#000C2B"
-                PixelSize="24"
-                HorizontalAlignment="Begin"
-                Position="{views:PositionInUnits X=40, Y=11}"
-                Margin="{views:ExtentsInUnits Start=40, Top=11}"
-                Size="{views:SizeInUnits Width=28, Height=9}"/>
+    <nui:Button Text="previous"
+                x:Name="prev"
+                Position="{views:PositionInUnits X=17, Y=10}"
+                Size="{views:SizeInUnits Width=64, Height=20}"
+                behaviors:StyleSetter.Style="{x:Static styles:Buttons.Previous}"/>
     <TextLabel BindingContext="{Binding Source={x:Reference Root}, Path=BindingContext}"
                 Text="{Binding Title}"
                 TextColor="#000C2B"
                 PixelSize="32"
                 HorizontalAlignment="Center"
-                Position="{views:PositionInUnits X=220, Y=10}"
+                Position="{views:PositionInUnits X=220, Y=15}"
                 Size="{views:SizeInUnits Width=40, Height=10}"/>
-    <TextLabel Text="next"
-                TextColor="#000C2B"
-                PixelSize="24"
-                HorizontalAlignment="End"
-                Position="{views:PositionInUnits X=400, Y=11}"
-                Size="{views:SizeInUnits Width=40, Height=9}"/>
-    <ImageView Position="{views:PositionInUnits X=443, Y=5}"
-                Size="{views:SizeInUnits Width=20, Height=20}"
-                ResourceUrl="*Resource*/layout/images/right_arrow.png"/>
+    <nui:Button Text="next"
+                x:Name="next"
+                Position="{views:PositionInUnits X=400, Y=10}"
+                Size="{views:SizeInUnits Width=64, Height=20}"
+                behaviors:StyleSetter.Style="{x:Static styles:Buttons.Next}"/>
 </View>
\ No newline at end of file
diff --git a/Fitness/res/layout/ExercisingView.xaml b/Fitness/res/layout/ExercisingView.xaml
index c1a58a1..b3ea75e 100644
--- a/Fitness/res/layout/ExercisingView.xaml
+++ b/Fitness/res/layout/ExercisingView.xaml
@@ -22,4 +22,8 @@
     <!--Layer-->
     <views:PauseView x:Name="PauseView"
                      BindingContext="{Binding Source={x:Reference Root}, Path=BindingContext}"/>
+    <!--Layer-->
+    <views:BarView BindingContext="{Binding Source={x:Reference Root}, Path=BindingContext}"
+                   PrevCommand="{Binding Prev}"
+                   NextCommand="{Binding Next}"/>
 </ctrl:Page>
diff --git a/Fitness/res/layout/PauseView.xaml b/Fitness/res/layout/PauseView.xaml
index efc448f..bad07d8 100644
--- a/Fitness/res/layout/PauseView.xaml
+++ b/Fitness/res/layout/PauseView.xaml
@@ -6,7 +6,8 @@
   xmlns:ctrl="clr-namespace:Fitness.Controls"
   xmlns:views="clr-namespace:Fitness.Views"
   xmlns:nui="clr-namespace:Tizen.NUI.Components;assembly=Tizen.NUI.Components"
-  xmlns:style="clr-namespace:Fitness.Views.Styles"
+  xmlns:styles="clr-namespace:Fitness.Views.Styles"
+  xmlns:behaviors="clr-namespace:Fitness.Views.Behaviors"
   HeightResizePolicy="FillToParent" 
   WidthResizePolicy="FillToParent"  
   x:Name="Root">
@@ -15,18 +16,19 @@
         <View.Layout>
             <LinearLayout LinearOrientation="Vertical"/>
         </View.Layout>
-        <!--Bar-->
-        <views:BarView BindingContext="{Binding Source={x:Reference Root}, Path=BindingContext}"/>
+        <!--Bar stub-->
+        <View Size="{views:SizeInUnits Height=30}"
+              WidthResizePolicy="FillToParent"/>
         <!--Margin-->
         <View BackgroundColor="Transparent"
           WidthResizePolicy="FillToParent"
           HeightResizePolicy="FillToParent"
           Weight="1"/>
         <!--Bar-->
-        <View Size="{views:SizeInUnits Height=30}"
-              Margin="{views:ExtentsInUnits Start=16, End=16}"
-              WidthResizePolicy="FillToParent"
-              BackgroundColor="Green">
+        <ImageView Size="{views:SizeInUnits Height=30}"
+                   Margin="{views:ExtentsInUnits Start=16, End=16}"
+                   WidthResizePolicy="FillToParent"
+                   ResourceUrl="*Resource*/styles/button/ButtonFrame.png">
             <!--Left button-->
             <View Size="{views:SizeInUnits Height=30}"
                   WidthResizePolicy="FillToParent">
@@ -37,7 +39,8 @@
                             HeightResizePolicy="FillToParent"
                             Text="Review movement"
                             Weight="1"
-                            Command="{Binding ReviewMovement}"/>
+                            Command="{Binding ReviewMovement}"
+                            behaviors:StyleSetter.Style="{Binding Source={x:Static styles:Buttons.ReviewMovement}}"/>
                 <View HeightResizePolicy="FillToParent"
                       BackgroundColor="Transparent"
                       Weight="2"/>
@@ -55,7 +58,8 @@
                             HeightResizePolicy="FillToParent"
                             Text="End workout"
                             Weight="1"
-                            Command="{Binding EndWorkout}"/>
+                            Command="{Binding EndWorkout}"
+                            behaviors:StyleSetter.Style="{Binding Source={x:Static styles:Buttons.Transparent}}"/>
             </View>
             <!--Center button-->
             <View Size="{views:SizeInUnits Height=30}"
@@ -70,12 +74,13 @@
                             HeightResizePolicy="FillToParent"
                             Text="Continue exercise"
                             Weight="1"
-                            Command="{Binding PauseResumeWorkout}"/>
+                            Command="{Binding PauseResumeWorkout}"
+                            behaviors:StyleSetter.Style="{Binding Source={x:Static styles:Buttons.Regular}}"/>
                 <View HeightResizePolicy="FillToParent"
                       BackgroundColor="Transparent"
                       Weight="1"/>
             </View>
-        </View>
+        </ImageView>
         <View Size="{views:SizeInUnits Height=5}"
               WidthResizePolicy="FillToParent"/>
     </View>
diff --git a/Fitness/res/layout/PlayingView.xaml b/Fitness/res/layout/PlayingView.xaml
index 2e37365..4cce026 100644
--- a/Fitness/res/layout/PlayingView.xaml
+++ b/Fitness/res/layout/PlayingView.xaml
@@ -6,14 +6,17 @@
   xmlns:ctrl="clr-namespace:Fitness.Controls"
   xmlns:views="clr-namespace:Fitness.Views"
   xmlns:nui="clr-namespace:Tizen.NUI.Components;assembly=Tizen.NUI.Components"
-  xmlns:style="clr-namespace:Fitness.Views.Styles"
+  xmlns:styles="clr-namespace:Fitness.Views.Styles"
+  xmlns:behaviors="clr-namespace:Fitness.Views.Behaviors"
   HeightResizePolicy="FillToParent" 
   WidthResizePolicy="FillToParent"  
   x:Name="Root">
     <View.Layout>
         <LinearLayout LinearOrientation="Vertical"/>
     </View.Layout>
-    <views:BarView BindingContext="{Binding Source={x:Reference Root}, Path=BindingContext}"/>
+    <!--Bar stub-->
+    <View Size="{views:SizeInUnits Height=30}"
+              WidthResizePolicy="FillToParent"/>
     <!--Margin-->
     <View BackgroundColor="Transparent"
           WidthResizePolicy="FillToParent"
@@ -138,7 +141,8 @@
                 PivotPoint="Center"
                 Text="Pause"
                 Command="{Binding PauseResumeWorkout}"
-                Size="{views:SizeInUnits Width=448, Height=30}">
+                Size="{views:SizeInUnits Width=448, Height=30}"
+                behaviors:StyleSetter.Style="{Binding Source={x:Static styles:Buttons.Regular}}">
         </nui:Button>
     </View>
     <View Size="{views:SizeInUnits Height=5}"
diff --git a/Fitness/res/styles/button/ButtonFrame.png b/Fitness/res/styles/button/ButtonFrame.png
new file mode 100644
index 0000000..226f10e
Binary files /dev/null and b/Fitness/res/styles/button/ButtonFrame.png differ
diff --git a/Fitness/res/styles/button/ButtonTransparent.png b/Fitness/res/styles/button/ButtonTransparent.png
new file mode 100644
index 0000000..07380b5
Binary files /dev/null and b/Fitness/res/styles/button/ButtonTransparent.png differ