[popup] Apply Dark Theme implementation for UX 0.2,0.3.
authorAmit Kamboj <amit.kamboj@samsung.com>
Wed, 12 Jun 2013 16:37:55 +0000 (22:07 +0530)
committerSungho Kwak <sungho1.kwak@samsung.com>
Thu, 20 Jun 2013 12:51:14 +0000 (21:51 +0900)
Change-Id: I38b3a88e4edb65ea8bbd2e0d278a9b752a940b24

Conflicts:

themes/inc/tizen-dark-inc.edc
themes/widgets/popup.edc

themes/images/HD/dark/Popup/00_popup_bg.png
themes/images/HD/dark/Popup/00_popup_button_bg.png [new file with mode: 0644]
themes/images/HD/dark/Popup/00_popup_title_bg.png [new file with mode: 0644]
themes/images/HD/light/Popup/00_popup_button_bg.png [new file with mode: 0644]
themes/images/HD/light/Popup/00_popup_title_bg.png [new file with mode: 0644]
themes/inc/tizen-dark-inc.edc
themes/inc/tizen-light-inc.edc
themes/widgets/popup.edc

index 28f1c62..982c51b 100644 (file)
Binary files a/themes/images/HD/dark/Popup/00_popup_bg.png and b/themes/images/HD/dark/Popup/00_popup_bg.png differ
diff --git a/themes/images/HD/dark/Popup/00_popup_button_bg.png b/themes/images/HD/dark/Popup/00_popup_button_bg.png
new file mode 100644 (file)
index 0000000..11e17c6
Binary files /dev/null and b/themes/images/HD/dark/Popup/00_popup_button_bg.png differ
diff --git a/themes/images/HD/dark/Popup/00_popup_title_bg.png b/themes/images/HD/dark/Popup/00_popup_title_bg.png
new file mode 100644 (file)
index 0000000..ab43b59
Binary files /dev/null and b/themes/images/HD/dark/Popup/00_popup_title_bg.png differ
diff --git a/themes/images/HD/light/Popup/00_popup_button_bg.png b/themes/images/HD/light/Popup/00_popup_button_bg.png
new file mode 100644 (file)
index 0000000..11e17c6
Binary files /dev/null and b/themes/images/HD/light/Popup/00_popup_button_bg.png differ
diff --git a/themes/images/HD/light/Popup/00_popup_title_bg.png b/themes/images/HD/light/Popup/00_popup_title_bg.png
new file mode 100644 (file)
index 0000000..ab43b59
Binary files /dev/null and b/themes/images/HD/light/Popup/00_popup_title_bg.png differ
index 86e6c3c..d603583 100755 (executable)
 
 #define POPUP_DESCRIPTION_DEFAULT_TEXT_MIN_INC 648 300
 
-#define POPUP_ITEM_BG_DEFAULT_MIN_INC 648 112
-#define POPUP_ITEM_LEFT_MIN_PADDING_INC 5 0
-#define POPUP_ITEM_RIGHT_MIN_PADDING_INC 5 0
+#define POPUP_ITEM_BG_DEFAULT_MIN_INC 620 112
+#define POPUP_ITEM_LEFT_MIN_PADDING_INC 26 0
+#define POPUP_ITEM_RIGHT_MIN_PADDING_INC 26 0
 #define POPUP_ITEM_ICON_TEXT_PADDING_INC 16 0
-#define POPUP_ITEM_TEXT_DISABLED_COLOR_INC 128 128 128 255
-#define POPUP_ITEM_TEXT_DISABLED_VISIBLE_COLOR_INC 128 128 128 255
+#define POPUP_ITEM_TEXT_DISABLED_COLOR_INC 250 250 250 102
+#define POPUP_ITEM_TEXT_DISABLED_VISIBLE_COLOR_INC 250 250 250 102
 
-#define POPUP_ITEM_BG_LANDCAPE_MIN_INC 828 112
+#define POPUP_ITEM_BG_LANDCAPE_MIN_INC 800 112
 
-#define POPUP_DEFAULT_TITLE_TEXT_COLOR_INC "#3b73b6"
-#define POPUP_DEFAULT_TITLE_TEXT_SHADOW_COLOR "#ffffff"
+#define POPUP_DEFAULT_TITLE_TEXT_COLOR_INC "#fafafa"
+#define POPUP_DEFAULT_TITLE_TEXT_SHADOW_COLOR "#000000bf"
 #define POPUP_DEFAULT_TITLE_TEXT_SHADOW_STYLE "far_shadow,bottom"
