TizenRefApp-8515 [Gallery] Implement edc styles for video player

components

- Implemented EDC styles for Video Player page widgets.

Change-Id: I83cbbf3b47a9f2967c241a5773d4b051b5bcb88b

12 files changed, 242 insertions, 9 deletions

diff --git a/edc/button.edc b/edc/button.edc
index 75be9d6..49fe390 100644
--- a/edc/button.edc
+++ b/edc/button.edc
@@ -204,3 +204,66 @@ group{ "elm/button/base/gallery_image";
       }
    }
 }
+
+#define GALLERY_VIDEO_BTN(style_name, size, icon_img, effect_img) \
+   group{ "elm/button/base/"style_name; \
+      inherit: "elm/button/base/transparent"; \
+      images.image: icon_img COMP; \
+      images.image: effect_img COMP; \
+      parts { \
+         image { "gallery.effect"; \
+            desc { "default"; \
+               color: GALLERY_COLOR_VIDEO_BTN_EF; \
+               rel1.to: "event"; \
+               rel2.to: "event"; \
+               image.normal: effect_img; \
+            } \
+         } \
+         image { "gallery.icon"; \
+            desc { "default"; \
+               color: GALLERY_COLOR_VIDEO_BTN_NORMAL; \
+               rel1.to: "event"; \
+               rel2.to: "event"; \
+               image.normal: icon_img; \
+            } \
+            desc { "pressed"; \
+               inherit: "default"; \
+               color: GALLERY_COLOR_VIDEO_BTN_PRESSED; \
+            } \
+         } \
+         rect { "event"; \
+            norepeat; \
+            after: "gallery.icon"; \
+            desc { "default"; \
+               min: size size; \
+               max: size size; \
+            } \
+         } \
+      } \
+      programs { \
+         program { "on_press"; \
+            signal: "elm,action,press"; \
+            source: ""; \
+            action: STATE_SET "pressed"; \
+            target: "gallery.icon"; \
+         } \
+         program { "on_unpress"; \
+            signal: "elm,action,unpress"; \
+            source: ""; \
+            action: STATE_SET "default"; \
+            target: "gallery.icon"; \
+         } \
+      } \
+   }
+
+GALLERY_VIDEO_BTN("gallery_video_volume_on", 88,
+      "video_volume_on.png", "video_volume_on_ef.png")
+
+GALLERY_VIDEO_BTN("gallery_video_volume_mute", 88,
+      "video_volume_mute.png", "video_volume_mute_ef.png")
+
+GALLERY_VIDEO_BTN("gallery_video_play", 130,
+      "video_play_btn.png", "video_play_btn_ef.png")
+
+GALLERY_VIDEO_BTN("gallery_video_pause", 130,
+      "video_pause_btn.png", "video_pause_btn_ef.png")
diff --git a/edc/colors.h b/edc/colors.h
index 0566ba8..8eb78bc 100644
--- a/edc/colors.h
+++ b/edc/colors.h
@@ -19,16 +19,14 @@
 
 #define GALLERY_COLOR_WHITE 255 255 255 255
 
-#define GALLERY_COLOR_AO0112 0 0 0 0
-#define GALLERY_COLOR_AO0112P 0 0 0 102
-#define GALLERY_COLOR_AO0112D 0 0 0 77
+#define GALLERY_COLOR_IMG_EF_NORMAL 0 0 0 0
+#define GALLERY_COLOR_IMG_EF_PRESSED 0 0 0 102
+#define GALLERY_COLOR_IMG_EF_DISABLED 0 0 0 77
 
-#define GALLERY_COLOR_AO032 77 207 255 255
+#define GALLERY_COLOR_VIDEO_BTN_NORMAL 250 250 250 255
+#define GALLERY_COLOR_VIDEO_BTN_PRESSED 250 250 250 102
+#define GALLERY_COLOR_VIDEO_BTN_EF 0 0 0 255
 
