[NUI] Update 6.5 UX for CheckBox, Switch and RadioButton (#2773)
[platform/core/csapi/tizenfx.git] / src / Tizen.NUI.Components / Theme / DefaultThemeCommon.cs
1 /*
2  * Copyright(c) 2021 Samsung Electronics Co., Ltd.
3  *
4  * Licensed under the Apache License, Version 2.0 (the "License");
5  * you may not use this file except in compliance with the License.
6  * You may obtain a copy of the License at
7  *
8  * http://www.apache.org/licenses/LICENSE-2.0
9  *
10  * Unless required by applicable law or agreed to in writing, software
11  * distributed under the License is distributed on an "AS IS" BASIS,
12  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13  * See the License for the specific language governing permissions and
14  * limitations under the License.
15  *
16  */
17 #if !PROFILE_WEARABLE
18
19 using System.Diagnostics.CodeAnalysis;
20 using Tizen.NUI.BaseComponents;
21
22 namespace Tizen.NUI.Components
23 {
24     // It is a C# version of res/Tizen.NUI.Components_Tizen.NUI.Theme.Common.xaml
25     internal partial class DefaultThemeCreator : IThemeCreator
26     {
27         [SuppressMessage("Microsoft.Reliability", "CA2000: Dispose objects before losing scope", Justification = "The responsibility to dispose the object is transferred to the theme object.")]
28         public Theme Create()
29         {
30             var theme = new Theme()
31             {
32                 Id = Tizen.NUI.DefaultThemeCreator.DefaultId,
33                 Version = Tizen.NUI.DefaultThemeCreator.DefaultVersion
34             };
35
36             theme.AddStyleWithoutClone("Tizen.NUI.Components.Button", new ButtonStyle()
37             {
38                 Size = new Size(339, 96),
39                 CornerRadiusPolicy = VisualTransformPolicyType.Relative,
40                 CornerRadius = 0.2916f,
41                 BackgroundColor = new Selector<Color>()
42                 {
43                     Normal = new Color(0.039f, 0.055f, 0.29f, 1),
44                     Focused = new Color(0, 0.2f, 0.545f, 1),
45                     Pressed = new Color(0.106f, 0.412f, 0.792f, 1),
46                     Disabled = new Color(0.765f, 0.792f, 0.824f, 1),
47                 },
48                 Text = new TextLabelStyle()
49                 {
50                     PixelSize = 32,
51                     TextColor = Color.White,
52                 }
53             });
54
55             theme.AddStyleWithoutClone("Tizen.NUI.Components.CheckBox", new ButtonStyle()
56             {
57                 TextPadding = new Extents(32, 0, 0, 0),
58                 Icon = new ImageViewStyle()
59                 {
60                     Size = new Size(36, 36),
61                     ResourceUrl = new Selector<string>()
62                     {
63                         Normal = FrameworkInformation.ResourcePath + "IoT_check_off.svg",
64                         Pressed = FrameworkInformation.ResourcePath + "IoT_check_off_p.svg",
65                         Disabled = FrameworkInformation.ResourcePath + "IoT_check_off_d.svg",
66                         Focused = FrameworkInformation.ResourcePath + "IoT_check_off_f.svg",
67                         Selected = FrameworkInformation.ResourcePath + "IoT_check_on.svg",
68                         SelectedPressed = FrameworkInformation.ResourcePath + "IoT_check_on_p.svg",
69                         SelectedFocused = FrameworkInformation.ResourcePath + "IoT_check_on_f.svg",
70                         DisabledSelected = FrameworkInformation.ResourcePath + "IoT_check_on_d.svg",
71                     },
72                 },
73                 Text = new TextLabelStyle()
74                 {
75                     PixelSize = 32,
76                     TextColor = new Color("#001447")
77                 }
78             });
79
80             theme.AddStyleWithoutClone("Tizen.NUI.Components.Popup", new PopupStyle()
81             {
82                 Size = new Size(500, 280),
83                 BackgroundColor = new Color(0.9f, 0.9f, 0.9f, 1),
84                 ImageShadow = new ImageShadow()
85                 {
86                     Url = FrameworkInformation.ResourcePath + "nui_component_default_popup_shadow.png",
87                     Border = new Rectangle(24, 24, 24, 24),
88                     Extents = new Vector2(48, 48)
89                 },
90                 Title = new TextLabelStyle()
91                 {
92                     PointSize = 16,
93                     Padding = new Extents(20, 20, 20, 20),
94                 },
95                 Buttons = new ButtonStyle()
96                 {
97                     Size = new Size(0, 80),
98                     BackgroundColor = new Selector<Color>()
99                     {
100                         Normal = new Color(1, 1, 1, 1),
101                         Pressed = new Color(1, 1, 1, 0.5f),
102                     },
103                     Overlay = new ImageViewStyle()
104                     {
105                         BackgroundColor = new Selector<Color>()
106                         {
107                             Pressed = new Color(0, 0, 0, 0.1f),
108                             Other = new Color(1, 1, 1, 0.1f),
109                         },
110                     },
111                     Text = new TextLabelStyle()
112                     {
113                         TextColor = new Color(0.05f, 0.63f, 0.9f, 1),
114                     }
115                 }
116             });
117
118             theme.AddStyleWithoutClone("Tizen.NUI.Components.Progress", new ProgressStyle()
119             {
120                 Size = new Size(200, 5),
121                 Track = new ImageViewStyle()
122                 {
123                     BackgroundColor = new Color(0, 0, 0, 0.1f),
124                 },
125                 Buffer = new ImageViewStyle()
126                 {
127                     BackgroundColor = new Color(0.05f, 0.63f, 0.9f, 0.3f),
128                 },
129                 Progress = new ImageViewStyle()
130                 {
131                     BackgroundColor = new Color(0.05f, 0.63f, 0.9f, 1),
132                 },
133             });
134
135             theme.AddStyleWithoutClone("Tizen.NUI.Components.RadioButton", new ButtonStyle()
136             {
137                 TextPadding = new Extents(32, 0, 0, 0),
138                 Icon = new ImageViewStyle()
139                 {
140                     Size = new Size(36, 36),
141                     ResourceUrl = new Selector<string>()
142                     {
143                         Normal = FrameworkInformation.ResourcePath + "IoT_radiobutton_off.svg",
144                         Pressed = FrameworkInformation.ResourcePath + "IoT_radiobutton_off_p.svg",
145                         Disabled = FrameworkInformation.ResourcePath + "IoT_radiobutton_off_d.svg",
146                         Focused = FrameworkInformation.ResourcePath + "IoT_radiobutton_off_f.svg",
147                         Selected = FrameworkInformation.ResourcePath + "IoT_radiobutton_on.svg",
148                         SelectedPressed = FrameworkInformation.ResourcePath + "IoT_radiobutton_on_p.svg",
149                         SelectedFocused = FrameworkInformation.ResourcePath + "IoT_radiobutton_on_f.svg",
150                         DisabledSelected = FrameworkInformation.ResourcePath + "IoT_radiobutton_on_d.svg",
151                     },
152                 },
153                 Text = new TextLabelStyle()
154                 {
155                     PixelSize = 32,
156                     TextColor = new Color("#001447")
157                 }
158             });
159
160             theme.AddStyleWithoutClone("Tizen.NUI.Components.Slider", new SliderStyle()
161             {
162                 Size = new Size(200, 50),
163                 TrackThickness = 5,
164                 Track = new ImageViewStyle()
165                 {
166                     BackgroundColor = new Color(0, 0, 0, 0.1f),
167                 },
168                 Progress = new ImageViewStyle()
169                 {
170                     BackgroundColor = new Color(0.5f, 0.63f, 0.9f, 1),
171                 },
172                 Thumb = new ImageViewStyle()
173                 {
174                     Size = new Size(50, 50),
175                     ResourceUrl = FrameworkInformation.ResourcePath + "nui_component_default_slider_thumb_n.png",
176                     BackgroundImage = new Selector<string>()
177                     {
178                         Normal = FrameworkInformation.ResourcePath + "nui_component_default_slider_thumb_bg_p.png",
179                         Pressed = FrameworkInformation.ResourcePath + "nui_component_default_slider_thumb_bg_p.png",
180                     }
181                 },
182                 ValueIndicatorImage = new ImageViewStyle()
183                 {
184                     Size = new Size(83, 54),
185                     ResourceUrl = FrameworkInformation.ResourcePath + "nui_component_default_slider_value_indicator.png",
186                 },
187             });
188
189             theme.AddStyleWithoutClone("Tizen.NUI.Components.Switch", new SwitchStyle()
190             {
191                 TextPadding = new Extents(32, 0, 0, 0),
192                 Track = new ImageViewStyle()
193                 {
194                     Size = new Size(80, 40),
195                     ResourceUrl = new Selector<string>()
196                     {
197                         Normal = FrameworkInformation.ResourcePath + "IoT_switch_track_off.svg",
198                         Pressed = FrameworkInformation.ResourcePath + "IoT_switch_track_off_p.svg",
199                         Disabled = FrameworkInformation.ResourcePath + "IoT_switch_track_off_d.svg",
200                         Focused = FrameworkInformation.ResourcePath + "IoT_switch_track_off_f.svg",
201                         Selected = FrameworkInformation.ResourcePath + "IoT_switch_track_on.svg",
202                         SelectedPressed = FrameworkInformation.ResourcePath + "IoT_switch_track_on_p.svg",
203                         SelectedFocused = FrameworkInformation.ResourcePath + "IoT_switch_track_on_f.svg",
204                         DisabledSelected = FrameworkInformation.ResourcePath + "IoT_switch_track_on_d.svg",
205                     },
206                 },
207                 Thumb = new ImageViewStyle()
208                 {
209                     Size = new Size(40, 40),
210                     ResourceUrl = new Selector<string>()
211                     {
212                         Normal = FrameworkInformation.ResourcePath + "IoT_switch_thumb.svg",
213                         Disabled = FrameworkInformation.ResourcePath + "IoT_switch_thumb_d.svg",
214                         Selected = FrameworkInformation.ResourcePath + "IoT_switch_thumb_s.svg",
215                         SelectedPressed = FrameworkInformation.ResourcePath + "IoT_switch_thumb_sp.svg",
216                         SelectedFocused = FrameworkInformation.ResourcePath + "IoT_switch_thumb_sf.svg",
217                     }
218                 },
219                 Text = new TextLabelStyle()
220                 {
221                     PixelSize = 32,
222                     TextColor = new Color("#001447")
223                 }
224             });
225
226             theme.AddStyleWithoutClone("Tizen.NUI.Components.Loading", new LoadingStyle()
227             {
228                 LoadingSize = new Size(100, 100),
229             });
230
231             theme.AddStyleWithoutClone("Tizen.NUI.Components.Pagination", new PaginationStyle()
232             {
233                 IndicatorImageUrl = new Selector<string>()
234                 {
235                     Normal = FrameworkInformation.ResourcePath + "nui_component_default_pagination_normal_dot.png",
236                     Selected = FrameworkInformation.ResourcePath + "nui_component_default_pagination_focus_dot.png",
237                 },
238                 IndicatorSize = new Size(10, 10),
239             });
240
241             theme.AddStyleWithoutClone("Tizen.NUI.Components.Scrollbar", new ScrollbarStyle()
242             {
243                 TrackThickness = 6,
244                 ThumbThickness = 6,
245                 TrackColor = new Color(1, 1, 1, 0.15f),
246                 ThumbColor = new Color(0.6f, 0.6f, 0.6f, 1.0f),
247                 TrackPadding = 4
248             });
249
250             theme.AddStyleWithoutClone("Tizen.NUI.Components.RecyclerViewItem", new RecyclerViewItemStyle()
251             {
252                 BackgroundColor = new Selector<Color>()
253                 {
254                     Normal = new Color(1, 1, 1, 1),
255                     Pressed = new Color(0.85f, 0.85f, 0.85f, 1),
256                     Disabled = new Color(0.70f, 0.70f, 0.70f, 1),
257                     Selected = new Color(0.701f, 0.898f, 0.937f, 1),
258                 },
259             });
260
261             theme.AddStyleWithoutClone("Tizen.NUI.Components.DefaultLinearItem", new DefaultLinearItemStyle()
262             {
263                 SizeHeight = 130,
264                 Padding = new Extents(20, 20, 5, 5),
265                 BackgroundColor = new Selector<Color>()
266                 {
267                     Normal = new Color(1, 1, 1, 1),
268                     Pressed = new Color(0.85f, 0.85f, 0.85f, 1),
269                     Disabled = new Color(0.70f, 0.70f, 0.70f, 1),
270                     Selected = new Color(0.701f, 0.898f, 0.937f, 1),
271                 },
272                 Label = new TextLabelStyle()
273                 {
274                     PointSize = 10,
275                     Ellipsis = true,
276                 },
277                 SubLabel = new TextLabelStyle()
278                 {
279                     PointSize = 6,
280                     Ellipsis = true,
281                 },
282                 Icon = new ViewStyle()
283                 {
284                     Margin = new Extents(0, 20, 0, 0)
285                 },
286                 Extra = new ViewStyle()
287                 {
288                     Margin = new Extents(20, 0, 0, 0)
289                 },
290                 Seperator = new ViewStyle()
291                 {
292                     Margin = new Extents(5, 5, 0, 0),
293                     BackgroundColor = new Color(0.78f, 0.78f, 0.78f, 1),
294                 },
295             });
296             theme.AddStyleWithoutClone("Tizen.NUI.Components.DefaultGridItem", new DefaultGridItemStyle()
297             {
298                 Padding = new Extents(5, 5, 5, 5),
299                 Caption = new TextLabelStyle()
300                 {
301                     PointSize = 9,
302                     Ellipsis = true,
303                 },
304                 Badge = new ViewStyle()
305                 {
306                     Margin = new Extents(5, 5, 5, 5),
307                 },
308             });
309
310             theme.AddStyleWithoutClone("Tizen.NUI.Components.DefaultTitleItem", new DefaultTitleItemStyle()
311             {
312                 SizeHeight = 90,
313                 Padding = new Extents(10, 10, 5, 5),
314                 BackgroundColor = new Selector<Color>()
315                 {
316                     Normal = new Color(0.78f, 0.78f, 0.78f, 1),
317                 },
318                 Label = new TextLabelStyle()
319                 {
320                     PointSize = 10,
321                     Ellipsis = true,
322                 },
323                 Icon = new ViewStyle()
324                 {
325                     Margin = new Extents(10, 0, 0, 0)
326                 },
327                 Seperator = new ViewStyle()
328                 {
329                     Margin = new Extents(0, 0, 0, 0),
330                     BackgroundColor = new Color(0.85f, 0.85f, 0.85f, 1),
331                 },
332             });
333
334             theme.AddStyleWithoutClone("Tizen.NUI.Components.AppBar", new AppBarStyle()
335             {
336                 Size = new Size(-1, 120),
337                 BackgroundColor = new Color("#EEEFF1FF"),
338                 BackButton = new ButtonStyle()
339                 {
340                     Size = new Size(48, 48),
341                     CornerRadius = 0,
342                     BackgroundColor = new Color(0, 0, 0, 0),
343                     Icon = new ImageViewStyle()
344                     {
345                         Size = new Size(48, 48),
346                         ResourceUrl = FrameworkInformation.ResourcePath + "nui_component_default_back_button.png",
347                         Color = new Selector<Color>()
348                         {
349                             Normal = new Color("#0A0E4AFF"),
350                             Focused = new Color("#00338BFF"),
351                             Pressed = new Color("#1B69CAFF"),
352                             Disabled = new Color("#C3CAD2FF"),
353                         },
354                     },
355                 },
356                 TitleTextLabel = new TextLabelStyle()
357                 {
358                     PixelSize = 40,
359                     VerticalAlignment = VerticalAlignment.Center,
360                     TextColor = new Selector<Color>()
361                     {
362                         Normal = new Color("#000C2BFF"),
363                     }
364                 },
365                 ActionView = new ViewStyle()
366                 {
367                     Size = new Size(-1, 48),
368                     CornerRadius = 0,
369                     BackgroundColor = new Color(0, 0, 0, 0),
370                 },
371                 ActionButton = new ButtonStyle()
372                 {
373                     Size = new Size(-1, 48),
374                     CornerRadius = 0,
375                     BackgroundColor = new Color(0, 0, 0, 0),
376                     Text = new TextLabelStyle()
377                     {
378                         PixelSize = 26,
379                         TextColor = new Selector<Color>()
380                         {
381                             Normal = new Color("#0A0E4AFF"),
382                             Focused = new Color("#00338BFF"),
383                             Pressed = new Color("#1B69CAFF"),
384                             Disabled = new Color("#C3CAD2FF"),
385                         },
386                     },
387                     Icon = new ImageViewStyle()
388                     {
389                         Size = new Size(-1, 48),
390                         Color = new Selector<Color>()
391                         {
392                             Normal = new Color("#0A0E4AFF"),
393                             Focused = new Color("#00338BFF"),
394                             Pressed = new Color("#1B69CAFF"),
395                             Disabled = new Color("#C3CAD2FF"),
396                         },
397                     },
398                 },
399                 Padding = new Extents(64, 64, 0, 0),
400                 NavigationPadding = new Extents(0, 24, 0, 0),
401                 ActionPadding = new Extents(40, 0, 0, 0),
402                 ActionCellPadding = new Size2D(40, 0),
403             });
404
405             return theme;
406         }
407     }
408 }
409
410 #endif