-#define POPUP_DEFAULT_DESCRIPTION_TEXT_COLOR_INC "#000000"
+#define POPUP_DEFAULT_DESCRIPTION_TEXT_COLOR_INC "#FFFFFF"
 #define POPUP_DIM_BG_DEFAULT_COLOR_INC 0 0 0 0
 #define POPUP_DIM_BG_COLOR_INC 0 0 0 178
 #define POPUP_DIM_BG_CLICKED_COLOR_INC 0 0 0 127
 #define POPUP_BASE_DEFAULT_TEXT_FONT_SIZE_INC 50
 #define POPUP_DESCRIPTION_DEFAULT_TEXT_FONT_SIZE_INC 38
 
-#define POPUP_BASE_DEFAULT_BASE_DEFAULT_MIN_INC 720 0
-#define POPUP_BASE_DEFAULT_BASE_DEFAULT_MAX_INC 720 1120
-#define POPUP_BASE_DEFAULT_BASE_LANDSCAPE_MIN_INC 900 0
-#define POPUP_BASE_DEFAULT_BASE_LANDSCAPE_MAX_INC 900 720
+#define POPUP_BASE_DEFAULT_BASE_DEFAULT_MIN_INC 652 0
+#define POPUP_BASE_DEFAULT_BASE_DEFAULT_MAX_INC 652 1120
+#define POPUP_BASE_DEFAULT_BASE_LANDSCAPE_MIN_INC 832 0
+#define POPUP_BASE_DEFAULT_BASE_LANDSCAPE_MAX_INC 832 720
 #define POPUP_BASE_DEFAULT_BG_DEFAULT_IMAGE_BORDER_INC 26 26 32 47
-#define POPUP_BASE_DEFAULT_TITLE_DEFAULT_MIN_INC 636 78
-#define POPUP_BASE_DEFAULT_TITLE_LANDSCAPE_MIN_INC 816 78
+#define POPUP_BASE_DEFAULT_TITLE_DEFAULT_IMAGE_BORDER_INC 26 26 32 47
+#define POPUP_BASE_DEFAULT_BUTTON_BG_IMAGE_BORDER_INC 26 26 32 47
+#define POPUP_BASE_DEFAULT_TITLE_DEFAULT_MIN_INC 652 78
+#define POPUP_BASE_DEFAULT_TITLE_LANDSCAPE_MIN_INC 832 78
 #define POPUP_BASE_DEFAULT_TITLE_VOLUMEBAR_MIN_INC 648 68
-#define POPUP_BASE_DEFAULT_PADDING_MIN_MAX_INC 30 10
+#define POPUP_BASE_DEFAULT_PADDING_MIN_MAX_INC 18 16
 #define POPUP_BASE_DEFAULT_TITLE_ICON_DEFAULT_MIN_MAX_INC 64 64
 #define POPUP_BASE_DEFAULT_CONTENT_DEFAULT_MIN_MAX_INC 630 300
 #define POPUP_BASE_DEFAULT_CONTENT_LANDSCAPE_MIN_MAX_INC 810 300
-#define POPUP_BASE_DEFAULT_BUTTON_BG_DEFAULT_MIN_INC 648 114
+#define POPUP_BASE_DEFAULT_BUTTON_BG_DEFAULT_MIN_INC 596 112
 
 #define POPUP_DESC_LEFT_PADDING 16
 #define POPUP_DESC_RIGHT_PADDING 16
 #define POPUP_DESC_TOP_PADDING 14
-#define POPUP_DESC_BOTTOM_PADDING 34
+#define POPUP_DESC_BOTTOM_PADDING 16
 #define POPUP_LABEL_DESC_TOP_PADDING 32
 #define POPUP_LABEL_DESC_BOTTOM_PADDING 32
-#define POPUP_ACTION_DESC_TOP_PADDING 20
+#define POPUP_ACTION_DESC_TOP_PADDING 11
+#define POPUP_TITLE_LEFT_PADDING 42
+#define POPUP_TITLE_RIGHT_PADDING 42
 #define POPUP_TITLE_TOP_PADDING 20
 #define POPUP_TITLE_BOTTOM_PADDING 0
 #define POPUP_TITLE_ICON_TEXT_PADDING_INC 16 0
 #define POPUP_CONTENT_DEFAULT_CONTENT_DEFAULT_MIN_INC 630 0
 #define POPUP_CONTENT_DEFAULT_CONTENT_LANDSCAPE_MIN_INC 810 0
 
-#define POPUP_BASE_CONTENT_EXPAND_BG_DEFAULT_MIN_INC 0 114
+#define POPUP_BASE_CONTENT_EXPAND_BG_DEFAULT_MIN_INC 0 96
 #define POPUP_BASE_CONTENT_EXPAND_TITLE_DEFAULT_MIN_INC 0 78
 
-#define POPUP_BASE_VERTICAL_BUTTON_BUTTONAREA_DEFAULT_MIN_INC 648 324
+#define POPUP_BASE_VERTICAL_BUTTON_BUTTONAREA_DEFAULT_MIN_INC 568 296
 
