music: add edc for now playing item

Change-Id: I59b44ef7134845285bd933ebb8cb6ec062bee967
Signed-off-by: Jehun Lim <jehun.lim@samsung.com>

diff --git a/include/define.h b/include/define.h
index 4edee07..8608add 100644 (file)
--- a/include/define.h
+++ b/include/define.h
@@ -41,6 +41,7 @@
 #define COLOR_TEXT_NORMAL 87 87 87 255
 #define COLOR_TEXT_INFO 153 153 153 255
 #define COLOR_TEXT_FOCUS 255 255 255 255
+#define COLOR_TEXT_FOCUS_0 255 255 255 0
 #define COLOR_TEXT_SELECTED 64 136 211 255
 #define COLOR_TEXT_DISABLED 87 87 87 128
 #define COLOR_TEXT_BG 113 128 147 255

diff --git a/include/layout/music.h b/include/layout/music.h
index ea3efde..8d10464 100644 (file)
--- a/include/layout/music.h
+++ b/include/layout/music.h
@@ -17,10 +17,20 @@
 #ifndef __AIR_MEDIAHUB_LAYOUT_MUSIC_H__
 #define __AIR_MEDIAHUB_LAYOUT_MUSIC_H__
 
+/* layout */
 #define LAYOUT_MUSIC "LAYOUT_MUSIC"
 
+/* group */
 #define GRP_MUSIC_LAYOUT "group.music_layout"
 
+/* part */
+#define PART_PLAYING_CONTENT_THUMBNAIL "part.playing_content_thumbnail"
+#define PART_PLAYING_CONTENT_TITLE "part.playing_content_title"
+#define PART_PLAYING_CONTENT_ARTIST "part.playing_content_artist"
+#define PART_PLAYING_CONTENT_ALBUM "part.playing_content_album"
+
+/* style */
 #define STYLE_GRID_SONG_ITEM "song_item"
+#define STYLE_BTN_PLAYING_CONTENT "base_btn_playing"
 
 #endif /* __AIR_MEDIAHUB_LAYOUT_MUSIC_H__ */

diff --git a/res/edc/widgets/button.edc b/res/edc/widgets/button.edc
index 798ff5c..9725e95 100644 (file)
--- a/res/edc/widgets/button.edc
+++ b/res/edc/widgets/button.edc
@@ -1637,3 +1637,628 @@ group {
                }
        }
 }
