From: Maciej Skrzypkowski Date: Wed, 28 Sep 2016 14:27:25 +0000 (+0200) Subject: Quick Access button X-Git-Url: http://review.tizen.org/git/?a=commitdiff_plain;h=refs%2Fchanges%2F92%2F89692%2F7;p=profile%2Fcommon%2Fapps%2Fweb%2Fbrowser.git Quick Access button [Issue] N/A [Problem] Wrong style of QA button [Solution] Add new button style [Verify] Open quick access, add few sites, check if it's equal to guidelines. Change-Id: I6540884a26fda80b27c52447cf78316c033892f9 Signed-off-by: Maciej Skrzypkowski --- diff --git a/core/Tools/edc/ColorClasses.edc b/core/Tools/edc/ColorClasses.edc index 44928cbc..a7edcc9f 100644 --- a/core/Tools/edc/ColorClasses.edc +++ b/core/Tools/edc/ColorClasses.edc @@ -43,11 +43,19 @@ color_classes { //TODO: add correct color when guidelines are fixed. color: 255 255 255 230; } + color_class { + name: "B042"; + color: 61 185 204 38; + } color_class { name: "secret"; //TODO: add correct color when guidelines are fixed. color: 97 97 97 255; } + color_class{ + name: "transparent"; + color: 0 0 0 0; + } //Font colors color_class { name: "ATO015"; @@ -57,4 +65,8 @@ color_classes { name: "ATO016"; color: 0 0 0 255; } + color_class { + name: "ATO003"; + color: 255 255 255 255; + } } diff --git a/services/QuickAccess/QuickAccess.cpp b/services/QuickAccess/QuickAccess.cpp index 73a886fe..af12af48 100644 --- a/services/QuickAccess/QuickAccess.cpp +++ b/services/QuickAccess/QuickAccess.cpp @@ -18,6 +18,7 @@ #include #include #include +#include #include "app_i18n.h" #include "QuickAccess.h" @@ -91,7 +92,7 @@ void QuickAccess::createItemClasses() if (!m_quickAccess_item_class) { m_quickAccess_item_class = elm_gengrid_item_class_new(); m_quickAccess_item_class->item_style = "quickAccess"; - m_quickAccess_item_class->func.text_get = _grid_bookmark_text_get; + m_quickAccess_item_class->func.text_get = nullptr; m_quickAccess_item_class->func.content_get = _grid_bookmark_content_get; m_quickAccess_item_class->func.state_get = nullptr; m_quickAccess_item_class->func.del = _grid_bookmark_del; @@ -412,17 +413,6 @@ void QuickAccess::_layout_resize_cb(void* data, Evas* /*e*/, Evas_Object* /*obj* } } - -char* QuickAccess::_grid_bookmark_text_get(void *data, Evas_Object *, const char *part) -{ - if (data) { - BookmarkItemData *itemData = reinterpret_cast(data); - if (!strcmp(part, "elm.text")) - return strdup(itemData->item->getTitle().c_str()); - } - return strdup(""); -} - Evas_Object * QuickAccess::_grid_bookmark_content_get(void *data, Evas_Object* obj, const char *part) { BROWSER_LOGD("[%s:%d] part=%s", __PRETTY_FUNCTION__, __LINE__, part); @@ -430,33 +420,28 @@ Evas_Object * QuickAccess::_grid_bookmark_content_get(void *data, Evas_Object* o BookmarkItemData *itemData = reinterpret_cast(data); if (!strcmp(part, "elm.swallow.icon")) { - if (itemData->item->getThumbnail()) { + Evas_Object *button = elm_button_add(obj); + elm_object_style_set(button, "roundedrect"); + elm_object_part_text_set(button, "button_text", itemData->item->getTitle().c_str()); + + if (itemData->item->getFavicon()) { // Favicon Evas_Object * thumb = itemData->item->getFavicon()->getEvasImage(obj); - elm_image_resizable_set(thumb, EINA_TRUE, EINA_TRUE); - evas_object_size_hint_min_set(thumb, ELM_SCALE_SIZE(114), ELM_SCALE_SIZE(114)); - evas_object_size_hint_max_set(thumb, ELM_SCALE_SIZE(114), ELM_SCALE_SIZE(114)); - return thumb; + elm_object_part_content_set(button, "button_image", thumb); + elm_layout_signal_emit(button, "show,bg,favicon", "event"); } else { - // Default color - Evas_Object *textblock = evas_object_textblock_add(obj); - Evas_Textblock_Style *st = evas_textblock_style_new(); - evas_textblock_style_set(st, "DEFAULT='font=Sans font_size=45 color=#555 align=center valign=center'"); - evas_object_textblock_style_set(textblock, st); - evas_object_textblock_valign_set(textblock, 0.5); - evas_textblock_style_free(st); - const char *fName = itemData->item->getTitle().substr(0, 1).c_str(); - evas_object_textblock_text_markup_set(textblock, fName); - - - Evas_Object *button = elm_button_add(obj); - evas_object_color_set(button, 190, 190, 190, 255); - elm_object_content_set(button, textblock); - - return button; + if (itemData->item->getTitle().length() > 0) { + auto firstLetter = std::string(1, static_cast(std::toupper(itemData->item->getTitle()[0]))); + elm_object_part_text_set(button, "center_label", firstLetter.c_str()); + } + elm_layout_signal_emit(button, "show,bg,rectangle", "event"); + setButtonColor(button, DEFAULT_BUTTON_COLOR, DEFAULT_BUTTON_COLOR, DEFAULT_BUTTON_COLOR, 255); } + + return button; } + if (itemData->quickAccess->m_state == QuickAccessState::Edit) { if (!strcmp(part, "elm.button")) { auto button = elm_button_add(obj); @@ -618,6 +603,19 @@ void QuickAccess::showNoMostVisitedLabel() elm_layout_signal_emit(m_mostVisitedView, "empty,view", "quickaccess"); } +void QuickAccess::setButtonColor(Evas_Object* button, int r, int b, int g, int a) +{ + // setting color of inner rect + Edje_Message_Int_Set* msg = (Edje_Message_Int_Set *) malloc(sizeof(*msg) + 3 * sizeof(int)); + msg->count = 4; + msg->val[0] = r; + msg->val[1] = b; + msg->val[2] = g; + msg->val[3] = a; + edje_object_message_send(elm_layout_edje_get(button), EDJE_MESSAGE_INT_SET, 0, msg); + free(msg); +} + void QuickAccess::setEmptyView(bool empty) { BROWSER_LOGD("[%s:%d], empty: %d", __PRETTY_FUNCTION__, __LINE__, empty); diff --git a/services/QuickAccess/QuickAccess.h b/services/QuickAccess/QuickAccess.h index 637603d1..6d715d86 100644 --- a/services/QuickAccess/QuickAccess.h +++ b/services/QuickAccess/QuickAccess.h @@ -118,6 +118,7 @@ private: static void _thumbMostVisitedClicked(void * data, Evas_Object * obj, void * event_info); void setEmptyView(bool empty); void showNoMostVisitedLabel(); + static void setButtonColor(Evas_Object* button, int r, int b, int g, int a); static void _mostVisited_clicked(void * data, Evas_Object * obj, void * event_info); static void _quickAccess_clicked(void * data, Evas_Object * obj, void * event_info); @@ -154,14 +155,15 @@ private: static const int MOST_VISITED_PAGE = 1; static const int QUICKACCESS_PAGE = 0; static const int BOOKMARK_ITEM_WIDTH = 150; - static const int BOOKAMRK_ITEM_HEIGHT = 196; + static const int BOOKAMRK_ITEM_HEIGHT = 204; static const int BOOKMARK_ITEM_WIDTH_LANDSCAPE = 150; - static const int BOOKAMRK_ITEM_HEIGHT_LANDSCAPE = 196; + static const int BOOKAMRK_ITEM_HEIGHT_LANDSCAPE = 204; static const int MOSTVISITED_ITEM_WIDTH = 200; static const int MOSTVISITED_ITEM_HEIGHT = 208; static const int MOSTVISITED_ITEM_WIDTH_LANDSCAPE = 200; static const int MOSTVISITED_ITEM_HEIGHT_LANDSCAPE = 208; static const int HEADER_HEIGHT = 116+38; + static const int DEFAULT_BUTTON_COLOR = 190; }; } diff --git a/services/QuickAccess/edc/QuickAccess_mob.edc b/services/QuickAccess/edc/QuickAccess_mob.edc index 97a9e65b..8c8e30d2 100644 --- a/services/QuickAccess/edc/QuickAccess_mob.edc +++ b/services/QuickAccess/edc/QuickAccess_mob.edc @@ -1,5 +1,6 @@ #include "../../../core/Tools/edc/InvisibleButton.edc" #include "../../../core/Tools/edc/Spacer.edc" +#include "../../../core/Tools/edc/ColorClasses.edc" #include "BrowserPageControl_mob.edc" #define URI_INPUTBOX_LENGTH 1720 @@ -25,25 +26,43 @@ #define TOTAL_TILES_HEIGHT_LANDSCAPE 652 #define TOTAL_TILES_WIDTH_LANDSCAPE 1214 +#define GLIDE_EASE_OUT(duration) CUBIC_BEZIER (duration) 0.25 0.46 0.45 1.0 +#define BUTTON_NAVIFRAME_BACK_CORNER_RADIUS "10" +#define QA_BTN_WIDTH 138 +#define QA_BTN_HEIGHT 196 +#define TOP_PADDING 8 +#define ICON_SIZE 114 + #define DEVELOPMENT 1 + collections { base_scale: 2.6; -color_classes{ - color_class{ - name: "lbBgColor"; - color: 255 255 255 255; - } - color_class{ - name: "focusBgColor"; - color: 0 119 246 255; + color_classes { + color_class { + name: "button_normal"; + color: 190 190 190 255; + } + color_class { + name: "lbBgColor"; + color: 255 255 255 255; + } + color_class { + name: "focusBgColor"; + color: 0 119 246 255; + } + color_class { + name: "mainBgColor"; + color: 244 244 244 255; + } } - color_class{ - name: "transparent"; - color: 0 0 0 0; + + styles { + style { name: "bottom_lb"; + base: "font=Tizen:style=Regular font_size="26" align=center color=#ffffffff text_class=tizen wrap=mixed ellipsis=1.0"; + } } -} group { name: "elm/button/base/thumbButton"; @@ -82,7 +101,7 @@ group { type: RECT; scale: 1; description { - color: 244 244 244 255; + color_class: "mainBgColor"; state: "default" 0.0; align: 0.0 0.0; min: LAYOUT_WIDTH 0; @@ -409,9 +428,7 @@ group { scale: 1; description { state: "default" 0.0; fixed: 1 0; - align: 0.5 0.1; - min: 114 114; - max: 114 114; + align: 0.5 0.0; rel1 { relative: 0.0 0.0; to: "bg"; } @@ -422,14 +439,10 @@ group { description { state: "selected"; inherit: "default" 0.0; } - description { state: "landscape" 0.0; - inherit: "default" 0.0; - min: 114 114; - max: 114 114; - } } - swallow { "elm.button"; scale; + swallow { name: "elm.button"; + scale: 1; mouse_events: 1; repeat_events: 0; description { "default"; @@ -440,66 +453,7 @@ group { rel2.to: "bg"; } } - - ADD_SPACER_BELOW("title_spacer", "elm.swallow.icon", 0, 8) - - part { name: "text_bg"; - type: RECT; - scale: 1; - description { state: "default" 0.0; - min: 114 64; - max: 114 64; - align: 0.0 0.0; - visible: 0; - rel1 { - to: "title_spacer"; - relative: 0.0 1.0; - } - rel2 { - to: "bg"; - relative: 1.0 1.0; - } - } - description { state: "selected" 0.0; - inherit: "default" 0.0; - color_class: "focusBgColor"; - } - description { state: "landscape" 0.0; - inherit: "default" 0.0; - min: 114 64; - max: 114 64; - } - description { state: "selected_landscape" 0.0; - inherit: "landscape" 0.0; - color_class: "focusBgColor"; - } - } - - part { name: "elm.text"; - type: TEXT; - scale: 1; - description { state: "default" 0.0; - min: 114 64; - max: 114 64; - align: 0.5 0.0; - color: 80 80 80 255; - rel1 { - to: "text_bg"; - relative: 0.0 0.0; - } - rel2 { - to: "text_bg"; - relative: 1.0 1.0; - } - text { - font: "Sans"; - size: 26; - align: 0.5 0; - } - } - } } - programs {} } group { @@ -745,5 +699,314 @@ group { } programs {} } + +group { name: "elm/button/base/roundedrect"; + data.item: "vector_ux" "no_bg"; + data.item: "corner_radius" BUTTON_NAVIFRAME_BACK_CORNER_RADIUS; + + images { + image: "mask.png" COMP; + } + + parts { + part { name: "button_bg"; + type: SPACER; + scale: 1; + mouse_events: 0; + description { state: "default" 0.0; + min: QA_BTN_WIDTH QA_BTN_HEIGHT; + max: QA_BTN_WIDTH QA_BTN_HEIGHT; + fixed: 1 1; + } + } + part { name: "icon_spacer"; + type: RECT; + scale: 1; + mouse_events: 0; + description { + visible: 0; + align: 0.0 0.0; + min: QA_BTN_WIDTH TOP_PADDING; + max: QA_BTN_WIDTH TOP_PADDING; + rel1 { relative: 0.0 0.0; to: "button_bg"; } + rel2 { relative: 1.0 1.0; to: "button_bg"; } + } + } + part { name: "button_icon"; + type: RECT; + scale: 1; + mouse_events: 0; + description { state: "default" 0.0; + min: ICON_SIZE ICON_SIZE; + max: ICON_SIZE ICON_SIZE; + fixed: 1 1; + color_class: "button_normal"; + align: 0.5 0.0; + rel1 { relative: 0.0 1.0; to: "icon_spacer"; } + rel2 { relative: 1.0 1.0; to: "button_bg"; } + } + description { state: "favicon" 0.0; + inherit: "default" 0.0; + visible: 0; + } + } + part { name: "button_image"; + type: SWALLOW; + scale: 1; + mouse_events: 0; + description { state: "default" 0.0; + visible: 0; + rel1 { relative: 0.0 0.0; to: "button_icon"; } + rel2 { relative: 1.0 1.0; to: "button_icon"; } + } + description { state: "favicon" 0.0; + inherit: "default" 0.0; + visible: 1; + } + } + part { name: "mask"; + type: IMAGE; + scale: 1; + mouse_events: 0; + description { + image.normal: "mask.png"; + rel1 { relative: 0.0 0.0; to: "button_icon"; } + rel2 { relative: 1.0 1.0; to: "button_icon"; } + } + } + part { name: "center_label"; + type: TEXT; + scale: 1; + mouse_events: 0; + description { state: "default" 0.0; + align: 0.0 0.0; + color_class: "ATO003"; + rel1 { relative: 0.0 0.0; to: "button_icon"; } + rel2 { relative: 1.0 1.0; to: "button_icon"; } + text { + text: ""; + font: "Tizen"; + size: 45; + align: 0.5 0.5; + } + } + } + part { name: "text_spacer"; + type: RECT; + scale: 1; + mouse_events: 0; + description { + visible: 0; + align: 0.0 0.0; + color: 255 0 0 255; + min: 0 8; + max: 0 8; + rel1 { relative: 0.0 1.0; to: "button_icon"; } + rel2 { relative: 1.0 1.0; to: "button_bg"; } + } + } + part { name: "button_text"; + type: TEXTBLOCK; + scale: 1; + mouse_events: 0; + description { state: "default" 0.0; + align: 0.5 0.0; + color: 0 0 0 255; + min: ICON_SIZE 64; + max: ICON_SIZE 64; + rel1 { relative: 0.0 1.0; + to_x: "button_bg"; + to_y: "text_spacer"; + } + rel2 { relative: 1.0 1.0; to: "button_bg"; } + text { + style: "bottom_lb"; + align: 0.5 0.0; + } + } + } + part { name: "effect_spacer"; + type: SPACER; + scale: 1; + description { state: "default" 0.0; + fixed: 1 1; + rel1.relative: 0.5 0.5; + rel2.relative: 0.5 0.5; + min: QA_BTN_WIDTH QA_BTN_HEIGHT; + max: QA_BTN_WIDTH QA_BTN_HEIGHT; + } + } + part { name: "tizen_vg_shape"; + type: SWALLOW; + clip_to: "tizen_vg_shape_clipper"; + scale: 1; + description { state: "default" 0.0; + fixed: 1 1; + rel1.relative: 0.5 0.5; + rel2.relative: 0.5 0.5; + } + description { state: "ready" 0.0; + rel1.to: "effect_spacer"; + rel2.to: "effect_spacer"; + rel1.relative: 0.15 0.15; + rel2.relative: 0.85 0.85; + } + description { state: "pressed" 0.0; + inherit: "ready" 0.0; + rel1.relative: 0.0 0.0; + rel2.relative: 1.0 1.0; + } + } + part { name: "tizen_vg_shape_clipper"; + type: RECT; + description { state: "default" 0.0; + color_class: "transparent"; + visible: 0; + fixed: 1 1; + rel1.to: "tizen_vg_shape"; + rel2.to: "tizen_vg_shape"; + } + description { state: "ready" 0.0; + inherit: "default" 0.0; + visible: 1; + color_class: "B042"; + } + description { state: "pressed" 0.0; + inherit: "default" 0.0; + visible: 1; + color_class: "B042"; + } + } + part { name: "event"; + type: RECT; + description { state: "default" 0.0; + rel1.to: "button_bg"; + rel2.to: "button_bg"; + color: 0 0 0 0; + } + } + } + script { + public mouse_down = 0; + public multi_down = 0; + public animate = 0; + public disabled = 0; + + public message(Msg_Type:type, id, ...) { + if ((type == MSG_INT_SET) && (id == 0)) { + new r, g, b, a; + r = getarg(2); + g = getarg(3); + b = getarg(4); + a = getarg(5); + custom_state(PART:"button_icon","default",0.0); + set_state_val(PART:"button_icon", STATE_COLOR, r, g, b, a); + set_state(PART:"button_icon","custom",0.0); + } + } + } + programs { + program { name: "pressed_effect"; + action: STATE_SET "ready" 0.0; + target: "tizen_vg_shape_clipper"; + target: "tizen_vg_shape"; + after: "pressed_effect2"; + } + program { name: "pressed_effect2"; + action: STATE_SET "pressed" 0.0; + target: "tizen_vg_shape_clipper"; + target: "tizen_vg_shape"; + transition: GLIDE_EASE_OUT(0.15); + after: "pressed_effect3"; + } + program { name: "pressed_effect3"; + script { + set_int(animate, 0); + } + } + program { name: "delay_unpressed_effect"; + in: 0.1 0.0; + after: "unpressed_effect"; + } + program { name: "unpressed_effect"; + script { + run_program(PROGRAM:"unpressed_effect2"); + } + } + program { name: "unpressed_effect2"; + action: STATE_SET "ready" 0.0; + target: "tizen_vg_shape_clipper"; + transition: GLIDE_EASE_OUT(0.45); + after: "unpressed_effect3"; + } + program { name: "unpressed_effect3"; + action: STATE_SET "default" 0.0; + target: "tizen_vg_shape"; + target: "tizen_vg_shape_clipper"; + } + program { name: "pressed"; + signal: "mouse,down,1*"; + source: "event"; + script { + if ((get_int(multi_down) == 0) && (get_int(mouse_down) == 0) && (get_int(disabled) == 0)) { + stop_program(PROGRAM:"delay_unpressed_effect"); + set_int(mouse_down, 1); + set_int(animate, 1); + emit("elm,action,press", ""); + run_program(PROGRAM:"pressed_effect"); + } + } + } + program { name: "unpressed"; + signal: "mouse,up,1"; + source: "event"; + script { + if (get_int(mouse_down) == 1) { + set_int(mouse_down, 0); + if (get_int(disabled) == 0) { + if (get_int(animate) == 0) { + run_program(PROGRAM:"unpressed_effect"); + } else { + set_state(PART:"tizen_vg_shape", "pressed", 0.0); + set_state(PART:"tizen_vg_shape_clipper", "pressed", 0.0); + set_int(animate, 0); + run_program(PROGRAM:"delay_unpressed_effect"); + } + emit("elm,action,unpress", ""); + } + } + } + } + program { name: "button_click"; + signal: "mouse,clicked,1"; + source: "event"; + script { + if ((get_int(multi_down) == 0) && (get_int(disabled) == 0)) { + run_program(PROGRAM:"clicked_signal"); + } + } + } + program { name: "clicked_signal"; + in: 0.001 0.0; + action: SIGNAL_EMIT "elm,action,click" ""; + } + program { name: "show_rectangle"; + signal: "show,bg,rectangle"; + source: "event"; + action: STATE_SET "default" 0.0; + target: "button_icon"; + target: "button_image"; + } + program { name: "show_favicon"; + signal: "show,bg,favicon"; + source: "event"; + action: STATE_SET "favicon" 0.0; + target: "button_icon"; + target: "button_image"; + } + } +} + + } diff --git a/services/QuickAccess/images_mob/internet_no_quick_bg.png b/services/QuickAccess/images_mob/internet_no_quick_bg.png new file mode 100644 index 00000000..defde3d4 Binary files /dev/null and b/services/QuickAccess/images_mob/internet_no_quick_bg.png differ diff --git a/services/QuickAccess/images_mob/mask.png b/services/QuickAccess/images_mob/mask.png new file mode 100644 index 00000000..a1ca4772 Binary files /dev/null and b/services/QuickAccess/images_mob/mask.png differ diff --git a/services/WebPageUI/edc/CustomButton.edc b/services/WebPageUI/edc/CustomButton.edc index b1d3894d..2f18a871 100644 --- a/services/WebPageUI/edc/CustomButton.edc +++ b/services/WebPageUI/edc/CustomButton.edc @@ -1,4 +1,5 @@ #include "ImageButton.edc" +#include "../../../core/Tools/edc/ColorClasses.edc" #define BUTTON_MIN_WIDTH_INC 50 #define BUTTON_MIN_HEIGHT_INC 50 @@ -27,10 +28,6 @@ IMAGE_BUTTON("toolbar_input_ic_security_off.png", BUTTON_ICON_DEFAULT_HEIGHT_INC name: "uri_bg"; color: 255 255 255 255; } - color_class { - name: "highlight"; - color: 224 237 251 255; - } } script { public mouse_down = 0; @@ -118,9 +115,10 @@ IMAGE_BUTTON("toolbar_input_ic_security_off.png", BUTTON_ICON_DEFAULT_HEIGHT_INC description { state: "ready" 0.0; inherit: "default" 0.0; visible: 1; + color_class: "transparent"; } description { state: "pressed" 0.0; - color_class: "highlight"; + color_class: "B042"; } } part { name: "padding_left_top";