From a30aa2ce98a95ca383e92ca0fb4852a26311fef2 Mon Sep 17 00:00:00 2001 From: Eugene Kurzberg Date: Fri, 10 Feb 2017 10:28:05 +0200 Subject: TizenRefApp-7976 Implement Alert GUI (Main layout) Change-Id: Icb20f22bf45c65fdd5aa8629bbceda0e82893846 Signed-off-by: Eugene Kurzberg --- alarm-app/edje/alert/images/w_alert_clock_ic.png | Bin 0 -> 4685 bytes .../alert/images/w_alert_interaction_cue_l_01.png | Bin 0 -> 1197 bytes .../alert/images/w_alert_interaction_cue_l_02.png | Bin 0 -> 1189 bytes .../alert/images/w_alert_interaction_cue_l_03.png | Bin 0 -> 1292 bytes .../alert/images/w_alert_interaction_cue_l_04.png | Bin 0 -> 1282 bytes .../alert/images/w_alert_interaction_cue_r_01.png | Bin 0 -> 1165 bytes .../alert/images/w_alert_interaction_cue_r_02.png | Bin 0 -> 1175 bytes .../alert/images/w_alert_interaction_cue_r_03.png | Bin 0 -> 1301 bytes .../alert/images/w_alert_interaction_cue_r_04.png | Bin 0 -> 1280 bytes alarm-app/res/alert/edje/AlertLayout.h | 34 +++ alarm-app/res/alert/edje/AlertPath.h | 36 +++ alarm-app/res/alert/edje/alert-layout.edc | 299 +++++++++++++++++++++ 12 files changed, 369 insertions(+) create mode 100644 alarm-app/edje/alert/images/w_alert_clock_ic.png create mode 100644 alarm-app/edje/alert/images/w_alert_interaction_cue_l_01.png create mode 100644 alarm-app/edje/alert/images/w_alert_interaction_cue_l_02.png create mode 100644 alarm-app/edje/alert/images/w_alert_interaction_cue_l_03.png create mode 100644 alarm-app/edje/alert/images/w_alert_interaction_cue_l_04.png create mode 100644 alarm-app/edje/alert/images/w_alert_interaction_cue_r_01.png create mode 100644 alarm-app/edje/alert/images/w_alert_interaction_cue_r_02.png create mode 100644 alarm-app/edje/alert/images/w_alert_interaction_cue_r_03.png create mode 100644 alarm-app/edje/alert/images/w_alert_interaction_cue_r_04.png create mode 100644 alarm-app/res/alert/edje/AlertLayout.h create mode 100644 alarm-app/res/alert/edje/AlertPath.h create mode 100644 alarm-app/res/alert/edje/alert-layout.edc 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 Binary files /dev/null and b/alarm-app/edje/alert/images/w_alert_clock_ic.png differ 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 Binary files /dev/null and b/alarm-app/edje/alert/images/w_alert_interaction_cue_l_01.png differ 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 Binary files /dev/null and b/alarm-app/edje/alert/images/w_alert_interaction_cue_l_02.png differ 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 Binary files /dev/null and b/alarm-app/edje/alert/images/w_alert_interaction_cue_l_03.png differ 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 Binary files /dev/null and b/alarm-app/edje/alert/images/w_alert_interaction_cue_l_04.png differ 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 Binary files /dev/null and b/alarm-app/edje/alert/images/w_alert_interaction_cue_r_01.png differ 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 Binary files /dev/null and b/alarm-app/edje/alert/images/w_alert_interaction_cue_r_02.png differ 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 Binary files /dev/null and b/alarm-app/edje/alert/images/w_alert_interaction_cue_r_03.png differ 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 Binary files /dev/null and b/alarm-app/edje/alert/images/w_alert_interaction_cue_r_04.png differ 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); + } + } + } +} -- cgit v1.2.3