TizenRefApp-7976 Implement Alert GUI (Main layout)

Change-Id: Icb20f22bf45c65fdd5aa8629bbceda0e82893846
Signed-off-by: Eugene Kurzberg <i.kurtsberg@samsung.com>

12 files changed, 369 insertions, 0 deletions

diff --git a/alarm-app/edje/alert/images/w_alert_clock_ic.png b/alarm-app/edje/alert/images/w_alert_clock_ic.png
new file mode 100644
index 0000000..ed1e27e
--- /dev/null
+++ b/alarm-app/edje/alert/images/w_alert_clock_ic.png
diff --git a/alarm-app/edje/alert/images/w_alert_interaction_cue_l_01.png b/alarm-app/edje/alert/images/w_alert_interaction_cue_l_01.png
new file mode 100644
index 0000000..87cfaaa
--- /dev/null
+++ b/alarm-app/edje/alert/images/w_alert_interaction_cue_l_01.png
diff --git a/alarm-app/edje/alert/images/w_alert_interaction_cue_l_02.png b/alarm-app/edje/alert/images/w_alert_interaction_cue_l_02.png
new file mode 100644
index 0000000..6342aac
--- /dev/null
+++ b/alarm-app/edje/alert/images/w_alert_interaction_cue_l_02.png
diff --git a/alarm-app/edje/alert/images/w_alert_interaction_cue_l_03.png b/alarm-app/edje/alert/images/w_alert_interaction_cue_l_03.png
new file mode 100644
index 0000000..bd204e1
--- /dev/null
+++ b/alarm-app/edje/alert/images/w_alert_interaction_cue_l_03.png
diff --git a/alarm-app/edje/alert/images/w_alert_interaction_cue_l_04.png b/alarm-app/edje/alert/images/w_alert_interaction_cue_l_04.png
new file mode 100644
index 0000000..6845552
--- /dev/null
+++ b/alarm-app/edje/alert/images/w_alert_interaction_cue_l_04.png
diff --git a/alarm-app/edje/alert/images/w_alert_interaction_cue_r_01.png b/alarm-app/edje/alert/images/w_alert_interaction_cue_r_01.png
new file mode 100644
index 0000000..8d6ae40
--- /dev/null
+++ b/alarm-app/edje/alert/images/w_alert_interaction_cue_r_01.png
diff --git a/alarm-app/edje/alert/images/w_alert_interaction_cue_r_02.png b/alarm-app/edje/alert/images/w_alert_interaction_cue_r_02.png
new file mode 100644
index 0000000..955eff8
--- /dev/null
+++ b/alarm-app/edje/alert/images/w_alert_interaction_cue_r_02.png
diff --git a/alarm-app/edje/alert/images/w_alert_interaction_cue_r_03.png b/alarm-app/edje/alert/images/w_alert_interaction_cue_r_03.png
new file mode 100644
index 0000000..f19a064
--- /dev/null
+++ b/alarm-app/edje/alert/images/w_alert_interaction_cue_r_03.png
diff --git a/alarm-app/edje/alert/images/w_alert_interaction_cue_r_04.png b/alarm-app/edje/alert/images/w_alert_interaction_cue_r_04.png
new file mode 100644
index 0000000..270f651
--- /dev/null
+++ b/alarm-app/edje/alert/images/w_alert_interaction_cue_r_04.png
diff --git a/alarm-app/res/alert/edje/AlertLayout.h b/alarm-app/res/alert/edje/AlertLayout.h
new file mode 100644
index 0000000..9358802
--- /dev/null
+++ b/alarm-app/res/alert/edje/AlertLayout.h
@@ -0,0 +1,34 @@
+/*
+ * Copyright 2017 Samsung Electronics Co., Ltd
+ *
+ * Licensed under the Flora License, Version 1.1 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://floralicense.org/license/
+ *
+ * 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.
+ */
+
+#ifndef ALERT_LAYOUT_H
+#define ALERT_LAYOUT_H
+
+#include "AlertPath.h"
+
+#define LAYOUT_ALERT            "alert"
+#define PART_TIME               "text.time"
+#define PART_ORIG_TIME          "text.orig_time"
+#define PART_BUTTON_DISMISS     "swallow.button_dismiss"
+#define PART_BUTTON_SNOOZE      "swallow.button_snooze"
+
+#define SIGNAL_DISMISS_SHOW     "state,dismiss,default"
+#define SIGNAL_DISMISS_HIDE     "state,dismiss,hidden"
+
+#define SIGNAL_SNOOZE_SHOW      "state,snooze,default"
+#define SIGNAL_SNOOZE_HIDE      "state,snooze,hidden"
+
+#endif /* ALERT_LAYOUT_H */
diff --git a/alarm-app/res/alert/edje/AlertPath.h b/alarm-app/res/alert/edje/AlertPath.h
new file mode 100644
index 0000000..c61d057
--- /dev/null
+++ b/alarm-app/res/alert/edje/AlertPath.h
@@ -0,0 +1,36 @@
+/*
+ * Copyright 2017 Samsung Electronics Co., Ltd
+ *
+ * Licensed under the Flora License, Version 1.1 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://floralicense.org/license/
+ *
+ * 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.
+ */
+
+#ifndef ALERT_PATH_H
+#define ALERT_PATH_H
+
+#define ALERT_EDJ_DIR           "alert/edje/"
+#define ALERT_IMG_DIR           "alert/images/"
+
+#define PATH_ALERT_LAYOUT       ALERT_EDJ_DIR"alert-layout.edj"
+
+#define PATH_ICON_ALERT         ALERT_IMG_DIR"w_alert_clock_ic.png"
+#define PATH_ICON_ARROW1_L      ALERT_IMG_DIR"w_alert_interaction_cue_l_01.png"
+#define PATH_ICON_ARROW2_L      ALERT_IMG_DIR"w_alert_interaction_cue_l_02.png"
+#define PATH_ICON_ARROW3_L      ALERT_IMG_DIR"w_alert_interaction_cue_l_03.png"
+#define PATH_ICON_ARROW4_L      ALERT_IMG_DIR"w_alert_interaction_cue_l_04.png"
+
+#define PATH_ICON_ARROW1_R      ALERT_IMG_DIR"w_alert_interaction_cue_r_01.png"
+#define PATH_ICON_ARROW2_R      ALERT_IMG_DIR"w_alert_interaction_cue_r_02.png"
+#define PATH_ICON_ARROW3_R      ALERT_IMG_DIR"w_alert_interaction_cue_r_03.png"
+#define PATH_ICON_ARROW4_R      ALERT_IMG_DIR"w_alert_interaction_cue_r_04.png"
+
+#endif /* ALERT_PATH_H */
diff --git a/alarm-app/res/alert/edje/alert-layout.edc b/alarm-app/res/alert/edje/alert-layout.edc
new file mode 100644
index 0000000..b2af5cc
--- /dev/null
+++ b/alarm-app/res/alert/edje/alert-layout.edc
@@ -0,0 +1,299 @@
+/*
+ * Copyright 2017 Samsung Electronics Co., Ltd
+ *
+ * Licensed under the Flora License, Version 1.1 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://floralicense.org/license/
+ *
+ * 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.
+ */
+
+#include "AlertLayout.h"
+
+#define TRANSITION_GLIDE(duration) CUBIC_BEZIER (duration) 0.25 0.46 0.45 1.0
+
+#define ARROW_WH     24
+
+#define ARROW1_LR    68
+#define ARROW1_T     57
+#define ARROW1_TIME  0.23
+
+#define ARROW2_LR    49
+#define ARROW2_T     75
+#define ARROW2_TIME  0.26
+
+#define ARROW3_LR    35
+#define ARROW3_T     96
+#define ARROW3_TIME  0.30
+
+#define ARROW4_LR    25
+#define ARROW4_T     119
+#define ARROW4_TIME  0.16
+
+#define BTN_LR       6
+#define BTN_WH       50
+#define BTN_FULL_WH  480
+#define BTN_TIME     0.2
+
+#define ICON_T       106
+#define ICON_WH      80
+
+#define TIME_T       9
+#define TIME_H       52
+
+#define ORIG_TIME_T  4
+#define ORIG_TIME_H  37
+
+#define ARROW_PART(NAME, SIDE, ICON_PATH, POS_X, POS_Y, ALIGN_X) \
+	spacer { "spacer."NAME"."SIDE"_top"; scale; \
+		desc { "default"; \
+			fixed: 1 1; \
+			min: POS_X POS_Y; \
+			align: ALIGN_X 0.0; \
+			rel1 { relative: ALIGN_X 0.0; to_x: "spacer."SIDE; } \
+			rel2 { relative: ALIGN_X 0.0; to_x: "spacer."SIDE; } \
+		} \
+	} \
+	image { "image."NAME"_"SIDE; scale; \
+		images.image: ICON_PATH COMP; \
+		clip: "rect.arrows_"SIDE".clipper"; \
+		desc { "default"; \
+			fixed: 1 1; \
+			min: ARROW_WH ARROW_WH; \
+			align: ALIGN_X 0.0; \
+			rel1 { relative: (1.0-ALIGN_X) 1.0; to: "spacer."NAME"."SIDE"_top"; } \
+			rel2 { relative: (1.0-ALIGN_X) 1.0; to: "spacer."NAME"."SIDE"_top"; } \
+			image.normal: ICON_PATH; \
+			color: 255 255 255 64; \
+		} \
+		desc { "active"; \
+			inherit: "default"; \
+			color: 255 255 255 255; \
+		} \
+	}
+
+#define ARROW_PROGRAM(ARROW_NAME, NEXT_ARROW_NAME, DURATION_IN, DURATION_OUT) \
+	program { \
+		name: "activate_"ARROW_NAME; \
+		action: STATE_SET "active"; \
+		targets: "image."ARROW_NAME"_left" "image."ARROW_NAME"_right"; \
+		transition: LINEAR DURATION_IN; \
+		after: "deactivate_"ARROW_NAME; \
+		after: "activate_"NEXT_ARROW_NAME; \
+	} \
+	program { \
+		name: "deactivate_"ARROW_NAME; \
+		action: STATE_SET "default"; \
+		targets: "image."ARROW_NAME"_left" "image."ARROW_NAME"_right"; \
+		transition: LINEAR DURATION_OUT; \
+	}
+
+styles {
+	style {
+		name: "time";
+		base: "font=Tizen:style=Regular font_size=40 align=center color=#ccc";
+	}
+	style {
+		name: "orig_time";
+		base: "font=Tizen:style=Regular font_size=28 align=center color=#ccc";
+	}
+}
+
+collections {
+	base_scale: 1.3;
+
+	group { LAYOUT_ALERT;
+		parts {
+			ARROW_PART("arrow1", "left", PATH_ICON_ARROW1_L, ARROW1_LR, ARROW1_T, 0.0)
+			ARROW_PART("arrow2", "left", PATH_ICON_ARROW2_L, ARROW2_LR, ARROW2_T, 0.0)
+			ARROW_PART("arrow3", "left", PATH_ICON_ARROW3_L, ARROW3_LR, ARROW3_T, 0.0)
+			ARROW_PART("arrow4", "left", PATH_ICON_ARROW4_L, ARROW4_LR, ARROW4_T, 0.0)
+
+			ARROW_PART("arrow1", "right", PATH_ICON_ARROW1_R, ARROW1_LR, ARROW1_T, 1.0)
+			ARROW_PART("arrow2", "right", PATH_ICON_ARROW2_R, ARROW2_LR, ARROW2_T, 1.0)
+			ARROW_PART("arrow3", "right", PATH_ICON_ARROW3_R, ARROW3_LR, ARROW3_T, 1.0)
+			ARROW_PART("arrow4", "right", PATH_ICON_ARROW4_R, ARROW4_LR, ARROW4_T, 1.0)
+
+			rect { "rect.arrows_left.clipper";
+				desc { "default";
+					rel1 { to_x: "image.arrow4_left"; to_y: "image.arrow1_left"; }
+					rel2 { to_x: "image.arrow1_left"; to_y: "image.arrow4_left"; }
+					color: 222 11 0 255;
+				}
+				desc { "hidden";
+					inherit: "default";
+					color: 222 11 0 0;
+				}
+			}
+			rect { "rect.arrows_right.clipper";
+				desc { "default";
+					rel1.to: "image.arrow1_right";
+					rel2.to: "image.arrow4_right";
+					color: 255 208 0 255;
+				}
+				desc { "hidden";
+					inherit: "default";
+					color: 255 208 0 0;
+				}
+			}
+			spacer { "spacer.left"; scale;
+				desc { "default";
+					fixed: 1 0;
+					align: 1.0 0.5;
+					rel2.relative: 0.0 1.0;
+				}
+				desc { "hidden";
+					inherit: "default";
+					min: (BTN_LR+BTN_WH) 0;
+				}
+			}
+			spacer { "spacer.right"; scale;
+				desc { "default";
+					fixed: 1 0;
+					align: 0.0 0.5;
+					rel1.relative: 1.0 0.0;
+				}
+				desc { "hidden";
+					inherit: "default";
+					min: (BTN_LR+BTN_WH) 0;
+				}
+			}
+			spacer { "spacer.icon.top"; scale;
+				desc { "default";
+					fixed: 0 1;
+					min: 0 ICON_T;
+					align: 0.5 0.0;
+					rel2.relative: 1.0 0.0;
+				}
+			}
+			image { "image.icon"; scale;
+				images.image: PATH_ICON_ALERT COMP;
+				desc { "default";
+					fixed: 1 1;
+					min: ICON_WH ICON_WH;
+					align: 0.5 0.0;
+					rel1 { relative: 0.5 1.0; to_y: "spacer.icon.top"; }
+					rel2 { relative: 0.5 1.0; to_y: "spacer.icon.top"; }
+					image.normal: PATH_ICON_ALERT;
+				}
+			}
+			spacer { "spacer.time.top"; scale;
+				desc { "default";
+					fixed: 0 1;
+					min: 0 TIME_T;
+					align: 0.5 0.0;
+					rel1 { relative: 0.0 1.0; to_y: "image.icon"; }
+					rel2 { relative: 1.0 1.0; to_y: "image.icon"; }
+				}
+			}
+			textblock { PART_TIME; scale;
+				desc { "default";
+					fixed: 0 1;
+					min: 0 TIME_H;
+					align: 0.5 0.0;
+					rel1 { relative: 0.0 1.0; to_y: "spacer.time.top"; }
+					rel2 { relative: 1.0 1.0; to_y: "spacer.time.top"; }
+					text.style: "time";
+				}
+			}
+			spacer { "spacer.orig_time.top"; scale;
+				desc { "default";
+					fixed: 0 1;
+					min: 0 ORIG_TIME_T;
+					align: 0.5 1.0;
+					rel1 { relative: 0.0 1.0; to_y: PART_TIME; }
+					rel2 { relative: 1.0 1.0; to_y: PART_TIME; }
+				}
+			}
+			textblock { PART_ORIG_TIME; scale;
+				desc { "default";
+					fixed: 0 1;
+					min: 0 ORIG_TIME_H;
+					align: 0.5 0.0;
+					rel1 { relative: 0.0 0.0; to_y: "spacer.orig_time.top"; }
+					rel2 { relative: 1.0 0.0; to_y: "spacer.orig_time.top"; }
+					text.style: "orig_time";
+				}
+			}
+			spacer { "spacer.dismiss.left"; scale;
+				desc { "default";
+					fixed: 1 0;
+					min: (BTN_LR+BTN_WH/2) 0;
+					align: 0.0 0.5;
+					rel1 { relative: 0.0 0.0; to_x: "spacer.left"; }
+					rel2 { relative: 0.0 1.0; to_x: "spacer.left"; }
+				}
+			}
+			swallow { PART_BUTTON_DISMISS; scale;
+				desc { "default";
+					fixed: 1 1;
+					min: BTN_FULL_WH BTN_FULL_WH;
+					rel1 { relative: 1.0 0.5; to_x: "spacer.dismiss.left"; }
+					rel2 { relative: 1.0 0.5; to_x: "spacer.dismiss.left"; }
+				}
+			}
+			spacer { "spacer.snooze.right"; scale;
+				desc { "default";
+					fixed: 1 0;
+					min: (BTN_LR+BTN_WH/2) 0;
+					align: 1.0 0.5;
+					rel1 { relative: 1.0 0.0; to_x: "spacer.right"; }
+					rel2 { relative: 1.0 1.0; to_x: "spacer.right"; }
+				}
+			}
+			swallow { PART_BUTTON_SNOOZE; scale;
+				desc { "default";
+					fixed: 1 1;
+					min: BTN_FULL_WH BTN_FULL_WH;
+					rel1 { relative: 0.0 0.5; to_x: "spacer.snooze.right"; }
+					rel2 { relative: 0.0 0.5; to_x: "spacer.snooze.right"; }
+				}
+			}
+		}
+		programs {
+			program {
+				signal: "load";
+				source: "*";
+				after: "activate_arrow4";
+			}
+			ARROW_PROGRAM("arrow4", "arrow3", ARROW4_TIME, ARROW3_TIME)
+			ARROW_PROGRAM("arrow3", "arrow2", ARROW3_TIME, ARROW2_TIME)
+			ARROW_PROGRAM("arrow2", "arrow1", ARROW2_TIME, ARROW1_TIME)
+			ARROW_PROGRAM("arrow1", "arrow4", ARROW1_TIME, ARROW4_TIME)
+			program {
+				signal: SIGNAL_DISMISS_SHOW;
+				source: "*";
+				action: STATE_SET "default";
+				targets: "rect.arrows_left.clipper" "rect.arrows_right.clipper" "spacer.left";
+				transition: TRANSITION_GLIDE(BTN_TIME);
+			}
+			program {
+				signal: SIGNAL_DISMISS_HIDE;
+				source: "*";
+				action: STATE_SET "hidden";
+				targets: "rect.arrows_left.clipper" "rect.arrows_right.clipper" "spacer.left";
+				transition: TRANSITION_GLIDE(BTN_TIME);
+			}
+			program {
+				signal: SIGNAL_SNOOZE_SHOW;
+				source: "*";
+				action: STATE_SET "default";
+				targets: "rect.arrows_left.clipper" "rect.arrows_right.clipper" "spacer.right";
+				transition: TRANSITION_GLIDE(BTN_TIME);
+			}
+			program {
+				signal: SIGNAL_SNOOZE_HIDE;
+				source: "*";
+				action: STATE_SET "hidden";
+				targets: "rect.arrows_left.clipper" "rect.arrows_right.clipper" "spacer.right";
+				transition: TRANSITION_GLIDE(BTN_TIME);
+			}
+		}
+	}
+}