Modified the edc file for grid widget

Change-Id: Ie56bb92426e0e6e34a0361237f79bf7656f8d6f2
Signed-off-by: Hyojung Jo <hj903.jo@samsung.com>

10 files changed, 649 insertions, 317 deletions

diff --git a/include/define.h b/include/define.h
index 4371e93..4030ec0 100644
--- a/include/define.h
+++ b/include/define.h
@@ -22,6 +22,7 @@
 
 /* Group */
 #define GRP_VIEW_BASE "grp.view.base"
+#define GRP_APP_THUMB_BG "grp.app.thumb.bg"
 
 /* Part for edc file */
 #define PART_TOP_TITLE "part.top.title"
@@ -29,6 +30,12 @@
 #define PART_GENGRID "part.gengrid"
 #define PART_NO_CONTENTS "part.no.contents"
 #define PART_CONTENTS_COUNT "part.contents.count"
+#define PART_THUMB_BG "part.thumb.bg"
+#define PART_THUMB_ICON "part.thumb.icon"
+#define PART_THUMB_TEXT "part.thumb.text"
+#define PART_THUMB_SUBTEXT "part.thumb.subtext"
+#define PART_THUMB_ICON_BG "part.thumb.icon.bg"
+#define PART_THUMB_TEXT_BG "part.thumb.text.bg"
 
 /* Style */
 #define STYLE_MENU_BTN "style.menu.button"
diff --git a/res/favorite-theme.edc b/res/favorite-theme.edc
index 4df2d14..11f37c6 100644
--- a/res/favorite-theme.edc
+++ b/res/favorite-theme.edc
@@ -17,7 +17,6 @@
 #include "../include/define.h"
 
 collections {
-	#include "widgets/gengrid.edc"
 	#include "widgets/gengrid_tv.edc"
 	#include "widgets/gengrid_movie.edc"
 	#include "widgets/gengrid_gallery.edc"
diff --git a/res/favorite.edc b/res/favorite.edc
index e233a6d..ae13724 100644
--- a/res/favorite.edc
+++ b/res/favorite.edc
@@ -231,4 +231,43 @@ collections {
 			}
 		}
 	}
+
+
+	group {
+		name, GRP_APP_THUMB_BG;
+		parts {
+			part {
+				name, PART_THUMB_ICON_BG;
+				type, SWALLOW;
+				scale, 1;
+				description {
+					state, "default" 0.0;
+					min, 212 212;
+					rel2.relative, 0.0 0.0;
+					align, 0.0 0.0;
+					fixed, 1 1;
+				}
+			}
+
+			part {
+				name, PART_THUMB_TEXT_BG;
+				type, SWALLOW;
+				scale, 1;
+				description {
+					state, "default" 0.0;
+					min, 212 82;
+					rel1 {
+						to, PART_THUMB_ICON_BG;
+						relative, 0.0 1.0;
+					}
+					rel2 {
+						to, PART_THUMB_ICON_BG;
+						relative, 0.0 1.0;
+					}
+					align, 0.0 0.0;
+					fixed, 1 1;
+				}
+			}
+		}
+	}
 }
