TH - efl.ui panes

2 files changed, 226 insertions, 241 deletions

diff --git a/data/elementary/themes/edc/efl/panes.edc b/data/elementary/themes/edc/efl/panes.edc
index 186c1491aa..e9834af6f6 100644
--- a/data/elementary/themes/edc/efl/panes.edc
+++ b/data/elementary/themes/edc/efl/panes.edc
@@ -9,12 +9,13 @@
       efl,action,unpress: Used for "unpress" smart callback.
 */
 
-#define PANEMIN  10
-#define PANEMIN2 16
-#define PANEWID  32
+#define PANEMIN  8
+#define PANEMIN2 24
+#define PANEWID  24
 
-group { name: "efl/panes/vertical"; data.item: "version" "123";
-   images.image: "holes_vert.png" COMP;
+group { name: "efl/panes/vertical";
+   data.item: "version" "123";
+   images.image: "pane_handle_v.png" COMP;
    parts {
       //TODO: remove left/right
       alias: "first" "efl.left";
@@ -55,31 +56,27 @@ group { name: "efl/panes/vertical"; data.item: "version" "123";
       part { name: "whole_left"; type: RECT;
          description { state: "default" 0.0;
             rel2.to_x: "efl.bar";
-            rel2.relative: 1.0 1.0;
-            rel2.offset: -4 -1;
+            rel2.relative: 0.0 1.0;
          }
       }
       part { name: "whole_right"; type: RECT;
          description { state: "default" 0.0;
             rel1.to_x: "efl.bar";
-            rel1.relative: 0.0 0.0;
-            rel1.offset: 3 0;
+            rel1.relative: 1.0 0.0;
          }
       }
       part { name: "efl.left"; type: SWALLOW;
          clip_to: "whole_left";
          description { state: "default" 0.0;
             rel2.to_x: "efl.bar";
-            rel2.relative: 1.0 1.0;
-            rel2.offset: -4 -1;
+            rel2.relative: 0.0 1.0;
          }
       }
       part { name: "efl.right"; type: SWALLOW;
          clip_to: "whole_right";
          description { state: "default" 0.0;
             rel1.to_x: "efl.bar";
-            rel1.relative: 0.0 0.0;
-            rel1.offset: 3 0;
+            rel1.relative: 1.0 0.0;
          }
       }
       part { name: "efl.bar"; type: SPACER;
@@ -88,8 +85,8 @@ group { name: "efl/panes/vertical"; data.item: "version" "123";
             y: 0 0 0;
          }
          description { state: "default" 0.0;
-            max: 0 99999;
-            min: 0 14;
+            max: 8 99999;
+            min: 8 24;
             fixed: 1 1;
             rel1.relative: 0.0 0.5;
             rel2.relative: 1.0 0.5;
@@ -97,10 +94,11 @@ group { name: "efl/panes/vertical"; data.item: "version" "123";
       }
       part { name: "dots"; mouse_events: 0;
          description { state: "default" 0.0;
-            image.normal: "holes_vert.png";
-            rel1.to: "efl.bar";
-            rel2.to: "efl.bar";
-            FIXED_SIZE(4, 14)
+            FIXED_SIZE(8, 24)
+            image.normal: "pane_handle_v.png";
+            fill.smooth: 0;
+            rel.to: "efl.bar";
+            color: 160 160 160 255;
          }
       }
       part { name: "efl.event"; type: SWALLOW;
@@ -108,8 +106,7 @@ group { name: "efl/panes/vertical"; data.item: "version" "123";
             visible: 0;
             min: PANEMIN PANEMIN2;
             fixed: 1 1;
-            rel1.to: "efl.bar";
-            rel2.to: "efl.bar";
+            rel.to: "efl.bar";
          }
       }
       part { name: "bar"; type: RECT;
@@ -130,12 +127,12 @@ group { name: "efl/panes/vertical"; data.item: "version" "123";
    }
    programs {
       EFL_UI_CLICKABLE_PART_BIND("bar")
-      program { // for elm_panes_fixed_set()
+      program { // for efl_panes_fixed_set()
          signal: "efl,panes,fixed"; source: "efl";
          action: STATE_SET "disabled" 0.0;
          target: "bar";
       }
-      program { // for elm_panes_fixed_set()
+      program { // for efl_panes_fixed_set()
          signal: "efl,panes,unfixed"; source: "efl";
          action: STATE_SET "default" 0.0;
          target: "bar";
@@ -143,8 +140,9 @@ group { name: "efl/panes/vertical"; data.item: "version" "123";
    }
 }
 
-group { name: "efl/panes/horizontal"; data.item: "version" "123";
-   images.image: "holes_horiz.png" COMP;
+group { name: "efl/panes/horizontal";
+   data.item: "version" "123";
+   images.image: "pane_handle_h.png" COMP;
    parts {
       //TODO: remove left/right
       alias: "first" "efl.left";
@@ -185,31 +183,27 @@ group { name: "efl/panes/horizontal"; data.item: "version" "123";
       part { name: "whole_left"; type: RECT;
          description { state: "default" 0.0;
             rel2.to_y: "efl.bar";
-            rel2.relative: 1.0 1.0;
-            rel2.offset: -1 -4;
+            rel2.relative: 1.0 0.0;
          }
       }
       part { name: "whole_right"; type: RECT;
          description { state: "default" 0.0;
             rel1.to_y: "efl.bar";
-            rel1.relative: 0.0 0.0;
-            rel1.offset: 0 3;
+            rel1.relative: 0.0 1.0;
          }
       }
       part { name: "efl.left"; type: SWALLOW;
          clip_to: "whole_left";
          description { state: "default" 0.0;
             rel2.to_y: "efl.bar";
-            rel2.relative: 1.0 1.0;
-            rel2.offset: -1 -4;
+            rel2.relative: 1.0 0.0;
          }
       }
       part { name: "efl.right"; type: SWALLOW;
          clip_to: "whole_right";
          description { state: "default" 0.0;
             rel1.to_y: "efl.bar";
-            rel1.relative: 0.0 0.0;
-            rel1.offset: 0 3;
+            rel1.relative: 0.0 1.0;
          }
       }
       part { name: "efl.bar"; type: SPACER;
@@ -218,8 +212,8 @@ group { name: "efl/panes/horizontal"; data.item: "version" "123";
             y: 1 1 1;
          }
          description { state: "default" 0.0;
-            max: 99999 0;
-            min: 14 0;
+            max: 99999 8;
+            min: 24 8;
             fixed: 1 1;
             rel1.relative: 0.5 0.0;
             rel2.relative: 0.5 1.0;
@@ -227,10 +221,11 @@ group { name: "efl/panes/horizontal"; data.item: "version" "123";
       }
       part { name: "dots"; mouse_events: 0;
          description { state: "default" 0.0;
-            image.normal: "holes_horiz.png";
-            rel1.to: "efl.bar";
-            rel2.to: "efl.bar";
-            FIXED_SIZE(14, 4)
+            FIXED_SIZE(24, 8)
+            image.normal: "pane_handle_h.png";
+            fill.smooth: 0;
+            rel.to: "efl.bar";
+            color: 160 160 160 255;
          }
       }
       part { name: "efl.event"; type: SWALLOW;
@@ -238,8 +233,7 @@ group { name: "efl/panes/horizontal"; data.item: "version" "123";
             visible: 0;
             min: PANEMIN2 PANEMIN;
             fixed: 1 1;
-            rel1.to: "efl.bar";
-            rel2.to: "efl.bar";
+            rel.to: "efl.bar";
          }
       }
       part { name: "bar"; type: RECT;
@@ -260,12 +254,12 @@ group { name: "efl/panes/horizontal"; data.item: "version" "123";
    }
    programs {
       EFL_UI_CLICKABLE_PART_BIND("bar")
-      program { // for elm_panes_fixed_set()
+      program { // for efl_panes_fixed_set()
          signal: "efl,panes,fixed"; source: "efl";
          action: STATE_SET "disabled" 0.0;
          target: "bar";
       }
-      program { // for elm_panes_fixed_set()
+      program { // for efl_panes_fixed_set()
          signal: "efl,panes,unfixed"; source: "efl";
          action: STATE_SET "default" 0.0;
          target: "bar";
@@ -273,9 +267,11 @@ group { name: "efl/panes/horizontal"; data.item: "version" "123";
    }
 }
 
-group { name: "efl/panes/vertical:flush"; data.item: "version" "123";
-   images.image: "downlight_glow_left.png" COMP;
-   images.image: "downlight_glow_right.png" COMP;
+////////////////////////////////////////////////////////////////////////////
+
+group { name: "efl/panes/vertical:flush";
+   data.item: "version" "123";
+   images.image: "shadow_circle_vert.png" COMP;
    parts {
       part { name: "whole"; type: SPACER;
          description { state: "default" 0.0;
@@ -353,8 +349,7 @@ group { name: "efl/panes/vertical:flush"; data.item: "version" "123";
             visible: 0;
             min: PANEMIN PANEMIN2;
             fixed: 1 1;
-            rel1.to: "efl.bar";
-            rel2.to: "efl.bar";
+            rel.to: "efl.bar";
          }
       }
       part { name: "bar"; type: RECT;
@@ -375,64 +370,81 @@ group { name: "efl/panes/vertical:flush"; data.item: "version" "123";
          }
       }
       part { name: "glow1a"; mouse_events: 0;
+         clip_to: "whole_right";
+         scale: 1;
          description { state: "default" 0.0;
-            image.normal: "downlight_glow_left.png";
-            image.border: 0 3 0 0;
-            max: 32 99999;
+            image.normal: "shadow_circle_vert.png";
+            rel1.to_x: "efl.bar";
             rel2.to_x: "efl.bar";
             color: 255 255 255 0;
-            align: 1.0 0.5;
+            offscale;
+            visible: 0;
          }
          description { state: "active" 0.0;
-           inherit: "default" 0.0;
-           color: 255 255 255 255;
+            inherit: "default" 0.0;
+            color: 255 255 255 128;
+            rel1.offset: -16 0;
+            rel2.offset: 15 -1;
+            visible: 1;
          }
       }
-      part { name: "glow1b"; mouse_events: 0;
+      part { name: "glow2a"; mouse_events: 0;
+         clip_to: "whole_left";
+         scale: 1;
          description { state: "default" 0.0;
-            image.normal: "downlight_glow_right.png";
-            max: 4 99999;
+            image.normal: "shadow_circle_vert.png";
             rel1.to_x: "efl.bar";
+            rel2.to_x: "efl.bar";
             color: 255 255 255 0;
-            align: 0.0 0.5;
+            offscale;
+            visible: 0;
          }
          description { state: "active" 0.0;
-           inherit: "default" 0.0;
-           color: 255 255 255 255;
+            inherit: "default" 0.0;
+            color: 255 255 255 128;
+            rel1.offset: -16 0;
+            rel2.offset: 15 -1;
+            visible: 1;
          }
       }
-      part { name: "glow2a"; mouse_events: 0;
+      part { name: "glowbar1a"; type: RECT; mouse_events: 0;
+         clip_to: "whole_left";
+         scale: 1;
          description { state: "default" 0.0;
-            image.normal: "downlight_glow_left.png";
-            max: 4 99999;
+            rel1.to_x: "efl.bar";
             rel2.to_x: "efl.bar";
-            color: 255 255 255 0;
-            align: 1.0 0.5;
+            color: 51 153 255 255;
+            offscale;
+            visible: 0;
          }
          description { state: "active" 0.0;
-           inherit: "default" 0.0;
-           color: 255 255 255 255;
+            inherit: "default" 0.0;
+            rel1.offset: -5 0;
+            rel2.offset: 4 -1;
+            visible: 1;
          }
       }
-      part { name: "glow2b"; mouse_events: 0;
+      part { name: "glowbar2a"; type: RECT; mouse_events: 0;
+         clip_to: "whole_right";
+         scale: 1;
          description { state: "default" 0.0;
-            image.normal: "downlight_glow_right.png";
-            image.border: 3 0 0 0;
-            max: 32 99999;
             rel1.to_x: "efl.bar";
-            color: 255 255 255 0;
-            align: 0.0 0.5;
+            rel2.to_x: "efl.bar";
+            color: 51 153 255 255;
+            offscale;
+            visible: 0;
          }
          description { state: "active" 0.0;
-           inherit: "default" 0.0;
-           color: 255 255 255 255;
+            inherit: "default" 0.0;
+            rel1.offset: -5 0;
+            rel2.offset: 4 -1;
+            visible: 1;
          }
       }
       part { name: "bar1"; type: RECT; repeat_events: 1;
          description { state: "default" 0.0;
             fixed: 1 1;
-            rel1.to: "bar";
-            rel2.to: "bar";
+            rel.to: "bar";
             rel2.relative: 0.5 1.0;
             color: 0 0 0 0;
          }
@@ -440,21 +452,25 @@ group { name: "efl/panes/vertical:flush"; data.item: "version" "123";
       part { name: "bar2"; type: RECT; repeat_events: 1;
          description { state: "default" 0.0;
             fixed: 1 1;
-            rel1.to: "bar";
+            rel.to: "bar";
             rel1.relative: 0.5 0.0;
-            rel2.to: "bar";
             color: 0 0 0 0;
          }
       }
    }
    programs {
-      EFL_UI_CLICKABLE_PART_BIND("bar")
-      program { // for elm_panes_fixed_set()
+      program {signal: "mouse,down,1"; source: "bar"; // for "press" smart callback
+         action: SIGNAL_EMIT "efl,action,press" "efl";
+      }
+      program { signal: "mouse,up,1"; source: "bar"; // for "unpress" smart callback
+         action: SIGNAL_EMIT "efl,action,unpress" "efl";
+      }
+      program { // for efl_panes_fixed_set()
          signal: "efl,panes,fixed"; source: "efl";
          action: STATE_SET "disabled" 0.0;
          target: "bar";
       }
-      program { // for elm_panes_fixed_set()
+      program { // for efl_panes_fixed_set()
          signal: "efl,panes,unfixed"; source: "efl";
          action: STATE_SET "default" 0.0;
          target: "bar";
@@ -462,37 +478,37 @@ group { name: "efl/panes/vertical:flush"; data.item: "version" "123";
       program {
          signal: "mouse,in"; source: "bar1";
          action: STATE_SET "active" 0.0;
-         transition: BOUNCE 0.4 0.5 4;
+         transition: DECELERATE 0.2;
          target: "glow1a";
-         target: "glow1b";
+         target: "glowbar1a";
       }
       program {
          signal: "mouse,out"; source: "bar1";
          action: STATE_SET "default" 0.0;
          transition: DECELERATE 0.5;
          target: "glow1a";
-         target: "glow1b";
+         target: "glowbar1a";
       }
       program {
          signal: "mouse,in"; source: "bar2";
          action: STATE_SET "active" 0.0;
-         transition: BOUNCE 0.4 0.5 4;
+         transition: DECELERATE 0.2;
          target: "glow2a";
-         target: "glow2b";
+         target: "glowbar2a";
       }
       program {
          signal: "mouse,out"; source: "bar2";
          action: STATE_SET "default" 0.0;
          transition: DECELERATE 0.5;
          target: "glow2a";
-         target: "glow2b";
+         target: "glowbar2a";
       }
    }
 }
 
-group { name: "efl/panes/horizontal:flush"; data.item: "version" "123";
-   images.image: "downlight_glow.png" COMP;
-   images.image: "downlight_glow_up.png" COMP;
+group { name: "efl/panes/horizontal:flush";
+   data.item: "version" "123";
+   images.image: "shadow_circle_horiz.png" COMP;
    parts {
       part { name: "whole"; type: SPACER;
          description { state: "default" 0.0;
@@ -570,8 +586,7 @@ group { name: "efl/panes/horizontal:flush"; data.item: "version" "123";
             visible: 0;
             min: PANEMIN2 PANEMIN;
             fixed: 1 1;
-            rel1.to: "efl.bar";
-            rel2.to: "efl.bar";
+            rel.to: "efl.bar";
          }
       }
       part { name: "bar"; type: RECT;
@@ -592,64 +607,81 @@ group { name: "efl/panes/horizontal:flush"; data.item: "version" "123";
          }
       }
       part { name: "glow1a"; mouse_events: 0;
+         clip_to: "whole_right";
+         scale: 1;
          description { state: "default" 0.0;
-            image.normal: "downlight_glow_up.png";
-            image.border: 0 0 0 3;
-            max: 99999 32;
+            image.normal: "shadow_circle_horiz.png";
+            rel1.to_y: "efl.bar";
             rel2.to_y: "efl.bar";
             color: 255 255 255 0;
-            align: 0.5 1.0;
+            offscale;
+            visible: 0;
          }
          description { state: "active" 0.0;
-           inherit: "default" 0.0;
-           color: 255 255 255 255;
+            inherit: "default" 0.0;
+            color: 255 255 255 128;
+            rel1.offset: 0 -16;
+            rel2.offset: -1 15;
+            visible: 1;
          }
       }
-      part { name: "glow1b"; mouse_events: 0;
+      part { name: "glow2a"; mouse_events: 0;
+         clip_to: "whole_left";
+         scale: 1;
          description { state: "default" 0.0;
-            image.normal: "downlight_glow.png";
-            max: 99999 4;
+            image.normal: "shadow_circle_horiz.png";
             rel1.to_y: "efl.bar";
+            rel2.to_y: "efl.bar";
             color: 255 255 255 0;
-            align: 0.5 0.0;
+            offscale;
+            visible: 0;
          }
          description { state: "active" 0.0;
-           inherit: "default" 0.0;
-           color: 255 255 255 255;
+            inherit: "default" 0.0;
+            color: 255 255 255 128;
+            rel1.offset: 0 -16;
+            rel2.offset: -1 15;
+            visible: 1;
          }
       }
-      part { name: "glow2a"; mouse_events: 0;
+      part { name: "glowbar1a"; type: RECT; mouse_events: 0;
+         clip_to: "whole_left";
+         scale: 1;
          description { state: "default" 0.0;
-            image.normal: "downlight_glow_up.png";
-            max: 99999 4;
+            rel1.to_y: "efl.bar";
             rel2.to_y: "efl.bar";
-            color: 255 255 255 0;
-            align: 0.5 1.0;
+            color: 51 153 255 255;
+            offscale;
+            visible: 0;
          }
          description { state: "active" 0.0;
-           inherit: "default" 0.0;
-           color: 255 255 255 255;
+            inherit: "default" 0.0;
+            rel1.offset: 0 -5;
+            rel2.offset: -1 4;
+            visible: 1;
          }
       }
-      part { name: "glow2b"; mouse_events: 0;
+      part { name: "glowbar2a"; type: RECT; mouse_events: 0;
+         clip_to: "whole_right";
+         scale: 1;
          description { state: "default" 0.0;
-            image.normal: "downlight_glow.png";
-            image.border: 0 0 3 0;
-            max: 99999 32;
             rel1.to_y: "efl.bar";
-            color: 255 255 255 0;
-            align: 0.5 0.0;
+            rel2.to_y: "efl.bar";
+            color: 51 153 255 255;
+            offscale;
+            visible: 0;
          }
          description { state: "active" 0.0;
-           inherit: "default" 0.0;
-           color: 255 255 255 255;
+            inherit: "default" 0.0;
+            rel1.offset: 0 -5;
+            rel2.offset: -1 4;
+            visible: 1;
          }
       }
       part { name: "bar1"; type: RECT; repeat_events: 1;
          description { state: "default" 0.0;
             fixed: 1 1;
-            rel1.to: "bar";
-            rel2.to: "bar";
+            rel.to: "bar";
             rel2.relative: 1.0 0.5;
             color: 0 0 0 0;
          }
@@ -657,87 +689,85 @@ group { name: "efl/panes/horizontal:flush"; data.item: "version" "123";
       part { name: "bar2"; type: RECT; repeat_events: 1;
          description { state: "default" 0.0;
             fixed: 1 1;
-            rel1.to: "bar";
+            rel.to: "bar";
             rel1.relative: 0.0 0.5;
-            rel2.to: "bar";
             color: 0 0 0 0;
          }
       }
    }
    programs {
+      program {signal: "mouse,down,1"; source: "bar"; // for "press" smart callback
+         action: SIGNAL_EMIT "efl,action,press" "efl";
+      }
+      program { signal: "mouse,up,1"; source: "bar"; // for "unpress" smart callback
+         action: SIGNAL_EMIT "efl,action,unpress" "efl";
+      }
+      program { // for efl_panes_fixed_set()
+         signal: "efl,panes,fixed"; source: "efl";
+         action: STATE_SET "disabled" 0.0;
+         target: "bar";
+      }
+      program { // for efl_panes_fixed_set()
+         signal: "efl,panes,unfixed"; source: "efl";
+         action: STATE_SET "default" 0.0;
+         target: "bar";
+      }
       program {
          signal: "mouse,in"; source: "bar1";
          action: STATE_SET "active" 0.0;
-         transition: BOUNCE 0.4 0.5 4;
+         transition: DECELERATE 0.2;
          target: "glow1a";
-         target: "glow1b";
+         target: "glowbar1a";
       }
       program {
          signal: "mouse,out"; source: "bar1";
          action: STATE_SET "default" 0.0;
          transition: DECELERATE 0.5;
          target: "glow1a";
-         target: "glow1b";
+         target: "glowbar1a";
       }
       program {
          signal: "mouse,in"; source: "bar2";
          action: STATE_SET "active" 0.0;
-         transition: BOUNCE 0.4 0.5 4;
+         transition: DECELERATE 0.2;
          target: "glow2a";
-         target: "glow2b";
+         target: "glowbar2a";
       }
       program {
          signal: "mouse,out"; source: "bar2";
          action: STATE_SET "default" 0.0;
          transition: DECELERATE 0.5;
          target: "glow2a";
-         target: "glow2b";
-      }
-      EFL_UI_CLICKABLE_PART_BIND("bar")
-      program { // for elm_panes_fixed_set()
-         signal: "efl,panes,fixed"; source: "efl";
-         action: STATE_SET "disabled" 0.0;
-         target: "bar";
-      }
-      program { // for elm_panes_fixed_set()
-         signal: "efl,panes,unfixed"; source: "efl";
-         action: STATE_SET "default" 0.0;
-         target: "bar";
+         target: "glowbar2a";
       }
    }
 }
 
 group { name: "efl/panes/vertical:left-fold";
-   inherit: "efl/panes/vertical";
    data.item: "version" "123";
-   images.image: "icon_arrow_left.png" COMP;
-   images.image: "icon_arrow_right.png" COMP;
+   inherit: "efl/panes/vertical";
    script {
       public open;
       public drag_x;
       public drag_y;
    }
    parts {
-      spacer { "sub_whole";
-         desc { "default";
-            rel1.offset: 3 0;
-         }
-      }
       image { "dots";
+         scale;
          desc { "default";
-            image.normal: "icon_arrow_left.png";
-            FIXED_SIZE(14, 14)
+            image.normal: "i-arrow-l";
+            FIXED_SIZE(15, 15)
+            fill.smooth: 1;
          }
          desc { "closed";
             inherit: "default" 0.0;
-            image.normal: "icon_arrow_right.png";
+            image.normal: "i-arrow-r";
          }
       }
       rect { "event";
          repeat;
          desc { "default";
-            rel1.to: "dots";
-            rel2.to: "dots";
+            rel.to: "dots";
             color: 0 0 0 0;
          }
       }
@@ -750,8 +780,7 @@ group { name: "efl/panes/vertical:left-fold";
       }
       program { signal: "mouse,clicked,1"; source: "event";
          script {
-            if (get_int(open) == 1)
-            {
+            if (get_int(open) == 1) {
                new Float: dx;
                new Float: dy;
                set_int(open, 0);
@@ -759,9 +788,7 @@ group { name: "efl/panes/vertical:left-fold";
                set_float(drag_x, dx);
                set_drag(PART:"efl.bar", 0.0, 0.5);
                set_state(PART:"dots", "closed", 0.0);
-            }
-            else if (get_int(open) == 0)
-            {
+            } else if (get_int(open) == 0) {
                set_int(open, 1);
                set_drag(PART:"efl.bar", get_float(drag_x), 0.5);
                set_state(PART:"dots", "default", 0.0);
@@ -772,36 +799,29 @@ group { name: "efl/panes/vertical:left-fold";
 }
 
 group { name: "efl/panes/vertical:right-fold";
-   inherit: "efl/panes/vertical";
    data.item: "version" "123";
-   images.image: "icon_arrow_left.png" COMP;
-   images.image: "icon_arrow_right.png" COMP;
+   inherit: "efl/panes/vertical";
    script {
       public open;
       public drag_x;
       public drag_y;
    }
    parts {
-      spacer { "sub_whole";
-         desc { "default";
-            rel2.offset: -4 0;
-         }
-      }
       image { "dots";
          desc { "default";
-            image.normal: "icon_arrow_right.png";
-            FIXED_SIZE(14, 17)
+            image.normal: "i-arrow-r";
+            FIXED_SIZE(15, 15)
+            fill.smooth: 1;
          }
          desc { "closed";
             inherit: "default" 0.0;
-            image.normal: "icon_arrow_left.png";
+            image.normal: "i-arrow-l";
          }
       }
       rect { "event";
          repeat;
          desc { "default";
-            rel1.to: "dots";
-            rel2.to: "dots";
+            rel.to: "dots";
             color: 0 0 0 0;
          }
       }
@@ -814,8 +834,7 @@ group { name: "efl/panes/vertical:right-fold";
       }
       program { signal: "mouse,clicked,1"; source: "event";
          script {
-            if (get_int(open) == 1)
-            {
+            if (get_int(open) == 1) {
                new Float: dx;
                new Float: dy;
                set_int(open, 0);
@@ -823,9 +842,7 @@ group { name: "efl/panes/vertical:right-fold";
                set_float(drag_x, dx);
                set_drag(PART:"efl.bar", 1.0, 0.5);
                set_state(PART:"dots", "closed", 0.0);
-            }
-            else if (get_int(open) == 0)
-            {
+            } else if (get_int(open) == 0) {
                set_int(open, 1);
                set_drag(PART:"efl.bar", get_float(drag_x), 0.5);
                set_state(PART:"dots", "default", 0.0);
@@ -836,36 +853,29 @@ group { name: "efl/panes/vertical:right-fold";
 }
 
 group { name: "efl/panes/horizontal:up-fold";
-   inherit: "efl/panes/horizontal";
    data.item: "version" "123";
-   images.image: "icon_arrow_up.png" COMP;
-   images.image: "icon_arrow_down.png" COMP;
+   inherit: "efl/panes/horizontal";
    script {
       public open;
       public drag_x;
       public drag_y;
    }
    parts {
-      spacer { "sub_whole";
-         desc { "default";
-            rel1.offset: 0 3;
-         }
-      }
       image { "dots";
          desc { "default";
-            image.normal: "icon_arrow_up.png";
-            FIXED_SIZE(17, 14)
+            image.normal: "i-arrow-u";
+            FIXED_SIZE(15, 15)
+            fill.smooth: 1;
          }
          desc { "closed";
             inherit: "default" 0.0;
-            image.normal: "icon_arrow_down.png";
+            image.normal: "i-arrow-d";
          }
       }
       rect { "event";
          repeat;
          desc { "default";
-            rel1.to: "dots";
-            rel2.to: "dots";
+            rel.to: "dots";
             color: 0 0 0 0;
          }
       }
@@ -878,8 +888,7 @@ group { name: "efl/panes/horizontal:up-fold";
       }
       program { signal: "mouse,clicked,1"; source: "event";
          script {
-            if (get_int(open) == 1)
-            {
+            if (get_int(open) == 1) {
                new Float: dx;
                new Float: dy;
                set_int(open, 0);
@@ -887,9 +896,7 @@ group { name: "efl/panes/horizontal:up-fold";
                set_float(drag_y, dy);
                set_drag(PART:"efl.bar", 0.5, 0.0);
                set_state(PART:"dots", "closed", 0.0);
-            }
-            else if (get_int(open) == 0)
-            {
+            } else if (get_int(open) == 0) {
                set_int(open, 1);
                set_drag(PART:"efl.bar", 0.5, get_float(drag_y));
                set_state(PART:"dots", "default", 0.0);
@@ -900,36 +907,29 @@ group { name: "efl/panes/horizontal:up-fold";
 }
 
 group { name: "efl/panes/horizontal:down-fold";
-   inherit: "efl/panes/horizontal";
    data.item: "version" "123";
-   images.image: "icon_arrow_up.png" COMP;
-   images.image: "icon_arrow_down.png" COMP;
+   inherit: "efl/panes/horizontal";
    script {
       public open;
       public drag_x;
       public drag_y;
    }
    parts {
-      spacer { "sub_whole";
-         desc { "default";
-            rel2.offset: 0 -4;
-         }
-      }
       image { "dots";
          desc { "default";
-            image.normal: "icon_arrow_down.png";
-            FIXED_SIZE(17, 14)
+            image.normal: "i-arrow-d";
+            FIXED_SIZE(15, 15)
+            fill.smooth: 1;
          }
          desc { "closed";
             inherit: "default" 0.0;
-            image.normal: "icon_arrow_up.png";
+            image.normal: "i-arrow-u";
          }
       }
       rect { "event";
          repeat;
          desc { "default";
-            rel1.to: "dots";
-            rel2.to: "dots";
+            rel.to: "dots";
             color: 0 0 0 0;
          }
       }
@@ -942,8 +942,7 @@ group { name: "efl/panes/horizontal:down-fold";
       }
       program { signal: "mouse,clicked,1"; source: "event";
          script {
-            if (get_int(open) == 1)
-            {
+            if (get_int(open) == 1) {
                new Float: dx;
                new Float: dy;
                set_int(open, 0);
@@ -951,9 +950,7 @@ group { name: "efl/panes/horizontal:down-fold";
                set_float(drag_y, dy);
                set_drag(PART:"efl.bar", 0.5, 1.0);
                set_state(PART:"dots", "closed", 0.0);
-            }
-            else if (get_int(open) == 0)
-            {
+            } else if (get_int(open) == 0) {
                set_int(open, 1);
                set_drag(PART:"efl.bar", 0.5, get_float(drag_y));
                set_state(PART:"dots", "default", 0.0);
diff --git a/data/elementary/themes/edc/elm/panes.edc b/data/elementary/themes/edc/elm/panes.edc
index 23a41c9f1f..bdd1d87e59 100644
--- a/data/elementary/themes/edc/elm/panes.edc
+++ b/data/elementary/themes/edc/elm/panes.edc
@@ -358,8 +358,7 @@ group { name: "elm/panes/vertical/flush";
             visible: 0;
             min: PANEMIN PANEMIN2;
             fixed: 1 1;
-            rel1.to: "elm.bar";
-            rel2.to: "elm.bar";
+            rel.to: "elm.bar";
          }
       }
       part { name: "bar"; type: RECT;
@@ -601,8 +600,7 @@ group { name: "elm/panes/horizontal/flush";
             visible: 0;
             min: PANEMIN2 PANEMIN;
             fixed: 1 1;
-            rel1.to: "elm.bar";
-            rel2.to: "elm.bar";
+            rel.to: "elm.bar";
          }
       }
       part { name: "bar"; type: RECT;
@@ -767,8 +765,6 @@ group { name: "elm/panes/horizontal/flush";
 
 group { name: "elm/panes/vertical/left-fold";
    inherit: "elm/panes/vertical/default";
-   images.image: "big_arrow_left.png" COMP;
-   images.image: "big_arrow_right.png" COMP;
    script {
       public open;
       public drag_x;
@@ -777,13 +773,13 @@ group { name: "elm/panes/vertical/left-fold";
    parts {
       image { "dots";
          desc { "default";
-            image.normal: "big_arrow_left.png";
-            FIXED_SIZE(14, 17)
+            image.normal: "i-arrow-l";
+            FIXED_SIZE(15, 15)
             fill.smooth: 1;
          }
          desc { "closed";
             inherit: "default" 0.0;
-            image.normal: "big_arrow_right.png";
+            image.normal: "i-arrow-r";
          }
       }
       rect { "event";
@@ -822,8 +818,6 @@ group { name: "elm/panes/vertical/left-fold";
 
 group { name: "elm/panes/vertical/right-fold";
    inherit: "elm/panes/vertical/default";
-   images.image: "big_arrow_left.png" COMP;
-   images.image: "big_arrow_right.png" COMP;
    script {
       public open;
       public drag_x;
@@ -832,13 +826,13 @@ group { name: "elm/panes/vertical/right-fold";
    parts {
       image { "dots";
          desc { "default";
-            image.normal: "big_arrow_right.png";
-            FIXED_SIZE(14, 17)
+            image.normal: "i-arrow-r";
+            FIXED_SIZE(15, 15)
             fill.smooth: 1;
          }
          desc { "closed";
             inherit: "default" 0.0;
-            image.normal: "big_arrow_left.png";
+            image.normal: "i-arrow-l";
          }
       }
       rect { "event";
@@ -877,8 +871,6 @@ group { name: "elm/panes/vertical/right-fold";
 
 group { name: "elm/panes/horizontal/up-fold";
    inherit: "elm/panes/horizontal/default";
-   images.image: "big_arrow_up.png" COMP;
-   images.image: "big_arrow_down.png" COMP;
    script {
       public open;
       public drag_x;
@@ -887,20 +879,19 @@ group { name: "elm/panes/horizontal/up-fold";
    parts {
       image { "dots";
          desc { "default";
-            image.normal: "big_arrow_up.png";
-            FIXED_SIZE(17, 14)
+            image.normal: "i-arrow-u";
+            FIXED_SIZE(15, 15)
             fill.smooth: 1;
          }
          desc { "closed";
             inherit: "default" 0.0;
-            image.normal: "big_arrow_down.png";
+            image.normal: "i-arrow-d";
          }
       }
       rect { "event";
          repeat;
          desc { "default";
-            rel1.to: "dots";
-            rel2.to: "dots";
+            rel.to: "dots";
             color: 0 0 0 0;
          }
       }
@@ -933,8 +924,6 @@ group { name: "elm/panes/horizontal/up-fold";
 
 group { name: "elm/panes/horizontal/down-fold";
    inherit: "elm/panes/horizontal/default";
-   images.image: "big_arrow_up.png" COMP;
-   images.image: "big_arrow_down.png" COMP;
    script {
       public open;
       public drag_x;
@@ -943,20 +932,19 @@ group { name: "elm/panes/horizontal/down-fold";
    parts {
       image { "dots";
          desc { "default";
-            image.normal: "big_arrow_down.png";
-            FIXED_SIZE(17, 14)
+            image.normal: "i-arrow-d";
+            FIXED_SIZE(15, 15)
             fill.smooth: 1;
          }
          desc { "closed";
             inherit: "default" 0.0;
-            image.normal: "big_arrow_up.png";
+            image.normal: "i-arrow-u";
          }
       }
       rect { "event";
          repeat;
          desc { "default";
-            rel1.to: "dots";
-            rel2.to: "dots";
+            rel.to: "dots";
             color: 0 0 0 0;
          }
       }