From 88b2f1d3a3260626d14eff513523e1783c9a5363 Mon Sep 17 00:00:00 2001 From: Jehun Lim Date: Tue, 21 Jul 2015 15:40:26 +0900 Subject: [PATCH] music: add edc for now playing item Change-Id: I59b44ef7134845285bd933ebb8cb6ec062bee967 Signed-off-by: Jehun Lim --- include/define.h | 1 + include/layout/music.h | 10 + res/edc/widgets/button.edc | 625 +++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 636 insertions(+) diff --git a/include/define.h b/include/define.h index 4edee07..8608add 100644 --- 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 --- 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 --- 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; + } + } +} -- 2.7.4