Fixes TIVI-1105 - Dialer UI keypad rendered overlapping while calling
[profile/ivi/lemolo.git] / data / themes / includes / call.edc
index f85f26a..537bf6a 100644 (file)
@@ -1,15 +1,15 @@
 group {
-   name: "elm/layout/dialer/call";
+   name: "elm/layout/ofono-efl/call";
 
    /*
     * Represents the dialer ongoing voice call(s) screen.
     *
     * Parts:
-    *   TEXT: elm.text.name
-    *   TEXT: elm.text.status
-    *   TEXT: elm.text.elapsed
+    *   TEXT: elm.text.<CALL>.name
+    *   TEXT: elm.text.<CALL>.status
+    *   TEXT: elm.text.<CALL>.elapsed
+    *   TEXT: elm.text.<CALL>.phone.type
     *   TEXT: elm.text.waiting
-    *   TEXT: elm.text.held
     *   SWALLOW: elm.swallow.multiparty-details
     *
     * Signals:
@@ -18,57 +18,53 @@ group {
     *     released,<ID>: key <ID> was released
     *     clicked,<ID>:  key <ID> was clicked (press and release in the key)
     *   Listen (source is "call"):
-    *     show,answer:     show "answer" action
-    *     hide,answer:     hide "answer" action
-    *     show,waiting:    show call waiting popup (decline, hold+answer...)
-    *     hide,waiting:    hide call waiting popup
-    *     show,held:       show call held entry
-    *     hide,held:       hide call held entry
-    *     show,elapsed:    have elapsed (elm.text.elapsed) and should be visible
-    *     hide,elapsed:    don't have elapsed and it should be hidden
-    *     show,multiparty: active call is multiparty
-    *     hide,multiparty: active call is not multiparty
-    *     show,held,multiparty: held call is multiparty
-    *     hide,held,multiparty: held call is not multiparty
-    *     state,<STATE>:   state changed to <STATE>
-    *     disable,<ID>:    disable action <ID>
-    *     enable,<ID>:     enable action <ID>
-    *     toggle,on,<ID>:  mark toggle action <ID> as selected
-    *     toggle,off,<ID>: mark toggle action <ID> as unselected
+    *     show,answer:            show "answer" action
+    *     hide,answer:            hide "answer" action
+    *     show,waiting:           show call waiting popup (hold+answer...)
+    *     hide,waiting:           hide call waiting popup
+    *     show,<CALL>,elapsed:    have elapsed (elm.text.<CALL>.elapsed)
+    *     hide,<CALL>,elapsed:    don't have elapsed and it should be hidden
+    *     show,<CALL>,multiparty: call is multiparty
+    *     hide,<CALL>,multiparty: call is not multiparty
+    *     state,<CALL>,<STATE>:   state changed to <STATE>
+    *     disable,<ID>:           disable action <ID>
+    *     enable,<ID>:            enable action <ID>
+    *     toggle,on,<ID>:         mark toggle action <ID> as selected
+    *     toggle,off,<ID>:        mark toggle action <ID> as unselected
     *     show,multiparty-details: ask the multiparty details to be visible
     *     hide,multiparty-details: ask the multiparty details to be hidden
+    *     calls,1                  single call mode
+    *     calls,2                  two calls mode
     *
     * Messages:
     *     1 - FLOAT: speaker volume 0.0-1.0
     *     2 - FLOAT: microphone volume 0.0-1.0
-    *     3 - FLOAT: elapsed time in seconds (> 0.0)
+    *     11 - FLOAT: elapsed time in seconds (> 0.0) for call #1
+    *     12 - FLOAT: elapsed time in seconds (> 0.0) for call #2
     *
-    * Where <ID> is: numbers 0 to 9, star, hash, mute, keypad, speaker,
-    * merge, swap, contacts, answer, hangup, waiting-hangup, hold-answer,
-    * hangup-answer, multiparty, held-multiparty, multiparty-details
+    * Where <ID> is: numbers 0 to 9, star, hash, mute, keypad,
+    * speaker, add-call, merge, swap, contacts, answer, hangup,
+    * waiting-hangup, hold-answer, hangup-answer, <CALL>,multiparty,
+    * multiparty-details, actions.
     *
     * Where <STATE> is: disconnected, active, held, dialing, alerting,
     * incoming, waiting.
+    *
+    * Where <CALL> is: 1 or 2.
     */
 
-   min: 720 1280;
+   min: WIDTH HEIGHT;
 
    images {
       image: "bg_call.jpg" COMP;
-      image: "bt_mute_pressed.png" COMP;
-      image: "bt_mute_released.png" COMP;
-      image: "bt_keypad_pressed.png" COMP;
-      image: "bt_keypad_released.png" COMP;
-      image: "bt_speaker_pressed.png" COMP;
-      image: "bt_speaker_released.png" COMP;
-      image: "bt_merge_pressed.png" COMP;
-      image: "bt_merge_released.png" COMP;
-      image: "bt_swap_pressed.png" COMP;
-      image: "bt_swap_released.png" COMP;
-      image: "bt_contacts_pressed.png" COMP;
-      image: "bt_contacts_released.png" COMP;
-      image: "bt_multiparty_pressed.png" COMP;
-      image: "bt_multiparty_released.png" COMP;
+      image: "ico_mute.png" COMP;
+      image: "ico_keypad.png" COMP;
+      image: "ico_speaker.png" COMP;
+      image: "ico_add_call.png" COMP;
+      image: "ico_merge.png" COMP;
+      image: "ico_swap.png" COMP;
+      image: "ico_contacts.png" COMP;
+      image: "ico_arrow_right.png" COMP;
    }
 
    parts {
@@ -80,7 +76,7 @@ group {
             state: "default" 0.0;
             color: 255 255 255 255;
             color_class: "dark";
-            min: 720 1280;
+            min: WIDTH HEIGHT;
             image {
                normal: "bg_call.jpg";
                scale_hint: STATIC;
@@ -90,220 +86,16 @@ group {
       }
 
       part {
-         name: "clipper.multiparty";
+         name: "notification.bar";
          type: RECT;
-         clip_to: "clipper.multiparty-details-hidden";
-         description {
-            state: "default" 0.0;
-            color: 255 255 255 0;
-            visible: 0;
-         }
-         description {
-            state: "multiparty" 0.0;
-            inherit: "default" 0.0;
-            color: 255 255 255 255;
-            visible: 1;
-         }
-      }
-      part {
-         name: "button.multiparty";
-         type: IMAGE;
-         mouse_events: 1;
-         clip_to: "clipper.multiparty";
-         description {
-            state: "default" 0.0;
-            color: 255 255 255 255;
-            color_class: "action";
-            min: 96 96;
-            max: 96 96;
-            rel1 {
-               relative: 1.0 0.0;
-               offset: -96 37;
-            }
-            rel2 {
-               relative: 1.0 0.0;
-               offset: -1 133;
-            }
-            image.normal: "bt_multiparty_released.png";
-         }
-         description {
-            state: "pressed" 0.0;
-            inherit: "default" 0.0;
-            color: 255 255 255 0;
-            visible: 0;
-         }
-      }
-      part {
-         name: "button.over.multiparty";
-         type: IMAGE;
-         clip_to: "clipper.multiparty";
          mouse_events: 0;
          description {
             state: "default" 0.0;
-            color: 255 255 255 0;
-            visible: 0;
-            color_class: "action";
-            rel1.to: "button.multiparty";
-            rel2.to: "button.multiparty";
-            image.normal: "bt_multiparty_pressed.png";
-         }
-         description {
-            state: "pressed" 0.0;
-            inherit: "default" 0.0;
-            color: 255 255 255 255;
-            visible: 1;
-         }
-      }
-      programs {
-         program {
-            signal: "mouse,up,1";
-            source: "button.multiparty";
-            action: SIGNAL_EMIT "released,multiparty" "call";
-            after: "show_up_multiparty";
-            api: "multiparty_released" "multiparty was released";
-         }
-         program {
-            name: "show_up_multiparty";
-            action: STATE_SET "default" 0.0;
-            transition: DECELERATE 0.1;
-            target: "button.multiparty";
-            target: "button.over.multiparty";
-         }
-         program {
-            signal: "mouse,down,1";
-            source: "button.multiparty";
-            after: "show_down_multiparty";
-            action: SIGNAL_EMIT "pressed,multiparty" "call";
-            api: "multiparty_pressed" "multiparty was pressed";
-         }
-         program {
-            name: "show_down_multiparty";
-            action: STATE_SET "pressed" 0.0;
-            transition: ACCELERATE 0.1;
-            target: "button.multiparty";
-            target: "button.over.multiparty";
-         }
-         program {
-            signal: "mouse,clicked,1";
-            source: "button.multiparty";
-            action: SIGNAL_EMIT "clicked,multiparty" "call";
-            api: "multiparty_clicked" "multiparty was clicked";
-         }
-
-         program {
-            signal: "show,multiparty";
-            source: "call";
-            action: STATE_SET "multiparty" 0.0;
-            target: "clipper.multiparty";
-            target: "elm.text.name";
-            api: "multiparty_show" "make multiparty visible";
-         }
-         program {
-            signal: "hide,multiparty";
-            source: "call";
-            action: STATE_SET "default" 0.0;
-            target: "clipper.multiparty";
-            target: "elm.text.name";
-            api: "multiparty_hide" "make multiparty hidden";
-         }
-      }
-
-      part {
-         name: "elm.text.name";
-         type: TEXT;
-         mouse_events: 0;
-         scale: 1;
-         clip_to: "clipper.multiparty-details-hidden";
-         api: "name" "remote party call name";
-         description {
-            state: "default" 0.0;
-            color: 255 255 255 255;
-            color_class: "action";
-            align: 0.0 0.5;
-            rel1.offset: 46 0;
-            rel2 {
-               relative: 1.0 0.0;
-               offset: -47 169;
-            }
-            text {
-               text: "Gustavo Barbieri";
-               font: "Verdana";
-               size: 99;
-               size_range: 16 99;
-               fit: 1 1;
-               align: 0.0 0.5;
-               ellipsis: 0.0;
-            }
-         }
-         description {
-            state: "multiparty" 0.0;
-            inherit: "default" 0.0;
-            rel2.offset: -96 169;
-         }
-      }
-
-      part {
-         name: "elm.text.status";
-         type: TEXT;
-         mouse_events: 0;
-         scale: 1;
-         clip_to: "clipper.multiparty-details-hidden";
-         api: "status" "call status";
-         description {
-            state: "default" 0.0;
-            color: 255 255 255 255;
-            color_class: "light";
-            fixed: 1 1;
-            align: 0.0 0.0;
-            rel1 {
-               to: "elm.text.name";
-               relative: 0.0 1.0;
-               offset: 0 -20;
-            }
+            color: 0 0 0 255;
+            rel1.relative: 0.0 0.0;
             rel2 {
-               to: "elm.text.name";
-               relative: 0.0 1.0;
-               offset: 0 -1;
-            }
-            text {
-               text: "calling...";
-               font: "Verdana";
-               size: 43;
-               min: 1 1;
-               align: 0.0 0.0;
-            }
-         }
-      }
-
-      part {
-         name: "elm.text.elapsed";
-         type: TEXT;
-         mouse_events: 0;
-         scale: 1;
-         clip_to: "clipper.multiparty-details-hidden";
-         api: "elapsed" "call elapsed time (formatted)";
-         description {
-            state: "default" 0.0;
-            color: 255 255 255 255;
-            color_class: "light";
-            fixed: 1 1;
-            align: 0.0 0.0;
-            rel1 {
-               to: "elm.text.status";
                relative: 1.0 0.0;
-               offset: 32 0;
-            }
-            rel2 {
-               to: "elm.text.status";
-               relative: 1.0 1.0;
-               offset: 32 -1;
-            }
-            text {
-               text: "01:23";
-               font: "Verdana";
-               size: 43;
-               min: 1 1;
-               align: 0.0 0.0;
+               offset: -1 NOTIFICATION_BAR_HEIGHT;
             }
          }
       }
@@ -325,7 +117,7 @@ group {
             }                                                           \
             rel2 {                                                      \
                relative: 1.0 rely;                                      \
-               offset: -1 (offy + 4);                                   \
+               offset: -1 (offy + SEPARATOR_HEIGHT / 2);                \
                to_y: relto;                                             \
             }                                                           \
          }                                                              \
@@ -341,249 +133,394 @@ group {
             color_class: "bg";                                          \
             rel1 {                                                      \
                relative: 0.0 rely;                                      \
-               offset: 0 (offy + 4);                                    \
+               offset: 0 (offy + SEPARATOR_HEIGHT / 2);                 \
                to_y: relto;                                             \
             }                                                           \
             rel2 {                                                      \
                relative: 1.0 rely;                                      \
-               offset: -1 (offy + 8);                                   \
+               offset: -1 (offy + SEPARATOR_HEIGHT);                    \
                to_y: relto;                                             \
             }                                                           \
          }                                                              \
       }
 
-      part {
-         name: "clipper.held";
-         type: RECT;
-         clip_to: "clipper.keypad-hidden";
-         description {
-            state: "default" 0.0;
-            color: 255 255 255 0;
-            visible: 0;
-         }
-         description {
-            state: "visible" 0.0;
-            inherit: "default" 0.0;
-            color: 255 255 255 255;
-            visible: 1;
-         }
-      }
-
-      part {
-         name: "clipper.held.multiparty";
-         type: RECT;
-         clip_to: "clipper.held";
-         description {
-            state: "default" 0.0;
-            color: 255 255 255 0;
-            visible: 0;
-         }
-         description {
-            state: "multiparty" 0.0;
-            inherit: "default" 0.0;
-            color: 255 255 255 255;
-            visible: 1;
-         }
-      }
-      part {
-         name: "button.held.multiparty";
-         type: IMAGE;
-         mouse_events: 1;
-         clip_to: "clipper.held.multiparty";
-         description {
-            state: "default" 0.0;
-            color: 255 255 255 255;
-            color_class: "action";
-            min: 96 96;
-            max: 96 96;
-            rel1 {
-               to_y: "elm.text.status";
-               relative: 1.0 1.0;
-               offset: -96 57;
-            }
-            rel2 {
-               to_y: "elm.text.status";
-               relative: 1.0 1.0;
-               offset: -1 153;
-            }
-            image.normal: "bt_multiparty_released.png";
-         }
-         description {
-            state: "pressed" 0.0;
-            inherit: "default" 0.0;
-            color: 255 255 255 0;
-            visible: 0;
-         }
-      }
-      part {
-         name: "button.over.held.multiparty";
-         type: IMAGE;
-         clip_to: "clipper.held.multiparty";
-         mouse_events: 0;
-         description {
-            state: "default" 0.0;
-            color: 255 255 255 0;
-            visible: 0;
-            color_class: "action";
-            rel1.to: "button.held.multiparty";
-            rel2.to: "button.held.multiparty";
-            image.normal: "bt_multiparty_pressed.png";
-         }
-         description {
-            state: "pressed" 0.0;
-            inherit: "default" 0.0;
-            color: 255 255 255 255;
-            visible: 1;
-         }
-      }
-      programs {
-         program {
-            signal: "mouse,up,1";
-            source: "button.held.multiparty";
-            action: SIGNAL_EMIT "released,held-multiparty" "call";
-            after: "show_up_held_multiparty";
-            api: "held_multiparty_released" "held multiparty was released";
-         }
-         program {
-            name: "show_up_held_multiparty";
-            action: STATE_SET "default" 0.0;
-            transition: DECELERATE 0.1;
-            target: "button.held.multiparty";
-            target: "button.over.held.multiparty";
-         }
-         program {
-            signal: "mouse,down,1";
-            source: "button.held.multiparty";
-            after: "show_down_held_multiparty";
-            action: SIGNAL_EMIT "pressed,held-multiparty" "call";
-            api: "held_multiparty_pressed" "held multiparty was pressed";
-         }
-         program {
-            name: "show_down_held_multiparty";
-            action: STATE_SET "pressed" 0.0;
-            transition: ACCELERATE 0.1;
-            target: "button.held.multiparty";
-            target: "button.over.held.multiparty";
-         }
-         program {
-            signal: "mouse,clicked,1";
-            source: "button.held.multiparty";
-            action: SIGNAL_EMIT "clicked,held-multiparty" "call";
-            api: "held_multiparty_clicked" "held multiparty was clicked";
-         }
-
-         program {
-            signal: "show,held,multiparty";
-            source: "call";
-            action: STATE_SET "multiparty" 0.0;
-            target: "clipper.held.multiparty";
-            target: "elm.text.held";
-            api: "held_multiparty_show" "make held multiparty visible";
-         }
-         program {
-            signal: "hide,held,multiparty";
-            source: "call";
-            action: STATE_SET "default" 0.0;
-            target: "clipper.held.multiparty";
-            target: "elm.text.held";
-            api: "held_multiparty_hide" "make held multiparty hidden";
-         }
-      }
-
-      part {
-         name: "elm.text.held";
-         type: TEXT;
-         mouse_events: 0;
-         scale: 1;
-         api: "held" "held party call name";
-         clip_to: "clipper.held";
-         description {
-            state: "default" 0.0;
-            color: 255 255 255 255;
-            color_class: "action";
-            align: 0.0 0.5;
-            rel1 {
-               to_y: "elm.text.status";
-               to_x: "elm.text.name";
-               relative: 0.0 1.0;
-               offset: 0 30;
-            }
-            rel2 {
-               to_y: "elm.text.status";
-               relative: 1.0 1.0;
-               offset: -47 199;
-            }
-            text {
-               text: "Someone on hold";
-               font: "Verdana";
-               size: 99;
-               size_range: 16 99;
-               fit: 1 1;
-               align: 0.0 0.5;
-               ellipsis: 0.0;
-            }
-         }
-         description {
-            state: "multiparty" 0.0;
-            inherit: "default" 0.0;
-            rel2.offset: -96 169;
-         }
-      }
-      part {
-         name: "label.held";
-         type: TEXT;
-         mouse_events: 0;
-         scale: 1;
-         clip_to: "clipper.held";
-         description {
-            state: "default" 0.0;
-            color: 255 255 255 255;
-            color_class: "light";
-            fixed: 1 1;
-            align: 0.0 0.0;
-            rel1 {
-               to: "elm.text.held";
-               relative: 0.0 1.0;
-               offset: -1.0 -20;
-            }
-            rel2 {
-               to: "elm.text.held";
-               relative: 0.0 1.0;
-               offset: -1.0 -1;
-            }
-            text {
-               text: "on hold";
-               font: "Verdana";
-               size: 43;
-               min: 1 1;
-               align: 0.0 0.0;
-            }
-         }
+#define CALL(id, offy)                                                  \
+      part {                                                            \
+         name: "call."##id;                                             \
+         type: RECT;                                                    \
+         clip_to: "clipper.multiparty-details-hidden";                  \
+         description {                                                  \
+            state: "default" 0.0;                                       \
+            rel1 {                                                      \
+               to: "notification.bar";                                  \
+               relative: 0.0 1.0;                                       \
+               offset: 0 (-SEPARATOR_HEIGHT + offy);                    \
+            }                                                           \
+            rel2 {                                                      \
+               to: "notification.bar";                                  \
+               relative: 1.0 1.0;                                       \
+               offset: -1 (CALL_HEIGHT + offy);                         \
+            }                                                           \
+         }                                                              \
+         description {                                                  \
+            state: "hidden" 0.0;                                        \
+            inherit: "default" 0.0;                                     \
+            color: 255 255 255 0;                                       \
+            visible: 0;                                                 \
+         }                                                              \
+      }                                                                 \
+                                                                        \
+      SEPARATOR("call."##id, "call."##id, 0.0, 0, "call."##id);         \
+                                                                        \
+      part {                                                            \
+         name: "clipper."##id".multiparty";                             \
+         type: RECT;                                                    \
+         clip_to: "call."##id;                                          \
+         description {                                                  \
+            state: "default" 0.0;                                       \
+            color: 255 255 255 0;                                       \
+            visible: 0;                                                 \
+         }                                                              \
+         description {                                                  \
+            state: "multiparty" 0.0;                                    \
+            inherit: "default" 0.0;                                     \
+            color: 255 255 255 255;                                     \
+            visible: 1;                                                 \
+         }                                                              \
+      }                                                                 \
+      part {                                                            \
+         name: "button."##id".multiparty";                              \
+         type: IMAGE;                                                   \
+         mouse_events: 1;                                               \
+         clip_to: "clipper."##id".multiparty";                          \
+         description {                                                  \
+            state: "default" 0.0;                                       \
+            color: 255 255 255 255;                                     \
+            color_class: "action";                                      \
+            min: LIST_ICON_SIZE LIST_ICON_SIZE;                                \
+            max: LIST_ICON_SIZE LIST_ICON_SIZE;                         \
+            rel1 {                                                      \
+               to: "call."##id;                                         \
+               relative: 1.0 0.0;                                       \
+               offset: (-LIST_ICON_SIZE - BORDER_PADDING) 0;            \
+            }                                                           \
+            rel2 {                                                      \
+               to: "call."##id;                                         \
+               relative: 1.0 1.0;                                       \
+               offset: (-BORDER_PADDING -1) -1;                         \
+            }                                                           \
+            image.normal: "ico_arrow_right.png";                        \
+         }                                                              \
+         description {                                                  \
+            state: "pressed" 0.0;                                       \
+            inherit: "default" 0.0;                                     \
+            color_class: "light";                                       \
+         }                                                              \
+      }                                                                 \
+      programs {                                                        \
+         program {                                                      \
+            signal: "mouse,up,1";                                       \
+            source: "button."##id".multiparty";                         \
+            action: SIGNAL_EMIT "released,"##id",multiparty" "call";    \
+            after: "show_up_"##id"_multiparty";                         \
+            api: ""##id"_multiparty_released"                           \
+               "call #"##id" multiparty was released";                  \
+         }                                                              \
+         program {                                                      \
+            name: "show_up_"##id"_multiparty";                          \
+            action: STATE_SET "default" 0.0;                            \
+            transition: DECELERATE 0.1;                                 \
+            target: "button."##id".multiparty";                         \
+         }                                                              \
+         program {                                                      \
+            signal: "mouse,down,1";                                     \
+            source: "button."##id".multiparty";                         \
+            after: "show_down_"##id"_multiparty";                       \
+            action: SIGNAL_EMIT "pressed,"##id",multiparty" "call";     \
+            api: ""##id"_multiparty_pressed"                            \
+               "call #"##id" multiparty was pressed";                   \
+         }                                                              \
+         program {                                                      \
+            name: "show_down_"##id"_multiparty";                        \
+            action: STATE_SET "pressed" 0.0;                            \
+            transition: ACCELERATE 0.1;                                 \
+            target: "button."##id".multiparty";                         \
+         }                                                              \
+         program {                                                      \
+            signal: "mouse,clicked,1";                                  \
+            source: "button."##id".multiparty";                         \
+            action: SIGNAL_EMIT "clicked,"##id",multiparty" "call";     \
+            api: ""##id"_multiparty_clicked"                            \
+               "call #"##id" multiparty was clicked";                   \
+         }                                                              \
+                                                                        \
+         program {                                                      \
+            signal: "show,"##id",multiparty";                           \
+            source: "call";                                             \
+            action: STATE_SET "multiparty" 0.0;                         \
+            target: "clipper."##id".multiparty";                        \
+            target: "area."##id".name";                                 \
+            api: ""##id"_multiparty_show"                               \
+               "call #"##id" make multiparty visible";                  \
+         }                                                              \
+         program {                                                      \
+            signal: "hide,"##id",multiparty";                           \
+            source: "call";                                             \
+            action: STATE_SET "default" 0.0;                            \
+            target: "clipper."##id".multiparty";                        \
+            target: "area."##id".name";                                 \
+            api: ""##id"_multiparty_hide"                               \
+               "call #"##id" make multiparty hidden";                   \
+         }                                                              \
+      }                                                                 \
+                                                                        \
+      part {                                                           \
+         name: "area."##id".name";                                      \
+         type: RECT;                                                    \
+         mouse_events: 1;                                               \
+         scale: 1;                                                      \
+         clip_to: "call."##id;                                          \
+         description {                                                  \
+            state: "default" 0.0;                                       \
+            color: 0 0 0 0;                                             \
+            rel1 {                                                      \
+               to: "call."##id;                                         \
+               offset: BORDER_PADDING SEPARATOR_HEIGHT;                 \
+            }                                                           \
+            rel2 {                                                      \
+               to: "call."##id;                                         \
+               relative: 1.0 0.0;                                       \
+               offset: (-BORDER_PADDING - 1) (ACTION_HEIGHT - 1);       \
+            }                                                           \
+         }                                                              \
+         description {                                                  \
+            state: "multiparty" 0.0;                                    \
+            inherit: "default" 0.0;                                     \
+            rel2.offset: (-BORDER_PADDING - ITEM_PADDING -LIST_ICON_SIZE - 1) (ACTION_HEIGHT - 1); \
+         }                                                              \
+      }                                                                 \
+      part {                                                            \
+         name: "elm.text."##id".name";                                  \
+         type: TEXT;                                                    \
+         mouse_events: 0;                                               \
+         scale: 1;                                                      \
+         clip_to: "call."##id;                                          \
+         api: ""##id"_name" "remote party call name (call #"##id")";    \
+         description {                                                  \
+            state: "default" 0.0;                                       \
+            color: 255 255 255 255;                                     \
+            color_class: "action";                                      \
+            rel1 {                                                      \
+               to: "elm.swallow.img."##id;                              \
+               relative: 1.0 0.0;                                       \
+               offset: ITEM_PADDING 0;                                  \
+            }                                                           \
+            rel2 {                                                      \
+               to: "area."##id".name";                                  \
+               relative: 1.0 1.0;                                       \
+               offset: -1 -CALL_TEXT_OFFSET;                            \
+            }                                                           \
+            text {                                                      \
+               text: "Gustavo Barbieri";                                \
+               font: FONT_NORMAL;                                       \
+               size: SIZE_MEDIUM;                                       \
+               size_range: SIZE_MEDIUM SIZE_MEDIUM;                     \
+               fit: 1 1;                                                \
+               max: 0 1;                                                \
+               align: 0.0 1.0;                                          \
+               ellipsis: 0.0;                                           \
+            }                                                           \
+         }                                                              \
+         description {                                                  \
+            state: "held" 0.0;                                          \
+            inherit: "default" 0.0;                                     \
+            color_class: "light";                                       \
+         }                                                              \
+      }                                                                 \
+                                                                        \
+      part {                                                            \
+         name: "elm.text."##id".status";                                \
+         type: TEXT;                                                    \
+         mouse_events: 0;                                               \
+         scale: 1;                                                      \
+         clip_to: "call."##id;                                          \
+         api: ""##id"_status" "call status (call #"##id")";             \
+         description {                                                  \
+            state: "default" 0.0;                                       \
+            color: 255 255 255 255;                                     \
+            color_class: "light";                                       \
+            fixed: 1 1;                                                 \
+            align: 0.0 0.0;                                             \
+            rel1 {                                                      \
+               to_x: "elm.swallow.img."##id;                            \
+               to_y: "elm.text."##id".name";                            \
+               relative: 1.0 1.0;                                       \
+               offset: ITEM_PADDING -SEPARATOR_HEIGHT;                  \
+            }                                                           \
+            rel2 {                                                      \
+               to: "elm.swallow.img."##id;                              \
+               relative: 1.0 1.0;                                       \
+               offset: ITEM_PADDING -1;                                 \
+            }                                                           \
+            text {                                                      \
+               text: "calling...";                                      \
+               font: FONT_NORMAL;                                       \
+               size: SIZE_MEDIUM;                                       \
+               min: 1 1;                                                \
+               align: 0.0 0.0;                                          \
+            }                                                           \
+         }                                                              \
+      }                                                                 \
+                                                                        \
+      part {                                                            \
+         name: "elm.text."##id".elapsed";                               \
+         type: TEXT;                                                    \
+         mouse_events: 0;                                               \
+         scale: 1;                                                      \
+         clip_to: "call."##id;                                          \
+         api: "1_elapsed" "call elapsed formatted time (call #"##id")"; \
+         description {                                                  \
+            state: "default" 0.0;                                       \
+            color: 255 255 255 255;                                     \
+            color_class: "light";                                       \
+            fixed: 1 1;                                                 \
+            align: 0.0 0.0;                                             \
+            rel1 {                                                      \
+               to: "elm.text."##id".status";                            \
+               relative: 1.0 0.0;                                       \
+               offset: ITEM_PADDING 0;                                  \
+            }                                                           \
+            rel2 {                                                      \
+               to: "elm.text."##id".status";                            \
+               relative: 1.0 1.0;                                       \
+               offset: ITEM_PADDING -1;                                 \
+            }                                                           \
+            text {                                                      \
+               text: "01:23";                                           \
+               font: FONT_NORMAL;                                       \
+               size: SIZE_MEDIUM;                                       \
+               min: 1 1;                                                \
+               align: 0.0 0.0;                                          \
+            }                                                           \
+         }                                                              \
+      }                                                                 \
+                                                                        \
+      part {                                                            \
+         name: "elm.swallow.border."##id;                               \
+         type: RECT;                                                    \
+         scale: 1;                                                      \
+         mouse_events: 0;                                               \
+         clip_to: "call."##id;                                          \
+         description {                                                  \
+            state: "default" 0.0;                                       \
+            color: 255 255 255 255;                                     \
+            color_class: "action";                                      \
+            rel1 {                                                      \
+               to: "elm.swallow.img."##id;                              \
+               relative: 0.0 0.0;                                       \
+               offset: -1 -1;                                           \
+            }                                                           \
+            rel2 {                                                      \
+               to: "elm.swallow.img."##id;                              \
+               relative: 1.0 1.0;                                       \
+               offset: 0 0;                                             \
+            }                                                           \
+         }                                                              \
+      }                                                                 \
+                                                                        \
+      part {                                                            \
+         name: "elm.swallow.img.bg".#id;                                \
+         type: RECT;                                                    \
+         scale: 1;                                                      \
+         mouse_events: 0;                                               \
+         clip_to: "call."##id;                                          \
+         description {                                                  \
+            state: "default" 0.0;                                       \
+            color: 255 255 255 255;                                     \
+            color_class: "dark";                                        \
+            rel1 {                                                      \
+               to: "elm.swallow.img."##id;                              \
+               relative: 0.0 0.0;                                       \
+               offset: 0 0;                                             \
+            }                                                           \
+            rel2 {                                                      \
+               to: "elm.swallow.img."##id;                              \
+               relative: 1.0 1.0;                                       \
+               offset: -1 -1;                                           \
+            }                                                           \
+         }                                                              \
+      }                                                                 \
+                                                                        \
+      part {                                                            \
+         name: "elm.swallow.img."##id;                                  \
+         type: SWALLOW;                                                 \
+         scale: 1;                                                      \
+         clip_to: "call."##id;                                          \
+         mouse_events: 0;                                               \
+         description {                                                  \
+            state: "default" 0.0;                                       \
+            visible: 1;                                                 \
+            min: CALL_PHOTO_SIZE CALL_PHOTO_SIZE;                       \
+            max: CALL_PHOTO_SIZE CALL_PHOTO_SIZE;                       \
+            rel1 {                                                      \
+               to: "area."##id."name";                                  \
+               relative: 0.0 0.0;                                       \
+               offset: 0 ITEM_PADDING;                                  \
+            }                                                           \
+            rel2 {                                                      \
+               to: "area."##id."name";                                  \
+               relative: 0.0 0.0;                                       \
+               offset: CALL_PHOTO_SIZE (CALL_PHOTO_SIZE + ITEM_PADDING); \
+            }                                                           \
+         }                                                             \
+                                                                       \
+      }                                                                 \
+                                                                       \
+                                                                        \
+      programs {                                                        \
+         program {                                                      \
+            signal: "mouse,clicked,1";                                  \
+            source: "area."##id".name";                                 \
+            action: SIGNAL_EMIT "clicked,swap" "call";                  \
+         }                                                              \
+         program {                                                      \
+            signal: "state,"##id",held";                                \
+            source: "call";                                             \
+            action: STATE_SET "held" 0.0;                               \
+            transition: ACCELERATE 0.1;                                 \
+            target: "elm.text."##id".name";                             \
+         }                                                              \
+         program {                                                      \
+            signal: "state,"##id",active";                              \
+            source: "call";                                             \
+            action: STATE_SET "default" 0.0;                            \
+            transition: ACCELERATE 0.1;                                 \
+            target: "elm.text."##id".name";                             \
+         }                                                              \
+                                                                        \
       }
 
-      SEPARATOR("held1", "clipper.held", 0.0, -8, "elm.text.held");
+      CALL("1", 0);
+      CALL("2", CALL_HEIGHT + SEPARATOR_HEIGHT);
 
       programs {
          program {
-            signal: "show,held";
+            signal: "calls,1";
             source: "call";
-            action: STATE_SET "visible" 0.0;
-            transition: DECELERATE 0.3;
-            target: "clipper.held";
-            api: "held_show" "make held entry visible";
+            action: STATE_SET "hidden" 0.0;
+            transition: ACCELERATE 0.1;
+            target: "call.2";
          }
          program {
-            signal: "hide,held";
+            signal: "calls,2";
             source: "call";
             action: STATE_SET "default" 0.0;
-            transition: ACCELERATE 0.3;
-            target: "clipper.held";
-            api: "held_hide" "make held entry hidden";
+            transition: ACCELERATE 0.1;
+            target: "call.2";
          }
       }
 
-
-      SEPARATOR("actions", "clipper.actions", 0.0, -8, "bg.actions");
+      SEPARATOR("actions", "clipper.actions", 0.0, -SEPARATOR_HEIGHT, "bg.actions");
 
       part {
          name: "bg.actions";
@@ -593,18 +530,18 @@ group {
          description {
             state: "default" 0.0;
             color: 0 0 0 0;
-            min: 720 340;
-            max: 720 99999; /* keep it tight centered */
+            min: WIDTH ACTION_HEIGHT;
+            max: WIDTH 99999; /* keep it tight centered */
             fixed: 1 1;
             rel1 {
                to: "bg.buttons";
                relative: 0.0 0.0;
-               offset: 0 -348;
+               offset: 0 (-ACTION_HEIGHT - SEPARATOR_HEIGHT);
             }
             rel2 {
                to: "bg.buttons";
                relative: 1.0 0.0;
-               offset: -1 -8;
+               offset: -1 -SEPARATOR_HEIGHT;
             }
          }
       }
@@ -627,47 +564,35 @@ group {
       }
       programs {
          program {
-            name: "show,actions";
-            action: STATE_SET "visible" 0.0;
-            transition: DECELERATE 0.3;
-            target: "clipper.actions";
+            name: "enable,actions1";
+            signal: "enable,actions";
+            source: "call";
+            action: ACTION_STOP;
+            target: "disable,actions1";
+            target: "disable,actions2";
+            after: "enable,actions2";
          }
          program {
-            name: "hide,actions";
-            action: STATE_SET "default" 0.0;
-            transition: ACCELERATE 0.3;
+            name: "enable,actions2";
+            action: STATE_SET "visible" 0.0;
+            transition: DECELERATE 0.3;
             target: "clipper.actions";
          }
 
          program {
-            signal: "state,disconnected";
-            source: "call";
-            after: "hide,actions";
-         }
-         program {
-            signal: "state,active";
-            source: "call";
-            after: "show,actions";
-         }
-         program {
-            signal: "state,held";
-            source: "call";
-            after: "show,actions";
-         }
-         program {
-            signal: "state,dialing";
-            source: "call";
-            after: "hide,actions";
-         }
-         program {
-            signal: "state,alerting";
+            name: "disable,actions1";
+            signal: "disable,actions";
             source: "call";
-            after: "hide,actions";
+            action: ACTION_STOP;
+            target: "enable,actions1";
+            target: "enable,actions2";
+            after: "disable,actions2";
          }
          program {
-            signal: "state,incoming";
-            source: "call";
-            after: "hide,actions";
+            name: "disable,actions2";
+            action: STATE_SET "default" 0.0;
+            transition: ACCELERATE 0.3;
+            target: "clipper.actions";
          }
       }
 
@@ -696,15 +621,15 @@ group {
       }                                                                 \
       part {                                                            \
          name: "button."##id;                                           \
-         type: IMAGE;                                                   \
+         type: RECT;                                                    \
          mouse_events: 1;                                               \
          clip_to: "clipper."##id;                                       \
          description {                                                  \
             state: "default" 0.0;                                       \
-            color: 255 255 255 255;                                     \
+            color: 255 255 255 0;                                       \
             color_class: "action";                                      \
-            min: 240 170;                                               \
-            max: 240 170;                                               \
+            min: ACTION_HEIGHT ACTION_HEIGHT;                          \
+            max: ACTION_HEIGHT ACTION_HEIGHT;                          \
             fixed: 1 1;                                                 \
             rel1 {                                                      \
                to: "bg.actions";                                        \
@@ -715,34 +640,33 @@ group {
                relative: r2;                                            \
                offset: -1 -1;                                           \
             }                                                           \
-            image.normal: "bt_"##img"_released.png";                    \
          }                                                              \
          description {                                                  \
             state: "pressed" 0.0;                                       \
             inherit: "default" 0.0;                                     \
-            color: 255 255 255 0;                                       \
-            visible: 0;                                                 \
+            color: 255 255 255 255;                                     \
          }                                                              \
       }                                                                 \
       part {                                                            \
-         name: "button.over."##id;                                      \
+         name: "button.ico."##id;                                       \
          type: IMAGE;                                                   \
-         clip_to: "clipper."##id;                                       \
          mouse_events: 0;                                               \
+         clip_to: "clipper."##id;                                       \
          description {                                                  \
             state: "default" 0.0;                                       \
-            color: 255 255 255 0;                                       \
-            visible: 0;                                                 \
+            color: 255 255 255 255;                                     \
             color_class: "action";                                      \
+            min: ACTION_HEIGHT ACTION_HEIGHT;                           \
+            max: ACTION_HEIGHT ACTION_HEIGHT;                           \
+            fixed: 1 1;                                                 \
             rel1.to: "button."##id;                                     \
             rel2.to: "button."##id;                                     \
-            image.normal: "bt_"##img"_pressed.png";                     \
+            image.normal: "ico_"##img".png";                           \
          }                                                              \
          description {                                                  \
             state: "pressed" 0.0;                                       \
             inherit: "default" 0.0;                                     \
-            color: 255 255 255 255;                                     \
-            visible: 1;                                                 \
+            color_class: "bg";                                          \
          }                                                              \
       }                                                                 \
       part {                                                            \
@@ -776,7 +700,7 @@ group {
             action: STATE_SET "default" 0.0;                            \
             transition: DECELERATE 0.1;                                 \
             target: "button."##id;                                      \
-            target: "button.over."##id;                                 \
+            target: "button.ico."##id;                                  \
          }                                                              \
          program {                                                      \
             signal: "mouse,down,1";                                     \
@@ -790,7 +714,7 @@ group {
             action: STATE_SET "pressed" 0.0;                            \
             transition: ACCELERATE 0.1;                                 \
             target: "button."##id;                                      \
-            target: "button.over."##id;                                 \
+            target: "button.ico."##id;                                  \
          }                                                              \
          program {                                                      \
             signal: "mouse,clicked,1";                                  \
@@ -816,6 +740,127 @@ group {
          }                                                              \
       }
 
+#define ACTION_HIDEABLE(id, img, r1, r2)                                \
+      part {                                                            \
+         name: "clipper."##id;                                          \
+         type: RECT;                                                    \
+         clip_to: "clipper.actions";                                    \
+         description {                                                  \
+            state: "default" 0.0;                                       \
+            color: 255 255 255 255;                                     \
+            rel1.to: "button."##id;                                     \
+            rel2.to: "button."##id;                                     \
+         }                                                              \
+         description {                                                  \
+            state: "hidden" 0.0;                                        \
+            inherit: "default" 0.0;                                     \
+            color: 255 255 255 0;                                       \
+            visible: 0;                                                 \
+         }                                                              \
+      }                                                                 \
+      part {                                                            \
+         name: "button."##id;                                           \
+         type: RECT;                                                    \
+         mouse_events: 1;                                               \
+         clip_to: "clipper."##id;                                       \
+         description {                                                  \
+            state: "default" 0.0;                                       \
+            color: 255 255 255 0;                                       \
+            color_class: "action";                                      \
+            min: ACTION_HEIGHT ACTION_HEIGHT;                           \
+            max: ACTION_HEIGHT ACTION_HEIGHT;                           \
+            fixed: 1 1;                                                 \
+            rel1 {                                                      \
+               to: "bg.actions";                                        \
+               relative: r1;                                            \
+            }                                                           \
+            rel2 {                                                      \
+               to: "bg.actions";                                        \
+               relative: r2;                                            \
+               offset: -1 -1;                                           \
+            }                                                           \
+         }                                                              \
+         description {                                                  \
+            state: "pressed" 0.0;                                       \
+            inherit: "default" 0.0;                                     \
+            color: 255 255 255 255;                                     \
+         }                                                              \
+      }                                                                 \
+      part {                                                            \
+         name: "button.ico."##id;                                       \
+         type: IMAGE;                                                   \
+         mouse_events: 0;                                               \
+         clip_to: "clipper."##id;                                       \
+         description {                                                  \
+            state: "default" 0.0;                                       \
+            color: 255 255 255 255;                                     \
+            color_class: "action";                                      \
+            min: ACTION_HEIGHT ACTION_HEIGHT;                           \
+            max: ACTION_HEIGHT ACTION_HEIGHT;                           \
+            fixed: 1 1;                                                 \
+            rel1.to: "button."##id;                                     \
+            rel2.to: "button."##id;                                     \
+            image.normal: "ico_"##img".png";                           \
+         }                                                              \
+         description {                                                  \
+            state: "pressed" 0.0;                                       \
+            inherit: "default" 0.0;                                     \
+            color_class: "bg";                                          \
+         }                                                              \
+      }                                                                 \
+      programs {                                                        \
+         program {                                                      \
+            signal: "mouse,up,1";                                       \
+            source: "button."##id;                                      \
+            action: SIGNAL_EMIT "released,"##id "call";                 \
+            after: "show_up_"##id;                                      \
+            api: id"_released" id" was released";                       \
+         }                                                              \
+         program {                                                      \
+            name: "show_up_"##id;                                       \
+            action: STATE_SET "default" 0.0;                            \
+            transition: DECELERATE 0.1;                                 \
+            target: "button."##id;                                      \
+            target: "button.ico."##id;                                  \
+         }                                                              \
+         program {                                                      \
+            signal: "mouse,down,1";                                     \
+            source: "button."##id;                                      \
+            after: "show_down_"##id;                                    \
+            action: SIGNAL_EMIT "pressed,"##id "call";                  \
+            api: id"_pressed" id" was pressed";                         \
+         }                                                              \
+         program {                                                      \
+            name: "show_down_"##id;                                     \
+            action: STATE_SET "pressed" 0.0;                            \
+            transition: ACCELERATE 0.1;                                 \
+            target: "button."##id;                                      \
+            target: "button.ico."##id;                                  \
+         }                                                              \
+         program {                                                      \
+            signal: "mouse,clicked,1";                                  \
+            source: "button."##id;                                      \
+            action: SIGNAL_EMIT "clicked,"##id "call";                  \
+            api: id"_clicked" id" was clicked";                         \
+         }                                                              \
+         program {                                                      \
+            name: "hide_"##id;                                          \
+            signal: "hide,"##id;                                        \
+            source: "call";                                             \
+            action: STATE_SET "hidden" 0.0;                             \
+            target: "clipper."##id;                                     \
+            api: id"_hide" "hide "##id;                                 \
+         }                                                              \
+         program {                                                      \
+            name: "show_"##id;                                          \
+            signal: "show,"##id;                                        \
+            source: "call";                                             \
+            action: STATE_SET "default" 0.0;                            \
+            target: "clipper."##id;                                     \
+            api: id"_show" "show "##id;                                 \
+         }                                                              \
+      }
+
 #define ACTION_TOGGLE(id, img, r1, r2)                                  \
       part {                                                            \
          name: "clipper."##id;                                          \
@@ -841,15 +886,15 @@ group {
       }                                                                 \
       part {                                                            \
          name: "button."##id;                                           \
-         type: IMAGE;                                                   \
+         type: RECT;                                                    \
          mouse_events: 1;                                               \
          clip_to: "clipper.toggle."##id;                                \
          description {                                                  \
             state: "default" 0.0;                                       \
-            color: 255 255 255 255;                                     \
+            color: 255 255 255 0;                                       \
             color_class: "action";                                      \
-            min: 240 170;                                               \
-            max: 240 170;                                               \
+            min: ACTION_HEIGHT ACTION_HEIGHT;                           \
+            max: ACTION_HEIGHT ACTION_HEIGHT;                           \
             fixed: 1 1;                                                 \
             rel1 {                                                      \
                to: "bg.actions";                                        \
@@ -860,33 +905,33 @@ group {
                relative: r2;                                            \
                offset: -1 -1;                                           \
             }                                                           \
-            image.normal: "bt_"##img"_released.png";                    \
          }                                                              \
          description {                                                  \
             state: "pressed" 0.0;                                       \
             inherit: "default" 0.0;                                     \
-            color: 255 255 255 0;                                       \
-            visible: 0;                                                 \
+            color: 255 255 255 255;                                     \
          }                                                              \
       }                                                                 \
       part {                                                            \
-         name: "button.over."##id;                                      \
+         name: "button.ico."##id;                                       \
          type: IMAGE;                                                   \
-         clip_to: "clipper."##id;                                       \
+         mouse_events: 0;                                               \
+         clip_to: "clipper.toggle."##id;                                \
          description {                                                  \
             state: "default" 0.0;                                       \
-            color: 255 255 255 0;                                       \
-            visible: 0;                                                 \
+            color: 255 255 255 255;                                     \
             color_class: "action";                                      \
+            min: ACTION_HEIGHT ACTION_HEIGHT;                           \
+            max: ACTION_HEIGHT ACTION_HEIGHT;                           \
+            fixed: 1 1;                                                 \
             rel1.to: "button."##id;                                     \
             rel2.to: "button."##id;                                     \
-            image.normal: "bt_"##img"_pressed.png";                     \
+            image.normal: "ico_"##img".png";                           \
          }                                                              \
          description {                                                  \
             state: "pressed" 0.0;                                       \
             inherit: "default" 0.0;                                     \
-            color: 255 255 255 255;                                     \
-            visible: 1;                                                 \
+            color_class: "bg";                                          \
          }                                                              \
       }                                                                 \
       part {                                                            \
@@ -908,17 +953,25 @@ group {
       }                                                                 \
       part {                                                            \
          name: "button.toggle."##id;                                    \
-         type: IMAGE;                                                   \
-         clip_to: "clipper."##id;                                       \
+         type: RECT;                                                    \
          mouse_events: 1;                                               \
          description {                                                  \
             state: "default" 0.0;                                       \
             color: 255 255 255 0;                                       \
-            visible: 0;                                                 \
             color_class: "action";                                      \
-            rel1.to: "button."##id;                                     \
-            rel2.to: "button."##id;                                     \
-            image.normal: "bt_"##img"_pressed.png";                     \
+            min: ACTION_HEIGHT ACTION_HEIGHT;                           \
+            max: ACTION_HEIGHT ACTION_HEIGHT;                           \
+            fixed: 1 1;                                                 \
+            visible: 0;                                                 \
+            rel1 {                                                      \
+               to: "bg.actions";                                        \
+               relative: r1;                                            \
+            }                                                           \
+            rel2 {                                                      \
+               to: "bg.actions";                                        \
+               relative: r2;                                            \
+               offset: -1 -1;                                           \
+            }                                                           \
          }                                                              \
          description {                                                  \
             state: "on" 0.0;                                            \
@@ -928,6 +981,29 @@ group {
          }                                                              \
       }                                                                 \
       part {                                                            \
+         name: "button.toggle.ico."##id;                                \
+         type: IMAGE;                                                   \
+         mouse_events: 0;                                               \
+         description {                                                  \
+            state: "default" 0.0;                                       \
+            color: 255 255 255 255;                                     \
+            color_class: "action";                                      \
+            min: ACTION_HEIGHT ACTION_HEIGHT;                           \
+            max: ACTION_HEIGHT ACTION_HEIGHT;                           \
+            fixed: 1 1;                                                 \
+            visible: 0;                                                 \
+            rel1.to: "button.toggle."##id;                              \
+            rel2.to: "button.toggle."##id;                              \
+            image.normal: "ico_"##img".png";                           \
+         }                                                              \
+         description {                                                  \
+            state: "on" 0.0;                                            \
+            inherit: "default" 0.0;                                     \
+            color_class: "bg";                                          \
+            visible: 1;                                                 \
+         }                                                              \
+      }                                                                 \
+      part {                                                            \
          name: "blocker."##id;                                          \
          type: RECT;                                                    \
          mouse_events: 1;                                               \
@@ -958,7 +1034,7 @@ group {
             action: STATE_SET "default" 0.0;                            \
             transition: DECELERATE 0.1;                                 \
             target: "button."##id;                                      \
-            target: "button.over."##id;                                 \
+            target: "button.ico."##id;                                  \
          }                                                              \
          program {                                                      \
             signal: "mouse,down,1";                                     \
@@ -972,7 +1048,7 @@ group {
             action: STATE_SET "pressed" 0.0;                            \
             transition: ACCELERATE 0.1;                                 \
             target: "button."##id;                                      \
-            target: "button.over."##id;                                 \
+            target: "button.ico."##id;                                  \
          }                                                              \
          program {                                                      \
             signal: "mouse,clicked,1";                                  \
@@ -1008,6 +1084,7 @@ group {
             action: STATE_SET "on" 0.0;                                 \
             target: "clipper.toggle."##id;                              \
             target: "button.toggle."##id;                               \
+            target: "button.toggle.ico."##id;                           \
             api: id"_toggle_on" "toggle on "##id;                       \
          }                                                              \
          program {                                                      \
@@ -1016,22 +1093,38 @@ group {
             action: STATE_SET "default" 0.0;                            \
             target: "clipper.toggle."##id;                              \
             target: "button.toggle."##id;                               \
+            target: "button.toggle.ico."##id;                           \
             api: id"_toggle_off" "toggle off "##id;                     \
          }                                                              \
       }
 
-      ACTION_TOGGLE("mute",    "mute",    0.000000000 0.0, 0.333333333 0.5);
-      ACTION_BUTTON("keypad",  "keypad",  0.333333333 0.0, 0.666666666 0.5);
-      ACTION_TOGGLE("speaker", "speaker", 0.666666666 0.0, 1.000000000 0.5);
+      ACTION_TOGGLE("mute",    "mute",    0.00 0.0, 0.25 1.0);
+      ACTION_TOGGLE("speaker", "speaker", 0.25 0.0, 0.50 1.0);
+      ACTION_BUTTON("keypad",  "keypad",  0.50 0.0, 0.75 1.0);
+
+      ACTION_HIDEABLE("merge",    "merge",  0.75 0.0, 1.0 1.0);
+      ACTION_HIDEABLE("add-call", "add_call", 0.75 0.0, 1.0 1.0);
 
-      ACTION_BUTTON("merge",    "merge",  0.000000000 0.5, 0.333333333 1.0);
-      ACTION_BUTTON("swap",     "swap",   0.333333333 0.5, 0.666666666 1.0);
-      ACTION_BUTTON("contacts", "contacts",0.666666666 0.5, 1.000000000 1.0);
 #undef ACTION_BUTTON
 #undef ACTION_TOGGLE
 
-      SEPARATOR("answer", "clipper.answer", 0.0, -8, "button.answer");
-      SEPARATOR("hangup", "clipper.multiparty-details-hidden", 0.0, -8, "button.hangup");
+      SEPARATOR("answer", "clipper.answer", 0.0, -SEPARATOR_HEIGHT, "button.answer");
+      SEPARATOR("hangup", "clipper.multiparty-details-hidden", 0.0, -SEPARATOR_HEIGHT, "button.hangup");
+
+      programs {
+         program {
+            signal: "enable,merge";
+            source: "call";
+            after: "hide_add-call";
+            after: "show_merge";
+         }
+         program {
+            signal: "disable,merge";
+            source: "call";
+            after: "show_add-call";
+            after: "hide_merge";
+         }
+      }
 
       part {
          name: "clipper.keypad-hidden";
@@ -1057,6 +1150,7 @@ group {
             state: "default" 0.0;
             color: 255 255 255 0;
             visible: 0;
+            rel2.offset: -1 (-ACTION_HEIGHT - SEPARATOR_HEIGHT);
          }
          description {
             state: "alternate" 0.0;
@@ -1068,8 +1162,8 @@ group {
 
 
       /* keypad */
-      SEPARATOR("hide-keypad", "clipper.keypad-visible", 0.0, -8, "button.hide-keypad");
-      SEPARATOR("keypad", "clipper.keypad-visible", 0.0, -8, "bg.keypad");
+      SEPARATOR("hide-keypad", "clipper.keypad-visible", 0.0, -SEPARATOR_HEIGHT, "button.hide-keypad");
+      SEPARATOR("keypad", "clipper.keypad-visible", 0.0, -SEPARATOR_HEIGHT, "bg.keypad");
 
       part {
          name: "bg.keypad";
@@ -1079,16 +1173,16 @@ group {
          description {
             state: "default" 0.0;
             color: 0 0 0 0;
-            min: 720 680;
-            max: 720 680; /* keep it tight centered */
+            min: WIDTH (HEIGHT - 2 * CALL_HEIGHT - 2 * ACTION_HEIGHT - 4 * SEPARATOR_HEIGHT);
+            max: WIDTH (HEIGHT - 2 * CALL_HEIGHT - 2 * ACTION_HEIGHT - 4 * SEPARATOR_HEIGHT); /* keep it tight centered */
             rel1 {
                relative: 0.0 0.0;
-               offset: 0 -688; /* separator */
+               offset: 0 (-HEIGHT + 2 * CALL_HEIGHT + 2 * ACTION_HEIGHT + 3 * SEPARATOR_HEIGHT);
                to_y: "button.hide-keypad";
             }
             rel2 {
                relative: 1.0 0.0;
-               offset: 0 -9; /* separator */
+               offset: 0 (-SEPARATOR_HEIGHT - 1);
                to_y: "button.hide-keypad";
             }
          }
@@ -1135,8 +1229,8 @@ group {
             }                                                           \
             text {                                                      \
                text: label;                                             \
-               font: "Verdana";                                         \
-               size: 99;                                                \
+               font: FONT_NORMAL;                                       \
+               size: SIZE_MEDIUM;                                       \
                align: 0.5 0.5;                                          \
             }                                                           \
          }                                                              \
@@ -1163,8 +1257,8 @@ group {
             rel2.to: "button."##id;                                     \
             text {                                                      \
                text: sub;                                               \
-               font: "Verdana:style=Bold";                              \
-               size: 16;                                                \
+               font: FONT_BOLD;                                         \
+               size: SIZE_TINY;                                         \
                align: 0.5 0.5;                                          \
             }                                                           \
          }                                                              \
@@ -1242,12 +1336,12 @@ group {
             rel1 {
                to_y: "button.hangup";
                relative: 0.0 -1.0;
-               offset: 0 688;
+               offset: 0 (HEIGHT - 2 * CALL_HEIGHT - 2 * ACTION_HEIGHT - 4 * SEPARATOR_HEIGHT);
             }
             rel2 {
                to_y: "button.hangup";
                relative: 1.0 0.0;
-               offset: -1 687;
+               offset: -1 (HEIGHT - 2 * CALL_HEIGHT - 2 * ACTION_HEIGHT - 4 * SEPARATOR_HEIGHT - 1);
             }
          }
          description {
@@ -1257,12 +1351,12 @@ group {
             rel1 {
                to_y: "button.hangup";
                relative: 0.0 -1.0;
-               offset: 0 -8; /* separator */
+               offset: 0 -SEPARATOR_HEIGHT;
             }
             rel2 {
                to_y: "button.hangup";
                relative: 1.0 0.0;
-               offset: -1 -9; /* separator */
+               offset: -1 (-SEPARATOR_HEIGHT - 1);
             }
          }
       }
@@ -1297,8 +1391,8 @@ group {
             rel2.to: "button.hide-keypad";
             text {
                text: "Hide Keypad";
-               font: "Verdana";
-               size: 99;
+               font: FONT_NORMAL;
+               size: SIZE_MEDIUM;
                align: 0.5 0.5;
             }
          }
@@ -1310,6 +1404,21 @@ group {
       }
       programs {
          program {
+            signal: "active,disconnected";
+            source: "call";
+            after: "hide_keypad";
+         }
+         program {
+            name: "hide_keypad";
+            signal: "clicked,hangup";
+            source: "call";
+            action: STATE_SET "default" 0.0;
+            target: "clipper.keypad-visible";
+            target: "clipper.keypad-hidden";
+            target: "area.hide-keypad";
+         }
+
+         program {
             signal: "mouse,up,1";
             source: "button.hide-keypad";
             action: STATE_SET "default" 0.0;
@@ -1411,12 +1520,12 @@ group {
             rel1 {
                to_y: "button.hangup";
                relative: 0.0 -1.0;
-               offset: 0 -8; /* separator */
+               offset: 0 -SEPARATOR_HEIGHT;
             }
             rel2 {
                to_y: "button.hangup";
                relative: 1.0 0.0;
-               offset: -1 -9; /* separator */
+               offset: -1 (-SEPARATOR_HEIGHT - 1);
             }
          }
       }
@@ -1451,8 +1560,8 @@ group {
             rel2.to: "button.answer";
             text {
                text: "Answer";
-               font: "Verdana";
-               size: 99;
+               font: FONT_NORMAL;
+               size: SIZE_MEDIUM;
                align: 0.5 0.5;
             }
          }
@@ -1523,11 +1632,11 @@ group {
          clip_to: "clipper.multiparty-details-hidden";
          description {
             state: "default" 0.0;
-            color: 255 255 255 255;
-            color_class: "bg";
+            color: 255 255 255 0;
+            color_class: "caution";
             rel1 {
                relative: 0.0 1.0;
-               offset: 0 -170;
+               offset: 0 -ACTION_HEIGHT;
             }
             rel2 {
                relative: 1 1.0;
@@ -1537,7 +1646,7 @@ group {
          description {
             state: "pressed" 0.0;
             inherit: "default" 0.0;
-            color_class: "caution";
+            color: 255 255 255 255;
          }
       }
       part {
@@ -1553,8 +1662,8 @@ group {
             rel2.to: "button.hangup";
             text {
                text: "Hangup";
-               font: "Verdana";
-               size: 99;
+               font: FONT_NORMAL;
+               size: SIZE_MEDIUM;
                align: 0.5 0.5;
             }
          }
@@ -1605,6 +1714,7 @@ group {
       part {
          name: "clipper.multiparty-details-hidden";
          type: RECT;
+         clip_to: "clipper.waiting-hidden";
          description {
             state: "default" 0.0;
             color: 255 255 255 255;
@@ -1644,23 +1754,23 @@ group {
             color: 255 255 255 255;
             color_class: "action";
             align: 0.0 0.5;
-            rel1.offset: 46 0;
+            rel1.offset: BORDER_PADDING 0;
             rel2 {
                relative: 1.0 0.0;
-               offset: -47 210;
+               offset: (-BORDER_PADDING - 1) ACTION_HEIGHT;
             }
             text {
                text: "Conference";
-               font: "Verdana";
-               size: 99;
-               size_range: 16 99;
+               font: FONT_NORMAL;
+               size: SIZE_MEDIUM;
+               size_range: SIZE_TINY SIZE_MEDIUM;
                fit: 1 1;
                align: 0.5 0.5;
                ellipsis: 0.0;
             }
          }
       }
-      SEPARATOR("multiparty-details", "clipper.multiparty-details-visible", 0.0, -8, "elm.swallow.multiparty-details");
+      SEPARATOR("multiparty-details", "clipper.multiparty-details-visible", 0.0, -SEPARATOR_HEIGHT, "elm.swallow.multiparty-details");
 
       part {
          name: "elm.swallow.multiparty-details";
@@ -1673,11 +1783,11 @@ group {
             visible: 0;
             rel1 {
                relative: 0.0 1.0;
-               offset: 0 218;
+               offset: 0 (ACTION_HEIGHT + SEPARATOR_HEIGHT);
             }
             rel2 {
                relative: 1.0 2.0;
-               offset: -1 -178;
+               offset: -1 (-ACTION_HEIGHT - SEPARATOR_HEIGHT);
             }
          }
          description {
@@ -1686,16 +1796,16 @@ group {
             visible: 1;
             rel1 {
                relative: 0.0 0.0;
-               offset: 0 218;
+               offset: 0 (ACTION_HEIGHT + SEPARATOR_HEIGHT);
             }
             rel2 {
                relative: 1.0 1.0;
-               offset: -1 -178;
+               offset: -1 (-ACTION_HEIGHT - SEPARATOR_HEIGHT);
             }
          }
       }
 
-      SEPARATOR("multiparty-details-back", "clipper.multiparty-details-visible", 0.0, -8, "button.multiparty-details-back");
+      SEPARATOR("multiparty-details-back", "clipper.multiparty-details-visible", 0.0, -SEPARATOR_HEIGHT, "button.multiparty-details-back");
       part {
          name: "button.multiparty-details-back";
          type: RECT;
@@ -1707,7 +1817,7 @@ group {
             color_class: "bg";
             rel1 {
                relative: 0.0 1.0;
-               offset: 0 -170;
+               offset: 0 -ACTION_HEIGHT;
             }
             rel2 {
                relative: 1 1.0;
@@ -1733,8 +1843,8 @@ group {
             rel2.to: "button.multiparty-details-back";
             text {
                text: "Back";
-               font: "Verdana";
-               size: 99;
+               font: FONT_NORMAL;
+               size: SIZE_MEDIUM;
                align: 0.5 0.5;
             }
          }
@@ -1792,9 +1902,15 @@ group {
             target: "clipper.multiparty-details-hidden";
          }
 
+        program {
+            signal: "clicked,2,multiparty";
+            source: "call";
+            after: "show-multiparty-details-phase1";
+         }
+
          program {
             name: "show-multiparty-details-phase1";
-            signal: "clicked,multiparty"; /* just show on user request */
+            signal: "clicked,1,multiparty"; /* just show on user request */
             source: "call";
             action: STATE_SET "alternate" 0.0;
             transition: ACCELERATE 0.3;
@@ -1845,61 +1961,58 @@ group {
       part {
          name: "area.waiting";
          type: RECT;
-         mouse_events: 0;
-         clip_to: "clipper.waiting-visible";
+         mouse_events: 1; /* block events going to the call screen below it */
          description {
             state: "default" 0.0;
-            color: 255 255 255 255;
-            color_class: "bg";
+            color: 0 0 0 0;
             visible: 0;
-            fixed: 1 1;
-            min: 0 712;
-            max: 99999 712;
-            align: 0.5 1.0;
-            rel1 {
-               relative: 0.0 -1.0;
-               offset: 0 0;
-            }
-            rel2 {
-               relative: 1.0 1.0;
-               offset: -1 712;
-            }
+            rel1.relative: 0.0 1.0;
+            rel2.relative: 1.0 2.0;
          }
          description {
             state: "alternate" 0.0;
             inherit: "default" 0.0;
             visible: 1;
-            rel1 {
-               relative: 0.0 -1.0;
-               offset: 0 -712;
-            }
-            rel2 {
-               relative: 1.0 1.0;
-               offset: -1 -1;
-            }
+            rel1.relative: 0.0 0.0;
+            rel2.relative: 1.0 1.0;
          }
       }
 
-#define BUTTON(id, label, colcls, y1, y2)                               \
-      SEPARATOR(id, "clipper.waiting-visible", 0.0, -8, "button."##id); \
+#define BUTTON(id, label, colcls, prev)                                 \
+      SEPARATOR(id, "clipper."##id, 0.0, -SEPARATOR_HEIGHT, "button."##id); \
+      part {                                                            \
+         name: "clipper."##id;                                          \
+         type: RECT;                                                    \
+         clip_to: "clipper.waiting-visible";                            \
+         description {                                                  \
+            state: "default" 0.0;                                       \
+            color: 255 255 255 255;                                     \
+         }                                                              \
+         description {                                                  \
+            state: "hidden" 0.0;                                        \
+            inherit: "default" 0.0;                                     \
+            color: 255 255 255 0;                                       \
+            visible: 0;                                                 \
+         }                                                              \
+      }                                                                 \
       part {                                                            \
          name: "button."##id;                                           \
          type: RECT;                                                    \
          mouse_events: 1;                                               \
-         clip_to: "clipper.waiting-visible";                            \
+         clip_to: "clipper."##id;                                       \
          description {                                                  \
             state: "default" 0.0;                                       \
             color: 255 255 255 0;                                       \
             color_class: colcls;                                        \
             rel1 {                                                      \
-               to: "area.waiting";                                      \
+               to: prev;                                                \
                relative: 0.0 0.0;                                       \
-               offset: 0 y1;                                            \
+               offset: 0 -ACTION_HEIGHT;                                \
             }                                                           \
             rel2 {                                                      \
-               to: "area.waiting";                                      \
+               to: prev;                                                \
                relative: 1.0 0.0;                                       \
-               offset: -1 y2;                                           \
+               offset: -1 -1;                                           \
             }                                                           \
          }                                                              \
          description {                                                  \
@@ -1907,28 +2020,42 @@ group {
             inherit: "default" 0.0;                                     \
             color: 255 255 255 255;                                     \
          }                                                              \
+         description {                                                  \
+            state: "hidden" 0.0;                                        \
+            inherit: "default" 0.0;                                     \
+            rel1 {                                                      \
+               to: prev;                                                \
+               relative: 0.0 0.0;                                       \
+               offset: 0 SEPARATOR_HEIGHT;                              \
+            }                                                           \
+            rel2 {                                                      \
+               to: prev;                                                \
+               relative: 1.0 0.0;                                       \
+               offset: -1 (ACTION_HEIGHT + SEPARATOR_HEIGHT - 1);       \
+            }                                                           \
+         }                                                              \
       }                                                                 \
       part {                                                            \
          name: "label."##id;                                            \
          type: TEXT;                                                    \
          mouse_events: 0;                                               \
-         clip_to: "clipper.waiting-visible";                            \
+         clip_to: "clipper."##id;                                       \
          description {                                                  \
             state: "default" 0.0;                                       \
             color: 255 255 255 255;                                     \
             color_class: colcls;                                        \
             rel1 {                                                      \
                to: "button."##id;                                       \
-               offset: 46 0;                                            \
+               offset: BORDER_PADDING 0;                                \
             }                                                           \
             rel2 {                                                      \
                to: "button."##id;                                       \
-               offset: -47 -1;                                          \
+               offset: (-BORDER_PADDING - 1) -1;                        \
             }                                                           \
             text {                                                      \
                text: label;                                             \
-               font: "Verdana";                                         \
-               size: 58;                                                \
+               font: FONT_NORMAL;                                       \
+               size: SIZE_LARGE;                                        \
                align: 0.5 0.5;                                          \
             }                                                           \
          }                                                              \
@@ -1975,11 +2102,12 @@ group {
          }                                                              \
       }
 
-      BUTTON("waiting-hangup", "Decline", "action", 186, 355);
-      BUTTON("hold-answer", "Hold + Answer", "action", 364, 533);
-      BUTTON("hangup-answer", "Hangup + Answer", "caution", 542, 711);
+      BUTTON("waiting-hangup", "Decline", "action", "separator.dark.hold-answer");
+      BUTTON("hold-answer", "Hold + Answer", "action", "separator.dark.hangup-answer");
+      BUTTON("hangup-answer", "Hangup + Answer", "caution", "separator.dark.waiting-last");
 #undef BUTTON
 
+      SEPARATOR("waiting-last", "clipper.waiting-visible", 1.0, 0, "");
       SEPARATOR("waiting", "clipper.waiting-visible", 0.0, 0, "area.waiting");
       part {
          name: "elm.text.waiting";
@@ -1991,21 +2119,22 @@ group {
          description {
             state: "default" 0.0;
             color: 255 255 255 255;
-            color_class: "disabled";
+            color_class: "action";
             rel1 {
-               to: "area.waiting";
-               offset: 46 8;
+               to: "elm.swallow.waiting.photo";
+               relative: 1.0 0.0;
+               offset: ITEM_PADDING 0;
             }
             rel2 {
-               to: "area.waiting";
-               relative: 1.0 0.0;
-               offset: -47.0 177;
+               to: "notification.bar";
+               relative: 1.0 1.0;
+               offset: -BORDER_PADDING ACTION_HEIGHT;
             }
             text {
                text: "Someone";
-               font: "Verdana";
-               size: 99;
-               size_range: 16 99;
+               font: FONT_NORMAL;
+               size: SIZE_MEDIUM;
+               size_range: SIZE_TINY SIZE_MEDIUM;
                fit: 1 1;
                align: 0.0 0.5;
                ellipsis: 0.0;
@@ -2013,6 +2142,107 @@ group {
          }
       }
 
+      part {
+         name: "waiting.img.border";
+         type: RECT;
+         scale: 1;
+         mouse_events: 0;
+         clip_to: "clipper.waiting-visible";
+         description {
+            state: "default" 0.0;
+            color: 255 255 255 255;
+            color_class: "action";
+            rel1 {
+               to: "elm.swallow.waiting.photo";
+               relative: 0.0 0.0;
+               offset: -1 -1;
+            }
+            rel2 {
+               to: "elm.swallow.waiting.photo";
+               relative: 1.0 1.0;
+               offset: 0 0;
+            }
+         }
+      }
+
+      part {
+         name: "waiting.img.bg";
+         type: RECT;
+         scale: 1;
+         mouse_events: 0;
+         clip_to: "clipper.waiting-visible";
+         description {
+            state: "default" 0.0;
+            color: 255 255 255 255;
+            color_class: "dark";
+            rel1 {
+               to: "elm.swallow.waiting.photo";
+               relative: 0.0 0.0;
+               offset: 0 0;
+            }
+            rel2 {
+               to: "elm.swallow.waiting.photo";
+               relative: 1.0 1.0;
+               offset: -1 -1;
+            }
+         }
+      }
+
+      part {
+         name: "elm.swallow.waiting.photo";
+         type: SWALLOW;
+         scale: 1;
+         clip_to: "clipper.waiting-visible";
+         mouse_events: 0;
+         description {
+            state: "default" 0.0;
+            min: CALL_PHOTO_SIZE CALL_PHOTO_SIZE;
+            max: CALL_PHOTO_SIZE CALL_PHOTO_SIZE;
+            rel1 {
+               to: "notification.bar";
+               relative: 0.0 1.0;
+               offset: BORDER_PADDING ITEM_PADDING;
+            }
+            rel2 {
+               to: "notification.bar";
+               relative: 0.0 1.0;
+               offset: (CALL_PHOTO_SIZE + BORDER_PADDING) (CALL_PHOTO_SIZE + ITEM_PADDING);
+            }
+         }
+      }
+
+      part {
+         name: "label.waiting";
+         type: TEXT;
+         mouse_events: 0;
+         scale: 1;
+         clip_to: "clipper.waiting-visible";
+         description {
+            state: "default" 0.0;
+            color: 255 255 255 255;
+            color_class: "light";
+            fixed: 1 1;
+            align: 0.0 0.0;
+            rel1 {
+               to: "elm.text.waiting";
+               relative: 0.0 1.0;
+               offset: 0 -20;
+            }
+            rel2 {
+               to: "elm.text.waiting";
+               relative: 0.0 1.0;
+               offset: 0 -1;
+            }
+            text {
+               text: "Waiting...";
+               font: FONT_NORMAL;
+               size: SIZE_MEDIUM;
+               min: 1 1;
+               align: 0.0 0.0;
+            }
+         }
+      }
+
       programs {
          program {
             name: "hide-waiting-phase1";
@@ -2021,7 +2251,6 @@ group {
             action: STATE_SET "default" 0.0;
             transition: ACCELERATE 0.3;
             target: "clipper.waiting-visible";
-            target: "area.waiting";
             after: "hide-waiting-phase2";
             api: "waiting_hide" "make waiting popup hidden";
          }
@@ -2029,6 +2258,13 @@ group {
             name: "hide-waiting-phase2";
             action: STATE_SET "default" 0.0;
             transition: ACCELERATE 0.3;
+            target: "area.waiting";
+            after: "hide-waiting-phase3";
+         }
+         program {
+            name: "hide-waiting-phase3";
+            action: STATE_SET "default" 0.0;
+            transition: ACCELERATE 0.3;
             target: "clipper.waiting-hidden";
          }
 
@@ -2047,11 +2283,158 @@ group {
             action: STATE_SET "alternate" 0.0;
             transition: ACCELERATE 0.3;
             target: "area.waiting";
+            after: "show-waiting-phase3";
+         }
+         program {
+            name: "show-waiting-phase3";
+            action: STATE_SET "alternate" 0.0;
+            transition: ACCELERATE 0.3;
             target: "clipper.waiting-visible";
          }
+
+         program {
+            signal: "enable,merge";
+            source: "call";
+            action: STATE_SET "hidden" 0.0;
+            target: "button.hold-answer";
+            target: "clipper.hold-answer";
+         }
+         program {
+            signal: "disable,merge";
+            source: "call";
+            action: STATE_SET "default" 0.0;
+            target: "button.hold-answer";
+            target: "clipper.hold-answer";
+         }
       }
 
 #undef SEPARATOR
    }
 
 }
+
+group {
+   name: "elm/layout/ofono-efl/activecall";
+
+   /*
+    * Represents the active call in the other screens (not callscreen)
+    *
+    * Parts:
+    *   TEXT: elm.text.name
+    *   TEXT: elm.text.phone.type
+    *   TEXT: elm.text.status
+    *   TEXT: elm.text.elapsed
+    * Signals:
+    *   Emit (source is "call"):
+    *     clicked:
+    * Listen (source is "call"):
+    *     show,multiparty: active call is multiparty
+    *     hide,multiparty: active call is not multiparty
+    *     state,<STATE>:   state changed to <STATE>
+    *
+    * Where <STATE> is: disconnected, active, held, dialing, alerting,
+    * incoming, waiting.
+    */
+
+   parts {
+      part {
+         name: "bg";
+         type: RECT;
+         mouse_events: 1;
+         description {
+            state: "default" 0.0;
+            color: 255 255 255 255;
+            color_class: "action";
+            max: 99999 (ACTION_HEIGHT / 2);
+            min: 0 (ACTION_HEIGHT / 2);
+            align: 0.5 0.0;
+         }
+      }
+
+      programs {
+         program {
+            signal: "mouse,clicked,1";
+            source: "bg";
+            action: SIGNAL_EMIT "clicked" "call";
+         }
+      }
+
+      part {
+         name: "elm.text.name";
+         type: TEXT;
+         mouse_events: 0;
+         description {
+            state: "default" 0.0;
+            color: 255 255 255 255;
+            color_class: "dark";
+            rel1 {
+               offset: BORDER_PADDING 0;
+            }
+            rel2 {
+               to_y: "bg";
+               to_x: "elm.text.elapsed";
+               relative: 0.0 1.0;
+               offset: (-ITEM_PADDING - 1) -1;
+            }
+            text {
+               text: "Gustavo Barbieri";
+               font: FONT_NORMAL;
+               size: SIZE_MEDIUM;
+               align: 0.0 0.5;
+               ellipsis: 0.0;
+            }
+         }
+      }
+
+      part {
+         name: "elm.text.elapsed";
+         type: TEXT;
+         mouse_events: 0;
+         description {
+            state: "default" 0.0;
+            color: 255 255 255 255;
+            color_class: "dark";
+            align: 1.0 0.5;
+            fixed: 1 1;
+            rel1 {
+               relative: 1.0 0.0;
+               offset: (-BORDER_PADDING - 1) 0;
+            }
+            rel2 {
+               to: "bg";
+               offset: (-BORDER_PADDING - 1) -1;
+            }
+            text {
+               text: "12:34";
+               font: FONT_NORMAL;
+               size: SIZE_MEDIUM;
+               min: 1 0;
+               align: 1.0 0.5;
+            }
+         }
+      }
+   }
+}
+
+group {
+
+   name: "elm/icon/multiparty/default";
+
+   images{
+      image: "ico_multiparty.png" COMP;
+   }
+
+   parts {
+      part {
+         name : "base";
+         scale: 1;
+         description {
+            state: "default" 0.0;
+            aspect: 1.0 1.0;
+            color_class: "action";
+            aspect_preference: BOTH;
+            image.normal: "ico_multiparty.png";
+         }
+      }
+   }
+}