Implemented button press effect proper scaling according to GUI.

Change-Id: Iaa3ed9e6c893cc973ba99e487d6730c546f238ef
Signed-off-by: Eugene Kurzberg <i.kurtsberg@samsung.com>

diff --git a/lib-apps-common/res/apps-common/edje/apps-common-buttons.edc b/lib-apps-common/res/apps-common/edje/apps-common-buttons.edc
index 69149f0..589e7ba 100644 (file)
--- a/lib-apps-common/res/apps-common/edje/apps-common-buttons.edc
+++ b/lib-apps-common/res/apps-common/edje/apps-common-buttons.edc
@@ -36,7 +36,7 @@
 styles {
        style {
                name: "button_main";
-               base: "font=Tizen:style=Light font_size=40 align=center color=#ffffffff text_class="BUTTON_TEXT_CLASS" ellipsis=1.0";
+               base: "font=Tizen:style=Light font_size=40 align=center color=#ffffffff text_class="BUTTON_TEXT_CLASS;
        }
 }
 
@@ -44,6 +44,9 @@ collections {
        base_scale: 2.6;
 
        group { "elm/button/base/custom";
+               script {
+                       FUNCTION_SCALE_PART
+               }
                parts {
                        swallow { "tizen_vg_shape"; scale;
                                clip_to: "rect.bg";
@@ -55,11 +58,6 @@ collections {
                        }
                        swallow { "tizen_vg_shape2"; scale;
                                clip_to: "rect.effect_bg";
-                               desc { "default"; }
-                               desc { "pressed";
-                                       rel1.relative: 0.15 0.15; /* FIXME: proportional scaling */
-                                       rel2.relative: 0.85 0.85;
-                               }
                        }
                        rect { "rect.effect_bg"; scale;
                                desc { "default";
@@ -75,9 +73,10 @@ collections {
                                name: "pressed";
                                signal: "mouse,down,*";
                                source: "*";
-                               action: STATE_SET "pressed" 0.0;
-                               target: "tizen_vg_shape2";
-                               target: "rect.effect_bg";
+                               script {
+                                       scale_part(PART:"tizen_vg_shape2", "default", 0.7);
+                                       set_state(PART:"rect.effect_bg", "pressed", 0.0);
+                               }
                                after: "pressed_effect";
                        }
                        program {
@@ -109,7 +108,7 @@ collections {
                data.item: "corner_radius" BUTTON_CORNER_RADIUS;
 
                parts {
-                       spacer { "spacer.top_left"; scale;
+                       spacer { "spacer.left_top"; scale;
                                desc { "default";
                                        min: BUTTON_DEFAULT_TEXT_LR BUTTON_DEFAULT_TEXT_TB;
                                        align: 0.0 0.0;
@@ -117,7 +116,7 @@ collections {
                                        rel2.relative: 0.0 0.0;
                                }
                        }
-                       spacer { "spacer.bottom_right"; scale;
+                       spacer { "spacer.right_bottom"; scale;
                                desc { "default";
                                        min: BUTTON_DEFAULT_TEXT_LR BUTTON_DEFAULT_TEXT_TB;
                                        align: 1.0 1.0;
@@ -128,11 +127,11 @@ collections {
                        textblock { "elm.text"; scale;
                                desc { "default";
                                        min: 0 BUTTON_DEFAULT_TEXT_H;
-                                       rel1 { relative: 1.0 1.0; to: "spacer.top_left"; }
-                                       rel2 { relative: 0.0 0.0; to: "spacer.bottom_right"; }
+                                       rel1 { relative: 1.0 1.0; to: "spacer.left_top"; }
+                                       rel2 { relative: 0.0 0.0; to: "spacer.right_bottom"; }
                                        text {
                                                style: "button_main";
-                                               min: 1 1;
+                                               min: 1 0;
                                                ellipsis: -1;
                                        }
                                }
@@ -146,12 +145,12 @@ collections {
                data.item: "corner_radius" BUTTON_SMALL_CORNER_RADIUS;
 
                parts {
-                       spacer { "spacer.top_left"; scale;
+                       spacer { "spacer.left_top"; scale;
                                desc { "default";
                                        min: BUTTON_SMALL_TEXT_LR BUTTON_SMALL_TEXT_TB;
                                }
                        }
-                       spacer { "spacer.bottom_right"; scale;
+                       spacer { "spacer.right_bottom"; scale;
                                desc { "default";
                                        min: BUTTON_SMALL_TEXT_LR BUTTON_SMALL_TEXT_TB;
                                }

diff --git a/lib-apps-common/res/apps-common/edje/apps-common-utils.edc b/lib-apps-common/res/apps-common/edje/apps-common-utils.edc
index 49867c9..e0b2a4f 100644 (file)
--- a/lib-apps-common/res/apps-common/edje/apps-common-utils.edc
+++ b/lib-apps-common/res/apps-common/edje/apps-common-utils.edc
@@ -16,6 +16,19 @@
  */
 
 #define TRANSITION_GLIDE(duration) CUBIC_BEZIER (duration) 0.25 0.46 0.45 1.0
+#define FUNCTION_SCALE_PART \
+       public scale_part(part_id, state[], Float:ratio) { \
+               new x, y, w, h; \
+               get_geometry(part_id, x, y, w, h); \
+               new Float:offset = (w < h ? w : h) * (1.0 - ratio) / 2; \
+               new Float:rel_w = offset / w; \
+               new Float:rel_h = offset / h; \
+\
+               custom_state(part_id, state, 0.0); \
+               set_state_val(part_id, STATE_REL1, rel_w, rel_h); \
+               set_state_val(part_id, STATE_REL2, 1.0 - rel_w, 1.0 - rel_h); \
+               set_state(part_id, "custom", 0.0); \
+       }
 
 #define IMAGE_WITH_COLOR(GROUP_NAME, IMAGE_PATH, COLOR_CLASS) \
        group { GROUP_NAME; \

diff --git a/lib-phone/res/dialer/edje/dialer-button-layout.edc b/lib-phone/res/dialer/edje/dialer-button-layout.edc
index e66b4eb..f05ef1a 100644 (file)
--- a/lib-phone/res/dialer/edje/dialer-button-layout.edc
+++ b/lib-phone/res/dialer/edje/dialer-button-layout.edc
@@ -39,6 +39,9 @@ collections {
        base_scale: 2.6;
 
        group { LAYOUT_BUTTON;
+               script {
+                       FUNCTION_SCALE_PART
+               }
                parts {
                        rect { "rect.bg";
                                desc { "default";
@@ -52,11 +55,6 @@ collections {
                                desc { "pressed";
                                        color_class: "button_bg_pressed";
                                }
-                               desc { "pressed_effect";
-                                       inherit: "pressed";
-                                       rel1.relative: 0.15 0.15;
-                                       rel2.relative: 0.85 0.85;
-                               }
                        }
                        spacer { "spacer.middle"; scale;
                                desc { "default";
@@ -88,8 +86,9 @@ collections {
                                name: "pressed";
                                signal: "mouse,down,*";
                                source: "*";
-                               action: STATE_SET "pressed_effect" 0.0;
-                               target: "rect.press_bg";
+                               script {
+                                       scale_part(PART:"rect.press_bg", "pressed", 0.7);
+                               }
                                after: "pressed_effect";
                        }
                        program {