-#define GALLERY_COLOR_IMG_EF_NORMAL GALLERY_COLOR_AO0112
-#define GALLERY_COLOR_IMG_EF_PRESSED GALLERY_COLOR_AO0112P
-#define GALLERY_COLOR_IMG_EF_DISABLED GALLERY_COLOR_AO0112D
-
-#define GALLERY_COLOR_SELECT_RING GALLERY_COLOR_AO032
+#define GALLERY_COLOR_SELECT_RING 77 207 255 255
 
 #endif // __GALLERY_EDC_COLORS_H__
diff --git a/edc/images/video_pause_btn.png b/edc/images/video_pause_btn.png
new file mode 100644
index 0000000..8a18109
--- /dev/null
+++ b/edc/images/video_pause_btn.png
diff --git a/edc/images/video_pause_btn_ef.png b/edc/images/video_pause_btn_ef.png
new file mode 100644
index 0000000..b826e9f
--- /dev/null
+++ b/edc/images/video_pause_btn_ef.png
diff --git a/edc/images/video_play_btn.png b/edc/images/video_play_btn.png
new file mode 100644
index 0000000..8298167
--- /dev/null
+++ b/edc/images/video_play_btn.png
diff --git a/edc/images/video_play_btn_ef.png b/edc/images/video_play_btn_ef.png
new file mode 100644
index 0000000..6a323fc
--- /dev/null
+++ b/edc/images/video_play_btn_ef.png
diff --git a/edc/images/video_volume_mute.png b/edc/images/video_volume_mute.png
new file mode 100644
index 0000000..aba4cc0
--- /dev/null
+++ b/edc/images/video_volume_mute.png
diff --git a/edc/images/video_volume_mute_ef.png b/edc/images/video_volume_mute_ef.png
new file mode 100644
index 0000000..a581c2e
--- /dev/null
+++ b/edc/images/video_volume_mute_ef.png
diff --git a/edc/images/video_volume_on.png b/edc/images/video_volume_on.png
new file mode 100644
index 0000000..e3b4bf6
--- /dev/null
+++ b/edc/images/video_volume_on.png
diff --git a/edc/images/video_volume_on_ef.png b/edc/images/video_volume_on_ef.png
new file mode 100644
index 0000000..494efab
--- /dev/null
+++ b/edc/images/video_volume_on_ef.png
diff --git a/edc/layouts.edc b/edc/layouts.edc
index c322b25..20dc42c 100644
--- a/edc/layouts.edc
+++ b/edc/layouts.edc
@@ -185,3 +185,172 @@ group { "elm/layout/gallery/popup_icon";
       }
    }
 }
