From cc33dbd447cc43182790f6111a7f03d059ce10b9 Mon Sep 17 00:00:00 2001 From: "k.stepaniuk" Date: Fri, 27 Nov 2020 16:15:31 +0100 Subject: [PATCH] Styling buttons Signed-off-by: k.stepaniuk --- Fitness/FitnessApp.cs | 3 +- Fitness/Services/NavigationService.cs | 5 ++ Fitness/ViewModels/ExercisingViewModel.cs | 24 +++++- Fitness/Views/BarView.xaml.cs | 34 +++++++- Fitness/Views/ExercisingView.xaml.cs | 106 ++++++++++++------------ Fitness/Views/Styles/Buttons.cs | 64 +++++++++++++- Fitness/res/layout/BarView.xaml | 34 +++----- Fitness/res/layout/ExercisingView.xaml | 4 + Fitness/res/layout/PauseView.xaml | 27 +++--- Fitness/res/layout/PlayingView.xaml | 10 ++- Fitness/res/styles/button/ButtonFrame.png | Bin 0 -> 5108 bytes Fitness/res/styles/button/ButtonTransparent.png | Bin 0 -> 1147 bytes 12 files changed, 215 insertions(+), 96 deletions(-) create mode 100644 Fitness/res/styles/button/ButtonFrame.png create mode 100644 Fitness/res/styles/button/ButtonTransparent.png 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; } /// + /// Gets Prev Command. + /// + public ICommand Prev { get; private set; } + + /// + /// Gets Next Command. + /// + public ICommand Next { get; private set; } + + /// /// Gets PauseWorkout Command. /// 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 + { + 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 + { + 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 + { + 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 + { + 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 + { + 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 GetNavigationFont() { return new Selector 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"> - - + - - + \ 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 @@ + + 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 @@ - - + + - + @@ -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}}"/> @@ -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}}"/> + Command="{Binding PauseResumeWorkout}" + behaviors:StyleSetter.Style="{Binding Source={x:Static styles:Buttons.Regular}}"/> - + 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"> - + + + Size="{views:SizeInUnits Width=448, Height=30}" + behaviors:StyleSetter.Style="{Binding Source={x:Static styles:Buttons.Regular}}"> Z`1Xpr|Zx2nhuZLkS2v z?{jK%kl*YX3uXWSW|KGiZUI0aU4nxKdgyn=qN@n~!^QiMLk-Yhiow2<0GO7LeZ51I z!uzGm&xE#`>&Yi7ii+;7Iux6`pw-uZKfXB5%wfkJ^Q>!U(wF+hUf9TU*s}WY&7i~2 zqYw99e>UQ)U+Zm(O$s|+KHSbIY!Ng(;4$l%!U#qCedatV%T{vzRkLV&xYx#^4yM}u zES`h_3>If#Z2k8Iy+t=QFs?3eNY>ED+PjV<-;Xm2FE9kZ8IGT!WbIK{p{ zPZGqjBgv^7hwzd^lzyK(0T;F9STR8@%Fw;%?f`yQ26F;iWoHb>GfTc>{73P<=&7aQRLp)lF{zTo2nI=!&IUO# zVo~_hJ|B!cu1gUa(AVL?;)`Lf|QWn$ga{M}1>Kj(tIUy#^1vR5O zX>b^CW#<+=RN1*s7884mH?7DdM7$rDwbxtZKjh7^;->7N#INj*s<+e;6EtIXl1h9q z*JJ#ee)xgk)~%mDRM1mObh92PPvh5cJOYMZ@mz$hdPu{Ke50%;QMH10N7MsWP8npM zs8H+bX8j)HBd)fhyJM{CoP^8};98%WT9Gi`cq9LgD1ttRWjUv zc!K|agyK^+3kb(zIMtzaAJJH*wxSvaubI%z>Lgh$V_@?_Tbdin-{%8?kVd#Xa(lk% zc%w8;4}y%rQb`5EVja4Vcz*m3GOqTJmI|sWW;gN5h;Dp7cj@NiOJG4@Eg(LU#%C*X zdXu+ORPAPhP zrwX6~Aq6H|#>C;c2>a~m@#Ki^NDZ)}ws3a=br>h&Bau3# z51+!)DcT?PidfC-ilDsHIsr{QC#vBU63H|9))B%aTW4gk6xeOpj(3Y4j_6Eci5|C;Gk!u*kA z(bU~#Jp;)=Z7pfU8GOHXWH)%I<&_-nno}0lc`d1Mokfe^fik;@>`ADTR z4u`DPfhlKhXaJ}cm;7O++8R{o!!rNpjU-TY<=4;|5FiYuz!Rb_Y4-*!R&2hkXbTL; z0QAEkuuDyhLFvKe7knU!kibDBSSi_d4gvHHr>~j8c*T;K5C}w^f%3j|dtf09$QV4= zfeE}7Zw+=f|I^|7=~Em*z@tUeXMnM_zy^bnXUq**0t3P!BM=C{{t_aS==l;NlalmH zh)k{q|7Rh>)`CGHzLop3gkNsnaur$|dB)vJOY$N@@^-2A)75K=&45iw0voi!xkZZ; zg?y-1TVd7eg;|mtxW(%_!udDf{h8eu?A%KEol96=Aje7UWp}yt1SPR%v1K7-sx)@BM?*kP!-|LTX_u6u zi5Wm)u?x|!EV2ujoLhfgc!E9bTH!=^!bGhD$We;?P$51{3$uAkawnDSzxJSG)&;X} zg{Kqmg(4NXnXgYDcuJxBg0pPB6sJ%{5}N%)6yR#quiO#vIEgjNF$Bf7k8TuLP*m$+rZ^iq*0X}v zx8sl%O<4*7Pn0S|qTTfTa(8cWYMzFV%wv%EU>&doX z)*c#ud|TGkmy1K3JDm+*XM4k`INZxBZvoH`w(ik@Q;*%8$T6|^u8LRes!|Vyn ZmHwOS`6n}d(PunB-Vo$l>a+XUe*sg^Wjp`? literal 0 HcmV?d00001 diff --git a/Fitness/res/styles/button/ButtonTransparent.png b/Fitness/res/styles/button/ButtonTransparent.png new file mode 100644 index 0000000000000000000000000000000000000000..07380b58672bb612a2e502ed13276c12fcefe259 GIT binary patch literal 1147 zcmeAS@N?(olHy`uVBq!ia0y~yUM1MG8=jfTxRNNJZS+I~y~Z9R(aNMlUZ)E?ZZ3 zWvW!Mon5!@(;q+fupidBe5gIv7^oKvc;%~^AuL8F1qh>sqXEJYP-0*Lvm81YI3Plb zql!j@fPvB=h`AH>y6oKF{P)6pRG~>M=Kgof{=E<5v(vr_gOgf=c2sulyw|ViJU{bi zPv3_&cnaLd080N13=IN|0$>J%6N>|c!6C@N2xcj`FtC6bBUsU6i#kT9tpdKi4_|!( Og@vc9pUXO@geCxL_kMZ+ literal 0 HcmV?d00001 -- 2.7.4