diff --git a/res/widgets/gengrid.edc b/res/widgets/gengrid.edc
deleted file mode 100644
index 1324db4..0000000
--- a/res/widgets/gengrid.edc
+++ /dev/null
@@ -1,247 +0,0 @@
-/*
- * Copyright (c) 2015 Samsung Electronics Co., Ltd All Rights Reserved
- *
- * Licensed under the Apache License, Version 2.0 (the License);
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an AS IS BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-group {
-	name, "elm/gengrid/item/style.base/default";
-	data.item, "focus_highlight" "on";
-	data.item, "texts" "elm.text";
-	data.item, "contents" "elm.swallow.icon";
-	parts {
-		part {
-			name, "bg";
-			type, RECT;
-			scale, 1;
-			description {
-				state, "default" 0.0;
-				color, 255 255 255 255;
-				visible, 0;
-			}
-		}
-
-		part {
-			name, "padding.bottom.right";
-			type, SPACER;
-			scale, 1;
-			description {
-				state, "default" 0.0;
-				min, 26 26;
-				rel1.relative, 1.0 1.0;
-				align, 1.0 1.0;
-				fixed, 1 1;
-			}
-		}
-
-		part {
-			name, "text.bg";
-			type, RECT;
-			scale, 1;
-			description {
-				state, "default" 0.0;
-				/* FIXME: The color is temporarily defined. */
-				color, 113 128 147 100;
-				min, 378 82;
-				rel1.to, "padding.bottom.right";
-				rel2 {
-					to, "padding.bottom.right";
-					relative, 0.0 0.0;
-				}
-				align, 1.0 1.0;
-				fixed, 1 1;
-			}
-			description {
-				state, "focused" 0.0;
-				inherit, "default" 0.0;
-				color, 0 119 246 255;
-			}
-		}
-
-		part {
-			name, "padding.elm.text";
-			type, SPACER;
-			scale, 1;
-			description {
-				state, "default" 0.0;
-				min, 18 0;
-				rel1.to, "text.bg";
-				rel2 {
-					to, "text.bg";
-					relative, 0.0 1.0;
-				}
-				align, 0.0 0.5;
-				fixed, 1 0;
-			}
-		}
-
-		part {
-			name, "elm.text";
-			type, TEXT;
-			scale, 1;
-			description {
-				state, "default" 0.0;
-				color, 255 255 255 255;
-				min, 342 82;
-				rel1 {
-					to, "padding.elm.text";
-					relative, 1.0 0.0;
-				}
-				rel2 {
-					to, "padding.elm.text";
-					relative, 1.0 0.0;
-				}
-				align, 0.0 0.0;
-				fixed, 1 1;
-				text {
-					font, FONT_TIZENSANS_LIGHT;
-					size, 28;
-					align, 0.0 0.5;
-				}
-			}
-		}
-
-		part {
-			name, "elm.swallow.icon";
-			type, SWALLOW;
-			scale, 1;
-			description {
-				state, "default" 0.0;
-				min, 378 212;
-				rel2.relative, 0.0 0.0;
-				align, 0.0 0.0;
-				fixed, 1 1;
-			}
-		}
-
-		part {
-			name, "part.focus.up";
-			type, RECT;
-			scale, 1;
-			description {
-				state, "default" 0.0;
-				color, 0 119 246 255;
-				min, 378 3;
-				rel2.relative, 0.0 0.0;
-				align, 0.0 0.0;
-				fixed, 1 1;
-				visible, 0;
-			}
-			description {
-				state, "focused" 0.0;
-				inherit, "default" 0.0;
-				visible, 1;
-			}
-		}
-
-		part {
-			name, "part.focus.left";
-			type, RECT;
-			scale, 1;
-			description {
-				state, "default" 0.0;
-				color, 0 119 246 255;
-				min, 3 212;
-				rel2.relative, 0.0 0.0;
-				align, 0.0 0.0;
-				fixed, 1 1;
-				visible, 0;
-			}
-			description {
-				state, "focused" 0.0;
-				inherit, "default" 0.0;
-				visible, 1;
-			}
-		}
-
-		part {
-			name, "part.focus.down";
-			type, RECT;
-			scale, 1;
-			description {
-				state, "default" 0.0;
-				color, 0 119 246 255;
-				min, 378 3;
-				rel1 {
-					to, "part.focus.left";
-					relative, 0.0 1.0;
-				}
-				rel2 {
-					to, "part.focus.left";
-					relative, 0.0 1.0;
-				}
-				align, 0.0 1.0;
-				fixed, 1 1;
-				visible, 0;
-			}
-			description {
-				state, "focused" 0.0;
-				inherit, "default" 0.0;
-				visible, 1;
-			}
-		}
-
-		part {
-			name, "part.focus.right";
-			type, RECT;
-			scale, 1;
-			description {
-				state, "default" 0.0;
-				color, 0 119 246 255;
-				min, 3 212;
-				rel1 {
-					to, "part.focus.up";
-					relative, 1.0 0.0;
-				}
-				rel2 {
-					to, "part.focus.up";
-					relative, 1.0 0.0;
-				}
-				align, 1.0 0.0;
-				fixed, 1 1;
-				visible, 0;
-			}
-			description {
-				state, "focused" 0.0;
-				inherit, "default" 0.0;
-				visible, 1;
-			}
-		}
-	}
-
-	programs {
-		program {
-			name, SIG_FOCUSED;
-			signal, "elm,state,focused";
-			source, "elm";
-			action, STATE_SET "focused" 0.0;
-			target, "part.focus.up";
-			target, "part.focus.left";
-			target, "part.focus.down";
-			target, "part.focus.right";
-			target, "text.bg";
-		}
-
-		program {
-			name, SIG_UNFOCUSED;
-			signal, "elm,state,unfocused";
-			source, "elm";
-			action, STATE_SET "default" 0.0;
-			target, "part.focus.up";
-			target, "part.focus.left";
-			target, "part.focus.down";
-			target, "part.focus.right";
-			target, "text.bg";
-		}
-	}
-}
diff --git a/res/widgets/gengrid_apps.edc b/res/widgets/gengrid_apps.edc
index c0cb5cb..f64fc8e 100644
--- a/res/widgets/gengrid_apps.edc
+++ b/res/widgets/gengrid_apps.edc
@@ -16,90 +16,144 @@
 
 group {
 	name, "elm/gengrid/item/style.apps/default";
-	inherit, "elm/gengrid/item/style.base/default";
+	data.item, "focus_highlight" "on";
+	data.item, "texts" "part.thumb.text";
+	data.item, "contents" "part.thumb.icon part.thumb.bg";
 	parts {
 		part {
-			name, "bg";
-			type, RECT;
+			name, PART_THUMB_BG;
+			type, SWALLOW;
 			scale, 1;
 			description {
 				state, "default" 0.0;
-				min, 212 212;
+				min, 212 294;
 				rel2.relative, 0.0 0.0;
+				align, 0.0 0.0;
 				fixed, 1 1;
-				align, 0 0;
-				visible, 1;
 			}
 		}
 
 		part {
-			name, "text.bg";
-			type, RECT;
+			name, "padding.thumb.icon";
+			type, SPACER;
 			scale, 1;
 			description {
 				state, "default" 0.0;
-				min, 212 82;
+				min, 56 56;
+				rel2.relative, 0.0 0.0;
+				align, 0.0 0.0;
+				fixed, 1 1;
 			}
+		}
+
+		part {
+			name, PART_THUMB_ICON;
+			type, SWALLOW;
+			scale, 1;
 			description {
-				state, "focused" 0.0;
-				inherit, "default" 0.0;
-				color, 0 119 246 255;
+				state, "default" 0.0;
+				min, 100 100;
+				rel1 {
+					to, "padding.thumb.icon";
+					relative, 1.0 1.0;
+				}
+				rel2 {
+					to, "padding.thumb.icon";
+					relative, 1.0 1.0;
+				}
+				align, 0.0 0.0;
+				fixed, 1 1;
 			}
 		}
 
 		part {
-			name, "elm.text";
-			type, TEXT;
+			name, "part.focus.up";
+			type, RECT;
 			scale, 1;
 			description {
 				state, "default" 0.0;
-				min, 176 82;
-				text {
-					font, FONT_TIZENSANS_LIGHT;
-					size, 28;
-					align, 0.0 0.5;
-				}
+				color, 0 119 246 255;
+				min, 212 3;
+				rel2.relative, 0.0 0.0;
+				align, 0.0 0.0;
+				fixed, 1 1;
+				visible, 0;
+
+			}
+			description {
+				state, "focused" 0.0;
+				inherit, "default" 0.0;
+				visible, 1;
 			}
 		}
 
 		part {
-			name, "padding.elm.icon";
-			type, SPACER;
+			name, "part.focus.left";
+			type, RECT;
 			scale, 1;
 			description {
 				state, "default" 0.0;
-				min, 56 56;
+				color, 0 119 246 255;
+				min, 3 294;
 				rel2.relative, 0.0 0.0;
 				align, 0.0 0.0;
 				fixed, 1 1;
+				visible, 0;
+			}
+			description {
+				state, "focused" 0.0;
+				inherit, "default" 0.0;
+				visible, 1;
 			}
 		}
 
 		part {
-			name, "elm.swallow.icon";
-			type, SWALLOW;
+			name, "part.focus.down";
+			type, RECT;
 			scale, 1;
 			description {
 				state, "default" 0.0;
-				min, 100 100;
+				color, 0 119 246 255;
+				min, 212 82;
 				rel1 {
-					to, "padding.elm.icon";
-					relative, 1.0 1.0;
+					to, "part.focus.left";
+					relative, 0.0 1.0;
 				}
 				rel2 {
-					to, "padding.elm.icon";
-					relative, 1.0 1.0;
+					to, "part.focus.left";
+					relative, 0.0 1.0;
 				}
+				align, 0.0 1.0;
+				fixed, 1 1;
+				visible, 0;
+
+			}
+			description {
+				state, "focused" 0.0;
+				inherit, "default" 0.0;
+				visible, 1;
 			}
 		}
 
 		part {
-			name, "part.focus.up";
+			name, "part.focus.right";
 			type, RECT;
 			scale, 1;
 			description {
 				state, "default" 0.0;
-				min, 212 3;
+				color, 0 119 246 255;
+				min, 3 294;
+				rel1 {
+					to, "part.focus.up";
+					relative, 1.0 0.0;
+				}
+				rel2 {
+					to, "part.focus.up";
+					relative, 1.0 0.0;
+				}
+				align, 1.0 0.0;
+				fixed, 1 1;
+				visible, 0;
 			}
 			description {
 				state, "focused" 0.0;
@@ -109,18 +163,71 @@ group {
 		}
 
 		part {
-			name, "part.focus.down";
-			type, RECT;
+			name, "padding.thumb.text";
+			type, SPACER;
 			scale, 1;
 			description {
 				state, "default" 0.0;
-				min, 212 3;
+				min, 18 0;
+				rel1.to, "part.focus.down";
+				rel2 {
+					to, "part.focus.down";
+					relative, 0.0 1.0;
+				}
+				align, 0.0 0.5;
+				fixed, 1 0;
 			}
+		}
+
+		part {
+			name, PART_THUMB_TEXT;
+			type, TEXT;
+			scale, 1;
 			description {
-				state, "focused" 0.0;
-				inherit, "default" 0.0;
-				visible, 1;
+				state, "default" 0.0;
+				color, 255 255 255 255;
+				min, 176 82;
+				rel1 {
+					to, "padding.thumb.text";
+					relative, 1.0 0.0;
+				}
+				rel2 {
+					to, "padding.thumb.text";
+					relative, 1.0 0.0;
+				}
+				align, 0.0 0.0;
+				fixed, 1 1;
+				text {
+					font, FONT_TIZENSANS_LIGHT;
+					size, 28;
+					align, 0.0 0.5;
+				}
 			}
 		}
 	}
+
+	programs {
+		program {
+			name, SIG_FOCUSED;
+			signal, "elm,state,focused";
+			source, "elm";
+			action, STATE_SET "focused" 0.0;
+			target, "part.focus.up";
+			target, "part.focus.left";
+			target, "part.focus.down";
+			target, "part.focus.right";
+		}
+
+		program {
+			name, SIG_UNFOCUSED;
+			signal, "elm,state,unfocused";
+			source, "elm";
+			action, STATE_SET "default" 0.0;
+			target, "part.focus.up";
+			target, "part.focus.left";
+			target, "part.focus.down";
+			target, "part.focus.right";
+		}
+
+	}
 }
diff --git a/res/widgets/gengrid_gallery.edc b/res/widgets/gengrid_gallery.edc
index f76a522..cbb0213 100644
--- a/res/widgets/gengrid_gallery.edc
+++ b/res/widgets/gengrid_gallery.edc
@@ -16,44 +16,71 @@
 
 group {
 	name, "elm/gengrid/item/style.gallery/default";
-	inherit, "elm/gengrid/item/style.base/default";
+	data.item, "focus_highlight" "on";
+	data.item, "text" "part.thumb.text";
+	data.item, "contents" "part.thumb.icon";
 	parts {
 		part {
-			name, "padding.bottom.right";
-			type, SPACER;
+			name, PART_THUMB_ICON;
+			type, SWALLOW;
 			scale, 1;
 			description {
 				state, "default" 0.0;
-				min, 6 6;
+				min, 200 200;
+				rel2.relative, 0.0 0.0;
+				align, 0.0 0.0;
+				fixed, 1 1;
 			}
 		}
 
 		part {
-			name, "text.bg";
-			type, RECT;
+			name, "padding.play.icon";
+			type, SPACER;
 			scale, 1;
 			description {
 				state, "default" 0.0;
-				visible, 0;
+				min, 60 60;
+				rel2.relative, 0.0 0.0;
+				align, 0.0 0.0;
+				fixed, 1 1;
 			}
+		}
+
+		part {
+			name, "part.play.icon";
+			type, SWALLOW;
+			scale, 1;
 			description {
-				state, "focused" 0.0;
-				inherit, "default" 0.0;
+				state, "default" 0.0;
+				min, 80 80;
+				rel1 {
+					to, "padding.play.icon";
+					relative, 1.0 1.0;
+				}
+				rel2 {
+					to, "padding.play.icon";
+					relative, 1.0 1.0;
+				}
+				align, 0.0 0.0;
+				fixed, 1 1;
 			}
 		}
 
 		part {
-			name, "elm.swallow.icon";
-			type, SWALLOW;
+			name, "padding.bottom.right";
+			type, SPACER;
 			scale, 1;
 			description {
 				state, "default" 0.0;
-				min, 200 200;
+				min, 6 6;
+				rel1.relative, 1.0 1.0;
+				align, 1.0 1.0;
+				fixed, 1 1;
 			}
 		}
 
 		part {
-			name, "padding.elm.text";
+			name, "padding.thumb.text";
 			type, SPACER;
 			scale, 1;
 			description {
@@ -70,7 +97,7 @@ group {
 		}
 
 		part {
-			name, "elm.text";
+			name, PART_THUMB_TEXT;
 			type, TEXT;
 			scale, 1;
 			description {
@@ -78,15 +105,17 @@ group {
 				color, 255 255 255 255;
 				min, 74 24;
 				rel1 {
-					to, "padding.elm.text";
+					to, "padding.thumb.text";
 					relative, 0.0 0.0;
 				}
 				rel2 {
-					to, "padding.elm.text";
+					to, "padding.thumb.text";
 					relative, 0.0 0.0;
 				}
 				align, 1.0 1.0;
+				fixed, 1 1;
 				text {
+					font, FONT_TIZENSANS_LIGHT;
 					size, 24;
 					align, 1.0 0.5;
 				}
@@ -99,7 +128,12 @@ group {
 			scale, 1;
 			description {
 				state, "default" 0.0;
+				color, 0 119 246 255;
 				min, 200 3;
+				rel2.relative, 0.0 0.0;
+				align, 0.0 0.0;
+				fixed, 1 1;
+				visible, 0;
 			}
 			description {
 				state, "focused" 0.0;
@@ -114,7 +148,12 @@ group {
 			scale, 1;
 			description {
 				state, "default" 0.0;
+				color, 0 119 246 255;
 				min, 3 200;
+				rel2.relative, 0.0 0.0;
+				align, 0.0 0.0;
+				fixed, 1 1;
+				visible, 0;
 			}
 			description {
 				state, "focused" 0.0;
@@ -129,7 +168,19 @@ group {
 			scale, 1;
 			description {
 				state, "default" 0.0;
+				color, 0 119 246 255;
 				min, 200 3;
+				rel1 {
+					to, PART_THUMB_ICON;
+					relative, 0.0 1.0;
+				}
+				rel2 {
+					to, PART_THUMB_ICON;
+					relative, 0.0 1.0;
+				}
+				align, 0.0 1.0;
+				fixed, 1 1;
+				visible, 0;
 			}
 			description {
 				state, "focused" 0.0;
@@ -144,7 +195,19 @@ group {
 			scale, 1;
 			description {
 				state, "default" 0.0;
+				color, 0 119 246 255;
 				min, 3 200;
+				rel1 {
+					to, "part.focus.up";
+					relative, 1.0 0.0;
+				}
+				rel2 {
+					to, "part.focus.up";
+					relative, 1.0 0.0;
+				}
+				align, 1.0 0.0;
+				fixed, 1 1;
+				visible, 0;
 			}
 			description {
 				state, "focused" 0.0;
@@ -153,4 +216,28 @@ group {
 			}
 		}
 	}
+
+	programs {
+		program {
+			name, SIG_FOCUSED;
+			signal, "elm,state,focused";
+			source, "elm";
+			action, STATE_SET "focused" 0.0;
+			target, "part.focus.up";
+			target, "part.focus.left";
+			target, "part.focus.down";
+			target, "part.focus.right";
+		}
+
+		program {
+			name, SIG_UNFOCUSED;
+			signal, "elm,state,unfocused";
+			source, "elm";
+			action, STATE_SET "default" 0.0;
+			target, "part.focus.up";
+			target, "part.focus.left";
+			target, "part.focus.down";
+			target, "part.focus.right";
+		}
+	}
 }
diff --git a/res/widgets/gengrid_movie.edc b/res/widgets/gengrid_movie.edc
index ea58e05..94142d1 100644
--- a/res/widgets/gengrid_movie.edc
+++ b/res/widgets/gengrid_movie.edc
@@ -16,13 +16,28 @@
 
 group {
 	name, "elm/gengrid/item/style.movie/default";
-	inherit, "elm/gengrid/item/style.base/default";
+	data.item, "focus_highlight" "on";
+	data.item, "texts" "part.thumb.text";
+	data.item, "contents" "part.thumb.icon part.thumb.text.bg";
 	images {
 		image, PLAY_ICON_PNG COMP;
 	}
 
 	parts {
 		part {
+			name, PART_THUMB_ICON;
+			type, SWALLOW;
+			scale, 1;
+			description {
+				state, "default" 0.0;
+				min, 378 212;
+				rel2.relative, 0.0 0.0;
+				align, 0.0 0.0;
+				fixed, 1 1;
+			}
+		}
+
+		part {
 			name, "padding.play.icon";
 			type, SPACER;
 			scale, 1;
@@ -55,5 +70,186 @@ group {
 				fixed, 1 1;
 			}
 		}
+
+		part {
+			name, PART_THUMB_TEXT_BG;
+			type, SWALLOW;
+			scale, 1;
+			description {
+				state, "default" 0.0;
+				min, 378 82;
+				rel1 {
+					to, PART_THUMB_ICON;
+					relative, 0.0 1.0;
+				}
+				rel2 {
+					to, PART_THUMB_ICON;
+					relative, 0.0 1.0;
+				}
+				align, 0.0 0.0;
+				fixed, 1 1;
+			}
+		}
+
+		part {
+			name, "padding.thumb.text";
+			type, SPACER;
+			scale, 1;
+			description {
+				state, "default" 0.0;
+				min, 18 0;
+				rel1.to, PART_THUMB_TEXT_BG;
+				rel2 {
+					to, PART_THUMB_TEXT_BG;
+					relative, 0.0 1.0;
+				}
+				align, 0.0 0.5;
+				fixed, 1 0;
+			}
+		}
+
+		part {
+			name, PART_THUMB_TEXT;
+			type, TEXT;
+			scale, 1;
+			description {
+				state, "default" 0.0;
+				color, 255 255 255 255;
+				min, 342 82;
+				rel1 {
+					to, "padding.thumb.text";
+					relative, 1.0 0.0;
+				}
+				rel2 {
+					to, "padding.thumb.text";
+					relative, 1.0 0.0;
+				}
+				align, 0.0 0.0;
+				fixed, 1 1;
+				text {
+					font, FONT_TIZENSANS_LIGHT;
+					size, 28;
+					align, 0.0 0.5;
+				}
+			}
+		}
+
+		part {
+			name, "part.focus.up";
+			type, RECT;
+			scale, 1;
+			description {
+				state, "default" 0.0;
+				color, 0 119 246 255;
+				min, 378 3;
+				rel2.relative, 0.0 0.0;
+				align, 0.0 0.0;
+				fixed, 1 1;
+				visible, 0;
+			}
+			description {
+				state, "focused" 0.0;
+				inherit, "default" 0.0;
+				visible, 1;
+			}
+		}
+
+		part {
+			name, "part.focus.left";
+			type, RECT;
+			scale, 1;
+			description {
+				state, "default" 0.0;
+				color, 0 119 246 255;
+				min, 3 294;
+				rel2.relative, 0.0 0.0;
+				align, 0.0 0.0;
+				fixed, 1 1;
+				visible, 0;
+			}
+			description {
+				state, "focused" 0.0;
+				inherit, "default" 0.0;
+				visible, 1;
+			}
+		}
+
+		part {
+			name, "part.focus.right";
+			type, RECT;
+			scale, 1;
+			description {
+				state, "default" 0.0;
+				color, 0 119 246 255;
+				min, 3 294;
+				rel1 {
+					to, "part.focus.up";
+					relative, 1.0 0.0;
+				}
+				rel2 {
+					to, "part.focus.up";
+					relative, 1.0 0.0;
+				}
+				align, 1.0 0.0;
+				fixed, 1 1;
+				visible, 0;
+			}
+			description {
+				state, "focused" 0.0;
+				inherit, "default" 0.0;
+				visible, 1;
+			}
+		}
+
+		part {
+			name, "part.focus.down";
+			type, RECT;
+			scale, 1;
+			description {
+				state, "default" 0.0;
+				color, 0 119 246 255;
+				min, 378 82;
+				rel1 {
+					to, PART_THUMB_ICON;
+					relative, 0.0 1.0;
+				}
+				rel2 {
+					to, PART_THUMB_ICON;
+					relative, 0.0 1.0;
+				}
+				align, 0.0 0.0;
+				fixed, 1 1;
+				visible, 0;
+			}
+			description {
+				state, "focused" 0.0;
+				inherit, "default" 0.0;
+				visible, 1;
+			}
+		}
+	}
+
+	programs {
+		program {
+			name, SIG_FOCUSED;
+			signal, "elm,state,focused";
+			source, "elm";
+			action, STATE_SET "focused" 0.0;
+			target, "part.focus.up";
+			target, "part.focus.left";
+			target, "part.focus.down";
+			target, "part.focus.right";
+		}
+
+		program {
+			name, SIG_UNFOCUSED;
+			signal, "elm,state,unfocused";
+			source, "elm";
+			action, STATE_SET "default" 0.0;
+			target, "part.focus.up";
+			target, "part.focus.left";
+			target, "part.focus.down";
+			target, "part.focus.right";
+		}
 	}
 }
diff --git a/res/widgets/gengrid_music.edc b/res/widgets/gengrid_music.edc
index c7df693..3fe8fa0 100644
--- a/res/widgets/gengrid_music.edc
+++ b/res/widgets/gengrid_music.edc
@@ -16,16 +16,41 @@
 
 group {
 	name, "elm/gengrid/item/style.music/default";
-	inherit, "elm/gengrid/item/style.base/default";
+	data.item, "focus_highlight" "on";
+	data.item, "texts" "part.thumb.text part.thumb.subtext";
+	data.item, "contents" "part.thumb.icon";
 	parts {
 		part {
-			name, "text.bg";
+			name, PART_THUMB_ICON;
+			type, SWALLOW;
+			scale, 1;
+			description {
+				state, "default" 0.0;
+				min, 134 134;
+				rel2.relative, 0.0 0.0;
+				align, 0.0 0.0;
+				fixed, 1 1;
+			}
+		}
+
+		part {
+			name, PART_THUMB_TEXT_BG;
 			type, RECT;
 			scale, 1;
 			description {
 				state, "default" 0.0;
 				color, 255 255 255 255;
 				min, 354 134;
+				rel1 {
+					to, PART_THUMB_ICON;
+					relative, 1.0 0.0;
+				}
+				rel2 {
+					to, PART_THUMB_ICON;
+					relative, 1.0 0.0;
+				}
+				align, 0.0 0.0;
+				fixed, 1 1;
 			}
 			description {
 				state, "focused" 0.0;
@@ -35,14 +60,15 @@ group {
 		}
 
 		part {
-			name, "padding.elm.text";
+			name, "padding.thumb.text";
 			type, SPACER;
 			scale, 1;
 			description {
 				state, "default" 0.0;
 				min, 28 22;
+				rel1.to, PART_THUMB_TEXT_BG;
 				rel2 {
-					to, "text.bg";
+					to, PART_THUMB_TEXT_BG;
 					relative, 0.0 0.0;
 				}
 				align, 0.0 0.0;
@@ -51,7 +77,7 @@ group {
 		}
 
 		part {
-			name, "elm.text";
+			name, PART_THUMB_TEXT;
 			type, TEXT;
 			scale, 1;
 			description {
@@ -59,13 +85,20 @@ group {
 				color, 51 51 51 255;
 				min, 302 28;
 				rel1 {
-					to, "padding.elm.text";
+					to, "padding.thumb.text";
 					relative, 1.0 1.0;
 				}
 				rel2 {
-					to, "padding.elm.text";
+					to, "padding.thumb.text";
 					relative, 1.0 1.0;
 				}
+				text {
+					font, FONT_TIZENSANS_LIGHT;
+					size, 28;
+					align, 0.0 0.5;
+				}
+				align, 0.0 0.0;
+				fixed, 1 1;
 			}
 			description {
 				state, "focused" 0.0;
@@ -75,22 +108,66 @@ group {
 		}
 
 		part {
-			name, "elm.swallow.icon";
-			type, SWALLOW;
+			name, "padding.thumb.subtext";
+			type, SPACER;
 			scale, 1;
 			description {
 				state, "default" 0.0;
-				min, 134 134;
+				min, 0 14;
+				rel1 {
+					to, PART_THUMB_TEXT;
+					relative, 0.0 1.0;
+				}
+				rel2 {
+					to, PART_THUMB_TEXT;
+					relative, 0.0 1.0;
+				}
+				align, 0.5 0.0;
+				fixed, 0 1;
 			}
 		}
 
 		part {
+			name, PART_THUMB_SUBTEXT;
+			type, TEXT;
+			scale, 1;
+			description {
+				state, "default" 0.0;
+				color, 153 153 153 255;
+				min, 302 52;
+				rel1 {
+					to, "padding.thumb.subtext";
+					relative, 1.0 1.0;
+				}
+				rel2.to, "padding.thumb.subtext";
+				align, 0.0 0.0;
+				fixed, 1 1;
+				text {
+					font, FONT_TIZENSANS_LIGHT;
+					size, 24;
+					align, 0.0 0.5;
+				}
+			}
+			description {
+				state, "focused" 0.0;
+				inherit, "default" 0.0;
+				color, 255 255 255 255;
+			}
+		}
+
+
+		part {
 			name, "part.focus.up";
 			type, RECT;
 			scale, 1;
 			description {
 				state, "default" 0.0;
+				color, 0 119 246 255;
 				min, 134 3;
+				rel2.relative, 0.0 0.0;
+				align, 0.0 0.0;
+				fixed, 1 1;
+				visible, 0;
 			}
 			description {
 				state, "focused" 0.0;
@@ -105,7 +182,12 @@ group {
 			scale, 1;
 			description {
 				state, "default" 0.0;
+				color, 0 119 246 255;
 				min, 3 134;
+				rel2.relative, 0.0 0.0;
+				align, 0.0 0.0;
+				fixed, 1 1;
+				visible, 0;
 			}
 			description {
 				state, "focused" 0.0;
@@ -120,7 +202,19 @@ group {
 			scale, 1;
 			description {
 				state, "default" 0.0;
+				color, 0 119 246 255;
 				min, 134 3;
+				rel1 {
+					to, "part.focus.left";
+					relative, 0.0 1.0;
+				}
+				rel2 {
+					to, "part.focus.left";
+					relative, 0.0 1.0;
+				}
+				align, 0.0 1.0;
+				fixed, 1 1;
+				visible, 0;
 			}
 			description {
 				state, "focused" 0.0;
@@ -135,7 +229,19 @@ group {
 			scale, 1;
 			description {
 				state, "default" 0.0;
+				color, 0 119 246 255;
 				min, 3 134;
+				rel1 {
+					to, "part.focus.up";
+					relative, 1.0 0.0;
+				}
+				rel2 {
+					to, "part.focus.up";
+					relative, 1.0 0.0;
+				}
+				align, 1.0 0.0;
+				fixed, 1 1;
+				visible, 0;
 			}
 			description {
 				state, "focused" 0.0;
@@ -156,6 +262,11 @@ group {
 				align, 0.0 0.0;
 				fixed, 1 1;
 			}
+			description {
+				state, "focused" 0.0;
+				inherit, "default" 0.0;
+				visible, 0;
+			}
 		}
 
 		part {
@@ -170,6 +281,11 @@ group {
 				align, 0.0 0.0;
 				fixed, 1 1;
 			}
+			description {
+				state, "focused" 0.0;
+				inherit, "default" 0.0;
+				visible, 0;
+			}
 		}
 
 		part {
@@ -191,6 +307,11 @@ group {
 				align, 0.0 1.0;
 				fixed, 1 1;
 			}
+			description {
+				state, "focused" 0.0;
+				inherit, "default" 0.0;
+				visible, 0;
+			}
 		}
 
 		part {
@@ -212,6 +333,11 @@ group {
 				align, 0.0 0.0;
 				fixed, 1 1;
 			}
+			description {
+				state, "focused" 0.0;
+				inherit, "default" 0.0;
+				visible, 0;
+			}
 		}
 	}
 
@@ -221,7 +347,17 @@ group {
 			signal, "elm,state,focused";
 			source, "elm";
 			action, STATE_SET "focused" 0.0;
-			target, "elm.text";
+			target, PART_THUMB_TEXT_BG;
+			target, PART_THUMB_TEXT;
+			target, PART_THUMB_SUBTEXT;
+			target, "part.focus.up";
+			target, "part.focus.left";
+			target, "part.focus.down";
+			target, "part.focus.right";
+			target, "part.inside.line.up";
+			target, "part.inside.line.left";
+			target, "part.inside.line.down";
+			target, "part.inside.line.right";
 		}
 
 		program {
@@ -229,7 +365,17 @@ group {
 			signal, "elm,state,unfocused";
 			source, "elm";
 			action, STATE_SET "default" 0.0;
-			target, "elm.text";
+			target, PART_THUMB_TEXT_BG;
+			target, PART_THUMB_TEXT;
+			target, PART_THUMB_SUBTEXT;
+			target, "part.focus.up";
+			target, "part.focus.left";
+			target, "part.focus.down";
+			target, "part.focus.right";
+			target, "part.inside.line.up";
+			target, "part.inside.line.left";
+			target, "part.inside.line.down";
+			target, "part.inside.line.right";
 		}
 	}
 }
diff --git a/res/widgets/gengrid_tv.edc b/res/widgets/gengrid_tv.edc
index 2fc709f..42afe45 100644
--- a/res/widgets/gengrid_tv.edc
+++ b/res/widgets/gengrid_tv.edc
@@ -16,7 +16,6 @@
 
 group {
 	name, "elm/gengrid/item/style.tv/default";
-	inherit, "elm/gengrid/item/style.base/default";
 	parts {
 		/* It will be implemented later */
 	}
diff --git a/res/widgets/gengrid_webs.edc b/res/widgets/gengrid_webs.edc
index e652ea9..cd75c80 100644
--- a/res/widgets/gengrid_webs.edc
+++ b/res/widgets/gengrid_webs.edc
@@ -16,7 +16,6 @@
 
 group {
 	name, "elm/gengrid/item/style.webs/default";
-	inherit, "elm/gengrid/item/style.base/default";
 	parts {
 		/* It will be implemeted later. */
 	}