-#define POPUP_BUTTON3_VERTICAL_BUTTON_PADDING_TOP_MIN_INC 0 20
-#define POPUP_BUTTON_VERTICAL_ACTION_AREA_HEIGHT "324"
-#define POPUP_BUTTON3_VERTICAL_BUTTON_BUTTON_MIN_MAX_INC 394 74
+#define POPUP_BUTTON3_VERTICAL_BUTTON_PADDING_TOP_MIN_INC 0 10
+#define POPUP_BUTTON_VERTICAL_ACTION_AREA_HEIGHT "296"
+#define POPUP_BUTTON3_VERTICAL_BUTTON_BUTTON_MIN_MAX_INC 394 76
 #define POPUP_BUTTON3_VERTICAL_BUTTON_PADDING_BUTTON_MIN_INC 0 24
 #define POPUP_BUTTON3_VERTICAL_BUTTON_PADDING_BUTTON_MAX_INC 9999 24
 
-#define POPUP_CONTENT_LISTSTYLE_PADDING_TOP_MIN_MAX_INC 17 20
-#define POPUP_CONTENT_LISTSTYLE_CONTENT_DEFAULT_MIN_INC 614 408
-#define POPUP_CONTENT_LISTSTYLE_PADDING_RIGHT_MIN_INC 17 0
+#define POPUP_CONTENT_LISTSTYLE_PADDING_TOP_MIN_MAX_INC 0 20
+#define POPUP_CONTENT_LISTSTYLE_CONTENT_DEFAULT_MIN_INC 568 408
+#define POPUP_CONTENT_LISTSTYLE_PADDING_RIGHT_MIN_INC 0 0
 
 #define POPUP_CONTENT_MINSTYLE_LEFT_PADDING_MIN_INC 16
 #define POPUP_CONTENT_MINSTYLE_RIGHT_PADDING_MIN_INC 16
-#define POPUP_CONTENT_MINSTYLE_CONTENT_DEFAULT_MIN_INC 686 0
+#define POPUP_CONTENT_MINSTYLE_CONTENT_DEFAULT_MIN_INC 568 0
 #define POPUP_CONTENT_MINSTYLE_CONTENT_LANDSCAPE_MIN_INC 866 0
 #define POPUP_CONTENT_VOLUMEBAR_STYLE_CONTENT_DEFAULT_MIN_INC 648 300
 #define POPUP_CONTENT_VOLUMEBAR_TEXT_STYLE_CONTENT_DEFAULT_MIN_INC 648 250
 #define POPUP_BASE_VOLUMEBAR_STYLE_BUTTONAREA_BG_DEFAULT_MIN_INC 648 134
 
-#define POPUP_BUTTON_DEFAULT_ACTION_AREA_HEIGHT "114"
-#define POPUP_BUTTON1_DEFAULT_BUTTON1_DEFAULT_MIN_INC 395 74
-#define POPUP_BUTTON1_DEFAULT_BUTTON1_DEFAULT_MAX_INC 648 74
-#define POPUP_BUTTON2_DEFAULT_HEIGHT_INC 74
-#define POPUP_BUTTON2_DEFAULT_BUTTON_DEFAULT_MIN_MAX_INC 314 74
-#define POPUP_BUTTON2_DEFAULT_PADDING_BUTTON_MIN_MAX_INC 16 74
-#define POPUP_BUTTON2_DEFAULT_PADDING_LEFT_RIGHT_WIDTH_INC 36
-#define POPUP_BUTTON3_DEFAULT_HEIGHT_INC 74
-#define POPUP_BUTTON3_DEFAULT_PADDING_BUTTON_MIN_MAX_INC 16 74
-#define POPUP_BUTTON3_DEFAULT_PADDING_LEFT_RIGHT_WIDTH_INC 36
+#define POPUP_BUTTON_DEFAULT_ACTION_AREA_HEIGHT "96"
+#define POPUP_BUTTON1_DEFAULT_BUTTON1_DEFAULT_MIN_INC 396 76
+#define POPUP_BUTTON1_DEFAULT_BUTTON1_DEFAULT_MAX_INC 604 76
+#define POPUP_BUTTON2_DEFAULT_HEIGHT_INC 76
+#define POPUP_BUTTON2_DEFAULT_BUTTON_DEFAULT_MIN_MAX_INC 314 76
+#define POPUP_BUTTON2_DEFAULT_PADDING_BUTTON_MIN_MAX_INC 16 76
+#define POPUP_BUTTON2_DEFAULT_PADDING_LEFT_RIGHT_WIDTH_INC 28
+#define POPUP_BUTTON3_DEFAULT_HEIGHT_INC 76
+#define POPUP_BUTTON3_DEFAULT_PADDING_BUTTON_MIN_MAX_INC 10 76
+#define POPUP_BUTTON3_DEFAULT_PADDING_LEFT_RIGHT_WIDTH_INC 28
 
 #define PROGRESSBAR_LIST_PROGRESS_STYLE_TEXT_COLOR_INC          128 128 128 255
 #define PROGRESSBAR_LIST_PROGRESS_STYLE_STATUS_TEXT_COLOR_INC          128 128 128 255
