theme: proper design for keypad.
authorGustavo Sverzut Barbieri <barbieri@profusion.mobi>
Fri, 6 Jul 2012 21:55:39 +0000 (18:55 -0300)
committerGustavo Sverzut Barbieri <barbieri@profusion.mobi>
Fri, 6 Jul 2012 21:55:39 +0000 (18:55 -0300)
Makefile.am
data/themes/default.edc
data/themes/images/bg_keypad.png [new file with mode: 0644]
data/themes/images/bt_add_contact_pressed.png [new file with mode: 0644]
data/themes/images/bt_add_contact_released.png [new file with mode: 0644]
data/themes/images/bt_backspace_pressed.png [new file with mode: 0644]
data/themes/images/bt_backspace_released.png [new file with mode: 0644]
data/themes/images/bt_call_pressed.png [new file with mode: 0644]
data/themes/images/bt_call_released.png [new file with mode: 0644]

index 5be5e51..666d2b2 100644 (file)
@@ -47,13 +47,23 @@ EDJE_FLAGS = $(EDJE_FLAGS_VERBOSE_$(V)) -id $(top_srcdir)/data/themes/images -fd
 filesdir = $(pkgdatadir)/themes
 files_DATA = data/themes/default.edj
 
-EXTRA_DIST = data/themes/default.edc
-
 AM_V_EDJ = $(am__v_EDJ_$(V))
 am__v_EDJ_ = $(am__v_EDJ_$(AM_DEFAULT_VERBOSITY))
 am__v_EDJ_0 = @echo "  EDJ   " $@;
 
-data/themes/default.edj: $(top_builddir)/Makefile $(top_srcdir)/data/themes/default.edc
+THEME_IMAGES = \
+data/themes/images/bg_keypad.png \
+data/themes/images/bt_add_contact_pressed.png \
+data/themes/images/bt_add_contact_released.png \
+data/themes/images/bt_backspace_pressed.png \
+data/themes/images/bt_backspace_released.png \
+data/themes/images/bt_call_pressed.png \
+data/themes/images/bt_call_released.png
+
+EXTRA_DIST = data/themes/default.edc $(THEME_IMAGES)
+
+
+data/themes/default.edj: $(top_builddir)/Makefile $(top_srcdir)/data/themes/default.edc $(THEME_IMAGES)
        $(MKDIR_P) $(top_builddir)/data/themes
        $(AM_V_EDJ)$(EDJE_CC) $(EDJE_FLAGS) \
        $(top_srcdir)/data/themes/default.edc \
