spinner: Tizen 3.0 GUI implementation

Change-Id: I36c58419966319f9045a8ff7450f6290d441a946
Signed-off-by: Minchul Lee <slotus.lee@samsung.com>

1 files changed, 978 insertions, 183 deletions

diff --git a/mobile/widgets/spinner.edc b/mobile/widgets/spinner.edc
index 119bd1b9..f83d0152 100644
--- a/mobile/widgets/spinner.edc
+++ b/mobile/widgets/spinner.edc
@@ -24,56 +24,331 @@
  * SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  */
 
-group { name: "elm/spinner/base/default";
+group { "elm/spinner/event/default";
+   inherit_only: 1;
+   parts {
+      /* This event blocks mouse event for parts below. */
+      rect { "event";
+         mouse;
+         desc { "default";
+            rel.to: "base";
+            color: 0 0 0 0;
+            hid;
+         }
+         desc { "disabled";
+            inherit: "default";
+            vis;
+         }
+      }
+   }
+   programs {
+      /* Programs for button layout supported entry
+         - "active_entry"
+         - "inactive_entry"
+         - "active_text_button"
+         - "inactive_text_button"
+       */
+      /* Program to activate inner entry */
+      program { "active_entry";
+         signal: "elm,state,entry,active";
+         source: "elm";
+         after: "on_active_entry";
+      }
+      /* Program to inactiveate inner entry */
+      program { "inactive_entry";
+         signal: "elm,state,entry,inactive";
+         source: "elm";
+         after: "on_inactive_entry";
+      }
+      /* Program to activate text button */
+      program { "active_text_button";
+         signal: "elm,state,button,active";
+         source: "elm";
+         after: "on_active_text_button";
+      }
+      /* Program to inactivate text button */
+      program { "inactive_text_button";
+         signal: "elm,state,button,inactive";
+         source: "elm";
+         after: "on_inactive_text_button";
+      }
+      program { "enabled";
+         signal: "elm,state,enabled";
+         source: "elm";
+         action: STATE_SET "default";
+         target: "event";
+         after: "on_enabled";
+      }
+      program { "disabled";
+         signal: "elm,state,disabled";
+         source: "elm";
+         action: STATE_SET "disabled";
+         target: "event";
+         after: "on_disabled";
+      }
+      program { "active_access";
+         signal: "elm,state,access,active";
+         source: "elm";
+         after: "on_active_access";
+      }
+      program { "inactive_access";
+         signal: "elm,state,access,inactive";
+         source: "elm";
+         after: "on_inactive_access";
+      }
+   }
+}
+
+group { "elm/spinner/base/template";
+   inherit_only: 1;
+   nomouse;
+   parts {
+      spacer { "base";
+         desc { "default";
+         }
+      }
+      rect { "access";
+         repeat;
+         desc { "default";
+            rel.to: "base";
+         }
+      }
+      swallow { "elm.swallow.inc_button";
+         mouse;
+         desc { "default";
+            rel.to: "base";
+         }
+      }
+      swallow { "elm.swallow.dec_button";
+         mouse;
+         desc { "default";
+            rel.to: "base";
+         }
+      }
+      swallow { "elm.swallow.text_button";
+         mouse;
+         desc { "default";
+            rel.to: "base";
+         }
+      }
+      swallow { "elm.swallow.entry";
+         mouse;
+         desc { "default";
+            rel.to: "base";
+         }
+      }
+   }
+   inherit: "elm/spinner/event/default";
+   programs {
+      program { "on_active_entry";
+      }
+      program { "on_inactive_entry";
+      }
+      program { "on_active_text_button";
+      }
+      program { "on_inactive_text_button";
+      }
+      program { "on_active_access";
+      }
+      program { "on_inactive_access";
+      }
+      program { "on_enabled";
+      }
+      program { "on_disabled";
+      }
+   }
+}
+
+group { "elm/button/base/spinner/increase/template";
+   alias: "elm/button/base/spinner/decrease/template";
+   inherit_only: 1;
+   nomouse;
+   parts {
+      spacer { "base";
+         desc { "default";
+         }
+      }
+      image { "icon";
+         desc { "default";
+            rel.to: "base";
+         }
+      }
+      spacer { "focus_image";
+         desc { "default";
+            rel.to: "base";
+         }
+      }
+   }
+   inherit: "elm/button/event/default";
+   programs {
+      /* Program for pressed effect */
+      program { "on_pressed";
+      }
+      /* Program for unpressed effect */
+      program { "on_unpressed";
+      }
+      /* Program for clicked effect */
+      program { "on_clicked";
+      }
+      /* Program for disabled effect */
+      program { "on_disabled";
+      }
+      /* Program for enabled effect */
+      program { "on_enabled";
+      }
+      program { "enable_pass_event";
+         signal: "elm,event,pass,enabled";
+         source: "elm";
+         script {
+            set_mouse_events(PART:"event", 0);
+         }
+      }
+      program { "disable_pass_event";
+         signal: "elm,event,pass,disabled";
+         source: "elm";
+         script {
+            set_mouse_events(PART:"event", 1);
+         }
+      }
+      program { "enable_repeat_event";
+         signal: "elm,event,repeat,enabled";
+         source: "elm";
+         script {
+            set_repeat_events(PART:"event", 1);
+         }
+      }
+      program { "disable_repeat_event";
+         signal: "elm,event,repeat,disabled";
+         source: "elm";
+         script {
+            set_repeat_events(PART:"event", 0);
+         }
+      }
+   }
+}
+
+group { "elm/button/base/spinner/template";
+   inherit_only: 1;
+   parts {
+      spacer { "base";
+         desc { "default";
+         }
+      }
+      text { "elm.text";
+         desc { "default";
+            rel.to: "base";
+         }
+      }
+      spacer { "focus_image";
+         desc { "default";
+            rel.to: "base";
+         }
+      }
+   }
+   inherit: "elm/button/event/default";
+   programs {
+      /* Program for pressed effect */
+      program { "on_pressed";
+      }
+      /* Program for unpressed effect */
+      program { "on_unpressed";
+      }
+      /* Program for clicked effect */
+      program { "on_clicked";
+      }
+      /* Program for disabled effect */
+      program { "on_disabled";
+      }
+      /* Program for enabled effect */
+      program { "on_enabled";
+      }
+      program { "enable_pass_event";
+         signal: "elm,event,pass,enabled";
+         source: "elm";
+         script {
+            set_mouse_events(PART:"event", 0);
+         }
+      }
+      program { "disable_pass_event";
+         signal: "elm,event,pass,disabled";
+         source: "elm";
+         script {
+            set_mouse_events(PART:"event", 1);
+         }
+      }
+      program { "enable_repeat_event";
+         signal: "elm,event,repeat,enabled";
+         source: "elm";
+         script {
+            set_repeat_events(PART:"event", 1);
+         }
+      }
+      program { "disable_repeat_event";
+         signal: "elm,event,repeat,disabled";
+         source: "elm";
+         script {
+            set_repeat_events(PART:"event", 0);
+         }
+      }
+   }
+}
+
+group { "elm/spinner/base/default";
    alias: "elm/spinner/base/horizontal";
+   inherit: "elm/spinner/base/template";
    parts {
-      part { name: "bg";
-         type: RECT;
-         scale: 1;
-         description { state: "default" 0.0;
-            color: 250 250 250 255;
+      spacer { "base";
+         scale;
+         desc { "default";
+            min: SPINNER_DEFAULT_BG_SIZE_INC;
          }
       }
-      part { name: "access";
-         type: RECT;
-         repeat_events: 1;
-         description { state: "default" 0.0;
+      rect { "bg";
+         after: "base";
+         desc { "default";
+            rel.to: "base";
+            color_class: "spinner/default/bg";
+         }
+      }
+      rect { "access";
+         repeat;
+         desc { "default";
+            rel.to: "base";
             fixed: 1 1;
             color: 0 0 0 0;
-            rel1.to: "bg";
-            rel2.to: "bg";
-            visible: 1;
          }
-         description { state: "active" 0.0;
-            inherit: "default" 0.0;
-            visible: 0;
+         desc { "inactive";
+            inherit: "default";
+            hid;
          }
       }
-      part { name: "elm.swallow.inc_button";
-         type: SWALLOW;
-         scale: 1;
-         description { state: "default" 0.0;
+      swallow { "elm.swallow.inc_button";
+         scale;
+         mouse;
+         desc { "default";
+            rel.to: "base";
             align: 1.0 0.5;
             min: SPINNER_LEFT_RIGHT_BG_IMAGE_SIZE_INC;
             max: SPINNER_LEFT_RIGHT_BG_IMAGE_SIZE_INC;
+            fixed: 1 1;
          }
       }
-      part { name: "elm.swallow.dec_button";
-         type: SWALLOW;
-         scale: 1;
-         description { state: "default" 0.0;
+      swallow { "elm.swallow.dec_button";
+         scale;
+         mouse;
+         desc { "default";
+            rel.to: "base";
             align: 0.0 0.5;
             min: SPINNER_LEFT_RIGHT_BG_IMAGE_SIZE_INC;
             max: SPINNER_LEFT_RIGHT_BG_IMAGE_SIZE_INC;
+            fixed: 1 1;
          }
       }
-      part { name: "elm.swallow.text_button";
-         type: SWALLOW;
-         scale: 1;
-         description { state: "default" 0.0;
-            visible: 1;
-            min: 0 SPINNER_TEXT_HEIGHT_INC;
-            max: -1 SPINNER_TEXT_HEIGHT_INC;
+      swallow { "elm.swallow.text_button";
+         scale;
+         mouse;
+         desc { "default";
+            rel.to_y: "base";
             rel1 {
                to_x: "elm.swallow.dec_button";
                relative: 1.0 0.0;
@@ -82,237 +357,757 @@ group { name: "elm/spinner/base/default";
                to_x: "elm.swallow.inc_button";
                relative: 0.0 1.0;
             }
-         }
-         description { state: "inactive" 0.0;
-            inherit: "default" 0.0;
-            visible: 0;
-         }
-      }
-      part { name: "elm.swallow.entry";
-         type: SWALLOW;
-         description { state: "default" 0.0;
-            visible: 0;
-            rel1.to: "elm.swallow.text_button";
-            rel2.to: "elm.swallow.text_button";
             min: 0 SPINNER_TEXT_HEIGHT_INC;
             max: -1 SPINNER_TEXT_HEIGHT_INC;
-            fixed: 1 1;
+            fixed: 0 1;
          }
-         description { state: "active" 0.0;
-            inherit: "default" 0.0;
-            visible: 1;
+         desc { "inactive";
+            inherit: "default";
+            hid;
          }
       }
-      part { name: "disabler";
-         type: RECT;
-         description { state: "default" 0.0;
-            color: 0 0 0 0;
-            visible: 0;
+      swallow { "elm.swallow.entry";
+         mouse;
+         desc { "default";
+            rel.to: "elm.swallow.text_button";
+            fixed: 1 1;
+            hid;
          }
-         description { state: "disabled" 0.0;
-            inherit: "default" 0.0;
-            visible: 1;
+         desc { "active";
+            inherit: "default";
+            vis;
          }
       }
    }
    programs {
-      program { name: "entry_active";
-         signal: "elm,state,entry,active";
-         source: "elm";
-         action: STATE_SET "active" 0.0;
+      program { "on_active_entry";
+         action: STATE_SET "active";
          target: "elm.swallow.entry";
       }
-      program { name: "entry_inactive";
-         signal: "elm,state,entry,inactive";
-         source: "elm";
-         action: STATE_SET "default" 0.0;
+      program { "on_inactive_entry";
+         action: STATE_SET "default";
          target: "elm.swallow.entry";
       }
-      program { name: "text_button_active";
-         signal: "elm,state,button,active";
-         source: "elm";
-         action: STATE_SET "default" 0.0;
+      program { "on_active_text_button";
+         action: STATE_SET "default";
          target: "elm.swallow.text_button";
       }
-      program { name: "text_button_inactive";
-         signal: "elm,state,button,inactive";
-         source: "elm";
-         action: STATE_SET "inactive" 0.0;
+      program { "on_inactive_text_button";
+         action: STATE_SET "inactive";
          target: "elm.swallow.text_button";
       }
-      program { name: "access_activate";
-         signal: "elm,state,access,active";
-         source: "elm";
-         action:  STATE_SET "default" 0.0;
+      program { "on_active_access";
+         action: STATE_SET "default";
          target: "access";
       }
-      program { name: "access_inactivate";
-         signal: "elm,state,access,inactive";
-         source: "elm";
-         action:  STATE_SET "active" 0.0;
+      program { "on_inactive_access";
+         action: STATE_SET "inactive";
          target: "access";
       }
-      program { name: "disable";
-         signal: "elm,state,disabled";
-         source: "elm";
-         action: STATE_SET "disabled" 0.0;
-         target: "disabler";
+      program { "on_enabled";
       }
-      program { name: "enable";
-         signal: "elm,state,enabled";
-         source: "elm";
-         action: STATE_SET "default" 0.0;
-         target: "disabler";
+      program { "on_disabled";
       }
    }
 }
 
-group { name: "elm/spinner/base/vertical";
+group { "elm/spinner/base/vertical";
+   inherit: "elm/spinner/base/template";
    parts {
-      part { name: "bg";
-         type: RECT;
-         scale: 1;
-         description { state: "default" 0.0;
+      spacer { "base";
+         scale;
+         desc { "default";
             min: SPINNER_VERTICAL_BG_SIZE_INC;
-            color: 250 250 250 255;
          }
       }
-      part { name: "access";
-         type: RECT;
-         repeat_events: 1;
-         description { state: "default" 0.0;
+      rect { "bg";
+         after: "base";
+         desc { "default";
+            rel.to: "base";
+            color_class: "spinner/default/bg";
+         }
+      }
+      rect { "access";
+         repeat;
+         desc { "default";
+            rel.to: "base";
             fixed: 1 1;
             color: 0 0 0 0;
-            rel1.to: "bg";
-            rel2.to: "bg";
-            visible: 1;
          }
-         description { state: "active" 0.0;
-            inherit: "default" 0.0;
-            visible: 0;
+         desc { "inactive";
+            inherit: "default";
+            hid;
          }
       }
-      part { name: "elm.swallow.inc_button";
-         type: SWALLOW;
-         scale: 1;
-         description { state: "default" 0.0;
+      swallow { "elm.swallow.inc_button";
+         scale;
+         desc { "default";
             align: 0.5 0.0;
             min: SPINNER_UP_DOWN_BG_IMAGE_SIZE_INC;
             max: SPINNER_UP_DOWN_BG_IMAGE_SIZE_INC;
+            fixed: 1 1;
          }
       }
-      part { name: "elm.swallow.dec_button";
-         type: SWALLOW;
-         scale: 1;
-         description { state: "default" 0.0;
+      swallow { "elm.swallow.dec_button";
+         scale;
+         desc { "default";
             align: 0.5 1.0;
             min: SPINNER_UP_DOWN_BG_IMAGE_SIZE_INC;
             max: SPINNER_UP_DOWN_BG_IMAGE_SIZE_INC;
+            fixed: 1 1;
          }
       }
-      part { name: "elm.swallow.text_button";
-         type: SWALLOW;
-         scale: 1;
-         description { state: "default" 0.0;
-            visible: 1;
+      swallow { "elm.swallow.text_button";
+         scale;
+         desc { "default";
+            rel.to_x: "base";
+            rel1 {
+               to_y: "elm.swallow.inc_button";
+               relative: 0.0 1.0;
+            }
+            rel2 {
+               to_y: "elm.swallow.dec_button";
+               relative: 1.0 0.0;
+            }
             min: 0 SPINNER_TEXT_HEIGHT_INC;
             max: -1 SPINNER_TEXT_HEIGHT_INC;
+            fixed: 0 1;
          }
-         description { state: "inactive" 0.0;
-            inherit: "default" 0.0;
-            visible: 0;
+         desc { "inactive";
+            inherit: "default";
+            hid;
          }
       }
-      part { name: "elm.swallow.entry";
-         type: SWALLOW;
-         description { state: "default" 0.0;
-            visible: 0;
-            rel1.to: "elm.swallow.text_button";
-            rel2.to: "elm.swallow.text_button";
-            min: 0 SPINNER_TEXT_HEIGHT_INC;
-            max: -1 SPINNER_TEXT_HEIGHT_INC;
+      swallow { "elm.swallow.entry";
+         desc { "default";
+            hid;
+            rel.to: "elm.swallow.text_button";
             fixed: 1 1;
          }
-         description { state: "active" 0.0;
-            inherit: "default" 0.0;
-            visible: 1;
-         }
-      }
-      part { name: "disabler";
-         type: RECT;
-         description { state: "default" 0.0;
-            color: 0 0 0 0;
-            visible: 0;
-         }
-         description { state: "disabled" 0.0;
-            inherit: "default" 0.0;
-            visible: 1;
+         desc { "active";
+            inherit: "default";
+            vis;
          }
       }
    }
    programs {
-      program { name: "entry_active";
-         signal: "elm,state,entry,active";
-         source: "elm";
-         action: STATE_SET "active" 0.0;
+      program { "on_active_entry";
+         action: STATE_SET "active";
          target: "elm.swallow.entry";
       }
-      program { name: "entry_inactive";
-         signal: "elm,state,entry,inactive";
-         source: "elm";
-         action: STATE_SET "default" 0.0;
+      program { "on_inactive_entry";
+         action: STATE_SET "default";
          target: "elm.swallow.entry";
       }
-      program { name: "text_button_active";
-         signal: "elm,state,button,active";
-         source: "elm";
-         action: STATE_SET "default" 0.0;
+      program { "on_active_text_button";
+         action: STATE_SET "default";
          target: "elm.swallow.text_button";
       }
-      program { name: "text_button_inactive";
-         signal: "elm,state,button,inactive";
-         source: "elm";
-         action: STATE_SET "inactive" 0.0;
+      program { "on_inactive_text_button";
+         action: STATE_SET "inactive";
          target: "elm.swallow.text_button";
       }
-      program { name: "access_activate";
-         signal: "elm,state,access,active";
-         source: "elm";
-         action:  STATE_SET "default" 0.0;
+      program { "on_active_access";
+         action:  STATE_SET "default";
          target: "access";
       }
-      program { name: "access_inactivate";
-         signal: "elm,state,access,inactive";
-         source: "elm";
-         action:  STATE_SET "active" 0.0;
+      program { "on_inactive_access";
+         action:  STATE_SET "inactive";
          target: "access";
       }
-      program { name: "disable";
-         signal: "elm,state,disabled";
-         source: "elm";
-         action: STATE_SET "disabled" 0.0;
-         target: "disabler";
+      program { "on_enabled";
       }
-      program { name: "enable";
-         signal: "elm,state,enabled";
-         source: "elm";
-         action: STATE_SET "default" 0.0;
-         target: "disabler";
+      program { "on_disabled";
       }
    }
 }
 
-group { name: "elm/spinner/base/vertical_date_picker";
+group { "elm/spinner/base/vertical_date_picker";
    inherit: "elm/spinner/base/vertical";
    parts {
-      part { name: "bg";
-         type: RECT;
-         scale: 1;
-         description { state: "default" 0.0;
+      spacer { "base";
+         scale;
+         desc { "default";
             min: SPINNER_VERTICAL_DATE_PICKER_BG_SIZE_INC;
-            color: 250 250 250 255;
+         }
+      }
+   }
+   part_remove: "bg"; // vertical_date_picker has bg in itself.
+}
+
+#define BUTTON_SPINNER_BG_EFFECT_PARTS(corner_size, ratio, sizer_bg_effect, clipper_bg_effect, top_left, top_right, mid, bottom_left, bottom_right) \
+      vector { "bg_effect_top_left"; \
+         clip: clipper_bg_effect; \
+         desc { "default"; \
+            align: 0.0 0.0; \
+            max: corner_size*ratio corner_size*ratio; \
+            rel.to: sizer_bg_effect; \
+            rel1.relative: 0.0 0.0; \
+            rel2.relative: 0.5 0.5; \
+            image.normal: top_left; \
+         } \
+         desc { "pressed"; \
+            inherit: "default"; \
+            max: corner_size corner_size; \
+         } \
+      } \
+      vector { "bg_effect_top_right"; \
+         clip: clipper_bg_effect; \
+         desc { "default"; \
+            align: 1.0 0.0; \
+            max: corner_size*ratio corner_size*ratio; \
+            rel.to: sizer_bg_effect; \
+            rel1.relative: 0.5 0.0; \
+            rel2.relative: 1.0 0.5; \
+            image.normal: top_right; \
+         } \
+         desc { "pressed"; \
+            inherit: "default"; \
+            max: corner_size corner_size; \
+         } \
+      } \
+      vector { "bg_effect_top_mid"; \
+         clip: clipper_bg_effect; \
+         desc { "default"; \
+            rel1.to: "bg_effect_top_left"; \
+            rel1.relative: 1.0 0.0; \
+            rel2.to: "bg_effect_top_right"; \
+            rel2.relative: 0.0 1.0; \
+            image.normal: mid; \
+         } \
+      } \
+      vector { "bg_effect_mid"; \
+         clip: clipper_bg_effect; \
+         desc { "default"; \
+            rel1.to: "bg_effect_top_left"; \
+            rel1.relative: 0.0 1.0; \
+            rel2.to: "bg_effect_bottom_right"; \
+            rel2.relative: 1.0 0.0; \
+            image.normal: mid; \
+         } \
+      } \
+      vector { "bg_effect_bottom_left"; \
+         clip: clipper_bg_effect; \
+         desc { "default"; \
+            align: 0.0 1.0; \
+            max: corner_size*ratio corner_size*ratio; \
+            rel.to: sizer_bg_effect; \
+            rel1.relative: 0.0 0.5; \
+            rel2.relative: 0.5 1.0; \
+            image.normal: bottom_left; \
+         } \
+         desc { "pressed"; \
+            inherit: "default"; \
+            max: corner_size corner_size; \
+         } \
+      } \
+      vector { "bg_effect_bottom_right"; \
+         clip: clipper_bg_effect; \
+         desc { "default"; \
+            align: 1.0 1.0; \
+            max: corner_size*ratio corner_size*ratio; \
+            rel.to: sizer_bg_effect; \
+            rel1.relative: 0.5 0.5; \
+            rel2.relative: 1.0 1.0; \
+            image.normal: bottom_right; \
+         } \
+         desc { "pressed"; \
+            inherit: "default"; \
+            max: corner_size corner_size; \
+         } \
+      } \
+      vector { "bg_effect_bottom_mid"; \
+         clip: clipper_bg_effect; \
+         desc { "default"; \
+            rel1.to: "bg_effect_bottom_left"; \
+            rel1.relative: 1.0 0.0; \
+            rel2.to: "bg_effect_bottom_right"; \
+            rel2.relative: 0.0 1.0; \
+            image.normal: mid; \
+         } \
+      }
+
+group { "elm/button/base/spinner/increase/default";
+   alias: "elm/button/base/spinner/increase/horizontal";
+   inherit: "elm/button/base/spinner/increase/template";
+   data.item: "focus_highlight" "on";
+   target_group: "bg_effect_group" "bg_effect_top_left" "bg_effect_top_right" "bg_effect_bottom_left" "bg_effect_bottom_right";
+   images {
+      vector: "core_press_top_left.svg";
+      vector: "core_press_top_right.svg";
+      vector: "core_press_bottom_left.svg";
+      vector: "core_press_bottom_right.svg";
+      vector: "core_press_center.svg";
+      image: "core_icon_picker_arrow_right.png" COMP;
+   }
+   script {
+      public disabled = 0;
+      public animate = 0;
+   }
+   parts {
+      //Effect Shape Part
+      spacer { "sizer_bg_effect";
+         scale;
+         desc { "default";
+            rel.to: "base";
+            rel1.relative: 0.5 0.5;
+            rel2.relative: 0.5 0.5;
+            min: SPINNER_LEFT_RIGHT_EFFECT_MIN_SIZE_INC;
+            fixed: 1 1;
+         }
+         desc { "pressed";
+            inherit: "default";
+            rel1.relative: 0.0 0.0;
+            rel2.relative: 1.0 1.0;
+         }
+      }
+      BUTTON_SPINNER_BG_EFFECT_PARTS(SPINNER_BUTTON_CORNER_RADIUS,
+                        0.7,
+                        "sizer_bg_effect",
+                        "clipper_bg_effect",
+                        "core_press_top_left.svg",
+                        "core_press_top_right.svg",
+                        "core_press_center.svg",
+                        "core_press_bottom_left.svg",
+                        "core_press_bottom_right.svg")
+
+      rect { "clipper_bg_effect";
+         desc { "default";
+            color: 61 185 204 0;
+            fixed: 1 1;
+            rel.to: "sizer_bg_effect";
+         }
+         desc { "pressed";
+            inherit: "default";
+            color: 61 185 204 77;
+         }
+      }
+      image { "icon";
+         scale;
+         after: "clipper_bg_effect";
+         desc { "default";
+            image.normal: "core_icon_picker_arrow_right.png";
+            rel.to: "base";
+            min: SPINNER_LEFT_RIGHT_ARROW_IMAGE_SIZE_INC;
+            max: SPINNER_LEFT_RIGHT_ARROW_IMAGE_SIZE_INC;
+            fixed: 1 1;
+            color_class: "spinner/default/icon-normal";
+         }
+         desc { "pressed";
+            inherit: "default";
+            color_class: "spinner/default/icon-pressed";
+         }
+         desc { "disabled";
+            inherit: "default";
+            color_class: "spinner/default/icon-disabled";
+         }
+      }
+      spacer { "focus_image";
+         after: "icon";
+         scale: 1;
+         desc { "default";
+            align: 0.5 0.0;
+            rel.to: "icon";
+         }
+         desc { "focused";
+            inherit: "default";
+         }
+      }
+      rect { "event";
+         after: "focus_image";
+         mouse;
+      }
+   }
+   program_remove: "unpressed";
+   program_remove: "clicked";
+   programs {
+      program { "on_pressed";
+         script {
+            if (get_int(disabled) == 0) {
+               stop_program(PROGRAM:"delay_effect_unpressed");
+               set_int(animate, 1);
+               run_program(PROGRAM:"anim_effect_pressed");
+            }
+         }
+      }
+      program { "anim_effect_pressed";
+         action: STATE_SET "default";
+         target: "sizer_bg_effect";
+         target_groups: "bg_effect_group";
+
+         sequence {
+            action: STATE_SET "pressed";
+            target: "sizer_bg_effect";
+            target: "clipper_bg_effect";
+            target: "icon";
+            target_groups: "bg_effect_group";
+            transition: GLIDE_EASE_OUT(0.15);
+
+            script {
+               set_int(animate, 0);
+            }
+         }
+      }
+      program { "unpressed";
+         signal: "mouse,up,1";
+         source: "event";
+         script {
+            if (get_int(disabled) == 0) {
+               if (get_int(animate) == 0) {
+                  run_program(PROGRAM:"anim_effect_unpressed");
+               } else {
+                  run_program(PROGRAM:"set_effect_pressed");
+               }
+               emit("elm,action,unpress", "");
+            }
+         }
+      }
+      program { "set_effect_pressed";
+         action: STATE_SET "pressed";
+         target_groups: "bg_effect_group";
+         target: "sizer_bg_effect";
+         target: "clipper_bg_effect";
+         target: "icon";
+         after: "delay_effect_unpressed";
+      }
+      program { "delay_effect_unpressed";
+         in: 0.1 0.0;
+         after: "anim_effect_unpressed";
+      }
+      program { "anim_effect_unpressed";
+         script {
+            if (get_int(disabled) == 0) {
+               run_program(PROGRAM:"anim_effect_unpressed2");
+            } else {
+               run_program(PROGRAM:"anim_effect_disabled");
+            }
+            run_program(PROGRAM:"anim_effect_unpressed3");
+         }
+      }
+      program { "anim_effect_unpressed2";
+         action: STATE_SET "default";
+         target: "icon";
+         transition: GLIDE_EASE_OUT(0.45);
+      }
+      program { "anim_effect_disabled";
+         action: STATE_SET "disabled";
+         target: "icon";
+         transition: GLIDE_EASE_OUT(0.45);
+      }
+      program { "anim_effect_unpressed3";
+         action: STATE_SET "default";
+         target: "clipper_bg_effect";
+         transition: GLIDE_EASE_OUT(0.45);
+
+         sequence {
+            action: STATE_SET "default";
+            target: "sizer_bg_effect";
+         }
+      }
+      program { "clicked";
+         signal: "mouse,clicked,1";
+         source: "event";
+         script {
+            if (get_int(disabled) == 0) {
+               run_program(PROGRAM:"play_sound");
+               run_program(PROGRAM:"clicked_signal");
+            }
+         }
+      }
+      program { "play_sound";
+         action: RUN_PLUGIN "touch_sound";
+      }
+      program { "clicked_signal";
+         in: 0.001 0.0;
+         action: SIGNAL_EMIT "elm,action,click" "";
+      }
+      program { "action_focus";
+         signal: "elm,action,focus_highlight,show";
+         source: "elm";
+         action: STATE_SET "focused";
+         target: "focus_image";
+      }
+      program { "action_unfocus";
+         signal: "elm,action,focus_highlight,hide";
+         source: "elm";
+         action: STATE_SET "default";
+         target: "focus_image";
+      }
+      program { "access_pressed";
+         signal: "elm,action,anim,activate";
+         source: "elm";
+         after: "set_effect_pressed";
+      }
+      program { "on_disabled";
+         script {
+            set_int(disabled, 1);
+            if (get_int(animate) == 1) return;
+            set_state(PART:"icon", "disabled", 0.0);
+         }
+      }
+      program { "on_enabled";
+         script {
+            set_int(disabled, 0);
+            set_state(PART:"icon", "default", 0.0);
+         }
+      }
+   }
+}
+
+group { "elm/button/base/spinner/decrease/default";
+   inherit: "elm/button/base/spinner/increase/default";
+   alias: "elm/button/base/spinner/decrease/horizontal";
+   images {
+      vector: "core_press_top_left.svg";
+      vector: "core_press_top_right.svg";
+      vector: "core_press_bottom_left.svg";
+      vector: "core_press_bottom_right.svg";
+      vector: "core_press_center.svg";
+      image: "core_icon_picker_arrow_left.png" COMP;
+   }
+   parts {
+      image { "icon";
+         desc { "default";
+            image.normal: "core_icon_picker_arrow_left.png";
+            color_class: "spinner/default/icon-normal";
+         }
+         desc { "pressed";
+            inherit: "default";
+            color_class: "spinner/default/icon-pressed";
+         }
+         desc { "disabled";
+            inherit: "default";
+            color_class: "spinner/default/icon-disabled";
+         }
+      }
+   }
+}
+
+group { "elm/button/base/spinner/default";
+   alias: "elm/button/base/spinner/horizontal";
+   inherit: "elm/button/base/spinner/template";
+   data.item: "focus_highlight" "on";
+   parts {
+      text { "elm.text";
+         scale;
+         desc { "default";
+            min: 0 SPINNER_TEXT_HEIGHT_INC;
+            max: -1 SPINNER_TEXT_HEIGHT_INC;
+            fixed: 0 1;
+            rel.to: "base";
+            text {
+               font: "Tizen:style=Light";
+               size: 106;
+               text_class: "tizen";
+            }
+            color_class:"spinner/default/text-normal";
+         }
+         desc { "pressed";
+            inherit: "default";
+            color_class:"spinner/default/text-pressed";
+         }
+         desc { "disabled";
+            inherit: "default";
+            color_class:"spinner/default/text-disabled";
+         }
+      }
+      spacer { "focus_image";
+         scale;
+         desc { "default";
+            rel.to: "base";
+         }
+         desc { "focused";
+            inherit: "default";
+         }
+      }
+   }
+   programs {
+      program { "on_pressed";
+         action: STATE_SET "pressed";
+         target: "elm.text";
+      }
+      program { "on_unpressed";
+         action: STATE_SET "default";
+         target: "elm.text";
+      }
+      program { "on_clicked";
+         action: RUN_PLUGIN "touch_sound";
+      }
+      program { "on_disabled";
+         action: STATE_SET "disabled";
+         target: "elm.text";
+      }
+      program { "on_enabled";
+         action: STATE_SET "default";
+         target: "elm.text";
+      }
+      program { "action_focus";
+         signal: "elm,action,focus_highlight,show";
+         source: "elm";
+         action: STATE_SET "focused";
+         target: "focus_image";
+      }
+      program { "action_unfocus";
+         signal: "elm,action,focus_highlight,hide";
+         source: "elm";
+         action: STATE_SET "default";
+         target: "focus_image";
+      }
+   }
+}
+
+/////////////////////////
+// Vertical /////////////
+/////////////////////////
+group { "elm/button/base/spinner/increase/vertical";
+   alias: "elm/button/base/spinner/increase/vertical_time_picker";
+   alias: "elm/button/base/spinner/increase/vertical_date_picker";
+   alias: "elm/button/base/spinner/increase/datetime";
+   inherit: "elm/button/base/spinner/increase/default";
+   data.item: "focus_highlight" "on";
+   images {
+      vector: "core_press_top_left.svg";
+      vector: "core_press_top_right.svg";
+      vector: "core_press_bottom_left.svg";
+      vector: "core_press_bottom_right.svg";
+      vector: "core_press_center.svg";
+      image: "core_icon_picker_arrow_up.png" COMP;
+   }
+   script {
+      public disabled = 0;
+      public animate = 0;
+   }
+   parts {
+      //Effect Shape Part
+      spacer { "sizer_bg_effect";
+         scale;
+         desc { "default";
+            rel.to: "base";
+            rel1.relative: 0.5 0.5;
+            rel2.relative: 0.5 0.5;
+            min: SPINNER_UP_DOWN_EFFECT_MIN_SIZE_INC;
+            fixed: 1 1;
+         }
+         desc { "pressed";
+            inherit: "default";
+            rel1.relative: 0.0 0.0;
+            rel2.relative: 1.0 1.0;
+         }
+      }
+      image { "icon";
+         scale;
+         desc { "default";
+            image.normal: "core_icon_picker_arrow_up.png";
+            rel.to: "base";
+            min: SPINNER_UP_DOWN_ARROW_IMAGE_SIZE_INC;
+            max: SPINNER_UP_DOWN_ARROW_IMAGE_SIZE_INC;
+            fixed: 1 1;
+            color_class: "spinner/default/icon-normal";
+         }
+         desc { "pressed";
+            inherit: "default";
+            color_class: "spinner/default/icon-pressed";
+         }
+         desc { "disabled";
+            inherit: "default";
+            color_class: "spinner/default/icon-disabled";
+         }
+      }
+   }
+}
+
+group { "elm/button/base/spinner/decrease/vertical";
+   inherit: "elm/button/base/spinner/increase/vertical";
+   alias: "elm/button/base/spinner/decrease/vertical_time_picker";
+   alias: "elm/button/base/spinner/decrease/vertical_date_picker";
+   alias: "elm/button/base/spinner/decrease/datetime";
+   images {
+      image: "core_icon_picker_arrow_down.png" COMP;
+   }
+   parts {
+      image { "icon";
+         desc { "default";
+            image.normal: "core_icon_picker_arrow_down.png";
+            color_class: "spinner/default/icon-normal";
+         }
+         desc { "pressed";
+            inherit: "default";
+            color_class: "spinner/default/icon-pressed";
+         }
+         desc { "disabled";
+            inherit: "default";
+            color_class: "spinner/default/icon-disabled";
          }
       }
    }
 }
+#undef BUTTON_SPINNER_BG_EFFECT_PARTS
 
+group { "elm/button/base/spinner/vertical";
+   alias: "elm/button/base/spinner/vertical_time_picker";
+   alias: "elm/button/base/spinner/datetime";
+   inherit: "elm/button/base/spinner/default";
+   data.item: "focus_highlight" "on";
+   parts {
+      text { "elm.text";
+         scale;
+         desc { "default";
+            min: 0 SPINNER_TEXT_HEIGHT_INC;
+            max: -1 SPINNER_TEXT_HEIGHT_INC;
+            fixed: 0 1;
+            rel.to: "base";
+            text {
+               font: "Tizen:style=Light";
+               size: 106;
+               text_class: "tizen";
+               ellipsis: -1.0;
+            }
+            color_class:"spinner/default/text-normal";
+         }
+         desc { "pressed";
+            inherit: "default";
+            color_class:"spinner/default/text-pressed";
+         }
+         desc { "disabled";
+            inherit: "default" 0.0;
+            color_class:"spinner/default/text-disabled";
+         }
+      }
+   }
+}
+
+group { "elm/button/base/spinner/vertical_date_picker";
+   inherit: "elm/button/base/spinner/vertical";
+   parts {
+      spacer { "base";
+         scale;
+         desc { "default";
+            min: SPINNER_VERTICAL_DATE_PICKER_TEXT_BUTTON_SIZE_INC;
+         }
+      }
+      text { "elm.text";
+         scale;
+         desc { "default";
+            min: 0 SPINNER_TEXT_HEIGHT_INC;
+            max: -1 SPINNER_TEXT_HEIGHT_INC;
+            fixed: 1 1;
+            color: 0 0 0 255;
+            rel.to: "base";
+            text {
+               font: "TizenSans:style=Light";
+               size: 85;
+               ellipsis: 0.0;
+            }
+            color_class:"spinner/default/text-normal";
+         }
+         desc { "pressed";
+            inherit: "default";
+            color_class:"spinner/default/text-pressed";
+         }
+         desc { "disabled";
+            inherit: "default";
+            color_class:"spinner/default/text-disabled";
+         }
+      }
+   }
+}