Button: Modify circle style.submit/tizen/20200421.221442

Fix swallow effect
Support 2line text

Change-Id: I30d274a26dbc9d4274cdef0d4def862185f037de

1 files changed, 72 insertions, 27 deletions

diff --git a/common/widgets/button.edc b/common/widgets/button.edc
index 2b87f57..9b3a967 100644
--- a/common/widgets/button.edc
+++ b/common/widgets/button.edc
@@ -1892,9 +1892,10 @@
 
 /* ------- Circle Button Start ---------------------------*/
 
-#define BUTTON_CIRCLE_WITH_TEXT_SIZE 100 118
+#define BUTTON_CIRCLE_WITH_TEXT_SIZE 100 140
 #define BUTTON_CIRCLE_SIZE 88 88
-#define BUTTON_CIRCLE_TEXT_SIZE 100 22
+#define BUTTON_CIRCLE_PADDING_CIRCLE_TEXT_SIZE 88 8
+#define BUTTON_CIRCLE_TEXT_SIZE 100 44
 #define BUTTON_CIRCLE_ICON_SIZE 48 48
 
 #define BUTTON_CIRCLE_DURATION_DEFAULT_TO_PRESSED 0.4
@@ -1906,13 +1907,13 @@
 
    styles {
       style { name: "button_circle_text";
-        base: "font=Tizen:weight=Normal:width=BreezeSans font_size=18 align=center color=#FFFFFF ellipsis=1.0 wrap=none text_class=tizen";
+        base: "font=Tizen:weight=Normal:width=BreezeSans font_size=18 align=center color=#FFFFFF ellipsis=1.0 wrap=mixed text_class=tizen";
       }
       style { name: "button_circle_text_dim";
-        base: "font=Tizen:weight=Normal:width=BreezeSans font_size=18 align=center color=#FFFFFF ellipsis=1.0 wrap=none text_class=tizen";
+        base: "font=Tizen:weight=Normal:width=BreezeSans font_size=18 align=center color=#FFFFFF ellipsis=1.0 wrap=mixed text_class=tizen";
       }
       style { name: "button_circle_text_press";
-        base: "font=Tizen:weight=Normal:width=BreezeSans font_size=18 align=center color=#FFFFFF ellipsis=1.0 wrap=none text_class=tizen";
+        base: "font=Tizen:weight=Normal:width=BreezeSans font_size=18 align=center color=#FFFFFF ellipsis=1.0 wrap=mixed text_class=tizen";
       }
    }
 
@@ -1930,7 +1931,6 @@
             }
             desc { "icon_with_text";
                min: BUTTON_CIRCLE_WITH_TEXT_SIZE;
-               max: BUTTON_CIRCLE_WITH_TEXT_SIZE;
             }
          }
          rect { "clipper_opacity";
@@ -1980,7 +1980,6 @@
             }
          }
          swallow { "elm.swallow.content";
-            clip: "clipper_elm.swallow.content";
             scale;
             desc { "default";
                rel.to: "circle_base";
@@ -1989,19 +1988,58 @@
                fixed: 1 1;
             }
          }