index d34c827..33473ab 100644 (file)
@@ -1,4 +1,27 @@
 collections {
+
+   color_classes {
+      color_class {
+         name: "bg";
+         color: 0 0 0 255;
+      }
+
+      color_class {
+         name: "dark";
+         color: 25 45 51 255;
+      }
+
+      color_class {
+         name: "light";
+         color: 55 88 84 255;
+      }
+
+      color_class {
+         name: "action";
+         color: 123 184 155 255;
+      }
+   }
+
    group {
       name: "elm/layout/dialer/main";
       parts {
@@ -17,7 +40,7 @@ collections {
             type: SWALLOW;
             description {
                state: "default" 0.0;
-               rel2.relative: 1.0 0.9;
+               rel2.offset: -1 -171;
             }
          }
 
@@ -26,24 +49,56 @@ collections {
 
    group {
       name: "elm/layout/dialer/keypad";
+
+      min: 720 1110;
+
+      images {
+         image: "bg_keypad.png" COMP;
+         image: "bt_call_pressed.png" COMP;
+         image: "bt_call_released.png" COMP;
+         image: "bt_backspace_pressed.png" COMP;
+         image: "bt_backspace_released.png" COMP;
+         image: "bt_add_contact_released.png" COMP;
+         image: "bt_add_contact_pressed.png" COMP;
+      }
+
       parts {
          part {
+            name: "bg";
+            type: IMAGE;
+            mouse_events: 0;
+            description {
+               state: "default" 0.0;
+               color: 255 255 255 255;
+               color_class: "dark";
+               min: 720 1110;
+               image {
+                  normal: "bg_keypad.png";
+                  scale_hint: STATIC;
+               }
+               fill.smooth: 1;
+            }
+         }
+
+         part {
             name: "elm.text.display";
             type: TEXT;
             mouse_events: 0;
             scale: 1;
             description {
                state: "default" 0.0;
-               color: 220 220 220 255;
+               color: 255 255 255 255;
+               color_class: "action";
+               min: 720 170;
                rel2 {
                   relative: 1.0 0.0;
-                  offset: -1.0 100;
+                  offset: -1.0 169;
                }
                text {
                   text: "+1 (12) 3456-7890";
                   font: "Verdana";
-                  size: 42;
-                  size_range: 16 42;
+                  size: 99;
+                  size_range: 16 99;
                   fit: 1 1;
                   align: 0.5 0.5;
                   ellipsis: 1.0;
@@ -57,22 +112,92 @@ collections {
             mouse_events: 0;
             description {
                state: "default" 0.0;
-               color: 0 0 0 255;
+               color: 0 0 0 0;
+               min: 720 0;
+               max: 720 720; /* keep it tight centered */
                rel1 {
                   relative: 0.0 1.0;
                   to_y: "elm.text.display";
                }
+               rel2 {
+                  relative: 1.0 0.0;
+                  to_y: "bg.actions";
+               }
+            }
+         }
+
+         part {
+            name: "bg.actions";
+            type: RECT;
+            mouse_events: 0;
+            description {
+               state: "default" 0.0;
+               color: 0 0 0 0;
+               min: 720 170;
+               max: 720 99999; /* keep it tight centered */
+               rel1 {
+                  relative: 0.0 1.0;
+                  offset: 0 -170;
+               }
             }
          }
 
-#define BUTTON(id, label, sub, r1, r2)                                  \
+#define SEPARATOR(id, rely, offy, relto)                                \
+         part {                                                         \
+            name: "separator.dark."##id;                                \
+            type: RECT;                                                 \
+            mouse_events: 0;                                            \
+            description {                                               \
+               state: "default" 0.0;                                    \
+               color: 255 255 255 255;                                  \
+               color_class: "dark";                                     \
+               rel1 {                                                   \
+                  relative: 0.0 rely;                                   \
+                  offset: 0 offy;                                       \
+                  to_y: relto;                                          \
+               }                                                        \
+               rel2 {                                                   \
+                  relative: 1.0 rely;                                   \
+                  offset: -1 (offy + 4);                                \
+                  to_y: relto;                                          \
+               }                                                        \
+            }                                                           \
+         }                                                              \
+         part {                                                         \
+            name: "separator.bg."##id;                                  \
+            type: RECT;                                                 \
+            mouse_events: 0;                                            \
+            description {                                               \
+               state: "default" 0.0;                                    \
+               color: 255 255 255 255;                                  \
+               color_class: "bg";                                       \
+               rel1 {                                                   \
+                  relative: 0.0 rely;                                   \
+                  offset: 0 (offy + 4);                                 \
+                  to_y: relto;                                          \
+               }                                                        \
+               rel2 {                                                   \
+                  relative: 1.0 rely;                                   \
+                  offset: -1 (offy + 8);                                \
+                  to_y: relto;                                          \
+               }                                                        \
+            }                                                           \
+         }
+
+         SEPARATOR("number", 1.0, 0, "elm.text.display");
+         SEPARATOR("actions", 0.0, -8, "bg.actions");
+#undef SEPARATOR
+
+
+#define BUTTON(id, label, sub, ccls, r1, r2)                            \
          part {                                                         \
             name: "button."##id;                                        \
             type: RECT;                                                 \
             mouse_events: 1;                                            \
             description {                                               \
                state: "default" 0.0;                                    \
-               color: 96 96 96 255;                                     \
+               color: 255 255 255 0;                                    \
+               color_class: "action";                                   \
                rel1 {                                                   \
                   to: "bg.buttons";                                     \
                   relative: r1;                                         \
@@ -86,18 +211,17 @@ collections {
             description {                                               \
                state: "pressed" 0.0;                                    \
                inherit: "default" 0.0;                                  \
-               color: 128 128 128 255;                                  \
+               color: 255 255 255 255;                                  \
             }                                                           \
          }                                                              \
          part {                                                         \
             name: "label."##id;                                         \
             type: TEXT;                                                 \
-            effect: SHADOW;                                             \
             mouse_events: 0;                                            \
             description {                                               \
                state: "default" 0.0;                                    \
-               color: 220 220 220 255;                                  \
-               color3: 32 32 32 128;                                    \
+               color: 255 255 255 255;                                  \
+               color_class: ccls;                                       \
                rel1.to: "button."##id;                                  \
                rel2 {                                                   \
                   to: "button."##id;                                    \
@@ -105,15 +229,15 @@ collections {
                }                                                        \
                text {                                                   \
                   text: label;                                          \
-                  font: "Verdana:style=Bold";                           \
-                  size: 36;                                             \
+                  font: "Verdana";                                      \
+                  size: 99;                                             \
                   align: 0.5 0.5;                                       \
                }                                                        \
             }                                                           \
             description {                                               \
                state: "pressed" 0.0;                                    \
                inherit: "default" 0.0;                                  \
-               color: 255 255 255 255;                                  \
+               color: 16 16 16 255;                                     \
             }                                                           \
          }                                                              \
          part {                                                         \
@@ -122,7 +246,8 @@ collections {
             mouse_events: 0;                                            \
             description {                                               \
                state: "default" 0.0;                                    \
-               color: 180 180 180 255;                                  \
+               color: 255 255 255 255;                                  \
+               color_class: "light";                                    \
                rel1 {                                                   \
                   to: "button."##id;                                    \
                   relative: 0.0 0.5;                                    \
@@ -136,6 +261,11 @@ collections {
                   align: 0.5 0.5;                                       \
                }                                                        \
             }                                                           \
+            description {                                               \
+               state: "pressed" 0.0;                                    \
+               inherit: "default" 0.0;                                  \
+               color: 16 16 16 255;                                     \
+            }                                                           \
          }                                                              \
          programs {                                                     \
             program {                                                   \
@@ -173,27 +303,112 @@ collections {
             }                                                           \
          }
 
-         BUTTON("1",    "1",     "", 0.000 0.0, 0.333 0.2);
-         BUTTON("2",    "2",  "ABC", 0.333 0.0, 0.666 0.2);
-         BUTTON("3",    "3",  "DEF", 0.666 0.0, 1.000 0.2);
+         BUTTON("1",    "1",     "", "action", 0.000 0.0, 0.333 0.25);
+         BUTTON("2",    "2",  "ABC", "action", 0.333 0.0, 0.666 0.25);
+         BUTTON("3",    "3",  "DEF", "action", 0.666 0.0, 1.000 0.25);
 
-         BUTTON("4",    "4",  "GHI", 0.000 0.2, 0.333 0.4);
-         BUTTON("5",    "5",  "JKL", 0.333 0.2, 0.666 0.4);
-         BUTTON("6",    "6",  "MNO", 0.666 0.2, 1.000 0.4);
+         BUTTON("4",    "4",  "GHI", "action", 0.000 0.25, 0.333 0.50);
+         BUTTON("5",    "5",  "JKL", "action", 0.333 0.25, 0.666 0.50);
+         BUTTON("6",    "6",  "MNO", "action", 0.666 0.25, 1.000 0.50);
 
-         BUTTON("7",    "7", "PQRS", 0.000 0.4, 0.333 0.6);
-         BUTTON("8",    "8",  "TUV", 0.333 0.4, 0.666 0.6);
-         BUTTON("9",    "9", "WXYZ", 0.666 0.4, 1.000 0.6);
+         BUTTON("7",    "7", "PQRS", "action", 0.000 0.50, 0.333 0.75);
+         BUTTON("8",    "8",  "TUV", "action", 0.333 0.50, 0.666 0.75);
+         BUTTON("9",    "9", "WXYZ", "action", 0.666 0.50, 1.000 0.75);
 
-         BUTTON("star", "*",     "", 0.000 0.6, 0.333 0.8);
-         BUTTON("0",    "0",    "+", 0.333 0.6, 0.666 0.8);
-         BUTTON("hash", "#",     "", 0.666 0.6, 1.000 0.8);
-
-         /* TODO: better special buttons */
-         BUTTON("save", "Save", "", 0.000 0.8, 0.333 1.0);
-         BUTTON("call", "Call", "", 0.333 0.8, 0.666 1.0);
-         BUTTON("backspace", "<", "", 0.666 0.8, 1.000 1.0);
+         BUTTON("star", "*",     "", "light",  0.000 0.75, 0.333 1.00);
+         BUTTON("0",    "0",    "+", "action", 0.333 0.75, 0.666 1.00);
+         BUTTON("hash", "#",     "", "light",  0.666 0.75, 1.000 1.00);
 #undef BUTTON
+
+
+#define ACTION_BUTTON(id, img, x0, x1)                                  \
+         part {                                                         \
+            name: "button."##id;                                        \
+            type: IMAGE;                                                \
+            mouse_events: 1;                                            \
+            description {                                               \
+               state: "default" 0.0;                                    \
+               color: 255 255 255 255;                                  \
+               color_class: "action";                                   \
+               min: 240 170;                                            \
+               max: 240 170;                                            \
+               fixed: 1 1;                                              \
+               rel1 {                                                   \
+                  to: "bg.actions";                                     \
+                  relative: x0 0.0;                                     \
+               }                                                        \
+               rel2 {                                                   \
+                  to: "bg.actions";                                     \
+                  relative: x1 1.0;                                     \
+                  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;                                              \
+            }                                                           \
+         }                                                              \
+         part {                                                         \
+            name: "button.over."##id;                                   \
+            type: IMAGE;                                                \
+            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";                  \
+            }                                                           \
+            description {                                               \
+               state: "pressed" 0.0;                                    \
+               inherit: "default" 0.0;                                  \
+               color: 255 255 255 255;                                  \
+               visible: 1;                                              \
+            }                                                           \
+         }                                                              \
+         programs {                                                     \
+            program {                                                   \
+               signal: "mouse,up,1";                                    \
+               source: "button."##id;                                   \
+               action: SIGNAL_EMIT "released,"##id "keypad";            \
+               after: "show_up_"##id;                                   \
+            }                                                           \
+            program {                                                   \
+               name: "show_up_"##id;                                    \
+               action: STATE_SET "default" 0.0;                         \
+               transition: DECELERATE 0.1;                              \
+               target: "button."##id;                                   \
+               target: "button.over."##id;                              \
+            }                                                           \
+            program {                                                   \
+               signal: "mouse,down,1";                                  \
+               source: "button."##id;                                   \
+               after: "show_down_"##id;                                 \
+               action: SIGNAL_EMIT "pressed,"##id "keypad";             \
+            }                                                           \
+            program {                                                   \
+               name: "show_down_"##id;                                  \
+               action: STATE_SET "pressed" 0.0;                         \
+               transition: ACCELERATE 0.1;                              \
+               target: "button."##id;                                   \
+               target: "button.over."##id;                              \
+            }                                                           \
+            program {                                                   \
+               signal: "mouse,clicked,1";                               \
+               source: "button."##id;                                   \
+               action: SIGNAL_EMIT "clicked,"##id "keypad";             \
+            }                                                           \
+         }
+
+         ACTION_BUTTON("save",      "add_contact", 0.000000000, 0.333333333);
+         ACTION_BUTTON("call",      "call",        0.333333333, 0.666666666);
+         ACTION_BUTTON("backspace", "backspace",   0.666666666, 1.000000000);
+#undef ACTION_BUTTON
       }
    }
 
diff --git a/data/themes/images/bg_keypad.png b/data/themes/images/bg_keypad.png
new file mode 100644 (file)
index 0000000..7ba7b6d
Binary files /dev/null and b/data/themes/images/bg_keypad.png differ
diff --git a/data/themes/images/bt_add_contact_pressed.png b/data/themes/images/bt_add_contact_pressed.png
new file mode 100644 (file)
index 0000000..03a8224
Binary files /dev/null and b/data/themes/images/bt_add_contact_pressed.png differ
diff --git a/data/themes/images/bt_add_contact_released.png b/data/themes/images/bt_add_contact_released.png
new file mode 100644 (file)
index 0000000..e458915
Binary files /dev/null and b/data/themes/images/bt_add_contact_released.png differ
diff --git a/data/themes/images/bt_backspace_pressed.png b/data/themes/images/bt_backspace_pressed.png
new file mode 100644 (file)
index 0000000..7e9f9f6
Binary files /dev/null and b/data/themes/images/bt_backspace_pressed.png differ
diff --git a/data/themes/images/bt_backspace_released.png b/data/themes/images/bt_backspace_released.png
new file mode 100644 (file)
index 0000000..445e19e
Binary files /dev/null and b/data/themes/images/bt_backspace_released.png differ
diff --git a/data/themes/images/bt_call_pressed.png b/data/themes/images/bt_call_pressed.png
new file mode 100644 (file)
index 0000000..27c7cdd
Binary files /dev/null and b/data/themes/images/bt_call_pressed.png differ
diff --git a/data/themes/images/bt_call_released.png b/data/themes/images/bt_call_released.png
new file mode 100644 (file)
index 0000000..554c430
Binary files /dev/null and b/data/themes/images/bt_call_released.png differ