From a02d81a34d845340fe720b0507e0686dbc3091ba Mon Sep 17 00:00:00 2001 From: Seoyeon Kim Date: Mon, 2 May 2022 12:14:44 +0900 Subject: [PATCH] [NUI] Apply Slider UX - Thumb and Tracks - The latest Slider UX have been applied. (Based on API10) 1) The colors of Thumb(Handle), Progress, and Track are changed. 2) The size of Progress and Track is changed. Signed-off-by: Seoyeon Kim --- .../Theme/DefaultThemeCommon.cs | 24 +++++++++++---------- .../res/IoT_slider_handler_disabled.png | Bin 603 -> 683 bytes .../res/IoT_slider_handler_focused.png | Bin 0 -> 1022 bytes .../res/IoT_slider_handler_normal.png | Bin 968 -> 640 bytes .../res/IoT_slider_handler_pressed.png | Bin 1975 -> 1041 bytes .../Tizen.NUI.StyleGuide/Examples/SliderExample.cs | 5 ++++- 6 files changed, 17 insertions(+), 12 deletions(-) mode change 100755 => 100644 src/Tizen.NUI.Components/res/IoT_slider_handler_disabled.png create mode 100644 src/Tizen.NUI.Components/res/IoT_slider_handler_focused.png mode change 100755 => 100644 src/Tizen.NUI.Components/res/IoT_slider_handler_normal.png mode change 100755 => 100644 src/Tizen.NUI.Components/res/IoT_slider_handler_pressed.png diff --git a/src/Tizen.NUI.Components/Theme/DefaultThemeCommon.cs b/src/Tizen.NUI.Components/Theme/DefaultThemeCommon.cs index 9ef6cd5..058bbe9 100755 --- a/src/Tizen.NUI.Components/Theme/DefaultThemeCommon.cs +++ b/src/Tizen.NUI.Components/Theme/DefaultThemeCommon.cs @@ -183,31 +183,31 @@ namespace Tizen.NUI.Components // Slider base style theme.AddStyleWithoutClone("Tizen.NUI.Components.Slider", new SliderStyle() { - Size = new Size(200, 50), + Size = new Size(850, 50), TrackThickness = 8, Track = new ImageViewStyle() { - Size = new Size(100, 8), - BorderlineWidth = 0.5f, - BorderlineColor = new Color(0.84f, 0.85f, 0.87f, 1.0f), + Size = new Size(800, 8), + CornerRadius = 4.0f, BackgroundColor = new Selector() { - Normal = new Color(1.0f, 1.0f, 1.0f, 0.2f), - Disabled = new Color(0.76f, 0.79f, 0.82f, 1), + Normal = new Color(1.0f, 0.37f, 0.0f, 0.1f), + Disabled = new Color(1.0f, 0.37f, 0.0f, 0.1f), }, }, Progress = new ImageViewStyle() { - Size = new Size(100, 8), + Size = new Size(800, 8), + CornerRadius = 4.0f, BackgroundColor = new Selector() { - Normal = new Color(0.03f, 0.05f, 0.3f, 1), - Disabled = new Color(0.76f, 0.79f, 0.82f, 1), + Normal = new Color("#FF6200"), + Disabled = new Color("#CACACA"), }, }, Thumb = new ImageViewStyle() { - Size = new Size(36, 36), + Size = new Size(40, 40), ResourceUrl = new Selector() { Normal = FrameworkInformation.ResourcePath + "IoT_slider_handler_normal.png", @@ -218,7 +218,9 @@ namespace Tizen.NUI.Components }, ValueIndicatorImage = new ImageViewStyle() { - Size = new Size(49, 24), + Size = new Size(16, 24), + BorderlineWidth = 0.5f, + BorderlineColor = new Color("#FF6200"), BackgroundColor = new Color(0.0f, 0.04f, 0.16f, 1.0f), }, }); diff --git a/src/Tizen.NUI.Components/res/IoT_slider_handler_disabled.png b/src/Tizen.NUI.Components/res/IoT_slider_handler_disabled.png old mode 100755 new mode 100644 index c003bc677ad6823a50be978dffc59e71f81df06f..f06c1277f1aa84f13bcfc8ee3f846a2779529742 GIT binary patch literal 683 zcmV;c0#yBpP)I!Uj;0|;Nx&s~Y8{h;YBUk{&iWp22 zKHgJSwarID+j^1;)a}$gRrhnQMQhM(Htq3vd_0@Y_IaDt3y{3-cwJ2&NW88NfMkh%?n{^&@&q}O<4GP0g!V9D6=mn zxD%{Bw`SLWc%ZO&^l1}I#Ocm+T(3#{x@ RN^SrE002ovPDHLkV1kswHZA}F literal 603 zcmV-h0;K(kP)6owNjJmU`BfFKX@hPEr9u0ULYx&mbBlk{3)k9|p){FsrZb$HuYdlWa}r8oj?QqH&rUN{MyN?B$rHlxN3Yy} z!yG(M7$H9y#;jRx`Dv6&lQ>gQ+2C$}Y*I=d5wFX>J7$#iEZ4tG=98QDHn|Omp6ct@Juu*d#jX-PkvkgwH8hPj)dFWmRg<$5EdWliF(xF^&6+rG$C!OZZH}87;p@2%F_23-pwy>^BqXroH zaruNJq{;UQPF($ir3$RHErmz}Qw`_vgv$xa#5}jqBM*uk(92D2JSNp=+h|u!siX9| zV##=F(=*#EBzqlGKZ05|?uqJA_e7CEf!W>Uc?g&kNT{i!_B;2NHq%VR>G+xp!f>tU pZvYq-&*DlCzgvs!q8;~2?+;lc?#!Px@v8s;002ovPDHLkV1gI38oB@g diff --git a/src/Tizen.NUI.Components/res/IoT_slider_handler_focused.png b/src/Tizen.NUI.Components/res/IoT_slider_handler_focused.png new file mode 100644 index 0000000000000000000000000000000000000000..aebe1275415a98fec0b5c4ca05c69a52117d4d88 GIT binary patch literal 1022 zcmV@V^_(_9~Sfo~s7+ZRJ%UM=G#dIgN8 zv4E`AuHFD{-#7Pe^hrQ>HwE?}`(#nQz#O^()Gk$cEmtk+q=oLybPskEXnoDMXoQAb z+$M&Q$aFcRd@!)8=)6|Ywa(mtFnUk1YL>5rut|In)E6s}Tpj-K07NPnp z*WE2yg09Qc}@vPKeXCoGXsSF^%k+iv&;)e;xaNcio(Tl-6bqA>#qeIOCF3)pftI&8hX!1pid=k>EezgqFlb&kzPU z<04>s2IDcPZ21f=AF%ycUcCH+Y?FYEq~rS+l&)W%kv7{J3c2he$I z8CKK@zB8^=9(dD$`ura`R@_)Fc1`41TWfC5sx6D8JBcZ8m{?>SY!~Qij^)IjwVns4 zt>`?!-bOKyjCqcgYThj>d3&)uSoB=op0oBJjui$g8C$9gUNPzD(#MqK$8KGwde`I& zeJy=tEGP9DfonT4|F3vN$g~8)a~jjplV*HeAvg*BJ-05`!`#KA0drF7HA*sl<(#}JT9mMZRnxwdDPVHb=ibhXTWEIKio{w< zs;o{OrYFD{vZ9lFxB74raUw=~wzfLG+HDcN5?3L{+AP``iWXbqu9XL@CqQpJCj2I+ s=1&n7K*NU#3^Y)KClYDz_xdx$KLDRFjbPvH5dZ)H07*qoM6N<$f;-94ga7~l literal 0 HcmV?d00001 diff --git a/src/Tizen.NUI.Components/res/IoT_slider_handler_normal.png b/src/Tizen.NUI.Components/res/IoT_slider_handler_normal.png old mode 100755 new mode 100644 index 84238df9cf37e9aab0553d2dd2c5cfda00971200..e232e12ccd40fa0bc3752326beb5a3f0d9b32a0f GIT binary patch literal 640 zcmV-`0)PF9P)bn4O1c*=1WoR&PfRmf%d7vH@n7iPm-UrthS^D#EH zke^z^L3Mp{g85=G#L#GHNo>^`N~g$;qni62;#fedzh{s3&)e;CPhGfqJ*%^<3^-o=8Hu!TX{{n3q0p*3ZkwJ zITxK|&}&3tQHH#gG%vgKJ$cTs8hM|2oOkJ~rQg-e-;}DXqRf_LEKCRkPyyIOQs$-- a7vK*lkFUJn3*^!O0000pRc$ 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 JPDHLkV1iK_&6NNE diff --git a/test/Tizen.NUI.StyleGuide/Examples/SliderExample.cs b/test/Tizen.NUI.StyleGuide/Examples/SliderExample.cs index 2fc905d..c55a9a0 100644 --- a/test/Tizen.NUI.StyleGuide/Examples/SliderExample.cs +++ b/test/Tizen.NUI.StyleGuide/Examples/SliderExample.cs @@ -63,11 +63,12 @@ namespace Tizen.NUI.StyleGuide }, }; - // CheckBox examples. + // Slider examples. slider = new Slider() { MinValue = 0, MaxValue = 100, + WidthSpecification = LayoutParamPolicies.MatchParent, }; rootContent.Add(slider); @@ -76,6 +77,7 @@ namespace Tizen.NUI.StyleGuide MinValue = 0, MaxValue = 100, IsEnabled = false, + WidthSpecification = LayoutParamPolicies.MatchParent, }; rootContent.Add(disabledSlider); @@ -84,6 +86,7 @@ namespace Tizen.NUI.StyleGuide MinValue = 0, MaxValue = 100, CurrentValue = 100, + WidthSpecification = LayoutParamPolicies.MatchParent, }; rootContent.Add(completedSlider); -- 2.7.4