+         proxy { "elm.swallow.content_proxy_original";
+            nomouse;
+            scale;
+            clip: "clipper_elm.swallow.content";
+            desc { "default";
+               source: "elm.swallow.content";
+               rel.to: "elm.swallow.content";
+               proxy.source_clip: 1;
+               proxy.source_visible: 0;
+               fixed: 1 1;
+               color: 255 255 255 255;
+            }
+         }
          rect { "clipper_elm.swallow.content";
             clip: "clipper_opacity";
-            scale;
             desc { "default";
-               color : 10 14 74 255; // Color #000C2B Opacity 1
+               color: 10 14 74 255; // Color #000C2B Opacity 1
             }
             desc { "pressed";
-               inherit: "default";
-               color : 43 95 185 255; // Color #2B5FB9 Opacity 1
+               color: 10 14 74 255; // Color #000C2B Opacity 1
             }
             desc { "disabled";
+               color: 195 202 210 255; // Color #C3CAD2 Opacity 1
+            }
+         }
+         proxy { "elm.swallow.content_proxy_effect";
+            nomouse;
+            scale;
+            clip: "clipper_effect_shape";
+            desc { "default";
+               source: "elm.swallow.content";
+               rel.to: "elm.swallow.content";
+               proxy.source_clip: 1;
+               proxy.source_visible: 0;
+               fixed: 1 1;
+               color: 255 255 255 255;
+            }
+         }
+         spacer { "padding_circle_text";
+            scale;
+            desc { "default";
+               rel.to: "circle_base";
+               rel1.relative: 0.0 1.0;
+               align: 0.5 0.0;
+               min: 0 0;
+               max: 0 0;
+               fixed: 1 1;
+            }
+            desc { "visible";
                inherit: "default";
-               color : 195 202 210 255; // Color #C3CAD2 Opacity 1
+               min: BUTTON_CIRCLE_PADDING_CIRCLE_TEXT_SIZE;
+               min: BUTTON_CIRCLE_PADDING_CIRCLE_TEXT_SIZE;
             }
          }
          textblock { "elm.text";
@@ -2009,22 +2047,18 @@
             scale;
             desc { "default";
                hid;
-               rel1 {
-                  relative: 0.0 1.0;
-                  to: "base";
-               }
-               rel2 {
-                  relative: 1.0 1.0;
-                  to: "base";
-               }
+               rel.to: "padding_circle_text";
+               rel1.relative: 0.0 1.0;
                text {
                   style: "button_circle_text";
-                  min: 0 1;
-                  max: 1 0;
+                  min: 0 0;
+                  max: 0 0;
+                  align: 0.5 0.0;
+                  fit: 0 0;
                }
-               align: 0.5 1.0;
                min: 0 0;
                max: 0 0;
+               align: 0.5 0.0;
                fixed: 1 1;
             }
             desc { "visible";
@@ -2227,7 +2261,7 @@
                   if (get_int(text) == 1) {
                      run_program(PROGRAM:PROGRAM_NAME_GET("pressed_effect", "elm.text", "pressed"));
                      run_program(PROGRAM:PROGRAM_NAME_GET("pressed_effect", "clipper_elm.text", "pressed"));
-				  }
+                  }
                   run_program(PROGRAM:PROGRAM_NAME_GET("pressed_effect", "clipper_bg", "pressed"));
 
                   run_program(PROGRAM:PROGRAM_NAME_GET("pressed_effect", "clipper_effect_shape", "ready"));
@@ -2332,9 +2366,17 @@
             signal: "elm,state,text,visible";
             source: "elm";
             script {
-               set_int(text, 1);
-               set_state(PART:"base", "icon_with_text", 0.0);
-               set_state(PART:"elm.text", "visible", 0.0);
+              set_int(text, 1);
+              set_state(PART:"base", "icon_with_text", 0.0);
+              set_state(PART:"padding_circle_text", "visible", 0.0);
+              if (get_int(disabled) == 0) {
+                 set_state(PART:"elm.text", "visible", 0.0);
+                 set_state(PART:"clipper_elm.text", "default", 0.0);
+              }
+              else {
+                 set_state(PART:"elm.text", "disabled", 0.0);
+                 set_state(PART:"clipper_elm.text", "disabled", 0.0);
+              }
             }
          }
          program { "text_hide";
@@ -2344,6 +2386,7 @@
                set_int(text, 0);
                set_state(PART:"base", "default", 0.0);
                set_state(PART:"elm.text", "default", 0.0);
+               set_state(PART:"padding_circle_text", "default", 0.0);
             }
          }
          program { "on_enabled";
@@ -2352,6 +2395,7 @@
                set_state(PART:"clipper_bg", "default", 0.0);
                if (get_int(text) == 1) {
                   set_state(PART:"elm.text", "visible", 0.0);
+                  set_state(PART:"padding_circle_text", "visible", 0.0);
                   set_state(PART:"clipper_elm.text", "default", 0.0);
                }
                set_state(PART:"clipper_elm.swallow.content", "default", 0.0);
@@ -2388,6 +2432,7 @@
 
 #undef BUTTON_CIRCLE_WITH_TEXT_SIZE
 #undef BUTTON_CIRCLE_SIZE
+#undef BUTTON_CIRCLE_PADDING_CIRCLE_TEXT_SIZE
 #undef BUTTON_CIRCLE_TEXT_SIZE
 #undef BUTTON_CIRCLE_ICON_SIZE