[Timepicker] UX1.1: popup spinner text color is changed in light theme and spinner...
[platform/core/uifw/efl-theme-tizen.git] / themes / widgets / datetime.edc
index 04a6ce9..185d159 100644 (file)
@@ -20,7 +20,7 @@
 // datetime
 ///////////////////////////////////////////////////////////////////////////////
 
-#define DATETIME_FIELD(_pos, prev_part) \
+#define DATETIME_PADDING(_pos, prev_part) \
    part {\
       name: "picker.padding"#_pos; \
       type: RECT; \
       }\
    }\
    part {\
-      name: "field"#_pos".bg"; \
+      name: "left.padding"#_pos; \
       type: RECT; \
       scale: 1;\
       clip_to: "clipper";\
+      mouse_events: 0;\
       description { state: "default" 0.0; \
+         color: 0 0 0 0;\
+         min: 0 0;\
          visible: 0;\
          align: 0.0 0.5;\
          fixed: 1 0;\
          rel1 {\
-            relative: 0.0 0.0;\
-            to: "left.padding"#_pos;\
+            relative: 1.0 0.0;\
+            to: "picker.padding"#_pos;\
          }\
          rel2 {\
             relative: 1.0 1.0;\
-            to: "right.padding"#_pos;\
+            to: "picker.padding"#_pos;\
          }\
-         color: DATETIME_PICKER_BG_COLOR_INC;\
       }\
       description { state: "enable" 0.0;\
          inherit: "default" 0.0;\
-         visible: 1;\
+         min: DATETIME_FIELD_LEFT_PADDING_SIZE_INC;\
       }\
    }\
    part {\
-      name: "left.padding"#_pos; \
-      type: RECT; \
+      name: "right.padding"#_pos; \
+      type: RECT;\
       scale: 1;\
       clip_to: "clipper";\
-      description { state: "default" 0.0; \
+      mouse_events: 0;\
+      description {\
+         state: "default" 0.0;\
          color: 0 0 0 0;\
+         visible: 0;\
          min: 0 0;\
          align: 0.0 0.5;\
          fixed: 1 0;\
          rel1 {\
             relative: 1.0 0.0;\
-            to: "picker.padding"#_pos;\
+            to: "field"#_pos;\
          }\
          rel2 {\
             relative: 1.0 1.0;\
-            to: "picker.padding"#_pos;\
+            to: "field"#_pos;\
          }\
       }\
       description { state: "enable" 0.0;\
          inherit: "default" 0.0;\
-         min: DATETIME_FIELD_LEFT_PADDING_SIZE_INC;\
+         min: DATETIME_FIELD_RIGHT_PADDING_SIZE_INC;\
       }\
    }\
+   programs{\
+      program {\
+         name: "field_"#_pos"enabled";\
+         signal: "field"#_pos",enable";\
+         source: "elm";\
+         action: STATE_SET "enable" 0.0;\
+         target: "left.padding"#_pos;\
+         target: "right.padding"#_pos;\
+         target: "field"#_pos;\
+      }\
+      program {\
+         name: "field_"#_pos"disabled";\
+         signal: "field"#_pos",disable";\
+         source: "elm";\
+         action: STATE_SET "default" 0.0;\
+         target: "left.padding"#_pos;\
+         target: "right.padding"#_pos;\
+         target: "field"#_pos;\
+      }\
+   }
+
+#define DATETIME_FIELD(_pos) \
    part {\
       name: "field"#_pos; \
       type: SWALLOW; \
       type: TEXT;\
       scale: 1;\
       clip_to: "clipper";\
+      mouse_events: 0;\
       description {\
          state: "default" 0.0;\
          visible: 0;\
          fixed: 1 0;\
          rel1 {\
             relative: 1.0 0.0;\
-            to: "field"#_pos;\
+            to: "right.padding"#_pos;\
          }\
          rel2 {\
             relative: 1.0 1.0;\
-            to: "field"#_pos;\
+            to: "right.padding"#_pos;\
          }\
          color: DATETIME_SEPARATOR_TEXT_COLOR_INC;\
          text {\
          min: DATETIME_SEPARATOR_MIN_SIZE_INC;\
       }\
    }\
+   programs{\
+      program {\
+         name: "separator"#_pos",enabled";\
+         signal: "field"#_pos",separator,enable";\
+         source: "elm";\
+         action: STATE_SET "enable" 0.0;\
+         target: "separator"#_pos;\
+      }\
+      program {\
+         name: "separator"#_pos",disabled";\
+         signal: "field"#_pos",separator,disable";\
+         source: "elm";\
+         action: STATE_SET "default" 0.0;\
+         target: "separator"#_pos;\
+      }\
+   }
+
+#define DATETIME_PICKER_PADDING_PROGRAMS \
+      program {\
+         name: "datepicker_starting_field2_padding";\
+         signal: "datepicker,starting,field2";\
+         source: "elm";\
+         script {\
+            set_state(PART:"picker.padding2", "enable", 0.0);\
+            set_state(PART:"picker.padding3", "default", 0.0);\
+         }\
+      }\
+      program {\
+         name: "datepicker_starting_field3_padding";\
+         signal: "datepicker,starting,field3";\
+         source: "elm";\
+         script {\
+            set_state(PART:"picker.padding3", "enable", 0.0);\
+            set_state(PART:"picker.padding2", "default", 0.0);\
+         }\
+      }\
+      program {\
+         name: "timepicker_starting_field3_padding";\
+         signal: "timepicker,starting,field3";\
+         source: "elm";\
+         script {\
+            set_state(PART:"picker.padding2", "default", 0.0);\
+            set_state(PART:"picker.padding3", "enable", 0.0);\
+         }\
+      }\
+      program {\
+         name: "timepicker_starting_field0_padding";\
+         signal: "timepicker,starting,field0";\
+         source: "elm";\
+         action: STATE_SET "default" 0.0;\
+         target: "picker.padding0";\
+      }\
+      program {\
+         name: "datepicker_starting_field1_padding";\
+         signal: "datepicker,starting,field1";\
+         source: "elm";\
+         action: STATE_SET "default" 0.0;\
+         target: "picker.padding0";\
+         target: "picker.padding2";\
+         target: "picker.padding3";\
+      }\
+      program {\
+         name: "datepicker_starting_field4_padding";\
+         signal: "datepicker,starting,field4";\
+         source: "elm";\
+         action: STATE_SET "default" 0.0;\
+         target: "picker.padding0";\
+         target: "picker.padding2";\
+         target: "picker.padding3";\
+      }
+
+
+#define DATETIME_DATEPICKER_BG \
+   part {\
+      name: "date.picker.left.pad"; \
+      type: RECT;\
+      scale: 1;\
+      description { state: "default" 0.0; \
+         min: 0 0;\
+         visible: 0;\
+         align: 1.0 0.5; \
+         fixed: 1 0;\
+         rel1 {\
+            relative: 0.0 0.0;\
+            to: "left.padding0";\
+         }\
+         rel2 {\
+            relative: 0.0 1.0;\
+            to: "left.padding0";\
+         }\
+      }\
+      description { state: "datefirst" 0.0;\
+         inherit: "default" 0.0;\
+         min: DATETIME_PICKER_BG_PADDING_SIZE_INC;\
+      }\
+      description { state: "timefirst" 0.0;\
+         inherit: "default" 0.0;\
+         min: DATETIME_PICKER_BG_PADDING_SIZE_INC;\
+         rel1 {\
+            relative: 0.0 0.0;\
+            to: "left.padding3";\
+         }\
+         rel2 {\
+            relative: 0.0 1.0;\
+            to: "left.padding3";\
+         }\
+      }\
+      description { state: "timefirst24hr" 0.0;\
+         inherit: "default" 0.0;\
+         min: DATETIME_PICKER_BG_PADDING_SIZE_INC;\
+         rel1 {\
+            relative: 0.0 0.0;\
+            to: "left.padding2";\
+         }\
+         rel2 {\
+            relative: 0.0 1.0;\
+            to: "left.padding2";\
+         }\
+      }\
+   }\
    part {\
-      name: "right.padding"#_pos; \
+      name: "date.picker.right.pad"; \
       type: RECT;\
       scale: 1;\
-      clip_to: "clipper";\
-      description {\
-         state: "default" 0.0;\
-         color: 0 0 0 0;\
+      description { state: "default" 0.0; \
          min: 0 0;\
-         align: 0.0 0.5;\
+         visible: 0;\
+         align: 0.0 0.5; \
          fixed: 1 0;\
          rel1 {\
             relative: 1.0 0.0;\
-            to: "separator"#_pos;\
+            to: "separator2";\
          }\
          rel2 {\
             relative: 1.0 1.0;\
-            to: "separator"#_pos;\
+            to: "separator2";\
          }\
       }\
-      description { state: "enable" 0.0;\
+      description { state: "datefirst" 0.0;\
+         inherit: "default" 0.0;\
+         min: DATETIME_PICKER_BG_PADDING_SIZE_INC;\
+      }\
+      description { state: "timefirst" 0.0;\
+         inherit: "default" 0.0;\
+         min: DATETIME_PICKER_BG_PADDING_SIZE_INC;\
+         rel1 {\
+            relative: 1.0 0.0;\
+            to: "separator5";\
+         }\
+         rel2 {\
+            relative: 1.0 1.0;\
+            to: "separator5";\
+         }\
+      }\
+      description { state: "timefirst24hr" 0.0;\
+         inherit: "default" 0.0;\
+         min: DATETIME_PICKER_BG_PADDING_SIZE_INC;\
+         rel1 {\
+            relative: 1.0 0.0;\
+            to: "separator4";\
+         }\
+         rel2 {\
+            relative: 1.0 1.0;\
+            to: "separator4";\
+         }\
+      }\
+   }\
+   part {\
+      name: "date.picker.bg"; \
+      scale: 1;\
+      description { state: "default" 0.0; \
+         min: 0 0;\
+         visible: 0;\
+         fixed: 1 0;\
+         image {\
+            normal: "00_button_01.png";\
+            border: DATETIME_BG_IMAGE_BORDER_INC;\
+            border_scale: 1;\
+         }\
+         rel1 {\
+            relative: 0.0 0.0;\
+            to: "date.picker.left.pad";\
+         }\
+         rel2 {\
+            relative: 1.0 1.0;\
+            to: "date.picker.right.pad";\
+         }\
+      }\
+      description { state: "datefirst" 0.0;\
+         inherit: "default" 0.0;\
+         visible: 1;\
+      }\
+      description { state: "timefirst" 0.0;\
+         inherit: "default" 0.0;\
+         visible: 1;\
+      }\
+      description { state: "timefirst24hr" 0.0;\
+         inherit: "default" 0.0;\
+         visible: 1;\
+      }\
+      description { state: "datefirst_press" 0.0;\
+         inherit: "datefirst" 0.0;\
+         image {\
+            normal: "00_button_01_press.png";\
+            border: DATETIME_BG_IMAGE_BORDER_INC;\
+            border_scale: 1;\
+         }\
+      }\
+      description { state: "timefirst_press" 0.0;\
+         inherit: "timefirst" 0.0;\
+         image {\
+            normal: "00_button_01_press.png";\
+            border: DATETIME_BG_IMAGE_BORDER_INC;\
+            border_scale: 1;\
+         }\
+      }\
+      description { state: "timefirst24hr_press" 0.0;\
+         inherit: "timefirst24hr" 0.0;\
+         image {\
+            normal: "00_button_01_press.png";\
+            border: DATETIME_BG_IMAGE_BORDER_INC;\
+            border_scale: 1;\
+         }\
+      }\
+   }\
+   part {\
+      name: "datepicker.focus";\
+      scale: 1;\
+      description {\
+         state: "default" 0.0;\
+         visible: 0;\
+         rel1.to : "date.picker.bg";\
+         rel2.to : "date.picker.bg";\
+         image {\
+            normal: "00_button_01_focus.png";\
+            border: DATETIME_BG_IMAGE_BORDER_INC;\
+            border_scale: 1;\
+         }\
+      }\
+      description { state: "focus" 0.0;\
          inherit: "default" 0.0;\
          visible: 1;\
-         min: DATETIME_FIELD_RIGHT_PADDING_SIZE_INC;\
       }\
    }\
    programs{\
       program {\
-         name: "field_"#_pos"enabled";\
-         signal: "field"#_pos",enable";\
+         name: "datepicker_starting_field0";\
+         signal: "datepicker,starting,field0";\
          source: "elm";\
-         action: STATE_SET "enable" 0.0;\
-         target: "field"#_pos;\
-         target: "left.padding"#_pos;\
-         target: "right.padding"#_pos;\
-         target: "field"#_pos".bg";\
+         action: STATE_SET "datefirst" 0.0;\
+         target: "date.picker.bg";\
+         target: "date.picker.left.pad";\
+         target: "date.picker.right.pad";\
       }\
       program {\
-         name: "field_"#_pos"disabled";\
-         signal: "field"#_pos",disable";\
+         name: "datepicker_starting_field3";\
+         signal: "datepicker,starting,field3";\
+         source: "elm";\
+         action: STATE_SET "timefirst" 0.0;\
+         target: "date.picker.bg";\
+         target: "date.picker.left.pad";\
+         target: "date.picker.right.pad";\
+      }\
+      program {\
+         name: "datepicker_starting_field2";\
+         signal: "datepicker,starting,field2";\
+         source: "elm";\
+         action: STATE_SET "timefirst24hr" 0.0;\
+         target: "date.picker.bg";\
+         target: "date.picker.left.pad";\
+         target: "date.picker.right.pad";\
+      }\
+      program {\
+         name: "datepicker_starting_field1";\
+         signal: "datepicker,starting,field1";\
          source: "elm";\
          action: STATE_SET "default" 0.0;\
-         target: "field"#_pos;\
-         target: "left.padding"#_pos;\
-         target: "right.padding"#_pos;\
-         target: "field"#_pos".bg";\
+         target: "date.picker.bg";\
+         target: "date.picker.left.pad";\
+         target: "date.picker.right.pad";\
       }\
       program {\
-         name: "separator"#_pos",enabled";\
-         signal: "field"#_pos",separator,enable";\
+         name: "datepicker_starting_field4";\
+         signal: "datepicker,starting,field4";\
          source: "elm";\
-         action: STATE_SET "enable" 0.0;\
-         target: "separator"#_pos;\
+         action: STATE_SET "default" 0.0;\
+         target: "date.picker.bg";\
+         target: "date.picker.left.pad";\
+         target: "date.picker.right.pad";\
       }\
       program {\
-         name: "separator"#_pos",disabled";\
-         signal: "field"#_pos",separator,disable";\
+         name: "datepicker_starting_field5";\
+         signal: "datepicker,starting,field5";\
          source: "elm";\
          action: STATE_SET "default" 0.0;\
-         target: "separator"#_pos;\
+         target: "date.picker.bg";\
+         target: "date.picker.left.pad";\
+         target: "date.picker.right.pad";\
+      }\
+      program {\
+         name: "datepicker_mouse_down";\
+         signal: "mouse,down,1";\
+         source: "date.picker.bg";\
+         script {\
+            new st[31];\
+            new Float:vl;\
+            get_state(PART:"date.picker.bg", st, 30, vl);\
+            if (!strcmp(st, "datefirst")) {\
+              set_state(PART:"date.picker.bg", "datefirst_press", 0.0);\
+            }\
+            else if (!strcmp(st, "timefirst")) {\
+              set_state(PART:"date.picker.bg", "timefirst_press", 0.0);\
+            }\
+            else if (!strcmp(st, "timefirst24hr")) {\
+              set_state(PART:"date.picker.bg", "timefirst24hr_press", 0.0);\
+            }\
+         }\
+      }\
+      program {\
+         name: "datepicker_mouse_up";\
+         signal: "mouse,up,1";\
+         source: "date.picker.bg";\
+         script {\
+            new st[31];\
+            new Float:vl;\
+            get_state(PART:"date.picker.bg", st, 30, vl);\
+            if (!strcmp(st, "datefirst_press")) {\
+              set_state(PART:"date.picker.bg", "datefirst", 0.0);\
+            }\
+            else if (!strcmp(st, "timefirst_press")) {\
+              set_state(PART:"date.picker.bg", "timefirst", 0.0);\
+            }\
+            else if (!strcmp(st, "timefirst24hr_press")) {\
+              set_state(PART:"date.picker.bg", "timefirst24hr", 0.0);\
+            }\
+         }\
+      }\
+      program {\
+         name: "datepicker_focus";\
+         signal: "elm,action,focus_highlight,show";\
+         source: "elm";\
+         action: STATE_SET "focus" 0.0;\
+         target: "datepicker.focus";\
+      }\
+      program {\
+         name: "datepicker_unfocus";\
+         signal: "elm,action,focus_highlight,hide";\
+         source: "elm";\
+         action: STATE_SET "default" 0.0;\
+         target: "datepicker.focus";\
+      }\
+      program { name: "datepicker_touch_snd";\
+         signal: "mouse,clicked,1";\
+         source: "date.picker.bg";\
+         action: PLAY_SAMPLE "touch_sound" 1.0;\
+      }\
+   }
+
+#define DATETIME_TIMEPICKER_BG \
+   part {\
+      name: "time.picker.left.pad"; \
+      type: RECT;\
+      scale: 1;\
+      description { state: "default" 0.0; \
+         min: 0 0;\
+         visible: 0;\
+         align: 1.0 0.5; \
+         fixed: 1 0;\
+         rel1 {\
+            relative: 0.0 0.0;\
+            to: "left.padding3";\
+         }\
+         rel2 {\
+            relative: 0.0 1.0;\
+            to: "left.padding3";\
+         }\
+      }\
+      description { state: "datefirst" 0.0;\
+         inherit: "default" 0.0;\
+         min: DATETIME_PICKER_BG_PADDING_SIZE_INC;\
+      }\
+      description { state: "timefirst" 0.0;\
+         inherit: "default" 0.0;\
+         min: DATETIME_PICKER_BG_PADDING_SIZE_INC;\
+         rel1 {\
+            relative: 0.0 0.0;\
+            to: "left.padding0";\
+         }\
+         rel2 {\
+            relative: 0.0 1.0;\
+            to: "left.padding0";\
+         }\
+      }\
+      description { state: "timefirst24hr" 0.0;\
+         inherit: "default" 0.0;\
+         min: DATETIME_PICKER_BG_PADDING_SIZE_INC;\
+         rel1 {\
+            relative: 0.0 0.0;\
+            to: "left.padding0";\
+         }\
+         rel2 {\
+            relative: 0.0 1.0;\
+            to: "left.padding0";\
+         }\
       }\
-   }
-
-#define DATETIME_DATEPICKER_BG \
+   }\
    part {\
-      name: "date.picker.bg"; \
+      name: "time.picker.right.pad"; \
+      type: RECT;\
       scale: 1;\
-      clip_to: "clipper";\
       description { state: "default" 0.0; \
          min: 0 0;\
          visible: 0;\
+         align: 0.0 0.5; \
          fixed: 1 0;\
-         image {\
-            normal: "00_button_01.png";\
-            border: DATETIME_BG_IMAGE_BORDER_INC;\
-            border_scale: 1;\
-         }\
          rel1 {\
-            relative: 0.0 0.0;\
-            to: "left.padding0";\
+            relative: 1.0 0.0;\
+            to: "right.padding5";\
          }\
          rel2 {\
             relative: 1.0 1.0;\
-            to: "right.padding2";\
+            to: "right.padding5";\
          }\
       }\
       description { state: "datefirst" 0.0;\
          inherit: "default" 0.0;\
-         visible: 1;\
+         min: DATETIME_PICKER_BG_PADDING_SIZE_INC;\
       }\
       description { state: "timefirst" 0.0;\
          inherit: "default" 0.0;\
-         visible: 1;\
+         min: DATETIME_PICKER_BG_PADDING_SIZE_INC;\
          rel1 {\
-            relative: 0.0 0.0;\
-            to: "left.padding3";\
+            relative: 1.0 0.0;\
+            to: "right.padding2";\
          }\
          rel2 {\
             relative: 1.0 1.0;\
-            to: "right.padding5";\
+            to: "right.padding2";\
          }\
       }\
       description { state: "timefirst24hr" 0.0;\
          inherit: "default" 0.0;\
-         visible: 1;\
+         min: DATETIME_PICKER_BG_PADDING_SIZE_INC;\
          rel1 {\
-            relative: 0.0 0.0;\
-            to: "left.padding2";\
+            relative: 1.0 0.0;\
+            to: "right.padding1";\
          }\
          rel2 {\
             relative: 1.0 1.0;\
-            to: "right.padding4";\
+            to: "right.padding1";\
          }\
       }\
    }\
-   programs{\
-      program {\
-         name: "datepicker_starting_field0";\
-         signal: "datepicker,starting,field0";\
-         source: "elm";\
-         action: STATE_SET "datefirst" 0.0;\
-         target: "date.picker.bg";\
-      }\
-      program {\
-         name: "datepicker_starting_field3";\
-         signal: "datepicker,starting,field3";\
-         source: "elm";\
-         action: STATE_SET "timefirst" 0.0;\
-         target: "date.picker.bg";\
-      }\
-      program {\
-         name: "datepicker_starting_field2";\
-         signal: "datepicker,starting,field3";\
-         source: "elm";\
-         action: STATE_SET "timefirst24hr" 0.0;\
-         target: "date.picker.bg";\
-      }\
-      program {\
-         name: "datepicker_starting_field1";\
-         signal: "datepicker,starting,field1";\
-         source: "elm";\
-         action: STATE_SET "default" 0.0;\
-         target: "date.picker.bg";\
-      }\
-      program {\
-         name: "datepicker_starting_field4";\
-         signal: "datepicker,starting,field4";\
-         source: "elm";\
-         action: STATE_SET "default" 0.0;\
-         target: "date.picker.bg";\
-      }\
-      program {\
-         name: "datepicker_starting_field5";\
-         signal: "datepicker,starting,field5";\
-         source: "elm";\
-         action: STATE_SET "default" 0.0;\
-         target: "date.picker.bg";\
-      }\
-   }
-
-#define DATETIME_TIMEPICKER_BG \
    part {\
       name: "time.picker.bg"; \
       scale: 1;\
-      clip_to: "clipper";\
       description { state: "default" 0.0; \
          min: 0 0;\
          visible: 0;\
          }\
          rel1 {\
             relative: 0.0 0.0;\
-            to: "left.padding3";\
+            to: "time.picker.left.pad";\
          }\
          rel2 {\
             relative: 1.0 1.0;\
-            to: "right.padding5";\
+            to: "time.picker.right.pad";\
          }\
       }\
       description { state: "datefirst" 0.0;\
       description { state: "timefirst" 0.0;\
          inherit: "default" 0.0;\
          visible: 1;\
-         rel1 {\
-            relative: 0.0 0.0;\
-            to: "left.padding0";\
-         }\
-         rel2 {\
-            relative: 1.0 1.0;\
-            to: "right.padding2";\
-         }\
       }\
       description { state: "timefirst24hr" 0.0;\
          inherit: "default" 0.0;\
          visible: 1;\
-         rel1 {\
-            relative: 0.0 0.0;\
-            to: "left.padding0";\
+      }\
+      description { state: "datefirst_press" 0.0;\
+         inherit: "datefirst" 0.0;\
+         image {\
+            normal: "00_button_01_press.png";\
+            border: DATETIME_BG_IMAGE_BORDER_INC;\
+            border_scale: 1;\
          }\
-         rel2 {\
-            relative: 1.0 1.0;\
-            to: "right.padding1";\
+      }\
+      description { state: "timefirst_press" 0.0;\
+         inherit: "timefirst" 0.0;\
+         image {\
+            normal: "00_button_01_press.png";\
+            border: DATETIME_BG_IMAGE_BORDER_INC;\
+            border_scale: 1;\
+         }\
+      }\
+      description { state: "timefirst24hr_press" 0.0;\
+         inherit: "timefirst24hr" 0.0;\
+         image {\
+            normal: "00_button_01_press.png";\
+            border: DATETIME_BG_IMAGE_BORDER_INC;\
+            border_scale: 1;\
+         }\
+      }\
+   }\
+   part {\
+      name: "timepicker.focus";\
+      scale: 1;\
+      description {\
+         state: "default" 0.0;\
+         visible: 0;\
+         rel1.to : "time.picker.bg";\
+         rel2.to : "time.picker.bg";\
+         image {\
+            normal: "00_button_01_focus.png";\
+            border: DATETIME_BG_IMAGE_BORDER_INC;\
+            border_scale: 1;\
          }\
       }\
+      description { state: "focus" 0.0;\
+         inherit: "default" 0.0;\
+         visible: 1;\
+      }\
    }\
    programs{\
       program {\
          name: "timepicker_starting_field3";\
          signal: "timepicker,starting,field3";\
          source: "elm";\
-         action: STATE_SET "datefirst" 0.0;\
-         target: "time.picker.bg";\
+         in: 0.001 0.0;\
+         script {\
+            new st[31];\
+            new Float:vl;\
+            get_state(PART:"field3", st, 30, vl);\
+            if (!strcmp(st, "enable")) {\
+              set_state(PART:"time.picker.bg", "datefirst", 0.0);\
+              set_state(PART:"time.picker.left.pad", "datefirst", 0.0);\
+              set_state(PART:"time.picker.right.pad", "datefirst", 0.0);\
+            }\
+         }\
       }\
       program {\
          name: "timepicker_starting_field0";\
          signal: "timepicker,starting,field0";\
          source: "elm";\
+         in: 0.001 0.0;\
          script {\
             new st[31];\
             new Float:vl;\
             get_state(PART:"date.picker.bg", st, 30, vl);\
-            if (!strcmp(st, "timefirst24hr"))\
+            if (!strcmp(st, "timefirst24hr")) {\
               set_state(PART:"time.picker.bg", "timefirst24hr", 0.0);\
-            else\
+              set_state(PART:"time.picker.left.pad", "timefirst24hr", 0.0);\
+              set_state(PART:"time.picker.right.pad", "timefirst24hr", 0.0);\
+            }\
+            else {\
               set_state(PART:"time.picker.bg", "timefirst", 0.0);\
+              set_state(PART:"time.picker.left.pad", "timefirst", 0.0);\
+              set_state(PART:"time.picker.right.pad", "timefirst", 0.0);\
+            }\
          }\
       }\
       program {\
          source: "elm";\
          action: STATE_SET "default" 0.0;\
          target: "time.picker.bg";\
+         target: "time.picker.left.pad";\
+         target: "time.picker.right.pad";\
       }\
       program {\
          name: "timepicker_starting_field2";\
          source: "elm";\
          action: STATE_SET "default" 0.0;\
          target: "time.picker.bg";\
+         target: "time.picker.left.pad";\
+         target: "time.picker.right.pad";\
       }\
       program {\
          name: "timepicker_starting_field4";\
          source: "elm";\
          action: STATE_SET "default" 0.0;\
          target: "time.picker.bg";\
+         target: "time.picker.left.pad";\
+         target: "time.picker.right.pad";\
       }\
       program {\
          name: "timepicker_starting_field5";\
          source: "elm";\
          action: STATE_SET "default" 0.0;\
          target: "time.picker.bg";\
+         target: "time.picker.left.pad";\
+         target: "time.picker.right.pad";\
       }\
-   }
-
-#define DATETIME_PICKER_BG_PROGRAMS \
       program {\
-         name: "datepicker_starting_field2_bg";\
-         signal: "datepicker,starting,field2";\
-         source: "elm";\
+         name: "timepicker_mouse_down";\
+         signal: "mouse,down,1";\
+         source: "time.picker.bg";\
          script {\
-            set_state(PART:"picker.padding2", "enable", 0.0);\
-            set_state(PART:"picker.padding3", "default", 0.0);\
+            new st[31];\
+            new Float:vl;\
+            get_state(PART:"time.picker.bg", st, 30, vl);\
+            if (!strcmp(st, "datefirst")) {\
+              set_state(PART:"time.picker.bg", "datefirst_press", 0.0);\
+            }\
+            else if (!strcmp(st, "timefirst")) {\
+              set_state(PART:"time.picker.bg", "timefirst_press", 0.0);\
+            }\
+            else if (!strcmp(st, "timefirst24hr")) {\
+              set_state(PART:"time.picker.bg", "timefirst24hr_press", 0.0);\
+            }\
          }\
       }\
       program {\
-         name: "datepicker_starting_field3_bg";\
-         signal: "datepicker,starting,field3";\
-         source: "elm";\
+         name: "timepicker_mouse_up";\
+         signal: "mouse,up,1";\
+         source: "time.picker.bg";\
          script {\
-            set_state(PART:"picker.padding3", "enable", 0.0);\
-            set_state(PART:"picker.padding2", "default", 0.0);\
+            new st[31];\
+            new Float:vl;\
+            get_state(PART:"time.picker.bg", st, 30, vl);\
+            if (!strcmp(st, "datefirst_press")) {\
+              set_state(PART:"time.picker.bg", "datefirst", 0.0);\
+            }\
+            else if (!strcmp(st, "timefirst_press")) {\
+              set_state(PART:"time.picker.bg", "timefirst", 0.0);\
+            }\
+            else if (!strcmp(st, "timefirst24hr_press")) {\
+              set_state(PART:"time.picker.bg", "timefirst24hr", 0.0);\
+            }\
          }\
       }\
       program {\
-         name: "timepicker_starting_field3_bg";\
-         signal: "timepicker,starting,field3";\
+         name: "timepicker_focus";\
+         signal: "elm,action,focus_highlight,show";\
          source: "elm";\
-         script {\
-            set_state(PART:"picker.padding3", "enable", 0.0);\
-            set_state(PART:"picker.padding2", "default", 0.0);\
-         }\
+         action: STATE_SET "focus" 0.0;\
+         target: "timepicker.focus";\
       }\
       program {\
-         name: "timepicker_starting_field0_bg";\
-         signal: "timepicker,starting,field0";\
+         name: "timepicker_unfocus";\
+         signal: "elm,action,focus_highlight,hide";\
          source: "elm";\
          action: STATE_SET "default" 0.0;\
-         target: "picker.padding0";\
+         target: "timepicker.focus";\
       }\
-      program {\
-         name: "datepicker_starting_field1_bg";\
-         signal: "datepicker,starting,field1";\
-         source: "elm";\
-         action: STATE_SET "default" 0.0;\
-         target: "picker.padding0";\
-         target: "picker.padding2";\
-         target: "picker.padding3";\
+      program { name: "timepicker_touch_snd";\
+         signal: "mouse,clicked,1";\
+         source: "time.picker.bg";\
+         action: PLAY_SAMPLE "touch_sound" 1.0;\
       }\
-      program {\
-         name: "datepicker_starting_field4_bg";\
-         signal: "datepicker,starting,field4";\
-         source: "elm";\
-         action: STATE_SET "default" 0.0;\
-         target: "picker.padding0";\
-         target: "picker.padding2";\
-         target: "picker.padding3";\
-      }
+   }
 
 group { name: "elm/datetime/base/default";
    images {
       image: "00_button_01.png" COMP;
       image: "00_button_01_press.png" COMP;
+      image: "00_button_01_focus.png" COMP;
    }
    parts {
       part {
@@ -498,7 +872,7 @@ group { name: "elm/datetime/base/default";
             visible: 0;
             min: DATETIME_WIDGET_PADDING_SIZE_INC;
             align: 0.0 0.5;
-            fixed: 1 1;
+            fixed: 1 0;
             rel1.to: "bg";
             rel2 {
                relative: 0.0 1.0;
@@ -517,8 +891,8 @@ group { name: "elm/datetime/base/default";
             visible: 0;
             min: DATETIME_WIDGET_PADDING_SIZE_INC;
             align: 1.0 0.5;
-            fixed: 1 1;
-            rel2 {
+            fixed: 1 0;
+            rel1 {
                relative: 1.0 0.0;
                to: "bg";
             }
@@ -526,15 +900,22 @@ group { name: "elm/datetime/base/default";
          }
       }
 
-      //DATETIME_DATEPICKER_BG
-      //DATETIME_TIMEPICKER_BG
+      DATETIME_PADDING(0, "left.padding")
+      DATETIME_PADDING(1, "separator0")
+      DATETIME_PADDING(2, "separator1")
+      DATETIME_PADDING(3, "separator2")
+      DATETIME_PADDING(4, "separator3")
+      DATETIME_PADDING(5, "separator4")
 
-      DATETIME_FIELD(0, "left.padding")
-      DATETIME_FIELD(1, "right.padding0")
-      DATETIME_FIELD(2, "right.padding1")
-      DATETIME_FIELD(3, "right.padding2")
-      DATETIME_FIELD(4, "right.padding3")
-      DATETIME_FIELD(5, "right.padding4")
+      DATETIME_DATEPICKER_BG
+      DATETIME_TIMEPICKER_BG
+
+      DATETIME_FIELD(0)
+      DATETIME_FIELD(1)
+      DATETIME_FIELD(2)
+      DATETIME_FIELD(3)
+      DATETIME_FIELD(4)
+      DATETIME_FIELD(5)
 
       part {
          name: "clipper";
@@ -553,6 +934,8 @@ group { name: "elm/datetime/base/default";
          description { state: "default" 0.0;
             color: 0 0 0 0;
             visible: 0;
+            rel1.to: "bg";
+            rel2.to: "bg";
          }
          description { state: "visible" 0.0;
             inherit: "default" 0.0;
@@ -577,7 +960,7 @@ group { name: "elm/datetime/base/default";
          target: "disabler";
          target: "clipper";
       }
-      DATETIME_PICKER_BG_PROGRAMS
+      DATETIME_PICKER_PADDING_PROGRAMS
    }
 }
 
@@ -890,9 +1273,70 @@ group { name: "elm/spinner/base/default";
             max: SPINNER_UP_DOWN_ARROW_IMAGE_SIZE_INC;
             image.normal: "00_picker_arrow_up.png";
          }
+      }
+      part { name: "up.image.arrow.shadow.proxy";
+         type: PROXY;
+         scale: 1;
+         clip_to: "up.image.arrow.shadow.clipper";
+         description { state: "default" 0.0;
+            source: "up.image.arrow";
+            proxy.source_clip: 0;
+            rel1 {
+               to: "up.image.arrow";
+               offset: SPINNER_UP_DOWN_ARROW_DEFAULT_TOP_OFFSET_INC;
+            }
+            rel2 {
+               to: "up.image.arrow";
+               offset: SPINNER_UP_DOWN_ARROW_DEFAULT_BOTTOM_OFFSET_INC;
+            }
+         }
          description { state: "pressed" 0.0;
             inherit: "default" 0.0;
-            image.normal: "00_picker_arrow_up.png";
+            rel1 {
+               to: "up.image.arrow";
+               offset: SPINNER_UP_DOWN_ARROW_PRESSED_TOP_OFFSET_INC;
+            }
+            rel2 {
+               to: "up.image.arrow";
+               offset: SPINNER_UP_DOWN_ARROW_PRESSED_BOTTOM_OFFSET_INC;
+            }
+         }
+      }
+      part { name: "up.image.arrow.proxy";
+         type: PROXY;
+         scale: 1;
+         clip_to: "up.image.arrow.clipper";
+         description { state: "default" 0.0;
+            source: "up.image.arrow";
+            proxy.source_clip: 0;
+            rel1.to: "up.image.arrow";
+            rel2.to: "up.image.arrow";
+         }
+      }
+      part { name: "up.image.arrow.shadow.clipper";
+         type: RECT;
+         scale: 1;
+         description { state: "default" 0.0;
+            rel1.to: "up.image.arrow";
+            rel2.to: "up.image.arrow";
+            color: SPINNER_UP_DOWN_ARROW_SHADOW_DEFAULT_COLOR_INC;
+         }
+         description { state: "pressed" 0.0;
+            inherit: "default" 0.0;
+            color: SPINNER_UP_DOWN_ARROW_SHADOW_PRESSED_COLOR_INC;
+         }
+      }
+      part { name: "up.image.arrow.clipper";
+         type: RECT;
+         scale: 1;
+         description { state: "default" 0.0;
+            rel1.to: "up.image.arrow";
+            rel2.to: "up.image.arrow";
+            color: SPINNER_UP_DOWN_ARROW_DEFAULT_COLOR_INC;
+         }
+         description { state: "pressed" 0.0;
+            inherit: "default" 0.0;
+            color: SPINNER_UP_DOWN_ARROW_PRESSED_COLOR_INC;
          }
       }
       part { name: "down.image";
@@ -921,9 +1365,70 @@ group { name: "elm/spinner/base/default";
             max: SPINNER_UP_DOWN_ARROW_IMAGE_SIZE_INC;
             image.normal: "00_picker_arrow_down.png";
          }
+      }
+      part { name: "down.image.arrow.shadow.proxy";
+         type: PROXY;
+         scale: 1;
+         clip_to: "down.image.arrow.shadow.clipper";
+         description { state: "default" 0.0;
+            source: "down.image.arrow";
+            proxy.source_clip: 0;
+            rel1 {
+               to: "down.image.arrow";
+               offset: SPINNER_UP_DOWN_ARROW_DEFAULT_TOP_OFFSET_INC;
+            }
+            rel2 {
+               to: "down.image.arrow";
+               offset: SPINNER_UP_DOWN_ARROW_DEFAULT_BOTTOM_OFFSET_INC;
+            }
+         }
          description { state: "pressed" 0.0;
             inherit: "default" 0.0;
-            image.normal: "00_picker_arrow_down.png";
+            rel1 {
+               to: "down.image.arrow";
+               offset: SPINNER_UP_DOWN_ARROW_PRESSED_TOP_OFFSET_INC;
+            }
+            rel2 {
+               to: "down.image.arrow";
+               offset: SPINNER_UP_DOWN_ARROW_PRESSED_BOTTOM_OFFSET_INC;
+            }
+         }
+      }
+      part { name: "down.image.arrow.proxy";
+         type: PROXY;
+         scale: 1;
+         clip_to: "down.image.arrow.clipper";
+         description { state: "default" 0.0;
+            source: "down.image.arrow";
+            proxy.source_clip: 0;
+            rel1.to: "down.image.arrow";
+            rel2.to: "down.image.arrow";
+         }
+      }
+      part { name: "down.image.arrow.shadow.clipper";
+         type: RECT;
+         scale: 1;
+         description { state: "default" 0.0;
+            rel1.to: "down.image.arrow";
+            rel2.to: "down.image.arrow";
+            color: SPINNER_UP_DOWN_ARROW_SHADOW_DEFAULT_COLOR_INC;
+         }
+         description { state: "pressed" 0.0;
+            inherit: "default" 0.0;
+            color: SPINNER_UP_DOWN_ARROW_SHADOW_PRESSED_COLOR_INC;
+         }
+      }
+      part { name: "down.image.arrow.clipper";
+         type: RECT;
+         scale: 1;
+         description { state: "default" 0.0;
+            rel1.to: "down.image.arrow";
+            rel2.to: "down.image.arrow";
+            color: SPINNER_UP_DOWN_ARROW_DEFAULT_COLOR_INC;
+         }
+         description { state: "pressed" 0.0;
+            inherit: "default" 0.0;
+            color: SPINNER_UP_DOWN_ARROW_PRESSED_COLOR_INC;
          }
       }
       part { name: "elm.text";
@@ -1032,7 +1537,9 @@ group { name: "elm/spinner/base/default";
          source: "down.btn";
          action:  STATE_SET "pressed" 0.0;
          target: "down.image";
-         target: "down.image.arrow";
+         target: "down.image.arrow.shadow.proxy";
+         target: "down.image.arrow.shadow.clipper";
+         target: "down.image.arrow.clipper";
          after: "dec_start_signal_emit";
       }
       program { name: "dec2";
@@ -1040,7 +1547,9 @@ group { name: "elm/spinner/base/default";
          source: "down.btn";
          action:  STATE_SET "default" 0.0;
          target: "down.image";
-         target: "down.image.arrow";
+         target: "down.image.arrow.shadow.proxy";
+         target: "down.image.arrow.shadow.clipper";
+         target: "down.image.arrow.clipper";
          after: "dec_stop_signal_emit";
       }
       program { name: "inc";
@@ -1048,7 +1557,9 @@ group { name: "elm/spinner/base/default";
          source: "up.btn";
          action:  STATE_SET "pressed" 0.0;
          target: "up.image";
-         target: "up.image.arrow";
+         target: "up.image.arrow.shadow.proxy";
+         target: "up.image.arrow.shadow.clipper";
+         target: "up.image.arrow.clipper";
          after: "inc_start_signal_emit";
       }
       program { name: "inc2";
@@ -1057,6 +1568,9 @@ group { name: "elm/spinner/base/default";
          action:  STATE_SET "default" 0.0;
          target: "up.image";
          target: "up.image.arrow";
+         target: "up.image.arrow.shadow.proxy";
+         target: "up.image.arrow.shadow.clipper";
+         target: "up.image.arrow.clipper";
          after: "inc_stop_signal_emit";
       }
       program { name: "disable";
@@ -1090,6 +1604,16 @@ group { name: "elm/spinner/base/default";
          source: "button.events";
          action: SIGNAL_EMIT "elm,action,entry,toggle" "";
       }
+      program { name: "up_touch_snd";
+         signal: "mouse,clicked,1";
+         source: "up.btn";
+         action: PLAY_SAMPLE "touch_sound" 1.0;
+      }
+      program { name: "down_ouch_snd";
+         signal: "mouse,clicked,1";
+         source: "down.btn";
+         action: PLAY_SAMPLE "touch_sound" 1.0;
+      }
    }
 }