+
+group {
+       name: "elm/button/base/base_btn_playing";
+       data.item, "focus_highlight" "on";
+       images {
+               image: IMAGE_PREVIEW_PLAY COMP;
+       }
+       parts {
+               part {
+                       name: "bg";
+                       type: RECT;
+                       scale: 1;
+                       description {
+                               state: "default" 0.0;
+                               min: 514 614;
+                               color: 0 0 0 0;
+                       }
+               }
+               part {
+                       name: "bg_padding";
+                       type: SPACER;
+                       scale: 1;
+                       description {
+                               state: "default" 0.0;
+                               rel1.relative: 1.0 0.0;
+                               min: 26 0;
+                               align: 1.0 0.5;
+                               fixed: 1 0;
+                       }
+               }
+               part {
+                       name: "map";
+                       type: RECT;
+                       scale: 1;
+                       description {
+                               state: "default" 0.0;
+                               perspective {
+                                       zplane: 0;
+                                       focal: 1000;
+                               }
+                               visible: 0;
+                       }
+                       description {
+                               state: "selected" 0.0;
+                               inherit: "default" 0.0;
+                               perspective.zplane: -100;
+                       }
+               }
+               part {
+                       name: PART_PLAYING_CONTENT_THUMBNAIL;
+                       type: SWALLOW;
+                       scale: 1;
+                       description {
+                               state: "default" 0.0;
+                               rel1.to: "bg";
+                               rel2 {
+                                       to: "bg_text";
+                                       relative: 1.0 0.0;
+                               }
+                               map {
+                                       perspective_on: 1;
+                                       perspective: "map";
+                               }
+                       }
+                       description {
+                               state: "selected" 0.0;
+                               inherit: "default" 0.0;
+                               map.on: 1;
+                       }
+               }
+               part {
+                       name: "default_image";
+                       type: IMAGE;
+                       scale: 1;
+                       description {
+                               state: "default" 0.0;
+                               rel1 {
+                                       to: PART_PLAYING_CONTENT_THUMBNAIL;
+                                       relative: 0.5 0.5;
+                               }
+                               rel2 {
+                                       to: PART_PLAYING_CONTENT_THUMBNAIL;
+                                       relative: 0.5 0.5;
+                               }
+                               image.normal: IMAGE_PREVIEW_PLAY;
+                               min: 120 120;
+                               fixed: 1 1;
+                               map {
+                                       perspective_on: 1;
+                                       perspective: "map";
+                               }
+                       }
+                       description {
+                               state: "selected" 0.0;
+                               inherit: "default" 0.0;
+                               map.on: 1;
+                       }
+               }
+               part {
+                       name: "part_focus1";
+                       type: RECT;
+                       mouse_events: 0;
+                       scale: 1;
+                       description {
+                               state: "default" 0.0;
+                               rel1.to: "bg";
+                               rel2 {
+                                       to: "bg_padding";
+                                       relative: 0.0 0.0;
+                               }
+                               min: 0 6;
+                               align: 0.5 0.0;
+                               color: COLOR_ITEM_FOCUS;
+                               fixed: 0 1;
+                               visible: 0;
+                               map {
+                                       perspective_on: 1;
+                                       perspective: "map";
+                               }
+                       }
+                       description {
+                               state: "selected" 0.0;
+                               inherit: "default" 0.0;
+                               map.on: 1;
+                               visible: 1;
+                       }
+                       description {
+                               state: "selected_0" 0.0;
+                               inherit: "default" 0.0;
+                               visible: 1;
+                               color: COLOR_ITEM_FOCUS_0;
+                       }
+               }
+               part {
+                       name: "part_focus2";
+                       type: RECT;
+                       mouse_events: 0;
+                       scale: 1;
+                       description {
+                               state: "default" 0.0;
+                               rel1 {
+                                       to: "part_focus1";
+                                       relative: 0.0 1.0;
+                               }
+                               rel2 {
+                                       to: "bg_text";
+                                       relative: 0.0 0.0;
+                               }
+                               min: 6 0;
+                               align: 0.0 0.5;
+                               color: COLOR_ITEM_FOCUS;
+                               fixed: 1 0;
+                               visible: 0;
+                               map {
+                                       perspective_on: 1;
+                                       perspective: "map";
+                               }
+                       }
+                       description {
+                               state: "selected" 0.0;
+                               inherit: "default" 0.0;
+                               map.on: 1;
+                               visible: 1;
+                       }
+                       description {
+                               state: "selected_0" 0.0;
+                               inherit: "default" 0.0;
+                               visible: 1;
+                               color: COLOR_ITEM_FOCUS_0;
+                       }
+               }
+               part {
+                       name: "part_focus3";
+                       type: RECT;
+                       mouse_events: 0;
+                       scale: 1;
+                       description {
+                               state: "default" 0.0;
+                               rel1 {
+                                       to: "part_focus1";
+                                       relative: 1.0 1.0;
+                               }
+                               rel2 {
+                                       to: "bg_text";
+                                       relative: 1.0 0.0;
+                               }
+                               min: 6 0;
+                               align: 1.0 0.5;
+                               color: COLOR_ITEM_FOCUS;
+                               fixed: 1 0;
+                               visible: 0;
+                               map {
+                                       perspective_on: 1;
+                                       perspective: "map";
+                               }
+                       }
+                       description {
+                               state: "selected" 0.0;
+                               inherit: "default" 0.0;
+                               map.on: 1;
+                               visible: 1;
+                       }
+                       description {
+                               state: "selected_0" 0.0;
+                               inherit: "default" 0.0;
+                               visible: 1;
+                               color: COLOR_ITEM_FOCUS_0;
+                       }
+               }
+               part {
+                       name: "defaultbg_text";
+                       type: RECT;
+                       scale: 1;
+                       description {
+                               state: "default" 0.0;
+                               rel1 {
+                                       to: "bg";
+                                       relative: 0.0 1.0;
+                               }
+                               rel2 {
+                                       to: "bg_padding";
+                                       relative: 0.0 1.0;
+                               }
+                               min: 0 144;
+                               align: 0.5 1.0;
+                               color: COLOR_ITEM_BG;
+                               fixed: 0 1;
+                               map {
+                                       perspective_on: 1;
+                                       perspective: "map";
+                               }
+                       }
+                       description {
+                               state: "selected" 0.0;
+                               inherit: "default" 0.0;
+                               color: COLOR_ITEM_FOCUS;
+                               map.on: 1;
+                       }
+               }
+               part {
+                       name: "bg_text";
+                       type: RECT;
+                       scale: 1;
+                       description {
+                               state: "default" 0.0;
+                               rel1.to: "defaultbg_text";
+                               rel2.to: "defaultbg_text";
+                               color: COLOR_ITEM_BG;
+                               map {
+                                       perspective_on: 1;
+                                       perspective: "map";
+                               }
+                       }
+                       description {
+                               state: "selected" 0.0;
+                               inherit: "default" 0.0;
+                               color: COLOR_ITEM_FOCUS;
+                               map.on: 1;
+                       }
+                       description {
+                               state: "selected_0" 0.0;
+                               inherit: "default" 0.0;
+                               color: COLOR_ITEM_FOCUS_0;
+                       }
+               }
+               part {
+                       name: "padding_text_left";
+                       type: SPACER;
+                       scale: 1;
+                       description {
+                               state: "default" 0.0;
+                               rel1.to: "bg_text";
+                               rel2 {
+                                       to: "bg_text";
+                                       relative: 0.0 0.0;
+                               }
+                               min: 30 20;
+                               align: 0.0 0.0;
+                               fixed: 1 1;
+                       }
+               }
+               part {
+                       name: "padding_text_right";
+                       type: SPACER;
+                       scale: 1;
+                       description {
+                               state: "default" 0.0;
+                               rel1 {
+                                       to: "bg_text";
+                                       relative: 1.0 0.0;
+                               }
+                               rel2 {
+                                       to: "bg_text";
+                                       relative: 1.0 0.0;
+                               }
+                               min: 30 20;
+                               align: 1.0 0.0;
+                               fixed: 1 1;
+                       }
+               }
+               part {
+                       name: PART_PLAYING_CONTENT_TITLE;
+                       type: TEXT;
+                       scale: 1;
+                       description {
+                               state: "default" 0.0;
+                               rel1 {
+                                       to: "padding_text_left";
+                                       relative: 1.0 1.0;
+                               }
+                               rel2 {
+                                       to: "padding_text_right";
+                                       relative: 0.0 1.0;
+                               }
+                               text {
+                                       font: FONT_LIGHT;
+                                       size: 36;
+                                       align: 0.0 0.5;
+                               }
+                               min: 0 36;
+                               align: 0.5 0.0;
+                               color: COLOR_TEXT_TITLE;
+                               fixed: 0 1;
+                               map {
+                                       perspective_on: 1;
+                                       perspective: "map";
+                               }
+                       }
+                       description {
+                               state: "selected" 0.0;
+                               inherit: "default" 0.0;
+                               color: COLOR_TEXT_FOCUS;
+                               map.on: 1;
+                       }
+                       description {
+                               state: "selected_0" 0.0;
+                               inherit: "selected" 0.0;
+                               color: COLOR_TEXT_FOCUS_0;
+                       }
+               }
+               part {
+                       name: "padding_text_artist";
+                       type: SPACER;
+                       scale: 1;
+                       description {
+                               state: "default" 0.0;
+                               rel1 {
+                                       to: PART_PLAYING_CONTENT_TITLE;
+                                       relative: 0.0 1.0;
+                               }
+                               rel2.to: PART_PLAYING_CONTENT_TITLE;
+                               min: 0 10;
+                               align: 0.5 0.0;
+                               fixed: 0 1;
+                       }
+               }
+               part {
+                       name: PART_PLAYING_CONTENT_ARTIST;
+                       type: TEXT;
+                       scale: 1;
+                       description {
+                               state: "default" 0.0;
+                               rel1 {
+                                       to: "padding_text_artist";
+                                       relative: 0.0 1.0;
+                               }
+                               rel2.to: "padding_text_artist";
+                               text {
+                                       font: FONT_LIGHT;
+                                       size: 28;
+                                       align: 0.0 0.5;
+                               }
+                               min: 0 28;
+                               align: 0.5 0.0;
+                               color: COLOR_TEXT_INFO;
+                               fixed: 0 1;
+                               map {
+                                       perspective_on: 1;
+                                       perspective: "map";
+                               }
+                       }
+                       description {
+                               state: "selected" 0.0;
+                               inherit: "default" 0.0;
+                               color: COLOR_TEXT_FOCUS;
+                               map.on: 1;
+                       }
+                       description {
+                               state: "selected_0" 0.0;
+                               inherit: "selected" 0.0;
+                               color: COLOR_TEXT_FOCUS_0;
+                       }
+               }
+               part {
+                       name: "padding_text_album";
+                       type: SPACER;
+                       scale: 1;
+                       description {
+                               state: "default" 0.0;
+                               rel1 {
+                                       to: PART_PLAYING_CONTENT_ARTIST;
+                                       relative: 0.0 1.0;
+                               }
+                               rel2.to: PART_PLAYING_CONTENT_ARTIST;
+                               min: 0 2;
+                               align: 0.5 0.0;
+                               fixed: 0 1;
+                       }
+               }
+               part {
+                       name: PART_PLAYING_CONTENT_ALBUM;
+                       type: TEXT;
+                       scale: 1;
+                       description {
+                               state: "default" 0.0;
+                               rel1 {
+                                       to: "padding_text_album";
+                                       relative: 0.0 1.0;
+                               }
+                               rel2.to: "padding_text_album";
+                               text {
+                                       font: FONT_LIGHT;
+                                       size: 28;
+                                       align: 0.0 0.5;
+                               }
+                               min: 0 28;
+                               align: 0.5 0.0;
+                               color: COLOR_TEXT_INFO;
+                               fixed: 0 1;
+                               map {
+                                       perspective_on: 1;
+                                       perspective: "map";
+                               }
+                       }
+                       description {
+                               state: "selected" 0.0;
+                               inherit: "default" 0.0;
+                               color: COLOR_TEXT_FOCUS;
+                               map.on: 1;
+
+                       }
+                       description {
+                               state: "selected_0" 0.0;
+                               inherit: "selected" 0.0;
+                               color: COLOR_TEXT_FOCUS_0;
+                       }
+               }
+               part {
+                       name: "border_up";
+                       type: RECT;
+                       scale: 1;
+                       description {
+                               state: "default" 0.0;
+                               rel1.to: "bg";
+                               rel2 {
+                                       to: "bg_padding";
+                                       relative: 0.0 0.0;
+                               }
+                               min: 0 1;
+                               align: 0.5 0.0;
+                               color: COLOR_ITEM_BORDER;
+                               fixed: 0 1;
+                       }
+               }
+               part {
+                       name: "border_left";
+                       type: RECT;
+                       scale: 1;
+                       description {
+                               state: "default" 0.0;
+                               rel1 {
+                                       to: "border_up";
+                                       relative: 0.0 1.0;
+                               }
+                               rel2 {
+                                       to: "bg";
+                                       relative: 0.0 1.0;
+                               }
+                               min: 1 0;
+                               align: 0.0 0.5;
+                               color: COLOR_ITEM_BORDER;
+                               fixed: 1 0;
+                       }
+               }
+               part {
+                       name: "border_right";
+                       type: RECT;
+                       scale: 1;
+                       description {
+                               state: "default" 0.0;
+                               rel1 {
+                                       to: "border_up";
+                                       relative: 1.0 1.0;
+                               }
+                               rel2 {
+                                       to: "bg_padding";
+                                       relative: 0.0 1.0;
+                               }
+                               min: 1 0;
+                               align: 1.0 0.5;
+                               color: COLOR_ITEM_BORDER;
+                               fixed: 1 0;
+                       }
+               }
+               part {
+                       name: "border_bottom";
+                       type: RECT;
+                       scale: 1;
+                       description {
+                               state: "default" 0.0;
+                               rel1 {
+                                       to: "border_left";
+                                       relative: 1.0 1.0;
+                               }
+                               rel2 {
+                                       to: "border_right";
+                                       relative: 0.0 1.0;
+                               }
+                               min: 0 1;
+                               align: 0.5 1.0;
+                               color: COLOR_ITEM_BORDER;
+                               fixed: 0 1;
+                       }
+               }
+               part {
+                       name: "event";
+                       type: RECT;
+                       scale: 1;
+                       description {
+                               state: "default" 0.0;
+                               color: 0 0 0 0;
+                       }
+               }
+       }
+       programs {
+               program {
+                       name: "go_active";
+                       signal: "elm,action,focus";
+                       source: "elm";
+                       action: STATE_SET "selected_0" 0.0;
+                       target: "part_focus1";
+                       target: "part_focus2";
+                       target: "part_focus3";
+                       target: "bg_text";
+                       after: "focus,in,anim";
+               }
+               program {
+                       name: "focus,in,anim";
+                       action: STATE_SET "selected" 0.0;
+                       target: PART_PLAYING_CONTENT_THUMBNAIL;
+                       target: "default_image";
+                       target: "part_focus1";
+                       target: "part_focus2";
+                       target: "part_focus3";
+                       target: "bg_text";
+                       target: PART_PLAYING_CONTENT_TITLE;
+                       target: PART_PLAYING_CONTENT_ARTIST;
+                       target: PART_PLAYING_CONTENT_ALBUM;
+                       transition: LINEAR 0.17;
+                       after: "focus,in,anim,2";
+               }
+               program {
+                       name: "focus,in,anim,2";
+                       action: STATE_SET "selected" 0.0;
+                       target: "defaultbg_text";
+               }
+               program {
+                       name: "go_passive";
+                       signal: "elm,action,unfocus";
+                       source: "elm";
+                       action: STATE_SET "default" 0.0;
+                       target: "defaultbg_text";
+                       target: PART_PLAYING_CONTENT_TITLE;
+                       target: PART_PLAYING_CONTENT_ARTIST;
+                       target: PART_PLAYING_CONTENT_ALBUM;
+                       after: "focus,out,anim";
+               }
+               program {
+                       name: "focus,out,anim";
+                       action: STATE_SET "selected_0" 0.0;
+                       target: "part_focus1";
+                       target: "part_focus2";
+                       target: "part_focus3";
+                       target: "bg_text";
+                       transition: LINEAR 0.17;
+                       after: "focus,out,anim,2";
+               }
+               program {
+                       name: "focus,out,anim,2";
+                       action: STATE_SET "default" 0.0;
+                       target: PART_PLAYING_CONTENT_THUMBNAIL;
+                       target: "default_image";
+                       target: "part_focus1";
+                       target: "part_focus2";
+                       target: "part_focus3";
+                       target: "bg_text";
+               }
+               program {
+                       name: "button_clicked";
+                       signal: "mouse,clicked,1";
+                       source: "event";
+                       action: SIGNAL_EMIT "elm,action,click" "";
+               }
+               program {
+                       name: SIG_BTN_CLICKED;
+                       signal: SIG_BTN_CLICKED;
+                       source: SIG_SOURCE_SRC;
+                       action: STATE_SET "selected" 0.0;
+                       target: "map";
+                       transition: DECELERATE 0.2;
+                       after: "after_selected";
+               }
+               program {
+                       name: "after_selected";
+                       action: STATE_SET "default" 0.0;
+                       target: "map";
+                       transition: DECELERATE 0.2;
+                       after: "item_selected";
+               }
+               program {
+                       name: "item_selected";
+                       action: SIGNAL_EMIT SIG_ITEM_SELECTED SIG_SOURCE_EDC;
+               }
+       }
+}