From 58d0b926f92658750fefb2af1ffff3305b42dcf8 Mon Sep 17 00:00:00 2001
From: Radek Kintop <r.kintop@samsung.com>
Date: Fri, 12 May 2017 17:05:24 +0200
Subject: [PATCH] Menu button click event styled

Change-Id: I8b8d1ebbd5e2d5160dae689d14adc96631c86cd6
Signed-off-by: Radek Kintop <r.kintop@samsung.com>
---
 res/images/4.0/bg_settings_item_pressed.#.png | Bin 0 -> 82 bytes
 res/widget/button.edc                         | 309 ++++++++++++--------------
 2 files changed, 136 insertions(+), 173 deletions(-)
 create mode 100644 res/images/4.0/bg_settings_item_pressed.#.png

diff --git a/res/images/4.0/bg_settings_item_pressed.#.png b/res/images/4.0/bg_settings_item_pressed.#.png
new file mode 100644
index 0000000000000000000000000000000000000000..f747480b700a3deed0b31417d30c918ecb424bc9
GIT binary patch
literal 82
zcmeAS@N?(olHy`uVBq!ia0vp^EFjFm1|(O0oL2{=Bt2amLn>}1Cp0wt58!!fBG;U-
eLZOYJON_yYOHgp%#Z4tZMGT&<elF{r5}E+-;}v26

literal 0
HcmV?d00001

diff --git a/res/widget/button.edc b/res/widget/button.edc
index d4c77e4..12b3c2e 100755
--- a/res/widget/button.edc
+++ b/res/widget/button.edc
@@ -540,6 +540,7 @@ group {
 	images {
 		image: BG_NORMAL COMP;
 		image: SHADOW_IMG COMP;
+		image: "4.0/bg_settings_item_pressed.#.png" RAW;
 	}
 	parts {
 		part {
@@ -572,6 +573,34 @@ group {
 				inherit, "default" 0.0;
 				color: 255 255 255 255;
 			}
+			description {
+				state, "mouse_down" 0.0;
+				inherit, "default" 0.0;
+			}
+		}
+		part {
+			name: "blue_bg";
+			type: IMAGE;
+			scale: 0;
+			description {
+				state: "default" 0.0;
+				rel1.to: "bg";
+				rel2.to: "bg";
+				rel1.relative: 0.0 0.0;
+				rel2.relative: 1.0 1.0;
+				color: 255 255 255 255;
+				align: 0.5 0.5;
+				image.normal: "4.0/bg_settings_item_pressed.#.png";
+			}
+			description {
+				state, "focused" 0.0;
+				inherit, "default" 0.0;
+			}
+			description {
+				state, "mouse_down" 0.0;
+				inherit, "default" 0.0;
+				color: 255 255 255 255;
+			}
 		}
 		part {
 			name: "bg";
@@ -591,6 +620,11 @@ group {
 				rel1.relative: -0.05 -0.05;
 				rel2.relative:  1.05  1.05;
 			}
+			description {
+				state, "mouse_down" 0.0;
+				inherit, "default" 0.0;
+				color: 255 255 255 0;
+			}
 		}
 		part {
 			name, "bg.content";
@@ -612,12 +646,11 @@ group {
 			scale: 0;
 			description {
 				state, "default" 0.0;
-				rel1.to, "bg.content";
-				rel2.to, "bg.content";
+				rel1.relative, 0.0 0.1;
 				text {
 					font, FONT_LIGHT;
 					size, 32;
-					align, 0.5 0.5;
+					align, 0.5 0.2653;
 				}
 				color, COLOR_TEXT_ITEM;
 			}
@@ -631,10 +664,32 @@ group {
 				inherit, "default" 0.0;
 				color, COLOR_TEXT_DISABLE;
 			}
+			description {
+				state, "mouse_down" 0.0;
+				inherit, "default" 0.0;
+				color, 255 255 255 255;
+			}
 		}
 	}
 	programs {
 		program {
+			name: "mouse_down";
+			signal: "mouse,down,1";
+			source: "bg";
+			action: STATE_SET "mouse_down" 0.0;
+			targets: "bg" "blue_bg" "shadow" "elm.text";
+			transition, LINEAR 0.167;
+		}
+		program {
+			name: "mouse_up";
+			signal: "mouse,up,1";
+			source: "bg";
+			action: STATE_SET "focused" 0.0;
+			targets: "bg" "blue_bg" "shadow" "elm.text";
+			transition, LINEAR 0.333;
+			filter, "bg" "mouse_down";
+		}
+		program {
 			name, "button_clicked";
 			signal, "mouse,clicked,1";
 			source, "bg";
@@ -648,7 +703,8 @@ group {
 			target, "bg";
 			target, "elm.text";
 			target, "shadow";
-			transition, TRANSITION_FOCUS;
+			target, "blue_bg";
+			transition, LINEAR 0.167;
 		}
 		program {
 			name, "unfocused";
@@ -658,7 +714,8 @@ group {
 			target, "bg";
 			target, "elm.text";
 			target, "shadow";
-			transition, TRANSITION_FOCUS;
+			target, "blue_bg";
+			transition, LINEAR 0.167;
 		}
 		program {
 			name, "disabled";
@@ -673,21 +730,11 @@ group {
 group {
 	name, "elm/button/base/style.status.button";
 	inherit, "elm/button/base/style.normal.button";
-	styles {
-		style {
-			name, "style.subtext2";
-			base, "font=BreezeSans:style=Light font_size=68 color=#0081C6 wrap=word align=center";
-			tag, "br" "\n";
-		}
-	}
 	parts {
 		part {
 			name, "elm.text";
 			description {
 				state, "default" 0.0;
-				rel2.relative, 1.0 0.4;
-				text.align, 0.5 1.0;
-				// the rest is inherited
 			}
 			description {
 				state, "focused" 0.0;
@@ -702,20 +749,19 @@ group {
 		}
 		part {
 			name, PART_MENU_VALUE;
-			type, TEXTBLOCK;
+			type, TEXT;
 			repeat_events, 1;
 			scale: 0;
 			description {
 				state, "default" 0.0;
+				color, 0 129 198 255;
 				rel1 {
-					to, "bg.content";
 					relative, 0.0 0.5;
 				}
-				rel2.to, "bg.content";
-
 				text {
 					align, 0.5 0.0;
-					style, "style.subtext2";
+					size, 68;
+					font: "font=BreezeSans:style=Light";
 				}
 			}
 			description {
@@ -732,10 +778,23 @@ group {
 				inherit, "default" 0.0;
 				color, COLOR_TEXT_DISABLE;
 			}
+			description {
+				state, "mouse_down" 0.0;
+				inherit, "default" 0.0;
+				color, 255 255 255 255;
+			}
 		}
 	}
 	programs {
 		program {
+			name: "mouse_down";
+			target, PART_MENU_VALUE;
+		}
+		program {
+			name: "mouse_up";
+			target, PART_MENU_VALUE;
+		}
+		program {
 			name, "focused";
 			target, PART_MENU_VALUE;
 		}
@@ -768,24 +827,19 @@ group {
 group {
 	name, "elm/button/base/style.datetime.status.button";
 	inherit, "elm/button/base/style.status.button";
-	styles {
-		style {
-			name, "style.subtext3";
-			base, "font=BreezeSans:style=Light font_size=40 color=#0081C6 wrap=word align=center";
-			tag, "br" "\n";
-		}
-	}
 	parts {
 		part {
 			name, PART_MENU_VALUE;
-			type, TEXTBLOCK;
+			type, TEXT;
 			repeat_events, 1;
 			scale: 0;
 			description {
 				state, "default" 0.0;
+				color, 0 129 198 255;
 				text {
 					align, 0.5 0.0;
-					style, "style.subtext3";
+					size, 40;
+					font: "font=BreezeSans:style=Light";
 				}
 			}
 			description {
@@ -802,104 +856,13 @@ group {
 				inherit, "default" 0.0;
 				color, COLOR_TEXT_DISABLE;
 			}
-		}
-	}
-}
-
-group {
-	name, "elm/button/base/style.textblock.button";
-	inherit, "elm/button/base/style.normal.button";
-	styles {
-		style {
-			name, "style.subtext1";
-			base, "font=BreezeSans:style=Light color=#747474 font_size=40 align=center";
-			tag, "br" "\n";
-		}
-	}
-	parts {
-		part {
-			name, "elm.text";
-			description {
-				state, "default" 0.0;
-				rel2.relative, 1.0 0.5;
-				text.align, 0.5 0.5;
-				// the rest is inherited
-			}
-			description {
-				state, "focused" 0.0;
-				inherit, "default" 0.0;
-				color, COLOR_TEXT_FOCUS;
-			}
 			description {
-				state, "disabled" 0.0;
+				state, "mouse_down" 0.0;
 				inherit, "default" 0.0;
-				color, COLOR_TEXT_DISABLE;
-			}
-		}
-		part {
-			name, PART_MENU_VALUE;
-			type, TEXT;
-			repeat_events, 1;
-			scale: 0;
-			description {
-				state, "default" 0.0;
-				rel1 {
-					to, "bg.content";
-					relative, 0.0 0.4;
-				}
-				rel2.to, "bg.content";
-
-				text {
-					align, 0.5 0.0;
-					style, "style.subtext1";
-				}
-			}
-			description {
-				state, "focused" 0.0;
-				inherit, "default" 0.0;
-				color, COLOR_TEXT_VALUE_FOCUS;
-			}
-			description {
-				state, "disabled" 0.0;
-				inherit, "default" 0.0;
-				color, COLOR_TEXT_VALUE_DISABLE;
-			}
-			description {
-				state, "notavailable" 0.0;
-				inherit, "default" 0.0;
-				color, COLOR_TEXT_DISABLE;
+				color, 255 255 255 255;
 			}
 		}
 	}
-	programs {
-		program {
-			name, "focused";
-			target, PART_MENU_VALUE;
-		}
-		program {
-			name, "unfocused";
-			target, PART_MENU_VALUE;
-		}
-		program {
-			name, "disabled";
-			target, PART_MENU_VALUE;
-		}
-		program {
-			name, "enabled";
-			signal, SIG_ENABLED;
-			source, "elm";
-			action, STATE_SET "default" 0.0;
-			target, "elm.text";
-			target, PART_MENU_VALUE;
-		}
-		program {
-			name, SIG_NOTAVAILABLE;
-			signal, SIG_NOTAVAILABLE;
-			source, "";
-			action, STATE_SET "notavailable" 0.0;
-			target, PART_MENU_VALUE;
-		}
-	}
 }
 
 group {
@@ -907,53 +870,30 @@ group {
 	inherit, "elm/button/base/style.status.button";
 	styles {
 		style {
-			name, "style.font1";
-			base, "font=BreezeSansLight:style=Light font_size=32 color=#5C5C5C wrap=word align=center";
+			name, "style.value.min.normal";
+			base, "font=BreezeSansLight:style=Light font_size=46 color=#0081C6 wrap=word align=right";
 			tag, "br" "\n";
 		}
 		style {
-			name, "style.font2";
-			base, "font=BreezeSansLight:style=Light font_size=46 color=#0081C6 wrap=word align=right";
+			name, "style.value.min.selected";
+			base, "font=BreezeSansLight:style=Light font_size=46 color=#FFFFFF wrap=word align=right";
 			tag, "br" "\n";
 		}
 		style {
-			name, "style.font3";
-			base, "font=BreezeSansLight:style=Light font_size=46 color=#0081C6 wrap=word align=left";
+			name, "style.value.max.normal";
+			base, "font=BreezeSansLight:style=Light font_size=46 color=#0081C6 wrap=word align=l";
+			tag, "br" "\n";
+		}
+		style {
+			name, "style.value.max.selected";
+			base, "font=BreezeSansLight:style=Light font_size=46 color=#FFFFFF wrap=word align=left";
 			tag, "br" "\n";
 		}
 	}
 	parts {
 		part {
-			name, "elm.text";
-			description {
-				state, "default" 0.0;
-				rel1 {
-					to, "bg";
-					relative, 0.0 0.2653;
-				}
-				rel2 {
-					to, "bg";
-					relative, 1.0 0.3878;
-				}
-				text {
-					style, "style.font1";
-					fit, 1 1;
-				}
-			}
-			description {
-				state, "focused" 0.0;
-				inherit, "default" 0.0;
-				color, COLOR_TEXT_FOCUS;
-			}
-			description {
-				state, "disabled" 0.0;
-				inherit, "default" 0.0;
-				color, COLOR_TEXT_DISABLE;
-			}
-		}
-		part {
 			name, "button.progress.content";
-			type, SWALLOW;
+			type, SPACER;
 			repeat_events, 1;
 			scale, 1;
 			description {
@@ -986,10 +926,17 @@ group {
 					relative, 0.2474 1.0;
 				}
 				text {
-					style, "style.font2";
+					style, "style.value.min.normal";
 					fit: 1 1;
 				}
 			}
+			description {
+				state, "mouse_down" 0.0;
+				inherit, "default" 0.0;
+				text {
+					style, "style.value.min.selected";
+				}
+			}
 		}
 		part {
 			name, PART_MENU_PROGRESS;
@@ -1026,43 +973,59 @@ group {
 					relative, 1.0 1.0;
 				}
 				text {
-					style, "style.font3";
+					style, "style.value.max.normal";
+					align, 0.0 0.5;
 					fit: 1 1;
 				}
 			}
+			description {
+				state, "mouse_down" 0.0;
+				inherit, "default" 0.0;
+				text {
+					style, "style.value.max.selected";
+				}
+			}
 		}
 		part {
 			name, PART_MENU_VALUE;
 			description {
 				state, "default" 0.0;
 				visible, 0;
-				rel1 {
-					to, "bg.content";
-					relative, 0.0 0.0;
-				}
-				rel2 {
-					to, "bg.content";
-					relative, 0.5 0.5;
-				}
 			}
 			description {
 				state, "focused" 0.0;
-				visible, 0;
 				inherit, "default" 0.0;
-				color, COLOR_TEXT_VALUE_FOCUS;
 			}
 			description {
 				state, "disabled" 0.0;
-				visible, 0;
 				inherit, "default" 0.0;
-				color, COLOR_TEXT_VALUE_DISABLE;
 			}
 			description {
 				state, "notavailable" 0.0;
-				visible, 0;
 				inherit, "default" 0.0;
-				color, COLOR_TEXT_DISABLE;
 			}
+			description {
+				state, "mouse_down" 0.0;
+				inherit, "default" 0.0;
+			}
+		}
+	}
+	programs {
+		program {
+			name: "mouse_down";
+			targets, PART_MENU_MIN_VALUE PART_MENU_MAX_VALUE;
+		}
+		program {
+			name: "mouse_up";
+			targets, PART_MENU_MIN_VALUE PART_MENU_MAX_VALUE;
+		}
+		program {
+			name, "focused";
+			targets, PART_MENU_MIN_VALUE PART_MENU_MAX_VALUE;
+		}
+		program {
+			name, "unfocused";
+			targets, PART_MENU_MIN_VALUE PART_MENU_MAX_VALUE;
 		}
 	}
 }
-- 
2.7.4