index 65c8cfb..947e649 100755 (executable)
 #define POPUP_BASE_DEFAULT_BASE_LANDSCAPE_MIN_INC 900 0
 #define POPUP_BASE_DEFAULT_BASE_LANDSCAPE_MAX_INC 900 720
 #define POPUP_BASE_DEFAULT_BG_DEFAULT_IMAGE_BORDER_INC 26 26 32 47
+#define POPUP_BASE_DEFAULT_TITLE_DEFAULT_IMAGE_BORDER_INC 26 26 32 47
+#define POPUP_BASE_DEFAULT_BUTTON_BG_IMAGE_BORDER_INC 26 26 32 47
 #define POPUP_BASE_DEFAULT_TITLE_DEFAULT_MIN_INC 636 78
 #define POPUP_BASE_DEFAULT_TITLE_LANDSCAPE_MIN_INC 816 78
 #define POPUP_BASE_DEFAULT_TITLE_VOLUMEBAR_MIN_INC 648 68
 #define POPUP_LABEL_DESC_TOP_PADDING 32
 #define POPUP_LABEL_DESC_BOTTOM_PADDING 32
 #define POPUP_ACTION_DESC_TOP_PADDING 20
+#define POPUP_TITLE_LEFT_PADDING 42
+#define POPUP_TITLE_RIGHT_PADDING 42
 #define POPUP_TITLE_TOP_PADDING 20
 #define POPUP_TITLE_BOTTOM_PADDING 0
 #define POPUP_TITLE_ICON_TEXT_PADDING_INC 16 0