+
+group { "elm/layout/gallery/video_player";
+   parts {
+      swallow { "elm.swallow.content";
+         desc { "default";
+         }
+      }
+      spacer { "volume_btn_top_pad"
+         scale;
+         desc { "default";
+            align: 0.5 0.0;
+            fixed: 0 1;
+            min: 0 14;
+            rel2.relative: 1.0 0.0;
+         }
+      }
+      swallow { "gallery.swallow.volume_on"
+         desc { "default";
+            hid;
+            align: 0.5 0.0;
+            fixed: 1 1;
+            rel1.to: "volume_btn_top_pad";
+            rel2.to: "volume_btn_top_pad";
+            rel1.relative: 0.5 1.0;
+            rel2.relative: 0.5 1.0;
+         }
+         desc { "visible";
+            inherit: "default";
+            vis;
+         }
+      }
+      swallow { "gallery.swallow.volume_mute"
+         desc { "default";
+            hid;
+            align: 0.5 0.0;
+            fixed: 1 1;
+            rel1.to: "volume_btn_top_pad";
+            rel2.to: "volume_btn_top_pad";
+            rel1.relative: 0.5 1.0;
+            rel2.relative: 0.5 1.0;
+         }
+         desc { "visible";
+            inherit: "default";
+            vis;
+         }
+      }
+      swallow { "gallery.swallow.play"
+         desc { "default";
+            hid;
+            fixed: 1 1;
+            rel1.relative: 0.5 0.5;
+            rel2.relative: 0.5 0.5;
+         }
+         desc { "visible";
+            inherit: "default";
+            vis;
+         }
+      }
+      swallow { "gallery.swallow.pause"
+         desc { "default";
+            hid;
+            fixed: 1 1;
+            rel1.relative: 0.5 0.5;
+            rel2.relative: 0.5 0.5;
+         }
+         desc { "visible";
+            inherit: "default";
+            vis;
+         }
+      }
+      spacer { "text_bottom_pad"
+         scale;
+         desc { "default";
+            align: 0.5 1.0;
+            fixed: 0 1;
+            min: 0 43;
+            rel1.relative: 0.0 1.0;
+         }
+      }
+      textblock { name: "elm.text";
+         scale: 1;
+         desc { "default";
+            hid;
+            align: 0.5 1.0;
+            fixed: 1 1;
+            rel1.to: "text_bottom_pad";
+            rel2.to: "text_bottom_pad";
+            rel1.relative: 0.5 0.0;
+            rel2.relative: 0.5 0.0;
+            text.style: "video_player_text";
+            text.min: 1 1;
+            text.max: 1 1;
+            text.ellipsis: -1;
+         }
+         desc { "visible";
+            inherit: "default";
+            vis;
+         }
+      }
+   }
+   programs {
+      program { "show,volume_on,btn";
+         signal: "show,volume_on,btn";
+         source: "";
+         sequence {
+            action: STATE_SET "visible";
+            target: "gallery.swallow.volume_on";
+            action: STATE_SET "default";
+            target: "gallery.swallow.volume_mute";
+         }
+      }
+      program { "show,volume_mute,btn";
+         signal: "show,volume_mute,btn";
+         source: "";
+         sequence {
+            action: STATE_SET "visible";
+            target: "gallery.swallow.volume_mute";
+            action: STATE_SET "default";
+            target: "gallery.swallow.volume_on";
+         }
+      }
+      program { "hide,volume,btn";
+         signal: "hide,volume,btn";
+         source: "";
+         action: STATE_SET "default";
+         target: "gallery.swallow.volume_on";
+         target: "gallery.swallow.volume_mute";
+      }
+      program { "show,play,btn";
+         signal: "show,play,btn";
+         source: "";
+         sequence {
+            action: STATE_SET "visible";
+            target: "gallery.swallow.play";
+            action: STATE_SET "default";
+            target: "gallery.swallow.pause";
+         }
+      }
+      program { "show,pause,btn";
+         signal: "show,pause,btn";
+         source: "";
+         sequence {
+            action: STATE_SET "visible";
+            target: "gallery.swallow.pause";
+            action: STATE_SET "default";
+            target: "gallery.swallow.play";
+         }
+      }
+      program { "hide,play_pause,btn";
+         signal: "hide,play_pause,btn";
+         source: "";
+         action: STATE_SET "default";
+         target: "gallery.swallow.play";
+         target: "gallery.swallow.pause";
+      }
+      program { "show,text";
+         signal: "show,text";
+         source: "";
+         action: STATE_SET "visible";
+         target: "elm.text";
+      }
+      program { "hide,text";
+         signal: "hide,text";
+         source: "";
+         action: STATE_SET "default";
+         target: "elm.text";
+      }
+   }
+}
diff --git a/res/edje/theme.edc b/res/edje/theme.edc
index ca6ae8a..ea47dff 100644
--- a/res/edje/theme.edc
+++ b/res/edje/theme.edc
@@ -29,6 +29,9 @@ collections {
       style { name: "popup_graphic_toast_style";
          base: "font=Tizen:weight=Normal:width=Condensed font_size=32 color=#fafafaff linesize=42 wrap=mixed align=center ellipsis=1.0 text_class=tizen";
       }
+      style { name: "video_player_text";
+         base: "font=Tizen:weight=Normal:width=Condensed font_size=28 color=#fafafaff linesize=37 wrap=mixed align=center style=soft_outline outline_color=#0000001A text_class=tizen";
+      }
    }
 
    #include "../../edc/colors.h"