From: sumanth Date: Thu, 2 May 2013 10:48:58 +0000 (+0530) Subject: [Datetime.edc] Timepicker UX v4.8 changes are implemented. X-Git-Tag: submit/tizen/20131004.114939~333 X-Git-Url: http://review.tizen.org/git/?p=platform%2Fcore%2Fuifw%2Fefl-theme-tizen.git;a=commitdiff_plain;h=a95d354b72201fb347bc1f70c0a2339718cc6206 [Datetime.edc] Timepicker UX v4.8 changes are implemented. Change-Id: Ic2b157422b87be8978aa9aa823f6c4be087ae951 --- diff --git a/themes/images/tizen-hd/Controls/00_picker_button_bg.png b/themes/images/tizen-hd/Controls/00_picker_button_bg.png new file mode 100755 index 0000000..09dcb72 Binary files /dev/null and b/themes/images/tizen-hd/Controls/00_picker_button_bg.png differ diff --git a/themes/images/tizen-hd/Controls/00_picker_button_bg_press.png b/themes/images/tizen-hd/Controls/00_picker_button_bg_press.png new file mode 100755 index 0000000..1f7e245 Binary files /dev/null and b/themes/images/tizen-hd/Controls/00_picker_button_bg_press.png differ diff --git a/themes/inc/tizen-hd-inc.edc b/themes/inc/tizen-hd-inc.edc index f6d3e03..b279d2b 100644 --- a/themes/inc/tizen-hd-inc.edc +++ b/themes/inc/tizen-hd-inc.edc @@ -1033,18 +1033,20 @@ #define TICKER_NOTI_DEFAULT_TEXT2_COLOR_INC "#ffffff" #define DATETIME_FIELD_MIN_SIZE_INC 48 112 -#define DATETIME_SEPARATOR_MIN_SIZE_INC 18 112 -#define DATETIME_TEXT_FONT_SIZE_INC 36 +#define DATETIME_SEPARATOR_MIN_SIZE_INC 22 112 +#define DATETIME_LEFT_PADDING_SIZE_INC 27 112 +#define DATETIME_TEXT_FONT_SIZE_INC 34 +#define DATETIME_SEPARATOR_TEXT_FONT_SIZE_INC 36 #define DATETIME_TEXT_NORMAL_COLOR_INC 0 0 0 255 -#define DATETIME_SEPARATOR_TEXT_COLOR_INC 150 150 150 255 +#define DATETIME_SEPARATOR_TEXT_COLOR_INC 0 0 0 255 #define DATETIME_TEXT_SELECTED_COLOR_INC 255 255 255 255 + #define DATETIME_LABEL_TEXT_BLOCK_STYLE_COLOR_INC 0 0 0 255 -#define DATETIME_LABEL_TEXT_BLOCK_STYLE_SELECTED_COLOR_INC 59 115 182 255 -#define DATETIME_LABEL_SEPARATOR1_COLOR_INC 211 209 203 255 -#define DATETIME_LABEL_SEPARATOR2_COLOR_INC 255 255 255 255 -#define DATETIME_LABEL_SEPARATOR_SIZE_INC 1 42 -#define DATETIME_LABEL_DATE_FIELD_SIZE_INC 130 112 -#define DATETIME_LABEL_TIME_FIELD_MIN_SIZE 65 112 +#define DATETIME_LABEL_TEXT_BLOCK_STYLE_SELECTED_COLOR_INC 255 255 255 255 +#define DATETIME_LABEL_DATE_FIELD_BG_IMAGE_BORDER_INC 8 8 21 22 +#define DATETIME_LABEL_DATE_FIELD_MIN_WIDTH_INC 104 +#define DATETIME_LABEL_TIME_FIELD_MIN_WIDTH_INC 69 +#define DATETIME_LABEL_DATE_FIELD_HEIGHT_INC 48 #define COLORSELECTOR_MIN_W_INC 688 #define COLORSELECTOR_MIN_H_INC 336 diff --git a/themes/widgets/datetime.edc b/themes/widgets/datetime.edc index 1737e7d..4c9c0ae 100644 --- a/themes/widgets/datetime.edc +++ b/themes/widgets/datetime.edc @@ -74,8 +74,7 @@ description {\ state: "default" 0.0;\ visible: 0;\ - min: 0 0;\ - max: 0 99999;\ + min: DATETIME_SEPARATOR_MIN_SIZE_INC;\ align: 0.0 0.5;\ fixed: 1 1;\ rel1 {\ @@ -89,7 +88,7 @@ color: DATETIME_SEPARATOR_TEXT_COLOR_INC;\ text {\ font: "Tizen:style=Regular";\ - size: DATETIME_TEXT_FONT_SIZE_INC;\ + size: DATETIME_SEPARATOR_TEXT_FONT_SIZE_INC;\ min: 1 0; \ text_class: "tizen";\ }\ @@ -97,13 +96,17 @@ description { state: "enable" 0.0;\ inherit: "default" 0.0;\ visible: 1;\ - min: DATETIME_SEPARATOR_MIN_SIZE_INC;\ + }\ + description { state: "hide" 0.0;\ + inherit: "default" 0.0;\ + min: 0 0;\ + max: 0 0;\ }\ }\ programs {\ program {\ name: "separator"#_pos",enabled";\ - signal: "field"#_pos",enable";\ + signal: "field"#_pos",separator,enable";\ source: "elm";\ action: STATE_SET "enable" 0.0;\ target: "separator"#_pos;\ @@ -112,7 +115,21 @@ name: "separator"#_pos",disabled";\ signal: "field"#_pos",separator,disable";\ source: "elm";\ - action: STATE_SET "default" 0.0;\ + script {\ + new st[31];\ + new Float:vl;\ + get_state(PART:"separator"#_pos, st, 30, vl);\ + if (strcmp(st, "hide")) \ + {\ + set_state(PART:"separator"#_pos, "default", 0.0);\ + }\ + }\ + }\ + program {\ + name: "separator"#_pos",hide";\ + signal: "field"#_pos",disable";\ + source: "elm";\ + action: STATE_SET "hide" 0.0;\ target: "separator"#_pos;\ }\ } @@ -130,6 +147,26 @@ group { name: "elm/datetime/base/default"; } } part { + name: "left.padding"; + type: RECT; + scale: 1; + clip_to: "clipper"; + mouse_events: 0; + description { + state: "default" 0.0; + visible: 0; + min: DATETIME_LEFT_PADDING_SIZE_INC; + max: DATETIME_LEFT_PADDING_SIZE_INC; + align: 0.0 0.5; + fixed: 1 1; + rel1.to: "bg"; + rel2 { + relative: 0.0 1.0; + to: "bg"; + } + } + } + part { name: "field0"; type: SWALLOW; scale: 1; @@ -141,10 +178,13 @@ group { name: "elm/datetime/base/default"; min: 0 0; align: 0.0 0.5; fixed: 1 0; - rel1.to: "bg"; + rel1 { + relative: 0.5 0.0; + to_x: "left.padding"; + } rel2 { - relative: 0.0 1.0; - to: "bg"; + relative: 0.5 1.0; + to_x: "left.padding"; } } description { state: "enable" 0.0; @@ -165,11 +205,29 @@ group { name: "elm/datetime/base/default"; DATETIME_FIELD(5, 4) DATETIME_SEPARATOR(5) part { + name: "right.padding"; + type: RECT; + scale: 1; + clip_to: "clipper"; + mouse_events: 0; + description { + state: "default" 0.0; + visible: 0; + min: DATETIME_LEFT_PADDING_SIZE_INC; + max: DATETIME_LEFT_PADDING_SIZE_INC; + align: 1.0 0.5; + fixed: 1 1; + rel2 { + relative: 1.0 0.0; + to: "bg"; + } + rel2.to: "bg"; + } + } + part { name: "clipper"; type: RECT; description { state: "default" 0.0; - rel1.to: "field0"; - rel2.to: "separator5"; color: 255 255 255 255; } description { state: "visible" 0.0; diff --git a/themes/widgets/label.edc b/themes/widgets/label.edc index 8876c9e..475f622 100644 --- a/themes/widgets/label.edc +++ b/themes/widgets/label.edc @@ -1173,15 +1173,19 @@ base: "font=Tizen:style=Medium font_size="LABEL_FONT_SIZE_INC" color="LABEL_TEXT group { name: "elm/label/base/datetime/year/default"; alias: "elm/label/base/datetime/month/default"; - alias: "elm/label/base/datetime/date/default"; alias: "elm/label/base/datetime"; + images { + image: "00_picker_button_bg.png" COMP; + image: "00_picker_button_bg_press.png" COMP; + } parts { part { name: "bg"; type: RECT; scale: 1; description { state: "default" 0.0; color: 0 0 0 0; - min: DATETIME_LABEL_DATE_FIELD_SIZE_INC; + min: DATETIME_LABEL_DATE_FIELD_MIN_WIDTH_INC DATETIME_LABEL_DATE_FIELD_HEIGHT_INC; + max: -1 DATETIME_LABEL_DATE_FIELD_HEIGHT_INC; } } part { name: "label.text.clip"; @@ -1189,35 +1193,33 @@ base: "font=Tizen:style=Medium font_size="LABEL_FONT_SIZE_INC" color="LABEL_TEXT description { state: "default" 0.0; } } - part { name: "right_separator1"; - type: RECT; + part { name: "bg.img"; scale: 1; clip_to: "label.text.clip"; description { state: "default" 0.0; - color: DATETIME_LABEL_SEPARATOR1_COLOR_INC; - min: DATETIME_LABEL_SEPARATOR_SIZE_INC; - max: DATETIME_LABEL_SEPARATOR_SIZE_INC; - fixed: 1 1; - rel1.to: "right_separator2"; + rel1 { + relative: 0.0 0.0; + to_x: "elm.text"; + } rel2 { - relative: 0.0 1.0; - to: "right_separator2"; + relative: 1.0 1.0; + to_x: "elm.text"; + } + image { + normal: "00_picker_button_bg.png"; + border: DATETIME_LABEL_DATE_FIELD_BG_IMAGE_BORDER_INC; + border_scale: 1; } - align: 1.0 0.5; - } - } - part { name: "right_separator2"; - type: RECT; - scale: 1; - clip_to: "label.text.clip"; - description { state: "default" 0.0; - color: DATETIME_LABEL_SEPARATOR2_COLOR_INC; - min: DATETIME_LABEL_SEPARATOR_SIZE_INC; - max: DATETIME_LABEL_SEPARATOR_SIZE_INC; fixed: 1 1; - rel1 { - relative: 1.0 0.0; - to: "bg"; + min: DATETIME_LABEL_DATE_FIELD_MIN_WIDTH_INC DATETIME_LABEL_DATE_FIELD_HEIGHT_INC; + max: -1 DATETIME_LABEL_DATE_FIELD_HEIGHT_INC; + } + description { state: "selected" 0.0; + inherit: "default" 0.0; + image { + normal: "00_picker_button_bg_press.png"; + border: DATETIME_LABEL_DATE_FIELD_BG_IMAGE_BORDER_INC; + border_scale: 1; } } } @@ -1227,10 +1229,6 @@ base: "font=Tizen:style=Medium font_size="LABEL_FONT_SIZE_INC" color="LABEL_TEXT clip_to: "label.text.clip"; description { state: "default" 0.0; color: DATETIME_LABEL_TEXT_BLOCK_STYLE_COLOR_INC; - rel2 { - relative: 0.0 1.0; - to_x: "right_separator1"; - } text { font: "Tizen:style=Regular"; size: DATETIME_TEXT_FONT_SIZE_INC; @@ -1242,6 +1240,13 @@ base: "font=Tizen:style=Medium font_size="LABEL_FONT_SIZE_INC" color="LABEL_TEXT description { state: "selected" 0.0; inherit: "default" 0.0; color: DATETIME_LABEL_TEXT_BLOCK_STYLE_SELECTED_COLOR_INC; + text { + font: "Tizen:style=Bold"; + size: DATETIME_TEXT_FONT_SIZE_INC; + text_class: "tizen"; + min: 1 0; + max: 1 1; + } } } } @@ -1251,18 +1256,21 @@ base: "font=Tizen:style=Medium font_size="LABEL_FONT_SIZE_INC" color="LABEL_TEXT source: "elm"; action: STATE_SET "selected" 0.0; target: "elm.text"; + target: "bg.img"; } program { name: "label_unselect"; signal: "elm,state,unselect"; source: "elm"; action: STATE_SET "default" 0.0; target: "elm.text"; + target: "bg.img"; } } } group { name: "elm/label/base/datetime/hour/default"; alias: "elm/label/base/datetime/minute/default"; + alias: "elm/label/base/datetime/date/default"; inherit: "elm/label/base/datetime/year/default"; parts { part { name: "bg"; @@ -1270,34 +1278,37 @@ base: "font=Tizen:style=Medium font_size="LABEL_FONT_SIZE_INC" color="LABEL_TEXT scale: 1; description { state: "default" 0.0; color: 0 0 0 0; - min: DATETIME_LABEL_TIME_FIELD_MIN_SIZE; + min: DATETIME_LABEL_TIME_FIELD_MIN_WIDTH_INC DATETIME_LABEL_DATE_FIELD_HEIGHT_INC; + max: -1 DATETIME_LABEL_DATE_FIELD_HEIGHT_INC;; } } - part { name: "right_separator1"; - type: RECT; + part { name: "bg.img"; scale: 1; clip_to: "label.text.clip"; description { state: "default" 0.0; - visible: 0; - min: 0 0; - max: 0 0; + rel1 { + relative: 0.0 0.0; + to_x: "elm.text"; + } + rel2 { + relative: 1.0 1.0; + to_x: "elm.text"; + } + image { + normal: "00_picker_button_bg.png"; + border: DATETIME_LABEL_DATE_FIELD_BG_IMAGE_BORDER_INC; + border_scale: 1; + } fixed: 1 1; - rel1.to: "right_separator2"; - rel2.to: "right_separator2"; + min: DATETIME_LABEL_TIME_FIELD_MIN_WIDTH_INC DATETIME_LABEL_DATE_FIELD_HEIGHT_INC; + max: -1 DATETIME_LABEL_DATE_FIELD_HEIGHT_INC; } - } - part { name: "right_separator2"; - type: RECT; - scale: 1; - clip_to: "label.text.clip"; - description { state: "default" 0.0; - visible: 0; - min: 0 0; - max: 0 0; - fixed: 1 1; - rel1 { - relative: 1.0 0.0; - to: "bg"; + description { state: "selected" 0.0; + inherit: "default" 0.0; + image { + normal: "00_picker_button_bg_press.png"; + border: DATETIME_LABEL_DATE_FIELD_BG_IMAGE_BORDER_INC; + border_scale: 1; } } }