index 310fd45..e89fbac 100644 (file)
@@ -197,24 +197,7 @@ group { name: "elm/notify/block_events/popup";
    alias: "elm/notify/block_events/volumebarstyle_text";
    alias: "elm/notify/block_events/content_expand";
    alias: "elm/notify/block_events/content_no_vhpad";
-   images {
-      image: "00_popup_dim_lighting_v.png" COMP;
-      image: "00_popup_dim_lighting_h.png" COMP;
-   }
    parts {
-      part { name: "block_events";
-         type: IMAGE;
-         scale: 1;
-         repeat_events: 1;
-         description { state: "default" 0.0;
-            image.normal: "00_popup_dim_lighting_v.png";
-            fill.smooth: 0;
-         }
-         description { state: "landscape" 0.0;
-            image.normal: "00_popup_dim_lighting_h.png";
-            fill.smooth: 0;
-         }
-      }
       part {name: "popup_indicator";
          type: RECT;
          scale: 1;
@@ -260,7 +243,6 @@ group { name: "elm/notify/block_events/popup";
          signal: "elm,action,show";
          source: "elm";
          action: STATE_SET "default" 0.0;
-         target: "block_events";
          target: "block_events_color";
          target: "popup_indicator";
        }
@@ -298,6 +280,7 @@ group { name: "elm/notify/block_events/popup";
          target: "popup_indicator";
          transition: LINEAR 0.2;
       }
+      /*
       program { name: "landscape_mode";
          source: "elm";
          signal: "elm,state,orient,90";
@@ -322,6 +305,7 @@ group { name: "elm/notify/block_events/popup";
          action: STATE_SET "default" 0.0;
          target: "block_events";
       }
+      */
    }
 }
 
@@ -464,8 +448,6 @@ group { name: "elm/label/base/popup/default";
 
 group { name: "elm/popup/base/default";
    alias: "elm/popup/base/transparent";
-   alias: "elm/popup/base/verticalbuttonstyle";
-   alias: "elm/popup/base/verticalbuttonstyle_transparent";
    alias: "elm/popup/base/customstyle";
    alias: "elm/popup/base/customstyle_transparent";
    alias: "elm/popup/base/liststyle";
@@ -473,10 +455,12 @@ group { name: "elm/popup/base/default";
    alias: "elm/popup/base/indicator_norepeatevent";
    images {
       image: "00_popup_bg.png" COMP;
+      image: "00_popup_button_bg.png" COMP;
+      image: "00_popup_title_bg.png" COMP;
    }
    styles {
       style { name: "popup_title_style";
-         base: "font=Tizen:style=Medium align=left font_size="POPUP_BASE_DEFAULT_TEXT_FONT_SIZE_INC" color="POPUP_DEFAULT_TITLE_TEXT_COLOR_INC" style="POPUP_DEFAULT_TITLE_TEXT_SHADOW_STYLE" shadow_color="POPUP_DEFAULT_TITLE_TEXT_SHADOW_COLOR" wrap=mixed ellipsis=1.0 text_class=tizen";
+         base: "font=Tizen:style=Bold align=left font_size="POPUP_BASE_DEFAULT_TEXT_FONT_SIZE_INC" color="POPUP_DEFAULT_TITLE_TEXT_COLOR_INC" style="POPUP_DEFAULT_TITLE_TEXT_SHADOW_STYLE" shadow_color="POPUP_DEFAULT_TITLE_TEXT_SHADOW_COLOR" wrap=mixed ellipsis=1.0 text_class=tizen";
          tag:  "br" "\n";
          tag:  "tab" "\t";
       }
@@ -504,6 +488,22 @@ group { name: "elm/popup/base/default";
             fixed: 1 1;
          }
       }
+      part {
+         name:"bottom_padding";
+         type: SPACER;
+         scale: 1;
+         description { state: "default" 0.0;
+            min: POPUP_DESC_RIGHT_PADDING POPUP_DESC_BOTTOM_PADDING;
+            max: POPUP_DESC_RIGHT_PADDING POPUP_DESC_BOTTOM_PADDING;
+            align: 1 1;
+            fixed: 1 1;
+            rel1 {
+               relative: 0.0 1.0;
+               to: "base";
+            }
+            rel2.to: "base";
+         }
+      }
       part { name: "base";
          scale: 1;
          description { state: "default" 0.0;
@@ -524,24 +524,31 @@ group { name: "elm/popup/base/default";
          }
       }
       part { name: "elm.bg.title";
-         type: SPACER;
          scale: 1;
          description { state: "default" 0.0;
             min: POPUP_BASE_DEFAULT_TITLE_DEFAULT_MIN_INC;
             max: POPUP_BASE_DEFAULT_TITLE_DEFAULT_MIN_INC;
             fixed: 1 1;
+            visible: 0;
             align: 0.5 0.0;
+            image {
+               normal: "00_popup_title_bg.png";
+               border: POPUP_BASE_DEFAULT_TITLE_DEFAULT_IMAGE_BORDER_INC;
+               border_scale: 1;
+            }
             rel1 {
-               relative: 0.5 1.0;
-               to_y: "shadow_left_top_padding";
+               relative: 0.5 0.0;
+               to: "base";
             }
             rel2 {
-               relative: 0.5 1.0;
-               to_y: "shadow_left_top_padding";
+               relative: 0.5 0.0;
+               to: "base";
             }
+            fill.smooth: 0;
          }
          description { state: "visible" 0.0;
             inherit: "default" 0.0;
+            visible: 1;
          }
          description { state: "landscape" 0.0;
             inherit: "default" 0.0;
@@ -550,6 +557,7 @@ group { name: "elm/popup/base/default";
          }
          description { state: "landscape_visible" 0.0;
             inherit: "landscape" 0.0;
+            visible: 1;
          }
       }
       part { name: "action_top_padding";
@@ -613,8 +621,8 @@ group { name: "elm/popup/base/default";
             align: 0.0 0.0;
             rel1.to: "elm.bg.title";
             fixed: 1 1;
-            min: 0 POPUP_TITLE_TOP_PADDING;
-            max: 0 POPUP_TITLE_TOP_PADDING;
+            min: POPUP_TITLE_LEFT_PADDING POPUP_TITLE_TOP_PADDING;
+            max: POPUP_TITLE_LEFT_PADDING POPUP_TITLE_TOP_PADDING;
          }
       }
       part { name: "title_right_bottom_padding";
@@ -624,8 +632,8 @@ group { name: "elm/popup/base/default";
             align: 1.0 1.0;
             rel2.to: "elm.bg.title";
             fixed: 1 1;
-            min: 0 POPUP_TITLE_BOTTOM_PADDING;
-            max: 0 POPUP_TITLE_BOTTOM_PADDING;
+            min: POPUP_TITLE_RIGHT_PADDING POPUP_TITLE_BOTTOM_PADDING;
+            max: POPUP_TITLE_RIGHT_PADDING POPUP_TITLE_BOTTOM_PADDING;
          }
       }
       part { name: "icon_rect";
@@ -814,33 +822,46 @@ group { name: "elm/popup/base/default";
             color: 0 0 0 0;
          }
       }
-      part { name: "elm.swallow.action_area";
-         type: SWALLOW;;
-         scale: 1;
+      part { name: "elm.bg.action_area";
+         scale : 1;
          description { state: "default" 0.0;
             min: POPUP_BASE_DEFAULT_BUTTON_BG_DEFAULT_MIN_INC;
-            fixed: 1 1;
+            fixed : 0 1;
             align: 0.5 1.0;
             visible: 0;
-            rel1 {
-               relative: 0.0 0.0;
-               to_x: "base";
-               to_y: "shadow_right_bottom_padding";
+            image {
+               normal: "00_popup_button_bg.png";
+               border: POPUP_BASE_DEFAULT_BUTTON_BG_IMAGE_BORDER_INC;
+               border_scale: 1;
             }
-            rel2 {
-               relative: 1.0 0.0;
-               to_x: "base";
-               to_y: "shadow_right_bottom_padding";
+            rel1 {
+               relative: 0.0 1.0;
+               to: "base";
             }
+            rel2.to: "base";
          }
          description { state: "visible" 0.0;
             inherit: "default" 0.0;
             visible: 1;
          }
       }
+      part { name: "elm.swallow.action_area";
+         type: SWALLOW;
+         scale : 1;
+         description { state: "default" 0.0;
+            fixed: 0 1;
+            align: 0.0 0.0;
+            rel1.to: "elm.bg.action_area";
+            rel2 {
+               relative: 1.0 0.0;
+               to_x: "elm.bg.action_area";
+               to_y: "bottom_padding";
+            }
+         }
+      }
    }
    programs {
-      program { name: show_title_icon;
+    program { name: show_title_icon;
          signal: "elm,state,title,icon,visible";
          source: "elm";
          action: STATE_SET "visible" 0.0;
@@ -902,7 +923,7 @@ group { name: "elm/popup/base/default";
               set_state(PART:"elm.swallow.content", "show_action_title_area", 0.0);
             else
               set_state(PART:"elm.swallow.content", "show_action_area", 0.0);
-            set_state(PART:"elm.swallow.action_area", "visible", 0.0);
+            set_state(PART:"elm.bg.action_area", "visible", 0.0);
          }
       }
       program { name: hide_action_area;
@@ -917,16 +938,22 @@ group { name: "elm/popup/base/default";
               set_state(PART:"elm.swallow.content", "show_title_area", 0.0);
             else
               set_state(PART:"elm.swallow.content", "default", 0.0);
-            set_state(PART:"elm.swallow.action_area", "default", 0.0);
+            set_state(PART:"elm.bg.action_area", "default", 0.0);
          }
       }
       program { name: "change_to_landscape";
          signal: "elm,state,landscape";
          source: "elm";
-         action: STATE_SET "landscape" 0.0;
-         target: "base";
-         target: "elm.bg.title";
-         target: "access.title";
+         script {
+            new st[31];
+            new Float:vl;
+            set_state(PART:"base", "landscape", 0.0);
+            get_state(PART:"elm.bg.title", st, 30, vl);
+            if ((!strcmp(st, "visible")) || (!strcmp(st, "landscape_visible")))
+              set_state(PART:"elm.bg.title", "landscape_visible", 0.0);
+            else
+              set_state(PART:"elm.bg.title", "landscape", 0.0);
+         }
          after: "orientation_change";
       }
       program { name: "orientation_change";
@@ -935,10 +962,16 @@ group { name: "elm/popup/base/default";
       program { name: "change_to_portrait";
          signal: "elm,state,portrait";
          source: "elm";
-         action: STATE_SET "default" 0.0;
-         target: "base";
-         target: "elm.bg.title";
-         target: "access.title";
+         script {
+            new st[31];
+            new Float:vl;
+            set_state(PART:"base", "default", 0.0);
+            get_state(PART:"elm.bg.title", st, 30, vl);
+            if ((!strcmp(st, "visible")) || (!strcmp(st, "landscape_visible")))
+              set_state(PART:"elm.bg.title", "visible", 0.0);
+            else
+              set_state(PART:"elm.bg.title", "default", 0.0);
+         }
          after: "orientation_change";
       }
       program { name: "landscape_mode";
@@ -964,6 +997,33 @@ group { name: "elm/popup/base/default";
    } /* end of programs */
 }
 
+group { name: "elm/popup/base/verticalbuttonstyle";
+   alias: "elm/popup/base/verticalbuttonstyle_transparent";
+   inherit: "elm/popup/base/default";
+   parts {
+      part { name: "elm.swallow.action_area";
+         type: SWALLOW;
+         scale : 1;
+         description { state: "default" 0.0;
+            align: 0.5 1.0;
+            fixed: 0 1;
+            min: POPUP_BASE_VERTICAL_BUTTON_BUTTONAREA_DEFAULT_MIN_INC;
+            rel1 {
+               relative: 0.0 0.0;
+               to_x: "base";
+               to_y: "shadow_right_bottom_padding";
+            }
+            rel2 {
+               relative: 1.0 0.0;
+               to_x: "base";
+               to_y: "shadow_right_bottom_padding";
+            }
+         }
+      }
+   }
+}
+
+
 group { name: "elm/popup/base/content_no_vhpad";
    inherit: "elm/popup/base/default";
    alias: "elm/popup/base/min_menustyle";
@@ -1099,8 +1159,8 @@ group { name: "elm/popup/content/content_no_vhpad";
          mouse_events: 0;
          description { state: "default" 0.0;
             align: 0.5 0.0;
-            min: 0 POPUP_ACTION_DESC_TOP_PADDING;
-            max: 0 POPUP_ACTION_DESC_TOP_PADDING;
+            min: 0 0;
+            max: 0 0;
             fixed: 0 1;
             rel1 {
                relative: 1.0 0.0;
@@ -1139,8 +1199,8 @@ group { name: "elm/popup/content/content_no_vhpad";
          scale: 1;
          description { state: "default" 0.0;
             align: 0.5 1.0;
-            min: 0 POPUP_ACTION_DESC_TOP_PADDING;
-            max: 0 POPUP_ACTION_DESC_TOP_PADDING;
+            min: 0 0;
+            max: 0 0;
             fixed: 0 1;
             rel1 {
                relative: 0.0 1.0;
@@ -1149,6 +1209,23 @@ group { name: "elm/popup/content/content_no_vhpad";
             rel2.to_x: "pad_r";
          }
       }
+      part { name:"elm.swallow.content";
+         type: SWALLOW;
+         scale: 1;
+         description { state: "default" 0.0;
+            fixed: 1 0;
+            rel1 {
+               relative: 1.0 1.0;
+               to_x: "pad_l";
+               to_y: "pad_t";
+            }
+            rel2 {
+               relative: 0.0 0.0;
+               to_x: "pad_r";
+               to_y: "pad_b";
+            }
+         }
+      }
    }
 }
 
@@ -1503,7 +1580,7 @@ group { name: "elm/label/base/popup/verticalbuttonstyle";
    styles
      {
         style { name: "popup_desc_style_center";
-           base: "font=Tizen:style=Medium font_size="POPUP_DESCRIPTION_DEFAULT_TEXT_FONT_SIZE_INC" align=center color="POPUP_DEFAULT_DESCRIPTION_TEXT_COLOR_INC" text_class=tizen";
+           base: "font=Tizen:style=Regular font_size="POPUP_DESCRIPTION_DEFAULT_TEXT_FONT_SIZE_INC" align=center color="POPUP_DEFAULT_DESCRIPTION_TEXT_COLOR_INC" text_class=tizen";
            tag:  "br" "\n";
            tag:  "ps" "ps";
            tag:  "whitecolor" "+ color=#ffffff";
@@ -1526,29 +1603,28 @@ group { name: "elm/label/base/popup/verticalbuttonstyle";
    }
 }
 
-
 group { name: "elm/popup/buttons3/verticalbuttonstyle";
    alias: "elm/popup/buttons3/verticalbuttonstyle_transparent";
    data.item: "action_area_height" POPUP_BUTTON_VERTICAL_ACTION_AREA_HEIGHT;
    parts {
       part { name: "bg";
-         type: SPACER;
-         scale: 1;
+         scale : 1;
          description { state: "default" 0.0;
-            min: POPUP_BASE_VERTICAL_BUTTON_BUTTONAREA_DEFAULT_MIN_INC;
-            fixed: 1 0;
+            align: 0.5 0.0;
+            image {
+               normal: "00_popup_button_bg.png";
+               border: POPUP_BASE_DEFAULT_BUTTON_BG_IMAGE_BORDER_INC;
+               border_scale: 1;
+            }
          }
       }
       part { name: "elm.rect.pad_btn_top";
          type: SPACER;
-         scale: 1;
+         scale : 1;
          description { state: "default" 0.0;
             min: POPUP_BUTTON3_VERTICAL_BUTTON_PADDING_TOP_MIN_INC;
             fixed: 0 1;
             align: 0.0 0.0;
-            rel1 {
-               relative: 0.0 0.0;
-            }
             rel2 {
                relative: 1.0 0.0;
             }
@@ -1563,7 +1639,8 @@ group { name: "elm/popup/buttons3/verticalbuttonstyle";
             fixed: 1 1;
             align: 0.5 0.0;
             rel1 {
-               relative: 0.0 1.0; to_y: "elm.rect.pad_btn_top";
+               relative: 0.0 1.0;
+               to_y: "elm.rect.pad_btn_top";
             }
          }
       }
@@ -1576,10 +1653,12 @@ group { name: "elm/popup/buttons3/verticalbuttonstyle";
             fixed: 1 1;
             align: 0.5 0.0;
             rel1 {
-               relative: 0.0 1.0; to: "actionbtn1";
+               relative: 0.0 1.0;
+               to: "actionbtn1";
             }
             rel2 {
-               relative: 1.0 1.0; to: "actionbtn1";
+               relative: 1.0 1.0;
+               to: "actionbtn1";
             }
          }
       }
@@ -1591,7 +1670,9 @@ group { name: "elm/popup/buttons3/verticalbuttonstyle";
             max: POPUP_BUTTON3_VERTICAL_BUTTON_BUTTON_MIN_MAX_INC;
             fixed: 1 1;
             align: 0.5 0.0;
-            rel1 { relative: 0 1.0; to_y: "elm.rect.pad_btn"; }
+            rel1 { relative: 0 1.0;
+               to_y: "elm.rect.pad_btn"; 
+            }
          }
       }
       part { name: "elm.rect.pad_btn2";
@@ -1603,10 +1684,12 @@ group { name: "elm/popup/buttons3/verticalbuttonstyle";
             fixed: 1 1;
             align: 0.5 0.0;
             rel1 {
-               relative: 0.0 1.0; to: "actionbtn2";
+               relative: 0.0 1.0;
+               to: "actionbtn2";
             }
             rel2 {
-               relative: 1.0 1.0; to: "actionbtn2";
+               relative: 1.0 1.0;
+               to: "actionbtn2";
             }
          }
       }
@@ -2173,52 +2256,33 @@ group { name: "elm/popup/base/content_expand";
    alias: "elm/popup/base/content_expand_transparent";
    images {
       image: "00_popup_bg.png" COMP;
+      image: "00_popup_button_bg.png" COMP;
+      image: "00_popup_title_bg.png" COMP;
    }
    parts {
-      part {
-         name: "shadow_right_bottom_padding";
-         type: SPACER;
-         scale: 1;
-         description { state: "default" 0.0;
-            min: POPUP_DESC_RIGHT_PADDING POPUP_DESC_BOTTOM_PADDING;
-            max: POPUP_DESC_RIGHT_PADDING POPUP_DESC_BOTTOM_PADDING;
-            align: 1.0 1.0;
-            fixed: 1 1;
-         }
-      }
       part { name: "base";
-         type: IMAGE;
-         scale: 1;
+         scale : 1;
          description { state: "default" 0.0;
             rel1.to_x: "elm.swallow.content";
-            rel2.to_x: "elm.bg.action_area";
+            rel2.to_x: "elm.swallow.content";
             image {
                normal: "00_popup_bg.png";
                border: POPUP_BASE_DEFAULT_BG_DEFAULT_IMAGE_BORDER_INC;
                border_scale: 1;
             }
-            fill.smooth: 0;
             align: 0.0 0.0;
          }
       }
-      part { name: "access.base";
-         type: RECT;
-         description { state: "default" 0.0;
-            fixed: 1 1;
-            rel1.to: "base";
-            rel2.to: "base";
-            color: 0 0 0 0;
-         }
-      }
       part { name: "elm.bg.title";
-         type: RECT;
-         scale: 1;
+         scale : 1;
          description { state: "default" 0.0;
             min: POPUP_BASE_CONTENT_EXPAND_TITLE_DEFAULT_MIN_INC;
-            fixed: 0 1;
+            fixed : 0 1;
             align: 0.5 0.0;
             visible: 0;
-            color: 0 0 0 0;
+            image.normal: "00_popup_title_bg.png";
+            image.border: POPUP_BASE_DEFAULT_TITLE_DEFAULT_IMAGE_BORDER_INC;
+            image.border_scale: 1;
             rel1.to_x: "base";
             rel2 {
                relative: 1.0 0.0;
@@ -2262,7 +2326,7 @@ group { name: "elm/popup/base/content_expand";
             align: 0.0 0.5;
             rel1 {
                to: "left_pad";
-               relative: 1.0 0.0;
+               relative: 1.0 1.0;
             }
             rel2 {
                to: "right_pad";
@@ -2338,22 +2402,20 @@ group { name: "elm/popup/base/content_expand";
          }
       }
       part { name: "elm.bg.action_area";
-         type: RECT;
          scale: 1;
          description { state: "default" 0.0;
             min: POPUP_BASE_CONTENT_EXPAND_BG_DEFAULT_MIN_INC;
-            fixed: 0 1;
+            fixed : 0 1;
             align: 0.5 1.0;
             visible: 0;
+            image.normal: "00_popup_button_bg.png";
+            image.border: POPUP_BASE_DEFAULT_BUTTON_BG_IMAGE_BORDER_INC;
+            image.border_scale: 1;
             rel1 {
-               relative: 0.0 0.0;
-               to_y: "shadow_right_bottom_padding";
-            }
-            rel2 {
-               relative: 1.0 0.0;
-               to_y: "shadow_right_bottom_padding";
+               relative: 0.0 1.0;
+               to_x: "base";
             }
-            color: 0 0 0 0;
+            rel2.to_x: "base";
          }
          description { state: "visible" 0.0;
             inherit: "default" 0.0;
@@ -2362,7 +2424,7 @@ group { name: "elm/popup/base/content_expand";
       }
       part { name: "elm.swallow.action_area";
          type: SWALLOW;
-         scale: 1;
+         scale : 1;
          description { state: "default" 0.0;
             rel1.to: "elm.bg.action_area";
             rel2.to: "elm.bg.action_area";