Implement scroll bar in the TextEditor
[platform/core/uifw/dali-toolkit.git] / dali-toolkit / styles / 720x1280 / dali-toolkit-default-theme.json
1 /*
2  * Copyright (c) 2017 Samsung Electronics Co., Ltd.
3  *
4  * This file is part of Dali Toolkit
5  *
6  * Licensed under the Apache License, Version 2.0 (the "License");
7  * you may not use this file except in compliance with the License.
8  * You may obtain a copy of the License at
9  *
10  * http://www.apache.org/licenses/LICENSE-2.0
11  *
12  * Unless required by applicable law or agreed to in writing, software
13  * distributed under the License is distributed on an "AS IS" BASIS,
14  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
15  * See the License for the specific language governing permissions and
16  * limitations under the License.
17  */
18
19
20 //******************************************************************************
21 //
22 // Default Reference style theme for a 720x1280 resolution, The values determined by UX design specification.
23 // This file can be copied to a new folder within the styles/ directory and amended with new default values.
24 // Can be overriden if StyleManager applies another style sheet.
25 //
26 //******************************************************************************
27
28 {
29   "styles":
30   {
31     "TextLabel":
32     {
33       "pointSize":18,
34       "enableAutoScroll":false,
35       "autoScrollLoopCount":2,
36       "autoScrollGap":50,
37       "autoScrollSpeed":80
38     },
39
40     "TextLabelFontSize0":
41     {
42       "pointSize":8
43     },
44     "TextLabelFontSize1":
45     {
46       "pointSize":10
47     },
48     "TextLabelFontSize2":
49     {
50       "pointSize":15
51     },
52     "TextLabelFontSize3":
53     {
54       "pointSize":19
55     },
56     "TextLabelFontSize4":
57     {
58       "pointSize":25
59     },
60     "TextField":
61     {
62       "pointSize":18,
63       "primaryCursorColor":[0.0,0.72,0.9,1.0],
64       "secondaryCursorColor":[0.0,0.72,0.9,1.0],
65       "cursorWidth":3,
66       "selectionHighlightColor":[0.75,0.96,1.0,1.0],
67       "grabHandleImage" : "{DALI_STYLE_IMAGE_DIR}cursor_handler_drop_center.png",
68       "selectionHandleImageLeft" : {"filename":"{DALI_STYLE_IMAGE_DIR}selection_handle_drop_left.png" },
69       "selectionHandleImageRight": {"filename":"{DALI_STYLE_IMAGE_DIR}selection_handle_drop_right.png" }
70     },
71
72     "TextFieldFontSize0":
73     {
74       "pointSize":10
75     },
76     "TextFieldFontSize1":
77     {
78       "pointSize":10
79     },
80     "TextFieldFontSize2":
81     {
82       "pointSize":10
83     },
84     "TextFieldFontSize3":
85     {
86       "pointSize":10
87     },
88     "TextFieldFontSize4":
89     {
90       "pointSize":10
91     },
92     "TextSelectionPopup":
93     {
94       "popupMaxSize":[656,72],
95       "optionDividerSize":[2,0],
96       "popupDividerColor":[0.23,0.72,0.8,0.11],
97       "popupIconColor":[1.0,1.0,1.0,1.0],
98       "popupPressedColor":[0.24,0.72,0.8,0.11],
99       "background": {
100         "visualType": "IMAGE",
101         "url": "{DALI_IMAGE_DIR}selection-popup-background.9.png"
102         },
103       "backgroundBorder": {
104         "visualType": "IMAGE",
105         "url": "{DALI_IMAGE_DIR}selection-popup-border.9.png",
106         "mixColor":[0.24,0.72,0.8,1.0]
107         },
108       "popupFadeInDuration":0.25,
109       "popupFadeOutDuration":0.25
110     },
111     "TextSelectionPopupButton":
112     {
113       "label":
114       {
115         "visualType":"TEXT",
116         "pointSize":8
117       },
118       "unselectedBackgroundVisual":
119       {
120         "visualType": "IMAGE",
121         "url": ""
122       },
123       "selectedBackgroundVisual":
124       {
125         "visualType": "IMAGE",
126         "url": ""
127       }
128     },
129     "TextSelectionToolbar":
130     {
131       "enableOvershoot":true,
132       "enableScrollBar":true,
133       "scrollView":
134       {
135         "overshootAnimationSpeed":360.0,
136         "overshootSize":[720.0,130.0]
137       }
138     },
139     "TextSelectionScrollBar":
140     {
141       "indicatorShowDuration":0.25,
142       "indicatorHideDuration":0.25,
143       "indicatorTransientDuration":1.0
144     },
145     "TextSelectionScrollIndicator":
146     {
147       "image":
148       {
149         "visualType":"IMAGE",
150         "url":"{DALI_IMAGE_DIR}text_selection_scroll_indicator.9.png"
151       },
152       "color":[0.0,0.72,0.9,0.7]
153     },
154     "ScrollView":
155     {
156       "overshootEffectColor":"B018",
157       "overshootAnimationSpeed":360.0,
158       "overshootSize":[720.0,130.0]
159     },
160     "ItemView":
161     {
162       "overshootEffectColor":"B018",
163       "overshootAnimationSpeed":360.0,
164       "overshootSize":[720.0,130.0]
165     },
166     "ScrollBar":
167     {
168       "indicatorShowDuration":0.25,
169       "indicatorHideDuration":0.25,
170       "color":[0.0,0.72,0.9,0.7]
171     },
172     "TextEditor":
173     {
174       "pointSize":18,
175       "primaryCursorColor":[0.0,0.72,0.9,1.0],
176       "secondaryCursorColor":[0.0,0.72,0.9,1.0],
177       "cursorWidth":3,
178       "selectionHighlightColor":[0.75,0.96,1.0,1.0],
179       "grabHandleImage" : "{DALI_STYLE_IMAGE_DIR}cursor_handler_drop_center.png",
180       "selectionHandleImageLeft" : {"filename":"{DALI_STYLE_IMAGE_DIR}selection_handle_drop_left.png" },
181       "selectionHandleImageRight": {"filename":"{DALI_STYLE_IMAGE_DIR}selection_handle_drop_right.png" },
182       "enableScrollBar":true,
183       "scrollBarShowDuration":0.8,
184       "scrollBarFadeDuration":0.5
185     },
186     "Popup":
187     {
188       "popupBackgroundImage":"{DALI_IMAGE_DIR}00_popup_bg.9.png",
189       "tailUpImage":"{DALI_IMAGE_DIR}popup_tail_up.png",
190       "tailDownImage":"{DALI_IMAGE_DIR}popup_tail_down.png",
191       "tailLeftImage":"{DALI_IMAGE_DIR}popup_tail_left.png",
192       "tailRightImage":"{DALI_IMAGE_DIR}popup_tail_right.png",
193       "popupBackgroundBorder":[17,17,13,13]
194     },
195     "ConfirmationPopup":
196     {
197       "popupBackgroundImage":"{DALI_IMAGE_DIR}00_popup_bg.9.png",
198       "tailUpImage":"{DALI_IMAGE_DIR}popup_tail_up.png",
199       "tailDownImage":"{DALI_IMAGE_DIR}popup_tail_down.png",
200       "tailLeftImage":"{DALI_IMAGE_DIR}popup_tail_left.png",
201       "tailRightImage":"{DALI_IMAGE_DIR}popup_tail_right.png",
202       "popupBackgroundBorder":[17,17,13,13]
203     },
204     "Slider":
205     {
206       "showPopup": true,
207       "showValue": true,
208       "valuePrecision": 0,
209       "trackVisual":{
210         "url":"{DALI_IMAGE_DIR}slider-skin.9.png",
211         "size":[27,27]
212       },
213       "progressVisual":{
214         "url":"{DALI_IMAGE_DIR}slider-skin-progress.9.png",
215         "size":[27,27]
216       },
217       "handleVisual":{
218         "url":"{DALI_IMAGE_DIR}slider-skin-handle.png",
219         "size":[72,72]
220       },
221       "popupVisual":"{DALI_IMAGE_DIR}slider-popup.9.png",
222       "popupArrowVisual":"{DALI_IMAGE_DIR}slider-popup-arrow.9.png",
223       "disableColor":[0.5, 0.5, 0.5, 1.0],
224       "popupTextColor":[0.5,0.5,0.5,1.0],
225       "hitRegion":[0, 72],
226       "marks":[],
227       "snapToMarks":false,
228       "markTolerance":0.05
229     },
230     "SliderHandleTextLabel":
231     {
232       "textColor":[0.8,0.8,1,1]
233     },
234     "ProgressBar":
235     {
236       "trackVisual":{
237         "visualType":"IMAGE",
238         "url":"{DALI_IMAGE_DIR}progress-bar-skin-track.9.png"
239       },
240       "progressVisual":{
241         "visualType":"IMAGE",
242         "url":"{DALI_IMAGE_DIR}progress-bar-skin-progress.9.png"
243       },
244       "secondaryProgressVisual":{
245         "visualType":"IMAGE",
246         "url":"{DALI_IMAGE_DIR}progress-bar-skin-secondary-progress.9.png"
247       },
248       "indeterminateVisual":{
249         "visualType":"IMAGE",
250         "pixelArea":[0.0, 0.0, 10.0, 1.0],
251         "wrapModeU":"REPEAT",
252         "url":"{DALI_IMAGE_DIR}progress-bar-skin-indeterminate.png"
253       },
254       "indeterminateVisualAnimation":
255       [
256         {
257           "target":"indeterminateVisual",
258           "property":"pixelArea",
259           "initialValue":[0.0, 0.0, 10.0, 1.0],
260           "targetValue":[-1.0, 0.0, 10.0, 1.0],
261           "animator":
262           {
263             "alphaFunction":"DEFAULT",
264             "timePeriod":
265             {
266               "duration":0.8,
267               "delay":0
268             }
269           }
270         }
271       ],
272       "labelVisual":{
273         "visualType": "TEXT",
274         "textColor": [ 1.0, 1.0, 1.0, 1.0 ],
275         "pointSize" : 12.0, // Point size must always be provided to Text Visual
276         "horizontalAlignment": "CENTER",
277         "verticalAlignment": "CENTER"
278       },
279       "progressValue": 0.0,
280       "secondaryProgressValue":0.0,
281       "indeterminate": false
282     },
283     "Button":
284     {
285       "initialAutoRepeatingDelay":2.0,
286       "nextAutoRepeatingDelay":0.9
287       // Note: Visuals added to Button will be used in all derived buttons unless overridden.
288     },
289     "PushButton":
290     {
291       "styles":["Button"],
292       "autoRepeating":false,
293       "togglable":false,
294       "labelPadding":[ 12.0, 12.0, 12.0, 12.0 ],
295       "label":
296        {
297          "visualType": "TEXT",
298          "horizontalAlignment": "CENTER",
299          "pointSize" : 10.0, // Point size must always be provided to Text Visual
300          "verticalAlignment": "CENTER"
301        },
302       "unselectedBackgroundVisual":
303        {
304          "visualType": "IMAGE",
305          "url": "{DALI_IMAGE_DIR}button-up.9.png"
306        },
307        "selectedBackgroundVisual":
308        {
309          "visualType": "IMAGE",
310          "url": "{DALI_IMAGE_DIR}button-down.9.png"
311        },
312        "disabledSelectedBackgroundVisual":
313        {
314          "visualType": "IMAGE",
315          "url": "{DALI_IMAGE_DIR}button-down-disabled.9.png"
316        },
317        "disabledUnselectedBackgroundVisual":
318        {
319          "visualType": "IMAGE",
320          "url": "{DALI_IMAGE_DIR}button-disabled.9.png"
321        }
322     },
323     "CheckBoxButton":
324     {
325       "styles":["Button"],
326       "labelPadding":[ 12.0, 12.0, 0.0, 0.0 ],
327       "label":
328        {
329          "visualType": "TEXT",
330          "pointSize" : 10.0, // Point size must always be provided to Text Visual
331          "verticalAlignment": "CENTER"
332        },
333       "unselectedVisual":
334       {
335         "visualType": "IMAGE",
336         "url": "{DALI_IMAGE_DIR}checkbox-unselected.png"
337       },
338       "selectedVisual":
339       {
340         "visualType": "IMAGE",
341         "url": "{DALI_IMAGE_DIR}checkbox-selected.png"
342       },
343       "disabledUnselectedVisual":
344       {
345         "visualType": "IMAGE",
346         "url": "{DALI_IMAGE_DIR}checkbox-unselected-disabled.png"
347       },
348       "disabledSelectedVisual":
349       {
350         "visualType": "IMAGE",
351         "url": "{DALI_IMAGE_DIR}checkbox-selected-disabled.png"
352       }
353     },
354     "RadioButton":
355     {
356       "styles":["Button"],
357       "labelPadding":[ 12.0, 12.0, 0.0, 0.0 ],
358       "label":
359        {
360          "visualType": "TEXT",
361          "pointSize" : 10.0, // Point size must always be provided to Text Visual
362          "verticalAlignment": "CENTER"
363        },
364       "unselectedVisual":
365       {
366         "visualType": "IMAGE",
367         "url": "{DALI_IMAGE_DIR}radio-button-unselected.png"
368       },
369       "selectedVisual":
370       {
371         "visualType": "IMAGE",
372         "url": "{DALI_IMAGE_DIR}radio-button-selected.png"
373       },
374       "disabledUnselectedVisual":
375       {
376         "visualType": "IMAGE",
377         "url": "{DALI_IMAGE_DIR}radio-button-unselected-disabled.png"
378       },
379       "disabledSelectedVisual":
380       {
381         "visualType": "IMAGE",
382         "url": "{DALI_IMAGE_DIR}radio-button-selected-disabled.png"
383       }
384     }
385   }
386 }